bkui-vue 0.0.1-beta.23 → 0.0.1-beta.230

package/lib/tab/props.d.ts

@@ -0,0 +1,194 @@
+import { PropType, VNode } from 'vue';
+export declare const tabNavEventProps: {
+    tabAdd: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    tabChange: {
+        type: FunctionConstructor;
+        default: (name: string) => string;
+    };
+    tabRemove: {
+        type: FunctionConstructor;
+        default: (name: string) => string;
+    };
+    tabSort: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    tabDrag: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+};
+export declare const tabEventProps: {
+    add: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    change: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    remove: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    sort: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    drag: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+};
+export declare const tabProps: {
+    active: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    type: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    tabPosition: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    closable: BooleanConstructor;
+    addable: BooleanConstructor;
+    sortable: BooleanConstructor;
+    sortType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    labelHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    scrollStep: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    validateActive: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showHeader: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    changeOnHover: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    changeOnHoverDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+};
+export declare const tabNavProps: {
+    tabAdd: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    tabChange: {
+        type: FunctionConstructor;
+        default: (name: string) => string;
+    };
+    tabRemove: {
+        type: FunctionConstructor;
+        default: (name: string) => string;
+    };
+    tabSort: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    tabDrag: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    active: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    panels: {
+        type: PropType<VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[]>;
+        default: () => any[];
+    };
+    tabPosition: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    closable: BooleanConstructor;
+    addable: BooleanConstructor;
+    sortable: BooleanConstructor;
+    sortType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    labelHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    scrollStep: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    validateActive: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    changeOnHover: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    changeOnHoverDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+};
+export declare const tabPanelProps: {
+    name: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    label: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    visible: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    renderDirective: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    panel: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
+};

package/lib/tab/tab-nav.d.ts

