@ark-ui/vue
Version:
A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.
65 lines (64 loc) • 2.35 kB
JavaScript
const require_boolean = require("../../utils/boolean.cjs");
const require_use_fieldset_context = require("../fieldset/use-fieldset-context.cjs");
const require_use_v_model = require("../use-v-model.cjs");
let vue = require("vue");
//#region src/components/checkbox/use-checkbox-group.ts
function useCheckboxGroup(props, emit) {
const fieldset = require_use_fieldset_context.useFieldsetContext();
const disabled = (0, vue.computed)(() => props.disabled ?? fieldset?.value?.disabled);
const invalid = (0, vue.computed)(() => props.invalid ?? fieldset?.value?.invalid);
const interactive = (0, vue.computed)(() => !(disabled.value || props.readOnly));
const { defaultValue } = (0, vue.toRefs)(props);
const valueRef = require_use_v_model.useVModel(props, "modelValue", emit, {
defaultValue: defaultValue?.value ?? [],
passive: props.modelValue === void 0,
eventName: ["valueChange", "update:modelValue"]
});
const isChecked = (val) => {
return valueRef.value.some((v) => String(v) === String(val));
};
const toggleValue = (val) => {
isChecked(val) ? removeValue(val) : addValue(val);
};
const isAtMax = (0, vue.computed)(() => props.maxSelectedValues != null && valueRef.value.length >= props.maxSelectedValues);
const addValue = (val) => {
if (!interactive.value) return;
if (isChecked(val)) return;
if (isAtMax.value) return;
valueRef.value = valueRef.value.concat(val);
};
const removeValue = (val) => {
if (!interactive.value) return;
valueRef.value = valueRef.value.filter((v) => String(v) !== String(val));
};
const getItemProps = (itemProps) => {
const checked = itemProps.value != null ? isChecked(itemProps.value) : void 0;
return {
checked,
onCheckedChange() {
if (itemProps.value != null) toggleValue(itemProps.value);
},
name: props.name,
disabled: require_boolean.toBooleanValue(disabled.value) || isAtMax.value && !checked,
readOnly: props.readOnly,
invalid: invalid.value
};
};
const setValue = (value) => {
valueRef.value = value;
};
return (0, vue.computed)(() => ({
isChecked,
value: valueRef.value,
name: props.name,
disabled: require_boolean.toBooleanValue(disabled.value),
readOnly: props.readOnly,
invalid: invalid.value,
addValue,
setValue,
toggleValue,
getItemProps
}));
}
//#endregion
exports.useCheckboxGroup = useCheckboxGroup;