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> <template>
<label <label
class="checkbox" class="checkbox"
:class="{ disabled, indeterminate }" :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
> >
<input <input
type="checkbox" type="checkbox"
@ -14,6 +14,7 @@
<i <i
class="checkbox-indicator" class="checkbox-indicator"
:aria-hidden="true" :aria-hidden="true"
@transitionend.capture="onTransitionEnd"
/> />
<span <span
v-if="!!$slots.default" v-if="!!$slots.default"
@ -31,7 +32,22 @@ export default {
'indeterminate', 'indeterminate',
'disabled' '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> </script>
@ -98,6 +114,12 @@ export default {
} }
} }
&.indeterminate-fix {
input[type="checkbox"] + .checkbox-indicator::before {
content: "";
}
}
& > span { & > span {
margin-left: 0.5em; margin-left: 0.5em;
} }