@@ -1,29 +1,39 @@
-import { PropType, VNode } from 'vue';
 declare const _default: import("vue").DefineComponent<{
-    active: {
-        type: NumberConstructor | StringConstructor;
+    tabAdd: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    tabChange: {
+        type: FunctionConstructor;
+        default: (name: string) => string;
+    };
+    tabRemove: {
+        type: FunctionConstructor;
+        default: (name: string) => string;
+    };
+    tabSort: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    tabDrag: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    active: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
     };
     panels: {
-        type: PropType<VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        type: import("vue").PropType<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>[]>;
         default: () => any[];
     };
-    closable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    addable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
+    tabPosition: import("vue-types").VueTypeDef<string> & {
+        default: string;
     };
+    closable: BooleanConstructor;
+    addable: BooleanConstructor;
+    sortable: BooleanConstructor;
     sortType: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
@@ -52,17 +62,37 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
+}, {
+    navs: import("vue").ComputedRef<any[]>;
+    dragenterIndex: import("vue").Ref<number>;
+    dragStartIndex: import("vue").Ref<number>;
+    draggingEle: import("vue").Ref<string>;
+    guid: string;
+    /**
+     * @description  判断拖动的元素是否是在同一个tab。
+     *               使用guid，相比 el1.parentNode === el2.parentNode 判断，性能要高
+     * @param e {event}  触发的元素
+     * @return {boolean}
+     */
+    handleTabAdd(e: any): void;
+    dragstart(index: number, $event: DragEvent): void;
+    dragenter(index: any): void;
+    dragend(): void;
+    drop(index: any, sortType: any): boolean;
+    handleTabChange(name: string): void;
+    handleTabRemove(index: number, panel: any): void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tabAdd: {
         type: FunctionConstructor;
         default: () => any;
     };
     tabChange: {
         type: FunctionConstructor;
-        default: () => any;
+        default: (name: string) => string;
     };
     tabRemove: {
         type: FunctionConstructor;
-        default: () => any;
+        default: (name: string) => string;
     };
     tabSort: {
         type: FunctionConstructor;
@@ -72,54 +102,21 @@ declare const _default: import("vue").DefineComponent<{
         type: FunctionConstructor;
         default: () => any;
     };
-}, {
-    navs: import("vue").ComputedRef<any[]>;
-    dragenterIndex: import("vue").Ref<number>;
-    dragStartIndex: import("vue").Ref<number>;
-    draggingEle: import("vue").Ref<string>;
-    guid: string;
-}, unknown, {}, {
-    /**
-     * @description  判断拖动的元素是否是在同一个tab。
-     *               使用guid，相比 el1.parentNode === el2.parentNode 判断，性能要高
-     * @param el1 {string} 拖动的元素
-     * @param el2 {string}  触发的元素
-     * @return {boolean}
-     */
-    distinctRoots(el1: string, el2: string): boolean;
-    swapArr(arr: any[], a: number, b: number): void;
-    handleTabAdd(e: MouseEvent): void;
-    dragstart(index: number, $event: DragEvent): void;
-    dragenter(index: any): void;
-    dragend(): void;
-    drop(index: any, sortType: any): false;
-    handleTabChange(name: string): void;
-    handleTabRemove(index: number, panel: any): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    active: {
-        type: NumberConstructor | StringConstructor;
+    active: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
     };
     panels: {
-        type: PropType<VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        type: import("vue").PropType<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>[]>;
         default: () => any[];
     };
-    closable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    addable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
+    tabPosition: import("vue-types").VueTypeDef<string> & {
+        default: string;
     };
+    closable: BooleanConstructor;
+    addable: BooleanConstructor;
+    sortable: BooleanConstructor;
     sortType: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
@@ -148,32 +145,19 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
-    tabAdd: {
-        type: FunctionConstructor;
-        default: () => any;
-    };
-    tabChange: {
-        type: FunctionConstructor;
-        default: () => any;
-    };
-    tabRemove: {
-        type: FunctionConstructor;
-        default: () => any;
-    };
-    tabSort: {
-        type: FunctionConstructor;
-        default: () => any;
-    };
-    tabDrag: {
-        type: FunctionConstructor;
-        default: () => any;
-    };
 }>>, {
     closable: boolean;
+    active: string | number;
     sortType: string;
-    panels: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    tabAdd: Function;
+    tabChange: Function;
+    tabRemove: Function;
+    tabSort: Function;
+    tabDrag: Function;
+    panels: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>[];
+    tabPosition: string;
     addable: boolean;
     sortable: boolean;
     labelHeight: number;
@@ -181,10 +165,5 @@ declare const _default: import("vue").DefineComponent<{
     validateActive: boolean;
     changeOnHover: boolean;
     changeOnHoverDelay: number;
-    tabAdd: Function;
-    tabChange: Function;
-    tabRemove: Function;
-    tabSort: Function;
-    tabDrag: Function;
 }>;
 export default _default;

package/lib/tab/tab-panel.d.ts

@@ -1,9 +1,15 @@
 declare const _default: import("vue").DefineComponent<{
-    name: {
-        type: NumberConstructor | StringConstructor;
+    name: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    label: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
     };
-    label: StringConstructor | FunctionConstructor;
-    closable: BooleanConstructor | FunctionConstructor;
     visible: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -11,20 +17,30 @@ declare const _default: import("vue").DefineComponent<{
     };
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
-    } & {
+    };
+    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    sortable: BooleanConstructor | FunctionConstructor;
     renderDirective: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    panel: StringConstructor | FunctionConstructor;
+    panel: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    name: {
-        type: NumberConstructor | StringConstructor;
+    name: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    label: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
     };
-    label: StringConstructor | FunctionConstructor;
-    closable: BooleanConstructor | FunctionConstructor;
     visible: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -32,17 +48,26 @@ declare const _default: import("vue").DefineComponent<{
     };
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
-    } & {
+    };
+    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    sortable: BooleanConstructor | FunctionConstructor;
     renderDirective: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    panel: StringConstructor | FunctionConstructor;
+    panel: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
 }>>, {
-    visible: boolean;
+    label: string | ((...args: any[]) => any);
+    name: string | number;
     disabled: boolean;
+    visible: boolean;
+    closable: boolean;
     renderDirective: string;
+    panel: string | ((...args: any[]) => any);
+    sortable: boolean;
 }>;
 export default _default;

package/lib/tab/tab.css

@@ -10,6 +10,7 @@
   flex-direction: row-reverse;
 }
 .bk-tab-header {
+  position: relative;
   display: flex;
   color: #63656e;
 }
@@ -22,6 +23,9 @@
 .bk-tab--border-card .bk-tab-header > div {
   border-right: 1px solid #dcdee5;
 }
+.bk-tab-header-navs {
+  flex: 1;
+}
 .bk-tab--top .bk-tab-header-nav {
   overflow-x: auto;
   overflow-y: visible;
@@ -40,9 +44,28 @@
   width: 0;
   height: 0;
 }
