add header to selectable-list component

This commit is contained in:
taehoon 2019-04-04 04:32:36 -04:00
parent 83faa96f1b
commit cf2c411db3
4 changed files with 52 additions and 15 deletions

View file

@ -4,6 +4,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
padding-left: 1.2em; padding-left: 1.2em;
min-height: 1.2em;
&-indicator::before { &-indicator::before {
position: absolute; position: absolute;

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="list"> <div class="list">
<div v-for="item in items" class="list-item" :key="getKey(item)"> <div v-for="item in items" class="list-item" :key="getKey(item)">
<slot name="item" :item="item" :keyVal="getKey(item)" /> <slot name="item" :item="item" />
</div> </div>
<div class="list-empty-content faint" v-if="items.length === 0 && !!$slots.empty"> <div class="list-empty-content faint" v-if="items.length === 0 && !!$slots.empty">
<slot name="empty" /> <slot name="empty" />

View file

@ -6,14 +6,32 @@ const SelectableList = {
List, List,
Checkbox Checkbox
}, },
props: List.props, props: {
items: {
type: Array,
default: () => []
},
getKey: {
type: Function,
default: item => item.id
}
},
data () { data () {
return { return {
selected: [] selected: []
} }
}, },
computed: {
allSelected () {
return !this.items.find(item => !this.isSelected(item))
}
},
methods: { methods: {
toggle (checked, key) { isSelected (item) {
return this.selected.indexOf(this.getKey(item)) !== -1
},
toggle (checked, item) {
const key = this.getKey(item)
const oldChecked = this.isSelected(key) const oldChecked = this.isSelected(key)
if (checked !== oldChecked) { if (checked !== oldChecked) {
if (checked) { if (checked) {
@ -23,8 +41,12 @@ const SelectableList = {
} }
} }
}, },
isSelected (key) { toggleAll (value) {
return this.selected.indexOf(key) !== -1 if (value) {
this.selected = this.items.map(this.getKey)
} else {
this.selected = []
}
} }
} }
} }

View file

@ -1,14 +1,21 @@
<template> <template>
<List class="selectable-list" :items="items" :getKey="getKey"> <div class="selectable-list">
<template slot="item" scope="p"> <div class="selectable-list-header">
<div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.keyVal) }"> <div class="selectable-list-checkbox-wrapper">
<div class="selectable-list-checkbox-wrapper"> <Checkbox :checked="allSelected" @change="toggleAll" />
<Checkbox :checked="isSelected(p.keyVal)" @change="checked => toggle(checked, p.keyVal)" />
</div>
<slot name="item" :item="p.item" />
</div> </div>
</template> </div>
</List> <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>
</template>
</List>
</div>
</template> </template>
<script src="./selectable_list.js"></script> <script src="./selectable_list.js"></script>
@ -19,6 +26,7 @@
.selectable-list { .selectable-list {
&-item-inner { &-item-inner {
display: flex; display: flex;
align-items: center;
} }
&-item-selected-inner { &-item-selected-inner {
@ -26,8 +34,14 @@
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--lightBg, $fallback--lightBg);
} }
&-header {
display: flex;
align-items: center;
padding: 0.6em 0;
}
&-checkbox-wrapper { &-checkbox-wrapper {
padding: 10px; padding: 0 10px;
flex: none; flex: none;
} }
} }