bkui-vue 0.0.1-beta.14 → 0.0.1-beta.17

package/lib/select/select.d.ts

@@ -37,22 +37,53 @@ declare const _default: import("vue").DefineComponent<{
     remoteMethod: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
+    scrollHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 }, {
+    selectedLabel: import("vue").ComputedRef<string>;
+    selectClass: import("vue").ComputedRef<{
+        [x: string]: boolean;
+        'bk-select': boolean;
+        'popover-show': boolean;
+        'is-disabled': boolean;
+        'is-focus': boolean;
+    }>;
+    isPopoverShow: import("vue").Ref<boolean>;
+    isHover: import("vue").Ref<boolean>;
+    popperWidth: import("vue").Ref<string | number>;
+    selectTriggerRef: import("vue").Ref<HTMLElement>;
+    inputRef: import("vue").Ref<HTMLElement>;
+    searchKey: import("vue").Ref<string>;
+    searchLoading: import("vue").Ref<boolean>;
+    isEmpty: import("vue").ComputedRef<boolean>;
+    isFocus: import("vue").Ref<boolean>;
+    setHover: () => void;
+    cancelHover: () => void;
+    handleFocus: () => void;
+    handleInput: (e: any) => void;
+    toggleMenu: () => void;
+    handleClear: (e: Event) => void;
+    onPopoverFirstUpdate: OnFirstUpdateFnType;
+    hidePopover: () => void;
+    showPopover: () => void;
+    currentPlaceholder: import("vue").Ref<string>;
     options: import("vue").Ref<Set<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
             disabled: boolean;
-        }> & Omit<Readonly<{
-            value?: unknown;
-            label?: unknown;
-            disabled?: unknown;
-        } & {
-            disabled: boolean;
-        } & {
-            label?: string | number;
-            value?: string | number | boolean;
-        }> & {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled">;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            value: import("vue-types").VueTypeDef<string | number | boolean>;
+            label: import("vue-types").VueTypeDef<string | number>;
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -66,24 +97,17 @@ declare const _default: import("vue").DefineComponent<{
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<{
-            value?: unknown;
-            label?: unknown;
-            disabled?: unknown;
-        } & {
-            disabled: boolean;
-        } & {
-            label?: string | number;
-            value?: string | number | boolean;
-        }> & {}, {
-            selectItemClass: import("vue").ComputedRef<{
-                'is-selected': boolean;
-                'is-disabled': boolean;
-                'is-multiple': boolean;
-                'is-hover': boolean;
-                'bk-select-option': boolean;
-            }>;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            value: import("vue-types").VueTypeDef<string | number | boolean>;
+            label: import("vue-types").VueTypeDef<string | number>;
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+        }>>, {
             selected: import("vue").ComputedRef<boolean>;
+            multiple: import("vue").ComputedRef<boolean>;
             handleOptionClick: () => void;
             visible: import("vue").Ref<boolean>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
@@ -108,24 +132,17 @@ declare const _default: import("vue").DefineComponent<{
         $forceUpdate: () => void;
         $nextTick: typeof import("vue").nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
-    } & Readonly<{
-        value?: unknown;
-        label?: unknown;
-        disabled?: unknown;
-    } & {
-        disabled: boolean;
-    } & {
-        label?: string | number;
-        value?: string | number | boolean;
-    }> & {} & import("vue").ShallowUnwrapRef<{
-        selectItemClass: import("vue").ComputedRef<{
-            'is-selected': boolean;
-            'is-disabled': boolean;
-            'is-multiple': boolean;
-            'is-hover': boolean;
-            'bk-select-option': boolean;
-        }>;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        value: import("vue-types").VueTypeDef<string | number | boolean>;
+        label: import("vue-types").VueTypeDef<string | number>;
+        disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{
         selected: import("vue").ComputedRef<boolean>;
+        multiple: import("vue").ComputedRef<boolean>;
         handleOptionClick: () => void;
         visible: import("vue").Ref<boolean>;
     }> & {} & {} & import("vue").ComponentCustomProperties>>;
@@ -134,16 +151,15 @@ declare const _default: import("vue").DefineComponent<{
         $data: {};
         $props: Partial<{
             disabled: boolean;
-        }> & Omit<Readonly<{
-            value?: unknown;
-            label?: unknown;
-            disabled?: unknown;
-        } & {
-            disabled: boolean;
-        } & {
-            label?: string | number;
-            value?: string | number | boolean;
-        }> & {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled">;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            value: import("vue-types").VueTypeDef<string | number | boolean>;
+            label: import("vue-types").VueTypeDef<string | number>;
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -157,24 +173,17 @@ declare const _default: import("vue").DefineComponent<{
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<{
-            value?: unknown;
-            label?: unknown;
-            disabled?: unknown;
-        } & {
-            disabled: boolean;
-        } & {
-            label?: string | number;
-            value?: string | number | boolean;
-        }> & {}, {
-            selectItemClass: import("vue").ComputedRef<{
-                'is-selected': boolean;
-                'is-disabled': boolean;
-                'is-multiple': boolean;
-                'is-hover': boolean;
-                'bk-select-option': boolean;
-            }>;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            value: import("vue-types").VueTypeDef<string | number | boolean>;
+            label: import("vue-types").VueTypeDef<string | number>;
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+        }>>, {
             selected: import("vue").ComputedRef<boolean>;
+            multiple: import("vue").ComputedRef<boolean>;
             handleOptionClick: () => void;
             visible: import("vue").Ref<boolean>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
@@ -199,76 +208,65 @@ declare const _default: import("vue").DefineComponent<{
         $forceUpdate: () => void;
         $nextTick: typeof import("vue").nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
-    } & Readonly<{
-        value?: unknown;
-        label?: unknown;
-        disabled?: unknown;
-    } & {
-        disabled: boolean;
-    } & {
-        label?: string | number;
-        value?: string | number | boolean;
-    }> & {} & import("vue").ShallowUnwrapRef<{
-        selectItemClass: import("vue").ComputedRef<{
-            'is-selected': boolean;
-            'is-disabled': boolean;
-            'is-multiple': boolean;
-            'is-hover': boolean;
-            'bk-select-option': boolean;
-        }>;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        value: import("vue-types").VueTypeDef<string | number | boolean>;
+        label: import("vue-types").VueTypeDef<string | number>;
+        disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{
         selected: import("vue").ComputedRef<boolean>;
+        multiple: import("vue").ComputedRef<boolean>;
         handleOptionClick: () => void;
         visible: import("vue").Ref<boolean>;
     }> & {} & {} & import("vue").ComponentCustomProperties>>;
-    selectedLabel: import("vue").ComputedRef<string>;
-    selectClass: import("vue").ComputedRef<{
-        [x: string]: boolean;
-        'bk-select': boolean;
-        'popover-show': boolean;
-        'is-disabled': boolean;
-        'is-focus': boolean;
-    }>;
-    isPopoverShow: import("vue").Ref<boolean>;
-    placeholder: import("vue").Ref<string>;
-    filterable: import("vue").Ref<boolean>;
-    clearable: import("vue").Ref<boolean>;
-    isHover: import("vue").Ref<boolean>;
-    popperWidth: import("vue").Ref<string | number>;
-    selectTriggerRef: import("vue").Ref<HTMLElement>;
-    searchKey: import("vue").Ref<string>;
-    searchLoading: import("vue").Ref<boolean>;
-    isEmpty: import("vue").ComputedRef<boolean>;
-    setHover: () => void;
-    cancelHover: () => void;
-    handleFocus: () => void;
-    handleBlur: () => void;
-    toggleMenu: () => void;
-    handleClear: (e: Event) => void;
-    onPopoverFirstUpdate: OnFirstUpdateFnType;
-    hidePopover: () => void;
-    showPopover: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "toggle" | "update:modelValue")[], "change" | "toggle" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    modelValue?: unknown;
-    multiple?: unknown;
-    placeholder?: unknown;
-    disabled?: unknown;
-    size?: unknown;
-    clearable?: unknown;
-    loading?: unknown;
-    filterable?: unknown;
-    remoteMethod?: unknown;
-} & {
-    placeholder: string;
-    size: string;
-    multiple: boolean;
-    disabled: boolean;
-    loading: boolean;
-    clearable: boolean;
-    filterable: boolean;
-} & {
-    modelValue?: any;
-    remoteMethod?: (...args: any[]) => any;
-}> & {
+    currentSelectedLabel: import("vue").Ref<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "toggle" | "update:modelValue")[], "change" | "toggle" | "update:modelValue", 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;
+    } & {
+        default: boolean;
+    };
+    placeholder: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    clearable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    filterable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    remoteMethod: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    scrollHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+}>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
     onToggle?: (...args: any[]) => any;
@@ -281,5 +279,6 @@ declare const _default: import("vue").DefineComponent<{
     clearable: boolean;
     filterable: boolean;
     remoteMethod: (...args: any[]) => any;
+    scrollHeight: number;
 }>;
 export default _default;

package/lib/select/select.less

@@ -92,6 +92,7 @@
 
     .bk-select-prefix {
       .input-left-icon();
+      font-size: 14px;
     }
 
     .angle-up {
@@ -110,9 +111,35 @@
         color: #979ba5;
       }
     }
+
+    .spinner {
+      .input-right-icon();
+      .bk-select-icon(16px, #3A84FF);
+    }
+  }
+
+  .bk-select-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 56px;
+    color: #63656e;
+
+    .spinner {
+      display: flex;
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+      font-size: 14px;
+      color: #c4c6cc;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   .bk-select-dropdown {
+    overflow: auto;
+
     .bk-select-search {
       position: relative;
       padding: 0 5px;
@@ -140,22 +167,21 @@
     }
   }
 
-  .bk-select-empty {
-    height: 32px;
-    font-size: 12px;
-    line-height: 32px;
-    color: #63656e;
-    text-align: center;
-    user-select: none;
+  .bk-select-extension {
+    display: flex;
+    height: 40px;
+    background-color: #fafbfd;
+    align-items: center;
   }
 
   .bk-select-options {
-    padding: 6px 0;
+    padding: 8px 0;
   }
 
   .bk-select-option {
+    position: relative;
     height: 32px;
-    padding: 0 10px;
+    padding: 0 20px 0 12px;
     line-height: 32px;
     color: #63656e;
     text-align: left;
@@ -166,16 +192,15 @@
 
     &:hover {
       color: #3a84ff;
-      background-color: #eaf3ff;
+      background-color: #f5f7fa;
     }
 
     &.is-selected {
       color: #3a84ff;
-      background-color: #f4f6fa;
 
       &.is-multiple::after {
         position: absolute;
-        right: 20px;
+        right: 12px;
         font-size: 12px;
         font-weight: 700;
         content: '\2713';
@@ -193,11 +218,45 @@
   .bk-option-group {
     &-label {
       height: 32px;
-      margin: 0 10px;
+      padding: 0 8px;
       line-height: 32px;
       color: #979ba5;
       text-align: left;
-      border-bottom: 1px solid #dcdee5;
+
+      &.collapsible {
+        cursor: pointer;
+      }
+    }
+
+    &.collapsible {
+      .bk-select-option {
+        padding-left: 40px;
+      }
+    }
+
+    .default-group-label {
+      display: flex;
+      user-select: none;
+      align-items: center;
+
+      &-icon {
+        display: flex;
+        width: 12px;
+        height: 12px;
+        margin-right: 8px;
+        font-size: 12px;
+        transition: all .1s;
+        align-items: center;
+        justify-content: center;
+
+        &.collapse {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    .bk-select-option {
+      padding-left: 24px;
     }
   }
 }

package/lib/select/select.variable.css

@@ -83,6 +83,12 @@
   --date-picker-disabled-bg: #fafbfd;
   --date-picker-dropdown-mb: 4px;
   --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
 }
 .bk-select {
   display: inline-block;
@@ -137,6 +143,7 @@
   position: absolute;
   top: 6px;
   left: 4px;
+  font-size: 14px;
 }
 .bk-select .bk-select-trigger .angle-up {
   transform: rotate(180deg);
@@ -168,6 +175,38 @@
 .bk-select .bk-select-trigger .clear-icon:hover {
   color: #979ba5;
 }
+.bk-select .bk-select-trigger .spinner {
+  position: absolute;
+  top: 6px;
+  right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 16px;
+  color: #3A84FF;
+}
+.bk-select .bk-select-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 56px;
+  color: #63656e;
+}
+.bk-select .bk-select-empty .spinner {
+  display: flex;
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
+  font-size: 14px;
+  color: #c4c6cc;
+  align-items: center;
+  justify-content: center;
+}
+.bk-select .bk-select-dropdown {
+  overflow: auto;
+}
 .bk-select .bk-select-dropdown .bk-select-search {
   position: relative;
   padding: 0 5px;
@@ -190,20 +229,19 @@
   border-bottom: 1px solid #dcdee5;
   outline: 0;
 }
-.bk-select .bk-select-empty {
-  height: 32px;
-  font-size: 12px;
-  line-height: 32px;
-  color: #63656e;
-  text-align: center;
-  user-select: none;
+.bk-select .bk-select-extension {
+  display: flex;
+  height: 40px;
+  background-color: #fafbfd;
+  align-items: center;
 }
 .bk-select .bk-select-options {
-  padding: 6px 0;
+  padding: 8px 0;
 }
 .bk-select .bk-select-option {
+  position: relative;
   height: 32px;
-  padding: 0 10px;
+  padding: 0 20px 0 12px;
   line-height: 32px;
   color: #63656e;
   text-align: left;
@@ -215,15 +253,14 @@
 }
 .bk-select .bk-select-option:hover {
   color: #3a84ff;
-  background-color: #eaf3ff;
+  background-color: #f5f7fa;
 }
 .bk-select .bk-select-option.is-selected {
   color: #3a84ff;
-  background-color: #f4f6fa;
 }
 .bk-select .bk-select-option.is-selected.is-multiple::after {
   position: absolute;
-  right: 20px;
+  right: 12px;
   font-size: 12px;
   font-weight: 700;
   content: '\2713';
@@ -235,9 +272,35 @@
 }
 .bk-select .bk-option-group-label {
   height: 32px;
-  margin: 0 10px;
+  padding: 0 8px;
   line-height: 32px;
   color: #979ba5;
   text-align: left;
-  border-bottom: 1px solid #dcdee5;
+}
+.bk-select .bk-option-group-label.collapsible {
+  cursor: pointer;
+}
+.bk-select .bk-option-group.collapsible .bk-select-option {
+  padding-left: 40px;
+}
+.bk-select .bk-option-group .default-group-label {
+  display: flex;
+  user-select: none;
+  align-items: center;
+}
+.bk-select .bk-option-group .default-group-label-icon {
+  display: flex;
+  width: 12px;
+  height: 12px;
+  margin-right: 8px;
+  font-size: 12px;
+  transition: all 0.1s;
+  align-items: center;
+  justify-content: center;
+}
+.bk-select .bk-option-group .default-group-label-icon.collapse {
+  transform: rotate(-90deg);
+}
+.bk-select .bk-option-group .bk-select-option {
+  padding-left: 24px;
 }

package/lib/shared/bk-helper-core.d.ts

@@ -85,3 +85,9 @@ export declare function mergeIf(target: any, source: any): any;
  */
 export declare function mergerIfFn(key: string, target: any, source: any): void;
 export declare function throttle(func: Function, wait: number, options?: any): (this: any) => any;
+/**
+ * 检查当前元素是否为Html元素
+ * @param obj
+ * @returns
+ */
+export declare function isElement(obj: any): boolean;