useOption.mjs 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import { isObject } from "../../../utils/types.mjs";
  2. import { escapeStringRegexp } from "../../../utils/strings.mjs";
  3. import { throwError } from "../../../utils/error.mjs";
  4. import { ensureArray } from "../../../utils/arrays.mjs";
  5. import { selectGroupKey, selectKey } from "./token.mjs";
  6. import { COMPONENT_NAME } from "./option.mjs";
  7. import { get, isEqual } from "lodash-unified";
  8. import { computed, getCurrentInstance, inject, toRaw, watch } from "vue";
  9. //#region ../../packages/components/select/src/useOption.ts
  10. function useOption(props, states) {
  11. const select = inject(selectKey);
  12. if (!select) throwError(COMPONENT_NAME, "usage: <el-select><el-option /></el-select/>");
  13. const selectGroup = inject(selectGroupKey, { disabled: false });
  14. const itemSelected = computed(() => {
  15. return contains(ensureArray(select.props.modelValue), props.value);
  16. });
  17. const limitReached = computed(() => {
  18. if (select.props.multiple) {
  19. const modelValue = ensureArray(select.props.modelValue ?? []);
  20. return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
  21. } else return false;
  22. });
  23. const currentLabel = computed(() => {
  24. return props.label ?? (isObject(props.value) ? "" : props.value);
  25. });
  26. const currentValue = computed(() => {
  27. return props.value || props.label || "";
  28. });
  29. const isDisabled = computed(() => {
  30. return props.disabled || states.groupDisabled || limitReached.value;
  31. });
  32. const instance = getCurrentInstance();
  33. const contains = (arr = [], target) => {
  34. if (!isObject(props.value)) return arr && arr.includes(target);
  35. else {
  36. const valueKey = select.props.valueKey;
  37. return arr && arr.some((item) => {
  38. return toRaw(get(item, valueKey)) === get(target, valueKey);
  39. });
  40. }
  41. };
  42. const hoverItem = () => {
  43. if (!isDisabled.value) select.states.hoveringIndex = select.optionsArray.indexOf(instance.proxy);
  44. };
  45. const updateOption = (query) => {
  46. states.visible = new RegExp(escapeStringRegexp(query), "i").test(String(currentLabel.value)) || props.created;
  47. };
  48. watch(() => currentLabel.value, () => {
  49. if (!props.created && !select.props.remote) select.setSelected();
  50. });
  51. watch(() => props.value, (val, oldVal) => {
  52. const { remote, valueKey } = select.props;
  53. if (remote ? val !== oldVal : !isEqual(val, oldVal)) {
  54. select.onOptionDestroy(oldVal, instance.proxy);
  55. select.onOptionCreate(instance.proxy);
  56. }
  57. if (!props.created && !remote) {
  58. if (valueKey && isObject(val) && isObject(oldVal) && val[valueKey] === oldVal[valueKey]) return;
  59. select.setSelected();
  60. }
  61. });
  62. watch(() => selectGroup.disabled, () => {
  63. states.groupDisabled = selectGroup.disabled;
  64. }, { immediate: true });
  65. return {
  66. select,
  67. currentLabel,
  68. currentValue,
  69. itemSelected,
  70. isDisabled,
  71. hoverItem,
  72. updateOption
  73. };
  74. }
  75. //#endregion
  76. export { useOption };
  77. //# sourceMappingURL=useOption.mjs.map