bkui-vue 0.0.1-beta.410 → 0.0.1-beta.412

package/lib/tab/props.d.ts

@@ -115,6 +115,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: {
@@ -140,6 +150,19 @@ 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"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab";
+    };
+    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;

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,6 +23,19 @@ 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"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab";
+    };
+    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;
@@ -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>;
@@ -105,6 +121,19 @@ 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"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab";
+    };
+    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;
@@ -146,6 +175,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
 }>>, {
+    type: "card" | "border-card" | "unborder-card" | "card-tab";
     active: string | number;
     closable: boolean;
     sortType: "replace" | "insert";
@@ -154,6 +184,8 @@ declare const _default: import("vue").DefineComponent<{
     tabRemove: Function;
     tabSort: Function;
     tabDrag: Function;
+    activeBarColor: string;
+    activeBarSize: number;
     panels: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>[];

package/lib/tab/tab.css

@@ -22,16 +22,16 @@
 }
 .bk-tab-header > div {
   display: flex;
-  margin-bottom: -1px;
   flex-wrap: nowrap;
+  margin-bottom: -1px;
 }
 .bk-tab--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-header-nav {
+  position: relative;
 }
 .bk-tab--top .bk-tab-header-nav {
   overflow-x: auto;
@@ -175,6 +175,18 @@
 }
 .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,
@@ -182,9 +194,6 @@
   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;
@@ -198,17 +207,18 @@
   /* 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:not(.bk-tab--vertical-tab) .bk-tab-header--active {
-  border-left: 2px solid #3a84ff;
-}
 .bk-tab-header--disabled {
   color: #aaa;
   pointer-events: none;
   cursor: not-allowed;
 }
+.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;

package/lib/tab/tab.d.ts

@@ -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[]>;
@@ -108,6 +118,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;
+    };
 }>> & {
     onDrag?: (...args: any[]) => any;
     onChange?: (...args: any[]) => any;
@@ -127,6 +147,8 @@ declare const _default: import("vue").DefineComponent<{
     closable: boolean;
     showHeader: boolean;
     sortType: "replace" | "insert";
+    activeBarColor: string;
+    activeBarSize: number;
     tabPosition: "top" | "right" | "left";
     addable: boolean;
     sortable: boolean;

package/lib/tab/tab.less

@@ -38,20 +38,17 @@
 
     > div {
       display: flex;
-      margin-bottom: -1px;
+
       flex-wrap: nowrap;
+      margin-bottom: -1px;
 
       .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
         border-right: 1px solid @tab-border;
       }
     }
 
-    &-navs {
-      flex: 1;
-    }
-
     &-nav {
-
+      position: relative;
       .@{bk-prefix}-tab--top & {
         overflow-x: auto;
         overflow-y: visible;
@@ -228,9 +225,6 @@
         border-bottom-color: @tab-white;
       }
 
-      .@{bk-prefix}-tab--unborder-card & {
-        border-bottom: 2px solid @tab-active;
-      }
 
       .@{bk-prefix}-tab--card-tab &, .@{bk-prefix}-tab--vertical-tab & {
         background: #fff;
@@ -244,9 +238,12 @@
           display: none !important;
         }
 
-
       }
 
+      /* 激活边框，跟随，不再用固定样式
+      //.@{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;
       }
@@ -254,6 +251,7 @@
       .@{bk-prefix}-tab--right:not(.@{bk-prefix}-tab--vertical-tab) & {
         border-left: 2px solid @tab-active;
       }
+      */
 
     }
 
@@ -264,6 +262,14 @@
     }
   }
 
+  &-header-active-bar {
+    position: absolute;
+    width: 0;
+    height: 0;
+    background: @tab-active;
+    transition: all ease-in 300ms;
+  }
+
   &-content {
     flex: 1;
     padding: 10px;

package/lib/tab/tab.variable.css

@@ -142,16 +142,16 @@
 }
 .bk-tab-header > div {
   display: flex;
-  margin-bottom: -1px;
   flex-wrap: nowrap;
+  margin-bottom: -1px;
 }
 .bk-tab--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 var(--disable-color);
 }
