code-monkey-ui/es/components/dsh-select/src/useOption.mjs

A Component Library for Vue 3

import { inject, ref, computed, getCurrentInstance, toRaw, watch, unref } from 'vue';
import { isEmpty, isNil, get } from 'lodash-unified';
import { throttle } from 'lodash';
import '../../../utils/index.mjs';
import { dshSelectKey, dshSelectGroupKey } from './token.mjs';
import { isObject } from '@vue/shared';
import { escapeStringRegexp } from '../../../utils/strings.mjs';

function useOption(props, states) {
  const select = inject(dshSelectKey);
  const selectGroup = inject(dshSelectGroupKey, { disabled: false });
  const checkBoxRef = ref(null);
  const isObject$1 = computed(() => isObject(props.value));
  const itemSelected = computed(() => {
    if (!select.props.multiple) {
      return isEqual(props.value, select.props.modelValue);
    } else {
      return contains(select.props.modelValue, props.value);
    }
  });
  const limitReached = computed(() => {
    if (select.props.multiple) {
      const modelValue = select.props.modelValue || [];
      return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
    } else {
      return false;
    }
  });
  const currentLabel = computed(() => {
    return props.label || (isObject$1.value ? "" : props.value);
  });
  const currentValue = computed(() => {
    return isEmpty(props.value) && isNil(props.value) ? props.label : props.value;
  });
  const currentTip = computed(() => {
    return props.tip || "";
  });
  const onlyThis = computed(() => {
    return select.props.onlyThis || true;
  });
  const isDisabled = computed(() => {
    return props.disabled || states.groupDisabled || limitReached.value;
  });
  const instance = getCurrentInstance();
  const contains = (arr = [], target) => {
    if (!isObject$1.value) {
      return arr && arr.includes(target);
    } else {
      const valueKey = select.props.valueKey;
      return arr && arr.some((item) => {
        return toRaw(get(item, valueKey)) === get(target, valueKey);
      });
    }
  };
  const isEqual = (a, b) => {
    if (!isObject$1.value) {
      return a === b;
    } else {
      const { valueKey } = select.props;
      return get(a, valueKey) === get(b, valueKey);
    }
  };
  const hoverItem = () => {
    if (!props.disabled && !selectGroup.disabled) {
      select.hoverIndex = select.optionsArray.indexOf(instance.proxy);
    }
  };
  watch(() => currentLabel.value, () => {
    if (!props.created && !select.props.remote)
      select.setSelected();
  });
  watch(() => props.value, (val, oldVal) => {
    const { remote, valueKey } = select.props;
    if (!Object.is(val, oldVal)) {
      select.onOptionDestroy(oldVal, instance.proxy);
      select.onOptionCreate(instance.proxy);
    }
    if (!props.created && !remote) {
      if (valueKey && isObject(val) && isObject(oldVal) && val[valueKey] === oldVal[valueKey]) {
        return;
      }
      select.setSelected();
    }
  });
  watch(() => selectGroup.disabled, () => {
    states.groupDisabled = selectGroup.disabled;
  }, { immediate: true });
  const { queryChange } = toRaw(select);
  const changeQuery = (changes) => {
    const { query } = unref(changes);
    const regexp = new RegExp(escapeStringRegexp(query), "i");
    states.visible = props.value === "select-all" || props.value === "reverse" || props.value === "select-hidden" || regexp.test(currentLabel.value + currentTip.value) || props.created;
    if (!states.visible && props.value !== "select-all" && props.value !== "reverse" && props.value !== "select-hidden") {
      select.filteredOptionsCount--;
    }
    select.showFilterHiddenNode(changes);
  };
  watch(queryChange, (change) => {
    throttle(changeQuery, 300)(change);
  }, { immediate: true });
  return {
    select,
    currentLabel,
    currentTip,
    currentValue,
    itemSelected,
    isDisabled,
    hoverItem,
    checkBoxRef,
    onlyThis
  };
}

export { useOption };
//# sourceMappingURL=useOption.mjs.map