bkui-vue 0.0.1-beta.64 → 0.0.1-beta.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -97,7 +97,7 @@
97
97
  @sizeBtnMinWidth: '@{value}BtnMinWidth';
98
98
  @sizeBtnHeight: '@{value}BtnHeight';
99
99
  @sizeBtnPadding: '@{value}BtnPadding';
100
- &.@{bk-prefix}-button-@{value} {
100
+ &.@{bk-prefix}-button-@{value} {
101
101
  min-width: @@sizeBtnMinWidth;
102
102
  height: @@sizeBtnHeight;
103
103
  line-height: @@sizeBtnHeight;
@@ -19,6 +19,9 @@
19
19
  .bk-fade-transtion .bk-fade-leave-to {
20
20
  opacity: 0;
21
21
  }
22
+ .bk-select .bk-popover {
23
+ display: block;
24
+ }
22
25
  .bk-select .mr5 {
23
26
  margin-right: 5px;
24
27
  }
@@ -35,6 +35,10 @@
35
35
  margin-left: @marginLeft;
36
36
  }
37
37
 
38
+ .bk-popover {
39
+ display: block;
40
+ }
41
+
38
42
  .mr5 {
39
43
  .mr(5px)
40
44
  }
@@ -118,6 +118,9 @@
118
118
  .bk-fade-transtion .bk-fade-leave-to {
119
119
  opacity: 0;
120
120
  }
121
+ .bk-select .bk-popover {
122
+ display: block;
123
+ }
121
124
  .bk-select .mr5 {
122
125
  margin-right: 5px;
123
126
  }
@@ -10,6 +10,7 @@ declare const BkTab: {
10
10
  active: string | number;
11
11
  showHeader: boolean;
12
12
  sortType: string;
13
+ tabPosition: string;
13
14
  addable: boolean;
14
15
  sortable: boolean;
15
16
  labelHeight: number;
@@ -17,7 +18,6 @@ declare const BkTab: {
17
18
  validateActive: boolean;
18
19
  changeOnHover: boolean;
19
20
  changeOnHoverDelay: number;
20
- tabPosition: string;
21
21
  }> & Omit<Readonly<import("vue").ExtractPropTypes<{
22
22
  active: import("vue-types").VueTypeDef<string | number> & {
23
23
  default: string | number;
@@ -81,7 +81,7 @@ declare const BkTab: {
81
81
  onRemove?: (...args: any[]) => any;
82
82
  "onUpdate:active"?: (...args: any[]) => any;
83
83
  onSort?: (...args: any[]) => any;
84
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "closable" | "extCls" | "active" | "showHeader" | "sortType" | "addable" | "sortable" | "labelHeight" | "scrollStep" | "validateActive" | "changeOnHover" | "changeOnHoverDelay" | "tabPosition">;
84
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "closable" | "extCls" | "active" | "showHeader" | "sortType" | "tabPosition" | "addable" | "sortable" | "labelHeight" | "scrollStep" | "validateActive" | "changeOnHover" | "changeOnHoverDelay">;
85
85
  $attrs: {
86
86
  [x: string]: unknown;
87
87
  };
@@ -161,19 +161,19 @@ declare const BkTab: {
161
161
  }, {
162
162
  isMounted: import("vue").Ref<boolean>;
163
163
  panels: import("vue").Ref<any[]>;
164
- }, unknown, {}, {
165
164
  tabAdd(e: MouseEvent): void;
166
165
  tabChange(name: string): void;
167
166
  tabRemove(index: number, panel: any): void;
168
- tabSort(dragTabIndex: number, dropTabIndex: number, sortType: string): false;
167
+ tabSort(dragTabIndex: number, dropTabIndex: number, sortType: string): boolean;
169
168
  tabDrag(dragTabIndex: number, dragEvent: DragEvent): void;
170
- }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "drag" | "add" | "add-panel" | "tab-change" | "remove-panel" | "sort-change" | "on-drag-tab" | "remove" | "update:active" | "sort")[], string, {
169
+ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "drag" | "add" | "add-panel" | "tab-change" | "remove-panel" | "sort-change" | "on-drag-tab" | "remove" | "update:active" | "sort")[], string, {
171
170
  type: string;
172
171
  closable: boolean;
173
172
  extCls: string;
174
173
  active: string | number;
175
174
  showHeader: boolean;
176
175
  sortType: string;
176
+ tabPosition: string;
177
177
  addable: boolean;
178
178
  sortable: boolean;
179
179
  labelHeight: number;
@@ -181,7 +181,6 @@ declare const BkTab: {
181
181
  validateActive: boolean;
182
182
  changeOnHover: boolean;
183
183
  changeOnHoverDelay: number;
184
- tabPosition: string;
185
184
  }> & {
186
185
  beforeCreate?: (() => void) | (() => void)[];
187
186
  created?: (() => void) | (() => void)[];
@@ -268,13 +267,12 @@ declare const BkTab: {
268
267
  } & import("vue").ShallowUnwrapRef<{
269
268
  isMounted: import("vue").Ref<boolean>;
270
269
  panels: import("vue").Ref<any[]>;
271
- }> & {} & {} & {
272
270
  tabAdd(e: MouseEvent): void;
273
271
  tabChange(name: string): void;
274
272
  tabRemove(index: number, panel: any): void;
275
- tabSort(dragTabIndex: number, dropTabIndex: number, sortType: string): false;
273
+ tabSort(dragTabIndex: number, dropTabIndex: number, sortType: string): boolean;
276
274
  tabDrag(dragTabIndex: number, dragEvent: DragEvent): void;
277
- } & import("vue").ComponentCustomProperties;
275
+ }> & {} & {} & import("vue").ComponentCustomProperties;
278
276
  __isFragment?: never;
279
277
  __isTeleport?: never;
280
278
  __isSuspense?: never;
@@ -344,19 +342,19 @@ declare const BkTab: {
344
342
  }, {
345
343
  isMounted: import("vue").Ref<boolean>;
346
344
  panels: import("vue").Ref<any[]>;
347
- }, unknown, {}, {
348
345
  tabAdd(e: MouseEvent): void;
349
346
  tabChange(name: string): void;
350
347
  tabRemove(index: number, panel: any): void;
351
- tabSort(dragTabIndex: number, dropTabIndex: number, sortType: string): false;
348
+ tabSort(dragTabIndex: number, dropTabIndex: number, sortType: string): boolean;
352
349
  tabDrag(dragTabIndex: number, dragEvent: DragEvent): void;
353
- }, 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", {
350
+ }, unknown, {}, {}, 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", {
354
351
  type: string;
355
352
  closable: boolean;
356
353
  extCls: string;
357
354
  active: string | number;
358
355
  showHeader: boolean;
359
356
  sortType: string;
357
+ tabPosition: string;
360
358
  addable: boolean;
361
359
  sortable: boolean;
362
360
  labelHeight: number;
@@ -364,7 +362,6 @@ declare const BkTab: {
364
362
  validateActive: boolean;
365
363
  changeOnHover: boolean;
366
364
  changeOnHoverDelay: number;
367
- tabPosition: string;
368
365
  }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin & Readonly<{
369
366
  TabPanel: import("vue").DefineComponent<{
370
367
  name: import("vue-types").VueTypeDef<string | number> & {
package/lib/tab/index.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../icon/"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../icon/"],t);else{var n="object"==typeof exports?t(require("../shared"),require("vue"),require("../icon/")):t(e["../shared"],e.vue,e["../icon/"]);for(var a in n)("object"==typeof exports?exports:e)[a]=n[a]}}(self,((e,t,n)=>(()=>{"use strict";var a={7685:e=>{e.exports=n},4212:t=>{t.exports=e},748:e=>{e.exports=t}},o={};function r(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={exports:{}};return a[e](n,n.exports,r),n.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};return(()=>{r.r(s),r.d(s,{BkTab:()=>u,BkTabPanel:()=>c,default:()=>b});var e=r(4212),t=r(748),n={tabAdd:{type:Function,default:function(){return{}}},tabChange:{type:Function,default:function(e){return e}},tabRemove:{type:Function,default:function(e){return e}},tabSort:{type:Function,default:function(){return{}}},tabDrag:{type:Function,default:function(){return{}}}},a={active:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.string]).def(""),type:e.PropTypes.commonType(["card","border-card","unborder-card"],"type").def("border-card"),tabPosition:e.PropTypes.commonType(["left","right","top"],"position").def("top"),closable:Boolean,addable:Boolean,sortable:Boolean,sortType:e.PropTypes.commonType(["replace","insert","top"],"sortType").def("replace"),labelHeight:e.PropTypes.number.def(50),scrollStep:e.PropTypes.number.def(200),extCls:e.PropTypes.string.def(""),validateActive:e.PropTypes.bool.def(!0),showHeader:e.PropTypes.bool.def(!0),changeOnHover:e.PropTypes.bool.def(!1),changeOnHoverDelay:e.PropTypes.number.def(1e3)},o=Object.assign({active:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.string]).def(""),panels:{type:Array,default:function(){return[]}},closable:Boolean,addable:Boolean,sortable:Boolean,sortType:e.PropTypes.commonType(["replace","insert","top"],"sortType").def("replace"),labelHeight:e.PropTypes.number.def(50),scrollStep:e.PropTypes.number.def(200),validateActive:e.PropTypes.bool.def(!0),changeOnHover:e.PropTypes.bool.def(!1),changeOnHoverDelay:e.PropTypes.number.def(1e3)},n),i={name:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.string]).def(""),label:e.PropTypes.string||e.PropTypes.func,closable:e.PropTypes.bool,visible:e.PropTypes.bool.def(!0),disabled:e.PropTypes.bool,sortable:e.PropTypes.bool,renderDirective:e.PropTypes.commonType(["if","show"],"render").def("show"),panel:e.PropTypes.string||e.PropTypes.func},l=r(7685);const d=(0,t.defineComponent)({name:"TabNav",props:o,setup:function(e){return{navs:(0,t.computed)((function(){if(!Array.isArray(e.panels)||!e.panels.length)return[];var n=[],a=!1;return e.panels.filter((function(o,r){if(!o.props)return null;var s=o.props,i=s.name,l=s.label,d=s.closable,p=s.visible,c=s.disabled,u=s.sortable;return!!p&&(e.active===i&&(a=!0),n.push({name:i,closable:d,visible:p,disabled:c,sortable:u,tabLabel:function(e){return o.slots.label?(0,t.h)(o.slots.label):[void 0,""].includes(e)?"选项卡".concat(r+1):"string"==typeof e?e:"function"==typeof e?(0,t.h)(e):e}(l)}),!0)})),!a&&e.validateActive&&e.panels[0].props&&e.tabChange(e.panels[0].props.name),n})),dragenterIndex:(0,t.ref)(-1),dragStartIndex:(0,t.ref)(-1),draggingEle:(0,t.ref)(""),guid:Math.random().toString(16).substr(4)+Math.random().toString(16).substr(4)}},methods:{distinctRoots:function(e,t){return e===t},handleTabAdd:function(e){this.tabAdd(e)},dragstart:function(e,t){this.dragStartIndex=e,this.draggingEle=this.guid,Object.assign(t.dataTransfer,{effectAllowed:"move"}),this.tabDrag(e,t)},dragenter:function(e){this.distinctRoots(this.draggingEle,this.guid)&&(this.dragenterIndex=e)},dragend:function(){this.dragenterIndex=-1,this.dragStartIndex=-1,this.draggingEle=null},drop:function(e,t){if(!this.distinctRoots(this.draggingEle,this.guid))return!1;this.tabSort(this.dragStartIndex,e,t)},handleTabChange:function(e){this.tabChange(e)},handleTabRemove:function(e,t){this.tabRemove(e,t)}},render:function(){var e,n,a,o,r,s=this,i=this.active,d=this.closable,p=this.addable,c=this.sortable,u=this.sortType,b=this.labelHeight,f=this.dragstart,h=this.dragenter,v=this.dragend,g=this.drop;return(0,t.createVNode)("div",{style:{lineHeight:"".concat(b,"px")},class:"bk-tab-header"},[(0,t.createVNode)("div",{class:"bk-tab-header-nav"},[s.navs.map((function(e,n){if(!e)return null;var a,o=e.name,r=e.disabled,p=e.tabLabel,b=function(e,t){return e||t};return(0,t.createVNode)("div",{key:o,onClick:function(){return s.handleTabChange(o)},draggable:b(e.sortable,c),onDragstart:function(e){return f(n,e)},onDragenter:function(e){e.preventDefault(),h(n)},onDragleave:function(e){e.preventDefault()},onDragover:function(e){e.preventDefault()},onDragend:function(e){e.preventDefault(),v()},onDrop:function(e){e.preventDefault(),g(n,u)},class:(a=["bk-tab-header-item"],r&&a.push("bk-tab-header--disabled"),i===o&&a.push("bk-tab-header--active"),a.join(" "))},[(0,t.createVNode)("div",null,[p]),b(e.closable,d)&&(0,t.createVNode)(l.Close,{class:"bk-tab-header-item-close",onClick:function(){return s.handleTabRemove(n,e)}},null)])}))]),(r=[],"function"==typeof s.$slots.add?r.push(null===(n=(e=s.$slots).add)||void 0===n?void 0:n.call(e,t.h)):p&&r.push((0,t.createVNode)("div",{onClick:s.handleTabAdd},[(0,t.createVNode)(l.Plus,{width:26,height:26},null)])),"function"==typeof s.$slots.setting&&r.push(null===(o=(a=s.$slots).setting)||void 0===o?void 0:o.call(a,t.h)),r.length?(0,t.createVNode)("div",{class:"bk-tab-header-operation"},[r.map((function(e,n){return(0,t.createVNode)("div",{class:"bk-tab-header-item",key:n},[e])}))]):null)])}}),p=(0,t.defineComponent)({name:"Tab",components:{TabNav:d},props:a,emits:["add-panel","tab-change","remove-panel","sort-change","on-drag-tab","add","change","remove","update:active","sort","drag"],setup:function(e,n){var a=n.slots,o=(0,t.ref)(!1),r=(0,t.ref)([]),s=(0,t.getCurrentInstance)();"function"==typeof a.panel&&(r.value=a.panel()),"function"==typeof a.default&&(r.value=a.default());var i=function e(n){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],o=n.children;return(o||[]).forEach((function(n){var o=n.type;"TabPanel"===(o=o.name||o)&&n.component?a.push(n.component):o!==t.Fragment&&"template"!==o||e(n,a)})),a},l=function(){if(a.default){var e=s.subTree.children[1].children;if(!e)return;var t=e[0],n=i(t);(n.length!==r.value.length||!n.every((function(e,t){return e.uid===r.value[t].uid})))&&(r.value=n)}};return(0,t.onMounted)((function(){l(),o.value=!0})),(0,t.onUpdated)((function(){l()})),{isMounted:o,panels:r}},methods:{tabAdd:function(e){this.$emit("add",{e}),this.$emit("add-panel",{e})},tabChange:function(e){this.$emit("change",e),this.$emit("tab-change",e),this.$emit("update:active",e)},tabRemove:function(e,t){this.$emit("remove",e,t),this.$emit("remove-panel",e,t)},tabSort:function(e,t,n){if("insert"===n)if(e<t)this.panels.splice(t+1,0,this.panels[e]),this.panels.splice(e,1);else{if(!(e>t))return!1;this.panels.splice(t,0,this.panels[e]),this.panels.splice(e+1,1)}else{var a=this.panels[t];this.panels[t]=this.panels[e],this.panels[e]=a}this.$emit("sort",e,t,n),this.$emit("sort-change",e,t,n)},tabDrag:function(e,t){this.$emit("drag",e,t),this.$emit("on-drag-tab",e,t)}},render:function(){var e,n,a,o,r=this;return(0,t.createVNode)("div",{class:"top"===r.tabPosition?"bk-tab bk-tab--".concat(r.tabPosition," bk-tab--").concat(r.type," ").concat(r.extCls):"bk-tab bk-tab--".concat(r.tabPosition," ").concat(r.extCls)},[(a=r.panels,o={panels:a,active:r.active,type:r.type,closable:r.closable,addable:r.addable,sortable:r.sortable,sortType:r.sortType,labelHeight:r.labelHeight,scrollStep:r.scrollStep,validateActive:r.validateActive,changeOnHover:r.changeOnHover,changeOnHoverDelay:r.changeOnHoverDelay,tabAdd:r.tabAdd,tabChange:r.tabChange,tabRemove:r.tabRemove,tabSort:r.tabSort,tabDrag:r.tabDrag},a&&Array.isArray(a)?(0,t.createVNode)(d,o,r.$slots):null),(0,t.createVNode)("div",{class:"bk-tab-content"},[null===(n=(e=this.$slots).default)||void 0===n?void 0:n.call(e)])])}}),c=(0,t.defineComponent)({name:"TabPanel",props:i,render:function(){var e=this,n=this.name===this.$parent.active;return(0,t.withDirectives)((0,t.createVNode)("div",{ref:"content",class:"bk-tab-panel"},[!e.visible||"if"===e.renderDirective&&!n?null:"function"==typeof e.panel?e.panel(t.h):"function"==typeof e.$slots.default?e.$slots.default(null):"function"==typeof e.$slots.panel?e.$slots.panel(null):null]),[[t.vShow,n]])}});var u=(0,e.withInstallProps)(p,{TabPanel:c});const b=u})(),s})()));
1
+ !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../icon/"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../icon/"],t);else{var n="object"==typeof exports?t(require("../shared"),require("vue"),require("../icon/")):t(e["../shared"],e.vue,e["../icon/"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(self,((e,t,n)=>(()=>{"use strict";var r={7685:e=>{e.exports=n},4212:t=>{t.exports=e},748:e=>{e.exports=t}},a={};function o(e){var t=a[e];if(void 0!==t)return t.exports;var n=a[e]={exports:{}};return r[e](n,n.exports,o),n.exports}o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{o.r(l),o.d(l,{BkTab:()=>b,BkTabPanel:()=>u,default:()=>f});var e=o(4212);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var n=o(748),r={tabAdd:{type:Function,default:function(){return{}}},tabChange:{type:Function,default:function(e){return e}},tabRemove:{type:Function,default:function(e){return e}},tabSort:{type:Function,default:function(){return{}}},tabDrag:{type:Function,default:function(){return{}}}},a={active:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.string]).def(""),type:e.PropTypes.commonType(["card","border-card","unborder-card"],"type").def("border-card"),tabPosition:e.PropTypes.commonType(["left","right","top"],"position").def("top"),closable:Boolean,addable:Boolean,sortable:Boolean,sortType:e.PropTypes.commonType(["replace","insert","top"],"sortType").def("replace"),labelHeight:e.PropTypes.number.def(50),scrollStep:e.PropTypes.number.def(200),extCls:e.PropTypes.string.def(""),validateActive:e.PropTypes.bool.def(!0),showHeader:e.PropTypes.bool.def(!0),changeOnHover:e.PropTypes.bool.def(!1),changeOnHoverDelay:e.PropTypes.number.def(1e3)},i=Object.assign({active:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.string]).def(""),panels:{type:Array,default:function(){return[]}},tabPosition:e.PropTypes.commonType(["left","right","top"],"position").def("top"),closable:Boolean,addable:Boolean,sortable:Boolean,sortType:e.PropTypes.commonType(["replace","insert","top"],"sortType").def("replace"),labelHeight:e.PropTypes.number.def(50),scrollStep:e.PropTypes.number.def(200),validateActive:e.PropTypes.bool.def(!0),changeOnHover:e.PropTypes.bool.def(!1),changeOnHoverDelay:e.PropTypes.number.def(1e3)},r),s={name:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.string]).def(""),label:e.PropTypes.string||e.PropTypes.func,closable:e.PropTypes.bool,visible:e.PropTypes.bool.def(!0),disabled:e.PropTypes.bool,sortable:e.PropTypes.bool,renderDirective:e.PropTypes.commonType(["if","show"],"render").def("show"),panel:e.PropTypes.string||e.PropTypes.func},p=o(7685);const c=(0,n.defineComponent)({name:"TabNav",props:i,setup:function(e){var t=(0,n.computed)((function(){if(!Array.isArray(e.panels)||!e.panels.length)return[];var t=[],r=!1;return e.panels.filter((function(a,o){if(!a.props)return null;var l=a.props,i=l.name,s=l.label,p=l.closable,c=l.visible,d=l.disabled,u=l.sortable;return!!c&&(e.active===i&&(r=!0),t.push({name:i,closable:p,visible:c,disabled:d,sortable:u,tabLabel:function(e){return a.slots.label?(0,n.h)(a.slots.label):[void 0,""].includes(e)?"选项卡".concat(o+1):"string"==typeof e?e:"function"==typeof e?(0,n.h)(e):e}(s)}),!0)})),!r&&e.validateActive&&e.panels[0].props&&e.tabChange(e.panels[0].props.name),t})),r=(0,n.ref)(-1),a=(0,n.ref)(-1),o=(0,n.ref)(""),l=function(e,t){return e===t},i={handleTabAdd:function(t){e.tabAdd(t)},dragstart:function(t,n){a.value=t,o.value=e.guid,Object.assign(n.dataTransfer,{effectAllowed:"move"}),e.tabDrag(t,n)},dragenter:function(t){l(o.value,e.guid)&&(r.value=t)},dragend:function(){r.value=-1,a.value=-1,o.value=null},drop:function(t,n){if(!l(o.value,e.guid))return!1;e.tabSort(a.value,t,n)},handleTabChange:function(t){e.tabChange(t)},handleTabRemove:function(t,n){e.tabRemove(t,n)}};return Object.assign(Object.assign({},i),{navs:t,dragenterIndex:r,dragStartIndex:a,draggingEle:o,guid:Math.random().toString(16).substr(4)+Math.random().toString(16).substr(4)})},render:function(){var e,t,r,a,o,l=this,i=this.active,s=this.closable,c=this.addable,d=this.sortable,u=this.sortType,b=this.labelHeight,f=this.dragstart,v=this.dragenter,y=this.dragend,h=this.drop;return(0,n.createVNode)("div",{style:{lineHeight:"".concat(b,"px")},class:"bk-tab-header"},[(0,n.createVNode)("div",{class:"bk-tab-header-nav"},[l.navs.map((function(e,t){if(!e)return null;var r,a=e.name,o=e.disabled,c=e.tabLabel,b=function(e,t){return e||t};return(0,n.createVNode)("div",{key:a,onClick:function(){return l.handleTabChange(a)},draggable:b(e.sortable,d),onDragstart:function(e){return f(t,e)},onDragenter:function(e){e.preventDefault(),v(t)},onDragleave:function(e){e.preventDefault()},onDragover:function(e){e.preventDefault()},onDragend:function(e){e.preventDefault(),y()},onDrop:function(e){e.preventDefault(),h(t,u)},class:(r=["bk-tab-header-item"],o&&r.push("bk-tab-header--disabled"),i===a&&r.push("bk-tab-header--active"),r.join(" "))},[(0,n.createVNode)("div",null,[c]),b(e.closable,s)&&(0,n.createVNode)(p.Close,{class:"bk-tab-header-item-close",onClick:function(){return l.handleTabRemove(t,e)}},null)])}))]),(o=[],"function"==typeof l.$slots.add?o.push(null===(t=(e=l.$slots).add)||void 0===t?void 0:t.call(e,n.h)):c&&o.push((0,n.createVNode)("div",{onClick:l.handleTabAdd},[(0,n.createVNode)(p.Plus,{width:26,height:26},null)])),"function"==typeof l.$slots.setting&&o.push(null===(a=(r=l.$slots).setting)||void 0===a?void 0:a.call(r,n.h)),o.length?(0,n.createVNode)("div",{class:"bk-tab-header-operation"},[o.map((function(e,t){return(0,n.createVNode)("div",{class:"bk-tab-header-item",key:t},[e])}))]):null)])}}),d=(0,n.defineComponent)({name:"Tab",components:{TabNav:c},props:a,emits:["add-panel","tab-change","remove-panel","sort-change","on-drag-tab","add","change","remove","update:active","sort","drag"],setup:function(e,r){var a=r.slots,o=r.emit,l=(0,n.ref)(!1),i=(0,n.ref)([]),s=(0,n.getCurrentInstance)(),p=function e(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],a=t.children;return(a||[]).forEach((function(t){var a=t.type;"TabPanel"===(a=a.name||a)&&t.component?r.push(t.component):a!==n.Fragment&&"template"!==a||e(t,r)})),r},c=function(){if(a.default){var e=s.subTree.children[1].children;if(!e)return;var t=e[0],n=p(t);n.length!==i.value.length&&(i.value=n)}};(0,n.onMounted)((function(){c(),l.value=!0})),(0,n.onUpdated)((function(){c()}));var d={tabAdd:function(e){o("add",{e}),o("add-panel",{e})},tabChange:function(e){o("change",e),o("tab-change",e),o("update:active",e)},tabRemove:function(e,t){o("remove",e,t),o("remove-panel",e,t)},tabSort:function(e,n,r){var a,l=i.value;if("insert"===r)if(e<n)l.splice(n+1,0,i[e]),l.splice(e,1);else{if(!(e>n))return!1;l.splice(n,0,i[e]),l.splice(e+1,1)}else{var s=l[n];l[n]=l[e],l[e]=s}i.value=function(e){if(Array.isArray(e))return t(e)}(a=l)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(a)||function(e,n){if(e){if("string"==typeof e)return t(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}(a)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(),o("sort",e,n,r),o("sort-change",e,n,r)},tabDrag:function(e,t){o("drag",e,t),o("on-drag-tab",e,t)}};return Object.assign(Object.assign({},d),{isMounted:l,panels:i})},render:function(){var e,t,r,a,o=this;return(0,n.createVNode)("div",{class:"top"===o.tabPosition?"bk-tab bk-tab--".concat(o.tabPosition," bk-tab--").concat(o.type," ").concat(o.extCls):"bk-tab bk-tab--".concat(o.tabPosition," ").concat(o.extCls)},[(r=o.panels,a={panels:r,active:o.active,type:o.type,closable:o.closable,addable:o.addable,sortable:o.sortable,sortType:o.sortType,labelHeight:o.labelHeight,scrollStep:o.scrollStep,validateActive:o.validateActive,changeOnHover:o.changeOnHover,changeOnHoverDelay:o.changeOnHoverDelay,tabPosition:o.tabPosition,tabAdd:o.tabAdd,tabChange:o.tabChange,tabRemove:o.tabRemove,tabSort:o.tabSort,tabDrag:o.tabDrag},r&&Array.isArray(r)?(0,n.createVNode)(c,a,o.$slots):null),(0,n.createVNode)("div",{class:"bk-tab-content"},[null===(t=(e=this.$slots).default)||void 0===t?void 0:t.call(e)])])}}),u=(0,n.defineComponent)({name:"TabPanel",props:s,render:function(){var e=this,t=this.name===this.$parent.active;return(0,n.withDirectives)((0,n.createVNode)("div",{ref:"content",class:"bk-tab-panel"},[!e.visible||"if"===e.renderDirective&&!t?null:"function"==typeof e.panel?e.panel(n.h):"function"==typeof e.$slots.default?e.$slots.default(null):"function"==typeof e.$slots.panel?e.$slots.panel(null):null]),[[n.vShow,t]])}});var b=(0,e.withInstallProps)(d,{TabPanel:u});const f=b})(),l})()));
@@ -125,6 +125,9 @@ export declare const tabNavProps: {
125
125
  }>[]>;