-.bk-tab-header-navs {
-  flex: 1;
+.bk-tab-header-nav {
+  position: relative;
 }
 .bk-tab--top .bk-tab-header-nav {
   overflow-x: auto;
@@ -295,6 +295,18 @@
 }
 .bk-tab-header--active {
   color: var(--primary-color);
+  /* 激活边框，跟随，不再用固定样式
+      //.@{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,
@@ -302,9 +314,6 @@
   background: var(--white-color);
   border-bottom-color: var(--white-color);
 }
-.bk-tab--unborder-card .bk-tab-header--active {
-  border-bottom: 2px solid var(--primary-color);
-}
 .bk-tab--card-tab .bk-tab-header--active,
 .bk-tab--vertical-tab .bk-tab-header--active {
   background: #fff;
@@ -318,17 +327,18 @@
   /* 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 var(--primary-color);
-}
-.bk-tab--right:not(.bk-tab--vertical-tab) .bk-tab-header--active {
-  border-left: 2px solid var(--primary-color);
-}
 .bk-tab-header--disabled {
   color: #aaa;
   pointer-events: none;
   cursor: not-allowed;
 }
+.bk-tab-header-active-bar {
+  position: absolute;
+  width: 0;
+  height: 0;
+  background: var(--primary-color);
+  transition: all ease-in 300ms;
+}
 .bk-tab-content {
   flex: 1;
   padding: 10px;

package/lib/tree/index.d.ts

@@ -12,12 +12,12 @@ declare const BkTree: {
             };
             prefixIcon: any;
             children: string;
+            offsetLeft: number;
             emptyText: string;
             nodeKey: string;
             indent: number;
             levelLine: any;
             virtualRender: boolean;
-            offsetLeft: number;
             disableDrag: (...args: any[]) => any;
             disableDrop: (...args: any[]) => any;
             dragSort: boolean;
@@ -155,7 +155,7 @@ declare const BkTree: {
             onNodeDragOver?: (...args: any[]) => any;
             onNodeDragLeave?: (...args: any[]) => any;
             onNodeDrop?: (...args: any[]) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "search" | "draggable" | "lineHeight" | "selected" | "prefixIcon" | "children" | "emptyText" | "nodeKey" | "indent" | "levelLine" | "virtualRender" | "offsetLeft" | "disableDrag" | "disableDrop" | "dragSort" | "selectable" | "disabledFolderSelectable" | "showCheckbox" | "showNodeTypeIcon" | "autoCheckChildren" | "autoOpenParentNode" | "expandAll" | "nodeContentAction">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "search" | "draggable" | "lineHeight" | "selected" | "prefixIcon" | "children" | "offsetLeft" | "emptyText" | "nodeKey" | "indent" | "levelLine" | "virtualRender" | "disableDrag" | "disableDrop" | "dragSort" | "selectable" | "disabledFolderSelectable" | "showCheckbox" | "showNodeTypeIcon" | "autoCheckChildren" | "autoOpenParentNode" | "expandAll" | "nodeContentAction">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -314,12 +314,12 @@ declare const BkTree: {
             };
             prefixIcon: any;
             children: string;
+            offsetLeft: number;
             emptyText: string;
             nodeKey: string;
             indent: number;
             levelLine: any;
             virtualRender: boolean;
-            offsetLeft: number;
             disableDrag: (...args: any[]) => any;
             disableDrop: (...args: any[]) => any;
             dragSort: boolean;
@@ -626,12 +626,12 @@ declare const BkTree: {
     };
     prefixIcon: any;
     children: string;
+    offsetLeft: number;
     emptyText: string;
     nodeKey: string;
     indent: number;
     levelLine: any;
     virtualRender: boolean;
-    offsetLeft: number;
     disableDrag: (...args: any[]) => any;
     disableDrop: (...args: any[]) => any;
     dragSort: boolean;

package/lib/tree/tree.d.ts

@@ -262,12 +262,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     prefixIcon: any;
     children: string;
+    offsetLeft: number;
     emptyText: string;
     nodeKey: string;
     indent: number;
     levelLine: any;
     virtualRender: boolean;
-    offsetLeft: number;
     disableDrag: (...args: any[]) => any;
     disableDrop: (...args: any[]) => any;
     dragSort: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "0.0.1-beta.410",
+  "version": "0.0.1-beta.412",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",