bkui-vue 0.0.1-beta.40 → 0.0.1-beta.401

package/lib/tab/props.d.ts

@@ -1,4 +1,25 @@
 import { PropType, VNode } from 'vue';
+export declare enum TabTypeEnum {
+    CARD = "card",
+    BORDER_CARD = "border-card",
+    UNBORDER_CARD = "unborder-card",
+    CARD_TAB = "card-tab"
+}
+export declare enum PositionEnum {
+    LEFT = "left",
+    RIGHT = "right",
+    TOP = "top"
+}
+export declare const TabPositionType: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
+    default: "top" | "right" | "left";
+};
+export declare enum SortTypeEnum {
+    REPLACE = "replace",
+    INSERT = "insert"
+}
+export declare const SortTypeUnion: import("vue-types").VueTypeDef<"replace" | "insert"> & {
+    default: "replace" | "insert";
+};
 export declare const tabNavEventProps: {
     tabAdd: {
         type: FunctionConstructor;
@@ -47,17 +68,17 @@ export declare const tabProps: {
     active: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    type: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab";
     };
-    tabPosition: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
+        default: "top" | "right" | "left";
     };
     closable: BooleanConstructor;
     addable: BooleanConstructor;
     sortable: BooleanConstructor;
-    sortType: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    sortType: import("vue-types").VueTypeDef<"replace" | "insert"> & {
+        default: "replace" | "insert";
     };
     labelHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -125,11 +146,14 @@ export declare const tabNavProps: {
         }>[]>;
         default: () => any[];
     };
+    tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
+        default: "top" | "right" | "left";
+    };
     closable: BooleanConstructor;
     addable: BooleanConstructor;
     sortable: BooleanConstructor;
-    sortType: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    sortType: import("vue-types").VueTypeDef<"replace" | "insert"> & {
+        default: "replace" | "insert";
     };
     labelHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -180,9 +204,7 @@ export declare const tabPanelProps: {
     sortable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    renderDirective: import("vue-types").VueTypeDef<string> & {
-        default: string;
-    };
+    renderDirective: import("vue-types").VueTypeDef<"if" | "show">;
     panel: (import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {

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

@@ -28,11 +28,14 @@ declare const _default: import("vue").DefineComponent<{
         }>[]>;
         default: () => any[];
     };
+    tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
+        default: "top" | "right" | "left";
+    };
     closable: BooleanConstructor;
     addable: BooleanConstructor;
     sortable: BooleanConstructor;
-    sortType: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    sortType: import("vue-types").VueTypeDef<"replace" | "insert"> & {
+        default: "replace" | "insert";
     };
     labelHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -65,23 +68,20 @@ declare const _default: import("vue").DefineComponent<{
     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}  触发的元素
+     * @param e {event}  触发的元素
      * @return {boolean}
      */
-    distinctRoots(el1: string, el2: string): boolean;
-    handleTabAdd(e: MouseEvent): void;
+    handleTabAdd(e: any): void;
     dragstart(index: number, $event: DragEvent): void;
     dragenter(index: any): void;
     dragend(): void;
-    drop(index: any, sortType: any): false;
+    drop(index: any, sortType: any): boolean;
     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<{
+}, 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;
@@ -111,11 +111,14 @@ declare const _default: import("vue").DefineComponent<{
         }>[]>;
         default: () => any[];
     };
+    tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
+        default: "top" | "right" | "left";
+    };
     closable: BooleanConstructor;
     addable: BooleanConstructor;
     sortable: BooleanConstructor;
