From ecff6acf2d651931e06eebfa8856d940aedb2bee Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:45:28 -0400
Subject: [PATCH] support indeterminate checkbox state
---
src/components/checkbox/checkbox.vue | 10 ++++++++--
src/components/selectable_list/selectable_list.js | 6 ++++++
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" />