vxe-pc-ui 3.0.0 → 3.0.1

package/lib/tabs/src/tabs.js

@@ -0,0 +1,630 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _vn = require("../../ui/src/vn");
+var _dom = require("../..//ui/src/dom");
+var _log = require("../../ui/src/log");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default2 = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeTabs',
+  props: {
+    value: [String, Number, Boolean],
+    options: Array,
+    height: [String, Number],
+    destroyOnClose: Boolean,
+    titleWidth: [String, Number],
+    titleAlign: [String, Number],
+    type: String,
+    showClose: Boolean,
+    padding: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().tabs.padding;
+      }
+    },
+    trigger: String,
+    beforeChangeMethod: Function,
+    beforeCloseMethod: Function
+  },
+  inject: {
+    $xeParentTabs: {
+      from: '$xeTabs',
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeTabs = this;
+    return {
+      $xeTabs: $xeTabs
+    };
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      staticTabs: [],
+      activeName: null,
+      initNames: [],
+      lintLeft: 0,
+      lintWidth: 0,
+      isTabOver: false,
+      resizeFlag: 1
+    };
+    var internalData = {
+      slTimeout: undefined
+    };
+    return {
+      xID: xID,
+      reactData: reactData,
+      internalData: internalData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeParentResizeFlag: function computeParentResizeFlag() {
+      var $xeTabs = this;
+      var $xeParentTabs = $xeTabs.$xeParentTabs;
+      return $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null;
+    },
+    computeTabOptions: function computeTabOptions() {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var options = props.options;
+      return (options || []).filter(function (item) {
+        return $xeTabs.handleFilterTab(item);
+      });
+    },
+    computeTabStaticOptions: function computeTabStaticOptions() {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      var staticTabs = reactData.staticTabs;
+      return staticTabs.filter(function (item) {
+        return $xeTabs.handleFilterTab(item);
+      });
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeTabs = this;
+      $xeTabs.$emit(type, (0, _ui.createEvent)(evnt, {
+        $tabs: $xeTabs
+      }, params));
+    },
+    prev: function prev() {
+      var $xeTabs = this;
+      return $xeTabs.handlePrevNext(false);
+    },
+    next: function next() {
+      var $xeTabs = this;
+      return $xeTabs.handlePrevNext(true);
+    },
+    prevTab: function prevTab() {
+      var $xeTabs = this;
+      if (process.env.NODE_ENV === 'development') {
+        (0, _log.warnLog)('vxe.error.delFunc', ['prevTab', 'prev']);
+      }
+      return $xeTabs.prev();
+    },
+    nextTab: function nextTab() {
+      var $xeTabs = this;
+      if (process.env.NODE_ENV === 'development') {
+        (0, _log.warnLog)('vxe.error.delFunc', ['nextTab', 'next']);
+      }
+      return $xeTabs.next();
+    },
+    handleFilterTab: function handleFilterTab(item) {
+      var permissionCode = item.permissionCode;
+      if (permissionCode) {
+        if (!_ui.permission.checkVisible(permissionCode)) {
+          return false;
+        }
+      }
+      return true;
+    },
+    callSlot: function callSlot(slotFunc, params) {
+      var $xeTabs = this;
+      var slots = $xeTabs.$scopedSlots;
+      if (slotFunc) {
+        if (_xeUtils.default.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null;
+        }
+        if (_xeUtils.default.isFunction(slotFunc)) {
+          return (0, _vn.getSlotVNs)(slotFunc(params));
+        }
+      }
+      return [];
+    },
+    updateTabStyle: function updateTabStyle() {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var reactData = $xeTabs.reactData;
+      $xeTabs.$nextTick(function () {
+        var type = props.type;
+        var activeName = reactData.activeName;
+        var tabOptions = $xeTabs.computeTabOptions;
+        var tabStaticOptions = $xeTabs.computeTabStaticOptions;
+        var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
+        var lintWidth = 0;
+        var lintLeft = 0;
+        var isOver = false;
+        if (headerWrapperEl) {
+          var index = _xeUtils.default.findIndexOf(tabStaticOptions.length ? tabStaticOptions : tabOptions, function (item) {
+            return item.name === activeName;
+          });
+          var children = headerWrapperEl.children,
+            scrollWidth = headerWrapperEl.scrollWidth,
+            clientWidth = headerWrapperEl.clientWidth;
+          isOver = scrollWidth !== clientWidth;
+          if (index > -1) {
+            var tabEl = children[index];
+            var tabWidth = tabEl.clientWidth;
+            if (type) {
+              if (type === 'card') {
+                lintWidth = tabWidth + 2;
+                lintLeft = tabEl.offsetLeft;
+              } else if (type === 'border-card') {
+                lintWidth = tabWidth + 2;
+                lintLeft = tabEl.offsetLeft - 1;
+              }
+            } else {
+              lintWidth = Math.max(4, Math.floor(tabWidth * 0.6));
+              lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2);
+            }
+          }
+        }
+        reactData.lintLeft = lintLeft;
+        reactData.lintWidth = lintWidth;
+        reactData.isTabOver = isOver;
+      });
+    },
+    addInitName: function addInitName(name, evnt) {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      var initNames = reactData.initNames;
+      if (name && !initNames.includes(name)) {
+        $xeTabs.dispatchEvent('tab-load', {
+          name: name
+        }, evnt);
+        initNames.push(name);
+        return true;
+      }
+      return false;
+    },
+    initDefaultName: function initDefaultName(list) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var reactData = $xeTabs.reactData;
+      var activeName = null;
+      if (list && list.length) {
+        var validVal = false;
+        activeName = props.value;
+        list.forEach(function (item) {
+          if (activeName === item.name) {
+            validVal = true;
+          }
+          if (item && item.preload) {
+            $xeTabs.addInitName(item.name, null);
+          }
+        });
+        if (!validVal) {
+          activeName = list[0].name;
+          $xeTabs.addInitName(activeName, null);
+          $xeTabs.$emit('input', activeName);
+        }
+      }
+      reactData.activeName = activeName;
+    },
+    clickEvent: function clickEvent(evnt, item) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var reactData = $xeTabs.reactData;
+      var trigger = props.trigger;
+      var beforeMethod = props.beforeChangeMethod || (0, _ui.getConfig)().tabs.beforeChangeMethod;
+      var activeName = reactData.activeName;
+      var name = item.name;
+      if (trigger === 'manual') {
+        $xeTabs.dispatchEvent('tab-click', {
+          name: name
+        }, evnt);
+        return;
+      }
+      var value = name;
+      reactData.activeName = name;
+      $xeTabs.$emit('input', value);
+      $xeTabs.dispatchEvent('tab-click', {
+        name: name
+      }, evnt);
+      $xeTabs.addInitName(name, evnt);
+      if (name !== activeName) {
+        if (!beforeMethod || beforeMethod({
+          $tabs: $xeTabs,
+          name: name,
+          oldName: activeName,
+          newName: name
+        })) {
+          $xeTabs.dispatchEvent('change', {
+            value: value,
+            name: name,
+            oldName: activeName,
+            newName: name
+          }, evnt);
+        } else {
+          $xeTabs.dispatchEvent('tab-change-fail', {
+            value: value,
+            name: name,
+            oldName: activeName,
+            newName: name
+          }, evnt);
+        }
+      }
+    },
+    handleCloseTabEvent: function handleCloseTabEvent(evnt, item, index, list) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var reactData = $xeTabs.reactData;
+      evnt.stopPropagation();
+      var activeName = reactData.activeName;
+      var beforeMethod = props.beforeCloseMethod || (0, _ui.getConfig)().tabs.beforeCloseMethod;
+      var name = item.name;
+      var value = activeName;
+      var nextName = value;
+      if (activeName === name) {
+        var nextItem = index < list.length - 1 ? list[index + 1] : list[index - 1];
+        nextName = nextItem ? nextItem.name : null;
+      }
+      if (!beforeMethod || beforeMethod({
+        $tabs: $xeTabs,
+        value: value,
+        name: name,
+        nextName: nextName
+      })) {
+        $xeTabs.dispatchEvent('tab-close', {
+          value: value,
+          name: name,
+          nextName: nextName
+        }, evnt);
+      } else {
+        $xeTabs.dispatchEvent('tab-close-fail', {
+          value: value,
+          name: name,
+          nextName: nextName
+        }, evnt);
+      }
+    },
+    startScrollAnimation: function startScrollAnimation(offsetPos, offsetSize) {
+      var $xeTabs = this;
+      var internalData = $xeTabs.internalData;
+      var slTimeout = internalData.slTimeout;
+      var offsetLeft = offsetSize;
+      var scrollCount = 6;
+      var delayNum = 35;
+      if (slTimeout) {
+        clearTimeout(slTimeout);
+        internalData.slTimeout = undefined;
+      }
+      var _scrollAnimate = function scrollAnimate() {
+        var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
+        if (scrollCount > 0) {
+          scrollCount--;
+          if (headerWrapperEl) {
+            var clientWidth = headerWrapperEl.clientWidth,
+              scrollWidth = headerWrapperEl.scrollWidth,
+              scrollLeft = headerWrapperEl.scrollLeft;
+            offsetLeft = Math.floor(offsetLeft / 2);
+            if (offsetPos > 0) {
+              if (clientWidth + scrollLeft < scrollWidth) {
+                headerWrapperEl.scrollLeft += offsetLeft;
+                delayNum -= 4;
+                internalData.slTimeout = setTimeout(_scrollAnimate, delayNum);
+              }
+            } else {
+              if (scrollLeft > 0) {
+                headerWrapperEl.scrollLeft -= offsetLeft;
+                delayNum -= 4;
+                internalData.slTimeout = setTimeout(_scrollAnimate, delayNum);
+              }
+            }
+            $xeTabs.updateTabStyle();
+          }
+        }
+      };
+      _scrollAnimate();
+    },
+    handleScrollToLeft: function handleScrollToLeft(offsetPos) {
+      var $xeTabs = this;
+      var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
+      if (headerWrapperEl) {
+        var offsetSize = Math.floor(headerWrapperEl.clientWidth * 0.75);
+        $xeTabs.startScrollAnimation(offsetPos, offsetSize);
+      }
+    },
+    scrollLeftEvent: function scrollLeftEvent() {
+      var $xeTabs = this;
+      $xeTabs.handleScrollToLeft(-1);
+    },
+    scrollRightEvent: function scrollRightEvent() {
+      var $xeTabs = this;
+      $xeTabs.handleScrollToLeft(1);
+    },
+    scrollToTab: function scrollToTab(name) {
+      var $xeTabs = this;
+      var tabOptions = $xeTabs.computeTabOptions;
+      var tabStaticOptions = $xeTabs.computeTabStaticOptions;
+      return $xeTabs.$nextTick().then(function () {
+        var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
+        if (headerWrapperEl) {
+          var index = _xeUtils.default.findIndexOf(tabStaticOptions.length ? tabStaticOptions : tabOptions, function (item) {
+            return item.name === name;
+          });
+          if (index > -1) {
+            var scrollLeft = headerWrapperEl.scrollLeft,
+              clientWidth = headerWrapperEl.clientWidth,
+              children = headerWrapperEl.children;
+            var tabEl = children[index];
+            if (tabEl) {
+              var tabOffsetLeft = tabEl.offsetLeft;
+              var tabClientWidth = tabEl.clientWidth;
+              // 如果右侧被挡
+              var overSize = tabOffsetLeft + tabClientWidth - (scrollLeft + clientWidth);
+              if (overSize > 0) {
+                headerWrapperEl.scrollLeft += overSize;
+              }
+              // 如果左侧被挡，优先
+              if (tabOffsetLeft < scrollLeft) {
+                headerWrapperEl.scrollLeft = tabOffsetLeft;
+              }
+            }
+          }
+          $xeTabs.updateTabStyle();
+        }
+      });
+    },
+    handlePrevNext: function handlePrevNext(isNext) {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      var activeName = reactData.activeName;
+      var tabOptions = $xeTabs.computeTabOptions;
+      var tabStaticOptions = $xeTabs.computeTabStaticOptions;
+      var list = tabStaticOptions.length ? tabStaticOptions : tabOptions;
+      var index = _xeUtils.default.findIndexOf(list, function (item) {
+        return item.name === activeName;
+      });
+      if (index > -1) {
+        var item = null;
+        if (isNext) {
+          if (index < list.length - 1) {
+            item = list[index + 1];
+          }
+        } else {
+          if (index > 0) {
+            item = list[index - 1];
+          }
+        }
+        if (item) {
+          var name = item.name;
+          var value = name;
+          reactData.activeName = name;
+          $xeTabs.$emit('input', value);
+          $xeTabs.addInitName(name, null);
+        }
+      }
+      return $xeTabs.$nextTick();
+    },
+    //
+    // Render
+    //
+    renderTabHeader: function renderTabHeader(h, tabList) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var slots = $xeTabs.$scopedSlots;
+      var reactData = $xeTabs.reactData;
+      var type = props.type,
+        allTitleWidth = props.titleWidth,
+        allTitleAlign = props.titleAlign,
+        showClose = props.showClose;
+      var activeName = reactData.activeName,
+        lintLeft = reactData.lintLeft,
+        lintWidth = reactData.lintWidth,
+        isTabOver = reactData.isTabOver;
+      var extraSlot = slots.extra;
+      return h('div', {
+        class: 'vxe-tabs-header'
+      }, [isTabOver ? h('div', {
+        class: 'vxe-tabs-header--bar vxe-tabs-header--left-bar',
+        on: {
+          click: $xeTabs.scrollLeftEvent
+        }
+      }, [h('span', {
+        class: (0, _ui.getIcon)().TABS_TAB_BUTTON_LEFT
+      })]) : (0, _ui.renderEmptyElement)($xeTabs), h('div', {
+        class: 'vxe-tabs-header--wrapper'
+      }, [h('div', {
+        ref: 'refHeadWrapperElem',
+        class: 'vxe-tabs-header--item-wrapper'
+      }, tabList.map(function (item, index) {
+        var title = item.title,
+          titleWidth = item.titleWidth,
+          titleAlign = item.titleAlign,
+          icon = item.icon,
+          name = item.name,
+          slots = item.slots;
+        var tabSlot = slots ? slots.tab : null;
+        var itemWidth = titleWidth || allTitleWidth;
+        var itemAlign = titleAlign || allTitleAlign;
+        return h('div', {
+          key: "".concat(name),
+          class: ['vxe-tabs-header--item', itemAlign ? "align--".concat(itemAlign) : '', {
+            'is--active': activeName === name
+          }],
+          style: itemWidth ? {
+            width: (0, _dom.toCssUnit)(itemWidth)
+          } : {},
+          on: {
+            click: function click(evnt) {
+              $xeTabs.clickEvent(evnt, item);
+            }
+          }
+        }, [h('div', {
+          class: 'vxe-tabs-header--item-inner'
+        }, [h('div', {
+          class: 'vxe-tabs-header--item-content'
+        }, [icon ? h('span', {
+          class: 'vxe-tabs-header--item-icon'
+        }, [h('i', {
+          class: icon
+        })]) : (0, _ui.renderEmptyElement)($xeTabs), h('span', {
+          class: 'vxe-tabs-header--item-name'
+        }, tabSlot ? $xeTabs.callSlot(tabSlot, {
+          name: name,
+          title: title
+        }) : "".concat(title))]), showClose ? h('div', {
+          class: 'vxe-tabs-header--close-btn',
+          on: {
+            click: function click(evnt) {
+              $xeTabs.handleCloseTabEvent(evnt, item, index, tabList);
+            }
+          }
+        }, [h('i', {
+          class: (0, _ui.getIcon)().TABS_TAB_CLOSE
+        })]) : (0, _ui.renderEmptyElement)($xeTabs)])]);
+      }).concat([h('span', {
+        key: 'line',
+        class: "vxe-tabs-header--active-line type--".concat(type || 'default'),
+        style: {
+          left: "".concat(lintLeft, "px"),
+          width: "".concat(lintWidth, "px")
+        }
+      })]))]), isTabOver ? h('div', {
+        class: 'vxe-tabs-header--bar vxe-tabs-header--right-bar',
+        on: {
+          click: $xeTabs.scrollRightEvent
+        }
+      }, [h('span', {
+        class: (0, _ui.getIcon)().TABS_TAB_BUTTON_RIGHT
+      })]) : (0, _ui.renderEmptyElement)($xeTabs), extraSlot ? h('div', {
+        class: 'vxe-tabs-header--extra'
+      }, (0, _vn.getSlotVNs)(extraSlot({}))) : (0, _ui.renderEmptyElement)($xeTabs)]);
+    },
+    renderTabPane: function renderTabPane(h, item) {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      var initNames = reactData.initNames,
+        activeName = reactData.activeName;
+      var name = item.name,
+        slots = item.slots;
+      var defaultSlot = slots ? slots.default : null;
+      return name && initNames.includes(name) ? h('div', {
+        key: name,
+        class: ['vxe-tabs-pane--item', {
+          'is--visible': activeName === name,
+          'has--content': !!defaultSlot
+        }]
+      }, defaultSlot ? $xeTabs.callSlot(defaultSlot, {
+        name: name
+      }) : []) : (0, _ui.renderEmptyElement)($xeTabs);
+    },
+    renderTabContent: function renderTabContent(h, tabList) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var reactData = $xeTabs.reactData;
+      var destroyOnClose = props.destroyOnClose;
+      var activeName = reactData.activeName;
+      var activeDefaultTab = tabList.find(function (item) {
+        return item.name === activeName;
+      });
+      if (destroyOnClose) {
+        return [activeDefaultTab ? $xeTabs.renderTabPane(h, activeDefaultTab) : (0, _ui.renderEmptyElement)($xeTabs)];
+      }
+      return tabList.map(function (item) {
+        return $xeTabs.renderTabPane(h, item);
+      });
+    },
+    renderVN: function renderVN(h) {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      var slots = $xeTabs.$scopedSlots;
+      var type = props.type,
+        height = props.height,
+        padding = props.padding,
+        trigger = props.trigger;
+      var tabOptions = $xeTabs.computeTabOptions;
+      var tabStaticOptions = $xeTabs.computeTabStaticOptions;
+      var defaultSlot = slots.default;
+      var tabList = defaultSlot ? tabStaticOptions : tabOptions;
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-tabs', "vxe-tabs--".concat(type || 'default'), "trigger--".concat(trigger === 'manual' ? 'trigger' : 'default'), {
+          'is--padding': padding,
+          'is--height': height
+        }],
+        style: height ? {
+          height: (0, _dom.toCssUnit)(height)
+        } : {}
+      }, [h('div', {
+        class: 'vxe-tabs-slots'
+      }, defaultSlot ? defaultSlot({}) : []), $xeTabs.renderTabHeader(h, tabList), h('div', {
+        class: 'vxe-tabs-pane'
+      }, $xeTabs.renderTabContent(h, tabList))]);
+    }
+  },
+  watch: {
+    value: function value(val) {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      $xeTabs.addInitName(val, null);
+      reactData.activeName = val;
+    },
+    'reactData.activeName': function reactDataActiveName(val) {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      $xeTabs.scrollToTab(val);
+      $xeTabs.$nextTick(function () {
+        reactData.resizeFlag++;
+      });
+    },
+    options: function options() {
+      var $xeTabs = this;
+      var props = $xeTabs;
+      $xeTabs.initDefaultName(props.options);
+      $xeTabs.updateTabStyle();
+    },
+    'reactData.staticTabs': function reactDataStaticTabs() {
+      var $xeTabs = this;
+      var reactData = $xeTabs.reactData;
+      $xeTabs.initDefaultName(reactData.staticTabs);
+      $xeTabs.updateTabStyle();
+    },
+    computeParentResizeFlag: function computeParentResizeFlag() {
+      var $xeTabs = this;
+      $xeTabs.$nextTick(function () {
+        $xeTabs.updateTabStyle();
+      });
+    }
+  },
+  created: function created() {
+    var $xeTabs = this;
+    var props = $xeTabs;
+    var reactData = $xeTabs.reactData;
+    $xeTabs.addInitName(props.value, null);
+    $xeTabs.initDefaultName(reactData.staticTabs.length ? reactData.staticTabs : props.options);
+  },
+  mounted: function mounted() {
+    var $xeTabs = this;
+    $xeTabs.updateTabStyle();
+    _ui.globalEvents.on($xeTabs, 'resize', $xeTabs.updateTabStyle);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeTabs = this;
+    _ui.globalEvents.off($xeTabs, 'resize');
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});

