useOption.mjs 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import { inject, computed, getCurrentInstance, toRaw, watch, unref } from 'vue';
  2. import { get } from 'lodash-unified';
  3. import '../../../utils/index.mjs';
  4. import { selectKey, selectGroupKey } from './token.mjs';
  5. import { escapeStringRegexp } from '../../../utils/strings.mjs';
  6. function useOption(props, states) {
  7. const select = inject(selectKey);
  8. const selectGroup = inject(selectGroupKey, { disabled: false });
  9. const isObject = computed(() => {
  10. return Object.prototype.toString.call(props.value).toLowerCase() === "[object object]";
  11. });
  12. const itemSelected = computed(() => {
  13. if (!select.props.multiple) {
  14. return isEqual(props.value, select.props.modelValue);
  15. } else {
  16. return contains(select.props.modelValue, props.value);
  17. }
  18. });
  19. const limitReached = computed(() => {
  20. if (select.props.multiple) {
  21. const modelValue = select.props.modelValue || [];
  22. return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
  23. } else {
  24. return false;
  25. }
  26. });
  27. const currentLabel = computed(() => {
  28. return props.label || (isObject.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.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 isEqual = (a, b) => {
  48. if (!isObject.value) {
  49. return a === b;
  50. } else {
  51. const { valueKey } = select.props;
  52. return get(a, valueKey) === get(b, valueKey);
  53. }
  54. };
  55. const hoverItem = () => {
  56. if (!props.disabled && !selectGroup.disabled) {
  57. select.hoverIndex = select.optionsArray.indexOf(instance.proxy);
  58. }
  59. };
  60. watch(() => currentLabel.value, () => {
  61. if (!props.created && !select.props.remote)
  62. select.setSelected();
  63. });
  64. watch(() => props.value, (val, oldVal) => {
  65. const { remote, valueKey } = select.props;
  66. if (!Object.is(val, oldVal)) {
  67. select.onOptionDestroy(oldVal, instance.proxy);
  68. select.onOptionCreate(instance.proxy);
  69. }
  70. if (!props.created && !remote) {
  71. if (valueKey && typeof val === "object" && typeof oldVal === "object" && val[valueKey] === oldVal[valueKey]) {
  72. return;
  73. }
  74. select.setSelected();
  75. }
  76. });
  77. watch(() => selectGroup.disabled, () => {
  78. states.groupDisabled = selectGroup.disabled;
  79. }, { immediate: true });
  80. const { queryChange } = toRaw(select);
  81. watch(queryChange, (changes) => {
  82. const { query } = unref(changes);
  83. const regexp = new RegExp(escapeStringRegexp(query), "i");
  84. states.visible = regexp.test(currentLabel.value) || props.created;
  85. if (!states.visible) {
  86. select.filteredOptionsCount--;
  87. }
  88. });
  89. return {
  90. select,
  91. currentLabel,
  92. currentValue,
  93. itemSelected,
  94. isDisabled,
  95. hoverItem
  96. };
  97. }
  98. export { useOption };
  99. //# sourceMappingURL=useOption.mjs.map