support indeterminate checkbox state

This commit is contained in:
taehoon 2019-04-06 13:45:28 -04:00
parent 3f5e798de7
commit ecff6acf2d
3 changed files with 15 additions and 3 deletions

View file

@ -1,6 +1,6 @@
<template>
<label class="checkbox">
<input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
<input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" :indeterminate.prop="indeterminate">
<i class="checkbox-indicator" />
<span v-if="!!$slots.default"><slot></slot></span>
</label>
@ -12,7 +12,7 @@ export default {
prop: 'checked',
event: 'change'
},
props: ['checked']
props: ['checked', 'indeterminate']
}
</script>
@ -57,6 +57,12 @@ export default {
color: var(--text, $fallback--text);
}
&:indeterminate + .checkbox-indicator::before {
content: '';
color: $fallback--text;
color: var(--text, $fallback--text);
}
&:disabled + .checkbox-indicator::before {
opacity: .5;
}