@apdesign/web-react 1.0.0

package/lib/InputTag/interface.d.ts

@@ -0,0 +1,215 @@
+import { CSSProperties, ReactNode } from 'react';
+import { PopoverProps } from '../Popover';
+export declare type ObjectValueType = {
+    value?: any;
+    label?: ReactNode;
+    closable?: boolean;
+};
+export declare type ValueChangeReason = 'add' | 'remove' | 'clear' | 'sort';
+/**
+ * @title InputTag
+ */
+export interface InputTagProps<T = any> {
+    className?: string | string[];
+    style?: CSSProperties;
+    /**
+     * @zh 不同尺寸
+     * @en Different sizes
+     */
+    size?: 'mini' | 'small' | 'default' | 'large';
+    /**
+     * @zh 预设文案
+     * @en Placeholder of input element
+     */
+    placeholder?: string;
+    /**
+     * @zh 是否是错误状态.(废弃，下个大版本移除，使用 status='error' 替代)
+     * @en Whether the input is error.(Deprecated, removed in the next major version, use status='error' instead)
+     * @deprecated status="error"
+     */
+    error?: boolean;
+    /**
+     * @zh 状态
+     * @en Status
+     * @version 2.45.0
+     */
+    status?: 'error' | 'warning';
+    /**
+     * @zh 是否禁用
+     * @en Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 自动聚焦
+     * @en Whether the input is focused by default
+     */
+    autoFocus?: boolean;
+    /**
+     * @zh 是否只读
+     * @en Whether the input is read only
+     */
+    readOnly?: boolean;
+    /**
+     * @zh 是否允许清除
+     * @en Whether to allow clear input value
+     */
+    allowClear?: boolean;
+    /**
+     * @zh 是否为内部标签变化添加动画。
+     * @en Whether to add animation for internal label changes
+     * @version 2.15.0
+     * @defaultValue true
+     */
+    animation?: boolean;
+    /**
+     * @zh 是否在失焦时自动存储正在输入的文本
+     * @en Whether to automatically store the text entering when blur InputTag
+     * @version 2.25.0
+     */
+    saveOnBlur?: boolean;
+    /**
+     * @zh 默认值
+     * @en To set default value
+     */
+    defaultValue?: T[];
+    /**
+     * @zh 控件值
+     * @en To set value
+     */
+    value?: T[];
+    /**
+     * @zh 控件的输入框内的值
+     * @en To set input value
+     */
+    inputValue?: string;
+    /**
+     * @zh 设置传入和回调出的值均为 `{ label: '', value: ''}` 格式。
+     * @en If true, the incoming and callback values will be `{label: '', value: '')` format
+     */
+    labelInValue?: boolean;
+    /**
+     * @zh 是否可以通过拖拽为 Tag 排序
+     * @en Weather it is possible to sort tags by drag
+     * @version 2.27.0
+     */
+    dragToSort?: boolean;
+    /**
+     * @zh 最多显示多少个 `tag`
+     * @en The maximum number of `tags` is displayed
+     * @version 2.59.0. `responsive ` in `2.62.0`
+     */
+    maxTagCount?: number | 'responsive' | {
+        count: number | 'responsive';
+        render?: (invisibleTagCount: number, value: T[]) => ReactNode;
+        popoverProps?: Partial<PopoverProps>;
+    };
+    /**
+     * @zh 添加前缀文字或者图标
+     * @en The prefix icon or text for the input-tag
+     * @version 2.47.0
+     */
+    prefix?: ReactNode;
+    /**
+     * @zh 后缀
+     * @en The suffix for the InputTag
+     */
+    suffix?: ReactNode;
+    /**
+     * @zh 输入框前添加元素
+     * @en The label text displayed before (on the left side of) the input-tag field
+     * @version 2.47.0
+     */
+    addBefore?: ReactNode;
+    /**
+     * @zh 输入框后添加元素
+     * @en The label text displayed after (on the right side of) the input-tag field
+     * @version 2.47.0
+     */
+    addAfter?: ReactNode;
+    /**
+     * @zh 自定义图标
+     * @en Custom icons
+     */
+    icon?: {
+        removeIcon?: ReactNode;
+        clearIcon?: ReactNode;
+    };
+    /**
+     * @zh 触发自动分词的分隔符
+     * @en Separator used to tokenize
+     * @version 2.44.0
+     */
+    tokenSeparators?: string[];
+    /**
+     * @zh 校验函数，默认在 按下enter时候触发。
+     * @en Function to check user's input, which is triggered when `Enter` is pressed
+     * @defaultValue (inputValue, values) => inputValue && values.every((item) => item !== inputValue)
+     * @version return type T and `Promise<T>` in 2.37.0
+     */
+    validate?: (inputValue: string, values: T[]) => boolean | Promise<boolean> | T | Promise<T>;
+    /**
+     * @zh 自定义标签渲染，`props` 为当前标签属性，`index` 为当前标签的顺序，`values` 为所有标签的值.
+     * @en Custom tag rendering, `props` is the current tag attribute, `index` is the order of the current tag, `values` is the value of all tags
+     * @version index、values added in 2.15.0
+     */
+    renderTag?: (props: {
+        value: any;
+        label: ReactNode;
+        closable: boolean;
+        onClose: (event: any) => void;
+    }, index: number, values: ObjectValueType[]) => ReactNode;
+    /**
+     * @zh 移除某一个标签时改变时触发
+     * @en Callback when a tag is removed
+     */
+    onRemove?: (value: T, index: number, event: any) => void;
+    /**
+     * @zh 控件值改变时触发
+     * @en Callback when value changes
+     * @version `reason` in 2.27.0
+     */
+    onChange?: (value: T[], reason: ValueChangeReason) => void;
+    /**
+     * @zh 失去焦点时候触发
+     * @en Callback when input is blurred
+     */
+    onBlur?: (e: any) => void;
+    /**
+     * @zh 聚焦时触发
+     * @en Callback when input is focused
+     */
+    onFocus?: (e: any) => void;
+    /**
+     * @zh 按 enter 键触发
+     * @en Callback when `Enter` key is pressed
+     */
+    onPressEnter?: (e: any) => void;
+    /**
+     * @zh 输入框文本改变的回调。
+     * @en Callback when the value of input changes
+     */
+    onInputChange?: (inputValue: string, event?: any) => void;
+    /**
+     * @zh 键盘事件回调
+     * @en Callback when the keyboard is pressed
+     */
+    onKeyDown?: (e: any) => void;
+    /**
+     * @zh 输入框文本粘贴的回调。
+     * @en Callback when you paste text in input box
+     */
+    onPaste?: (e: any) => void;
+    /**
+     * @zh 点击清除按钮的回调
+     * @en Callback when clear button is clicked
+     * @version 2.20.0
+     */
+    onClear?: () => void;
+    /**
+     * @zh 单击组件的回调。
+     * @en Callback when the component is clicked
+     */
+    onClick?: (e: any) => void;
+    tagClassName?: string;
+    disableInput?: boolean;
+}

