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

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Swipe from '../swipe';
import { createNamespace } from '../utils/create';
import { createParentMixin } from '../utils/mixins/relation';
import { props } from './props';



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

var TabsItemsPlugin = createComponent({
  mixins: [createParentMixin('tabsItems')],
  props: props,
  watch: {
    value: function value(newValue) {
      this.handleValueChange(newValue);
    },
    children: function children() {
      this.handleValueChange(this.value);
    }
  },
  methods: {
    matchName: function matchName(value) {
      return this.children.find(function (_ref) {
        var name = _ref.name;
        return value === name;
      });
    },
    matchIndex: function matchIndex(value) {
      return this.children.find(function (_ref2) {
        var index = _ref2.index;
        return value === index;
      });
    },
    matchValue: function matchValue(value) {
      return this.matchName(value) || this.matchIndex(value);
    },
    handleValueChange: function handleValueChange(newValue) {
      var tabItem = this.matchValue(newValue);

      if (!tabItem) {
        return;
      }

      this.children.forEach(function (_ref3) {
        var setCurrent = _ref3.setCurrent;
        return setCurrent(false);
      });
      tabItem.setCurrent(true);
      this.$refs.swipe.to(tabItem.index);
    },
    handleSwipeChange: function handleSwipeChange(currentIndex) {
      var _tabItem$name;

      var tabItem = this.children.find(function (_ref4) {
        var index = _ref4.index;
        return index === currentIndex;
      });
      var value = (_tabItem$name = tabItem.name) != null ? _tabItem$name : tabItem.index;
      this.$emit('input', value);
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    return h(Swipe, {
      "ref": "swipe",
      "class": namespace(),
      "attrs": {
        "loop": this.loop,
        "touchable": this.canSwipe,
        "indicator": false
      },
      "on": _extends({}, {
        "change": function change($event) {
          for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            attrs[_key - 1] = arguments[_key];
          }

          _this.handleSwipeChange.apply(_this, [$event].concat(attrs));
        }
      })
    }, [this.slots()]);
  }
});
export var _TabsItemsComponent = TabsItemsPlugin;
export default TabsItemsPlugin;