routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+58
@@ -0,0 +1,58 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { makeVSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.js"; // Composables
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
|
||||
import { toRef } from 'vue';
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // 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, {
|
||||
slots
|
||||
}) {
|
||||
const indeterminate = useProxiedModel(props, 'indeterminate');
|
||||
const model = useProxiedModel(props, 'modelValue');
|
||||
function onChange(v) {
|
||||
if (indeterminate.value) {
|
||||
indeterminate.value = false;
|
||||
}
|
||||
}
|
||||
const falseIcon = toRef(() => {
|
||||
return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
|
||||
});
|
||||
const trueIcon = toRef(() => {
|
||||
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.js.map
|
||||
Reference in New Issue
Block a user