126
126
  default: () => any[];
127
127
  };
128
+ tabPosition: import("vue-types").VueTypeDef<string> & {
129
+ default: string;
130
+ };
128
131
  closable: BooleanConstructor;
129
132
  addable: BooleanConstructor;
130
133
  sortable: BooleanConstructor;
@@ -28,6 +28,9 @@ declare const _default: import("vue").DefineComponent<{
28
28
  }>[]>;
29
29
  default: () => any[];
30
30
  };
31
+ tabPosition: import("vue-types").VueTypeDef<string> & {
32
+ default: string;
33
+ };
31
34
  closable: BooleanConstructor;
32
35
  addable: BooleanConstructor;
33
36
  sortable: BooleanConstructor;
@@ -65,23 +68,20 @@ declare const _default: import("vue").DefineComponent<{
65
68
  dragStartIndex: import("vue").Ref<number>;
66
69
  draggingEle: import("vue").Ref<string>;
67
70
  guid: string;
68
- }, unknown, {}, {
69
71
  /**
70
72
  * @description 判断拖动的元素是否是在同一个tab。
71
73
  * 使用guid,相比 el1.parentNode === el2.parentNode 判断,性能要高
72
- * @param el1 {string} 拖动的元素
73
- * @param el2 {string} 触发的元素
74
+ * @param e {event} 触发的元素
74
75
  * @return {boolean}
75
76
  */
76
- distinctRoots(el1: string, el2: string): boolean;
77
- handleTabAdd(e: MouseEvent): void;
77
+ handleTabAdd(e: any): void;
78
78
  dragstart(index: number, $event: DragEvent): void;
79
79
  dragenter(index: any): void;
80
80
  dragend(): void;
81
- drop(index: any, sortType: any): false;
81
+ drop(index: any, sortType: any): boolean;
82
82
  handleTabChange(name: string): void;
83
83
  handleTabRemove(index: number, panel: any): void;
84
- }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
84
+ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
85
85
  tabAdd: {
86
86
  type: FunctionConstructor;
87
87
  default: () => any;
@@ -111,6 +111,9 @@ declare const _default: import("vue").DefineComponent<{
111
111
  }>[]>;
112
112
  default: () => any[];
113
113
  };
