From 792ae1697e1a3710a6f12eb70a3c81b0318f9515 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:54:14 -0400
Subject: refactor selectable-list using list component

---
 src/components/selectable_list/selectable_list.vue | 37 ++++++++--------------
 1 file changed, 14 insertions(+), 23 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

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>
-- 
cgit v1.2.3-70-g09d2