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