bkui-vue 2.0.2-beta.74 → 2.0.2-beta.75

package/lib/tag-input/index.d.ts

@@ -225,7 +225,9 @@ declare const TagInput: {
                         alignmentAxis?: number;
                     });
                 };
-                boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+                boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+                    default: string | (() => HTMLElement);
+                };
                 zIndex: import("vue-types").VueTypeValidableDef<number> & {
                     default: number;
                 } & {
@@ -301,6 +303,16 @@ declare const TagInput: {
             type: import("vue").PropType<Partial<import("../../bkui-vue").IOptions>>;
             default: () => {};
         };
+        copyable: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        copySeparator: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
     }>> & {
         onFocus?: (...args: any[]) => any;
         onBlur?: (...args: any[]) => any;
@@ -310,9 +322,11 @@ declare const TagInput: {
         "onUpdate:modelValue"?: (...args: any[]) => any;
         onRemove?: (...args: any[]) => any;
         onRemoveAll?: (...args: any[]) => any;
+        "onCopy-success"?: (...args: any[]) => any;
     }, {
         isShowPlaceholder: import("vue").ComputedRef<boolean>;
         isShowClear: import("vue").ComputedRef<boolean>;
+        isShowCopy: import("vue").ComputedRef<boolean>;
         placeholderText: import("vue").ComputedRef<string>;
         curInputValue: import("vue").Ref<string>;
         renderList: import("vue").ComputedRef<any[]>;
@@ -348,6 +362,7 @@ declare const TagInput: {
         resolveClassName: (cls: string) => string;
         handleTagDblclick: (isDblclick: any) => void;
         handleTagDblclickChange: (item: any, index: any, value: any) => void;
+        handleCopy: (e: MouseEvent) => void;
         curPage: import("vue").Ref<number>;
         totalSize: import("vue").Ref<number>;
         totalPage: import("vue").Ref<number>;
@@ -370,7 +385,7 @@ declare const TagInput: {
                 crossAxis: number;
             };
         };
-    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "select" | "update:modelValue" | "remove" | "removeAll")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "select" | "update:modelValue" | "remove" | "removeAll" | "copy-success")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         modelValue: import("vue-types").VueTypeDef<string[]> & {
             default: () => string[];
         };
@@ -595,7 +610,9 @@ declare const TagInput: {
                         alignmentAxis?: number;
                     });
                 };
