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

XDesign Component for vue-next

{"version":3,"file":"useTagList.mjs","sources":["../../src/tag-input/useTagList.tsx"],"sourcesContent":["import { ref, toRefs } from 'vue';\nimport { TagInputValue, TagInputChangeContext } from './type';\nimport { TagInputProps } from './interface';\nimport { InputValue } from '../input';\nimport Tag from '../tag';\nimport useVModel from '../hooks/useVModel';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport { useTNodeJSX } from '../hooks/tnode';\n\nexport type ChangeParams = [TagInputChangeContext];\n\n// handle tag add and remove\nexport default function useTagList(props: TagInputProps) {\n  const renderTNode = useTNodeJSX();\n  const classPrefix = usePrefixClass();\n  const { value, modelValue, onRemove, max, minCollapsedNum, size, disabled, readonly, tagProps, getDragProps } =\n    toRefs(props);\n  // handle controlled property and uncontrolled property\n  const [tagValue, setTagValue] = useVModel(value, modelValue, props.defaultValue || [], props.onChange);\n  const oldInputValue = ref<InputValue>();\n\n  // 点击标签关闭按钮，删除标签\n  const onClose = (p: { e?: MouseEvent; index: number; item: string | number }) => {\n    const arr = [...tagValue.value];\n    arr.splice(p.index, 1);\n    setTagValue(arr, { trigger: 'tag-remove', ...p });\n    onRemove.value?.({ ...p, trigger: 'tag-remove', value: arr });\n  };\n\n  const clearAll = (context: { e: MouseEvent }) => {\n    setTagValue([], { trigger: 'clear', e: context.e });\n  };\n\n  // 按下 Enter 键，新增标签\n  const onInnerEnter = (value: InputValue, context: { e: KeyboardEvent }) => {\n    const valueStr = value ? String(value).trim() : '';\n    const isLimitExceeded = max && tagValue.value?.length >= max.value;\n    let newValue: TagInputValue = tagValue.value;\n    if (!isLimitExceeded && valueStr) {\n      newValue = tagValue.value instanceof Array ? tagValue.value.concat(String(valueStr)) : [valueStr];\n      setTagValue(newValue, {\n        trigger: 'enter',\n        index: newValue.length - 1,\n        item: valueStr,\n        e: context.e,\n      });\n    }\n    props?.onEnter?.(newValue, { ...context, inputValue: value });\n  };\n\n  // 按下回退键，删除标签\n  const onInputBackspaceKeyUp = (value: InputValue) => {\n    if (!tagValue.value || !tagValue.value.length) return;\n    oldInputValue.value = value;\n  };\n  // 按下回退键，删除标签\n  const onInputBackspaceKeyDown = (value: InputValue, context: { e: KeyboardEvent }) => {\n    const { e } = context;\n    if (!tagValue.value || !tagValue.value.length || e.key === 'Process') return;\n    // 回车键删除，输入框值为空时，才允许 Backspace 删除标签\n    const isDelete = /(Backspace|NumpadDelete)/i.test(e.code) || /(Backspace|NumpadDelete)/i.test(e.key);\n    if (!value && isDelete) {\n      const index = tagValue.value.length - 1;\n      const item = tagValue.value[index];\n      const trigger = 'backspace';\n      const newValue = tagValue.value.slice(0, -1);\n      setTagValue(newValue, { e, index, item, trigger });\n      onRemove.value?.({ e, index, item, trigger, value: newValue });\n    }\n    oldInputValue.value = value;\n  };\n\n  const renderLabel = ({ displayNode, label }: { displayNode: any; label: any }) => {\n    const newList = minCollapsedNum.value ? tagValue.value.slice(0, minCollapsedNum.value) : tagValue.value;\n    const list = displayNode\n      ? [displayNode]\n      : newList?.map?.((item, index) => {\n          const tagContent = renderTNode('tag', { params: { value: item } });\n          return (\n            <Tag\n              key={`${item}${index}`}\n              size={size.value}\n              disabled={disabled.value}\n              onClose={(context: { e: MouseEvent }) => onClose({ e: context.e, item, index })}\n              closable={!readonly.value && !disabled.value}\n              {...getDragProps.value?.(index, item)}\n              {...tagProps.value}\n            >\n              {tagContent ?? item}\n            </Tag>\n          );\n        }) || [];\n    if (![null, undefined, ''].includes(label)) {\n      list.unshift(\n        <div class={`${classPrefix.value}-tag-input__prefix`} key=\"label\">\n          {label}\n        </div>,\n      );\n    }\n    // 超出省略\n    if (newList.length !== (tagValue.value || []).length) {\n      const len = tagValue.value.length - newList.length;\n      const more = renderTNode('collapsedItems', {\n        params: {\n          value: tagValue.value,\n          count: tagValue.value.length - minCollapsedNum.value,\n          collapsedTags: tagValue.value.slice(minCollapsedNum.value, tagValue.value.length),\n          collapsedSelectedItems: tagValue.value.slice(minCollapsedNum.value, tagValue.value.length),\n        },\n      });\n      list.push(more ?? <Tag key=\"more\">+{len}</Tag>);\n    }\n    return list;\n  };\n\n  return {\n    tagValue,\n    clearAll,\n    onClose,\n    onInnerEnter,\n    onInputBackspaceKeyUp,\n    onInputBackspaceKeyDown,\n    renderLabel,\n  };\n}\n"],"names":["tagValue","setTagValue","trigger","value","index","item","inputValue","e","params","_createVNode","_mergeProps","collapsedTags","collapsedSelectedItems","clearAll","onClose","onInnerEnter","onInputBackspaceKeyUp","onInputBackspaceKeyDown","renderLabel"],"mappings":"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"}