You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
16 KiB
1 lines
16 KiB
{"ast":null,"code":"import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, withDirectives, mergeProps, isRef, vModelText, vShow, createVNode, resolveDynamicComponent } from 'vue';\nimport { CircleClose } from '@element-plus/icons-vue';\nimport { ElIcon } from '../../icon/index.mjs';\nimport { ElTag } from '../../tag/index.mjs';\nimport { inputTagProps, inputTagEmits } from './input-tag.mjs';\nimport _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';\nimport { useInputTag } from './composables/use-input-tag.mjs';\nimport { useHovering } from './composables/use-hovering.mjs';\nimport { useCalcInputWidth } from '../../../hooks/use-calc-input-width/index.mjs';\nimport { useDragTag } from './composables/use-drag-tag.mjs';\nimport { useInputTagDom } from './composables/use-input-tag-dom.mjs';\nimport { useAttrs } from '../../../hooks/use-attrs/index.mjs';\nimport { useFormItem, useFormItemInputId } from '../../form/src/hooks/use-form-item.mjs';\nimport { ValidateComponentsMap } from '../../../utils/vue/icon.mjs';\nimport { NOOP } from '@vue/shared';\nconst __default__ = defineComponent({\n name: \"ElInputTag\",\n inheritAttrs: false\n});\nconst _sfc_main = /* @__PURE__ */defineComponent({\n ...__default__,\n props: inputTagProps,\n emits: inputTagEmits,\n setup(__props, {\n expose,\n emit\n }) {\n const props = __props;\n const attrs = useAttrs();\n const slots = useSlots();\n const {\n form,\n formItem\n } = useFormItem();\n const {\n inputId\n } = useFormItemInputId(props, {\n formItemContext: formItem\n });\n const needStatusIcon = computed(() => {\n var _a;\n return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false;\n });\n const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || \"\");\n const validateIcon = computed(() => {\n return validateState.value && ValidateComponentsMap[validateState.value];\n });\n const {\n inputRef,\n wrapperRef,\n isFocused,\n inputValue,\n size,\n tagSize,\n placeholder,\n closable,\n disabled,\n handleDragged,\n handleInput,\n handleKeydown,\n handleRemoveTag,\n handleClear,\n handleCompositionStart,\n handleCompositionUpdate,\n handleCompositionEnd,\n focus,\n blur\n } = useInputTag({\n props,\n emit,\n formItem\n });\n const {\n hovering,\n handleMouseEnter,\n handleMouseLeave\n } = useHovering();\n const {\n calculatorRef,\n inputStyle\n } = useCalcInputWidth();\n const {\n dropIndicatorRef,\n showDropIndicator,\n handleDragStart,\n handleDragOver,\n handleDragEnd\n } = useDragTag({\n wrapperRef,\n handleDragged,\n afterDragged: focus\n });\n const {\n ns,\n nsInput,\n containerKls,\n containerStyle,\n innerKls,\n showClear,\n showSuffix\n } = useInputTagDom({\n props,\n hovering,\n isFocused,\n inputValue,\n disabled,\n size,\n validateState,\n validateIcon,\n needStatusIcon\n });\n expose({\n focus,\n blur\n });\n return (_ctx, _cache) => {\n return openBlock(), createElementBlock(\"div\", {\n ref_key: \"wrapperRef\",\n ref: wrapperRef,\n class: normalizeClass(unref(containerKls)),\n style: normalizeStyle(unref(containerStyle)),\n onMouseenter: unref(handleMouseEnter),\n onMouseleave: unref(handleMouseLeave)\n }, [unref(slots).prefix ? (openBlock(), createElementBlock(\"div\", {\n key: 0,\n class: normalizeClass(unref(ns).e(\"prefix\"))\n }, [renderSlot(_ctx.$slots, \"prefix\")], 2)) : createCommentVNode(\"v-if\", true), createElementVNode(\"div\", {\n class: normalizeClass(unref(innerKls))\n }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, (item, index) => {\n return openBlock(), createBlock(unref(ElTag), {\n key: index,\n size: unref(tagSize),\n closable: unref(closable),\n type: _ctx.tagType,\n effect: _ctx.tagEffect,\n draggable: unref(closable) && _ctx.draggable,\n \"disable-transitions\": \"\",\n onClose: $event => unref(handleRemoveTag)(index),\n onDragstart: event => unref(handleDragStart)(event, index),\n onDragover: event => unref(handleDragOver)(event, index),\n onDragend: unref(handleDragEnd),\n onDrop: withModifiers(() => {}, [\"stop\"])\n }, {\n default: withCtx(() => [renderSlot(_ctx.$slots, \"tag\", {\n value: item,\n index\n }, () => [createTextVNode(toDisplayString(item), 1)])]),\n _: 2\n }, 1032, [\"size\", \"closable\", \"type\", \"effect\", \"draggable\", \"onClose\", \"onDragstart\", \"onDragover\", \"onDragend\", \"onDrop\"]);\n }), 128)), createElementVNode(\"div\", {\n class: normalizeClass(unref(ns).e(\"input-wrapper\"))\n }, [withDirectives(createElementVNode(\"input\", mergeProps({\n id: unref(inputId),\n ref_key: \"inputRef\",\n ref: inputRef,\n \"onUpdate:modelValue\": $event => isRef(inputValue) ? inputValue.value = $event : null\n }, unref(attrs), {\n type: \"text\",\n minlength: _ctx.minlength,\n maxlength: _ctx.maxlength,\n disabled: unref(disabled),\n readonly: _ctx.readonly,\n autocomplete: _ctx.autocomplete,\n tabindex: _ctx.tabindex,\n placeholder: unref(placeholder),\n autofocus: _ctx.autofocus,\n ariaLabel: _ctx.ariaLabel,\n class: unref(ns).e(\"input\"),\n style: unref(inputStyle),\n onCompositionstart: unref(handleCompositionStart),\n onCompositionupdate: unref(handleCompositionUpdate),\n onCompositionend: unref(handleCompositionEnd),\n onInput: unref(handleInput),\n onKeydown: unref(handleKeydown)\n }), null, 16, [\"id\", \"onUpdate:modelValue\", \"minlength\", \"maxlength\", \"disabled\", \"readonly\", \"autocomplete\", \"tabindex\", \"placeholder\", \"autofocus\", \"ariaLabel\", \"onCompositionstart\", \"onCompositionupdate\", \"onCompositionend\", \"onInput\", \"onKeydown\"]), [[vModelText, unref(inputValue)]]), createElementVNode(\"span\", {\n ref_key: \"calculatorRef\",\n ref: calculatorRef,\n \"aria-hidden\": \"true\",\n class: normalizeClass(unref(ns).e(\"input-calculator\")),\n textContent: toDisplayString(unref(inputValue))\n }, null, 10, [\"textContent\"])], 2), withDirectives(createElementVNode(\"div\", {\n ref_key: \"dropIndicatorRef\",\n ref: dropIndicatorRef,\n class: normalizeClass(unref(ns).e(\"drop-indicator\"))\n }, null, 2), [[vShow, unref(showDropIndicator)]])], 2), unref(showSuffix) ? (openBlock(), createElementBlock(\"div\", {\n key: 1,\n class: normalizeClass(unref(ns).e(\"suffix\"))\n }, [renderSlot(_ctx.$slots, \"suffix\"), unref(showClear) ? (openBlock(), createBlock(unref(ElIcon), {\n key: 0,\n class: normalizeClass([unref(ns).e(\"icon\"), unref(ns).e(\"clear\")]),\n onMousedown: withModifiers(unref(NOOP), [\"prevent\"]),\n onClick: unref(handleClear)\n }, {\n default: withCtx(() => [createVNode(unref(CircleClose))]),\n _: 1\n }, 8, [\"class\", \"onMousedown\", \"onClick\"])) : createCommentVNode(\"v-if\", true), unref(validateState) && unref(validateIcon) && unref(needStatusIcon) ? (openBlock(), createBlock(unref(ElIcon), {\n key: 1,\n class: normalizeClass([unref(nsInput).e(\"icon\"), unref(nsInput).e(\"validateIcon\"), unref(nsInput).is(\"loading\", unref(validateState) === \"validating\")])\n }, {\n default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(validateIcon))))]),\n _: 1\n }, 8, [\"class\"])) : createCommentVNode(\"v-if\", true)], 2)) : createCommentVNode(\"v-if\", true)], 46, [\"onMouseenter\", \"onMouseleave\"]);\n };\n }\n});\nvar InputTag = /* @__PURE__ */_export_sfc(_sfc_main, [[\"__file\", \"input-tag.vue\"]]);\nexport { InputTag as default };","map":{"version":3,"names":["name","inheritAttrs","attrs","useAttrs","slots","useSlots","form","formItem","useFormItem","inputId","useFormItemInputId","props","formItemContext","needStatusIcon","computed","_a","statusIcon","validateState","validateIcon","value","ValidateComponentsMap","inputRef","wrapperRef","isFocused","inputValue","size","tagSize","placeholder","closable","disabled","handleDragged","handleInput","handleKeydown","handleRemoveTag","handleClear","handleCompositionStart","handleCompositionUpdate","handleCompositionEnd","focus","blur","useInputTag","emit","hovering","handleMouseEnter","handleMouseLeave","useHovering","calculatorRef","inputStyle","useCalcInputWidth","dropIndicatorRef","showDropIndicator","handleDragStart","handleDragOver","handleDragEnd","useDragTag","afterDragged","ns","nsInput","containerKls","containerStyle","innerKls","showClear","showSuffix","useInputTagDom","expose"],"sources":["../../../../../../packages/components/input-tag/src/input-tag.vue"],"sourcesContent":["<template>\n <div\n ref=\"wrapperRef\"\n :class=\"containerKls\"\n :style=\"containerStyle\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n >\n <div v-if=\"slots.prefix\" :class=\"ns.e('prefix')\">\n <slot name=\"prefix\" />\n </div>\n <div :class=\"innerKls\">\n <el-tag\n v-for=\"(item, index) in modelValue\"\n :key=\"index\"\n :size=\"tagSize\"\n :closable=\"closable\"\n :type=\"tagType\"\n :effect=\"tagEffect\"\n :draggable=\"closable && draggable\"\n disable-transitions\n @close=\"handleRemoveTag(index)\"\n @dragstart=\"(event: DragEvent) => handleDragStart(event, index)\"\n @dragover=\"(event: DragEvent) => handleDragOver(event, index)\"\n @dragend=\"handleDragEnd\"\n @drop.stop\n >\n <slot name=\"tag\" :value=\"item\" :index=\"index\">\n {{ item }}\n </slot>\n </el-tag>\n <div :class=\"ns.e('input-wrapper')\">\n <input\n :id=\"inputId\"\n ref=\"inputRef\"\n v-model=\"inputValue\"\n v-bind=\"attrs\"\n type=\"text\"\n :minlength=\"minlength\"\n :maxlength=\"maxlength\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :tabindex=\"tabindex\"\n :placeholder=\"placeholder\"\n :autofocus=\"autofocus\"\n :ariaLabel=\"ariaLabel\"\n :class=\"ns.e('input')\"\n :style=\"inputStyle\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @keydown=\"handleKeydown\"\n />\n <span\n ref=\"calculatorRef\"\n aria-hidden=\"true\"\n :class=\"ns.e('input-calculator')\"\n v-text=\"inputValue\"\n />\n </div>\n <div\n v-show=\"showDropIndicator\"\n ref=\"dropIndicatorRef\"\n :class=\"ns.e('drop-indicator')\"\n />\n </div>\n <div v-if=\"showSuffix\" :class=\"ns.e('suffix')\">\n <slot name=\"suffix\" />\n <el-icon\n v-if=\"showClear\"\n :class=\"[ns.e('icon'), ns.e('clear')]\"\n @mousedown.prevent=\"NOOP\"\n @click=\"handleClear\"\n >\n <circle-close />\n </el-icon>\n <el-icon\n v-if=\"validateState && validateIcon && needStatusIcon\"\n :class=\"[\n nsInput.e('icon'),\n nsInput.e('validateIcon'),\n nsInput.is('loading', validateState === 'validating'),\n ]\"\n >\n <component :is=\"validateIcon\" />\n </el-icon>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, useSlots } from 'vue'\nimport { CircleClose } from '@element-plus/icons-vue'\nimport { useAttrs, useCalcInputWidth } from '@element-plus/hooks'\nimport { NOOP, ValidateComponentsMap } from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTag from '@element-plus/components/tag'\nimport { useFormItem, useFormItemInputId } from '@element-plus/components/form'\nimport { inputTagEmits, inputTagProps } from './input-tag'\nimport {\n useDragTag,\n useHovering,\n useInputTag,\n useInputTagDom,\n} from './composables'\n\ndefineOptions({\n name: 'ElInputTag',\n inheritAttrs: false,\n})\n\nconst props = defineProps(inputTagProps)\nconst emit = defineEmits(inputTagEmits)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\nconst { form, formItem } = useFormItem()\nconst { inputId } = useFormItemInputId(props, { formItemContext: formItem })\n\nconst needStatusIcon = computed(() => form?.statusIcon ?? false)\nconst validateState = computed(() => formItem?.validateState || '')\nconst validateIcon = computed(() => {\n return validateState.value && ValidateComponentsMap[validateState.value]\n})\n\nconst {\n inputRef,\n wrapperRef,\n isFocused,\n inputValue,\n size,\n tagSize,\n placeholder,\n closable,\n disabled,\n handleDragged,\n handleInput,\n handleKeydown,\n handleRemoveTag,\n handleClear,\n handleCompositionStart,\n handleCompositionUpdate,\n handleCompositionEnd,\n focus,\n blur,\n} = useInputTag({ props, emit, formItem })\nconst { hovering, handleMouseEnter, handleMouseLeave } = useHovering()\nconst { calculatorRef, inputStyle } = useCalcInputWidth()\nconst {\n dropIndicatorRef,\n showDropIndicator,\n handleDragStart,\n handleDragOver,\n handleDragEnd,\n} = useDragTag({ wrapperRef, handleDragged, afterDragged: focus })\nconst {\n ns,\n nsInput,\n containerKls,\n containerStyle,\n innerKls,\n showClear,\n showSuffix,\n} = useInputTagDom({\n props,\n hovering,\n isFocused,\n inputValue,\n disabled,\n size,\n validateState,\n validateIcon,\n needStatusIcon,\n})\n\ndefineExpose({\n focus,\n blur,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;mCA4Gc;EACZA,IAAM;EACNC,YAAc;AAChB;;;;;;;;;;IAKA,MAAMC,KAAA,GAAQC,QAAS;IACvB,MAAMC,KAAA,GAAQC,QAAS;IACvB,MAAM;MAAEC,IAAA;MAAMC;IAAS,IAAIC,WAAY;IACjC;MAAEC;IAAA,CAAY,GAAAC,kBAAA,CAAmBC,KAAA,EAAO;MAAEC,eAAA,EAAiBL;IAAA,CAAU;IAE3E,MAAMM,cAAiB,GAAAC,QAAA,CAAS,MAAM;MACtC,IAAMC,EAAgB;MAChB,QAAAA,EAAA,GAAAT,IAAA,WAAwB,KAAM,IAAAA,IAAA,CAAAU,UAAA,YAAAD,EAAA;IAClC;IACF,MAACE,aAAA,GAAAH,QAAA,QAAAP,QAAA,oBAAAA,QAAA,CAAAU,aAAA;IAEK,MAAAC,YAAA,GAAAJ,QAAA;MACJ,OAAAG,aAAA,CAAAE,KAAA,IAAAC,qBAAA,CAAAH,aAAA,CAAAE,KAAA;IAAA,CACA;IACA;MACAE,QAAA;MACAC,UAAA;MACAC,SAAA;MACAC,UAAA;MACAC,IAAA;MACAC,OAAA;MACAC,WAAA;MACAC,QAAA;MACAC,QAAA;MACAC,aAAA;MACAC,WAAA;MACAC,aAAA;MACAC,eAAA;MACAC,WAAA;MACAC,sBAAA;MACAC,uBAAA;MAAAC,oBACuB;MACzBC,KAAQ;MACRC;IACA,CAAM,GAAAC,WAAA;MAAA7B,KAAA;MAAA8B,IAAA;MAAAlC;IAAA;IACJ;MAAAmC,QAAA;MAAAC,gBAAA;MAAAC;IAAA,IAAAC,WAAA;IACA;MAAAC,aAAA;MAAAC;IAAA,IAAAC,iBAAA;IACA;MACAC,gBAAA;MACAC,iBAAA;MAAAC,eACe;MACXC,cAAA;MACJC;IAAA,CACA,GAAAC,UAAA;MAAAhC,UAAA;MAAAQ,aAAA;MAAAyB,YAAA,EAAAjB;IAAA;IACA;MACAkB,EAAA;MACAC,OAAA;MACAC,YAAA;MACAC,cAAA;MAAAC,QACiB;MACjBC,SAAA;MACAC;IAAA,CACA,GAAAC,cAAA;MACApD,KAAA;MACA+B,QAAA;MACAnB,SAAA;MACAC,UAAA;MACAK,QAAA;MACAJ,IAAA;MACDR,aAAA;MAEYC,YAAA;MACXL;IAAA,CACA;IACFmD,MAAC","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|