75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
|
import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
|
||
|
|
// Styles
|
||
|
|
import "./VCheckbox.css";
|
||
|
|
|
||
|
|
// Components
|
||
|
|
import { makeVCheckboxBtnProps, VCheckboxBtn } from "./VCheckboxBtn.mjs";
|
||
|
|
import { makeVInputProps, VInput } from "../VInput/VInput.mjs"; // Composables
|
||
|
|
import { useFocus } from "../../composables/focus.mjs";
|
||
|
|
import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
||
|
|
export const makeVCheckboxProps = propsFactory({
|
||
|
|
...makeVInputProps(),
|
||
|
|
...omit(makeVCheckboxBtnProps(), ['inline'])
|
||
|
|
}, 'VCheckbox');
|
||
|
|
export const VCheckbox = genericComponent()({
|
||
|
|
name: 'VCheckbox',
|
||
|
|
inheritAttrs: false,
|
||
|
|
props: makeVCheckboxProps(),
|
||
|
|
emits: {
|
||
|
|
'update:modelValue': value => true,
|
||
|
|
'update:focused': focused => true
|
||
|
|
},
|
||
|
|
setup(props, _ref) {
|
||
|
|
let {
|
||
|
|
attrs,
|
||
|
|
slots
|
||
|
|
} = _ref;
|
||
|
|
const model = useProxiedModel(props, 'modelValue');
|
||
|
|
const {
|
||
|
|
isFocused,
|
||
|
|
focus,
|
||
|
|
blur
|
||
|
|
} = useFocus(props);
|
||
|
|
const uid = getUid();
|
||
|
|
const id = computed(() => props.id || `checkbox-${uid}`);
|
||
|
|
useRender(() => {
|
||
|
|
const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
|
||
|
|
const inputProps = VInput.filterProps(props);
|
||
|
|
const checkboxProps = VCheckboxBtn.filterProps(props);
|
||
|
|
return _createVNode(VInput, _mergeProps({
|
||
|
|
"class": ['v-checkbox', props.class]
|
||
|
|
}, rootAttrs, inputProps, {
|
||
|
|
"modelValue": model.value,
|
||
|
|
"onUpdate:modelValue": $event => model.value = $event,
|
||
|
|
"id": id.value,
|
||
|
|
"focused": isFocused.value,
|
||
|
|
"style": props.style
|
||
|
|
}), {
|
||
|
|
...slots,
|
||
|
|
default: _ref2 => {
|
||
|
|
let {
|
||
|
|
id,
|
||
|
|
messagesId,
|
||
|
|
isDisabled,
|
||
|
|
isReadonly
|
||
|
|
} = _ref2;
|
||
|
|
return _createVNode(VCheckboxBtn, _mergeProps(checkboxProps, {
|
||
|
|
"id": id.value,
|
||
|
|
"aria-describedby": messagesId.value,
|
||
|
|
"disabled": isDisabled.value,
|
||
|
|
"readonly": isReadonly.value
|
||
|
|
}, controlAttrs, {
|
||
|
|
"modelValue": model.value,
|
||
|
|
"onUpdate:modelValue": $event => model.value = $event,
|
||
|
|
"onFocus": focus,
|
||
|
|
"onBlur": blur
|
||
|
|
}), slots);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=VCheckbox.mjs.map
|