therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add header to selectable-list component

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

34
src/components/selectable_list/selectable_list.vue
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;
}
}