-                boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+                boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+                    default: string | (() => HTMLElement);
+                };
                 zIndex: import("vue-types").VueTypeValidableDef<number> & {
                     default: number;
                 } & {
@@ -671,6 +688,16 @@ declare const TagInput: {
             type: import("vue").PropType<Partial<import("../../bkui-vue").IOptions>>;
             default: () => {};
         };
+        copyable: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        copySeparator: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
     }>> & {
         onFocus?: (...args: any[]) => any;
         onBlur?: (...args: any[]) => any;
@@ -680,6 +707,7 @@ declare const TagInput: {
         "onUpdate:modelValue"?: (...args: any[]) => any;
         onRemove?: (...args: any[]) => any;
         onRemoveAll?: (...args: any[]) => any;
+        "onCopy-success"?: (...args: any[]) => any;
     }, {
         disabled: boolean;
         trigger: "focus" | "search";
@@ -711,6 +739,8 @@ declare const TagInput: {
         leftSpace: number;
         popoverProps: {};
         tagOverflowTips: {};
+        copyable: boolean;
+        copySeparator: string;
     }, true, {}, {}, {
         P: {};
         B: {};
@@ -943,7 +973,9 @@ declare const TagInput: {
                         alignmentAxis?: number;
                     });
                 };
-                boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+                boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+                    default: string | (() => HTMLElement);
+                };
                 zIndex: import("vue-types").VueTypeValidableDef<number> & {
                     default: number;
                 } & {
@@ -1019,6 +1051,16 @@ declare const TagInput: {
             type: import("vue").PropType<Partial<import("../../bkui-vue").IOptions>>;
             default: () => {};
         };
+        copyable: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        copySeparator: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
     }>> & {
         onFocus?: (...args: any[]) => any;
         onBlur?: (...args: any[]) => any;
@@ -1028,9 +1070,11 @@ declare const TagInput: {
         "onUpdate:modelValue"?: (...args: any[]) => any;
         onRemove?: (...args: any[]) => any;
         onRemoveAll?: (...args: any[]) => any;
+        "onCopy-success"?: (...args: any[]) => any;
     }, {
         isShowPlaceholder: import("vue").ComputedRef<boolean>;
         isShowClear: import("vue").ComputedRef<boolean>;
+        isShowCopy: import("vue").ComputedRef<boolean>;
         placeholderText: import("vue").ComputedRef<string>;
         curInputValue: import("vue").Ref<string>;
         renderList: import("vue").ComputedRef<any[]>;
@@ -1066,6 +1110,7 @@ declare const TagInput: {
         resolveClassName: (cls: string) => string;
         handleTagDblclick: (isDblclick: any) => void;
         handleTagDblclickChange: (item: any, index: any, value: any) => void;
+        handleCopy: (e: MouseEvent) => void;
         curPage: import("vue").Ref<number>;
         totalSize: import("vue").Ref<number>;
         totalPage: import("vue").Ref<number>;
@@ -1119,6 +1164,8 @@ declare const TagInput: {
         leftSpace: number;
         popoverProps: {};
         tagOverflowTips: {};
+        copyable: boolean;
+        copySeparator: string;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -1348,7 +1395,9 @@ declare const TagInput: {
                     alignmentAxis?: number;
                 });
             };
-            boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+            boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+                default: string | (() => HTMLElement);
+            };
             zIndex: import("vue-types").VueTypeValidableDef<number> & {
                 default: number;
             } & {
@@ -1424,6 +1473,16 @@ declare const TagInput: {
         type: import("vue").PropType<Partial<import("../../bkui-vue").IOptions>>;
         default: () => {};
     };
+    copyable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    copySeparator: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }>> & {
     onFocus?: (...args: any[]) => any;
     onBlur?: (...args: any[]) => any;
@@ -1433,9 +1492,11 @@ declare const TagInput: {
     "onUpdate:modelValue"?: (...args: any[]) => any;
     onRemove?: (...args: any[]) => any;
     onRemoveAll?: (...args: any[]) => any;
+    "onCopy-success"?: (...args: any[]) => any;
 }, {
     isShowPlaceholder: import("vue").ComputedRef<boolean>;
     isShowClear: import("vue").ComputedRef<boolean>;
+    isShowCopy: import("vue").ComputedRef<boolean>;
     placeholderText: import("vue").ComputedRef<string>;
     curInputValue: import("vue").Ref<string>;
     renderList: import("vue").ComputedRef<any[]>;
@@ -1471,6 +1532,7 @@ declare const TagInput: {
     resolveClassName: (cls: string) => string;
     handleTagDblclick: (isDblclick: any) => void;
     handleTagDblclickChange: (item: any, index: any, value: any) => void;
+    handleCopy: (e: MouseEvent) => void;
     curPage: import("vue").Ref<number>;
     totalSize: import("vue").Ref<number>;
     totalPage: import("vue").Ref<number>;
@@ -1493,7 +1555,7 @@ declare const TagInput: {
             crossAxis: number;
         };
     };
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "select" | "update:modelValue" | "remove" | "removeAll")[], "blur" | "change" | "focus" | "input" | "select" | "update:modelValue" | "remove" | "removeAll", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "select" | "update:modelValue" | "remove" | "removeAll" | "copy-success")[], "blur" | "change" | "focus" | "input" | "select" | "update:modelValue" | "remove" | "removeAll" | "copy-success", {
     disabled: boolean;
     trigger: "focus" | "search";
     separator: string;
@@ -1524,6 +1586,8 @@ declare const TagInput: {
     leftSpace: number;
     popoverProps: {};
     tagOverflowTips: {};
+    copyable: boolean;
+    copySeparator: string;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]>;
 export default TagInput;
 export { useTagsOverflow, TagInput };

package/lib/tag-input/index.js

@@ -1633,7 +1633,7 @@ const external_overflow_title_namespaceObject = external_overflow_title_x({  });
 ;// CONCATENATED MODULE: external "../icon"
 var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var icon_y = x => () => x
-const icon_namespaceObject = icon_x({ ["Close"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Close, ["Error"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Error });
+const icon_namespaceObject = icon_x({ ["Close"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Close, ["Copy"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Copy, ["Error"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Error });
 ;// CONCATENATED MODULE: external "../loading"
 var loading_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var loading_y = x => () => x
@@ -3165,7 +3165,9 @@ var tagProps = function tagProps() {
       "default": function _default() {
         return {};
       }
-    }
+    },
+    copyable: shared_namespaceObject.PropTypes.bool.def(true),
+    copySeparator: shared_namespaceObject.PropTypes.string.def('\n')
   };
 };
 /* harmony default export */ const tag_props = (tagProps);
@@ -3405,7 +3407,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     bkTooltips: src_tooltips
   },
   props: tag_props(),
-  emits: ['update:modelValue', 'change', 'select', 'focus', 'blur', 'remove', 'removeAll', 'input'],
+  emits: ['update:modelValue', 'change', 'select', 'focus', 'blur', 'remove', 'removeAll', 'input', 'copy-success'],
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
     var formItem = (0,shared_namespaceObject.useFormItem)();
@@ -3468,6 +3470,9 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     var isShowClear = (0,external_vue_namespaceObject.computed)(function () {
       return props.clearable && !props.disabled && listState.selectedTagList.length !== 0 && (props.showClearOnlyHover ? state.isHover : true);
     });
+    var isShowCopy = (0,external_vue_namespaceObject.computed)(function () {
+      return props.copyable && listState.selectedTagList.length !== 0 && (props.showClearOnlyHover ? state.isHover : true);
+    });
     var triggerClass = (0,external_vue_namespaceObject.computed)(function () {
       return _defineProperty(_defineProperty(_defineProperty({}, "".concat(resolveClassName('tag-input-trigger')), true), "active", state.isEdit), "disabled", props.disabled);
     });
@@ -4284,11 +4289,46 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
         return acc;
       }, []);
     });
