ten-design-vue/lib/tabs/tabs.js

ten-vue

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _getElSlots = _interopRequireDefault(require("../scripts/mixins/get-el-slots"));

var _icon = _interopRequireDefault(require("../icon"));

var _renderCell = _interopRequireDefault(require("../render-cell"));

var _emitter = _interopRequireDefault(require("../scripts/mixins/emitter"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var name = 'ten-tabs';
var _default = {
  name: name,
  components: {
    TenIcon: _icon.default,
    renderCell: _renderCell.default
  },
  mixins: [_getElSlots.default, _emitter.default],
  props: {
    /**
     * 当前选中的值
     */
    value: [String, Number],

    /**
     * tabs 主题
     * @member normal | primary
     */
    type: String,

    /**
     * 是否需要 lazyload
     */
    lazy: Boolean
  },
  provide: function provide() {
    return {
      tabs: this
    };
  },
  data: function data() {
    var curValue = this.value;
    return {
      navList: [],
      curValue: curValue,
      scrollShow: false,
      scrollLeft: 0
    };
  },
  computed: {
    _class: function _class() {
      return [name, _defineProperty({}, "ten-tabs--".concat(this.type), this.type)];
    },
    _navClass: function _navClass() {
      return ["".concat(name, "-nav")];
    },
    _contentClass: function _contentClass() {
      return ["".concat(name, "-content")];
    }
  },
  watch: {
    value: function value(v) {
      this.curValue = v;
      this.scrollTabIntoView(v);
    }
  },
  created: function created() {
    this.updateNavListT = 0;
    this.refreshScrollT = 0;
  },
  mounted: function mounted() {
    window.addEventListener('resize', this.setNavScroll, false);
    this.updateNavList();
    this.$on('pane-updated', this.onPaneUpdate);
    var navList = this.getNavList();

    if (typeof this.value === 'undefined' && navList[0]) {
      this.curValue = navList[0]._dataValue;
    }
  },
  beforeDestroy: function beforeDestroy() {
    window.removeEventListener('resize', this.setNavScroll);
    this.$off('pane-updated', this.onPaneUpdate);
    clearTimeout(this.updateNavListT);
    clearTimeout(this.refreshScrollT);
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    return h("div", {
      "class": this._class
    }, [h("div", {
      "class": this._navClass,
      ref: 'tabNav'
    }, [h("div", {
      "class": 'ten-tabs-nav-scroll',
      ref: 'navScroll',
      style: {
        transform: "translateX(".concat(-this.scrollLeft, "px)")
      }
    }, [this.navList.map(function (item) {
      return _this.renderNavItem(item);
    })]), this.scrollLeft > 0 && h("div", {
      "class": 'ten-tabs-scroll__prev',
      on: {
        "click": function click() {
          return _this.onScrollBtnClick(true);
        }
      }
    }, [h(_icon.default, {
      attrs: {
        icon: 'left'
      }
    })]), this.scrollShow && h("div", {
      "class": 'ten-tabs-scroll__next',
      on: {
        "click": function click() {
          return _this.onScrollBtnClick(false);
        }
      }
    }, [h(_icon.default, {
      attrs: {
        icon: 'right'
      }
    })])]), h("div", {
      "class": this._contentClass
    }, [this.$scopedSlots.default && this.$scopedSlots.default(), h("slot")])]);
  },
  methods: {
    renderNavItem: function renderNavItem(navItem) {
      var _this2 = this;

      var h = this.$createElement;
      var icon;

      if (navItem.closeTab || navItem.closable) {
        icon = h(_icon.default, {
          on: {
            "click": function click(e) {
              return _this2.onClose(navItem, e);
            }
          },
          attrs: {
            icon: 'clear'
          }
        });
      } else if (navItem.icon) {
        icon = h(_icon.default, {
          attrs: {
            icon: navItem.icon
          }
        });
      } else if (navItem.$slots.icon) {
        icon = navItem.$slots.icon; // eslint-disable-line
      }

      return h("span", {
        "class": this.getNavItemClass(navItem),
        key: navItem._dataValue,
        on: {
          "click": function click(e) {
            return _this2.onNavItemClick(navItem, e);
          }
        },
        ref: "tab-".concat(navItem.value)
      }, [navItem.$slots.label || navItem.label, h("span", {
        "class": "ten-tabs-tab__icon"
      }, [icon])]);
    },
    updateNavList: function updateNavList() {
      var _this3 = this;

      clearTimeout(this.updateNavListT);
      this.updateNavListT = setTimeout(function () {
        var navList = _this3.getNavList();

        _this3.navList = navList;

        _this3.setNavScroll();

        clearTimeout(_this3.refreshScrollT);
        _this3.refreshScrollT = setTimeout(function () {
          _this3.setNavScroll();
        });
      });
    },
    // 获取导航数据
    getNavList: function getNavList() {
      if (!this.$scopedSlots.default) {
        return [];
      }

      var defaultSlots = this.$scopedSlots.default();
      return defaultSlots.map(function (vnode) {
        if (vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ten-tabs-pane') {
          return vnode.componentInstance;
        }

        return undefined;
      }).filter(function (v) {
        return v;
      });
    },
    // 获取导航样式
    getNavItemClass: function getNavItemClass(navItem) {
      var _ref2;

      var _dataValue = navItem._dataValue,
          disabled = navItem.disabled,
          information = navItem.information,
          closeTab = navItem.closeTab,
          icon = navItem.icon;
      return ["".concat(name, "-tab"), (_ref2 = {}, _defineProperty(_ref2, "".concat(name, "-tab--active"), _dataValue === this.curValue), _defineProperty(_ref2, "".concat(name, "-tab--disabled"), disabled), _defineProperty(_ref2, "".concat(name, "-tab--info"), information || information === ''), _defineProperty(_ref2, "".concat(name, "-tab--icon"), icon || navItem.$slots.icon), _defineProperty(_ref2, "".concat(name, "-tab--close"), closeTab || closeTab === ''), _ref2)];
    },
    setNavScroll: function setNavScroll() {
      if (!this.$refs.navScroll) return;
      var navScroll = this.$refs.navScroll;
      var tabNav = this.$refs.tabNav;
      var navScrollWidth = navScroll.offsetWidth;
      var tabNavWidth = tabNav.offsetWidth;

      if (navScrollWidth <= tabNavWidth) {
        this.scrollShow = false;
        this.scrollLeft = 0;
      } else {
        if (navScrollWidth - this.scrollLeft > tabNavWidth) {
          this.scrollShow = true;
        } else if (navScrollWidth - this.scrollLeft <= tabNavWidth) {
          this.scrollShow = false;
        }
      }
    },
    onPaneUpdate: function onPaneUpdate() {
      this.updateNavList();
    },
    // 导航点击
    onNavItemClick: function onNavItemClick(navItem) {
      /**
       * tab 点击事件回调函数
       */
      this.$emit('click-tab', navItem._dataValue);
      this.$emit('change', navItem._dataValue);
      this.broadcastAll('do-layout');
    },
    // 点击关闭
    onClose: function onClose(navItem, e) {
      /**
       * tab 删除事件回调函数
       */
      this.$emit('close-tab', navItem._dataValue);
      e.stopPropagation();
    },
    // 滚动按钮
    onScrollBtnClick: function onScrollBtnClick(lr) {
      var navWidth = this.$refs.tabNav.offsetWidth;
      var scrollWidth = this.$refs.navScroll.offsetWidth;
      var removeLeft = this.type ? 220 : 100;
      var attribute = this.scrollLeft + (lr ? -navWidth + removeLeft : navWidth - removeLeft);
      if (attribute < 0) attribute = 0;

      if (attribute + navWidth > scrollWidth) {
        attribute = scrollWidth - navWidth;
      }

      this.scrollLeft = attribute;
      this.scrollShow = attribute + navWidth !== scrollWidth;
    },
    scrollTabIntoView: function scrollTabIntoView(val) {
      var tabNav = this.$refs.tabNav;
      var activeTab = this.$refs["tab-".concat(val)];
      if (!tabNav || !activeTab) return;
      var navWidth = tabNav.offsetWidth;
      var tabOffsetLeft = activeTab.offsetLeft;
      var tabOffsetWidth = activeTab.offsetWidth;
      var scrollBtnWidth = 41;

      if (tabOffsetLeft <= this.scrollLeft + scrollBtnWidth) {
        this.scrollLeft = Math.max(tabOffsetLeft - tabOffsetWidth - scrollBtnWidth, 0);
      } else if (tabOffsetLeft + tabOffsetWidth >= this.scrollLeft + navWidth) {
        this.scrollLeft = tabOffsetLeft - navWidth + tabOffsetWidth;
      }
    }
  }
};
exports.default = _default;