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

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

'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const vue = require('vue');
const useVModel = require('../use-v-model.cjs');

function useCheckboxGroup(props, emit) {
  const interactive = vue.computed(() => !(props.disabled || props.readOnly));
  const { defaultValue } = vue.toRefs(props);
  const valueRef = useVModel.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: props.disabled,
      readOnly: props.readOnly,
      invalid: props.invalid
    };
  };
  const setValue = (value) => {
    valueRef.value = value;
  };
  return vue.computed(() => ({
    isChecked,
    value: valueRef.value,
    name: props.name,
    disabled: props.disabled,
    readOnly: props.readOnly,
    invalid: props.invalid,
    addValue,
    setValue,
    toggleValue,
    getItemProps
  }));
}

exports.useCheckboxGroup = useCheckboxGroup;