@ark-ui/vue
Version:
A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.
65 lines (64 loc) • 2.19 kB
JavaScript
import { toBooleanValue } from "../../utils/boolean.js";
import { useFieldsetContext } from "../fieldset/use-fieldset-context.js";
import { useVModel } from "../use-v-model.js";
import { computed, toRefs } from "vue";
//#region src/components/checkbox/use-checkbox-group.ts
function useCheckboxGroup(props, emit) {
const fieldset = useFieldsetContext();
const disabled = computed(() => props.disabled ?? fieldset?.value?.disabled);
const invalid = computed(() => props.invalid ?? fieldset?.value?.invalid);
const interactive = computed(() => !(disabled.value || props.readOnly));
const { defaultValue } = toRefs(props);
const valueRef = 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 = 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: toBooleanValue(disabled.value) || isAtMax.value && !checked,
readOnly: props.readOnly,
invalid: invalid.value
};
};
const setValue = (value) => {
valueRef.value = value;
};
return computed(() => ({
isChecked,
value: valueRef.value,
name: props.name,
disabled: toBooleanValue(disabled.value),
readOnly: props.readOnly,
invalid: invalid.value,
addValue,
setValue,
toggleValue,
getItemProps
}));
}
//#endregion
export { useCheckboxGroup };