e98e66f22b1a0b7e1f8175ea3efb8ddc0f56442362ef4cc8c1ad7ee85ea3488b62fe74408cf30b144a4be0eacfc91106f603f8e25c4ba8d582d53f2c2f3596 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import { ref, computed, watch } from 'vue';
  2. import { useProps } from './useProps.mjs';
  3. function useAllowCreate(props, states) {
  4. const { aliasProps, getLabel, getValue } = useProps(props);
  5. const createOptionCount = ref(0);
  6. const cachedSelectedOption = ref();
  7. const enableAllowCreateMode = computed(() => {
  8. return props.allowCreate && props.filterable;
  9. });
  10. watch(() => props.options, (options) => {
  11. const optionLabelsSet = new Set(options.map((option) => getLabel(option)));
  12. states.createdOptions = states.createdOptions.filter((createdOption) => !optionLabelsSet.has(getLabel(createdOption)));
  13. });
  14. function hasExistingOption(query) {
  15. const hasOption = (option) => getLabel(option) === query;
  16. return props.options && props.options.some(hasOption) || states.createdOptions.some(hasOption);
  17. }
  18. function selectNewOption(option) {
  19. if (!enableAllowCreateMode.value) {
  20. return;
  21. }
  22. if (props.multiple && option.created) {
  23. createOptionCount.value++;
  24. } else {
  25. cachedSelectedOption.value = option;
  26. }
  27. }
  28. function createNewOption(query) {
  29. if (enableAllowCreateMode.value) {
  30. if (query && query.length > 0) {
  31. if (hasExistingOption(query)) {
  32. states.createdOptions = states.createdOptions.filter((createdOption) => getLabel(createdOption) !== states.previousQuery);
  33. return;
  34. }
  35. const newOption = {
  36. [aliasProps.value.value]: query,
  37. [aliasProps.value.label]: query,
  38. created: true,
  39. [aliasProps.value.disabled]: false
  40. };
  41. if (states.createdOptions.length >= createOptionCount.value) {
  42. states.createdOptions[createOptionCount.value] = newOption;
  43. } else {
  44. states.createdOptions.push(newOption);
  45. }
  46. } else {
  47. if (props.multiple) {
  48. states.createdOptions.length = createOptionCount.value;
  49. } else {
  50. const selectedOption = cachedSelectedOption.value;
  51. states.createdOptions.length = 0;
  52. if (selectedOption && selectedOption.created) {
  53. states.createdOptions.push(selectedOption);
  54. }
  55. }
  56. }
  57. }
  58. }
  59. function removeNewOption(option) {
  60. if (!enableAllowCreateMode.value || !option || !option.created || option.created && props.reserveKeyword && states.inputValue === getLabel(option)) {
  61. return;
  62. }
  63. const idx = states.createdOptions.findIndex((it) => getValue(it) === getValue(option));
  64. if (~idx) {
  65. states.createdOptions.splice(idx, 1);
  66. createOptionCount.value--;
  67. }
  68. }
  69. function clearAllNewOption() {
  70. if (enableAllowCreateMode.value) {
  71. states.createdOptions.length = 0;
  72. createOptionCount.value = 0;
  73. }
  74. }
  75. return {
  76. createNewOption,
  77. removeNewOption,
  78. selectNewOption,
  79. clearAllNewOption
  80. };
  81. }
  82. export { useAllowCreate };
  83. //# sourceMappingURL=useAllowCreate.mjs.map