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

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Ripple from '../ripple';
import { createNamespace } from '../utils/create';
import { createChildrenMixin } from '../utils/mixins/relation';
import { props } from './props';




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

var TabPlugin = createComponent({
  mixins: [createChildrenMixin('tabs')],
  directives: {
    Ripple: Ripple
  },
  props: props,
  data: function data() {
    return {
      scrollable: false
    };
  },
  computed: {
    last: function last() {
      var _this$parent;

      return ((_this$parent = this.parent) == null ? void 0 : _this$parent.children.length) === this.index + 1;
    },
    first: function first() {
      return this.index === 0;
    }
  },
  watch: {
    name: function name() {
      var _this$parent2;

      (_this$parent2 = this.parent) == null ? void 0 : _this$parent2.resize();
    },
    disabled: function disabled() {
      var _this$parent3;

      (_this$parent3 = this.parent) == null ? void 0 : _this$parent3.resize();
    }
  },
  methods: {
    computeColorStyle: function computeColorStyle() {
      if (!this.parent) {
        return;
      }

      var disabled = this.disabled,
          name = this.name,
          index = this.index;
      var _this$parent4 = this.parent,
          disabledColor = _this$parent4.disabledColor,
          activeColor = _this$parent4.activeColor,
          inactiveColor = _this$parent4.inactiveColor,
          value = _this$parent4.value;
      return disabled ? disabledColor : value === name || value === index ? activeColor : inactiveColor;
    },
    computeBackgroundStyle: function computeBackgroundStyle() {
      var disabled = this.disabled,
          name = this.name,
          index = this.index;

      if (!this.parent) {
        return;
      }

      var _this$parent5 = this.parent,
          disabledBackground = _this$parent5.disabledBackground,
          activeBackground = _this$parent5.activeBackground,
          inactiveBackground = _this$parent5.inactiveBackground,
          value = _this$parent5.value;
      return disabled ? disabledBackground : value === name || value === index ? activeBackground : inactiveBackground;
    },
    computeColorClass: function computeColorClass() {
      var disabled = this.disabled,
          name = this.name,
          index = this.index;

      if (!this.parent) {
        return;
      }

      var value = this.parent.value;
      return disabled ? namespace('--disabled') : value === name || value === index ? namespace('--active') : namespace('--inactive');
    },
    computeClearMargin: function computeClearMargin() {
      var _this$parent6;

      var first = this.first,
          last = this.last;

      var _ref = (_this$parent6 = this.parent) != null ? _this$parent6 : {},
          layoutDirection = _ref.layoutDirection;

      if (layoutDirection === 'vertical') {
        return [first ? namespace('--clear-margin-top') : null, last ? namespace('--clear-margin-bottom') : null];
      }

      return [first ? namespace('--clear-margin-left') : null, last ? namespace('--clear-margin-right') : null];
    },
    handleClick: function handleClick(event) {
      var _this$parent7;

      var disabled = this.disabled,
          name = this.name,
          index = this.index;

      if (disabled) {
        return;
      }

      this.$emit('click', name != null ? name : index, event);
      (_this$parent7 = this.parent) == null ? void 0 : _this$parent7.onTabClick(this);
    }
  },
  render: function render() {
    var _this$parent8;

    var h = arguments[0];
    var disabled = this.disabled,
        computeColorClass = this.computeColorClass,
        computeColorStyle = this.computeColorStyle,
        computeBackgroundStyle = this.computeBackgroundStyle,
        computeClearMargin = this.computeClearMargin,
        handleClick = this.handleClick;

    var _ref2 = (_this$parent8 = this.parent) != null ? _this$parent8 : {},
        itemDirection = _ref2.itemDirection,
        layoutDirection = _ref2.layoutDirection;

    return h("div", {
      "ref": "tab",
      "class": [namespace(), 'm--box', namespace("--" + layoutDirection + "-margin")].concat(computeClearMargin()),
      "on": _extends({}, {
        "click": function click($event) {
          for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            attrs[_key - 1] = arguments[_key];
          }

          handleClick.apply(void 0, [$event].concat(attrs));
        }
      })
    }, [h("div", {
      "class": [namespace('__content'), computeColorClass(), namespace("--" + itemDirection)],
      "style": {
        color: computeColorStyle(),
        background: computeBackgroundStyle()
      },
      "directives": [{
        name: "ripple",
        value: {
          disabled: disabled
        }
      }]
    }, [this.slots()])]);
  }
});
export var _TabComponent = TabPlugin;
export default TabPlugin;