From 468aec0de1b7e25a66eb9e6ef44cf9787d0c6d86 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:14:43 -0400
Subject: rewrite checkbox component as non-functional

---
 src/components/checkbox/checkbox.vue | 63 ++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/checkbox/checkbox.vue

(limited to 'src/components/checkbox/checkbox.vue')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
new file mode 100644
index 00000000..5f55c5bf
--- /dev/null
+++ b/src/components/checkbox/checkbox.vue
@@ -0,0 +1,63 @@
+<template>
+  <label class="checkbox">
+    <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
+    <i class="checkbox-indicator" />
+    <span><slot></slot></span>
+  </label>
+</template>
+
+<script>
+export default {
+  props: ['value']
+}
+</script>
+
+<style lang="scss">
+.checkbox {
+  position: relative;
+  display: inline-block;
+  padding-left: 1.2em;
+  min-height: 1.2em;
+
+  &-indicator::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    content: '✔';
+    transition: color 200ms;
+    width: 1.1em;
+    height: 1.1em;
+    border-radius: $fallback--checkboxRadius;
+    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+    box-shadow: 0px 0px 2px black inset;
+    box-shadow: var(--inputShadow);
+    background-color: $fallback--fg;
+    background-color: var(--input, $fallback--fg);
+    vertical-align: top;
+    text-align: center;
+    line-height: 1.1em;
+    font-size: 1.1em;
+    color: transparent;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  input[type=checkbox] {
+    display: none;
+
+    &:checked + .checkbox-indicator::before {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
+    &:disabled + .checkbox-indicator::before {
+      opacity: .5;
+    }
+  }
+
+  & > span {
+    margin-left: .5em;
+  }
+}
+</style>
-- 
cgit v1.2.3-70-g09d2


From 8088043a0c811a2e215e12715029ca8563ac2304 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:21:41 -0400
Subject: import scss variables

---
 src/components/checkbox/checkbox.vue | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/components/checkbox/checkbox.vue')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 5f55c5bf..b821a4f6 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -13,6 +13,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .checkbox {
   position: relative;
   display: inline-block;
-- 
cgit v1.2.3-70-g09d2


From 988849116d75ab02ae6da5998c751133ea13f531 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:24:28 -0400
Subject: update model and props properties

---
 src/components/checkbox/checkbox.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/components/checkbox/checkbox.vue')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index b821a4f6..84bea53e 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="value" @change="$emit('input', $event.target.checked)">
+    <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
     <i class="checkbox-indicator" />
     <span><slot></slot></span>
   </label>
@@ -8,7 +8,11 @@
 
 <script>
 export default {
-  props: ['value']
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: ['checked']
 }
 </script>
 
-- 
cgit v1.2.3-70-g09d2


From 3f5e798de79b401945d2a0ac992ca5ee6115d79f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:25:53 -0400
Subject: render span tag only if it has content

---
 src/components/checkbox/checkbox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/checkbox/checkbox.vue')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 84bea53e..8f32e96b 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -2,7 +2,7 @@
   <label class="checkbox">
     <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
     <i class="checkbox-indicator" />
-    <span><slot></slot></span>
+    <span v-if="!!$slots.default"><slot></slot></span>
   </label>
 </template>
 
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src/components/checkbox/checkbox.vue')

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" />
-- 
cgit v1.2.3-70-g09d2