323f97d0338837e4db87e476f0478b3d47d380fe2bf654c8f461f4ee0ff3e5cd728db92618bf5060d004171dce4757d586d8b908c6ea92a10bfb93ee0c94c5 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var useFormCommonProps = require('../../../form/src/hooks/use-form-common-props.js');
  5. var types = require('../../../../utils/types.js');
  6. var event = require('../../../../constants/event.js');
  7. var aria = require('../../../../constants/aria.js');
  8. var index = require('../../../../hooks/use-focus-controller/index.js');
  9. var error = require('../../../../utils/error.js');
  10. var index$1 = require('../../../../hooks/use-composition/index.js');
  11. var lodashUnified = require('lodash-unified');
  12. function useInputTag({ props, emit, formItem }) {
  13. const disabled = useFormCommonProps.useFormDisabled();
  14. const size = useFormCommonProps.useFormSize();
  15. const inputRef = vue.shallowRef();
  16. const inputValue = vue.ref();
  17. const tagTooltipRef = vue.ref();
  18. const tagSize = vue.computed(() => {
  19. return ["small"].includes(size.value) ? "small" : "default";
  20. });
  21. const placeholder = vue.computed(() => {
  22. var _a;
  23. return ((_a = props.modelValue) == null ? void 0 : _a.length) ? void 0 : props.placeholder;
  24. });
  25. const closable = vue.computed(() => !(props.readonly || disabled.value));
  26. const inputLimit = vue.computed(() => {
  27. var _a, _b;
  28. return types.isUndefined(props.max) ? false : ((_b = (_a = props.modelValue) == null ? void 0 : _a.length) != null ? _b : 0) >= props.max;
  29. });
  30. const showTagList = vue.computed(() => {
  31. var _a;
  32. return props.collapseTags ? (_a = props.modelValue) == null ? void 0 : _a.slice(0, props.maxCollapseTags) : props.modelValue;
  33. });
  34. const collapseTagList = vue.computed(() => {
  35. var _a;
  36. return props.collapseTags ? (_a = props.modelValue) == null ? void 0 : _a.slice(props.maxCollapseTags) : [];
  37. });
  38. const addTagsEmit = (value) => {
  39. var _a;
  40. const list = [...(_a = props.modelValue) != null ? _a : [], ...lodashUnified.castArray(value)];
  41. emit(event.UPDATE_MODEL_EVENT, list);
  42. emit(event.CHANGE_EVENT, list);
  43. emit("add-tag", value);
  44. inputValue.value = void 0;
  45. };
  46. const getDelimitedTags = (input) => {
  47. var _a, _b;
  48. const tags = input.split(props.delimiter).filter((val) => val && val !== input);
  49. if (props.max) {
  50. const maxInsert = props.max - ((_b = (_a = props.modelValue) == null ? void 0 : _a.length) != null ? _b : 0);
  51. tags.splice(maxInsert);
  52. }
  53. return tags.length === 1 ? tags[0] : tags;
  54. };
  55. const handleInput = (event$1) => {
  56. if (inputLimit.value) {
  57. inputValue.value = void 0;
  58. return;
  59. }
  60. if (isComposing.value)
  61. return;
  62. if (props.delimiter && inputValue.value) {
  63. const tags = getDelimitedTags(inputValue.value);
  64. if (tags.length) {
  65. addTagsEmit(tags);
  66. }
  67. }
  68. emit(event.INPUT_EVENT, event$1.target.value);
  69. };
  70. const handleKeydown = (event) => {
  71. var _a;
  72. if (isComposing.value)
  73. return;
  74. switch (event.code) {
  75. case props.trigger:
  76. event.preventDefault();
  77. event.stopPropagation();
  78. handleAddTag();
  79. break;
  80. case aria.EVENT_CODE.numpadEnter:
  81. if (props.trigger === aria.EVENT_CODE.enter) {
  82. event.preventDefault();
  83. event.stopPropagation();
  84. handleAddTag();
  85. }
  86. break;
  87. case aria.EVENT_CODE.backspace:
  88. if (!inputValue.value && ((_a = props.modelValue) == null ? void 0 : _a.length)) {
  89. event.preventDefault();
  90. event.stopPropagation();
  91. handleRemoveTag(props.modelValue.length - 1);
  92. }
  93. break;
  94. }
  95. };
  96. const handleAddTag = () => {
  97. var _a;
  98. const value = (_a = inputValue.value) == null ? void 0 : _a.trim();
  99. if (!value || inputLimit.value)
  100. return;
  101. addTagsEmit(value);
  102. };
  103. const handleRemoveTag = (index) => {
  104. var _a;
  105. const value = ((_a = props.modelValue) != null ? _a : []).slice();
  106. const [item] = value.splice(index, 1);
  107. emit(event.UPDATE_MODEL_EVENT, value);
  108. emit(event.CHANGE_EVENT, value);
  109. emit("remove-tag", item, index);
  110. };
  111. const handleClear = () => {
  112. inputValue.value = void 0;
  113. emit(event.UPDATE_MODEL_EVENT, void 0);
  114. emit(event.CHANGE_EVENT, void 0);
  115. emit("clear");
  116. };
  117. const handleDragged = (draggingIndex, dropIndex, type) => {
  118. var _a;
  119. const value = ((_a = props.modelValue) != null ? _a : []).slice();
  120. const [draggedItem] = value.splice(draggingIndex, 1);
  121. const step = dropIndex > draggingIndex && type === "before" ? -1 : dropIndex < draggingIndex && type === "after" ? 1 : 0;
  122. value.splice(dropIndex + step, 0, draggedItem);
  123. emit(event.UPDATE_MODEL_EVENT, value);
  124. emit(event.CHANGE_EVENT, value);
  125. emit("drag-tag", draggingIndex, dropIndex + step, draggedItem);
  126. };
  127. const focus = () => {
  128. var _a;
  129. (_a = inputRef.value) == null ? void 0 : _a.focus();
  130. };
  131. const blur = () => {
  132. var _a;
  133. (_a = inputRef.value) == null ? void 0 : _a.blur();
  134. };
  135. const { wrapperRef, isFocused } = index.useFocusController(inputRef, {
  136. disabled,
  137. beforeBlur(event) {
  138. var _a;
  139. return (_a = tagTooltipRef.value) == null ? void 0 : _a.isFocusInsideContent(event);
  140. },
  141. afterBlur() {
  142. var _a;
  143. if (props.saveOnBlur) {
  144. handleAddTag();
  145. } else {
  146. inputValue.value = void 0;
  147. }
  148. if (props.validateEvent) {
  149. (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => error.debugWarn());
  150. }
  151. }
  152. });
  153. const {
  154. isComposing,
  155. handleCompositionStart,
  156. handleCompositionUpdate,
  157. handleCompositionEnd
  158. } = index$1.useComposition({ afterComposition: handleInput });
  159. vue.watch(() => props.modelValue, () => {
  160. var _a;
  161. if (props.validateEvent) {
  162. (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, event.CHANGE_EVENT).catch((err) => error.debugWarn());
  163. }
  164. });
  165. return {
  166. inputRef,
  167. wrapperRef,
  168. tagTooltipRef,
  169. isFocused,
  170. isComposing,
  171. inputValue,
  172. size,
  173. tagSize,
  174. placeholder,
  175. closable,
  176. disabled,
  177. inputLimit,
  178. showTagList,
  179. collapseTagList,
  180. handleDragged,
  181. handleInput,
  182. handleKeydown,
  183. handleAddTag,
  184. handleRemoveTag,
  185. handleClear,
  186. handleCompositionStart,
  187. handleCompositionUpdate,
  188. handleCompositionEnd,
  189. focus,
  190. blur
  191. };
  192. }
  193. exports.useInputTag = useInputTag;
  194. //# sourceMappingURL=use-input-tag.js.map