From d806038ad3e78314610e1d0b496c19e0ccb40a0f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:45:45 -0400
Subject: [PATCH] add border-bottom style to the list component as well
---
src/components/list/list.vue | 17 ++++++++++++++++-
1 file changed, 16 insertions(+), 1 deletion(-)
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;