refactor selectable-list using list component

3 files changed, 16 insertions, 24 deletions

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index d8c9f5a3..1159898d 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -29,7 +29,6 @@ export default {
 
 .list {
   &-item {
-    display: flex;
     border-bottom: 1px solid;
     border-bottom-color: $fallback--border;
     border-bottom-color: var(--border, $fallback--border);
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 7a724144..1fdd5a67 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -1,7 +1,9 @@
+import List from '../list/list.vue'
 import Checkbox from '../checkbox/checkbox.js'
 
 const SelectableList = {
   components: {
+    List,
     Checkbox
   },
   props: {
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 25b8e56b..e55a4ad3 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,15 +1,14 @@
 <template>
-  <div class="selectable-list">
-    <div v-for="item in items" :key="getKey(item)" class="selectable-list-item" :class="{ 'selectable-list-item-selected': isSelected(item) }">
-      <div class="selectable-list-checkbox-wrapper">
-        <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
+  <List class="selectable-list" :items="items" :getKey="getKey">
+    <template slot="item" scope="p">
+      <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
+        <div class="selectable-list-checkbox-wrapper">
+          <Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
+        </div>
+        <slot name="item" :item="p.item" />
       </div>
-      <slot name="item" :item="item" />
-    </div>
-    <div class="selectable-list-empty-content faint" v-if="items.length === 0">
-      <slot name="empty" />
-    </div>
-  </div>
+    </template>
+  </List>
 </template>
 
 <script src="./selectable_list.js"></script>
@@ -18,26 +17,18 @@
 @import '../../_variables.scss';
 
 .selectable-list {
-  &-item {
+  &-item-inner {
     display: flex;
-    border-bottom: 1px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
+  }
 
-    &-selected {
-      background-color: $fallback--lightBg;
-      background-color: var(--lightBg, $fallback--lightBg);
-    }
+  &-item-selected-inner {
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
   }
 
   &-checkbox-wrapper {
     padding: 10px;
     flex: none;
   }
-
-  &-empty-content {
-    text-align: center;
-    padding: 10px;
-  }
 }
 </style>