bkui-vue 2.0.1-beta.11 → 2.0.1-beta.111

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

@@ -5,6 +5,8 @@
 .bk-tag-input .bk-tag-input-trigger {
   position: relative;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   min-height: 32px;
   padding: 0 0 0 5px;
   overflow: hidden;
@@ -13,8 +15,6 @@
   background: white;
   border: 1px solid #c4c6cc;
   border-radius: 2px;
-  align-items: center;
-  justify-content: space-between;
 }
 .bk-tag-input .bk-tag-input-trigger.active {
   border-color: #3a84ff;
@@ -26,22 +26,22 @@
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list {
   display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
   max-height: 135px;
   padding: 0;
   margin: 0;
   overflow: auto;
-  align-items: center;
-  flex-wrap: wrap;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list > li {
   display: inline-flex;
+  align-items: center;
   height: 22px;
   margin: 4px 5px 4px 0;
   overflow: hidden;
   font-size: 12px;
   border: solid 1px transparent;
   border-radius: 2px;
-  align-items: center;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list > li.tag-item {
   background: #f0f1f5;
@@ -54,32 +54,32 @@
   line-height: 0;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .tag {
+  flex: 1;
   max-width: 190px;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
   white-space: nowrap;
-  flex: 1;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .text {
+  box-sizing: border-box;
   padding: 0 5px;
   line-height: 20px;
   color: #63656e;
   background-color: #f0f1f5;
   border-radius: 2px;
-  box-sizing: border-box;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .text:hover {
   background-color: #dcdee5;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .tag-input {
+  box-sizing: border-box;
   width: 10px;
-  height: 22px;
   max-width: 295px;
+  height: 22px;
   padding: 0;
   border: 0;
   outline: none;
-  box-sizing: border-box;
 }
 .bk-tag-input .bk-tag-input-trigger .placeholder {
   position: absolute;
@@ -211,3 +211,6 @@
 .bk-tag-input-popover-content .bk-selector-list .bk-selector-list-item .highlight-text {
   color: #3a84ff;
 }
+.bk-tag-input-popover-reference {
+  width: 100%;
+}

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

@@ -61,6 +61,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    clearTextSpace: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     maxData: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -155,6 +160,11 @@ declare const _default: import("vue").DefineComponent<{
             } & {
                 default: boolean;
             };
+            clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
             width: import("vue-types").VueTypeDef<string | number> & {
                 default: string | number;
             };
@@ -170,14 +180,17 @@ declare const _default: import("vue").DefineComponent<{
             content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
                 default: string | number | (() => HTMLElement) | (() => JSX.Element);
             };
+            renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+                default: "if" | "show";
+            };
             target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
             allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             } & {
                 default: boolean;
             };
-            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-                default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+                default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
             };
             theme: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
@@ -256,6 +269,16 @@ declare const _default: import("vue").DefineComponent<{
             } & {
                 default: string;
             };
+            referenceCls: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            hideIgnoreReference: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
             componentEventDelay: import("vue-types").VueTypeValidableDef<number> & {
                 default: number;
             } & {
@@ -274,13 +297,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     tagOverflowTips: {
-        type: import("vue").PropType<Partial<import("../directives/tooltips").IOptions>>; /**
-         * 不显示条件：
-         * 1. 设置不可清除
-         * 2. 禁用时
-         * 3. tag标签为空时
-         * 4. 设置了showClearOnlyHover，且没有hover的时候
-         */
+        type: import("vue").PropType<Partial<import("../directives/tooltips").IOptions>>;
         default: () => {};
     };
 }, {
@@ -290,11 +307,12 @@ declare const _default: import("vue").DefineComponent<{
     curInputValue: Ref<string>;
     renderList: import("vue").ComputedRef<any[]>;
     showTagClose: import("vue").ComputedRef<boolean>;
-    tagInputRef: Ref<any>;
-    bkTagSelectorRef: Ref<any>;
-    tagListRef: Ref<any>;
-    tagInputItemRef: Ref<any>;
-    selectorListRef: Ref<any>;
+    tagInputRef: any;
+    bkTagSelectorRef: any;
+    tagListRef: any;
+    tagInputItemRef: any;
+    inputValueRef: Ref<HTMLElement>;
+    selectorListRef: any;
     triggerClass: import("vue").ComputedRef<{
         [x: string]: boolean;
         active: boolean;
@@ -315,7 +333,7 @@ declare const _default: import("vue").DefineComponent<{
     handleClear: (e: MouseEvent) => void;
     tagFocus: (e: MouseEvent) => void;
     handleKeydown: (e: KeyboardEvent) => void;
-    handlePaste: (e: ClipboardEvent) => boolean;
+    handlePaste: (e: ClipboardEvent) => void;
     resolveClassName: (cls: string) => string;
     curPage: Ref<number>;
     totalSize: Ref<number>;
@@ -401,6 +419,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    clearTextSpace: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     maxData: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -495,6 +518,11 @@ declare const _default: import("vue").DefineComponent<{
             } & {
                 default: boolean;
             };
+            clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
             width: import("vue-types").VueTypeDef<string | number> & {
                 default: string | number;
             };
@@ -510,14 +538,17 @@ declare const _default: import("vue").DefineComponent<{
             content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
                 default: string | number | (() => HTMLElement) | (() => JSX.Element);
             };
+            renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+                default: "if" | "show";
+            };
             target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
             allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             } & {
                 default: boolean;
             };
-            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-                default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+                default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
             };
             theme: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
@@ -596,6 +627,16 @@ declare const _default: import("vue").DefineComponent<{
             } & {
                 default: string;
             };
+            referenceCls: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            hideIgnoreReference: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
             componentEventDelay: import("vue-types").VueTypeValidableDef<number> & {
                 default: number;
             } & {
@@ -614,13 +655,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     tagOverflowTips: {
-        type: import("vue").PropType<Partial<import("../directives/tooltips").IOptions>>; /**
-         * 不显示条件：
-         * 1. 设置不可清除
-         * 2. 禁用时
-         * 3. tag标签为空时
-         * 4. 设置了showClearOnlyHover，且没有hover的时候
-         */
+        type: import("vue").PropType<Partial<import("../directives/tooltips").IOptions>>;
         default: () => {};
     };
 }>> & {
@@ -652,6 +687,7 @@ declare const _default: import("vue").DefineComponent<{
     displayKey: string;
     hasDeleteIcon: boolean;
     useGroup: boolean;
+    clearTextSpace: boolean;
     maxData: number;
     maxResult: number;
     contentMaxHeight: number;

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

@@ -10,6 +10,8 @@
   .@{bk-prefix}-tag-input-trigger {
     position: relative;
     display: flex;
+    align-items: center;
+    justify-content: space-between;
     min-height: @min-height;
     padding: 0 0 0 5px;
     overflow: hidden;
@@ -18,8 +20,6 @@
     background: @white-color;
     border: 1px solid @light-gray;
     border-radius: 2px;
-    align-items: center;
-    justify-content: space-between;
 
     &.active {
       border-color: @primary-color;
@@ -33,22 +33,22 @@
 
     .tag-list {
       display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
       max-height: 135px;
       padding: 0;
       margin: 0;
       overflow: auto;
-      align-items: center;
-      flex-wrap: wrap;
 
       > li {
         display: inline-flex;
+        align-items: center;
         height: 22px;
         margin: 4px 5px 4px 0;
         overflow: hidden;
         font-size: 12px;
         border: solid 1px transparent;
         border-radius: 2px;
-        align-items: center;
 
         &.tag-item {
           background: #f0f1f5;
@@ -64,21 +64,21 @@
       }
 
       .tag {
+        flex: 1;
         max-width: 190px;
         overflow: hidden;
         text-overflow: ellipsis;
         word-break: break-all;
         white-space: nowrap;
-        flex: 1;
       }
 
       .text {
+        box-sizing: border-box;
         padding: 0 5px;
         line-height: 20px;
         color: @default-color;
         background-color: #f0f1f5;
         border-radius: 2px;
-        box-sizing: border-box;
 
         &:hover {
           background-color: #dcdee5;;
@@ -86,13 +86,13 @@
       }
 
       .tag-input {
+        box-sizing: border-box;
         width: 10px;
-        height: 22px;
         max-width: 295px;
+        height: 22px;
         padding: 0;
         border: 0;
         outline: none;
-        box-sizing: border-box;
       }
     }
 
@@ -255,3 +255,7 @@
     }
   }
 }
+
+.@{bk-prefix}-tag-input-popover-reference{
+  width: 100%;
+}

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

@@ -109,6 +109,7 @@
   --date-picker-dropdown-bg: #fff;
   --table-bg-color: var(--white-color);
   --table-border-color: #dcdee5;
+  --table-strip-color: #fafbfd;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
   --table-body-font-color: #63656E;
@@ -134,6 +135,8 @@
 .bk-tag-input .bk-tag-input-trigger {
   position: relative;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   min-height: 32px;
   padding: 0 0 0 5px;
   overflow: hidden;
@@ -142,8 +145,6 @@
   background: var(--white-color);
   border: 1px solid var(--light-gray);
   border-radius: 2px;
-  align-items: center;
-  justify-content: space-between;
 }
 .bk-tag-input .bk-tag-input-trigger.active {
   border-color: var(--primary-color);
@@ -155,22 +156,22 @@
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list {
   display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
   max-height: 135px;
   padding: 0;
   margin: 0;
   overflow: auto;
-  align-items: center;
-  flex-wrap: wrap;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list > li {
   display: inline-flex;
+  align-items: center;
   height: 22px;
   margin: 4px 5px 4px 0;
   overflow: hidden;
   font-size: 12px;
   border: solid 1px transparent;
   border-radius: 2px;
-  align-items: center;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list > li.tag-item {
   background: #f0f1f5;
@@ -183,32 +184,32 @@
   line-height: 0;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .tag {
+  flex: 1;
   max-width: 190px;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
   white-space: nowrap;
-  flex: 1;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .text {
+  box-sizing: border-box;
   padding: 0 5px;
   line-height: 20px;
   color: var(--default-color);
   background-color: #f0f1f5;
   border-radius: 2px;
-  box-sizing: border-box;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .text:hover {
   background-color: #dcdee5;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .tag-input {
+  box-sizing: border-box;
   width: 10px;
-  height: 22px;
   max-width: 295px;
+  height: 22px;
   padding: 0;
   border: 0;
   outline: none;
-  box-sizing: border-box;
 }
 .bk-tag-input .bk-tag-input-trigger .placeholder {
   position: absolute;
@@ -340,3 +341,6 @@
 .bk-tag-input-popover-content .bk-selector-list .bk-selector-list-item .highlight-text {
   color: var(--primary-color);
 }
+.bk-tag-input-popover-reference {
+  width: 100%;
+}

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

@@ -62,6 +62,11 @@ declare const tagProps: () => {
     } & {
         default: boolean;
     };
+    clearTextSpace: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     maxData: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -148,6 +153,11 @@ declare const tagProps: () => {
             } & {
                 default: boolean;
             };
+            clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
             width: import("vue-types").VueTypeDef<string | number> & {
                 default: string | number;
             };
@@ -163,14 +173,17 @@ declare const tagProps: () => {
             content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
                 default: string | number | (() => HTMLElement) | (() => JSX.Element);
             };
+            renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+                default: "if" | "show";
+            };
             target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
             allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             } & {
                 default: boolean;
             };
-            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-                default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+                default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
             };
             theme: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
@@ -249,6 +262,16 @@ declare const tagProps: () => {
             } & {
                 default: string;
             };
+            referenceCls: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            hideIgnoreReference: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
             componentEventDelay: import("vue-types").VueTypeValidableDef<number> & {
                 default: number;
             } & {