AkkomaGang/akkoma-fe
4
13
Fork 56
Code Issues 74 Pull requests 14 Projects Releases 1 Wiki Activity

refactor selectable-list using list component

Browse source
This commit is contained in:
taehoon 2019-04-03 23:54:14 -04:00
parent d806038ad3
commit 792ae1697e
3 changed files with 16 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/list/list.vue
View file

@ -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);

2
src/components/selectable_list/selectable_list.js
View file

@ -1,7 +1,9 @@
import List from '../list/list.vue'
import Checkbox from '../checkbox/checkbox.js'
const SelectableList = {
components: {
List,
Checkbox
},
props: {

37
src/components/selectable_list/selectable_list.vue
View file

@ -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>