524d69f5001fc82b4aa495926e3821111164b86fc9fdc25ab018414d415d5f404c10484fe85ecc8e281e6daccc7e8c9de529bd23643d196de140555307093d 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var index$3 = require('../../tooltip/index.js');
  5. var index$4 = require('../../icon/index.js');
  6. var index$2 = require('../../tag/index.js');
  7. var inputTag = require('./input-tag.js');
  8. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  9. var useInputTag = require('./composables/use-input-tag.js');
  10. var useHovering = require('./composables/use-hovering.js');
  11. var index$1 = require('../../../hooks/use-calc-input-width/index.js');
  12. var useDragTag = require('./composables/use-drag-tag.js');
  13. var useInputTagDom = require('./composables/use-input-tag-dom.js');
  14. var index = require('../../../hooks/use-attrs/index.js');
  15. var useFormItem = require('../../form/src/hooks/use-form-item.js');
  16. var icon = require('../../../utils/vue/icon.js');
  17. var shared = require('@vue/shared');
  18. const __default__ = vue.defineComponent({
  19. name: "ElInputTag",
  20. inheritAttrs: false
  21. });
  22. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  23. ...__default__,
  24. props: inputTag.inputTagProps,
  25. emits: inputTag.inputTagEmits,
  26. setup(__props, { expose, emit }) {
  27. const props = __props;
  28. const attrs = index.useAttrs();
  29. const slots = vue.useSlots();
  30. const { form, formItem } = useFormItem.useFormItem();
  31. const { inputId } = useFormItem.useFormItemInputId(props, { formItemContext: formItem });
  32. const needStatusIcon = vue.computed(() => {
  33. var _a;
  34. return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false;
  35. });
  36. const validateState = vue.computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
  37. const validateIcon = vue.computed(() => {
  38. return validateState.value && icon.ValidateComponentsMap[validateState.value];
  39. });
  40. const {
  41. inputRef,
  42. wrapperRef,
  43. tagTooltipRef,
  44. isFocused,
  45. inputValue,
  46. size,
  47. tagSize,
  48. placeholder,
  49. closable,
  50. disabled,
  51. showTagList,
  52. collapseTagList,
  53. handleDragged,
  54. handleInput,
  55. handleKeydown,
  56. handleRemoveTag,
  57. handleClear,
  58. handleCompositionStart,
  59. handleCompositionUpdate,
  60. handleCompositionEnd,
  61. focus,
  62. blur
  63. } = useInputTag.useInputTag({ props, emit, formItem });
  64. const { hovering, handleMouseEnter, handleMouseLeave } = useHovering.useHovering();
  65. const { calculatorRef, inputStyle } = index$1.useCalcInputWidth();
  66. const {
  67. dropIndicatorRef,
  68. showDropIndicator,
  69. handleDragStart,
  70. handleDragOver,
  71. handleDragEnd
  72. } = useDragTag.useDragTag({ wrapperRef, handleDragged, afterDragged: focus });
  73. const {
  74. ns,
  75. nsInput,
  76. containerKls,
  77. containerStyle,
  78. innerKls,
  79. showClear,
  80. showSuffix
  81. } = useInputTagDom.useInputTagDom({
  82. props,
  83. hovering,
  84. isFocused,
  85. inputValue,
  86. disabled,
  87. size,
  88. validateState,
  89. validateIcon,
  90. needStatusIcon
  91. });
  92. expose({
  93. focus,
  94. blur
  95. });
  96. return (_ctx, _cache) => {
  97. return vue.openBlock(), vue.createElementBlock("div", {
  98. ref_key: "wrapperRef",
  99. ref: wrapperRef,
  100. class: vue.normalizeClass(vue.unref(containerKls)),
  101. style: vue.normalizeStyle(vue.unref(containerStyle)),
  102. onMouseenter: vue.unref(handleMouseEnter),
  103. onMouseleave: vue.unref(handleMouseLeave)
  104. }, [
  105. vue.unref(slots).prefix ? (vue.openBlock(), vue.createElementBlock("div", {
  106. key: 0,
  107. class: vue.normalizeClass(vue.unref(ns).e("prefix"))
  108. }, [
  109. vue.renderSlot(_ctx.$slots, "prefix")
  110. ], 2)) : vue.createCommentVNode("v-if", true),
  111. vue.createElementVNode("div", {
  112. class: vue.normalizeClass(vue.unref(innerKls))
  113. }, [
  114. (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(showTagList), (item, index) => {
  115. return vue.openBlock(), vue.createBlock(vue.unref(index$2.ElTag), {
  116. key: index,
  117. size: vue.unref(tagSize),
  118. closable: vue.unref(closable),
  119. type: _ctx.tagType,
  120. effect: _ctx.tagEffect,
  121. draggable: vue.unref(closable) && _ctx.draggable,
  122. "disable-transitions": "",
  123. onClose: ($event) => vue.unref(handleRemoveTag)(index),
  124. onDragstart: (event) => vue.unref(handleDragStart)(event, index),
  125. onDragover: (event) => vue.unref(handleDragOver)(event, index),
  126. onDragend: vue.unref(handleDragEnd),
  127. onDrop: vue.withModifiers(() => {
  128. }, ["stop"])
  129. }, {
  130. default: vue.withCtx(() => [
  131. vue.renderSlot(_ctx.$slots, "tag", {
  132. value: item,
  133. index
  134. }, () => [
  135. vue.createTextVNode(vue.toDisplayString(item), 1)
  136. ])
  137. ]),
  138. _: 2
  139. }, 1032, ["size", "closable", "type", "effect", "draggable", "onClose", "onDragstart", "onDragover", "onDragend", "onDrop"]);
  140. }), 128)),
  141. _ctx.collapseTags && _ctx.modelValue && _ctx.modelValue.length > _ctx.maxCollapseTags ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ElTooltip), {
  142. key: 0,
  143. ref_key: "tagTooltipRef",
  144. ref: tagTooltipRef,
  145. disabled: !_ctx.collapseTagsTooltip,
  146. "fallback-placements": ["bottom", "top", "right", "left"],
  147. effect: _ctx.tagEffect,
  148. placement: "bottom"
  149. }, {
  150. default: vue.withCtx(() => [
  151. vue.createVNode(vue.unref(index$2.ElTag), {
  152. closable: false,
  153. size: vue.unref(tagSize),
  154. type: _ctx.tagType,
  155. effect: _ctx.tagEffect,
  156. "disable-transitions": ""
  157. }, {
  158. default: vue.withCtx(() => [
  159. vue.createTextVNode(" + " + vue.toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 1)
  160. ]),
  161. _: 1
  162. }, 8, ["size", "type", "effect"])
  163. ]),
  164. content: vue.withCtx(() => [
  165. vue.createElementVNode("div", {
  166. class: vue.normalizeClass(vue.unref(ns).e("input-tag-list"))
  167. }, [
  168. (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(collapseTagList), (item, index) => {
  169. return vue.openBlock(), vue.createBlock(vue.unref(index$2.ElTag), {
  170. key: index,
  171. size: vue.unref(tagSize),
  172. closable: vue.unref(closable),
  173. type: _ctx.tagType,
  174. effect: _ctx.tagEffect,
  175. "disable-transitions": "",
  176. onClose: ($event) => vue.unref(handleRemoveTag)(index + _ctx.maxCollapseTags)
  177. }, {
  178. default: vue.withCtx(() => [
  179. vue.renderSlot(_ctx.$slots, "tag", {
  180. value: item,
  181. index: index + _ctx.maxCollapseTags
  182. }, () => [
  183. vue.createTextVNode(vue.toDisplayString(item), 1)
  184. ])
  185. ]),
  186. _: 2
  187. }, 1032, ["size", "closable", "type", "effect", "onClose"]);
  188. }), 128))
  189. ], 2)
  190. ]),
  191. _: 3
  192. }, 8, ["disabled", "effect"])) : vue.createCommentVNode("v-if", true),
  193. vue.createElementVNode("div", {
  194. class: vue.normalizeClass(vue.unref(ns).e("input-wrapper"))
  195. }, [
  196. vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
  197. id: vue.unref(inputId),
  198. ref_key: "inputRef",
  199. ref: inputRef,
  200. "onUpdate:modelValue": ($event) => vue.isRef(inputValue) ? inputValue.value = $event : null
  201. }, vue.unref(attrs), {
  202. type: "text",
  203. minlength: _ctx.minlength,
  204. maxlength: _ctx.maxlength,
  205. disabled: vue.unref(disabled),
  206. readonly: _ctx.readonly,
  207. autocomplete: _ctx.autocomplete,
  208. tabindex: _ctx.tabindex,
  209. placeholder: vue.unref(placeholder),
  210. autofocus: _ctx.autofocus,
  211. ariaLabel: _ctx.ariaLabel,
  212. class: vue.unref(ns).e("input"),
  213. style: vue.unref(inputStyle),
  214. onCompositionstart: vue.unref(handleCompositionStart),
  215. onCompositionupdate: vue.unref(handleCompositionUpdate),
  216. onCompositionend: vue.unref(handleCompositionEnd),
  217. onInput: vue.unref(handleInput),
  218. onKeydown: vue.unref(handleKeydown)
  219. }), null, 16, ["id", "onUpdate:modelValue", "minlength", "maxlength", "disabled", "readonly", "autocomplete", "tabindex", "placeholder", "autofocus", "ariaLabel", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onInput", "onKeydown"]), [
  220. [vue.vModelText, vue.unref(inputValue)]
  221. ]),
  222. vue.createElementVNode("span", {
  223. ref_key: "calculatorRef",
  224. ref: calculatorRef,
  225. "aria-hidden": "true",
  226. class: vue.normalizeClass(vue.unref(ns).e("input-calculator")),
  227. textContent: vue.toDisplayString(vue.unref(inputValue))
  228. }, null, 10, ["textContent"])
  229. ], 2),
  230. vue.withDirectives(vue.createElementVNode("div", {
  231. ref_key: "dropIndicatorRef",
  232. ref: dropIndicatorRef,
  233. class: vue.normalizeClass(vue.unref(ns).e("drop-indicator"))
  234. }, null, 2), [
  235. [vue.vShow, vue.unref(showDropIndicator)]
  236. ])
  237. ], 2),
  238. vue.unref(showSuffix) ? (vue.openBlock(), vue.createElementBlock("div", {
  239. key: 1,
  240. class: vue.normalizeClass(vue.unref(ns).e("suffix"))
  241. }, [
  242. vue.renderSlot(_ctx.$slots, "suffix"),
  243. vue.unref(showClear) ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.ElIcon), {
  244. key: 0,
  245. class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(ns).e("clear")]),
  246. onMousedown: vue.withModifiers(vue.unref(shared.NOOP), ["prevent"]),
  247. onClick: vue.unref(handleClear)
  248. }, {
  249. default: vue.withCtx(() => [
  250. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
  251. ]),
  252. _: 1
  253. }, 8, ["class", "onMousedown", "onClick"])) : vue.createCommentVNode("v-if", true),
  254. vue.unref(validateState) && vue.unref(validateIcon) && vue.unref(needStatusIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.ElIcon), {
  255. key: 1,
  256. class: vue.normalizeClass([
  257. vue.unref(nsInput).e("icon"),
  258. vue.unref(nsInput).e("validateIcon"),
  259. vue.unref(nsInput).is("loading", vue.unref(validateState) === "validating")
  260. ])
  261. }, {
  262. default: vue.withCtx(() => [
  263. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(validateIcon))))
  264. ]),
  265. _: 1
  266. }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
  267. ], 2)) : vue.createCommentVNode("v-if", true)
  268. ], 46, ["onMouseenter", "onMouseleave"]);
  269. };
  270. }
  271. });
  272. var InputTag = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "input-tag.vue"]]);
  273. exports["default"] = InputTag;
  274. //# sourceMappingURL=input-tag2.js.map