114
+ tabPosition: import("vue-types").VueTypeDef<string> & {
115
+ default: string;
116
+ };
114
117
  closable: BooleanConstructor;
115
118
  addable: BooleanConstructor;
116
119
  sortable: BooleanConstructor;
@@ -154,6 +157,7 @@ declare const _default: import("vue").DefineComponent<{
154
157
  panels: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
155
158
  [key: string]: any;
156
159
  }>[];
160
+ tabPosition: string;
157
161
  addable: boolean;
158
162
  sortable: boolean;
159
163
  labelHeight: number;
package/lib/tab/tab.css CHANGED
@@ -10,6 +10,7 @@
10
10
  flex-direction: row-reverse;
11
11
  }
12
12
  .bk-tab-header {
13
+ position: relative;
13
14
  display: flex;
14
15
  color: #63656e;
15
16
  }
@@ -22,6 +23,9 @@
22
23
  .bk-tab--border-card .bk-tab-header > div {
23
24
  border-right: 1px solid #dcdee5;
24
25
  }
26
+ .bk-tab-header-navs {
27
+ flex: 1;
28
+ }
25
29
  .bk-tab--top .bk-tab-header-nav {
26
30
  overflow-x: auto;
27
31
  overflow-y: visible;
@@ -40,6 +44,21 @@
40
44
  width: 0;
41
45
  height: 0;
42
46
  }