package/lib/InputTag/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/InputTag/style/css.js

@@ -0,0 +1,3 @@
+require('../../style/index.css');
+require('../../Tag/style/css.js');
+require('./index.css');

package/lib/InputTag/style/index.css

@@ -0,0 +1 @@
+@keyframes arco-draggable-item-blink{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}.arco-draggable-item{box-sizing:border-box;list-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.arco-draggable-item-dragging{opacity:.3}.arco-draggable-item-dragover.arco-draggable-item-gap-left{box-shadow:-1px 0 rgb(var(--primary-6))}.arco-draggable-item-dragover.arco-draggable-item-gap-right{box-shadow:1px 0 rgb(var(--primary-6))}.arco-draggable-item-dragover.arco-draggable-item-gap-top{box-shadow:0 -1px rgb(var(--primary-6))}.arco-draggable-item-dragover.arco-draggable-item-gap-bottom{box-shadow:0 1px rgb(var(--primary-6))}.arco-draggable-item-dragged{animation:arco-draggable-item-blink .8s;animation-timing-function:cubic-bezier(0,0,1,1)}.arco-input-tag{display:inline-block;box-sizing:border-box;width:100%;padding-left:4px;padding-right:4px;border-radius:var(--border-radius-small);vertical-align:top;cursor:text;transition:all .1s cubic-bezier(0,0,1,1);background-color:var(--color-fill-2);color:var(--color-text-1);border:1px solid transparent}.arco-input-tag-view{display:flex;width:100%}.arco-input-tag-inner{display:flex;align-items:center;flex-wrap:wrap;flex-grow:1;position:relative;box-sizing:border-box;overflow:hidden}.arco-input-tag-prefix,.arco-input-tag-suffix{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:22px}.arco-input-tag-prefix{padding-left:8px;padding-right:4px}.arco-input-tag-suffix{padding-right:8px}.arco-input-tag .arco-input-tag-clear-icon{display:none;font-size:12px;color:var(--color-text-2);cursor:pointer}.arco-input-tag .arco-input-tag-clear-icon>svg{transition:color .1s cubic-bezier(0,0,1,1);position:relative}.arco-input-tag:hover .arco-input-tag-clear-icon{display:block}.arco-input-tag:hover .arco-input-tag-clear-icon~*{display:none}.arco-input-tag:not(.arco-input-tag-focus) .arco-input-tag-clear-icon:hover::before{background-color:var(--color-fill-4)}.arco-input-tag:not(.arco-input-tag-focus) .arco-draggable-item{cursor:move}.arco-input-tag-input{width:4px;max-width:100%;padding:0;border:none;outline:0;background:0 0;font-size:inherit;cursor:inherit;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-input-tag-input:first-child{width:100%}.arco-tag+.arco-input-tag-input[disabled]{width:0}.arco-input-tag-input-mirror{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none}.arco-input-tag-input::-webkit-input-placeholder{color:var(--color-text-3)}.arco-input-tag-input::-moz-placeholder{color:var(--color-text-3)}.arco-input-tag-input::-ms-input-placeholder{color:var(--color-text-3)}.arco-input-tag-input::placeholder{color:var(--color-text-3)}.arco-input-tag-tag{max-width:100%;margin-right:4px;font-size:12px}.arco-input-tag-tag-ellipsis{font-size:12px;margin:0 4px}.arco-input-tag .arco-icon-hover{cursor:pointer}.arco-input-tag .arco-icon-hover.arco-icon-hover-disabled{cursor:not-allowed}.arco-input-tag:hover{background-color:var(--color-fill-3);border:1px solid transparent}.arco-input-tag.arco-input-tag-focus{background-color:var(--color-bg-2);border:1px solid rgb(var(--primary-6));box-shadow:0 0 0 0 rgb(var(--primary-2))}.arco-input-tag .arco-input-tag-tag{color:var(--color-text-1);border-color:var(--color-fill-3);background-color:var(--color-bg-2)}.arco-input-tag .arco-icon-hover:hover::before{background-color:var(--color-fill-2)}.arco-input-tag.arco-input-tag-focus .arco-input-tag-tag{border-color:var(--color-fill-2);background-color:var(--color-fill-2)}.arco-input-tag.arco-input-tag-focus .arco-icon-hover:hover::before{background-color:var(--color-fill-3)}.arco-input-tag.arco-input-tag-disabled .arco-input-tag-tag{color:var(--color-text-4);border-color:var(--color-fill-3);background-color:var(--color-fill-2)}.arco-input-tag-warning{background-color:var(--color-warning-light-1);color:var(--color-text-1);border:1px solid transparent}.arco-input-tag-warning:hover{background-color:var(--color-warning-light-2);border:1px solid transparent}.arco-input-tag-warning.arco-input-tag-focus{background-color:var(--color-bg-2);border:1px solid rgb(var(--warning-6));box-shadow:0 0 0 0 var(--color-warning-light-2)}.arco-input-tag-error{background-color:rgb(var(--danger-1));color:var(--color-text-1);border:1px solid transparent}.arco-input-tag-error:hover{background-color:rgb(var(--danger-2));border:1px solid transparent}.arco-input-tag-error.arco-input-tag-focus{background-color:var(--color-bg-2);border:1px solid rgb(var(--danger-6));box-shadow:0 0 0 0 rgb(var(--danger-2))}.arco-input-tag-disabled{background-color:var(--color-fill-2);color:var(--color-text-4);border:1px solid transparent;cursor:not-allowed}.arco-input-tag-disabled:hover{background-color:var(--color-fill-2);border:1px solid transparent}.arco-input-tag-disabled .arco-input-tag-input::-webkit-input-placeholder{color:var(--color-text-4)}.arco-input-tag-disabled .arco-input-tag-input::-moz-placeholder{color:var(--color-text-4)}.arco-input-tag-disabled .arco-input-tag-input::-ms-input-placeholder{color:var(--color-text-4)}.arco-input-tag-disabled .arco-input-tag-input::placeholder{color:var(--color-text-4)}.arco-input-tag-readonly{cursor:default}.arco-input-tag-wrapper{display:inline-flex;align-items:stretch;width:100%}.arco-input-tag-wrapper .arco-input-tag{min-width:0}.arco-input-tag-wrapper .arco-input-tag:not(.arco-input-tag-focused):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.arco-input-tag-wrapper .arco-input-tag:not(.arco-input-tag-focused):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.arco-input-tag-addafter,.arco-input-tag-addbefore{display:flex;align-items:center;padding:0 12px;color:var(--color-text-1);background-color:var(--color-fill-2);white-space:nowrap;border:1px solid transparent}.arco-input-tag-addbefore{border-right:1px solid var(--color-border-2);border-top-left-radius:var(--border-radius-small);border-bottom-left-radius:var(--border-radius-small)}.arco-input-tag-addafter{border-left:1px solid var(--color-border-2);border-top-right-radius:var(--border-radius-small);border-bottom-right-radius:var(--border-radius-small)}.arco-input-tag-size-mini{font-size:12px}.arco-input-tag-size-mini .arco-input-tag-view{min-height:22px}.arco-input-tag-size-mini .arco-input-tag-tag,.arco-input-tag-size-mini .arco-input-tag-tag+.arco-input-tag-input{margin-top:1px;margin-bottom:1px;height:20px;line-height:18px}.arco-input-tag-size-mini.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-size-mini.arco-input-tag-has-placeholder input{box-sizing:border-box;padding-left:4px}.arco-input-tag-size-default{font-size:14px}.arco-input-tag-size-default .arco-input-tag-view{min-height:30px}.arco-input-tag-size-default .arco-input-tag-inner{padding-top:1px;padding-bottom:1px}.arco-input-tag-size-default .arco-input-tag-tag,.arco-input-tag-size-default .arco-input-tag-tag+.arco-input-tag-input{margin-top:1px;margin-bottom:1px;height:24px;line-height:22px}.arco-input-tag-size-default.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-size-default.arco-input-tag-has-placeholder input{box-sizing:border-box;padding-left:8px}.arco-input-tag-size-small{font-size:14px}.arco-input-tag-size-small .arco-input-tag-view{min-height:26px}.arco-input-tag-size-small .arco-input-tag-inner{padding-top:1px;padding-bottom:1px}.arco-input-tag-size-small .arco-input-tag-tag,.arco-input-tag-size-small .arco-input-tag-tag+.arco-input-tag-input{margin-top:1px;margin-bottom:1px;height:20px;line-height:18px}.arco-input-tag-size-small.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-size-small.arco-input-tag-has-placeholder input{box-sizing:border-box;padding-left:8px}.arco-input-tag-size-large{font-size:16px}.arco-input-tag-size-large .arco-input-tag-view{min-height:34px}.arco-input-tag-size-large .arco-input-tag-inner{padding-top:1px;padding-bottom:1px}.arco-input-tag-size-large .arco-input-tag-tag,.arco-input-tag-size-large .arco-input-tag-tag+.arco-input-tag-input{margin-top:1px;margin-bottom:1px;height:28px;line-height:26px}.arco-input-tag-size-large.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-size-large.arco-input-tag-has-placeholder input{box-sizing:border-box;padding-left:12px}.arco-input-tag-rtl{direction:rtl;padding-right:4px;padding-left:4px}.arco-input-tag-rtl .arco-input-tag-prefix{padding-right:8px;padding-left:4px}.arco-input-tag-rtl .arco-input-tag-suffix{padding-right:0;padding-left:8px}.arco-input-tag-rtl .arco-input-tag-tag{margin-right:0;margin-left:4px}.arco-input-tag-rtl .arco-input-tag-input-mirror{right:0;left:initial}.arco-input-tag-rtl.arco-input-tag-size-mini.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-rtl.arco-input-tag-size-mini.arco-input-tag-has-placeholder input{padding-right:4px}.arco-input-tag-rtl.arco-input-tag-size-default.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-rtl.arco-input-tag-size-default.arco-input-tag-has-placeholder input{padding-right:8px}.arco-input-tag-rtl.arco-input-tag-size-small.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-rtl.arco-input-tag-size-small.arco-input-tag-has-placeholder input{padding-right:8px}.arco-input-tag-rtl.arco-input-tag-size-large.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-rtl.arco-input-tag-size-large.arco-input-tag-has-placeholder input{padding-right:12px}.arco-input-tag-wrapper-rtl .arco-input-tag-addbefore{border-right:unset;border-left:1px solid var(--color-border-2)}.arco-input-tag-wrapper-rtl .arco-input-tag-addafter{border-left:unset;border-right:1px solid var(--color-border-2)}

package/lib/InputTag/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../style/index.less';
+import '../../Tag/style';
+import './index.less';

package/lib/InputTag/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../style/index.less");
+require("../../Tag/style");
+require("./index.less");

package/lib/InputTag/style/index.less

@@ -0,0 +1,364 @@
+@import '../../style/mixin.less';
+@import './token.less';
+@import '../../_class/Draggable/style/index.less';
+@import './mixin.less';
+
+@input-tag-prefix-cls: ~'@{prefix}-input-tag';
+
+.@{input-tag-prefix-cls} {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: @input-tag-padding-horizontal;
+  padding-right: @input-tag-padding-horizontal;
+  border-radius: @input-tag-border-radius;
+  vertical-align: top;
+  cursor: text;
+  transition: all @transition-duration-1 @transition-timing-function-linear;
+
+  &-view {
+    display: flex;
+    width: 100%;
+  }
+
+  &-inner {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  &-prefix,
+  &-suffix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 22px;
+  }
+
+  &-prefix {
+    padding-left: 8px;
+    padding-right: 4px;
+  }
+
+  &-suffix {
+    padding-right: 8px;
+  }
+
+  & &-clear-icon {
+    display: none;
+    font-size: @input-tag-size-icon-clear;
+    color: @input-tag-color-icon-clear;
+    cursor: pointer;
+
+    > svg {
+      transition: color @transition-duration-1 @transition-timing-function-linear;
+      position: relative;
+    }
+  }
+
+  &:hover &-clear-icon {
+    display: block;
+
+    & ~ * {
+      display: none;
+    }
+  }
+
+  &:not(&-focus) {
+    .@{input-tag-prefix-cls}-clear-icon:hover::before {
+      background-color: @input-tag-color-icon-clear-bg_hover;
+    }
+
+    .@{prefix}-draggable-item {
+      cursor: move;
+    }
+  }
+
+  &-input {
+    width: 4px;
+    // width might be overwrite by inline-style, max-width make text-ellipsis work
+    max-width: 100%;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: none;
+    font-size: inherit;
+    cursor: inherit;
+    color: inherit;
+    .text-ellipsis();
+
+    // input is the first child means that input-tag has an empty value
+    // we set width of input to 4px by default, and 100% when input-tag is empty to avoid wrap
+    // see https://github.com/arco-design/arco-design/pull/1863
+    &:first-child {
+      width: 100%;
+    }
+
+    .@{prefix}-tag + &[disabled] {
+      width: 0;
+    }
+
+    &-mirror {
+      position: absolute;
+      top: 0;
+      left: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+
+    &::placeholder {
+      color: @input-tag-color-placeholder;
+    }
+  }
+
+  &-tag {
+    max-width: 100%;
+    margin-right: @input-tag-tag-margin-right;
+    font-size: @input-tag-tag-font-size;
+
+    &-ellipsis {
+      font-size: @input-tag-tag-font-size;
+      margin: 0 4px;
+    }
+  }
+
+  // 多状态下的颜色处理
+  .status-color(@status) {
+    background-color: ~'@{input-tag-color-bg_@{status}}';
+    color: ~'@{input-tag-color-text_@{status}}';
+    border: @input-tag-border-width solid ~'@{input-tag-color-border_@{status}}';
+
+    &:hover {
+      background-color: ~'@{input-tag-color-bg_@{status}_hover}';
+      border: @input-tag-border-width solid ~'@{input-tag-color-border_@{status}_hover}';
+    }
+
+    &.@{input-tag-prefix-cls}-focus when not (@status = disabled) {
+      background-color: ~'@{input-tag-color-bg_@{status}_focus}';
+      border: @input-tag-border-width solid ~'@{input-tag-color-border_@{status}_focus}';
+      box-shadow: 0 0 0 ~'@{input-tag-size-shadow_@{status}_focus}' ~'@{input-tag-color-shadow_@{status}_focus}';
+    }
+  }
+
+  .@{prefix}-icon-hover {
+    cursor: pointer;
+
+    &.@{prefix}-icon-hover-disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .status-tag-color() {
+    .@{input-tag-prefix-cls}-tag {
+      color: @input-tag-color-text_default;
+      border-color: @input-tag-tag-color-border;
+      background-color: @input-tag-tag-color-bg;
+    }
+
+    .@{prefix}-icon-hover:hover::before {
+      background-color: @input-tag-tag-remove-icon-color-bg;
+    }
+
+    &.@{input-tag-prefix-cls}-focus {
+      .@{input-tag-prefix-cls}-tag {
+        border-color: @input-tag-tag-color-border_focus;
+        background-color: @input-tag-tag-color-bg_focus;
+      }
+
+      .@{prefix}-icon-hover:hover::before {
+        background-color: @input-tag-tag-remove-icon-color-bg_focus;
+      }
+    }
+
+    &.@{input-tag-prefix-cls}-disabled {
+      .@{input-tag-prefix-cls}-tag {
+        color: @input-tag-color-text_disabled;
+        border-color: @input-tag-tag-color-border_disabled;
+        background-color: @input-tag-tag-color-bg_disabled;
+      }
+    }
+  }
+
+  .status-color(default);
+  .status-tag-color();
+
+  &-warning {
+    .status-color(warning);
+  }
+
+  &-error {
+    .status-color(error);
+  }
+
+  &-disabled {
+    .status-color(disabled);
+
+    cursor: not-allowed;
+
+    .@{input-tag-prefix-cls}-input::placeholder {
+      color: @input-tag-color-text_disabled;
+    }
+  }
+
+  &-readonly {
+    cursor: default;
+  }
+
+  &-wrapper {
+    display: inline-flex;
+    align-items: stretch;
+    width: 100%;
+
+    .@{input-tag-prefix-cls} {
+      min-width: 0; // 避免 .arco-input-tag 宽度超出 .arco-input-tag-wrapper
+    }
+
+    .@{input-tag-prefix-cls}:not(.@{input-tag-prefix-cls}-focused) {
+      &:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  &-addafter,
+  &-addbefore {
+    display: flex;
+    align-items: center;
+    padding: 0 @input-tag-addon-padding-horizontal;
+    color: @input-tag-color-addon-text;
+    background-color: @input-tag-color-addon-bg;
+    white-space: nowrap;
+    border: 1px solid @input-tag-color-addon-border_default;
+  }
+
+  &-addbefore {
+    border-right: @input-tag-border-addon-separator-width solid @input-tag-color-addon-border;
+    border-top-left-radius: @input-tag-border-radius;
+    border-bottom-left-radius: @input-tag-border-radius;
+  }
+
+  &-addafter {
+    border-left: @input-tag-border-addon-separator-width solid @input-tag-color-addon-border;
+    border-top-right-radius: @input-tag-border-radius;
+    border-bottom-right-radius: @input-tag-border-radius;
+  }
+}
+
+.@{input-tag-prefix-cls} {
+  .size(@size) {
+    &-size-@{size} {
+      @ref-font-size: ~'input-tag-size-@{size}-font-size';
+      @ref-height: ~'input-tag-size-@{size}-height';
+      @ref-tag-height: ~'input-tag-size-@{size}-tag-height';
+      @ref-padding-horizontal_not_tag: ~'input-tag-size-@{size}-padding_no_tag';
+
+      @font-size: @@ref-font-size;
+      @height: @@ref-height;
+      @tag-height: @@ref-tag-height;
+      @padding-horizontal_not_tag: @@ref-padding-horizontal_not_tag;
+
+      font-size: @font-size;
+
+      .@{input-tag-prefix-cls}-view {
+        min-height: @height - @input-tag-border-width * 2;
+      }
+
+      .@{input-tag-prefix-cls}-inner {
+        padding-top: (@height / 2) - (@tag-height / 2) - @input-tag-border-width -
+          @input-tag-tag-margin-vertical;
+        padding-bottom: $padding-top;
+      }
+
+      .@{input-tag-prefix-cls}-tag,
+      .@{input-tag-prefix-cls}-tag + .@{input-tag-prefix-cls}-input {
+        margin-top: (@input-tag-tag-margin-vertical / 2);
+        margin-bottom: $margin-top;
+        height: @tag-height;
+        line-height: $height - 2;
+      }
+
+      &.@{input-tag-prefix-cls}-has-placeholder {
+        input,
+        .@{input-tag-prefix-cls}-input-mirror {
+          box-sizing: border-box;
+          padding-left: @padding-horizontal_not_tag - @input-tag-padding-horizontal;
+        }
+      }
+    }
+  }
+
+  .size(mini);
+  .size(default);
+  .size(small);
+  .size(large);
+}
+
+.@{input-tag-prefix-cls}-rtl {
+  direction: rtl;
+  padding-right: @input-tag-padding-horizontal;
+  padding-left: @input-tag-padding-horizontal;
+
+  .@{input-tag-prefix-cls}-prefix {
+    padding-right: 8px;
+    padding-left: 4px;
+  }
+
+  .@{input-tag-prefix-cls}-suffix {
+    padding-right: 0;
+    padding-left: 8px;
+  }
+
+  .@{input-tag-prefix-cls}-tag {
+    margin-right: 0;
+    margin-left: @input-tag-tag-margin-right;
+  }
+
+  .@{input-tag-prefix-cls}-input {
+    &-mirror {
+      right: 0;
+      left: initial;
+    }
+  }
+
+  .size(@size) {
+    @ref-padding-horizontal_not_tag: ~'input-tag-size-@{size}-padding_no_tag';
+    @padding-horizontal_not_tag: @@ref-padding-horizontal_not_tag;
+
+    &.@{input-tag-prefix-cls}-size-@{size} {
+      &.@{input-tag-prefix-cls}-has-placeholder {
+        input,
+        .@{input-tag-prefix-cls}-input-mirror {
+          padding-right: @padding-horizontal_not_tag - @input-tag-padding-horizontal;
+        }
+      }
+    }
+  }
+
+  .size(mini);
+  .size(default);
+  .size(small);
+  .size(large);
+}
+
+.@{input-tag-prefix-cls}-wrapper-rtl {
+  .@{input-tag-prefix-cls}-addbefore {
+    border-right: unset;
+    border-left: @input-tag-border-addon-separator-width solid @input-tag-color-addon-border;
+  }
+
+  .@{input-tag-prefix-cls}-addafter {
+    border-left: unset;
+    border-right: @input-tag-border-addon-separator-width solid @input-tag-color-addon-border;
+  }
+}

package/lib/InputTag/style/mixin.less

@@ -0,0 +1,23 @@
+@import './token.less';
+
+@input-tag-prefix-cls: ~'@{prefix}-input-tag';
+
+.input-tag-input-element-padding(@paddingLeft) {
+  .@{input-tag-prefix-cls}-has-placeholder {
+    input,
+    .@{input-tag-prefix-cls}-input-mirror {
+      box-sizing: border-box;
+      padding-left: @paddingLeft;
+    }
+  }
+}
+
+.input-tag-input-element-padding-rtl(@paddingRight) {
+  .@{input-tag-prefix-cls}-has-placeholder {
+    input,
+    .@{input-tag-prefix-cls}-input-mirror {
+      padding-left: 0;
+      padding-right: @paddingRight;
+    }
+  }
+}