bkui-vue 0.0.1-beta.99 → 0.0.2-beta.1

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" | "card-grid"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
     };
-    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;
@@ -49,6 +49,16 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
+    activeBarSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    activeBarColor: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }, {
     isMounted: import("vue").Ref<boolean>;
     panels: import("vue").Ref<any[]>;
@@ -57,21 +67,21 @@ declare const _default: import("vue").DefineComponent<{
     tabRemove(index: number, panel: any): void;
     tabSort(dragTabIndex: number, dropTabIndex: number, sortType: string): boolean;
     tabDrag(dragTabIndex: number, dragEvent: DragEvent): void;
-}, 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<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("sort" | "change" | "drag" | "add" | "remove" | "add-panel" | "tab-change" | "remove-panel" | "sort-change" | "on-drag-tab" | "update:active")[], "sort" | "change" | "drag" | "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" | "card-grid"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
     };
-    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;
@@ -108,32 +118,44 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
+    activeBarSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    activeBarColor: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }>> & {
     onDrag?: (...args: any[]) => any;
     onChange?: (...args: any[]) => any;
     onRemove?: (...args: any[]) => any;
     onAdd?: (...args: any[]) => any;
+    onSort?: (...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;
     "onUpdate:active"?: (...args: any[]) => any;
-    onSort?: (...args: any[]) => any;
 }, {
-    type: string;
-    closable: boolean;
+    type: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
     extCls: string;
     active: string | number;
+    closable: boolean;
     showHeader: boolean;
-    sortType: string;
-    tabPosition: string;
-    addable: boolean;
+    sortType: "replace" | "insert";
     sortable: boolean;
+    activeBarColor: string;
+    activeBarSize: number;
+    tabPosition: "top" | "right" | "left";
+    addable: boolean;
     labelHeight: number;
     scrollStep: number;
     validateActive: boolean;
     changeOnHover: boolean;
     changeOnHoverDelay: number;
-}>;
+}, {}>;
 export default _default;

package/lib/tab/tab.less

@@ -6,14 +6,13 @@
 @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;
@@ -29,34 +28,76 @@
     display: flex;
     color: @tab-color;
 
-    > div {
-      display: flex;
-      margin-bottom: -1px;
-      flex-wrap: nowrap;
+    .@{bk-prefix}-tab--left & {
+      border-right: 1px solid @tab-border;
+    }
 
-      .@{tab-prefix}--card &, .@{tab-prefix}--border-card & {
-        border-right: 1px solid @tab-border;
+    .@{bk-prefix}-tab--right & {
+      border-left: 1px solid @tab-border;
+    }
+
+    .@{bk-prefix}-tab--vertical-tab & {
+      border: 0;
+    }
+
+    .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
+      flex-direction: column;
+
+      > div {
+        flex-direction: column;
       }
     }
 
-    &-navs {
-      flex: 1;
+    .@{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;
+    }
+
+    .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & {
+      border-bottom: 1px solid @tab-border;
+    }
+
+    .@{bk-prefix}-tab--border-card & {
+      border: solid @tab-border;
+      border-width: 1px 1px 1px 0;
+    }
+
+    .@{bk-prefix}-tab--border-card & {
+      background: @tab-header-bg;
+    }
+
+    .@{bk-prefix}-tab--unborder-card & {
+      border-bottom: 1px solid @tab-border;
+    }
+
+
+    > div {
+      display: flex;
+      flex-wrap: nowrap;
+      .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & ,.@{bk-prefix}-tab--border-card & {
+        margin-bottom: -1px;
+      }
     }
 
     &-nav {
+      position: relative;
+      //width: 100%;
 
-      .@{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;
       }
 
@@ -87,40 +128,17 @@
 
     &-operation {
       //flex: 0 0 auto;
-      .@{tab-prefix}-header-item {
+      .@{bk-prefix}-tab-header-item {
         padding: 0 12px;
       }
     }
 
-    .@{tab-prefix}--left & {
-      border-right: 1px solid @tab-border;
-    }
-
-    .@{tab-prefix}--right & {
-      border-left: 1px solid @tab-border;
-    }
-
-    .@{tab-prefix}--left &, .@{tab-prefix}--right & {
-      flex-direction: column;
-
-      > div {
-        flex-direction: column;
-      }
-    }
-
-    .@{tab-prefix}--card & {
-      border-bottom: 1px solid @tab-border;
-    }
-
-    .@{tab-prefix}--border-card & {
-      background: @tab-header-bg;
-      border: solid @tab-border;
-      border-width: 1px 1px 1px 0;
+    &-setting {
+      justify-self: flex-end;
+      margin-left: auto;
+      white-space: nowrap;
     }
 
-    .@{tab-prefix}--unborder-card & {
-      border-bottom: 1px solid @tab-border;
-    }
 
     &-item {
       display: flex;
@@ -129,52 +147,76 @@
       justify-content: center;
       align-items: center;
 
-      &:hover {
-        color: @tab-active;
-
-        .@{tab-prefix}-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;
 
-        &:last-of-type {
-          border-right: none;
+        //&:last-of-type {
+        //  border-right: none;
+        //}
+      }
+
+      .@{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--card-grid & {
+        height: 40px;
+        margin-right: 8px;
+        line-height: 40px;
+        background: #eaebf0;
+        border-radius: 4px 4px 0 0;
       }
 
-      .@{tab-prefix}-header-operation & {
+      .@{bk-prefix}-tab-header-operation & {
         padding-right: 12px;
         padding-left: 12px;
       }
 
-      &-close {
-        display: none;
-        font-size: 16px;
-        color: @tab-gray;
+
+      &:hover {
+        color: @tab-active;
+
+        .@{bk-prefix}-tab-header--close {
+          display: block;
+          margin-left: 5px;
+          color: @danger-color;
+        }
       }
 
     }
@@ -182,39 +224,84 @@
     &--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 & {
-        border-bottom: 2px solid @tab-active;
+
+      .@{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--card-grid & {
+        background: #fff;
       }
 
-      .@{tab-prefix}--left & {
+      /* 激活边框，跟随，不再用固定样式
+      //.@{bk-prefix}-tab--unborder-card & {
+      //  border-bottom: 2px solid @tab-active;
+      //}
+      .@{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;
       }
+      */
+
+    }
 
+    &--close {
+      display: none;
+      font-size: 16px;
+      color: @tab-gray;
     }
 
     &--disabled {
-      color: @tab-disable-color;
-      pointer-events: none;
       cursor: not-allowed;
+
+      &,
+      &:hover {
+        color: @tab-disable-color;
+      }
     }
   }
 
+  &-header-active-bar {
+    position: absolute;
+    width: 0;
+    height: 0;
+    background: @tab-active;
+    transition: all ease-in 300ms;
+  }
+
   &-content {
     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;
     }
+
+    .@{bk-prefix}-tab--card-grid & {
+      background: #fff;
+      border-radius: 0 4px 4px 4px;
+      box-shadow: 0 2px 4px 0 #1919290d;
+    }
   }
 
   &-panel {