bkui-vue 0.0.1-beta.43 → 0.0.1-beta.431

package/lib/tab/props.d.ts

@@ -1,4 +1,26 @@
 import { PropType, VNode } from 'vue';
+export declare enum TabTypeEnum {
+    CARD = "card",
+    BORDER_CARD = "border-card",
+    UNBORDER_CARD = "unborder-card",
+    CARD_TAB = "card-tab",
+    CARD_GRID = "card-grid"
+}
+export declare enum PositionEnum {
+    LEFT = "left",
+    RIGHT = "right",
+    TOP = "top"
+}
+export declare const TabPositionType: import("vue-types").VueTypeDef<"left" | "right" | "top"> & {
+    default: "left" | "right" | "top";
+};
+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 +69,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" | "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;
@@ -94,6 +116,16 @@ export declare const tabProps: {
     } & {
         default: number;
     };
+    activeBarSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    activeBarColor: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 };
 export declare const tabNavProps: {
     tabAdd: {
@@ -119,17 +151,33 @@ export declare const tabNavProps: {
     active: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
+    type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab" | "card-grid"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
+    };
+    activeBarColor: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    activeBarSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
     panels: {
         type: PropType<VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>[]>;
         default: () => any[];
     };
+    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;
@@ -180,8 +228,8 @@ export declare const tabPanelProps: {
     sortable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    renderDirective: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+        default: "if" | "show";
     };
     panel: (import("vue-types").VueTypeValidableDef<string> & {
         default: string;

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

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     tabAdd: {
         type: FunctionConstructor;
@@ -22,17 +23,33 @@ declare const _default: import("vue").DefineComponent<{
     active: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
+    type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab" | "card-grid"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
+    };
+    activeBarColor: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    activeBarSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
     panels: {
         type: import("vue").PropType<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>[]>;
         default: () => any[];
     };
+    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;
@@ -60,28 +77,27 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
 }, {
+    activeRef: import("vue").Ref<HTMLElement>;
+    activeBarStyle: import("vue").ComputedRef<CSSProperties>;
     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}  触发的元素
+     * @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;
@@ -105,17 +121,33 @@ declare const _default: import("vue").DefineComponent<{
     active: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
+    type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab" | "card-grid"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
+    };
+    activeBarColor: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    activeBarSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
     panels: {
         type: import("vue").PropType<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>[]>;
         default: () => any[];
     };
+    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;
@@ -143,17 +175,21 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
 }>>, {
-    closable: boolean;
+    type: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
     active: string | number;
-    sortType: string;
+    closable: boolean;
+    sortType: "replace" | "insert";
     tabAdd: Function;
     tabChange: Function;
     tabRemove: Function;
     tabSort: Function;
     tabDrag: Function;
+    activeBarColor: string;
+    activeBarSize: number;
     panels: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>[];
+    tabPosition: "left" | "right" | "top";
     addable: boolean;
     sortable: boolean;
     labelHeight: number;

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

@@ -21,8 +21,8 @@ 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").VueTypeValidableDef<"if" | "show"> & {
+        default: "if" | "show";
     };
     panel: (import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -52,8 +52,8 @@ 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").VueTypeValidableDef<"if" | "show"> & {
+        default: "if" | "show";
     };
     panel: (import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -63,11 +63,11 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     name: string | number;
     label: string | ((...args: any[]) => any);
-    closable: boolean;
-    visible: boolean;
     disabled: boolean;
+    visible: boolean;
+    closable: boolean;
+    renderDirective: "if" | "show";
     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,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%;
 }