+    var handleCopy = function handleCopy(e) {
+      var _navigator$clipboard;
+      e.stopPropagation();
+      // 获取选中的 tag 列表
+      var selectedTags = listState.selectedTagList;
+      if (selectedTags.length === 0) {
+        return;
+      }
+      // 将选中的 tags 按换行分隔
+      var copyText = selectedTags.map(function (tag) {
+        return tag[props.displayKey];
+      }).join(props.copySeparator);
+      if ((_navigator$clipboard = navigator.clipboard) !== null && _navigator$clipboard !== void 0 && _navigator$clipboard.writeText) {
+        navigator.clipboard.writeText(copyText)["catch"](function (err) {
+          console.error('Failed to copy:', err);
+        });
+      } else {
+        var textarea = document.createElement('textarea');
+        textarea.value = copyText;
+        textarea.style.position = 'fixed';
+        textarea.style.opacity = '0';
+        document.body.appendChild(textarea);
+        textarea.select();
+        try {
+          document.execCommand('copy');
+        } catch (err) {
+          console.error('Failed to copy:', err);
+        }
+        document.body.removeChild(textarea);
+      }
+      setTimeout(function () {
+        emit('copy-success', tagList.value);
+      });
+    };
     return tag_input_objectSpread(tag_input_objectSpread(tag_input_objectSpread(tag_input_objectSpread({
       popoverProps: popoverProps
     }, (0,external_vue_namespaceObject.toRefs)(state)), (0,external_vue_namespaceObject.toRefs)(listState)), (0,external_vue_namespaceObject.toRefs)(pageState)), {}, {
       isShowPlaceholder: isShowPlaceholder,
       isShowClear: isShowClear,
+      isShowCopy: isShowCopy,
       placeholderText: placeholderText,
       curInputValue: curInputValue,
       renderList: renderList,
@@ -4317,7 +4357,8 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       handlePaste: handlePaste,
       resolveClassName: resolveClassName,
       handleTagDblclick: handleTagDblclick,
-      handleTagDblclickChange: handleTagDblclickChange
+      handleTagDblclickChange: handleTagDblclickChange,
+      handleCopy: handleCopy
     });
   },
   render: function render() {
@@ -4405,10 +4446,16 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
           "style": "position: absolute; white-space: nowrap; border-box; visibility: hidden; z-index: 1"
         }, [_this.curInputValue])]), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("p", {
           "class": "placeholder"
-        }, [_this.placeholderText]), [[external_vue_namespaceObject.vShow, _this.isShowPlaceholder]]), (_this$$slots$suffix = (_this$$slots = _this.$slots) === null || _this$$slots === void 0 || (_this$$slots$suffix2 = _this$$slots.suffix) === null || _this$$slots$suffix2 === void 0 ? void 0 : _this$$slots$suffix2.call(_this$$slots)) !== null && _this$$slots$suffix !== void 0 ? _this$$slots$suffix : _this.isShowClear && (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Close, {
+        }, [_this.placeholderText]), [[external_vue_namespaceObject.vShow, _this.isShowPlaceholder]]), (_this$$slots$suffix = (_this$$slots = _this.$slots) === null || _this$$slots === void 0 || (_this$$slots$suffix2 = _this$$slots.suffix) === null || _this$$slots$suffix2 === void 0 ? void 0 : _this$$slots$suffix2.call(_this$$slots)) !== null && _this$$slots$suffix !== void 0 ? _this$$slots$suffix : (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": "icon-wrapper"
+        }, [_this.isShowCopy && (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Copy, {
+          "class": "copy-icon",
+          "title": "\u590D\u5236",
+          "onClick": _this.handleCopy
+        }, null), _this.isShowClear && (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Close, {
           "class": "clear-icon",
           "onClick": _this.handleClear
-        }, null)]);
+        }, null)])]);
       },
       content: function content() {
         return (0,external_vue_namespaceObject.createVNode)("div", {

package/lib/tag-input/tag-input.css

@@ -34,6 +34,7 @@
   overflow: auto;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list > li {
+  position: relative;
   display: inline-flex;
   align-items: center;
   height: 22px;
@@ -42,7 +43,6 @@
   font-size: 12px;
   border: solid 1px transparent;
   border-radius: 2px;
-  position: relative;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list > li.tag-item {
   background: #f0f1f5;
@@ -63,19 +63,19 @@
   white-space: nowrap;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .tag .dblclick-edit-input {
-  background-color: #e1ecff;
-  border: none;
-  height: 100%;
-  max-width: 100%;
-  padding: 0px 8px;
   position: absolute;
-  resize: none;
   top: 0px;
   width: 100%;
+  max-width: 100%;
+  height: 100%;
+  padding: 0px 8px;
+  resize: none;
+  background-color: #e1ecff;
+  border: none;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .tag .dblclick-edit-input:focus {
-  outline: none;
   border: none;
+  outline: none;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .text {
   box-sizing: border-box;
@@ -111,6 +111,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-tag-input .bk-tag-input-trigger .icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
 .bk-tag-input .bk-tag-input-trigger .clear-icon {
   margin-right: 5px;
   font-size: 14px;
@@ -121,6 +126,16 @@
 .bk-tag-input .bk-tag-input-trigger .clear-icon:hover {
   color: #979ba5;
 }
+.bk-tag-input .bk-tag-input-trigger .copy-icon {
+  margin-right: 5px;
+  font-size: 14px;
+  line-height: 0;
+  color: #c4c6cc;
+  cursor: pointer;
+}
+.bk-tag-input .bk-tag-input-trigger .copy-icon:hover {
+  color: #979ba5;
+}
 .bk-tag-input-popover-content.bk-popover {
   padding: 0 !important;
 }

package/lib/tag-input/tag-input.d.ts

@@ -224,7 +224,9 @@ declare const _default: import("vue").DefineComponent<{
                     alignmentAxis?: number;
                 });
             };
-            boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+            boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+                default: string | (() => HTMLElement);
+            };
             zIndex: import("vue-types").VueTypeValidableDef<number> & {
                 default: number;
             } & {
@@ -244,13 +246,7 @@ declare const _default: import("vue").DefineComponent<{
                 default: boolean;
             } & {
                 default: boolean;
-            }; /**
-             * 不显示条件：
-             * 1. 设置不可清除
-             * 2. 禁用时
-             * 3. tag标签为空时
-             * 4. 设置了showClearOnlyHover，且没有hover的时候
-             */
+            };
             disableOutsideClick: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             } & {
@@ -306,9 +302,20 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<Partial<import("../directives").IOptions>>;
         default: () => {};
     };
+    copyable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    copySeparator: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }, {
     isShowPlaceholder: import("vue").ComputedRef<boolean>;
     isShowClear: import("vue").ComputedRef<boolean>;
+    isShowCopy: import("vue").ComputedRef<boolean>;
     placeholderText: import("vue").ComputedRef<string>;
     curInputValue: Ref<string>;
     renderList: import("vue").ComputedRef<any[]>;
@@ -344,6 +351,7 @@ declare const _default: import("vue").DefineComponent<{
     resolveClassName: (cls: string) => string;
     handleTagDblclick: (isDblclick: any) => void;
     handleTagDblclickChange: (item: any, index: any, value: any) => void;
+    handleCopy: (e: MouseEvent) => void;
     curPage: Ref<number>;
     totalSize: Ref<number>;
     totalPage: Ref<number>;
@@ -366,7 +374,7 @@ declare const _default: import("vue").DefineComponent<{
             crossAxis: number;
         };
     };
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "select" | "update:modelValue" | "remove" | "removeAll")[], "blur" | "change" | "focus" | "input" | "select" | "update:modelValue" | "remove" | "removeAll", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "select" | "update:modelValue" | "remove" | "removeAll" | "copy-success")[], "blur" | "change" | "focus" | "input" | "select" | "update:modelValue" | "remove" | "removeAll" | "copy-success", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: import("vue-types").VueTypeDef<string[]> & {
         default: () => string[];
     };
@@ -591,7 +599,9 @@ declare const _default: import("vue").DefineComponent<{
                     alignmentAxis?: number;
                 });
             };
-            boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+            boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+                default: string | (() => HTMLElement);
+            };
             zIndex: import("vue-types").VueTypeValidableDef<number> & {
                 default: number;
             } & {
@@ -611,13 +621,7 @@ declare const _default: import("vue").DefineComponent<{
                 default: boolean;
             } & {
                 default: boolean;
-            }; /**
-             * 不显示条件：
-             * 1. 设置不可清除
-             * 2. 禁用时
-             * 3. tag标签为空时
-             * 4. 设置了showClearOnlyHover，且没有hover的时候
-             */
+            };
             disableOutsideClick: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             } & {
@@ -673,6 +677,16 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<Partial<import("../directives").IOptions>>;
         default: () => {};
     };
