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;
display: inline-block;
padding-left: 1.2em;
min-height: 1.2em;
&-indicator::before {
position: absolute;

View file

@ -1,7 +1,7 @@
<template>
<div class="list">
<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 class="list-empty-content faint" v-if="items.length === 0 && !!$slots.empty">
<slot name="empty" />

View file

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

View file

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