bkui-vue 0.0.1-beta.34 → 0.0.1-beta.341

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

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import { type Ref } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     modelValue: import("vue-types").VueTypeDef<string[]> & {
         default: () => string[];
@@ -45,8 +45,8 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    trigger: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    trigger: import("vue-types").VueTypeDef<"focus" | "search"> & {
+        default: "focus" | "search";
     };
     searchKey: import("vue-types").VueTypeDef<string | string[]> & {
         default: string | (() => string[]);
@@ -108,11 +108,9 @@ declare const _default: import("vue").DefineComponent<{
     };
     createTagValidator: {
         type: import("vue").PropType<(tag: any) => boolean>;
-        default: any;
     };
     filterCallback: {
         type: import("vue").PropType<(value: string, searchKey: string | string[], list: any[]) => any[]>;
-        default: any;
     };
     tagTpl: {
         type: import("vue").PropType<(node: any, highlightKeyword: Function, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -120,7 +118,6 @@ declare const _default: import("vue").DefineComponent<{
         }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>>;
-        default: any;
     };
     tpl: {
         type: import("vue").PropType<(node: any, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -128,17 +125,118 @@ declare const _default: import("vue").DefineComponent<{
         }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>>;
-        default: any;
     };
     pasteFn: {
         type: import("vue").PropType<(value: string) => any[]>;
-        default: any;
+    };
+    withValidate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popoverProps: {
+        type: import("vue").PropType<Partial<Readonly<import("vue").ExtractPropTypes<{
+            onAfterHidden: FunctionConstructor;
+            onAfterShow: FunctionConstructor;
+            isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            always: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            width: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            height: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            content: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            placement: import("vue-types").VueTypeDef<"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
+                default: "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+            };
+            theme: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            trigger: import("vue-types").VueTypeDef<"hover" | "click" | "manual"> & {
+                default: "hover" | "click" | "manual";
+            };
+            arrow: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            padding: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            offset: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+            zIndex: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            disableTeleport: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            autoPlacement: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            autoVisibility: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            disableOutsideClick: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            disableTransform: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            reference: import("vue-types").VueTypeValidableDef<any> & {
+                default: any;
+            };
+            modifiers: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+        }>>>>;
+        default: () => {};
+    };
+    collapseTags: {
+        type: BooleanConstructor;
+        default: boolean;
     };
 }, {
     isShowPlaceholder: import("vue").ComputedRef<boolean>;
     isShowClear: import("vue").ComputedRef<boolean>;
     curInputValue: Ref<string>;
-    formatList: any[];
     renderList: import("vue").ComputedRef<any[]>;
     showTagClose: import("vue").ComputedRef<boolean>;
     tagInputRef: any;
@@ -152,6 +250,8 @@ declare const _default: import("vue").DefineComponent<{
         active: boolean;
         disabled: boolean;
     }>;
+    overflowTagIndex: Ref<number>;
+    localCollapseTags: import("vue").ComputedRef<boolean>;
     focusInputTrigger: (e?: MouseEvent) => void;
     activeClass: (data: any, index: number) => {
         'bk-selector-actived': boolean;
@@ -190,7 +290,7 @@ declare const _default: import("vue").DefineComponent<{
             };
         }[];
     };
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "blur" | "change" | "update:modelValue" | "remove" | "removeAll")[], "select" | "blur" | "change" | "update:modelValue" | "remove" | "removeAll", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "focus" | "blur" | "change" | "update:modelValue" | "remove" | "removeAll")[], "select" | "focus" | "blur" | "change" | "update:modelValue" | "remove" | "removeAll", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: import("vue-types").VueTypeDef<string[]> & {
         default: () => string[];
     };
@@ -236,8 +336,8 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    trigger: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    trigger: import("vue-types").VueTypeDef<"focus" | "search"> & {
+        default: "focus" | "search";
     };
     searchKey: import("vue-types").VueTypeDef<string | string[]> & {
         default: string | (() => string[]);
@@ -299,11 +399,9 @@ declare const _default: import("vue").DefineComponent<{
     };
     createTagValidator: {
         type: import("vue").PropType<(tag: any) => boolean>;
-        default: any;
     };
     filterCallback: {
         type: import("vue").PropType<(value: string, searchKey: string | string[], list: any[]) => any[]>;
-        default: any;
     };
     tagTpl: {
         type: import("vue").PropType<(node: any, highlightKeyword: Function, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -311,7 +409,6 @@ declare const _default: import("vue").DefineComponent<{
         }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>>;
-        default: any;
     };
     tpl: {
         type: import("vue").PropType<(node: any, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -319,13 +416,116 @@ declare const _default: import("vue").DefineComponent<{
         }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>>;
-        default: any;
     };
     pasteFn: {
         type: import("vue").PropType<(value: string) => any[]>;
-        default: any;
+    };
+    withValidate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popoverProps: {
+        type: import("vue").PropType<Partial<Readonly<import("vue").ExtractPropTypes<{
+            onAfterHidden: FunctionConstructor;
+            onAfterShow: FunctionConstructor;
+            isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            always: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            width: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            height: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            content: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            placement: import("vue-types").VueTypeDef<"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
+                default: "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+            };
+            theme: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            trigger: import("vue-types").VueTypeDef<"hover" | "click" | "manual"> & {
+                default: "hover" | "click" | "manual";
+            };
+            arrow: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            padding: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            offset: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+            zIndex: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            disableTeleport: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            autoPlacement: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            autoVisibility: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            disableOutsideClick: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            disableTransform: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            reference: import("vue-types").VueTypeValidableDef<any> & {
+                default: any;
+            };
+            modifiers: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+        }>>>>;
+        default: () => {};
+    };
+    collapseTags: {
+        type: BooleanConstructor;
+        default: boolean;
     };
 }>> & {
+    onFocus?: (...args: any[]) => any;
     onBlur?: (...args: any[]) => any;
     onChange?: (...args: any[]) => any;
     onSelect?: (...args: any[]) => any;
@@ -333,23 +533,25 @@ declare const _default: import("vue").DefineComponent<{
     onRemove?: (...args: any[]) => any;
     onRemoveAll?: (...args: any[]) => any;
 }, {
+    trigger: "focus" | "search";
+    disabled: boolean;
     placeholder: string;
     list: {
         [key: string]: any;
     }[];
     separator: string;
-    disabled: boolean;
-    modelValue: string[];
-    trigger: string;
     clearable: boolean;
     showClearOnlyHover: boolean;
+    modelValue: string[];
+    withValidate: boolean;
     searchKey: string | string[];
+    allowCreate: boolean;
+    collapseTags: boolean;
     displayKey: string;
     tooltipKey: string;
     saveKey: string;
     hasDeleteIcon: boolean;
     useGroup: boolean;
-    allowCreate: boolean;
     maxData: number;
     maxResult: number;
     contentMaxHeight: number;
@@ -357,18 +559,6 @@ declare const _default: import("vue").DefineComponent<{
     allowNextFocus: boolean;
     allowAutoMatch: boolean;
     leftSpace: number;
-    createTagValidator: (tag: any) => boolean;
-    filterCallback: (value: string, searchKey: string | string[], list: any[]) => any[];
-    tagTpl: (node: any, highlightKeyword: Function, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-    tpl: (node: any, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-    pasteFn: (value: string) => any[];
+    popoverProps: {};
 }>;
 export default _default;

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

@@ -7,6 +7,7 @@
   position: relative;
   min-height: @min-height;
 
+  .bk-popover,
   .bk-popover-reference {
     display: block;
   }
@@ -118,133 +119,133 @@
       }
     }
   }
-
-  .bk-popover-content {
-    padding: 0;
-  }
 }
 
-.bk-selector-list {
-  min-width: 150px;
-
-  .outside-ul {
-    max-height: 160px;
-    padding: 0;
-    padding: 6px 0;
-    margin: 0;
-    overflow-y: auto;
-    list-style: none;
-    background-color: @white-color;
-    border: 1px solid #dcdee5;
-    border-radius: 2px;
+.bk-tag-input-popover-content {
+  padding: 0;
+  
+  .bk-selector-list {
+    min-width: 150px;
 
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
+    .outside-ul {
+      max-height: 160px;
+      padding: 0;
+      padding: 6px 0;
+      margin: 0;
+      overflow-y: auto;
+      list-style: none;
+      background-color: @white-color;
+      border: 1px solid #dcdee5;
+      border-radius: 2px;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
 
-    &::-webkit-scrollbar-thumb {
-      min-height: 24px;
-      background-color: #dcdee5;
-      border-radius: 3px;
+      &::-webkit-scrollbar-thumb {
+        min-height: 24px;
+        background-color: #dcdee5;
+        border-radius: 3px;
+      }
     }
-  }
 
-  .bk-selector-group-item {
-    list-style: none;
+    .bk-selector-group-item {
+      list-style: none;
 
-    .group-name {
-      padding-left: 11px;
-      font-size: 12px;
-      line-height: 32px;
-      color: #979ba5;
+      .group-name {
+        padding-left: 11px;
+        font-size: 12px;
+        line-height: 32px;
+        color: #979ba5;
+      }
     }
-  }
 
-  .bk-selector-group-list-item {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
+    .bk-selector-group-list-item {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
 
-  .bk-selector-list-item {
-    position: relative;
-    width: 100%;
-    cursor: pointer;
-    background-color: @white-color;
-    border-right: @light-gray;
-    border-left: @light-gray;
+    .bk-selector-list-item {
+      position: relative;
+      width: 100%;
+      cursor: pointer;
+      background-color: @white-color;
+      border-right: @light-gray;
+      border-left: @light-gray;
 
-    &:first-child {
-      border-top: @light-gray;
-    }
+      &:first-child {
+        border-top: @light-gray;
+      }
 
-    &:last-child {
-      border-bottom: @light-gray;
-    }
+      &:last-child {
+        border-bottom: @light-gray;
+      }
 
-    &.bk-selector-selected {
-      background-color: #f4f6fa;
+      &.bk-selector-selected {
+        background-color: #f4f6fa;
 
-      .selected-icon {
-        display: inline-block;
+        .selected-icon {
+          display: inline-block;
+        }
       }
-    }
 
-    &.bk-selector-actived {
-      background-color: #f4f6fa;
-    }
+      &.bk-selector-actived {
+        background-color: #f4f6fa;
+      }
 
-    &:hover {
-      background-color: #eaf3ff;
-    }
+      &:hover {
+        background-color: #eaf3ff;
+      }
 
-    &.disabled {
-      cursor: not-allowed;
-      background: @white-color;
+      &.disabled {
+        cursor: not-allowed;
+        background: @white-color;
 
-      .text {
-        color: @light-gray;
+        .text {
+          color: @light-gray;
+        }
       }
-    }
 
-    &.loading {
-      padding: 5px 0 3px;
-      text-align: center;
-    }
+      &.loading {
+        padding: 5px 0 3px;
+        text-align: center;
+      }
 
-    .loading {
-      position: relative;
-      width: 100%;
-      height: 40px;
-      font-size: 14px;
-      cursor: default;
-    }
+      .loading {
+        position: relative;
+        width: 100%;
+        height: 40px;
+        font-size: 14px;
+        cursor: default;
+      }
 
-    .text {
-      padding: 0 10px;
-      overflow: hidden;
-      font-size: 12px;
-      line-height: 32px;
-      color: @default-color;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+      .text {
+        padding: 0 10px;
+        overflow: hidden;
+        font-size: 12px;
+        line-height: 32px;
+        color: @default-color;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
 
-    .bk-selector-tools {
-      position: absolute;
-      top: 10px;
-      right: 0;
-      display: none;
-      font-size: 12px;
+      .bk-selector-tools {
+        position: absolute;
+        top: 10px;
+        right: 0;
+        display: none;
+        font-size: 12px;
 
-      .bk-selector-list-icon {
-        margin-right: 14px;
+        .bk-selector-list-icon {
+          margin-right: 14px;
+        }
       }
-    }
 
-    .highlight-text {
-      color: @primary-color;
+      .highlight-text {
+        color: @primary-color;
+      }
     }
   }
-}
+}