package/lib/tabs/src/tabs.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../..//ui/src/dom"),_log=require("../../ui/src/log");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTabs",props:{value:[String,Number,Boolean],options:Array,height:[String,Number],destroyOnClose:Boolean,titleWidth:[String,Number],titleAlign:[String,Number],type:String,showClose:Boolean,padding:{type:Boolean,default:function(){return(0,_ui.getConfig)().tabs.padding}},trigger:String,beforeChangeMethod:Function,beforeCloseMethod:Function},inject:{$xeParentTabs:{from:"$xeTabs",default:null}},provide:function(){return{$xeTabs:this}},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{staticTabs:[],activeName:null,initNames:[],lintLeft:0,lintWidth:0,isTabOver:!1,resizeFlag:1},internalData:{slTimeout:void 0}}},computed:Object.assign(Object.assign({},{}),{computeParentResizeFlag:function(){var e=this.$xeParentTabs;return e?e.reactData.resizeFlag:null},computeTabOptions:function(){var t=this;return(t.options||[]).filter(function(e){return t.handleFilterTab(e)})},computeTabStaticOptions:function(){var t=this;return t.reactData.staticTabs.filter(function(e){return t.handleFilterTab(e)})}}),methods:{dispatchEvent:function(e,t,a){this.$emit(e,(0,_ui.createEvent)(a,{$tabs:this},t))},prev:function(){return this.handlePrevNext(!1)},next:function(){return this.handlePrevNext(!0)},prevTab:function(){return"development"===process.env.NODE_ENV&&(0,_log.warnLog)("vxe.error.delFunc",["prevTab","prev"]),this.prev()},nextTab:function(){return"development"===process.env.NODE_ENV&&(0,_log.warnLog)("vxe.error.delFunc",["nextTab","next"]),this.next()},handleFilterTab:function(e){e=e.permissionCode;return!(e&&!_ui.permission.checkVisible(e))},callSlot:function(e,t){var a=this.$scopedSlots;return e&&(_xeUtils.default.isString(e)&&(e=a[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[]},updateTabStyle:function(){var o=this,c=o,u=o.reactData;o.$nextTick(function(){var e=c.type,t=u.activeName,a=o.computeTabOptions,n=o.computeTabStaticOptions,i=o.$refs.refHeadWrapperElem,r=0,s=0,l=!1;i&&(n=_xeUtils.default.findIndexOf(n.length?n:a,function(e){return e.name===t}),a=i.children,l=i.scrollWidth!==i.clientWidth,-1<n)&&(a=(i=a[n]).clientWidth,e?"card"===e?(r=a+2,s=i.offsetLeft):"border-card"===e&&(r=a+2,s=i.offsetLeft-1):(r=Math.max(4,Math.floor(.6*a)),s=i.offsetLeft+Math.floor((a-r)/2))),u.lintLeft=s,u.lintWidth=r,u.isTabOver=l})},addInitName:function(e,t){var a=this.reactData.initNames;return!(!e||a.includes(e)||(this.dispatchEvent("tab-load",{name:e},t),a.push(e),0))},initDefaultName:function(e){var t,a=this,n=a.reactData,i=null;e&&e.length&&(t=!1,i=a.value,e.forEach(function(e){i===e.name&&(t=!0),e&&e.preload&&a.addInitName(e.name,null)}),t||(i=e[0].name,a.addInitName(i,null),a.$emit("input",i))),n.activeName=i},clickEvent:function(e,t){var a=this,n=a.reactData,i=a.trigger,r=a.beforeChangeMethod||(0,_ui.getConfig)().tabs.beforeChangeMethod,s=n.activeName,t=t.name;"manual"===i?a.dispatchEvent("tab-click",{name:t},e):(n.activeName=i=t,a.$emit("input",i),a.dispatchEvent("tab-click",{name:t},e),a.addInitName(t,e),t!==s&&(!r||r({$tabs:a,name:t,oldName:s,newName:t})?a.dispatchEvent("change",{value:i,name:t,oldName:s,newName:t},e):a.dispatchEvent("tab-change-fail",{value:i,name:t,oldName:s,newName:t},e)))},handleCloseTabEvent:function(e,t,a,n){var i=this,r=i,s=i.reactData,s=(e.stopPropagation(),s.activeName),r=r.beforeCloseMethod||(0,_ui.getConfig)().tabs.beforeCloseMethod,t=t.name,l=s,o=l;s===t&&(o=(s=a<n.length-1?n[a+1]:n[a-1])?s.name:null),!r||r({$tabs:i,value:l,name:t,nextName:o})?i.dispatchEvent("tab-close",{value:l,name:t,nextName:o},e):i.dispatchEvent("tab-close-fail",{value:l,name:t,nextName:o},e)},startScrollAnimation:function(i,e){var r=this,s=r.internalData,t=s.slTimeout,l=e,o=6,c=35,u=(t&&(clearTimeout(t),s.slTimeout=void 0),function(){var e,t,a,n=r.$refs.refHeadWrapperElem;0<o&&(o--,n)&&(e=n.clientWidth,t=n.scrollWidth,a=n.scrollLeft,l=Math.floor(l/2),0<i?e+a<t&&(n.scrollLeft+=l,c-=4,s.slTimeout=setTimeout(u,c)):0<a&&(n.scrollLeft-=l,c-=4,s.slTimeout=setTimeout(u,c)),r.updateTabStyle())});u()},handleScrollToLeft:function(e){var t=this.$refs.refHeadWrapperElem;t&&(t=Math.floor(.75*t.clientWidth),this.startScrollAnimation(e,t))},scrollLeftEvent:function(){this.handleScrollToLeft(-1)},scrollRightEvent:function(){this.handleScrollToLeft(1)},scrollToTab:function(r){var s=this,l=s.computeTabOptions,o=s.computeTabStaticOptions;return s.$nextTick().then(function(){var e,t,a,n,i=s.$refs.refHeadWrapperElem;i&&(-1<(n=_xeUtils.default.findIndexOf(o.length?o:l,function(e){return e.name===r}))&&(e=i.scrollLeft,t=i.clientWidth,n=i.children[n])&&(0<(n=(a=n.offsetLeft)+n.clientWidth-(e+t))&&(i.scrollLeft+=n),a<e)&&(i.scrollLeft=a),s.updateTabStyle())})},handlePrevNext:function(e){var t,a=this,n=a.reactData,i=n.activeName,r=a.computeTabStaticOptions,r=r.length?r:a.computeTabOptions,s=_xeUtils.default.findIndexOf(r,function(e){return e.name===i});return-1<s&&(t=null,e?s<r.length-1&&(t=r[s+1]):0<s&&(t=r[s-1]),t)&&(e=t.name,n.activeName=e,a.$emit("input",e),a.addInitName(e,null)),a.$nextTick()},renderTabHeader:function(o,c){var u=this,e=u.$scopedSlots,t=u.reactData,a=u.type,d=u.titleWidth,f=u.titleAlign,h=u.showClose,m=t.activeName,n=t.lintLeft,i=t.lintWidth,t=t.isTabOver,e=e.extra;return o("div",{class:"vxe-tabs-header"},[t?o("div",{class:"vxe-tabs-header--bar vxe-tabs-header--left-bar",on:{click:u.scrollLeftEvent}},[o("span",{class:(0,_ui.getIcon)().TABS_TAB_BUTTON_LEFT})]):(0,_ui.renderEmptyElement)(u),o("div",{class:"vxe-tabs-header--wrapper"},[o("div",{ref:"refHeadWrapperElem",class:"vxe-tabs-header--item-wrapper"},c.map(function(t,a){var e=t.title,n=t.icon,i=t.name,r=t.slots,r=r?r.tab:null,s=t.titleWidth||d,l=t.titleAlign||f;return o("div",{key:"".concat(i),class:["vxe-tabs-header--item",l?"align--".concat(l):"",{"is--active":m===i}],style:s?{width:(0,_dom.toCssUnit)(s)}:{},on:{click:function(e){u.clickEvent(e,t)}}},[o("div",{class:"vxe-tabs-header--item-inner"},[o("div",{class:"vxe-tabs-header--item-content"},[n?o("span",{class:"vxe-tabs-header--item-icon"},[o("i",{class:n})]):(0,_ui.renderEmptyElement)(u),o("span",{class:"vxe-tabs-header--item-name"},r?u.callSlot(r,{name:i,title:e}):"".concat(e))]),h?o("div",{class:"vxe-tabs-header--close-btn",on:{click:function(e){u.handleCloseTabEvent(e,t,a,c)}}},[o("i",{class:(0,_ui.getIcon)().TABS_TAB_CLOSE})]):(0,_ui.renderEmptyElement)(u)])])}).concat([o("span",{key:"line",class:"vxe-tabs-header--active-line type--".concat(a||"default"),style:{left:"".concat(n,"px"),width:"".concat(i,"px")}})]))]),t?o("div",{class:"vxe-tabs-header--bar vxe-tabs-header--right-bar",on:{click:u.scrollRightEvent}},[o("span",{class:(0,_ui.getIcon)().TABS_TAB_BUTTON_RIGHT})]):(0,_ui.renderEmptyElement)(u),e?o("div",{class:"vxe-tabs-header--extra"},(0,_vn.getSlotVNs)(e({}))):(0,_ui.renderEmptyElement)(u)])},renderTabPane:function(e,t){var a=this.reactData,n=a.initNames,a=a.activeName,i=t.name,t=t.slots,t=t?t.default:null;return i&&n.includes(i)?e("div",{key:i,class:["vxe-tabs-pane--item",{"is--visible":a===i,"has--content":!!t}]},t?this.callSlot(t,{name:i}):[]):(0,_ui.renderEmptyElement)(this)},renderTabContent:function(t,e){var a=this,n=a.reactData,i=a.destroyOnClose,r=n.activeName,n=e.find(function(e){return e.name===r});return i?[n?a.renderTabPane(t,n):(0,_ui.renderEmptyElement)(a)]:e.map(function(e){return a.renderTabPane(t,e)})},renderVN:function(e){var t=this,a=t.$scopedSlots,n=t.type,i=t.height,r=t.padding,s=t.trigger,a=a.default,l=a?t.computeTabStaticOptions:t.computeTabOptions;return e("div",{ref:"refElem",class:["vxe-tabs","vxe-tabs--".concat(n||"default"),"trigger--".concat("manual"===s?"trigger":"default"),{"is--padding":r,"is--height":i}],style:i?{height:(0,_dom.toCssUnit)(i)}:{}},[e("div",{class:"vxe-tabs-slots"},a?a({}):[]),t.renderTabHeader(e,l),e("div",{class:"vxe-tabs-pane"},t.renderTabContent(e,l))])}},watch:{value:function(e){var t=this.reactData;this.addInitName(e,null),t.activeName=e},"reactData.activeName":function(e){var t=this.reactData;this.scrollToTab(e),this.$nextTick(function(){t.resizeFlag++})},options:function(){this.initDefaultName(this.options),this.updateTabStyle()},"reactData.staticTabs":function(){var e=this.reactData;this.initDefaultName(e.staticTabs),this.updateTabStyle()},computeParentResizeFlag:function(){var e=this;e.$nextTick(function(){e.updateTabStyle()})}},created:function(){var e=this.reactData;this.addInitName(this.value,null),this.initDefaultName(e.staticTabs.length?e.staticTabs:this.options)},mounted:function(){this.updateTabStyle(),_ui.globalEvents.on(this,"resize",this.updateTabStyle)},beforeDestroy:function(){_ui.globalEvents.off(this,"resize")},render:function(e){return this.renderVN(e)}});

