feat(tag-input): tag padding (Tencent#1860)

* feat(tag-input): tag padding

* fix(tag-input): inputProps dynamic

* fix(tag-input): inputProps

* fix(tag-input): class prefix

* style: fix lint error

* fix(tag-input): suffix icon class

* feat: update common

src/select/__tests__/__snapshots__/index.test.jsx.snap

@@ -286,7 +286,7 @@ exports[`Select > :props > :multiple 1`] = `
   class="t-select__wrap"
 >
   <div
-    class="t-input__wrap t-tag-input t-tag-input--break-line t-select-input--multiple t-select-input--empty t-select"
+    class="t-input__wrap t-tag-input t-tag-input--break-line t-is-empty t-tag-input__with-suffix-icon t-select-input--multiple t-select-input--empty t-select"
   >
     <div
       class="t-input t-size-m t-is-default t-is-readonly t-input--prefix t-input--suffix"

src/tag-input/_example/status.vue

@@ -1,5 +1,5 @@
 <template>
-  <t-space direction="vertical">
+  <t-space direction="vertical" size="32px">
     <div class="t-tdesign-demo__tag-input">
       <label>禁用状态：</label>
       <t-tag-input :value="tags1" disabled />

src/tag-input/tag-input.tsx

@@ -6,7 +6,6 @@ import { CloseCircleFilledIcon as TdCloseCircleFilledIcon } from 'tdesign-icons-
 import TInput, { InputValue } from '../input';
 import { TdTagInputProps } from './type';
 import props from './props';
-import { prefix } from '../config';
 import { renderTNodeJSX } from '../utils/render-tnode';
 import useTagScroll from './hooks/useTagScroll';
 import useTagList from './useTagList';
@@ -22,10 +21,11 @@ export default defineComponent({
   props: { ...props },
 
   setup(props: TdTagInputProps, context) {
-    const { inputValue } = toRefs(props);
-    const { inputProps } = props;
-    const isCompositionRef = ref(false);
+    const { inputValue, inputProps } = toRefs(props);
+    // 除了绑定 DOM 的变量，其他的一律不可使用 Ref 作为后缀
+    const isComposition = ref(false);
     const COMPONENT_NAME = usePrefixClass('tag-input');
+    const classPrefix = usePrefixClass();
 
     const [tInputValue, setTInputValue] = useDefaultValue(
       inputValue,
@@ -52,7 +52,7 @@ export default defineComponent({
         sortOnDraggable: props.dragSort,
         onDragOverCheck: {
           x: true,
-          targetClassNameRegExp: new RegExp(`^${prefix}-tag`),
+          targetClassNameRegExp: new RegExp(`^${classPrefix.value}-tag`),
         },
       },
       context,
@@ -71,12 +71,17 @@ export default defineComponent({
 
     const { CloseCircleFilledIcon } = useGlobalIcon({ CloseCircleFilledIcon: TdCloseCircleFilledIcon });
 
-    const classes = computed(() => [
-      COMPONENT_NAME.value,
-      {
-        [`${COMPONENT_NAME.value}--break-line`]: excessTagsDisplayType.value === 'break-line',
-      },
-    ]);
+    const classes = computed(() => {
+      const isEmpty = !(Array.isArray(tagValue.value) && tagValue.value.length);
+      return [
+        COMPONENT_NAME.value,
+        {
+          [`${COMPONENT_NAME.value}--break-line`]: excessTagsDisplayType.value === 'break-line',
+          [`${classPrefix.value}-is-empty`]: isEmpty,
+          [`${classPrefix.value}-tag-input--with-tag`]: !isEmpty,
+        },
+      ];
+    });
 
     const tagInputPlaceholder = computed(() => (!tagValue.value?.length ? placeholder.value : ''));
 
@@ -89,23 +94,23 @@ export default defineComponent({
     ));
 
     const onInputCompositionstart = (value: InputValue, context: { e: CompositionEvent }) => {
-      isCompositionRef.value = true;
-      inputProps?.onCompositionstart?.(value, context);
+      isComposition.value = true;
+      inputProps.value?.onCompositionstart?.(value, context);
     };
 
     const onInputCompositionend = (value: InputValue, context: { e: CompositionEvent }) => {
-      isCompositionRef.value = false;
-      inputProps?.onCompositionend?.(value, context);
+      isComposition.value = false;
+      inputProps.value?.onCompositionend?.(value, context);
     };
 
     const onInputEnter = (value: InputValue, context: { e: KeyboardEvent }) => {
       // 阻止 Enter 默认行为，避免在 Form 中触发 submit 事件
       context.e?.preventDefault();
       setTInputValue('', { e: context.e, trigger: 'enter' });
-      !isCompositionRef.value && onInnerEnter(value, context);
+      !isComposition.value && onInnerEnter(value, context);
       nextTick(() => {
         scrollToRight();
-        isCompositionRef.value = false;
+        isComposition.value = false;
       });
     };
 
@@ -127,6 +132,7 @@ export default defineComponent({
       tagInputPlaceholder,
       showClearIcon,
       tagInputRef,
+      classPrefix,
       setTInputValue,
       addHover,
       cancelHover,
@@ -155,6 +161,10 @@ export default defineComponent({
     ) : (
       renderTNodeJSX(this, 'suffixIcon')
     );
+    const suffixClass = `${this.classPrefix}-tag-input__with-suffix-icon`;
+    if (suffixIconNode && !this.classes.includes(suffixClass)) {
+      this.classes.push(suffixClass);
+    }
     // 自定义 Tag 节点
     const displayNode = renderTNodeJSX(this, 'valueDisplay', {
       params: {
@@ -167,7 +177,6 @@ export default defineComponent({
     return (
       <TInput
         ref="tagInputRef"
-        {...this.inputProps}
         readonly={this.inputProps?.readonly}
         inputClass={this.inputProps?.inputClass} // 展开无效 需直接透传
         value={this.tInputValue}
@@ -216,6 +225,7 @@ export default defineComponent({
         }}
         onCompositionstart={this.onInputCompositionstart}
         onCompositionend={this.onInputCompositionend}
+        props={this.inputProps}
       />
     );
   },

src/tag-input/useTagList.tsx

@@ -1,6 +1,6 @@
 import { ref, toRefs } from '@vue/composition-api';
 import {
-  TagInputValue, TagInputChangeContext, TdTagInputProps, DragProps,
+  TagInputValue, TagInputChangeContext, TdTagInputProps, DragProps, TagInputRemoveContext,
 } from './type';
 import { InputValue } from '../input';
 import Tag from '../tag';
@@ -63,18 +63,17 @@ export default function useTagList(props: TdTagInputProps, getDragProps: DragPro
       const index = tagValue.value.length - 1;
       const item = tagValue.value[index];
       const trigger = 'backspace';
-      setTagValue(tagValue.value.slice(0, -1), {
+      const newValue = tagValue.value.slice(0, -1);
+      const params: Omit<TagInputRemoveContext, 'value'> = {
         e,
         index,
         item,
         trigger,
-      });
+      };
+      setTagValue(newValue, params);
       onRemove.value?.({
-        e,
-        index,
-        item,
-        trigger,
-        value: tagValue.value,
+        ...params,
+        value: newValue,
       });
     }
     oldInputValue.value = value;

src/tree-select/__tests__/__snapshots__/index.test.jsx.snap

@@ -43,7 +43,7 @@ exports[`TreeSelect > :props > :clearable 1`] = `
 
 exports[`TreeSelect > :props > :defaultValue 1`] = `
 <div
-  class="t-input__wrap t-tag-input t-tag-input--break-line t-select-input--multiple t-select-input--empty t-tree-select"
+  class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag t-tag-input__with-suffix-icon t-select-input--multiple t-select-input--empty t-tree-select"
 >
   <div
     class="t-input t-size-m t-is-default t-is-readonly t-input--prefix t-input--suffix"
@@ -398,7 +398,7 @@ exports[`TreeSelect > :props > :minCollapsedNum 1`] = `
 
 exports[`TreeSelect > :props > :multiple 1`] = `
 <div
-  class="t-input__wrap t-tag-input t-tag-input--break-line t-select-input--multiple t-select-input--empty t-tree-select"
+  class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag t-tag-input__with-suffix-icon t-select-input--multiple t-select-input--empty t-tree-select"
 >
   <div
     class="t-input t-size-m t-is-default t-is-readonly t-input--prefix t-input--suffix"