47
+ .bk-tab-header-next,
48
+ .bk-tab-header-prev {
49
+ position: absolute;
50
+ top: 1px;
51
+ bottom: 1px;
52
+ width: 15px;
53
+ background: #fff;
54
+ content: '';
55
+ }
56
+ .bk-tab-header-prev {
57
+ left: 1px;
58
+ }
59
+ .bk-tab-header-next {
60
+ right: 1px;
61
+ }
43
62
  .bk-tab-header-operation .bk-tab-header-item {
44
63
  padding: 0 12px;
45
64
  }
package/lib/tab/tab.d.ts CHANGED
@@ -52,13 +52,12 @@ declare const _default: import("vue").DefineComponent<{
52
52
  }, {
53
53
  isMounted: import("vue").Ref<boolean>;
54
54
  panels: import("vue").Ref<any[]>;
55
- }, unknown, {}, {
56
55
  tabAdd(e: MouseEvent): void;
57
56
  tabChange(name: string): void;
58
57
  tabRemove(index: number, panel: any): void;
59
- tabSort(dragTabIndex: number, dropTabIndex: number, sortType: string): false;
58
+ tabSort(dragTabIndex: number, dropTabIndex: number, sortType: string): boolean;
60
59
  tabDrag(dragTabIndex: number, dragEvent: DragEvent): void;
61
- }, 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<{
60
+ }, unknown, {}, {}, 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<{
62
61
  active: import("vue-types").VueTypeDef<string | number> & {
63
62
  default: string | number;
64
63
  };
@@ -128,6 +127,7 @@ declare const _default: import("vue").DefineComponent<{
128
127
  active: string | number;
129
128
  showHeader: boolean;
130
129
  sortType: string;
130
+ tabPosition: string;
131
131
  addable: boolean;
132
132
  sortable: boolean;
133
133
  labelHeight: number;
@@ -135,6 +135,5 @@ declare const _default: import("vue").DefineComponent<{
135
135
  validateActive: boolean;
136
136
  changeOnHover: boolean;
137
137
  changeOnHoverDelay: number;
138
- tabPosition: string;
139
138
  }>;
140
139
  export default _default;
package/lib/tab/tab.less CHANGED
@@ -19,27 +19,13 @@
19
19
  flex-direction: column;
20
20
  }
21
21
 
22
- &--left {
23
-
24
- }
25
22
 
26
23
  &--right {
27
24
  flex-direction: row-reverse;
28
25
  }
29
26
 
30
- &--card {
31
-
32
- }
33
-
34
- &--border-card {
35
-
36
- }
37
-
38
- &--unborder-card {
39
-
40
- }
41
-
42
27
  &-header {
28
+ position: relative;
43
29
  display: flex;
44
30
  color: @tab-color;
45
31
 
@@ -53,7 +39,12 @@
53
39
  }
54
40
  }
