bkui-vue 0.0.1-beta.10 → 0.0.1-beta.11

package/lib/select/optionGroup.d.ts

@@ -0,0 +1,115 @@
+declare const _default: import("vue").DefineComponent<{
+    label: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, {
+    visible: import("vue").ComputedRef<boolean>;
+    children: import("vue").Ref<({
+        $: 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">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $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;
+            }>;
+            selected: import("vue").ComputedRef<boolean>;
+            handleOptionClick: () => void;
+            visible: import("vue").Ref<boolean>;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+            disabled: boolean;
+        }> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+        };
+        $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;
+        }>;
+        selected: import("vue").ComputedRef<boolean>;
+        handleOptionClick: () => void;
+        visible: import("vue").Ref<boolean>;
+    }> & {} & {} & import("vue").ComponentCustomProperties)[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    label?: unknown;
+    disabled?: unknown;
+} & {
+    label: string;
+    disabled: boolean;
+} & {}> & {}, {
+    label: string;
+    disabled: boolean;
+}>;
+export default _default;

package/lib/select/select.css

@@ -1,15 +1,14 @@
 .bk-select {
   display: inline-block;
 }
-.bk-select .input-right-icon {
-  position: absolute;
-  top: 6px;
-  right: 4px;
+.bk-select ul {
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+  list-style: none;
 }
-.bk-select .input-left-icon {
-  position: absolute;
-  top: 6px;
-  left: 4px;
+.bk-select .bk-popover-content {
+  padding: 0;
 }
 .bk-select.is-focus .bk-select-trigger .bk-select-input {
   border-color: #3a84ff;
@@ -83,17 +82,50 @@
 .bk-select .bk-select-trigger .clear-icon:hover {
   color: #979ba5;
 }
+.bk-select .bk-select-dropdown .bk-select-search {
+  position: relative;
+  padding: 0 5px;
+}
+.bk-select .bk-select-dropdown .bk-select-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  font-size: 16px;
+  color: #979ba5;
+  transform: translateY(-50%);
+}
+.bk-select .bk-select-dropdown .bk-select-search-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px 0 26px;
+  font-size: 12px;
+  cursor: text;
+  border: none;
+  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-options {
+  padding: 6px 0;
+}
 .bk-select .bk-select-option {
   height: 32px;
-  padding: 0 16px;
-  margin: 0 -8px;
-  font-weight: normal;
+  padding: 0 10px;
   line-height: 32px;
   color: #63656e;
   text-align: left;
-  list-style: none;
   cursor: pointer;
   user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .bk-select .bk-select-option:hover {
   color: #3a84ff;
@@ -115,3 +147,11 @@
   cursor: not-allowed;
   background-color: transparent;
 }
+.bk-select .bk-option-group-label {
+  height: 32px;
+  margin: 0 10px;
+  line-height: 32px;
+  color: #979ba5;
+  text-align: left;
+  border-bottom: 1px solid #dcdee5;
+}

package/lib/select/select.d.ts

@@ -1,6 +1,6 @@
-import { State } from '@popperjs/core';
+import { OnFirstUpdateFnType } from '@bkui-vue/shared';
 declare const _default: import("vue").DefineComponent<{
-    modelValue: import("vue-types").VueTypeDef<string | number | boolean | unknown[]>;
+    modelValue: import("vue-types").VueTypeValidableDef<any>;
     multiple: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -34,8 +34,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    remoteMethod: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
 }, {
-    optionsMap: import("vue").Ref<Map<any, {
+    options: import("vue").Ref<Set<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
@@ -81,8 +84,8 @@ declare const _default: import("vue").DefineComponent<{
                 'bk-select-option': boolean;
             }>;
             selected: import("vue").ComputedRef<boolean>;
-            handleOptionClick: (e: Event) => void;
-            display: import("vue").Ref<boolean>;
+            handleOptionClick: () => void;
+            visible: import("vue").Ref<boolean>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
             disabled: boolean;
         }> & {
@@ -123,10 +126,10 @@ declare const _default: import("vue").DefineComponent<{
             'bk-select-option': boolean;
         }>;
         selected: import("vue").ComputedRef<boolean>;
-        handleOptionClick: (e: Event) => void;
-        display: import("vue").Ref<boolean>;
+        handleOptionClick: () => void;
+        visible: import("vue").Ref<boolean>;
     }> & {} & {} & import("vue").ComponentCustomProperties>>;
-    selectedOptions: import("vue").ComputedRef<({
+    selectedOptions: import("vue").Ref<Set<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
@@ -172,8 +175,8 @@ declare const _default: import("vue").DefineComponent<{
                 'bk-select-option': boolean;
             }>;
             selected: import("vue").ComputedRef<boolean>;
-            handleOptionClick: (e: Event) => void;
-            display: import("vue").Ref<boolean>;
+            handleOptionClick: () => void;
+            visible: import("vue").Ref<boolean>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
             disabled: boolean;
         }> & {
@@ -214,9 +217,9 @@ declare const _default: import("vue").DefineComponent<{
             'bk-select-option': boolean;
         }>;
         selected: import("vue").ComputedRef<boolean>;
-        handleOptionClick: (e: Event) => void;
-        display: import("vue").Ref<boolean>;
-    }> & {} & {} & import("vue").ComponentCustomProperties)[]>;
+        handleOptionClick: () => void;
+        visible: import("vue").Ref<boolean>;
+    }> & {} & {} & import("vue").ComponentCustomProperties>>;
     selectedLabel: import("vue").ComputedRef<string>;
     selectClass: import("vue").ComputedRef<{
         [x: string]: boolean;
@@ -230,21 +233,18 @@ declare const _default: import("vue").DefineComponent<{
     filterable: import("vue").Ref<boolean>;
     clearable: import("vue").Ref<boolean>;
     isHover: import("vue").Ref<boolean>;
-    modifiers: import("vue").Ref<{
-        name: string;
-        options: {
-            offset: number[];
-        };
-    }[]>;
     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: (instance: State) => 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<{
@@ -256,6 +256,7 @@ declare const _default: import("vue").DefineComponent<{
     clearable?: unknown;
     loading?: unknown;
     filterable?: unknown;
+    remoteMethod?: unknown;
 } & {
     placeholder: string;
     size: string;
@@ -265,7 +266,8 @@ declare const _default: import("vue").DefineComponent<{
     clearable: boolean;
     filterable: boolean;
 } & {
-    modelValue?: string | number | boolean | unknown[];
+    modelValue?: any;
+    remoteMethod?: (...args: any[]) => any;
 }> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
@@ -278,5 +280,6 @@ declare const _default: import("vue").DefineComponent<{
     loading: boolean;
     clearable: boolean;
     filterable: boolean;
+    remoteMethod: (...args: any[]) => any;
 }>;
 export default _default;

package/lib/select/select.less

@@ -3,6 +3,17 @@
 .@{bk-prefix}-select {
   display: inline-block;
 
+  ul {
+    padding: 0;
+    margin: 0;
+    font-weight: normal;
+    list-style: none;
+  }
+
+  .bk-popover-content {
+    padding: 0;
+  }
+
   .bk-select-icon(@fontSize: 20px, @color: #979ba5) {
     display: flex;
     align-items: center;
@@ -13,19 +24,23 @@
     color: @color;
   }
 
-  .input-right-icon {
+  .input-right-icon() {
     position: absolute;
     top: 6px;
     right: 4px;
   }
 
-  .input-left-icon {
+  .input-left-icon() {
     position: absolute;
     top: 6px;
     left: 4px;
   }
 
-  &.large {}
+  .ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
   &.is-focus {
     .bk-select-trigger .bk-select-input {
@@ -97,18 +112,58 @@
     }
   }
 
+  .bk-select-dropdown {
+    .bk-select-search {
+      position: relative;
+      padding: 0 5px;
+
+      &-icon {
+        position: absolute;
+        top: 50%;
+        left: 8px;
+        font-size: 16px;
+        color: #979ba5;
+        transform: translateY(-50%);
+        transform: translateY(-50%);
+      }
+
+      &-input {
+        width: 100%;
+        height: 32px;
+        padding: 0 10px 0 26px;
+        font-size: 12px;
+        cursor: text;
+        border: none;
+        border-bottom: 1px solid #dcdee5;
+        outline: 0;
+      }
+    }
+  }
+
+  .bk-select-empty {
+    height: 32px;
+    font-size: 12px;
+    line-height: 32px;
+    color: #63656e;
+    text-align: center;
+    user-select: none;
+  }
+
+  .bk-select-options {
+    padding: 6px 0;
+  }
+
   .bk-select-option {
     height: 32px;
-    padding: 0 16px;
-    margin: 0 -8px;
-    font-weight: normal;
+    padding: 0 10px;
     line-height: 32px;
     color: #63656e;
     text-align: left;
-    list-style: none;
     cursor: pointer;
     user-select: none;
 
+    .ellipsis();
+
     &:hover {
       color: #3a84ff;
       background-color: #eaf3ff;
@@ -134,4 +189,15 @@
     }
 
   }
+
+  .bk-option-group {
+    &-label {
+      height: 32px;
+      margin: 0 10px;
+      line-height: 32px;
+      color: #979ba5;
+      text-align: left;
+      border-bottom: 1px solid #dcdee5;
+    }
+  }
 }

package/lib/select/select.variable.css

@@ -5,6 +5,7 @@
   --warning-color: #ff9c01;
   --danger-color: #ea3636;
   --default-color: #63656e;
+  --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
   --disable-color: #dcdee5;
@@ -67,19 +68,33 @@
   --message-success-border-color: #dcffe2;
   --message-danger-bg-color: #ffeded;
   --message-danger-border-color: #ffdddd;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
 }
 .bk-select {
   display: inline-block;
 }
-.bk-select .input-right-icon {
-  position: absolute;
-  top: 6px;
-  right: 4px;
+.bk-select ul {
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+  list-style: none;
 }
-.bk-select .input-left-icon {
-  position: absolute;
-  top: 6px;
-  left: 4px;
+.bk-select .bk-popover-content {
+  padding: 0;
 }
 .bk-select.is-focus .bk-select-trigger .bk-select-input {
   border-color: var(--primary-color);
@@ -153,17 +168,50 @@
 .bk-select .bk-select-trigger .clear-icon:hover {
   color: #979ba5;
 }
+.bk-select .bk-select-dropdown .bk-select-search {
+  position: relative;
+  padding: 0 5px;
+}
+.bk-select .bk-select-dropdown .bk-select-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  font-size: 16px;
+  color: #979ba5;
+  transform: translateY(-50%);
+}
+.bk-select .bk-select-dropdown .bk-select-search-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px 0 26px;
+  font-size: 12px;
+  cursor: text;
+  border: none;
+  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-options {
+  padding: 6px 0;
+}
 .bk-select .bk-select-option {
   height: 32px;
-  padding: 0 16px;
-  margin: 0 -8px;
-  font-weight: normal;
+  padding: 0 10px;
   line-height: 32px;
   color: #63656e;
   text-align: left;
-  list-style: none;
   cursor: pointer;
   user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .bk-select .bk-select-option:hover {
   color: #3a84ff;
@@ -185,3 +233,11 @@
   cursor: not-allowed;
   background-color: transparent;
 }
+.bk-select .bk-option-group-label {
+  height: 32px;
+  margin: 0 10px;
+  line-height: 32px;
+  color: #979ba5;
+  text-align: left;
+  border-bottom: 1px solid #dcdee5;
+}

package/lib/shared/bk-popover.d.ts

@@ -1,16 +1,19 @@
 import { Instance, Placement, Modifier, PositioningStrategy, State } from '@popperjs/core';
+export declare type OnFirstUpdateFnType = (instance: Partial<State>) => void;
 export declare type IOptions = {
     placement?: Placement;
     modifiers?: Array<Partial<Modifier<any, any>>>;
     strategy?: PositioningStrategy;
-    onFirstUpdate?: (arg0: Partial<State>) => void;
+    onFirstUpdate?: OnFirstUpdateFnType;
     isShow?: boolean;
     theme?: string;
     trigger?: string;
+    disabled?: boolean;
 };
 export declare type IBKPopover = Instance & {
     show: () => void;
     hide: () => void;
+    updateDisabled: (val: boolean) => void;
     isShow: boolean;
 };
 export declare class BKPopover {
@@ -28,11 +31,18 @@ export declare class BKPopover {
     private popperRefer?;
     /** 默认初始化配置项 */
     private initOptions;
+    /** hide延时 */
+    private delay;
+    /** 是否进入popperRefer */
+    private isInnerPopper;
+    /** 是否为禁用状态 */
+    private disabled;
     constructor(reference?: string | HTMLElement, popperRefer?: string | HTMLElement, options?: IOptions);
     forceUpdate(): void;
     update(): void;
     setOptions(options: IOptions): void;
     destroy(): void;
+    updateDisabled(disabled?: boolean): void;
     /**
      * 展示Pop
      * @param event 触发事件

package/lib/shared/index.d.ts

@@ -42,3 +42,10 @@ export interface OriginComponent {
 }
 export declare const withInstall: <T extends OriginComponent>(component: T) => T & Plugin;
 export declare const withInstallProps: <T extends OriginComponent, K extends Record<string, unknown>>(component: T, childComponents: K, isProps?: boolean) => T & Plugin & Readonly<K>;
+/**
+ * 解析当前组件ClassName，自动添加前缀
+ * @param clsName 当前ClassName
+ * @param prefix 前缀，默认为bk
+ * @returns prefix-clsName
+ */
+export declare function resolveClassName(clsName: string, prefix?: string): string;