vue-slim-tabs/dist/vue-slim-tabs.js

Simple tabs component for Vue.js

/*!
 * vue-slim-tabs v0.4.0
 * (c) egoist <0x142857@gmail.com>
 * Released under the MIT License.
 */
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = global || self, factory(global.VueSlimTabs = {}));
}(this, function (exports) { 'use strict';

  var Tabs = {
    name: "tabs",
    props: {
      defaultIndex: {
        default: 0,
        type: Number
      },
      onSelect: {
        type: Function
      }
    },
    data: function data() {
      return {
        selectedIndex: this.defaultIndex
      };
    },
    methods: {
      switchTab: function switchTab(e, index, isDisabled) {
        if (!isDisabled) {
          this.selectedIndex = index;
          this.onSelect && this.onSelect(e, index);
        }
      }
    },
    render: function render() {
      var _this = this;

      var h = arguments[0];
      var tabs = this.$slots.default.filter(function (component) {
        return component.componentOptions;
      });
      var tabList = [];
      tabs.forEach(function (child, index) {
        var _child$componentOptio = child.componentOptions.propsData,
            title = _child$componentOptio.title,
            titleSlot = _child$componentOptio.titleSlot,
            disabled = _child$componentOptio.disabled;
        var content = titleSlot ? _this.$slots[titleSlot] : title;
        var isDisabled = disabled === true || disabled === "";
        tabList.push(h("li", {
          "class": "vue-tab",
          attrs: {
            role: "tab",
            "aria-selected": _this.selectedIndex === index ? "true" : "false",
            "aria-disabled": isDisabled ? "true" : "false"
          },
          on: {
            "click": function click(e) {
              return _this.switchTab(e, index, isDisabled);
            }
          }
        }, [content]));
      });
      return h("div", {
        "class": "vue-tabs",
        attrs: {
          role: "tabs"
        }
      }, [h("ul", {
        "class": "vue-tablist",
        attrs: {
          role: "tablist"
        }
      }, [this.$slots.left, tabList, this.$slots.right]), tabs[this.selectedIndex]]);
    }
  };
  var Tab = {
    name: "tab",
    props: ["title", "titleSlot", "disabled"],
    render: function render() {
      var h = arguments[0];
      return h("div", {
        "class": "vue-tabpanel",
        attrs: {
          role: "tabpanel"
        }
      }, [this.$slots.default]);
    }
  };
  function install(Vue) {
    Vue.component(Tabs.name, Tabs);
    Vue.component(Tab.name, Tab);
  }

  exports.Tab = Tab;
  exports.Tabs = Tabs;
  exports.install = install;

  Object.defineProperty(exports, '__esModule', { value: true });

}));