55
41
 
42
+ &-navs {
43
+ flex: 1;
44
+ }
45
+
56
46
  &-nav {
47
+
57
48
  .@{tab-prefix}--top & {
58
49
  overflow-x: auto;
59
50
  overflow-y: visible;
@@ -64,11 +55,11 @@
64
55
  overflow-y: auto;
65
56
  }
66
57
 
58
+
67
59
  .@{tab-prefix}--card &, .@{tab-prefix}--border-card & {
68
60
  border-left: 1px solid @tab-border;
69
61
  }
70
62
 
71
- //flex: 0 1 auto;
72
63
  &::-webkit-scrollbar {
73
64
  display: none;
74
65
  width: 0;
@@ -76,6 +67,24 @@
76
67
  }
77
68
  }
78
69
 
70
+ &-next,
71
+ &-prev {
72
+ position: absolute;
73
+ top: 1px;
74
+ bottom: 1px;
75
+ width: 15px;
76
+ background: #fff;
77
+ content: '';
78
+ }
79
+
80
+ &-prev {
81
+ left: 1px;
82
+ }
83
+
84
+ &-next {
85
+ right: 1px;
86
+ }
87
+
79
88
  &-operation {
80
89
  //flex: 0 0 auto;
81
90
  .@{tab-prefix}-header-item {
@@ -83,7 +92,6 @@
83
92
  }
84
93
  }
