bkui-vue 0.0.1-beta.45 → 0.0.1-beta.451

package/lib/tab/tab.css

@@ -1,7 +1,6 @@
 .bk-tab {
   position: relative;
   display: flex;
-  width: 100%;
 }
 .bk-tab--top {
   flex-direction: column;
@@ -10,17 +9,59 @@
   flex-direction: row-reverse;
 }
 .bk-tab-header {
+  position: relative;
   display: flex;
   color: #63656e;
 }
+.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;
+}
+.bk-tab--left .bk-tab-header > div,
+.bk-tab--right .bk-tab-header > div {
+  flex-direction: column;
+}
+.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--card .bk-tab-header,
+.bk-tab--vertical-card .bk-tab-header {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab--border-card .bk-tab-header {
+  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;
+}
 .bk-tab-header > div {
   display: flex;
-  margin-bottom: -1px;
   flex-wrap: nowrap;
 }
 .bk-tab--card .bk-tab-header > div,
+.bk-tab--vertical-card .bk-tab-header > div,
 .bk-tab--border-card .bk-tab-header > div {
-  border-right: 1px solid #dcdee5;
+  margin-bottom: -1px;
+}
+.bk-tab-header-nav {
+  position: relative;
 }
 .bk-tab--top .bk-tab-header-nav {
   overflow-x: auto;
@@ -32,7 +73,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,33 +82,28 @@
   width: 0;
   height: 0;
 }
-.bk-tab-header-operation .bk-tab-header-item {
-  padding: 0 12px;
+.bk-tab-header-next,
+.bk-tab-header-prev {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  width: 15px;
+  background: #fff;
+  content: '';
 }
-.bk-tab--left .bk-tab-header {
-  border-right: 1px solid #dcdee5;
+.bk-tab-header-prev {
+  left: 1px;
 }
-.bk-tab--right .bk-tab-header {
-  border-left: 1px solid #dcdee5;
+.bk-tab-header-next {
+  right: 1px;
 }
-.bk-tab--left .bk-tab-header,
-.bk-tab--right .bk-tab-header {
-  flex-direction: column;
-}
-.bk-tab--left .bk-tab-header > div,
-.bk-tab--right .bk-tab-header > div {
-  flex-direction: column;
-}
-.bk-tab--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-header-operation .bk-tab-header-item {
+  padding: 0 12px;
 }
-.bk-tab--unborder-card .bk-tab-header {
-  border-bottom: 1px solid #dcdee5;
+.bk-tab-header-setting {
+  justify-self: flex-end;
+  margin-left: auto;
+  white-space: nowrap;
 }
 .bk-tab-header-item {
   display: flex;
@@ -75,14 +112,6 @@
   justify-content: center;
   align-items: center;
 }
-.bk-tab-header-item:hover {
-  color: #3a84ff;
-}
-.bk-tab-header-item:hover .bk-tab-header-item-close {
-  display: block;
-  margin-left: 5px;
-  color: #ea3636;
-}
 .bk-tab--top .bk-tab-header-item {
   padding: 0 20px;
 }
@@ -93,56 +122,123 @@
 .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 {
-  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--card-grid .bk-tab-header-item {
+  height: 40px;
+  margin-right: 8px;
+  line-height: 40px;
+  background: #eaebf0;
+  border-radius: 4px 4px 0 0;
 }
 .bk-tab-header-operation .bk-tab-header-item {
   padding-right: 12px;
   padding-left: 12px;
 }
-.bk-tab-header-item-close {
-  display: none;
-  font-size: 16px;
-  color: #c4c6cc;
+.bk-tab-header-item:hover {
+  color: #3a84ff;
+}
+.bk-tab-header-item:hover .bk-tab-header--close {
+  display: block;
+  margin-left: 5px;
+  color: #ea3636;
 }
 .bk-tab-header--active {
   color: #3a84ff;
+  /* 激活边框，跟随，不再用固定样式
+      //.@{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;
+      }
+
+      .@{bk-prefix}-tab--right:not(.@{bk-prefix}-tab--vertical-tab) & {
+        border-left: 2px solid @tab-active;
+      }
+      */
 }
 .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--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--left .bk-tab-header--active {
-  border-right: 2px solid #3a84ff;
+.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--right .bk-tab-header--active {
-  border-left: 2px solid #3a84ff;
+.bk-tab--card-grid .bk-tab-header--active {
+  background: #fff;
+}
+.bk-tab-header--close {
+  display: none;
+  font-size: 16px;
+  color: #c4c6cc;
 }
 .bk-tab-header--disabled {
-  color: #aaa;
-  pointer-events: none;
   cursor: not-allowed;
 }
+.bk-tab-header--disabled,
+.bk-tab-header--disabled:hover {
+  color: #aaa;
+}
+.bk-tab-header-active-bar {
+  position: absolute;
+  width: 0;
+  height: 0;
+  background: #3a84ff;
+  transition: all ease-in 300ms;
+}
 .bk-tab-content {
   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;
 }
+.bk-tab--card-grid .bk-tab-content {
+  background: #fff;
+  border-radius: 0 4px 4px 4px;
+  box-shadow: 0 2px 4px 0 #1919290d;
+}
 .bk-tab-panel {
   height: 100%;
 }

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<"left" | "right" | "top"> & {
+        default: "left" | "right" | "top";
     };
     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,30 +49,39 @@ 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[]>;
-}, 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")[], "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<"left" | "right" | "top"> & {
+        default: "left" | "right" | "top";
     };
     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;
@@ -109,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;
     "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" | "card-grid";
     extCls: string;
     active: string | number;
+    closable: boolean;
     showHeader: boolean;
-    sortType: string;
-    addable: boolean;
+    sortType: "replace" | "insert";
     sortable: boolean;
+    activeBarColor: string;
+    activeBarSize: number;
+    tabPosition: "left" | "right" | "top";
+    addable: boolean;
     labelHeight: number;
     scrollStep: number;
     validateActive: boolean;
     changeOnHover: boolean;
     changeOnHoverDelay: number;
-    tabPosition: string;
 }>;
 export default _default;