xdesign-vue-next/es/tag-input/tag-input.mjs.map

XDesign Component for vue-next

{"version":3,"file":"tag-input.mjs","sources":["../../src/tag-input/tag-input.tsx"],"sourcesContent":["import { defineComponent, computed, toRefs, ref, nextTick, reactive } from 'vue';\nimport TInput, { InputValue, TdInputProps } from '../input';\nimport { TdTagInputProps } from './type';\nimport props from './props';\nimport { renderTNodeJSX } from '../utils/render-tnode';\nimport { useConfig } from '../config-provider/useConfig';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport useTagScroll from './hooks/useTagScroll';\nimport useTagList from './useTagList';\nimport useHover from './hooks/useHover';\nimport useDefault from '../hooks/useDefaultValue';\nimport useDragSorter from './hooks/useDragSorter';\nimport isArray from 'lodash/isArray';\n\nconst useComponentClassName = () => {\n  return {\n    NAME_CLASS: usePrefixClass('tag-input'),\n    CLEAR_CLASS: usePrefixClass('tag-input__suffix-clear'),\n    BREAK_LINE_CLASS: usePrefixClass('tag-input--break-line'),\n  };\n};\n\nexport default defineComponent({\n  name: 'XTagInput',\n\n  props: { ...props },\n\n  setup(props: TdTagInputProps) {\n    const { NAME_CLASS, CLEAR_CLASS, BREAK_LINE_CLASS } = useComponentClassName();\n\n    const { inputValue, inputProps } = toRefs(props);\n    const [tInputValue, setTInputValue] = useDefault(\n      inputValue,\n      props.defaultInputValue,\n      props.onInputChange,\n      'inputValue',\n    );\n    const { excessTagsDisplayType, readonly, disabled, clearable, placeholder } = toRefs(props);\n    const { isHover, addHover, cancelHover } = useHover({\n      readonly: props.readonly,\n      disabled: props.disabled,\n      onMouseenter: props.onMouseenter,\n      onMouseleave: props.onMouseleave,\n    });\n    const isComposition = ref(false);\n    const { classPrefix } = useConfig();\n    // 这里不需要响应式，因此直接传递参数\n    const { getDragProps } = useDragSorter({\n      ...props,\n      sortOnDraggable: props.dragSort,\n      onDragOverCheck: {\n        x: true,\n        targetClassNameRegExp: new RegExp(`^${classPrefix.value}-tag`),\n      },\n    });\n    const { scrollToRight, onWheel, scrollToRightOnEnter, scrollToLeftOnLeave, tagInputRef } = useTagScroll(props);\n    // handle tag add and remove\n    // 需要响应式，为了尽量的和 react 版本做法相同，这里进行响应式处理\n    const { tagValue, onInnerEnter, onInputBackspaceKeyUp, onInputBackspaceKeyDown, clearAll, renderLabel, onClose } =\n      useTagList(\n        reactive({\n          ...toRefs(props),\n          getDragProps,\n        }),\n      );\n\n    const classes = computed(() => {\n      const isEmpty = !(isArray(tagValue.value) && tagValue.value.length);\n      return [\n        NAME_CLASS.value,\n        {\n          [BREAK_LINE_CLASS.value]: excessTagsDisplayType.value === 'break-line',\n          [`${classPrefix.value}-is-empty`]: isEmpty,\n          [`${classPrefix.value}-tag-input--with-tag`]: !isEmpty,\n        },\n      ];\n    });\n\n    const tagInputPlaceholder = computed(() => (!tagValue.value?.length ? placeholder.value : ''));\n\n    const showClearIcon = computed(() =>\n      Boolean(\n        !readonly.value &&\n          !disabled.value &&\n          clearable.value &&\n          isHover.value &&\n          (tagValue.value?.length || tInputValue.value),\n      ),\n    );\n\n    const onInputEnter = (value: InputValue, context: { e: KeyboardEvent }) => {\n      // 阻止 Enter 默认行为，避免在 Form 中触发 submit 事件\n      context.e?.preventDefault?.();\n      setTInputValue('', { e: context.e, trigger: 'enter' });\n      !isComposition.value && onInnerEnter(value, context);\n      nextTick(() => {\n        scrollToRight();\n        isComposition.value = false;\n      });\n    };\n\n    const onInputCompositionstart = (value: InputValue, context: { e: CompositionEvent }) => {\n      isComposition.value = true;\n      inputProps.value?.onCompositionstart?.(value, context);\n    };\n\n    const onInputCompositionend = (value: InputValue, context: { e: CompositionEvent }) => {\n      isComposition.value = false;\n      inputProps.value?.onCompositionend?.(value, context);\n    };\n\n    const onClick: TdInputProps['onClick'] = (ctx) => {\n      tagInputRef.value.focus();\n      props.onClick?.(ctx);\n    };\n\n    const onClearClick = (context: { e: MouseEvent }) => {\n      clearAll(context);\n      setTInputValue('', { e: context.e, trigger: 'clear' });\n      props.onClear?.(context);\n    };\n\n    const focus = () => {\n      tagInputRef.value.focus();\n    };\n\n    return {\n      CLEAR_CLASS,\n      tagValue,\n      tInputValue,\n      isHover,\n      tagInputPlaceholder,\n      showClearIcon,\n      tagInputRef,\n      classPrefix,\n      setTInputValue,\n      addHover,\n      cancelHover,\n      onInputEnter,\n      onInnerEnter,\n      onInputBackspaceKeyUp,\n      onInputBackspaceKeyDown,\n      renderLabel,\n      onWheel,\n      scrollToRightOnEnter,\n      scrollToLeftOnLeave,\n      onClick,\n      onClearClick,\n      onClose,\n      onInputCompositionstart,\n      onInputCompositionend,\n      focus,\n      classes,\n    };\n  },\n\n  render() {\n    const suffixIconNode = this.showClearIcon ? (\n      <icon-ri-close-circle-fill class={this.CLEAR_CLASS} onClick={this.onClearClick} />\n    ) : (\n      renderTNodeJSX(this, 'suffixIcon')\n    );\n    const suffixClass = `${this.classPrefix}-tag-input__with-suffix-icon`;\n    if (suffixIconNode && !this.classes.includes(suffixClass)) {\n      this.classes.push(suffixClass);\n    }\n    // 自定义 Tag 节点\n    const displayNode = renderTNodeJSX(this, 'valueDisplay', {\n      params: {\n        value: this.tagValue,\n        onClose: (index: number, item: any) => this.onClose({ index, item }),\n      },\n    });\n    // 左侧文本\n    const label = renderTNodeJSX(this, 'label', { silent: true });\n    return (\n      <TInput\n        ref=\"tagInputRef\"\n        v-slots={{\n          suffix: this.$slots.suffix,\n        }}\n        readonly={this.readonly}\n        value={this.tInputValue}\n        autoWidth={true} // 控制input_inner的宽度 设置为true让内部input不会提前换行\n        size={this.size}\n        disabled={this.disabled}\n        label={() => this.renderLabel({ displayNode, label })}\n        class={this.classes}\n        tips={this.tips}\n        status={this.status}\n        placeholder={this.tagInputPlaceholder}\n        suffix={this.suffix}\n        suffixIcon={() => suffixIconNode}\n        showInput={\n          !(this.inputProps as TdTagInputProps['inputProps'])?.readonly || !this.tagValue || !this.tagValue?.length\n        }\n        keepWrapperWidth={!this.autoWidth}\n        onWheel={this.onWheel}\n        onChange={(val, context) => {\n          this.setTInputValue(val, { ...context, trigger: 'input' });\n        }}\n        onPaste={this.onPaste}\n        onEnter={this.onInputEnter}\n        onKeyup={this.onInputBackspaceKeyUp}\n        onKeydown={this.onInputBackspaceKeyDown}\n        onMouseenter={(context: { e: MouseEvent }) => {\n          this.addHover(context);\n          this.scrollToRightOnEnter();\n        }}\n        onMouseleave={(context: { e: MouseEvent }) => {\n          this.cancelHover(context);\n          this.scrollToLeftOnLeave();\n        }}\n        onFocus={(inputValue: InputValue, context: { e: MouseEvent }) => {\n          this.onFocus?.(this.tagValue, { e: context.e, inputValue });\n        }}\n        onBlur={(inputValue: InputValue, context: { e: MouseEvent }) => {\n          this.setTInputValue('', { e: context.e, trigger: 'blur' });\n          this.onBlur?.(this.tagValue, { e: context.e, inputValue: '' });\n        }}\n        onClick={this.onClick}\n        onCompositionstart={this.onInputCompositionstart}\n        onCompositionend={this.onInputCompositionend}\n        {...(this.inputProps as TdTagInputProps['inputProps'])}\n      />\n    );\n  },\n});\n"],"names":["NAME_CLASS","CLEAR_CLASS","name","props","useDefault","tInputValue","setTInputValue","onDragOverCheck","x","getDragProps","isArray","trigger","nextTick","scrollToRight","tagInputRef","tagValue","isHover","tagInputPlaceholder","showClearIcon","classPrefix","addHover","cancelHover","onInputEnter","onInnerEnter","onInputBackspaceKeyUp","onInputBackspaceKeyDown","renderLabel","onWheel","scrollToRightOnEnter","scrollToLeftOnLeave","onClick","onClearClick","onClose","onInputCompositionstart","onInputCompositionend","focus","classes","_resolveComponent","params","index","item","silent","_createVNode","TInput","_mergeProps","displayNode","label","_this","inputValue","suffix"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAA,qBAAA,GAAA,SAAA,qBAAA,GAAA;;AAEIA,IAAAA,UAAAA,EAAAA,cAAAA,CAAAA,WAAAA,CAAAA;AACAC,IAAAA,WAAAA,EAAAA,cAAAA,CAAAA,yBAAAA,CAAAA;;;AAGJ,CAAA,CAAA;AAEA,gBAAA,eAAA,CAAA;AACEC,EAAAA,IAAAA,EAAAA,WAAAA;AAEAC,EAAAA,KAAAA,EAAAA,aAAAA,CAAAA,EAAAA,EAAAA,KAAAA,CAAAA;;AAGE,IAAA,IAAA,qBAAA,GAAA,qBAAA,EAAA;;;;AAEA,IAAA,IAAA,OAAA,GAAA,MAAA,CAAA,MAAA,CAAA;;;AACM,IAAA,IAAA,WAAA,GAAAC,eAAA,CAAA,UAAA,EAAA,MAAA,CAAA,iBAAA,EAAA,MAAA,CAAA,aAAA,EAAA,YAAA,CAAA;;AAACC,MAAAA,WAAAA,GAAAA,YAAAA,CAAAA,CAAAA,CAAAA;AAAaC,MAAAA,cAAAA,GAAAA,YAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMd,IAAA,IAAA,QAAA,GAAA,MAAA,CAAA,MAAA,CAAA;;;;;;;;;;;AAMN,OAAA,CAAA;;;;AACM,IAAA,IAAA,aAAA,GAAA,GAAA,CAAA,KAAA,CAAA,CAAA;AACA,IAAA,IAAA,UAAA,GAAA,SAAA,EAAA;;;;AAKJC,QAAAA,eAAAA,EAAAA;AACEC,UAAAA,CAAAA,EAAAA,IAAAA;;AAEF,SAAA;AAAA,OAAA,CAAA,CAAA;;AAEI,IAAA,IAAA,aAAA,GAAA,YAAA,CAAA,MAAA,CAAA;;;;;;AAGA,IAAA,IAAA,WAAA,GAAA,UAAA,CAAA,QAAA,CAAA,aAAA,CAAA,aAAA,CAAA,EAAA,EAAA,MAAA,CAAA,MAAA,CAAA,CAAA,EAAA,EAAA,EAAA;AAIAC,QAAAA,YAAAA,EAAAA,YAAAA;AAAA,OAAA,CAAA,CAAA,CAAA;;;;;;;;AAIA,IAAA,IAAA,OAAA,GAAA,QAAA,CAAA,YAAA;AAAyB,MAAA,IAAA,IAAA,CAAA;AAC7B,MAAA,IAAA,OAAA,GAAA,EAAAC,SAAA,CAAA,QAAA,CAAA,KAAA,CAAA,IAAA,QAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAAA;;AASF,KAAA,CAAA,CAAA;;AAEqC,MAAA,IAAA,eAAA,CAAA;AAAA,MAAA,OAAA,EAAA,CAAA,eAAA,GAAA,QAAA,CAAA,KAAA,MAAA,IAAA,IAAA,eAAA,KAAA,KAAA,CAAA,IAAA,eAAA,CAAA,MAAA,CAAA,GAAA,WAAA,CAAA,KAAA,GAAA,EAAA,CAAA;;;AAEN,MAAA,IAAA,gBAAA,CAAA;AAAA,MAAA,OAAA,OAAA,CAAA,CAAA,QAAA,CAAA,KAAA,IAAA,CAAA,QAAA,CAAA,KAAA,IAAA,SAAA,CAAA,KAAA,IAAA,OAAA,CAAA,KAAA,KAAA,CAAA,CAAA,gBAAA,GAAA,QAAA,CAAA,KAAA,MAAA,IAAA,IAAA,gBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,MAAA,KAAA,WAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AAO7B,KAAA,CAAA,CAAA;;;;;;AAMmCC,QAAAA,OAAAA,EAAAA,OAAAA;AAAiB,OAAA,CAAA,CAAA;;AAEpDC,MAAAA,QAAAA,CAAAA,YAAAA;AACgBC,QAAAA,aAAAA,EAAAA,CAAAA;;AAEhB,OAAA,CAAA,CAAA;;;;;;;;;;;;AAaI,IAAA,IAAA,OAAA,GAAA,SAAA,OAAA,CAAA,GAAA,EAAA;AAA4C,MAAA,IAAA,eAAA,CAAA;AAChDC,MAAAA,WAAAA,CAAAA,KAAAA,CAAAA,KAAAA,EAAAA,CAAAA;AACAX,MAAAA,CAAAA,eAAAA,GAAAA,MAAAA,CAAAA,OAAAA,MAAAA,IAAAA,IAAAA,eAAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,eAAAA,CAAAA,IAAAA,CAAAA,MAAAA,EAAAA,GAAAA,CAAAA,CAAAA;;AAGI,IAAA,IAAA,YAAA,GAAA,SAAA,YAAA,CAAA,OAAA,EAAA;AAA+C,MAAA,IAAA,eAAA,CAAA;;;;AAEhBQ,QAAAA,OAAAA,EAAAA,OAAAA;AAAiB,OAAA,CAAA,CAAA;AACpDR,MAAAA,CAAAA,eAAAA,GAAAA,MAAAA,CAAAA,OAAAA,MAAAA,IAAAA,IAAAA,eAAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,eAAAA,CAAAA,IAAAA,CAAAA,MAAAA,EAAAA,OAAAA,CAAAA,CAAAA;;AAGF,IAAA,IAAA,KAAA,GAAA,SAAA,KAAA,GAAA;AACEW,MAAAA,WAAAA,CAAAA,KAAAA,CAAAA,KAAAA,EAAAA,CAAAA;;;AAIAb,MAAAA,WAAAA,EAAAA,WAAAA;AACAc,MAAAA,QAAAA,EAAAA,QAAAA;AACAV,MAAAA,WAAAA,EAAAA,WAAAA;AACAW,MAAAA,OAAAA,EAAAA,OAAAA;AACAC,MAAAA,mBAAAA,EAAAA,mBAAAA;AACAC,MAAAA,aAAAA,EAAAA,aAAAA;AACAJ,MAAAA,WAAAA,EAAAA,WAAAA;AACAK,MAAAA,WAAAA,EAAAA,WAAAA;AACAb,MAAAA,cAAAA,EAAAA,cAAAA;AACAc,MAAAA,QAAAA,EAAAA,QAAAA;AACAC,MAAAA,WAAAA,EAAAA,WAAAA;AACAC,MAAAA,YAAAA,EAAAA,YAAAA;AACAC,MAAAA,YAAAA,EAAAA,YAAAA;AACAC,MAAAA,qBAAAA,EAAAA,qBAAAA;AACAC,MAAAA,uBAAAA,EAAAA,uBAAAA;AACAC,MAAAA,WAAAA,EAAAA,WAAAA;AACAC,MAAAA,OAAAA,EAAAA,OAAAA;AACAC,MAAAA,oBAAAA,EAAAA,oBAAAA;AACAC,MAAAA,mBAAAA,EAAAA,mBAAAA;AACAC,MAAAA,OAAAA,EAAAA,OAAAA;AACAC,MAAAA,YAAAA,EAAAA,YAAAA;AACAC,MAAAA,OAAAA,EAAAA,OAAAA;AACAC,MAAAA,uBAAAA,EAAAA,uBAAAA;AACAC,MAAAA,qBAAAA,EAAAA,qBAAAA;AACAC,MAAAA,KAAAA,EAAAA,KAAAA;AACAC,MAAAA,OAAAA,EAAAA,OAAAA;;;;AAIK,IAAA,IAAA,KAAA,GAAA,IAAA;;;0DAELC,uBAAA,EAAA;;AAAoD,MAAA,SAAA,EAAA,IAAA,CAAA,YAAA;AAAc,KAAA,EAAA,IAAA,CAAA,GAAA,cAAA,CAAA,IAAA,EAAA,YAAA,CAAA,CAAA;AAI9D,IAAA,IAAA,WAAA,GAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA,WAAA,EAAA,8BAAA,CAAA,CAAA;;AAEC,MAAA,IAAA,CAAA,OAAA,CAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AACP,KAAA;AAEM,IAAA,IAAA,WAAA,GAAA,cAAA,CAAA,IAAA,EAAA,cAAA,EAAA;AACJC,MAAAA,MAAAA,EAAAA;;AAEEN,QAAAA,OAAAA,EAAAA,SAAAA,OAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA;;AAAsDO,YAAAA,KAAAA,EAAAA,KAAAA;AAAOC,YAAAA,IAAAA,EAAAA,IAAAA;AAAK,WAAA,CAAA,CAAA;AAAC,SAAA;AACrE,OAAA;AACF,KAAA,CAAA,CAAA;AAEA,IAAA,IAAA,MAAA,GAAA,cAAA,CAAA,IAAA,EAAA,OAAA,EAAA;AAA8CC,MAAAA,MAAAA,EAAAA,IAAAA;AAAa,KAAA,CAAA,CAAA;AAC3D,IAAA,OAAAC,WAAA,CAAAC,KAAA,EAAAC,UAAA,CAAA;AAAA,MAAA,KAAA,EAAA,aAAA;;;AAQI,MAAA,WAAA,EAAA,IAAA;;;AAEe,MAAA,OAAA,EAAA,SAAA,KAAA,GAAA;;AACiBC,UAAAA,WAAAA,EAAAA,WAAAA;AAAaC,UAAAA,KAAAA,EAAAA,MAAAA;AAAM,SAAA,CAAA,CAAA;AACnD,OAAA;;;;;;AAKA,MAAA,YAAA,EAAA,SAAA,UAAA,GAAA;AAAY,QAAA,OAAA,cAAA,CAAA;AAAM,OAAA;AAAA,MAAA,WAAA,EAAA,EAAA,CAAA,gBAAA,GAAA,IAAA,CAAA,UAAA,MAAA,IAAA,IAAA,gBAAA,KAAA,KAAA,CAAA,IAAA,gBAAA,CAAA,QAAA,CAAA,IAAA,CAAA,IAAA,CAAA,QAAA,IAAA,EAAA,CAAA,cAAA,GAAA,IAAA,CAAA,QAAA,MAAA,IAAA,IAAA,cAAA,KAAA,KAAA,CAAA,IAAA,cAAA,CAAA,MAAA,CAAA;;;AAKJ,MAAA,UAAA,EAAA,SAAA,QAAA,CAAA,GAAA,EAAA,OAAA,EAAA;;AAE2BnC,UAAAA,OAAAA,EAAAA,OAAAA;;;;;;;;AAOvCoC,QAAAA,KAAAA,CAAAA,QAAAA,CAAAA,OAAAA,CAAAA,CAAAA;;;;AAIAA,QAAAA,KAAAA,CAAAA,WAAAA,CAAAA,OAAAA,CAAAA,CAAAA;;;AAGF,MAAA,SAAA,EAAA,SAAA,OAAA,CAAA,UAAA,EAAA,OAAA,EAAA;AAAiE,QAAA,IAAA,aAAA,CAAA;AAC1D,QAAA,CAAA,aAAA,GAAA,KAAA,CAAA,OAAA,MAAA,IAAA,IAAA,aAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,IAAA,CAAA,KAAA,EAAA,KAAA,CAAA,QAAA,EAAA;;AAAyCC,UAAAA,UAAAA,EAAAA,UAAAA;AAAW,SAAA,CAAA,CAAA;;AAE3D,MAAA,QAAA,EAAA,SAAA,MAAA,CAAA,UAAA,EAAA,OAAA,EAAA;AAAgE,QAAA,IAAA,YAAA,CAAA;AACzDD,QAAAA,KAAAA,CAAAA,cAAAA,CAAAA,EAAAA,EAAAA;;AAAmCpC,UAAAA,OAAAA,EAAAA,MAAAA;AAAgB,SAAA,CAAA,CAAA;AACnD,QAAA,CAAA,YAAA,GAAA,KAAA,CAAA,MAAA,MAAA,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,IAAA,CAAA,KAAA,EAAA,KAAA,CAAA,QAAA,EAAA;;AAAwCqC,UAAAA,UAAAA,EAAAA,EAAAA;AAAe,SAAA,CAAA,CAAA;;;;AAGrC,MAAA,kBAAA,EAAA,IAAA,CAAA,qBAAA;;AA1CvBC,MAAAA,MAAAA,EAAAA,IAAAA,CAAAA,MAAAA,CAAAA,MAAAA;;AA+CR,GAAA;AACF,CAAA,CAAA;;;;"}