85
94
 
86
-
87
95
  .@{tab-prefix}--left & {
88
96
  border-right: 1px solid @tab-border;
89
97
  }
@@ -120,7 +128,6 @@
120
128
  cursor: pointer;
121
129
  justify-content: center;
122
130
  align-items: center;
123
- //line-height: 42px;
124
131
 
125
132
  &:hover {
126
133
  color: @tab-active;
@@ -194,7 +201,6 @@
194
201
  }
195
202
 
196
203
  &--disabled {
197
- //color: @disable-color;
198
204
  color: @tab-disable-color;
199
205
  pointer-events: none;
200
206
  cursor: not-allowed;
@@ -109,6 +109,7 @@
109
109
  flex-direction: row-reverse;
110
110
  }
111
111
  .bk-tab-header {
112
+ position: relative;
112
113
  display: flex;
113
114
  color: var(--default-color);
114
115
  }
@@ -121,6 +122,9 @@
121
122
  .bk-tab--border-card .bk-tab-header > div {
122
123
  border-right: 1px solid var(--disable-color);
123
124
  }
125
+ .bk-tab-header-navs {
126
+ flex: 1;
127
+ }
124
128
  .bk-tab--top .bk-tab-header-nav {
125
129
  overflow-x: auto;
126
130
  overflow-y: visible;
@@ -139,6 +143,21 @@
139
143
  width: 0;
140
144
  height: 0;
141
145
  }
