bkui-vue 0.0.2-table-refactor.9 → 0.0.3-beta.2

package/lib/search-select/search-select.css

@@ -182,15 +182,13 @@
 }
 .bk-search-select-container .search-container-input {
   position: relative;
-  display: flex;
+  display: block;
   height: 100%;
   min-width: 40px;
   padding: 0 10px;
   margin-top: -4px;
   color: #63656e;
   border: none;
-  flex: 1 1 auto;
-  align-items: center;
 }
 .bk-search-select-container .search-container-input .input-before:before {
   color: #c4c6cc;
@@ -443,5 +441,5 @@
   background-color: white;
 }
 .bk-search-select-popover {
-  margin: -7px -14px;
+  margin: -12px;
 }

package/lib/search-select/search-select.less

@@ -11,7 +11,7 @@
   z-index: 9;
   height: @component-size-base;
   overflow: inherit;
-  
+
   .focus {
     color: @search-select-focus-color;
     background: #fff !important;
@@ -24,7 +24,7 @@
     line-height: 20px;
     word-break: break-all;
     flex: 1 1 auto;
-  
+
     &:focus {
       outline: none;
     }
@@ -132,15 +132,13 @@
 
       &-input {
         position: relative;
-        display: flex;
+        display: block;
         height: 100%;
         min-width: 40px;
         padding: 0 10px;
         margin-top: -4px;
         color: @search-select-font-color;
         border: none;
-        flex: 1 1 auto;
-        align-items: center;
 
         .input-before {
           &:before {
@@ -254,7 +252,7 @@
     display: flex;
     flex-direction: column;
   }
-  
+
   .menu-item-mixin {
     display: flex;
     align-items: center;
@@ -263,16 +261,16 @@
     padding: 0 8px;
     flex: 0 0 32px;
     outline: none;
-  
+
     &:hover {
       cursor: pointer;
       background-color: #f5f7fa;
     }
   }
-  
+
   .menu-disabled-mixin {
     color: @light-gray;
-  
+
     &:hover {
       cursor: not-allowed;
       background-color: white;
@@ -337,7 +335,7 @@
         display: inline-flex;
         color: @primary-color;
       }
-  
+
       .is-selected {
         display: flex;
         width: 22px;
@@ -403,5 +401,5 @@
 }
 
 .@{search-select-name}-popover {
-  margin: -7px -14px;
-}
+  margin: -12px;
+}

package/lib/search-select/search-select.variable.css

@@ -12,6 +12,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -21,6 +22,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -33,7 +37,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -50,7 +54,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;
@@ -304,15 +308,13 @@
 }
 .bk-search-select-container .search-container-input {
   position: relative;
-  display: flex;
+  display: block;
   height: 100%;
   min-width: 40px;
   padding: 0 10px;
   margin-top: -4px;
   color: #63656e;
   border: none;
-  flex: 1 1 auto;
-  align-items: center;
 }
 .bk-search-select-container .search-container-input .input-before:before {
   color: #c4c6cc;
@@ -565,5 +567,5 @@
   background-color: white;
 }
 .bk-search-select-popover {
-  margin: -7px -14px;
+  margin: -12px;
 }

package/lib/select/common.d.ts

@@ -20,7 +20,9 @@ export declare function usePopover(config: IPopoverConfig, triggerRef: Ref<HTMLE
     showPopover: () => void;
 };
 export declare function useRemoteSearch(method: Function, callBack?: Function): {
-    searchKey: Ref<string>;
+    customOptionName: Ref<string>;
+    searchValue: Ref<string>;
+    curSearchValue: import("vue").ComputedRef<string>;
     searchLoading: Ref<boolean>;
 };
 export declare function toLowerCase(value?: string): string;

package/lib/select/index.d.ts

@@ -7,15 +7,15 @@ declare const BkSelect: {
         $props: {
             prefix?: string;
             disabled?: boolean;
-            size?: "default" | "small" | "large";
+            size?: "default" | "small" | "large" | "huge";
             multiple?: boolean;
             showOnInit?: boolean;
             placeholder?: string;
             list?: any[];
+            loading?: boolean;
             tagTheme?: "" | "info" | "success" | "warning" | "danger";
             behavior?: "normal" | "simplicity";
             selectedStyle?: "checkbox" | "check";
-            loading?: boolean;
             scrollHeight?: number;
             clearable?: boolean;
             withValidate?: boolean;
@@ -28,6 +28,7 @@ declare const BkSelect: {
             displayKey?: string;
             idKey?: string;
             remoteMethod?: (...args: any[]) => any;
+            showAll?: boolean;
             showSelectAll?: boolean;
             multipleMode?: string;
             autoHeight?: boolean;
@@ -42,7 +43,6 @@ declare const BkSelect: {
             allowEmptyValues?: unknown[];
             autoFocus?: boolean;
             keepSearchValue?: boolean;
-            filterOption?: boolean | Function;
             class?: unknown;
             style?: unknown;
             onFocus?: (...args: any[]) => any;
@@ -99,6 +99,8 @@ declare const BkSelect: {
             "onScroll-end"?: (...args: any[]) => any;
             "onTag-remove"?: (...args: any[]) => any;
             onDeselect?: (...args: any[]) => any;
+            readonly allOptionId?: string | number;
+            readonly filterOption?: Function;
         };
         $attrs: {
             [x: string]: unknown;
@@ -125,8 +127,8 @@ declare const BkSelect: {
             } & {
                 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;
@@ -151,6 +153,12 @@ declare const BkSelect: {
             } & {
                 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;
             } & {
@@ -401,8 +409,7 @@ declare const BkSelect: {
                 default: "checkbox" | "check";
             };
             filterOption: {
-                type: (BooleanConstructor | FunctionConstructor)[];
-                default: boolean;
+                type: FunctionConstructor;
             };
         }>> & {
             onFocus?: (...args: any[]) => any;
@@ -416,6 +423,15 @@ declare const BkSelect: {
             "onTag-remove"?: (...args: any[]) => any;
             onDeselect?: (...args: any[]) => any;
         }, {
+            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;
@@ -552,8 +568,10 @@ declare const BkSelect: {
                     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;
@@ -632,8 +650,10 @@ declare const BkSelect: {
                 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;
@@ -647,7 +667,9 @@ declare const BkSelect: {
             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<any[]>;
@@ -780,6 +802,7 @@ declare const BkSelect: {
                     default: boolean;
                 };
             }>>>>;
+            isAllSelected: import("vue").ComputedRef<boolean>;
             focusInput: () => void;
             setHover: () => void;
             cancelHover: () => void;
@@ -789,7 +812,7 @@ declare const BkSelect: {
             handleClear: (e: Event) => void;
             hidePopover: () => void;
             showPopover: () => void;
-            handleToggleAll: () => void;
+            handleToggleSelectAll: () => void;
             handleOptionSelected: (option: import("./type").OptionInstanceType) => void;
             handleClickOutside: ({ event }: {
                 event: any;
@@ -804,19 +827,19 @@ declare const BkSelect: {
             localSearchPlaceholder: import("vue").ComputedRef<string>;
             localSelectAllText: import("vue").ComputedRef<string>;
             resolveClassName: (cls: string) => string;
-            handleCreateCustomOption: (val: string | number) => void;
+            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")[], string, {
             prefix: string;
             disabled: boolean;
-            size: "default" | "small" | "large";
+            size: "default" | "small" | "large" | "huge";
             multiple: boolean;
             showOnInit: boolean;
             placeholder: string;
             list: any[];
+            loading: boolean;
             tagTheme: "" | "info" | "success" | "warning" | "danger";
             behavior: "normal" | "simplicity";
             selectedStyle: "checkbox" | "check";
-            loading: boolean;
             scrollHeight: number;
             clearable: boolean;
             withValidate: boolean;
@@ -829,6 +852,7 @@ declare const BkSelect: {
             displayKey: string;
             idKey: string;
             remoteMethod: (...args: any[]) => any;
+            showAll: boolean;
             showSelectAll: boolean;
             multipleMode: string;
             autoHeight: boolean;
@@ -843,7 +867,6 @@ declare const BkSelect: {
             allowEmptyValues: unknown[];
             autoFocus: boolean;
             keepSearchValue: boolean;
-            filterOption: boolean | Function;
         }, {}, string, {}> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -876,8 +899,8 @@ declare const BkSelect: {
         } & {
             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;
@@ -902,6 +925,12 @@ declare const BkSelect: {
         } & {
             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;
         } & {
@@ -1152,8 +1181,7 @@ declare const BkSelect: {
             default: "checkbox" | "check";
         };
         filterOption: {
-            type: (BooleanConstructor | FunctionConstructor)[];
-            default: boolean;
+            type: FunctionConstructor;
         };
     }>> & {
         onFocus?: (...args: any[]) => any;
@@ -1167,6 +1195,15 @@ declare const BkSelect: {
         "onTag-remove"?: (...args: any[]) => any;
         onDeselect?: (...args: any[]) => any;
     } & import("vue").ShallowUnwrapRef<{
+        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;
@@ -1303,8 +1340,10 @@ declare const BkSelect: {
                 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;
@@ -1383,8 +1422,10 @@ declare const BkSelect: {
             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;
@@ -1398,7 +1439,9 @@ declare const BkSelect: {
         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<any[]>;
@@ -1531,6 +1574,7 @@ declare const BkSelect: {
                 default: boolean;
             };
         }>>>>;
+        isAllSelected: import("vue").ComputedRef<boolean>;
         focusInput: () => void;
         setHover: () => void;
         cancelHover: () => void;
@@ -1540,7 +1584,7 @@ declare const BkSelect: {
         handleClear: (e: Event) => void;
         hidePopover: () => void;
         showPopover: () => void;
-        handleToggleAll: () => void;
+        handleToggleSelectAll: () => void;
         handleOptionSelected: (option: import("./type").OptionInstanceType) => void;
         handleClickOutside: ({ event }: {
             event: any;
@@ -1555,7 +1599,7 @@ declare const BkSelect: {
         localSearchPlaceholder: import("vue").ComputedRef<string>;
         localSelectAllText: import("vue").ComputedRef<string>;
         resolveClassName: (cls: string) => string;
-        handleCreateCustomOption: (val: string | number) => void;
+        handleCreateCustomOption: (val: string | number, e: KeyboardEvent) => void;
     }> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: never;
     __isTeleport?: never;
@@ -1572,8 +1616,8 @@ declare const BkSelect: {
     } & {
         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;
@@ -1598,6 +1642,12 @@ declare const BkSelect: {
     } & {
         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;
     } & {
@@ -1848,8 +1898,7 @@ declare const BkSelect: {
         default: "checkbox" | "check";
     };
     filterOption: {
-        type: (BooleanConstructor | FunctionConstructor)[];
-        default: boolean;
+        type: FunctionConstructor;
     };
 }>> & {
     onFocus?: (...args: any[]) => any;
@@ -1863,6 +1912,15 @@ declare const BkSelect: {
     "onTag-remove"?: (...args: any[]) => any;
     onDeselect?: (...args: any[]) => any;
 }, {
+    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;
@@ -1999,8 +2057,10 @@ declare const BkSelect: {
             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;
@@ -2079,8 +2139,10 @@ declare const BkSelect: {
         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;
@@ -2094,7 +2156,9 @@ declare const BkSelect: {
     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<any[]>;
@@ -2227,6 +2291,7 @@ declare const BkSelect: {
             default: boolean;
         };
     }>>>>;
+    isAllSelected: import("vue").ComputedRef<boolean>;
     focusInput: () => void;
     setHover: () => void;
     cancelHover: () => void;
@@ -2236,7 +2301,7 @@ declare const BkSelect: {
     handleClear: (e: Event) => void;
     hidePopover: () => void;
     showPopover: () => void;
-    handleToggleAll: () => void;
+    handleToggleSelectAll: () => void;
     handleOptionSelected: (option: import("./type").OptionInstanceType) => void;
     handleClickOutside: ({ event }: {
         event: any;
@@ -2251,19 +2316,19 @@ declare const BkSelect: {
     localSearchPlaceholder: import("vue").ComputedRef<string>;
     localSelectAllText: import("vue").ComputedRef<string>;
     resolveClassName: (cls: string) => string;
-    handleCreateCustomOption: (val: string | number) => void;
+    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", {
     prefix: string;
     disabled: boolean;
-    size: "default" | "small" | "large";
+    size: "default" | "small" | "large" | "huge";
     multiple: boolean;
     showOnInit: boolean;
     placeholder: string;
     list: any[];
+    loading: boolean;
     tagTheme: "" | "info" | "success" | "warning" | "danger";
     behavior: "normal" | "simplicity";
     selectedStyle: "checkbox" | "check";
-    loading: boolean;
     scrollHeight: number;
     clearable: boolean;
     withValidate: boolean;
@@ -2276,6 +2341,7 @@ declare const BkSelect: {
     displayKey: string;
     idKey: string;
     remoteMethod: (...args: any[]) => any;
+    showAll: boolean;
     showSelectAll: boolean;
     multipleMode: string;
     autoHeight: boolean;
@@ -2290,7 +2356,6 @@ declare const BkSelect: {
     allowEmptyValues: unknown[];
     autoFocus: boolean;
     keepSearchValue: boolean;
-    filterOption: boolean | Function;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]> & Readonly<{
     Option: import("vue").DefineComponent<{
         id: {
@@ -2316,6 +2381,7 @@ declare const BkSelect: {
         selectedStyle: import("vue").ComputedRef<import("../shared").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;