fix indeterminate state animation

This commit is contained in:
Henry Jameson 2023-05-23 18:52:10 +03:00
parent 6b0d72937e
commit 99f85069b8
1 changed files with 24 additions and 2 deletions

View File

@ -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;
}