support indeterminate checkbox state

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" />