44d15d829dfe302de26dc84665096448db38366ac12b65dd7db7c8304522d75df6356613e604e664c24411c6f9630fe5a5307d29b8e1f4aa05b53a0828edec 3.0 KB

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