diff options
| author | taehoon <th.dev91@gmail.com> | 2019-04-06 13:45:28 -0400 |
|---|---|---|
| committer | taehoon <th.dev91@gmail.com> | 2019-04-17 11:32:49 -0400 |
| commit | ecff6acf2d651931e06eebfa8856d940aedb2bee (patch) | |
| tree | 080100a22deecc56519ccf4a55180637fce0d965 | |
| parent | 3f5e798de79b401945d2a0ac992ca5ee6115d79f (diff) | |
support indeterminate checkbox state
| -rw-r--r-- | src/components/checkbox/checkbox.vue | 10 | ||||
| -rw-r--r-- | src/components/selectable_list/selectable_list.js | 6 | ||||
| -rw-r--r-- | src/components/selectable_list/selectable_list.vue | 2 |
3 files changed, 15 insertions, 3 deletions
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index 8f32e96b..4152b049 100644 --- a/src/components/checkbox/checkbox.vue +++ b/src/components/checkbox/checkbox.vue @@ -1,6 +1,6 @@ <template> <label class="checkbox"> - <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)"> + <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" :indeterminate.prop="indeterminate"> <i class="checkbox-indicator" /> <span v-if="!!$slots.default"><slot></slot></span> </label> @@ -12,7 +12,7 @@ export default { prop: 'checked', event: 'change' }, - props: ['checked'] + props: ['checked', 'indeterminate'] } </script> @@ -57,6 +57,12 @@ export default { color: var(--text, $fallback--text); } + &:indeterminate + .checkbox-indicator::before { + content: '–'; + color: $fallback--text; + color: var(--text, $fallback--text); + } + &:disabled + .checkbox-indicator::before { opacity: .5; } diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js index b60399ec..b8bd4f75 100644 --- a/src/components/selectable_list/selectable_list.js +++ b/src/components/selectable_list/selectable_list.js @@ -24,6 +24,12 @@ const SelectableList = { computed: { allSelected () { return !this.items.find(item => !this.isSelected(item)) + }, + noneSelected () { + return !this.items.find(item => this.isSelected(item)) + }, + someSelected () { + return !this.allSelected && !this.noneSelected } }, methods: { diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index 292704c4..5b8693c4 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -2,7 +2,7 @@ <div class="selectable-list"> <div class="selectable-list-header" v-if="items.length > 0"> <div class="selectable-list-checkbox-wrapper"> - <Checkbox :checked="allSelected" @change="toggleAll">{{ $t('selectable_list.select_all') }}</Checkbox> + <Checkbox :checked="allSelected" @change="toggleAll" :indeterminate="someSelected">{{ $t('selectable_list.select_all') }}</Checkbox> </div> <div class="selectable-list-header-actions"> <slot name="header" :selected="selected" /> |