+    copyable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    copySeparator: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }>> & {
     onFocus?: (...args: any[]) => any;
     onBlur?: (...args: any[]) => any;
@@ -682,6 +696,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: (...args: any[]) => any;
     onRemove?: (...args: any[]) => any;
     onRemoveAll?: (...args: any[]) => any;
+    "onCopy-success"?: (...args: any[]) => any;
 }, {
     disabled: boolean;
     trigger: "focus" | "search";
@@ -713,5 +728,7 @@ declare const _default: import("vue").DefineComponent<{
     leftSpace: number;
     popoverProps: {};
     tagOverflowTips: {};
+    copyable: boolean;
+    copySeparator: string;
 }, {}>;
 export default _default;

package/lib/tag-input/tag-input.less

@@ -41,6 +41,7 @@
       overflow: auto;
 
       > li {
+        position: relative;
         display: inline-flex;
         align-items: center;
         height: 22px;
@@ -49,7 +50,6 @@
         font-size: 12px;
         border: solid 1px transparent;
         border-radius: 2px;
-        position: relative;
 
         &.tag-item {
           background: #f0f1f5;
@@ -71,19 +71,21 @@
         text-overflow: ellipsis;
         word-break: break-all;
         white-space: nowrap;
+
         .dblclick-edit-input {
-          background-color: rgb(225, 236, 255);
-          border: none;
-          height: 100%;
-          max-width: 100%;
-          padding: 0px 8px;
           position: absolute;
-          resize: none;
           top: 0px;
           width: 100%;
+          max-width: 100%;
+          height: 100%;
+          padding: 0px 8px;
+          resize: none;
+          background-color: rgb(225, 236, 255);
+          border: none;
+
           &:focus {
-            outline: none;
             border: none;
+            outline: none;
           }
         }
       }
@@ -127,6 +129,12 @@
       white-space: nowrap;
     }
 
+    .icon-wrapper {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     .clear-icon {
       margin-right: 5px;
       font-size: 14px;
@@ -138,6 +146,18 @@
         color: @gray-color;
       }
     }
+
+    .copy-icon {
+      margin-right: 5px;
+      font-size: 14px;
+      line-height: 0;
+      color: @light-gray;
+      cursor: pointer;
+
+      &:hover {
+        color: @gray-color;
+      }
+    }
   }
 }
 