-    sortType: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    sortType: import("vue-types").VueTypeDef<"replace" | "insert"> & {
+        default: "replace" | "insert";
     };
     labelHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -143,9 +146,9 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
 }>>, {
-    closable: boolean;
     active: string | number;
-    sortType: string;
+    closable: boolean;
+    sortType: "replace" | "insert";
     tabAdd: Function;
     tabChange: Function;
     tabRemove: Function;
@@ -154,6 +157,7 @@ declare const _default: import("vue").DefineComponent<{
     panels: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>[];
+    tabPosition: "top" | "right" | "left";
     addable: boolean;
     sortable: boolean;
     labelHeight: number;

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

@@ -21,9 +21,7 @@ declare const _default: import("vue").DefineComponent<{
     sortable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    renderDirective: import("vue-types").VueTypeDef<string> & {
-        default: string;
-    };
+    renderDirective: import("vue-types").VueTypeDef<"if" | "show">;
     panel: (import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
@@ -52,22 +50,19 @@ declare const _default: import("vue").DefineComponent<{
     sortable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    renderDirective: import("vue-types").VueTypeDef<string> & {
-        default: string;
-    };
+    renderDirective: import("vue-types").VueTypeDef<"if" | "show">;
     panel: (import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     });
 }>>, {
-    name: string | number;
     label: string | ((...args: any[]) => any);
-    closable: boolean;
-    visible: boolean;
+    name: string | number;
     disabled: boolean;
+    visible: boolean;
+    closable: boolean;
     panel: string | ((...args: any[]) => any);
     sortable: boolean;
-    renderDirective: string;
 }>;
 export default _default;

package/lib/tab/tab.css

@@ -1,7 +1,6 @@
 .bk-tab {
   position: relative;
   display: flex;
-  width: 100%;
 }
 .bk-tab--top {
   flex-direction: column;
@@ -10,18 +9,30 @@
   flex-direction: row-reverse;
 }
 .bk-tab-header {
+  position: relative;
   display: flex;
   color: #63656e;
 }
+.bk-tab--card-tab .bk-tab-header,
+.bk-tab--vertical-tab .bk-tab-header {
+  background: #F0F1F5;
+}
+.bk-tab--card-tab .bk-tab-header {
+  border-radius: 4px 4px 0;
+}
 .bk-tab-header > div {
   display: flex;
   margin-bottom: -1px;
   flex-wrap: nowrap;
 }
 .bk-tab--card .bk-tab-header > div,
-.bk-tab--border-card .bk-tab-header > div {
+.bk-tab--border-card .bk-tab-header > div,
+.bk-tab--vertical-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;
@@ -32,7 +43,8 @@
   overflow-y: auto;
 }
 .bk-tab--card .bk-tab-header-nav,
-.bk-tab--border-card .bk-tab-header-nav {
+.bk-tab--border-card .bk-tab-header-nav,
+.bk-tab--vertical-card .bk-tab-header-nav {
   border-left: 1px solid #dcdee5;
 }
 .bk-tab-header-nav::-webkit-scrollbar {
@@ -40,15 +52,37 @@
   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;
 }
 .bk-tab--right .bk-tab-header {
   border-left: 1px solid #dcdee5;
 }
+.bk-tab--vertical-tab .bk-tab-header {
+  border: 0;
+}
 .bk-tab--left .bk-tab-header,
 .bk-tab--right .bk-tab-header {
   flex-direction: column;
@@ -57,14 +91,17 @@
 .bk-tab--right .bk-tab-header > div {
   flex-direction: column;
 }
-.bk-tab--card .bk-tab-header {
+.bk-tab--card .bk-tab-header,
+.bk-tab--vertical-card .bk-tab-header {
   border-bottom: 1px solid #dcdee5;
 }
 .bk-tab--border-card .bk-tab-header {
-  background: #FAFBFD;
   border: solid #dcdee5;
   border-width: 1px 1px 1px 0;
 }
+.bk-tab--border-card .bk-tab-header {
+  background: #FAFBFD;
+}
 .bk-tab--unborder-card .bk-tab-header {
   border-bottom: 1px solid #dcdee5;
 }
@@ -93,18 +130,40 @@
 .bk-tab--left .bk-tab-header-item {
   text-align: right;
 }
-.bk-tab--card .bk-tab-header-item {
+.bk-tab--card .bk-tab-header-item,
+.bk-tab--vertical-card .bk-tab-header-item {
   border-top: 1px solid #dcdee5;
 }
 .bk-tab--card .bk-tab-header-item,
-.bk-tab--border-card .bk-tab-header-item {
+.bk-tab--border-card .bk-tab-header-item,
+.bk-tab--vertical-card .bk-tab-header-item {
   border-right: 1px solid #dcdee5;
   border-bottom: 1px solid #dcdee5;
 }
 .bk-tab--card .bk-tab-header-item:last-of-type,
-.bk-tab--border-card .bk-tab-header-item:last-of-type {
+.bk-tab--border-card .bk-tab-header-item:last-of-type,
+.bk-tab--vertical-card .bk-tab-header-item:last-of-type {
   border-right: none;
 }
+.bk-tab--card-tab .bk-tab-header-item {
+  position: relative;
+}
+.bk-tab--card-tab .bk-tab-header-item:not(:first-of-type):before,
+.bk-tab--card-tab .bk-tab-header-item:last-of-type:after {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  display: block;
+  width: 1px;
+  height: 16px;
+  margin-top: -8px;
+  background: #c4c6cc;
+  content: '';
+}
+.bk-tab--card-tab .bk-tab-header-item:last-of-type:after {
+  right: 0;
+  left: initial;
+}
 .bk-tab-header-operation .bk-tab-header-item {
   padding-right: 12px;
   padding-left: 12px;
@@ -118,16 +177,31 @@
   color: #3a84ff;
 }
 .bk-tab--card .bk-tab-header--active,
-.bk-tab--border-card .bk-tab-header--active {
+.bk-tab--border-card .bk-tab-header--active,
+.bk-tab--vertical-card .bk-tab-header--active {
+  background: white;
   border-bottom-color: white;
 }
 .bk-tab--unborder-card .bk-tab-header--active {
   border-bottom: 2px solid #3a84ff;
 }
-.bk-tab--left .bk-tab-header--active {
+.bk-tab--card-tab .bk-tab-header--active,
+.bk-tab--vertical-tab .bk-tab-header--active {
+  background: #fff;
+}
+.bk-tab--card-tab .bk-tab-header--active {
+  border-radius: 4px 4px 0 0;
+}
+.bk-tab--card-tab .bk-tab-header--active:after,
+.bk-tab--card-tab .bk-tab-header--active:before,
+.bk-tab--card-tab .bk-tab-header--active + .bk-tab-header-item:before {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+}
+.bk-tab--left:not(.bk-tab--vertical-tab) .bk-tab-header--active {
   border-right: 2px solid #3a84ff;
 }
-.bk-tab--right .bk-tab-header--active {
+.bk-tab--right:not(.bk-tab--vertical-tab) .bk-tab-header--active {
   border-left: 2px solid #3a84ff;
 }
 .bk-tab-header--disabled {
@@ -139,7 +213,8 @@
   flex: 1;
   padding: 10px;
 }
-.bk-tab--border-card .bk-tab-content {
+.bk-tab--border-card .bk-tab-content,
+.bk-tab--vertical-card .bk-tab-content {
   border: solid #dcdee5;
   border-width: 0 1px 1px;
 }

package/lib/tab/tab.d.ts

@@ -2,17 +2,17 @@ declare const _default: import("vue").DefineComponent<{
     active: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    type: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab";
     };
-    tabPosition: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
+        default: "top" | "right" | "left";
     };
     closable: BooleanConstructor;
     addable: BooleanConstructor;
     sortable: BooleanConstructor;
-    sortType: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    sortType: import("vue-types").VueTypeDef<"replace" | "insert"> & {
+        default: "replace" | "insert";
     };
     labelHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -52,27 +52,26 @@ 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, sortType: string): false;
+    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" | "remove-panel" | "sort-change" | "on-drag-tab" | "remove" | "update:active" | "sort")[], "change" | "drag" | "sort" | "add" | "add-panel" | "tab-change" | "remove-panel" | "sort-change" | "on-drag-tab" | "remove" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, 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;
+    type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab";
     };
-    tabPosition: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
+        default: "top" | "right" | "left";
     };
     closable: BooleanConstructor;
     addable: BooleanConstructor;
     sortable: BooleanConstructor;
-    sortType: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    sortType: import("vue-types").VueTypeDef<"replace" | "insert"> & {
+        default: "replace" | "insert";
     };
     labelHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -112,22 +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;
     "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;
+    type: "card" | "border-card" | "unborder-card" | "card-tab";
     active: string | number;
+    extCls: string;
+    closable: boolean;
     showHeader: boolean;
-    sortType: string;
+    sortType: "replace" | "insert";
+    tabPosition: "top" | "right" | "left";
     addable: boolean;
     sortable: boolean;
     labelHeight: number;
@@ -135,6 +135,5 @@ declare const _default: import("vue").DefineComponent<{
     validateActive: boolean;
     changeOnHover: boolean;
     changeOnHoverDelay: number;
-    tabPosition: string;
 }>;
 export default _default;