@meve/ui/es/tabs/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Sticky from '../sticky';
import { createNamespace } from '../utils/create';
import { createParentMixin } from '../utils/mixins/relation';
import { isNumber } from '../utils/shared';
import { linear } from '../utils/animation';
import { scrollTo } from '../utils/elements';
import { props } from './props';




var _createNamespace = createNamespace('tabs'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var TabsPlugin = createComponent({
  mixins: [createParentMixin('tabs')],
  props: props,
  data: function data() {
    return {
      scrollable: false
    };
  },
  watch: {
    children: function children() {
      var _this = this;

      this.$nextTick(function () {
        _this.resize();
      });
    },
    value: function value() {
      this.resize();
    }
  },
  mounted: function mounted() {
    window.addEventListener('resize', this.resize);
  },
  beforeDestroy: function beforeDestroy() {
    window.removeEventListener('resize', this.resize);
  },
  methods: {
    matchName: function matchName() {
      var _this2 = this;

      return this.children.find(function (_ref) {
        var name = _ref.name;
        return _this2.value === name;
      });
    },
    matchIndex: function matchIndex() {
      var _this3 = this;

      return this.children.find(function (_ref2) {
        var index = _ref2.index;
        return _this3.value === index;
      });
    },
    matchBoundary: function matchBoundary() {
      var length = this.children.length;

      if (length === 0) {
        return;
      }

      var value = this.value;
      isNumber(value) ? value > length - 1 ? this.$emit('input', length - 1) : this.$emit('input', 0) : null;
      return this.matchIndex();
    },
    watchScrollable: function watchScrollable() {
      this.scrollable = this.children.length >= 5;
    },
    scrollToCenter: function scrollToCenter(tab) {
      if (!this.scrollable) {
        return;
      }

      var scroller = this.$refs.scroller;
      var el = tab.$refs.tab;

      if (this.layoutDirection === 'horizontal') {
        var left = el.offsetLeft + el.offsetWidth / 2 - scroller.offsetWidth / 2;
        scrollTo(scroller, {
          left: left,
          animation: linear
        });
      } else {
        var top = el.offsetTop + el.offsetHeight / 2 - scroller.offsetHeight / 2;
        scrollTo(scroller, {
          top: top,
          animation: linear
        });
      }
    },
    resize: function resize() {
      var tab = this.matchName() || this.matchIndex() || this.matchBoundary();

      if (!tab || tab.disabled) {
        return;
      }

      this.watchScrollable();
      this.scrollToCenter(tab);
      this.sticky && this.$refs.sticky.handleScroll();
    },
    onTabClick: function onTabClick(tab) {
      var _tab$name;

      var currentActive = (_tab$name = tab.name) != null ? _tab$name : tab.index;
      var value = this.value;
      this.$emit('click', currentActive);
      this.$emit('input', currentActive);
      currentActive !== value && this.$emit('change', currentActive);
    },
    renderTabs: function renderTabs() {
      var h = this.$createElement;
      return h("div", {
        "class": [namespace(), 'm--box', namespace("--item-" + this.itemDirection)],
        "attrs": _extends({}, this.$attrs)
      }, [h("div", {
        "ref": "scroller",
        "class": [namespace('__tab-wrap'), namespace("--layout-" + this.layoutDirection), this.scrollable ? namespace("--layout-" + this.layoutDirection + "-scrollable") : null]
      }, [this.slots()])]);
    }
  },
  render: function render() {
    var h = arguments[0];
    var sticky = this.sticky,
        offsetTop = this.offsetTop;

    if (sticky) {
      return h(Sticky, {
        "ref": "sticky",
        "attrs": {
          "offsetTop": offsetTop
        }
      }, [this.renderTabs()]);
    }

    return this.renderTabs();
  }
});
export var _TabsComponent = TabsPlugin;
export default TabsPlugin;