vuestic-ui/dist/esm-node/src/composables/useSelectable.mjs

Vue 3 UI Framework

import { computed } from "vue";
import { u as useStatefulProps, b as useStateful } from "./useStateful.mjs";
import { u as useLoadingProps } from "./useLoading.mjs";
import { b as useValidationProps, u as useValidationEmits, a as useValidation } from "./useValidation.mjs";
import { u as useFocus } from "./useFocus.mjs";
import { u as unwrapEl } from "../utils/unwrapEl.mjs";
const useSelectableProps = {
  ...useStatefulProps,
  ...useLoadingProps,
  ...useValidationProps,
  arrayValue: { type: [String, Boolean, Object, Number], default: null },
  label: { type: String, default: "" },
  leftLabel: { type: Boolean, default: false },
  trueValue: { type: null, default: true },
  falseValue: { type: null, default: false },
  indeterminate: { type: Boolean, default: false },
  indeterminateValue: { type: null, default: null },
  disabled: { type: Boolean, default: false },
  readonly: { type: Boolean, default: false }
};
const useSelectableEmits = [...useValidationEmits, "update:modelValue", "focus", "blur"];
const checkDuplicates = (props) => {
  const values = [props.falseValue, props.trueValue];
  if (props.indeterminate) {
    values.push(props.indeterminateValue);
  }
  const hasDuplicates = new Set(values).size !== values.length;
  if (hasDuplicates) {
    throw new Error("falseValue, trueValue, indeterminateValue props should have strictly different values, which is not the case.");
  }
};
const useSelectable = (props, emit, { input, label, container }) => {
  checkDuplicates(props);
  const reset = () => withoutValidation(() => {
    emit("update:modelValue", false);
    resetValidation();
  });
  const focus = () => {
    var _a;
    (_a = unwrapEl(input.value)) == null ? void 0 : _a.focus();
  };
  const { valueComputed } = useStateful(props, emit);
  const {
    computedError,
    computedErrorMessages,
    validate,
    validationAriaAttributes,
    listeners: validationListeners,
    withoutValidation,
    resetValidation,
    isDirty,
    isTouched,
    isError,
    isLoading,
    isValid
  } = useValidation(props, emit, { reset, focus, value: valueComputed });
  const { isFocused } = useFocus();
  const onBlur = (event) => {
    emit("blur", event);
    isFocused.value = false;
    validationListeners.onBlur();
  };
  const onFocus = (event) => {
    isFocused.value = true;
    emit("focus", event);
  };
  const isIndeterminate = computed(() => props.indeterminate && valueComputed.value === props.indeterminateValue);
  const modelIsArray = computed(() => props.arrayValue !== void 0 && props.arrayValue !== null);
  const isChecked = computed(() => {
    var _a;
    if (modelIsArray.value) {
      return (_a = props.modelValue) == null ? void 0 : _a.includes(props.arrayValue);
    }
    return valueComputed.value === props.trueValue;
  });
  const toggleSelection = () => {
    if (props.readonly || props.disabled || props.loading) {
      return;
    }
    if (modelIsArray.value) {
      if (!props.modelValue) {
        emit("update:modelValue", [props.arrayValue]);
      } else if (!Array.isArray(props.modelValue)) {
        emit("update:modelValue", props.modelValue === props.arrayValue ? [] : [props.modelValue, props.arrayValue]);
      } else if (props.modelValue.includes(props.arrayValue)) {
        emit("update:modelValue", props.modelValue.filter((option) => option !== props.arrayValue));
      } else {
        emit("update:modelValue", props.modelValue.concat(props.arrayValue));
      }
      return;
    }
    if (props.indeterminate) {
      if (isIndeterminate.value) {
        valueComputed.value = props.trueValue;
      } else if (isChecked.value) {
        valueComputed.value = props.falseValue;
      } else {
        valueComputed.value = props.indeterminateValue;
      }
      return;
    }
    if (isChecked.value) {
      valueComputed.value = props.falseValue;
    } else {
      valueComputed.value = props.trueValue;
    }
  };
  return {
    isDirty,
    isTouched,
    isError,
    isLoading,
    isValid,
    isChecked,
    isIndeterminate,
    onBlur,
    onFocus,
    toggleSelection,
    reset,
    focus,
    computedError,
    computedErrorMessages,
    validationAriaAttributes
  };
};
export {
  useSelectableEmits as a,
  useSelectable as b,
  useSelectableProps as u
};
//# sourceMappingURL=useSelectable.mjs.map