package/lib/tabs/src/util.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.assembleAnchorTab = assembleAnchorTab;
+exports.destroyAnchorTab = destroyAnchorTab;
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function assembleAnchorTab($xeTabs, elem, tabConfig) {
+  var staticLinks = $xeTabs.reactData.staticTabs;
+  var parentElem = elem.parentNode;
+  if (parentElem) {
+    staticLinks.splice(_xeUtils.default.arrayIndexOf(parentElem.children, elem), 0, tabConfig);
+    $xeTabs.reactData.staticTabs = staticLinks.slice(0);
+  }
+}
+function destroyAnchorTab($xeTabs, tabConfig) {
+  var staticTabs = $xeTabs.reactData.staticTabs;
+  var matchObj = _xeUtils.default.findTree(staticTabs, function (item) {
+    return item.id === tabConfig.id;
+  }, {
+    children: 'children'
+  });
+  if (matchObj) {
+    matchObj.items.splice(matchObj.index, 1);
+  }
+  $xeTabs.reactData.staticTabs = staticTabs.slice(0);
+}

package/lib/tabs/src/util.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.assembleAnchorTab=assembleAnchorTab,exports.destroyAnchorTab=destroyAnchorTab;var _xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function assembleAnchorTab(e,t,a){var r=e.reactData.staticTabs,s=t.parentNode;s&&(r.splice(_xeUtils.default.arrayIndexOf(s.children,t),0,a),e.reactData.staticTabs=r.slice(0))}function destroyAnchorTab(e,t){var a=e.reactData.staticTabs,r=_xeUtils.default.findTree(a,function(e){return e.id===t.id},{children:"children"});r&&r.items.splice(r.index,1),e.reactData.staticTabs=a.slice(0)}

package/lib/tabs/style/index.js

@@ -0,0 +1 @@
+require('./style.css')