From 99f85069b8a3bc44c3c0a5c6cac35dbfbd740dd5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 May 2023 18:52:10 +0300
Subject: fix indeterminate state animation

---
 src/components/checkbox/checkbox.vue | 26 ++++++++++++++++++++++++--
 1 file changed, 24 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 42f89be9..274e8d0b 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,7 +1,7 @@
 <template>
   <label
     class="checkbox"
-    :class="{ disabled, indeterminate }"
+    :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
   >
     <input
       type="checkbox"
@@ -14,6 +14,7 @@
     <i
       class="checkbox-indicator"
       :aria-hidden="true"
+      @transitionend.capture="onTransitionEnd"
     />
     <span
       v-if="!!$slots.default"
@@ -31,7 +32,22 @@ export default {
     'indeterminate',
     'disabled'
   ],
-  emits: ['update:modelValue']
+  emits: ['update:modelValue'],
+  data: () => ({
+    indeterminateTransitionFix: false
+  }),
+  watch: {
+    indeterminate (e) {
+      if (e) {
+        this.indeterminateTransitionFix = true
+      }
+    }
+  },
+  methods: {
+    onTransitionEnd (e) {
+      this.indeterminateTransitionFix = false
+    }
+  }
 }
 </script>
 
@@ -98,6 +114,12 @@ export default {
     }
   }
 
+  &.indeterminate-fix {
+    input[type="checkbox"] + .checkbox-indicator::before {
+      content: "–";
+    }
+  }
+
   & > span {
     margin-left: 0.5em;
   }
-- 
cgit v1.2.3-70-g09d2


From 9f77f910b86ada3ef9f7e537003ef62ec193c741 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 May 2023 11:29:59 +0300
Subject: fix animation when ideterminate is the initial state

---
 src/components/checkbox/checkbox.vue | 4 ++--
 1 file changed, 2 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 274e8d0b..7d4e0e95 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -33,8 +33,8 @@ export default {
     'disabled'
   ],
   emits: ['update:modelValue'],
-  data: () => ({
-    indeterminateTransitionFix: false
+  data: (vm) => ({
+    indeterminateTransitionFix: vm.indeterminate
   }),
   watch: {
     indeterminate (e) {
-- 
cgit v1.2.3-70-g09d2


From ed34b07b3f5e902a59638e3c1fd138a5d90d2d03 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 May 2023 11:44:26 +0300
Subject: fix transition when resetting to indeterminate state

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

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

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 7d4e0e95..b8b77e7c 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -45,7 +45,9 @@ export default {
   },
   methods: {
     onTransitionEnd (e) {
-      this.indeterminateTransitionFix = false
+      if (!this.indeterminate) {
+        this.indeterminateTransitionFix = false
+      }
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2

