bkui-vue 0.0.2-beta.13 → 0.0.2-beta.131

package/lib/select/option.d.ts

@@ -10,6 +10,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    order: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 }, {
     selected: import("vue").ComputedRef<boolean>;
     multiple: import("vue").ComputedRef<boolean>;
@@ -18,6 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     selectedStyle: import("vue").ComputedRef<SelectedTypeEnum>;
     optionName: import("vue").ComputedRef<string | number>;
     optionID: import("vue").ComputedRef<unknown>;
+    isDisabled: import("vue").ComputedRef<boolean>;
     handleOptionClick: () => void;
     handleMouseEnter: () => void;
     resolveClassName: (cls: string) => string;
@@ -33,7 +39,13 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    order: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 }>>, {
     disabled: boolean;
+    order: number;
 }, {}>;
 export default _default;

package/lib/select/select.css

@@ -11,12 +11,12 @@
     background-color: transparent;
   }
 }
-.bk-fade-transtion .bk-fade-enter-active,
-.bk-fade-transtion .bk-fade-leave-active {
+.bk-transition .bk-fade-enter-active,
+.bk-transition .bk-fade-leave-active {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
-.bk-fade-transtion .bk-fade-enter,
-.bk-fade-transtion .bk-fade-leave-to {
+.bk-transition .bk-fade-enter,
+.bk-transition .bk-fade-leave-to {
   opacity: 0;
 }
 .bk-select .mr5 {
@@ -125,7 +125,6 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  padding: 2px 0;
   overflow: hidden;
 }
 .bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled):hover {
@@ -269,6 +268,15 @@
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown {
   overflow: auto;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown::-webkit-scrollbar-thumb {
+  background: #dde4eb;
+  border-radius: 20px;
+  box-shadow: inset 0 0 6px hsla(0, 0%, 80%, 0.3);
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-extension {
   display: flex;
   height: 40px;
@@ -304,6 +312,9 @@
   margin-right: 6px;
   pointer-events: none;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option .bk-select-checkbox .bk-checkbox-original {
+  opacity: 0;
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item {
   overflow: hidden;
   text-overflow: ellipsis;

package/lib/select/select.d.ts

@@ -12,8 +12,8 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large"> & {
-        default: "default" | "small" | "large";
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
+        default: "default" | "small" | "large" | "huge";
     };
     clearable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -38,6 +38,12 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
+    showAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    allOptionId: import("vue-types").VueTypeDef<string | number>;
     showSelectAll: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -56,8 +62,8 @@ declare const _default: import("vue").DefineComponent<{
     multipleMode: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    tagTheme: import("vue-types").VueTypeDef<"info" | "success" | "warning" | "danger"> & {
-        default: "info" | "success" | "warning" | "danger";
+    tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
+        default: "" | "info" | "success" | "warning" | "danger";
     };
     behavior: import("vue-types").VueTypeDef<"normal" | "simplicity"> & {
         default: "normal" | "simplicity";
@@ -122,12 +128,16 @@ declare const _default: import("vue").DefineComponent<{
         height: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
         };
-        maxHeight: import("vue-types").VueTypeDef<string | number> & {
+        maxWidth: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
         };
-        content: import("vue-types").VueTypeDef<string | number> & {
+        maxHeight: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
         };
+        content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
+            default: string | number | (() => HTMLElement) | (() => JSX.Element);
+        };
+        target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
         allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -213,16 +223,24 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: string;
         };
+        componentEventDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        forceClickoutside: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
     }>>>>;
     customContent: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
-        default: () => unknown[];
-    } & {
-        default: () => unknown[];
+    list: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
     };
     idKey: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -275,7 +293,19 @@ declare const _default: import("vue").DefineComponent<{
     selectedStyle: import("vue-types").VueTypeDef<"checkbox" | "check"> & {
         default: "checkbox" | "check";
     };
+    filterOption: {
+        type: FunctionConstructor;
+    };
 }, {
+    t: import("vue").ComputedRef<{
+        noData: string;
+        noMatchedData: string;
+        loading: string;
+        pleaseSelect: string;
+        enterKeywords: string;
+        all: string;
+        selectAll: string;
+    }>;
     selected: import("vue").Ref<{
         value: string;
         label: string | number;
@@ -297,7 +327,7 @@ declare const _default: import("vue").DefineComponent<{
         $props: {
             disabled?: boolean;
             placeholder?: string;
-            tagTheme?: "info" | "success" | "warning" | "danger";
+            tagTheme?: "" | "info" | "success" | "warning" | "danger";
             selected?: ISelected[];
             filterable?: boolean;
             allowCreate?: boolean;
@@ -305,8 +335,8 @@ declare const _default: import("vue").DefineComponent<{
             class?: unknown;
             style?: unknown;
             onKeydown?: (...args: any[]) => any;
-            key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
+            key?: string | number | symbol;
             ref_for?: boolean;
             ref_key?: string;
             onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -370,8 +400,8 @@ declare const _default: import("vue").DefineComponent<{
                 type: import("vue-types/dist/types").PropType<ISelected[]>;
                 default: () => any[];
             };
-            tagTheme: import("vue-types").VueTypeDef<"info" | "success" | "warning" | "danger"> & {
-                default: "info" | "success" | "warning" | "danger";
+            tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
+                default: "" | "info" | "success" | "warning" | "danger";
             };
             placeholder: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
@@ -405,19 +435,24 @@ declare const _default: import("vue").DefineComponent<{
             onEnter?: (...args: any[]) => any;
             onRemove?: (...args: any[]) => any;
         }, {
+            collapseTagRef: import("vue").Ref<any>;
+            tagWrapperRef: import("vue").Ref<any>;
+            tagsRefs: import("vue").Ref<any[]>;
             select: import("./type").ISelectContext;
             overflowTagIndex: import("vue").Ref<number>;
             value: any;
             inputRef: import("vue").Ref<HTMLElement>;
+            overflowContent: import("vue").ComputedRef<string>;
             handleRemoveTag: (val: string) => void;
             focus: () => void;
+            blur: () => void;
             handleInput: (e: any) => void;
             handleKeydown: (e: any) => void;
             resolveClassName: (cls: string) => string;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("keydown" | "update:modelValue" | "enter" | "remove")[], string, {
             disabled: boolean;
             placeholder: string;
-            tagTheme: "info" | "success" | "warning" | "danger";
+            tagTheme: "" | "info" | "success" | "warning" | "danger";
             selected: ISelected[];
             filterable: boolean;
             allowCreate: boolean;
@@ -447,8 +482,8 @@ declare const _default: import("vue").DefineComponent<{
             type: import("vue-types/dist/types").PropType<ISelected[]>;
             default: () => any[];
         };
-        tagTheme: import("vue-types").VueTypeDef<"info" | "success" | "warning" | "danger"> & {
-            default: "info" | "success" | "warning" | "danger";
+        tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
+            default: "" | "info" | "success" | "warning" | "danger";
         };
         placeholder: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -482,12 +517,17 @@ declare const _default: import("vue").DefineComponent<{
         onEnter?: (...args: any[]) => any;
         onRemove?: (...args: any[]) => any;
     } & import("vue").ShallowUnwrapRef<{
+        collapseTagRef: import("vue").Ref<any>;
+        tagWrapperRef: import("vue").Ref<any>;
+        tagsRefs: import("vue").Ref<any[]>;
         select: import("./type").ISelectContext;
         overflowTagIndex: import("vue").Ref<number>;
         value: any;
         inputRef: import("vue").Ref<HTMLElement>;
+        overflowContent: import("vue").ComputedRef<string>;
         handleRemoveTag: (val: string) => void;
         focus: () => void;
+        blur: () => void;
         handleInput: (e: any) => void;
         handleKeydown: (e: any) => void;
         resolveClassName: (cls: string) => string;
@@ -501,10 +541,12 @@ declare const _default: import("vue").DefineComponent<{
     isShowSelectContent: import("vue").ComputedRef<boolean>;
     curContentText: import("vue").ComputedRef<string>;
     isGroup: import("vue").ComputedRef<boolean>;
-    searchKey: import("vue").Ref<string>;
+    searchValue: import("vue").Ref<string>;
+    customOptionName: import("vue").Ref<string>;
+    isShowAll: import("vue").ComputedRef<boolean>;
     isShowSelectAll: import("vue").ComputedRef<boolean>;
     virtualHeight: import("vue").ComputedRef<number>;
-    virtualList: import("vue").ComputedRef<unknown[]>;
+    virtualList: import("vue").ComputedRef<any[]>;
     isCollapseTags: import("vue").ComputedRef<boolean>;
     popoverConfig: import("vue").ComputedRef<Partial<Readonly<import("vue").ExtractPropTypes<{
         isShow: import("vue-types").VueTypeValidableDef<boolean> & {
@@ -528,12 +570,16 @@ declare const _default: import("vue").DefineComponent<{
         height: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
         };
-        maxHeight: import("vue-types").VueTypeDef<string | number> & {
+        maxWidth: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
         };
-        content: import("vue-types").VueTypeDef<string | number> & {
+        maxHeight: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
         };
+        content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
+            default: string | number | (() => HTMLElement) | (() => JSX.Element);
+        };
+        target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
         allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -619,7 +665,18 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: string;
         };
+        componentEventDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        forceClickoutside: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
     }>>>>;
+    isAllSelected: import("vue").ComputedRef<boolean>;
     focusInput: () => void;
     setHover: () => void;
     cancelHover: () => void;
@@ -629,7 +686,7 @@ declare const _default: import("vue").DefineComponent<{
     handleClear: (e: Event) => void;
     hidePopover: () => void;
     showPopover: () => void;
-    handleToggleAll: () => void;
+    handleToggleSelectAll: () => void;
     handleOptionSelected: (option: OptionInstanceType) => void;
     handleClickOutside: ({ event }: {
         event: any;
@@ -637,8 +694,6 @@ declare const _default: import("vue").DefineComponent<{
     handleScroll: (e: any) => void;
     handleDeleteTag: (val: string) => void;
     handleInputChange: (value: any) => void;
-    handleInputEnter: (val: string | number, e: Event) => void;
-    handleKeydown: (e: KeyboardEvent) => void;
     handleSelectedAllOptionMouseEnter: () => void;
     handlePopoverShow: () => void;
     localLoadingText: import("vue").ComputedRef<string>;
@@ -646,7 +701,8 @@ declare const _default: import("vue").DefineComponent<{
     localSearchPlaceholder: import("vue").ComputedRef<string>;
     localSelectAllText: import("vue").ComputedRef<string>;
     resolveClassName: (cls: string) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "toggle" | "clear" | "update:modelValue" | "scroll-end")[], "blur" | "change" | "focus" | "toggle" | "clear" | "update:modelValue" | "scroll-end", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    handleCreateCustomOption: (val: string | number, e: KeyboardEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect")[], "blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: import("vue-types").VueTypeValidableDef<any>;
     multiple: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -658,8 +714,8 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large"> & {
-        default: "default" | "small" | "large";
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
+        default: "default" | "small" | "large" | "huge";
     };
     clearable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -684,6 +740,12 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
+    showAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    allOptionId: import("vue-types").VueTypeDef<string | number>;
     showSelectAll: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -702,8 +764,8 @@ declare const _default: import("vue").DefineComponent<{
     multipleMode: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    tagTheme: import("vue-types").VueTypeDef<"info" | "success" | "warning" | "danger"> & {
-        default: "info" | "success" | "warning" | "danger";
+    tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
+        default: "" | "info" | "success" | "warning" | "danger";
     };
     behavior: import("vue-types").VueTypeDef<"normal" | "simplicity"> & {
         default: "normal" | "simplicity";
@@ -768,12 +830,16 @@ declare const _default: import("vue").DefineComponent<{
         height: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
         };
-        maxHeight: import("vue-types").VueTypeDef<string | number> & {
+        maxWidth: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
         };
-        content: import("vue-types").VueTypeDef<string | number> & {
+        maxHeight: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
         };
+        content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
+            default: string | number | (() => HTMLElement) | (() => JSX.Element);
+        };
+        target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
         allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -859,16 +925,24 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: string;
         };
+        componentEventDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        forceClickoutside: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
     }>>>>;
     customContent: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
-        default: () => unknown[];
-    } & {
-        default: () => unknown[];
+    list: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
     };
     idKey: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -921,26 +995,32 @@ declare const _default: import("vue").DefineComponent<{
     selectedStyle: import("vue-types").VueTypeDef<"checkbox" | "check"> & {
         default: "checkbox" | "check";
     };
+    filterOption: {
+        type: FunctionConstructor;
+    };
 }>> & {
     onFocus?: (...args: any[]) => any;
     onBlur?: (...args: any[]) => any;
     onChange?: (...args: any[]) => any;
+    onSelect?: (...args: any[]) => any;
     onClear?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
     onToggle?: (...args: any[]) => any;
     "onScroll-end"?: (...args: any[]) => any;
+    "onTag-remove"?: (...args: any[]) => any;
+    onDeselect?: (...args: any[]) => any;
 }, {
     prefix: string;
     disabled: boolean;
-    size: "default" | "small" | "large";
+    size: "default" | "small" | "large" | "huge";
     multiple: boolean;
     showOnInit: boolean;
     placeholder: string;
-    list: unknown[];
-    tagTheme: "info" | "success" | "warning" | "danger";
+    list: any[];
+    loading: boolean;
+    tagTheme: "" | "info" | "success" | "warning" | "danger";
     behavior: "normal" | "simplicity";
     selectedStyle: "checkbox" | "check";
-    loading: boolean;
     scrollHeight: number;
     clearable: boolean;
     withValidate: boolean;
@@ -953,6 +1033,7 @@ declare const _default: import("vue").DefineComponent<{
     displayKey: string;
     idKey: string;
     remoteMethod: (...args: any[]) => any;
+    showAll: boolean;
     showSelectAll: boolean;
     multipleMode: string;
     autoHeight: boolean;

package/lib/select/select.less

@@ -184,7 +184,6 @@
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        padding: 2px 0;
         overflow: hidden;
       }
 
@@ -306,6 +305,17 @@
 
         .@{bk-prefix}-select-dropdown {
           overflow: auto;
+
+          &::-webkit-scrollbar {
+            width: 4px;
+            height: 4px;
+          }
+      
+          &::-webkit-scrollbar-thumb {
+            background: #dde4eb;
+            border-radius: 20px;
+            box-shadow: inset 0 0 6px hsla(0,0%,80%,.3);
+          }
         }
 
         .@{bk-prefix}-select-extension {
@@ -343,6 +353,9 @@
           .@{bk-prefix}-select-checkbox {
             margin-right: 6px;
             pointer-events: none;
+            .@{bk-prefix}-checkbox-original {
+              opacity: 0;
+            }
           }
 
           &-item {