+.bk-tab-header-next,
+.bk-tab-header-prev {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  width: 15px;
+  background: #fff;
+  content: '';
+}
+.bk-tab-header-prev {
+  left: 1px;
+}
+.bk-tab-header-next {
+  right: 1px;
+}
 .bk-tab-header-operation .bk-tab-header-item {
   padding: 0 12px;
 }
+.bk-tab-header-setting {
+  justify-self: flex-end;
+  margin-left: auto;
+}
 .bk-tab--left .bk-tab-header {
   border-right: 1px solid #dcdee5;
 }
@@ -80,7 +103,7 @@
 }
 .bk-tab-header-item:hover .bk-tab-header-item-close {
   display: block;
-  margin-left: 10px;
+  margin-left: 5px;
   color: #ea3636;
 }
 .bk-tab--top .bk-tab-header-item {
@@ -111,6 +134,7 @@
 }
 .bk-tab-header-item-close {
   display: none;
+  font-size: 16px;
   color: #c4c6cc;
 }
 .bk-tab-header--active {

package/lib/tab/tab.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("vue").DefineComponent<{
-    active: {
-        type: NumberConstructor | StringConstructor;
+    active: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
     };
     type: import("vue-types").VueTypeDef<string> & {
         default: string;
@@ -8,21 +8,9 @@ declare const _default: import("vue").DefineComponent<{
     tabPosition: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    closable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    addable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
+    closable: BooleanConstructor;
+    addable: BooleanConstructor;
+    sortable: BooleanConstructor;
     sortType: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
@@ -64,15 +52,14 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     isMounted: import("vue").Ref<boolean>;
     panels: import("vue").Ref<any[]>;
-}, unknown, {}, {
     tabAdd(e: MouseEvent): void;
     tabChange(name: string): void;
     tabRemove(index: number, panel: any): void;
-    tabSort(dragTabIndex: number, dropTabIndex: number): void;
+    tabSort(dragTabIndex: number, dropTabIndex: number, sortType: string): boolean;
     tabDrag(dragTabIndex: number, dragEvent: DragEvent): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "drag" | "add" | "add-panel" | "tab-change" | "close-panel" | "sort-change" | "on-drag-tab" | "remove" | "update:active" | "sort")[], "change" | "drag" | "sort" | "add" | "add-panel" | "tab-change" | "close-panel" | "sort-change" | "on-drag-tab" | "remove" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    active: {
-        type: NumberConstructor | StringConstructor;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "drag" | "add" | "remove" | "add-panel" | "tab-change" | "remove-panel" | "sort-change" | "on-drag-tab" | "update:active" | "sort")[], "change" | "drag" | "sort" | "add" | "remove" | "add-panel" | "tab-change" | "remove-panel" | "sort-change" | "on-drag-tab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
     };
     type: import("vue-types").VueTypeDef<string> & {
         default: string;
@@ -80,21 +67,9 @@ declare const _default: import("vue").DefineComponent<{
     tabPosition: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    closable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    addable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
+    closable: BooleanConstructor;
+    addable: BooleanConstructor;
+    sortable: BooleanConstructor;
     sortType: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
@@ -136,21 +111,23 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onDrag?: (...args: any[]) => any;
     onChange?: (...args: any[]) => any;
+    onRemove?: (...args: any[]) => any;
     onAdd?: (...args: any[]) => any;
     "onAdd-panel"?: (...args: any[]) => any;
     "onTab-change"?: (...args: any[]) => any;
-    "onClose-panel"?: (...args: any[]) => any;
+    "onRemove-panel"?: (...args: any[]) => any;
     "onSort-change"?: (...args: any[]) => any;
     "onOn-drag-tab"?: (...args: any[]) => any;
-    onRemove?: (...args: any[]) => any;
     "onUpdate:active"?: (...args: any[]) => any;
     onSort?: (...args: any[]) => any;
 }, {
     type: string;
-    closable: boolean;
     extCls: string;
+    closable: boolean;
+    active: string | number;
     showHeader: boolean;
     sortType: string;
+    tabPosition: string;
     addable: boolean;
     sortable: boolean;
     labelHeight: number;
@@ -158,6 +135,5 @@ declare const _default: import("vue").DefineComponent<{
     validateActive: boolean;
     changeOnHover: boolean;
     changeOnHoverDelay: number;
-    tabPosition: string;
 }>;
 export default _default;