59 lines
2.1 KiB
JavaScript
59 lines
2.1 KiB
JavaScript
import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
|
|
// Components
|
|
import { makeVSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.mjs"; // Composables
|
|
import { IconValue } from "../../composables/icons.mjs";
|
|
import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
|
|
import { computed } from 'vue';
|
|
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
|
export const makeVCheckboxBtnProps = propsFactory({
|
|
indeterminate: Boolean,
|
|
indeterminateIcon: {
|
|
type: IconValue,
|
|
default: '$checkboxIndeterminate'
|
|
},
|
|
...makeVSelectionControlProps({
|
|
falseIcon: '$checkboxOff',
|
|
trueIcon: '$checkboxOn'
|
|
})
|
|
}, 'VCheckboxBtn');
|
|
export const VCheckboxBtn = genericComponent()({
|
|
name: 'VCheckboxBtn',
|
|
props: makeVCheckboxBtnProps(),
|
|
emits: {
|
|
'update:modelValue': value => true,
|
|
'update:indeterminate': value => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const indeterminate = useProxiedModel(props, 'indeterminate');
|
|
const model = useProxiedModel(props, 'modelValue');
|
|
function onChange(v) {
|
|
if (indeterminate.value) {
|
|
indeterminate.value = false;
|
|
}
|
|
}
|
|
const falseIcon = computed(() => {
|
|
return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
|
|
});
|
|
const trueIcon = computed(() => {
|
|
return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
|
|
});
|
|
useRender(() => {
|
|
const controlProps = omit(VSelectionControl.filterProps(props), ['modelValue']);
|
|
return _createVNode(VSelectionControl, _mergeProps(controlProps, {
|
|
"modelValue": model.value,
|
|
"onUpdate:modelValue": [$event => model.value = $event, onChange],
|
|
"class": ['v-checkbox-btn', props.class],
|
|
"style": props.style,
|
|
"type": "checkbox",
|
|
"falseIcon": falseIcon.value,
|
|
"trueIcon": trueIcon.value,
|
|
"aria-checked": indeterminate.value ? 'mixed' : undefined
|
|
}), slots);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VCheckboxBtn.mjs.map
|