bkui-vue 0.0.1-beta.98 → 0.0.1

package/lib/tab/props.d.ts

@@ -1,4 +1,26 @@
-import { PropType, VNode } from 'vue';
+import { ExtractPropTypes, 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<"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;
@@ -43,21 +65,57 @@ export declare const tabEventProps: {
         default: () => any;
     };
 };
-export declare const tabProps: {
-    active: import("vue-types").VueTypeDef<string | number> & {
+export declare const tabPanelProps: {
+    name: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    type: import("vue-types").VueTypeDef<string> & {
+    label: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
+    tips: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
-    tabPosition: import("vue-types").VueTypeDef<string> & {
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    visible: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    renderDirective: import("vue-types").VueTypeValidableDef<"show" | "if"> & {
+        default: "show" | "if";
+    };
+    panel: (import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
+};
+export type TabPanelProps = ExtractPropTypes<typeof tabPanelProps>;
+export declare const tabProps: {
+    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";
+    };
+    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;
@@ -94,6 +152,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,20 +187,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<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;
@@ -160,35 +241,3 @@ export declare const tabNavProps: {
         default: number;
     };
 };
-export declare const tabPanelProps: {
-    name: import("vue-types").VueTypeDef<string | number> & {
-        default: string | number;
-    };
-    label: (import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
-    });
-    closable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    };
-    visible: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    };
-    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    };
-    renderDirective: import("vue-types").VueTypeDef<string> & {
-        default: string;
-    };
-    panel: (import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
-    });
-};

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,20 +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<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;
@@ -63,6 +77,8 @@ 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>;
@@ -81,7 +97,7 @@ declare const _default: import("vue").DefineComponent<{
     drop(index: any, sortType: any): boolean;
     handleTabChange(name: string): void;
     handleTabRemove(index: number, panel: any): void;
-}, unknown, {}, {}, 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, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tabAdd: {
         type: FunctionConstructor;
         default: () => any;
@@ -105,20 +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<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;
@@ -146,24 +175,27 @@ 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";
+    sortable: boolean;
     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: string;
+    tabPosition: "top" | "right" | "left";
     addable: boolean;
-    sortable: boolean;
     labelHeight: number;
     scrollStep: number;
     validateActive: boolean;
     changeOnHover: boolean;
     changeOnHoverDelay: number;
-}>;
+}, {}>;
 export default _default;

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

@@ -7,6 +7,9 @@ declare const _default: import("vue").DefineComponent<{
     }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     });
+    tips: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
     closable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
@@ -21,15 +24,15 @@ 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<"show" | "if"> & {
+        default: "show" | "if";
     };
     panel: (import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     });
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
@@ -38,6 +41,9 @@ declare const _default: import("vue").DefineComponent<{
     }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     });
+    tips: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
     closable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
@@ -52,8 +58,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<"show" | "if"> & {
+        default: "show" | "if";
     };
     panel: (import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -61,13 +67,14 @@ declare const _default: import("vue").DefineComponent<{
         default: (...args: any[]) => any;
     });
 }>>, {
-    label: string | ((...args: any[]) => any);
     name: string | number;
+    label: string | ((...args: any[]) => any);
     disabled: boolean;
-    closable: boolean;
     visible: boolean;
+    tips: string;
+    closable: boolean;
+    renderDirective: "show" | "if";
     panel: string | ((...args: any[]) => any);
-    renderDirective: string;
     sortable: boolean;
-}>;
+}, {}>;
 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;
@@ -14,17 +13,55 @@
   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-navs {
-  flex: 1;
+.bk-tab-header-nav {
+  position: relative;
 }
 .bk-tab--top .bk-tab-header-nav {
   overflow-x: auto;
@@ -36,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 {
@@ -62,30 +100,10 @@
 .bk-tab-header-operation .bk-tab-header-item {
   padding: 0 12px;
 }
-.bk-tab--left .bk-tab-header {
-  border-right: 1px solid #dcdee5;
-}
-.bk-tab--right .bk-tab-header {
-  border-left: 1px solid #dcdee5;
-}
-.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--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;
@@ -94,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;
 }
@@ -112,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--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 .bk-tab-header--active {
-  border-right: 2px solid #3a84ff;
+.bk-tab--card-grid .bk-tab-header--active {
+  background: #fff;
 }
-.bk-tab--right .bk-tab-header--active {
-  border-left: 2px solid #3a84ff;
+.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%;
 }