146
+ .bk-tab-header-next,
147
+ .bk-tab-header-prev {
148
+ position: absolute;
149
+ top: 1px;
150
+ bottom: 1px;
151
+ width: 15px;
152
+ background: #fff;
153
+ content: '';
154
+ }
155
+ .bk-tab-header-prev {
156
+ left: 1px;
157
+ }
158
+ .bk-tab-header-next {
159
+ right: 1px;
160
+ }
142
161
  .bk-tab-header-operation .bk-tab-header-item {
143
162
  padding: 0 12px;
144
163
  }
@@ -10,13 +10,15 @@ export declare const enum NODE_ATTRIBUTES {
10
10
  DEPTH = "__depth",
11
11
  INDEX = "__index",
12
12
  UUID = "__uuid",
13
- PARENT_ID = "__parentId",
14
- HAS_CHILD = "__hasChild",
13
+ PARENT_ID = "__parent_id",
14
+ HAS_CHILD = "__has_child",
15
15
  PATH = "__path",
16
- IS_ROOT = "__isRoot",
16
+ IS_ROOT = "__is_root",
17
17
  ORDER = "__order",
18
- IS_OPEN = "__isOpen",
19
- CHECKED = "__checked",
20
- IS_ASYNC_INIT = "__isAsyncInit",
21
- IS_MATCH = "__isMatch"
18
+ IS_OPENED = "__is_open",
19
+ IS_CHECKED = "__is_checked",
20
+ IS_SELECTED = "__is_selected",
21
+ IS_ASYNC_INIT = "__is_async_init",
22
+ IS_MATCH = "__is_match",
23
+ IS_NULL = "__IS_NULL"
22
24
  }