diff options
Diffstat (limited to 'src/components/selectable_list/selectable_list.vue')
| -rw-r--r-- | src/components/selectable_list/selectable_list.vue | 34 |
1 files changed, 24 insertions, 10 deletions
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index d8938062..e8c5d09b 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -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; } } |