pleroma-fe

commit: 99f85069b8a3bc44c3c0a5c6cac35dbfbd740dd5
parent 6b0d72937e19c87ea8a925b41a1475704bbd1a56
Author: Henry Jameson <me@hjkos.com>
Date:   Tue, 23 May 2023 18:52:10 +0300

fix indeterminate state animation

Diffstat:
M
src/components/checkbox/checkbox.vue
26
++++++++++++++++++++++++--

1 file changed, 24 insertions(+), 2 deletions(-)
diff --git 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;
   }