@ark-ui/vue/dist/components/checkbox/use-checkbox-group.js

A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.

import { computed, toRefs } from 'vue';
import { toBooleanValue } from '../../utils/boolean.js';
import { useFieldsetContext } from '../fieldset/use-fieldset-context.js';
import { useVModel } from '../use-v-model.js';

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 addValue = (val) => {
    if (!interactive.value) return;
    if (isChecked(val)) 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) => {
    return {
      checked: itemProps.value != null ? isChecked(itemProps.value) : void 0,
      onCheckedChange() {
        if (itemProps.value != null) {
          toggleValue(itemProps.value);
        }
      },
      name: props.name,
      disabled: toBooleanValue(disabled.value),
      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
  }));
}

export { useCheckboxGroup };