add border-bottom style to the list component as well

1 files changed, 16 insertions, 1 deletions

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index f361e3b1..d8c9f5a3 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="list">
-    <slot name="item" v-for="item in items" :item="item" />
+    <div v-for="item in items" class="list-item" :key="getKey(item)">
+      <slot name="item" :item="item" />
+    </div>
     <div class="list-empty-content faint" v-if="items.length === 0">
       <slot name="empty" />
     </div>
@@ -13,13 +15,26 @@ export default {
     items: {
       type: Array,
       default: () => []
+    },
+    getKey: {
+      type: Function,
+      default: item => item
     }
   }
 }
 </script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .list {
+  &-item {
+    display: flex;
+    border-bottom: 1px solid;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+  }
+
   &-empty-content {
     text-align: center;
     padding: 10px;