package/lib/tag-input/tag-input.variable.css

@@ -165,6 +165,7 @@
   overflow: auto;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list > li {
+  position: relative;
   display: inline-flex;
   align-items: center;
   height: 22px;
@@ -173,7 +174,6 @@
   font-size: 12px;
   border: solid 1px transparent;
   border-radius: 2px;
-  position: relative;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list > li.tag-item {
   background: #f0f1f5;
@@ -194,19 +194,19 @@
   white-space: nowrap;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .tag .dblclick-edit-input {
-  background-color: #e1ecff;
-  border: none;
-  height: 100%;
-  max-width: 100%;
-  padding: 0px 8px;
   position: absolute;
-  resize: none;
   top: 0px;
   width: 100%;
+  max-width: 100%;
+  height: 100%;
+  padding: 0px 8px;
+  resize: none;
+  background-color: #e1ecff;
+  border: none;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .tag .dblclick-edit-input:focus {
-  outline: none;
   border: none;
+  outline: none;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .text {
   box-sizing: border-box;
@@ -242,6 +242,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-tag-input .bk-tag-input-trigger .icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
 .bk-tag-input .bk-tag-input-trigger .clear-icon {
   margin-right: 5px;
   font-size: 14px;
@@ -252,6 +257,16 @@
 .bk-tag-input .bk-tag-input-trigger .clear-icon:hover {
   color: var(--gray-color);
 }
+.bk-tag-input .bk-tag-input-trigger .copy-icon {
+  margin-right: 5px;
+  font-size: 14px;
+  line-height: 0;
+  color: var(--light-gray);
+  cursor: pointer;
+}
+.bk-tag-input .bk-tag-input-trigger .copy-icon:hover {
+  color: var(--gray-color);
+}
 .bk-tag-input-popover-content.bk-popover {
   padding: 0 !important;
 }