user management

src/components/selectable_list/selectable_list.js

@@ -7,6 +7,10 @@ const SelectableList = {
     Checkbox
   },
   props: {
+    boxOnly: {
+       type: Boolean,
+       default: false
+    },
     items: {
       type: Array,
       default: () => []

src/components/selectable_list/selectable_list.vue

@@ -27,6 +27,7 @@
     >
       <template #item="{item}">
         <div
+          v-if="!boxOnly"
           class="selectable-list-item-inner"
           :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
           @click.stop="toggle(!isSelected(item), item)"
@@ -43,6 +44,26 @@
             :item="item"
           />
         </div>
+        <div
+          v-if="boxOnly"
+          class="selectable-list-item-inner"
+          :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
+        >
+          <div
+            class="selectable-list-checkbox-wrapper"
+            @click.stop="toggle(!isSelected(item), item)"
+          >
+            <Checkbox
+              :model-value="isSelected(item)"
+              @update:model-value="checked => toggle(checked, item)"
+              @click.stop
+            />
+          </div>
+          <slot
+            name="item"
+            :item="item"
+          />
+        </div>
       </template>
       <template #empty>
         <slot name="empty" />