bkui-vue 0.0.1-beta.36 → 0.0.1-beta.361

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;
+    type: "card" | "border-card" | "unborder-card" | "card-tab";
     extCls: string;
     active: string | number;
+    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;

package/lib/tab/tab.less

@@ -6,69 +6,67 @@
 @tab-header-bg: #FAFBFD;
 @tab-white: @white-color;
 @tab-gray: @light-gray;
+@tab-card-tab-bg: #F0F1F5;
+@tab-card-tab-divider: #c4c6cc;
 @tab-disable-color: #aaa;
-//.@{bk-prefix}-tab {
-@tab-prefix: bk-tab;
-//.@{tab-prefix} {
-.bk-tab {
+
+.@{bk-prefix}-tab {
   position: relative;
   display: flex;
-  width: 100%;
 
   &--top {
     flex-direction: column;
   }
 
-  &--left {
-
-  }
 
   &--right {
     flex-direction: row-reverse;
   }
 
-  &--card {
-
-  }
-
-  &--border-card {
-
-  }
-
-  &--unborder-card {
-
-  }
-
   &-header {
+    position: relative;
     display: flex;
     color: @tab-color;
 
+    .@{bk-prefix}-tab--card-tab &, .@{bk-prefix}-tab--vertical-tab & {
+      background: @tab-card-tab-bg;
+    }
+
+    .@{bk-prefix}-tab--card-tab & {
+      border-radius: 4px 4px 0;
+    }
+
     > div {
       display: flex;
       margin-bottom: -1px;
       flex-wrap: nowrap;
 
-      .@{tab-prefix}--card &, .@{tab-prefix}--border-card & {
+      .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
         border-right: 1px solid @tab-border;
       }
     }
 
+    &-navs {
+      flex: 1;
+    }
+
     &-nav {
-      .@{tab-prefix}--top & {
+
+      .@{bk-prefix}-tab--top & {
         overflow-x: auto;
         overflow-y: visible;
       }
 
-      .@{tab-prefix}--left &, .@{tab-prefix}--right & {
+      .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
         overflow-x: visible;
         overflow-y: auto;
       }
 
-      .@{tab-prefix}--card &, .@{tab-prefix}--border-card & {
+
+      .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
         border-left: 1px solid @tab-border;
       }
 
-      //flex: 0 1 auto;
       &::-webkit-scrollbar {
         display: none;
         width: 0;
@@ -76,23 +74,49 @@
       }
     }
 
+    &-next,
+    &-prev {
+      position: absolute;
+      top: 1px;
+      bottom: 1px;
+      width: 15px;
+      background: #fff;
+      content: '';
+    }
+
+    &-prev {
+      left: 1px;
+    }
+
+    &-next {
+      right: 1px;
+    }
+
     &-operation {
       //flex: 0 0 auto;
-      .@{tab-prefix}-header-item {
+      .@{bk-prefix}-tab-header-item {
         padding: 0 12px;
       }
     }
 
+    &-setting {
+      justify-self: flex-end;
+      margin-left: auto;
+    }
 
-    .@{tab-prefix}--left & {
+    .@{bk-prefix}-tab--left & {
       border-right: 1px solid @tab-border;
     }
 
-    .@{tab-prefix}--right & {
+    .@{bk-prefix}-tab--right & {
       border-left: 1px solid @tab-border;
     }
 
-    .@{tab-prefix}--left &, .@{tab-prefix}--right & {
+    .@{bk-prefix}-tab--vertical-tab & {
+      border: 0;
+    }
+
+    .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
       flex-direction: column;
 
       > div {
@@ -100,17 +124,20 @@
       }
     }
 
-    .@{tab-prefix}--card & {
+    .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & {
       border-bottom: 1px solid @tab-border;
     }
 
-    .@{tab-prefix}--border-card & {
-      background: @tab-header-bg;
+    .@{bk-prefix}-tab--border-card & {
       border: solid @tab-border;
       border-width: 1px 1px 1px 0;
     }
 
-    .@{tab-prefix}--unborder-card & {
+    .@{bk-prefix}-tab--border-card & {
+      background: @tab-header-bg;
+    }
+
+    .@{bk-prefix}-tab--unborder-card & {
       border-bottom: 1px solid @tab-border;
     }
 
@@ -120,37 +147,34 @@
       cursor: pointer;
       justify-content: center;
       align-items: center;
-      //line-height: 42px;
 
       &:hover {
         color: @tab-active;
 
-        .@{tab-prefix}-header-item-close {
+        .@{bk-prefix}-tab-header-item-close {
           display: block;
           margin-left: 5px;
           color: @danger-color;
         }
       }
 
-      .@{tab-prefix}--top & {
+      .@{bk-prefix}-tab--top & {
         padding: 0 20px;
-        //margin: -1px 0;
       }
 
-      .@{tab-prefix}--left &, .@{tab-prefix}--right & {
-        //margin: 0 -1px;
+      .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
         padding: 0 12px;
       }
 
-      .@{tab-prefix}--left & {
+      .@{bk-prefix}-tab--left & {
         text-align: right;
       }
 
-      .@{tab-prefix}--card & {
+      .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & {
         border-top: 1px solid @tab-border;
       }
 
-      .@{tab-prefix}--card &, .@{tab-prefix}--border-card & {
+      .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
         border-right: 1px solid @tab-border;
         border-bottom: 1px solid @tab-border;
 
@@ -159,7 +183,31 @@
         }
       }
 
-      .@{tab-prefix}-header-operation & {
+      .@{bk-prefix}-tab--card-tab & {
+        position: relative;
+
+        &:not(:first-of-type):before,
+        &:last-of-type:after {
+          position: absolute;
+          top: 50%;
+          left: 0;
+          display: block;
+          width: 1px;
+          height: 16px;
+          margin-top: -8px;
+          background: @tab-card-tab-divider;
+          content: '';
+        }
+
+        &:last-of-type:after {
+          right: 0;
+          left: initial;
+        }
+
+
+      }
+
+      .@{bk-prefix}-tab-header-operation & {
         padding-right: 12px;
         padding-left: 12px;
       }
@@ -175,26 +223,41 @@
     &--active {
       color: @tab-active;
 
-      .@{tab-prefix}--card &, .@{tab-prefix}--border-card & {
+      .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
+        background: @tab-white;
         border-bottom-color: @tab-white;
       }
 
-      .@{tab-prefix}--unborder-card & {
+      .@{bk-prefix}-tab--unborder-card & {
         border-bottom: 2px solid @tab-active;
       }
 
-      .@{tab-prefix}--left & {
+      .@{bk-prefix}-tab--card-tab &, .@{bk-prefix}-tab--vertical-tab & {
+        background: #fff;
+      }
+
+      .@{bk-prefix}-tab--card-tab & {
+        border-radius: 4px 4px 0 0;
+
+        &:after, &:before, & + .@{bk-prefix}-tab-header-item:before {
+          /* stylelint-disable-next-line declaration-no-important */
+          display: none !important;
+        }
+
+
+      }
+
+      .@{bk-prefix}-tab--left:not(.@{bk-prefix}-tab--vertical-tab) & {
         border-right: 2px solid @tab-active;
       }
 
-      .@{tab-prefix}--right & {
+      .@{bk-prefix}-tab--right:not(.@{bk-prefix}-tab--vertical-tab) & {
         border-left: 2px solid @tab-active;
       }
 
     }
 
     &--disabled {
-      //color: @disable-color;
       color: @tab-disable-color;
       pointer-events: none;
       cursor: not-allowed;
@@ -205,7 +268,7 @@
     flex: 1;
     padding: 10px;
 
-    .@{tab-prefix}--border-card & {
+    .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
       border: solid @tab-border;
       border-width: 0 1px 1px;
     }