diff options
Diffstat (limited to 'src/components/checkbox/checkbox.vue')
| -rw-r--r-- | src/components/checkbox/checkbox.vue | 28 |
1 files changed, 26 insertions, 2 deletions
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index 42f89be9..b8b77e7c 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,24 @@ export default { 'indeterminate', 'disabled' ], - emits: ['update:modelValue'] + emits: ['update:modelValue'], + data: (vm) => ({ + indeterminateTransitionFix: vm.indeterminate + }), + watch: { + indeterminate (e) { + if (e) { + this.indeterminateTransitionFix = true + } + } + }, + methods: { + onTransitionEnd (e) { + if (!this.indeterminate) { + this.indeterminateTransitionFix = false + } + } + } } </script> @@ -98,6 +116,12 @@ export default { } } + &.indeterminate-fix { + input[type="checkbox"] + .checkbox-indicator::before { + content: "–"; + } + } + & > span { margin-left: 0.5em; } |
