vue-material-tabs - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/vue-material-tabs.esm.js

@@ -278,4 +278,6 @@ function calc(e) {
       functional: true,
-      render: (h, ctx) => {
-        return ctx.props.node ? ctx.props.node : h("span", ctx.props.name);
+      render: (h, {
+        props
+      }) => {
+        return props.node ? props.node : h("span", props.name);
       }
@@ -340,2 +342,4 @@ }
     // Force recalc the pagination offsets when the orientation/navItems is change;
+    navItems: "resizable",
+
     vertical() {
@@ -346,20 +350,25 @@ Object.assign(this.$data, this.$options.data());
 
-    navItems: "resizable"
+    tabItemActive(payload) {
+      this.sliderHandler();
+
+      if (this.pagination.has) {
+        this.paginationCollapse(payload);
+      }
+    }
+
   },
   methods: {
     select(navItem) {
-      this.$emit("select", {
-        tabItem: navItem,
-        byUser: true
-      });
-      this.sliderHandler(navItem === null || navItem === void 0 ? void 0 : navItem.model);
-
-      if (this.pagination.has) {
-        this.paginationCollapse(navItem);
+      if (!(navItem !== null && navItem !== void 0 && navItem.disabled)) {
+        this.$emit("select", {
+          tabItem: navItem,
+          byUser: true
+        });
       }
     },
 
-    sliderHandler(model) {
-      var _this$$refs, _this$$refs2, _this$$refs3;
+    async sliderHandler() {
+      var _this$$refs, _this$$refs2, _this$$refs2$this$tab;
 
+      await this.$nextTick();
       const navItemsElement = (_this$$refs = this.$refs) === null || _this$$refs === void 0 ? void 0 : _this$$refs.navItems;
@@ -379,3 +388,3 @@ const {
       } = this.getElementRect({
-        el: (_this$$refs2 = this.$refs) === null || _this$$refs2 === void 0 ? void 0 : (_this$$refs3 = _this$$refs2[model || this.tabItemActive.model]) === null || _this$$refs3 === void 0 ? void 0 : _this$$refs3[0],
+        el: (_this$$refs2 = this.$refs) === null || _this$$refs2 === void 0 ? void 0 : (_this$$refs2$this$tab = _this$$refs2[this.tabItemActive.model]) === null || _this$$refs2$this$tab === void 0 ? void 0 : _this$$refs2$this$tab[0],
         prefix: "navActive"
@@ -401,5 +410,5 @@ });
     getPagination() {
-      var _this$$refs4, _this$$refs5;
+      var _this$$refs3, _this$$refs4;
 
-      const navItemsElement = (_this$$refs4 = this.$refs) === null || _this$$refs4 === void 0 ? void 0 : _this$$refs4.navItems;
+      const navItemsElement = (_this$$refs3 = this.$refs) === null || _this$$refs3 === void 0 ? void 0 : _this$$refs3.navItems;
       const {
@@ -415,3 +424,3 @@ navItemsWidth
       } = this.getElementRect({
-        el: (_this$$refs5 = this.$refs) === null || _this$$refs5 === void 0 ? void 0 : _this$$refs5.nav,
+        el: (_this$$refs4 = this.$refs) === null || _this$$refs4 === void 0 ? void 0 : _this$$refs4.nav,
         prefix: "nav"
@@ -437,3 +446,3 @@ });
 
-    paginationHandler(type) {
+    onPagination(to) {
       const {
@@ -446,3 +455,3 @@ maxOffset,
 
-      if (type === "prev" && this.paginateIndicator.prev) {
+      if (to === "prev" && this.paginateIndicator.prev) {
         if (offset <= minOffset) {
@@ -460,3 +469,3 @@ this.pagination.offset = minOffset;
 
-      if (type === "next" && this.paginateIndicator.next) {
+      if (to === "next" && this.paginateIndicator.next) {
         if (translate + offset > maxOffset) {
@@ -470,6 +479,4 @@ this.pagination.offset = maxOffset - translate;
 
-    paginationCollapse({
-      model
-    }) {
-      var _this$$refs6, _this$$refs6$model, _this$$refs7;
+    paginationCollapse() {
+      var _this$$refs5, _this$$refs5$this$tab, _this$$refs6;
 
@@ -484,3 +491,3 @@ const {
       } = this.getElementRect({
-        el: (_this$$refs6 = this.$refs) === null || _this$$refs6 === void 0 ? void 0 : (_this$$refs6$model = _this$$refs6[model]) === null || _this$$refs6$model === void 0 ? void 0 : _this$$refs6$model[0],
+        el: (_this$$refs5 = this.$refs) === null || _this$$refs5 === void 0 ? void 0 : (_this$$refs5$this$tab = _this$$refs5[this.tabItemActive.model]) === null || _this$$refs5$this$tab === void 0 ? void 0 : _this$$refs5$this$tab[0],
         prefix: "navActive"
@@ -494,3 +501,3 @@ });
       } = this.getElementRect({
-        el: (_this$$refs7 = this.$refs) === null || _this$$refs7 === void 0 ? void 0 : _this$$refs7.nav,
+        el: (_this$$refs6 = this.$refs) === null || _this$$refs6 === void 0 ? void 0 : _this$$refs6.nav,
         prefix: "nav"
@@ -579,3 +586,3 @@ });
       "click": function ($event) {
-        return _vm.paginationHandler('prev');
+        return _vm.onPagination('prev');
       }
@@ -628,3 +635,3 @@ }
       "click": function ($event) {
-        return _vm.paginationHandler('next');
+        return _vm.onPagination('next');
       }
@@ -640,7 +647,7 @@ }
   if (!inject) return;
-  inject("data-v-2de04152_0", {
-    source: ".tab__pagination[data-v-2de04152]{display:flex;justify-content:space-between;align-items:center;vertical-align:middle;max-width:100%;flex:0 1 auto;position:relative;contain:content}.tab__pagination .tab__pagination__prev[data-v-2de04152],.tab__pagination__next[data-v-2de04152]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-2de04152] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-2de04152]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-2de04152]{display:flex;margin:0;padding:0;flex:1 auto;transition:.3s cubic-bezier(.25,.8,.5,1);height:100%}.tab__nav__items .tab__nav__item[data-v-2de04152]{list-style:none;text-align:center;cursor:pointer;padding:.9rem 1rem;letter-spacing:.0892857143em;display:flex;justify-content:center;align-items:center;text-align:center;color:gray;text-transform:uppercase;font-size:.875rem;font-weight:500;white-space:normal;transition:background .1s ease;position:relative;overflow:hidden;min-width:90px;max-width:360px;user-select:none}.tab__nav__items .tab__nav__item[data-v-2de04152]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-2de04152]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-2de04152]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-2de04152]{background:#f3f2f2}.tab__slider[data-v-2de04152]{height:2px;width:2px;background:#1867c0;border:none;margin:0;padding:0;bottom:0;position:absolute;transition:left .3s cubic-bezier(.25,.8,.5,1),top .3s cubic-bezier(.25,.8,.5,1)}.tab__pagination--vertical[data-v-2de04152]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-2de04152]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-2de04152]{padding:0;margin:0}.tab__pagination--vertical[data-v-2de04152] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-2de04152] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-2de04152]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-2de04152]:hover{background:#2f3236}.tab__pagination--auto .tab__nav__item[data-v-2de04152]{flex:1 auto}",
+  inject("data-v-c06add7c_0", {
+    source: ".tab__pagination[data-v-c06add7c]{display:flex;justify-content:space-between;align-items:center;vertical-align:middle;max-width:100%;flex:0 1 auto;position:relative;contain:content}.tab__pagination .tab__pagination__prev[data-v-c06add7c],.tab__pagination__next[data-v-c06add7c]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-c06add7c] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-c06add7c]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-c06add7c]{display:flex;margin:0;padding:0;flex:1 auto;transition:.3s cubic-bezier(.25,.8,.5,1);height:100%}.tab__nav__items .tab__nav__item[data-v-c06add7c]{list-style:none;text-align:center;cursor:pointer;padding:.9rem 1rem;letter-spacing:.0892857143em;display:flex;justify-content:center;align-items:center;text-align:center;color:gray;text-transform:uppercase;font-size:.875rem;font-weight:500;white-space:normal;transition:background .1s ease;position:relative;overflow:hidden;min-width:90px;max-width:360px;user-select:none}.tab__nav__items .tab__nav__item[data-v-c06add7c]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-c06add7c]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-c06add7c]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-c06add7c]{background:#f3f2f2}.tab__slider[data-v-c06add7c]{height:2px;width:2px;background:#1867c0;border:none;margin:0;padding:0;bottom:0;position:absolute;transition:left .3s cubic-bezier(.25,.8,.5,1),top .3s cubic-bezier(.25,.8,.5,1)}.tab__pagination--vertical[data-v-c06add7c]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-c06add7c]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-c06add7c]{padding:0;margin:0}.tab__pagination--vertical[data-v-c06add7c] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-c06add7c] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-c06add7c]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-c06add7c]:hover{background:#2f3236}.tab__pagination--auto .tab__nav__item[data-v-c06add7c]{flex:1 auto}",
     map: undefined,
     media: undefined
-  }), inject("data-v-2de04152_1", {
+  }), inject("data-v-c06add7c_1", {
     source: ".ripple{background-color:#1866c04d;border-radius:50%;position:absolute;transform:scale(0);animation:ripple .6s linear;z-index:2}@keyframes ripple{to{transform:scale(2.5);opacity:0}}",
@@ -654,3 +661,3 @@ map: undefined,
 
-const __vue_scope_id__$2 = "data-v-2de04152";
+const __vue_scope_id__$2 = "data-v-c06add7c";
 /* module identifier */
@@ -671,2 +678,52 @@
 
+const state = {
+  target: null,
+  touchstartX: 0,
+  touchstartY: 0,
+  isSwiping: 0
+};
+
+function start(e) {
+  if (!e) return;
+  state.isSwiping = true;
+  state.touchstartX = e === null || e === void 0 ? void 0 : e.touches[0].clientX;
+  state.touchstartY = e === null || e === void 0 ? void 0 : e.touches[0].clientY;
+}
+
+function move(e) {
+  var _state$target;
+
+  if (!state.isSwiping || !((_state$target = state.target) !== null && _state$target !== void 0 && _state$target._callback)) return;
+  const touchendX = e === null || e === void 0 ? void 0 : e.changedTouches[0].clientX;
+  const touchendY = e === null || e === void 0 ? void 0 : e.changedTouches[0].clientY;
+  const diffX = state.touchstartX - touchendX;
+  const diffY = state.touchstartY - touchendY;
+  if (diffY > 0 || diffX > 0) state.target._callback("next");else state.target._callback("prev");
+  state.isSwiping = false;
+}
+
+function listeners(add) {
+  [["touchstart", start], ["touchmove", move]].forEach(([k, v]) => {
+    var _state$target2;
+
+    state === null || state === void 0 ? void 0 : (_state$target2 = state.target) === null || _state$target2 === void 0 ? void 0 : _state$target2[add ? "addEventListener" : "removeEventListener"](k, v);
+  });
+}
+
+var touch = {
+  inserted(el, {
+    value
+  }) {
+    if (!value || !el) return;
+    state.target = el;
+    state.target._callback = value;
+    listeners(true);
+  },
+
+  unbind() {
+    listeners(false);
+  }
+
+};
+
 //
@@ -678,2 +735,5 @@ var script$1 = {
   },
+  directives: {
+    touch
+  },
   props: {
@@ -770,4 +830,6 @@ dark: Boolean,
       disabled,
-      nameSlot
+      $slots
     }) {
+      var _$slots$name;
+
       this.navItems.push({
@@ -777,3 +839,3 @@ model,
         disabled,
-        nameSlot
+        nameSlot: (_$slots$name = $slots.name) === null || _$slots$name === void 0 ? void 0 : _$slots$name[0]
       });
@@ -817,2 +879,21 @@ this.tabItemIndexes.last = this.navItems.length - 1;
 
+    onTouchSlide(to) {
+      let tabItem;
+      const {
+        current,
+        last
+      } = this.tabItemIndexes;
+
+      if (to === "next" && current < last) {
+        tabItem = this.navItems[current + 1];
+      } else if (to === "prev" && current > 0) {
+        tabItem = this.navItems[current - 1];
+      }
+
+      tabItem && this.activeTabItem({
+        tabItem,
+        byUser: true
+      });
+    },
+
     findIndexTab(tab) {
@@ -853,2 +934,8 @@ return this.tabItems.findIndex(el => el.model == tab.model);
   }), _vm._v(" "), _c('div', {
+    directives: [{
+      name: "touch",
+      rawName: "v-touch",
+      value: _vm.onTouchSlide,
+      expression: "onTouchSlide"
+    }],
     staticClass: "tabs__content"
@@ -863,4 +950,4 @@ }, [_vm._t("default")], 2)], 2);
   if (!inject) return;
-  inject("data-v-281cca8c_0", {
-    source: ".tabs[data-v-281cca8c]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-281cca8c]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;height:100%;width:100%;flex:1 100%}.tabs--vertical[data-v-281cca8c]{flex-direction:row}.tabs--dark[data-v-281cca8c]{background:#222831}.tabs--dark .tabs__nav__item[data-v-281cca8c]{color:#f1f1f1}.tabs--dark .tabs__nav__items .active[data-v-281cca8c]{color:#fff}.tabs--dark .tabs__nav__items .disabled[data-v-281cca8c]{background:#2c2f35}.tabs--dark .tab__pagination[data-v-281cca8c] .btn svg{fill:#d6d5d5}.tabs--dark .tab__pagination[data-v-281cca8c] .btn:disabled svg{fill:#56575c}.tabs--dark .tab__pagination[data-v-281cca8c] .tab__nav__item:hover{background:#424750}",
+  inject("data-v-3d0a3126_0", {
+    source: ".tabs[data-v-3d0a3126]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-3d0a3126]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;height:100%;width:100%;flex:1 100%}.tabs--vertical[data-v-3d0a3126]{flex-direction:row}.tabs--dark[data-v-3d0a3126]{background:#222831}.tabs--dark .tabs__nav__item[data-v-3d0a3126]{color:#f1f1f1}.tabs--dark .tabs__nav__items .active[data-v-3d0a3126]{color:#fff}.tabs--dark .tabs__nav__items .disabled[data-v-3d0a3126]{background:#2c2f35}.tabs--dark .tab__pagination[data-v-3d0a3126] .btn svg{fill:#d6d5d5}.tabs--dark .tab__pagination[data-v-3d0a3126] .btn:disabled svg{fill:#56575c}.tabs--dark .tab__pagination[data-v-3d0a3126] .tab__nav__item:hover{background:#424750}",
     map: undefined,
@@ -873,3 +960,3 @@ media: undefined
 
-const __vue_scope_id__$1 = "data-v-281cca8c";
+const __vue_scope_id__$1 = "data-v-3d0a3126";
 /* module identifier */
@@ -918,3 +1005,3 @@
 
-  created() {
+  mounted() {
     this.tabs.setTabItem(this);
@@ -992,3 +1079,3 @@ },
     style: {
-      'transition-duration': this.transition.duration + "ms"
+      'transition-duration': _vm.transition.duration + "ms"
     }
@@ -1003,4 +1090,4 @@ }, [_vm._t("default")], 2)]);
   if (!inject) return;
-  inject("data-v-a315dbc4_0", {
-    source: ".tab-item[data-v-a315dbc4]{position:absolute;top:0;left:0;z-index:1;height:100%;width:100%;transition:transform cubic-bezier(.25,.8,.5,1)}.slide-left-enter[data-v-a315dbc4],.slide-right-leave-to[data-v-a315dbc4]{transform:translateX(-100%)}.slide-left-leave-to[data-v-a315dbc4],.slide-right-enter[data-v-a315dbc4]{transform:translateX(100%)}.slide-bottom-leave-to[data-v-a315dbc4],.slide-top-enter[data-v-a315dbc4]{transform:translateY(-100%)}.slide-bottom-enter[data-v-a315dbc4],.slide-top-leave-to[data-v-a315dbc4]{transform:translateY(100%)}",
+  inject("data-v-2610bb0c_0", {
+    source: ".tab-item[data-v-2610bb0c]{position:absolute;top:0;left:0;z-index:1;height:100%;width:100%;transition:transform cubic-bezier(.25,.8,.5,1)}.slide-left-enter[data-v-2610bb0c],.slide-right-leave-to[data-v-2610bb0c]{transform:translateX(-100%)}.slide-left-leave-to[data-v-2610bb0c],.slide-right-enter[data-v-2610bb0c]{transform:translateX(100%)}.slide-bottom-leave-to[data-v-2610bb0c],.slide-top-enter[data-v-2610bb0c]{transform:translateY(-100%)}.slide-bottom-enter[data-v-2610bb0c],.slide-top-leave-to[data-v-2610bb0c]{transform:translateY(100%)}",
     map: undefined,
@@ -1013,3 +1100,3 @@ media: undefined
 
-const __vue_scope_id__ = "data-v-a315dbc4";
+const __vue_scope_id__ = "data-v-2610bb0c";
 /* module identifier */
@@ -1016,0 +1103,0 @@

dist/vue-material-tabs.min.js

@@ -1,1 +0,1 @@
-var VueMaterialTabs=function(){"use strict";function t(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var a=t&&("undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"]);if(null==a)return;var n,i,r=[],s=!0,o=!1;try{for(a=a.call(t);!(s=(n=a.next()).done)&&(r.push(n.value),!e||r.length!==e);s=!0);}catch(t){o=!0,i=t}finally{try{s||null==a.return||a.return()}finally{if(o)throw i}}return r}(t,e)||a(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t){return function(t){if(Array.isArray(t))return n(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||a(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){if(t){if("string"==typeof t)return n(t,e);var a=Object.prototype.toString.call(t).slice(8,-1);return"Object"===a&&t.constructor&&(a=t.constructor.name),"Map"===a||"Set"===a?Array.from(t):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?n(t,e):void 0}}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,n=new Array(e);a<e;a++)n[a]=t[a];return n}function i(t){var e=t.currentTarget,a=function(t){var e=t.currentTarget.getBoundingClientRect(),a=t.clientX-e.left,n=t.clientY-e.top,i=Math.sqrt(Math.pow(t.currentTarget.clientWidth,2)+Math.pow(t.currentTarget.clientHeight,2))/2;return{x:"".concat(a-i,"px"),y:"".concat(n-i,"px"),size:"".concat(2*i,"px")}}(t),n=a.size,i=a.y,r=a.x,s=document.createElement("span");s.classList.add("ripple"),s.style.width=s.style.height=n,s.style.top=i,s.style.left=r,e.appendChild(s),setTimeout((function(){return s.remove()}),1e3)}function r(t,e){null==t||t[e?"addEventListener":"removeEventListener"]("click",i)}var s={bind:function(t,e){return r(t,e.value)},update:function(t,e){return r(t,e.value)},unbind:function(t){return r(t,!1)}};var o={inserted:function(t,e){var a=null==e?void 0:e.value;a&&window.addEventListener("resize",a),t._onResize=a},unbind:function(t){t._onResize&&(window.removeEventListener("resize",t._onResize),delete t._onResize)}};function d(t,e,a,n,i,r,s,o,d,l){"boolean"!=typeof s&&(d=o,o=s,s=!1);const c="function"==typeof a?a.options:a;let v;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),n&&(c._scopeId=n),r?(v=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,d(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=v):e&&(v=s?function(t){e.call(this,l(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,o(t))}),v)if(c.functional){const t=c.render;c.render=function(e,a){return v.call(a),t(e,a)}}else{const t=c.beforeCreate;c.beforeCreate=t?[].concat(t,v):[v]}return a}const l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function c(t){return(t,e)=>function(t,e){const a=l?e.media||"default":t,n=u[a]||(u[a]={ids:new Set,styles:[]});if(!n.ids.has(t)){n.ids.add(t);let a=e.source;if(e.map&&(a+="\n/*# sourceURL="+e.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",e.media&&n.element.setAttribute("media",e.media),void 0===v&&(v=document.head||document.getElementsByTagName("head")[0]),v.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(a),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{const t=n.ids.size-1,e=document.createTextNode(a),i=n.element.childNodes;i[t]&&n.element.removeChild(i[t]),i.length?n.element.insertBefore(e,i[t]):n.element.appendChild(e)}}}(t,e)}let v;const u={};var f=d({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{class:t.classes},[t._t("nav",[a("NavTab",t._b({on:{select:t.activeTabItem}},"NavTab",{ripple:t.ripple,navAuto:t.navAuto,navItems:t.navItems,vertical:t.vertical,navSlider:t.navSlider,tabItemActive:t.tabItemActive},!1))],{items:t.navItems,active:t.tabItemActive}),t._v(" "),a("div",{staticClass:"tabs__content"},[t._t("default")],2)],2)},staticRenderFns:[]},(function(t){t&&t("data-v-281cca8c_0",{source:".tabs[data-v-281cca8c]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-281cca8c]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;height:100%;width:100%;flex:1 100%}.tabs--vertical[data-v-281cca8c]{flex-direction:row}.tabs--dark[data-v-281cca8c]{background:#222831}.tabs--dark .tabs__nav__item[data-v-281cca8c]{color:#f1f1f1}.tabs--dark .tabs__nav__items .active[data-v-281cca8c]{color:#fff}.tabs--dark .tabs__nav__items .disabled[data-v-281cca8c]{background:#2c2f35}.tabs--dark .tab__pagination[data-v-281cca8c] .btn svg{fill:#d6d5d5}.tabs--dark .tab__pagination[data-v-281cca8c] .btn:disabled svg{fill:#56575c}.tabs--dark .tab__pagination[data-v-281cca8c] .tab__nav__item:hover{background:#424750}",map:void 0,media:void 0})}),{name:"Tabs",components:{NavTab:d({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{directives:[{name:"resize",rawName:"v-resize",value:t.resizable,expression:"resizable"}],class:t.classes},[a("div",{staticClass:"tab__pagination__prev"},[t.pagination.has?a("Btn",{attrs:{disabled:!t.paginateIndicator.prev},on:{click:function(e){return t.paginationHandler("prev")}}}):t._e()],1),t._v(" "),a("nav",{ref:"nav",staticClass:"tab__nav"},[a("ul",{ref:"navItems",staticClass:"tab__nav__items",style:t.styles},[t._l(t.navItems,(function(e,n){return a("li",{directives:[{name:"ripple",rawName:"v-ripple",value:t.ripple&&!e.disabled,expression:"ripple && !navItem.disabled"}],key:"tab-item-"+n,ref:e.model,refInFor:!0,staticClass:"tab__nav__item",class:{active:e.model===t.tabItemActive.model,disabled:e.disabled},on:{click:function(a){return a.preventDefault(),t.select(e)}}},[a("VNode",{attrs:{node:e.nameSlot,name:e.name}})],1)})),t._v(" "),t.navSlider?a("hr",{staticClass:"tab__slider"}):t._e()],2)]),t._v(" "),a("div",{staticClass:"tab__pagination__next"},[t.pagination.has?a("Btn",{attrs:{disabled:!t.paginateIndicator.next},on:{click:function(e){return t.paginationHandler("next")}}}):t._e()],1)])},staticRenderFns:[]},(function(t){t&&(t("data-v-2de04152_0",{source:".tab__pagination[data-v-2de04152]{display:flex;justify-content:space-between;align-items:center;vertical-align:middle;max-width:100%;flex:0 1 auto;position:relative;contain:content}.tab__pagination .tab__pagination__prev[data-v-2de04152],.tab__pagination__next[data-v-2de04152]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-2de04152] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-2de04152]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-2de04152]{display:flex;margin:0;padding:0;flex:1 auto;transition:.3s cubic-bezier(.25,.8,.5,1);height:100%}.tab__nav__items .tab__nav__item[data-v-2de04152]{list-style:none;text-align:center;cursor:pointer;padding:.9rem 1rem;letter-spacing:.0892857143em;display:flex;justify-content:center;align-items:center;text-align:center;color:gray;text-transform:uppercase;font-size:.875rem;font-weight:500;white-space:normal;transition:background .1s ease;position:relative;overflow:hidden;min-width:90px;max-width:360px;user-select:none}.tab__nav__items .tab__nav__item[data-v-2de04152]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-2de04152]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-2de04152]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-2de04152]{background:#f3f2f2}.tab__slider[data-v-2de04152]{height:2px;width:2px;background:#1867c0;border:none;margin:0;padding:0;bottom:0;position:absolute;transition:left .3s cubic-bezier(.25,.8,.5,1),top .3s cubic-bezier(.25,.8,.5,1)}.tab__pagination--vertical[data-v-2de04152]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-2de04152]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-2de04152]{padding:0;margin:0}.tab__pagination--vertical[data-v-2de04152] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-2de04152] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-2de04152]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-2de04152]:hover{background:#2f3236}.tab__pagination--auto .tab__nav__item[data-v-2de04152]{flex:1 auto}",map:void 0,media:void 0}),t("data-v-2de04152_1",{source:".ripple{background-color:#1866c04d;border-radius:50%;position:absolute;transform:scale(0);animation:ripple .6s linear;z-index:2}@keyframes ripple{to{transform:scale(2.5);opacity:0}}",map:void 0,media:void 0}))}),{components:{Btn:d({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("button",{staticClass:"btn",on:{click:function(e){return t.$emit("click")}}},[a("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",role:"img","aria-hidden":"true"}},[a("path",{attrs:{d:"M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"}})])])},staticRenderFns:[]},(function(t){t&&t("data-v-41f7b064_0",{source:".btn[data-v-41f7b064]{outline:0;border:none;background:0 0;cursor:pointer}.btn svg[data-v-41f7b064]{height:24px;width:24px}.btn:disabled svg[data-v-41f7b064]{fill:#d6d5d5;cursor:default}",map:void 0,media:void 0})}),{name:"Btn"},"data-v-41f7b064",false,undefined,!1,c,void 0,void 0),VNode:{functional:!0,render:function(t,e){return e.props.node?e.props.node:t("span",e.props.name)}}},directives:{ripple:s,resize:o},props:{vertical:Boolean,navSlider:Boolean,ripple:Boolean,navAuto:Boolean,navItems:{type:Array,required:!0},tabItemActive:{type:Object,default:function(){}}},data:function(){return{pagination:{has:!1,maxOffset:0,minOffset:0,translate:0,offset:0}}},computed:{classes:function(){return{tab__pagination:!0,"tab__pagination--vertical":this.vertical,"tab__pagination--auto":this.navAuto&&!this.vertical}},styles:function(){return{transform:"translate".concat(this.vertical?"Y":"X","(-").concat(this.pagination.translate,"px)")}},paginateIndicator:function(){return{next:this.pagination.translate<this.pagination.maxOffset,prev:this.pagination.translate>0}},orientation:function(){return this.vertical?"portrait":"landscape"}},watch:{vertical:function(){Object.assign(this.$data,this.$options.data()),this.resizable()},navItems:"resizable"},methods:{select:function(t){this.$emit("select",{tabItem:t,byUser:!0}),this.sliderHandler(null==t?void 0:t.model),this.pagination.has&&this.paginationCollapse(t)},sliderHandler:function(t){var e,a,n,i=null===(e=this.$refs)||void 0===e?void 0:e.navItems,r=this.getElementRect({el:i,prefix:"navItems"}),s=r.navItemsLeft,o=r.navItemsTop,d=this.getElementRect({el:null===(a=this.$refs)||void 0===a||null===(n=a[t||this.tabItemActive.model])||void 0===n?void 0:n[0],prefix:"navActive"}),l=d.navActiveWidth,c=d.navActiveHeight,v=d.navActiveLeft,u=d.navActiveTop,f=i.children,m=f[f.length-1];m.removeAttribute("style"),Object.assign(m.style,{portrait:{height:"".concat(c,"px"),top:"".concat(u-o,"px")},landscape:{width:"".concat(l,"px"),left:"".concat(v-s,"px")}}[this.orientation])},getPagination:function(){var a,n,i=null===(a=this.$refs)||void 0===a?void 0:a.navItems,r=this.getElementRect({el:i,prefix:"navItems"}).navItemsWidth,s=this.getElementRect({el:null===(n=this.$refs)||void 0===n?void 0:n.nav,prefix:"nav"}),o=s.navWidth,d=s.navHeight,l=e(null==i?void 0:i.children).slice(0,-1).map((function(t){return t.offsetHeight})).reduce((function(t,e){return Math.abs(t+e)}),0),c=function(e,a,n){var i=Object.entries({has:e,maxOffset:a,minOffset:n,offset:n}).map((function(e){var a=t(e,2),n=a[0],i=a[1];return[n,Math.abs(i)]}));return Object.fromEntries(i)};Object.assign(this.pagination,{portrait:c(l>d,l-d,d),landscape:c(r>o,r-o,o)}[this.orientation])},paginationHandler:function(t){var e=this.pagination,a=e.maxOffset,n=e.offset,i=e.translate,r=e.minOffset;if("prev"===t&&this.paginateIndicator.prev){if(n<=r&&(this.pagination.offset=r),i-n<n)return void(this.pagination.translate=0);this.pagination.translate=i-n}"next"===t&&this.paginateIndicator.next&&(i+n>a&&(this.pagination.offset=a-i),this.pagination.translate=i+this.pagination.offset)},paginationCollapse:function(t){var e,a,n,i=t.model,r=this.getElementRect({el:null===(e=this.$refs)||void 0===e||null===(a=e[i])||void 0===a?void 0:a[0],prefix:"navActive"}),s=r.navActiveRight,o=r.navActiveLeft,d=r.navActiveTop,l=r.navActiveBottom,c=r.navActiveWidth,v=r.navActiveHeight,u=this.getElementRect({el:null===(n=this.$refs)||void 0===n?void 0:n.nav,prefix:"nav"}),f=u.navRight,m=u.navLeft,p=u.navTop,b=u.navBottom,h=this.pagination,_=h.translate,g=h.maxOffset,I=_;this.vertical&&l>b&&(I+=v),this.vertical&&d<p&&(I=v>I?0:I-v),!this.vertical&&s>f&&(I+=c),!this.vertical&&o<m&&(I=c>I?0:I-c),I>g&&(I+=g-I),this.pagination.translate=Math.abs(I)},resizable:function(){var t=this;this.$nextTick((function(){t.getPagination(),t.sliderHandler()}))},getElementRect:function(e){var a=e.el,n=e.prefix;if(a){var i=JSON.parse,r=JSON.stringify,s=Object.entries(i(r(a.getBoundingClientRect()))).map((function(e){var a=t(e,2),i=a[0],r=a[1];return[n+i.charAt(0).toUpperCase()+i.slice(1),r]}));return Object.fromEntries(s)}}}},"data-v-2de04152",false,undefined,!1,c,void 0,void 0)},props:{dark:Boolean,vertical:Boolean,ripple:{type:Boolean,default:!0},slideDuration:{type:[String,Number],default:200},slideVertical:Boolean,slide:{type:Boolean,default:!0},navAuto:Boolean,navSlider:{type:Boolean,default:!0}},data:function(){return{slideSide:"",navItems:[],tabItemActive:{model:"",name:"",disabled:!1},tabItemIndexes:{current:0,last:0,previous:0},tabItems:[]}},computed:{classes:function(){return{tabs:!0,"tabs--vertical":this.vertical,"tabs--dark":this.dark}},transition:function(){return{slide:this.slide,duration:this.slide?this.slideDuration:0,vertical:this.slideVertical,side:this.slideSide}}},watch:{tabItemActive:function(t,e){this.tabItemIndexes.previous=this.findIndexTab(e),this.tabItemIndexes.current=this.findIndexTab(t),this.tabItems[this.tabItemIndexes.current].activeModel=t.model,this.tabItemIndexes.previous>-1&&(this.setTabItemTransitionSide(),this.tabItems[this.tabItemIndexes.previous].activeModel=t.model)}},mounted:function(){this.activeTabItem({tabItem:this.navItems[0],byUser:!1})},methods:{setTabItem:function(t){var e;"TabItem"===(null==t||null===(e=t.$options)||void 0===e?void 0:e._componentTag)&&(this.tabItems.push(t),this.setNavItem(t))},setNavItem:function(t){var e=t.model,a=t.name,n=t.disabled,i=t.nameSlot;this.navItems.push({model:e,name:a,disabled:n,nameSlot:i}),this.tabItemIndexes.last=this.navItems.length-1},activeTabItem:function(t){var e=t.tabItem,a=t.byUser;e.disabled||(this.tabItemActive=e,this.$emit("input",null==e?void 0:e.name),a&&this.$emit("change",null==e?void 0:e.name))},disableTabItem:function(t){var e=this.tabItemIndexes,a=e.current,n=e.last;if(t===a){var i=a===n?a-1:a+1;this.activeTabItem({tabItem:this.navItems[i],byUser:!0})}},setTabItemTransitionSide:function(){var t=this.tabItemIndexes,e=t.current,a=t.previous;this.slideSide=e>a?"right":"left"},findIndexTab:function(t){return this.tabItems.findIndex((function(e){return e.model==t.model}))}}},"data-v-281cca8c",false,undefined,!1,c,void 0,void 0),m=require("crypto"),p=d({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("transition",{attrs:{name:t.slideDirection}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.isActived,expression:"isActived"}],staticClass:"tab-item",style:{"transition-duration":this.transition.duration+"ms"}},[t._t("default")],2)])},staticRenderFns:[]},(function(t){t&&t("data-v-a315dbc4_0",{source:".tab-item[data-v-a315dbc4]{position:absolute;top:0;left:0;z-index:1;height:100%;width:100%;transition:transform cubic-bezier(.25,.8,.5,1)}.slide-left-enter[data-v-a315dbc4],.slide-right-leave-to[data-v-a315dbc4]{transform:translateX(-100%)}.slide-left-leave-to[data-v-a315dbc4],.slide-right-enter[data-v-a315dbc4]{transform:translateX(100%)}.slide-bottom-leave-to[data-v-a315dbc4],.slide-top-enter[data-v-a315dbc4]{transform:translateY(-100%)}.slide-bottom-enter[data-v-a315dbc4],.slide-top-leave-to[data-v-a315dbc4]{transform:translateY(100%)}",map:void 0,media:void 0})}),{name:"TabItem",props:{name:{type:String,default:"Tab Item"},disabled:Boolean},data:function(){return{activeModel:"",model:m.randomBytes(10).toString("hex")}},created:function(){this.tabs.setTabItem(this)},computed:{tabs:function(){return this.$parent},transition:function(){return this.tabs.transition},isActived:function(){return this.activeModel===this.model&&!this.disabled},slideDirection:function(){return this.transition.slide?this.transition.vertical?{left:"slide-top",right:"slide-bottom"}[this.transition.side]:{left:"slide-left",right:"slide-right"}[this.transition.side]:""},ownNavItemIndex:function(){var t=this;return this.tabs.navItems.findIndex((function(e){return e.model===t.model}))}},watch:{disabled:function(t){var e;t&&(null===(e=this.tabs)||void 0===e||e.disableTabItem(this.ownNavItemIndex)),this.tabs.navItems[this.ownNavItemIndex].disabled=t}}},"data-v-a315dbc4",false,undefined,!1,c,void 0,void 0),b=Object.freeze({__proto__:null,Tabs:f,TabItem:p}),h=function(e){Object.entries(b).forEach((function(a){var n=t(a,2),i=n[0],r=n[1];e.component(i,r)}))},_=Object.freeze({__proto__:null,default:h,Tabs:f,TabItem:p});return Object.entries(_).forEach((function(e){var a=t(e,2),n=a[0],i=a[1];"default"!==n&&(h[n]=i)})),h}();
+var VueMaterialTabs=function(){"use strict";function t(t,e,a,n,i,r,o){try{var s=t[r](o),d=s.value}catch(t){return void a(t)}s.done?e(d):Promise.resolve(d).then(n,i)}function e(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var a=t&&("undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"]);if(null==a)return;var n,i,r=[],o=!0,s=!1;try{for(a=a.call(t);!(o=(n=a.next()).done)&&(r.push(n.value),!e||r.length!==e);o=!0);}catch(t){s=!0,i=t}finally{try{o||null==a.return||a.return()}finally{if(s)throw i}}return r}(t,e)||n(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t){return function(t){if(Array.isArray(t))return i(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||n(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){if(t){if("string"==typeof t)return i(t,e);var a=Object.prototype.toString.call(t).slice(8,-1);return"Object"===a&&t.constructor&&(a=t.constructor.name),"Map"===a||"Set"===a?Array.from(t):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?i(t,e):void 0}}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,n=new Array(e);a<e;a++)n[a]=t[a];return n}function r(t){var e=t.currentTarget,a=function(t){var e=t.currentTarget.getBoundingClientRect(),a=t.clientX-e.left,n=t.clientY-e.top,i=Math.sqrt(Math.pow(t.currentTarget.clientWidth,2)+Math.pow(t.currentTarget.clientHeight,2))/2;return{x:"".concat(a-i,"px"),y:"".concat(n-i,"px"),size:"".concat(2*i,"px")}}(t),n=a.size,i=a.y,r=a.x,o=document.createElement("span");o.classList.add("ripple"),o.style.width=o.style.height=n,o.style.top=i,o.style.left=r,e.appendChild(o),setTimeout((function(){return o.remove()}),1e3)}function o(t,e){null==t||t[e?"addEventListener":"removeEventListener"]("click",r)}var s={bind:function(t,e){return o(t,e.value)},update:function(t,e){return o(t,e.value)},unbind:function(t){return o(t,!1)}};var d={inserted:function(t,e){var a=null==e?void 0:e.value;a&&window.addEventListener("resize",a),t._onResize=a},unbind:function(t){t._onResize&&(window.removeEventListener("resize",t._onResize),delete t._onResize)}};function c(t,e,a,n,i,r,o,s,d,c){"boolean"!=typeof o&&(d=s,s=o,o=!1);const l="function"==typeof a?a.options:a;let v;if(t&&t.render&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),n&&(l._scopeId=n),r?(v=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,d(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},l._ssrRegister=v):e&&(v=o?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,s(t))}),v)if(l.functional){const t=l.render;l.render=function(e,a){return v.call(a),t(e,a)}}else{const t=l.beforeCreate;l.beforeCreate=t?[].concat(t,v):[v]}return a}const l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function v(t){return(t,e)=>function(t,e){const a=l?e.media||"default":t,n=f[a]||(f[a]={ids:new Set,styles:[]});if(!n.ids.has(t)){n.ids.add(t);let a=e.source;if(e.map&&(a+="\n/*# sourceURL="+e.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",e.media&&n.element.setAttribute("media",e.media),void 0===u&&(u=document.head||document.getElementsByTagName("head")[0]),u.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(a),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{const t=n.ids.size-1,e=document.createTextNode(a),i=n.element.childNodes;i[t]&&n.element.removeChild(i[t]),i.length?n.element.insertBefore(e,i[t]):n.element.appendChild(e)}}}(t,e)}let u;const f={};var m={components:{Btn:c({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("button",{staticClass:"btn",on:{click:function(e){return t.$emit("click")}}},[a("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",role:"img","aria-hidden":"true"}},[a("path",{attrs:{d:"M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"}})])])},staticRenderFns:[]},(function(t){t&&t("data-v-41f7b064_0",{source:".btn[data-v-41f7b064]{outline:0;border:none;background:0 0;cursor:pointer}.btn svg[data-v-41f7b064]{height:24px;width:24px}.btn:disabled svg[data-v-41f7b064]{fill:#d6d5d5;cursor:default}",map:void 0,media:void 0})}),{name:"Btn"},"data-v-41f7b064",false,undefined,!1,v,void 0,void 0),VNode:{functional:!0,render:function(t,e){var a=e.props;return a.node?a.node:t("span",a.name)}}},directives:{ripple:s,resize:d},props:{vertical:Boolean,navSlider:Boolean,ripple:Boolean,navAuto:Boolean,navItems:{type:Array,required:!0},tabItemActive:{type:Object,default:function(){}}},data:function(){return{pagination:{has:!1,maxOffset:0,minOffset:0,translate:0,offset:0}}},computed:{classes:function(){return{tab__pagination:!0,"tab__pagination--vertical":this.vertical,"tab__pagination--auto":this.navAuto&&!this.vertical}},styles:function(){return{transform:"translate".concat(this.vertical?"Y":"X","(-").concat(this.pagination.translate,"px)")}},paginateIndicator:function(){return{next:this.pagination.translate<this.pagination.maxOffset,prev:this.pagination.translate>0}},orientation:function(){return this.vertical?"portrait":"landscape"}},watch:{navItems:"resizable",vertical:function(){Object.assign(this.$data,this.$options.data()),this.resizable()},tabItemActive:function(t){this.sliderHandler(),this.pagination.has&&this.paginationCollapse(t)}},methods:{select:function(t){null!=t&&t.disabled||this.$emit("select",{tabItem:t,byUser:!0})},sliderHandler:function(){var e,a=this;return(e=regeneratorRuntime.mark((function t(){var e,n,i,r,o,s,d,c,l,v,u,f,m,b;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,a.$nextTick();case 2:r=null===(e=a.$refs)||void 0===e?void 0:e.navItems,o=a.getElementRect({el:r,prefix:"navItems"}),s=o.navItemsLeft,d=o.navItemsTop,c=a.getElementRect({el:null===(n=a.$refs)||void 0===n||null===(i=n[a.tabItemActive.model])||void 0===i?void 0:i[0],prefix:"navActive"}),l=c.navActiveWidth,v=c.navActiveHeight,u=c.navActiveLeft,f=c.navActiveTop,m=r.children,(b=m[m.length-1]).removeAttribute("style"),Object.assign(b.style,{portrait:{height:"".concat(v,"px"),top:"".concat(f-d,"px")},landscape:{width:"".concat(l,"px"),left:"".concat(u-s,"px")}}[a.orientation]);case 9:case"end":return t.stop()}}),t)})),function(){var a=this,n=arguments;return new Promise((function(i,r){var o=e.apply(a,n);function s(e){t(o,i,r,s,d,"next",e)}function d(e){t(o,i,r,s,d,"throw",e)}s(void 0)}))})()},getPagination:function(){var t,n,i=null===(t=this.$refs)||void 0===t?void 0:t.navItems,r=this.getElementRect({el:i,prefix:"navItems"}).navItemsWidth,o=this.getElementRect({el:null===(n=this.$refs)||void 0===n?void 0:n.nav,prefix:"nav"}),s=o.navWidth,d=o.navHeight,c=a(null==i?void 0:i.children).slice(0,-1).map((function(t){return t.offsetHeight})).reduce((function(t,e){return Math.abs(t+e)}),0),l=function(t,a,n){var i=Object.entries({has:t,maxOffset:a,minOffset:n,offset:n}).map((function(t){var a=e(t,2),n=a[0],i=a[1];return[n,Math.abs(i)]}));return Object.fromEntries(i)};Object.assign(this.pagination,{portrait:l(c>d,c-d,d),landscape:l(r>s,r-s,s)}[this.orientation])},onPagination:function(t){var e=this.pagination,a=e.maxOffset,n=e.offset,i=e.translate,r=e.minOffset;if("prev"===t&&this.paginateIndicator.prev){if(n<=r&&(this.pagination.offset=r),i-n<n)return void(this.pagination.translate=0);this.pagination.translate=i-n}"next"===t&&this.paginateIndicator.next&&(i+n>a&&(this.pagination.offset=a-i),this.pagination.translate=i+this.pagination.offset)},paginationCollapse:function(){var t,e,a,n=this.getElementRect({el:null===(t=this.$refs)||void 0===t||null===(e=t[this.tabItemActive.model])||void 0===e?void 0:e[0],prefix:"navActive"}),i=n.navActiveRight,r=n.navActiveLeft,o=n.navActiveTop,s=n.navActiveBottom,d=n.navActiveWidth,c=n.navActiveHeight,l=this.getElementRect({el:null===(a=this.$refs)||void 0===a?void 0:a.nav,prefix:"nav"}),v=l.navRight,u=l.navLeft,f=l.navTop,m=l.navBottom,b=this.pagination,p=b.translate,h=b.maxOffset,_=p;this.vertical&&s>m&&(_+=c),this.vertical&&o<f&&(_=c>_?0:_-c),!this.vertical&&i>v&&(_+=d),!this.vertical&&r<u&&(_=d>_?0:_-d),_>h&&(_+=h-_),this.pagination.translate=Math.abs(_)},resizable:function(){var t=this;this.$nextTick((function(){t.getPagination(),t.sliderHandler()}))},getElementRect:function(t){var a=t.el,n=t.prefix;if(a){var i=JSON.parse,r=JSON.stringify,o=Object.entries(i(r(a.getBoundingClientRect()))).map((function(t){var a=e(t,2),i=a[0],r=a[1];return[n+i.charAt(0).toUpperCase()+i.slice(1),r]}));return Object.fromEntries(o)}}}},b={target:null,touchstartX:0,touchstartY:0,isSwiping:0};function p(t){t&&(b.isSwiping=!0,b.touchstartX=null==t?void 0:t.touches[0].clientX,b.touchstartY=null==t?void 0:t.touches[0].clientY)}function h(t){var e;if(b.isSwiping&&null!==(e=b.target)&&void 0!==e&&e._callback){var a=null==t?void 0:t.changedTouches[0].clientX,n=null==t?void 0:t.changedTouches[0].clientY,i=b.touchstartX-a;b.touchstartY-n>0||i>0?b.target._callback("next"):b.target._callback("prev"),b.isSwiping=!1}}function _(t){[["touchstart",p],["touchmove",h]].forEach((function(a){var n,i=e(a,2),r=i[0],o=i[1];null==b||null===(n=b.target)||void 0===n||n[t?"addEventListener":"removeEventListener"](r,o)}))}var g=c({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{class:t.classes},[t._t("nav",[a("NavTab",t._b({on:{select:t.activeTabItem}},"NavTab",{ripple:t.ripple,navAuto:t.navAuto,navItems:t.navItems,vertical:t.vertical,navSlider:t.navSlider,tabItemActive:t.tabItemActive},!1))],{items:t.navItems,active:t.tabItemActive}),t._v(" "),a("div",{directives:[{name:"touch",rawName:"v-touch",value:t.onTouchSlide,expression:"onTouchSlide"}],staticClass:"tabs__content"},[t._t("default")],2)],2)},staticRenderFns:[]},(function(t){t&&t("data-v-3d0a3126_0",{source:".tabs[data-v-3d0a3126]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-3d0a3126]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;height:100%;width:100%;flex:1 100%}.tabs--vertical[data-v-3d0a3126]{flex-direction:row}.tabs--dark[data-v-3d0a3126]{background:#222831}.tabs--dark .tabs__nav__item[data-v-3d0a3126]{color:#f1f1f1}.tabs--dark .tabs__nav__items .active[data-v-3d0a3126]{color:#fff}.tabs--dark .tabs__nav__items .disabled[data-v-3d0a3126]{background:#2c2f35}.tabs--dark .tab__pagination[data-v-3d0a3126] .btn svg{fill:#d6d5d5}.tabs--dark .tab__pagination[data-v-3d0a3126] .btn:disabled svg{fill:#56575c}.tabs--dark .tab__pagination[data-v-3d0a3126] .tab__nav__item:hover{background:#424750}",map:void 0,media:void 0})}),{name:"Tabs",components:{NavTab:c({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{directives:[{name:"resize",rawName:"v-resize",value:t.resizable,expression:"resizable"}],class:t.classes},[a("div",{staticClass:"tab__pagination__prev"},[t.pagination.has?a("Btn",{attrs:{disabled:!t.paginateIndicator.prev},on:{click:function(e){return t.onPagination("prev")}}}):t._e()],1),t._v(" "),a("nav",{ref:"nav",staticClass:"tab__nav"},[a("ul",{ref:"navItems",staticClass:"tab__nav__items",style:t.styles},[t._l(t.navItems,(function(e,n){return a("li",{directives:[{name:"ripple",rawName:"v-ripple",value:t.ripple&&!e.disabled,expression:"ripple && !navItem.disabled"}],key:"tab-item-"+n,ref:e.model,refInFor:!0,staticClass:"tab__nav__item",class:{active:e.model===t.tabItemActive.model,disabled:e.disabled},on:{click:function(a){return a.preventDefault(),t.select(e)}}},[a("VNode",{attrs:{node:e.nameSlot,name:e.name}})],1)})),t._v(" "),t.navSlider?a("hr",{staticClass:"tab__slider"}):t._e()],2)]),t._v(" "),a("div",{staticClass:"tab__pagination__next"},[t.pagination.has?a("Btn",{attrs:{disabled:!t.paginateIndicator.next},on:{click:function(e){return t.onPagination("next")}}}):t._e()],1)])},staticRenderFns:[]},(function(t){t&&(t("data-v-c06add7c_0",{source:".tab__pagination[data-v-c06add7c]{display:flex;justify-content:space-between;align-items:center;vertical-align:middle;max-width:100%;flex:0 1 auto;position:relative;contain:content}.tab__pagination .tab__pagination__prev[data-v-c06add7c],.tab__pagination__next[data-v-c06add7c]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-c06add7c] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-c06add7c]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-c06add7c]{display:flex;margin:0;padding:0;flex:1 auto;transition:.3s cubic-bezier(.25,.8,.5,1);height:100%}.tab__nav__items .tab__nav__item[data-v-c06add7c]{list-style:none;text-align:center;cursor:pointer;padding:.9rem 1rem;letter-spacing:.0892857143em;display:flex;justify-content:center;align-items:center;text-align:center;color:gray;text-transform:uppercase;font-size:.875rem;font-weight:500;white-space:normal;transition:background .1s ease;position:relative;overflow:hidden;min-width:90px;max-width:360px;user-select:none}.tab__nav__items .tab__nav__item[data-v-c06add7c]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-c06add7c]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-c06add7c]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-c06add7c]{background:#f3f2f2}.tab__slider[data-v-c06add7c]{height:2px;width:2px;background:#1867c0;border:none;margin:0;padding:0;bottom:0;position:absolute;transition:left .3s cubic-bezier(.25,.8,.5,1),top .3s cubic-bezier(.25,.8,.5,1)}.tab__pagination--vertical[data-v-c06add7c]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-c06add7c]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-c06add7c]{padding:0;margin:0}.tab__pagination--vertical[data-v-c06add7c] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-c06add7c] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-c06add7c]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-c06add7c]:hover{background:#2f3236}.tab__pagination--auto .tab__nav__item[data-v-c06add7c]{flex:1 auto}",map:void 0,media:void 0}),t("data-v-c06add7c_1",{source:".ripple{background-color:#1866c04d;border-radius:50%;position:absolute;transform:scale(0);animation:ripple .6s linear;z-index:2}@keyframes ripple{to{transform:scale(2.5);opacity:0}}",map:void 0,media:void 0}))}),m,"data-v-c06add7c",false,undefined,!1,v,void 0,void 0)},directives:{touch:{inserted:function(t,e){var a=e.value;a&&t&&(b.target=t,b.target._callback=a,_(!0))},unbind:function(){_(!1)}}},props:{dark:Boolean,vertical:Boolean,ripple:{type:Boolean,default:!0},slideDuration:{type:[String,Number],default:200},slideVertical:Boolean,slide:{type:Boolean,default:!0},navAuto:Boolean,navSlider:{type:Boolean,default:!0}},data:function(){return{slideSide:"",navItems:[],tabItemActive:{model:"",name:"",disabled:!1},tabItemIndexes:{current:0,last:0,previous:0},tabItems:[]}},computed:{classes:function(){return{tabs:!0,"tabs--vertical":this.vertical,"tabs--dark":this.dark}},transition:function(){return{slide:this.slide,duration:this.slide?this.slideDuration:0,vertical:this.slideVertical,side:this.slideSide}}},watch:{tabItemActive:function(t,e){this.tabItemIndexes.previous=this.findIndexTab(e),this.tabItemIndexes.current=this.findIndexTab(t),this.tabItems[this.tabItemIndexes.current].activeModel=t.model,this.tabItemIndexes.previous>-1&&(this.setTabItemTransitionSide(),this.tabItems[this.tabItemIndexes.previous].activeModel=t.model)}},mounted:function(){this.activeTabItem({tabItem:this.navItems[0],byUser:!1})},methods:{setTabItem:function(t){var e;"TabItem"===(null==t||null===(e=t.$options)||void 0===e?void 0:e._componentTag)&&(this.tabItems.push(t),this.setNavItem(t))},setNavItem:function(t){var e,a=t.model,n=t.name,i=t.disabled,r=t.$slots;this.navItems.push({model:a,name:n,disabled:i,nameSlot:null===(e=r.name)||void 0===e?void 0:e[0]}),this.tabItemIndexes.last=this.navItems.length-1},activeTabItem:function(t){var e=t.tabItem,a=t.byUser;e.disabled||(this.tabItemActive=e,this.$emit("input",null==e?void 0:e.name),a&&this.$emit("change",null==e?void 0:e.name))},disableTabItem:function(t){var e=this.tabItemIndexes,a=e.current,n=e.last;if(t===a){var i=a===n?a-1:a+1;this.activeTabItem({tabItem:this.navItems[i],byUser:!0})}},setTabItemTransitionSide:function(){var t=this.tabItemIndexes,e=t.current,a=t.previous;this.slideSide=e>a?"right":"left"},onTouchSlide:function(t){var e,a=this.tabItemIndexes,n=a.current,i=a.last;"next"===t&&n<i?e=this.navItems[n+1]:"prev"===t&&n>0&&(e=this.navItems[n-1]),e&&this.activeTabItem({tabItem:e,byUser:!0})},findIndexTab:function(t){return this.tabItems.findIndex((function(e){return e.model==t.model}))}}},"data-v-3d0a3126",false,undefined,!1,v,void 0,void 0),I=require("crypto"),x=c({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("transition",{attrs:{name:t.slideDirection}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.isActived,expression:"isActived"}],staticClass:"tab-item",style:{"transition-duration":t.transition.duration+"ms"}},[t._t("default")],2)])},staticRenderFns:[]},(function(t){t&&t("data-v-2610bb0c_0",{source:".tab-item[data-v-2610bb0c]{position:absolute;top:0;left:0;z-index:1;height:100%;width:100%;transition:transform cubic-bezier(.25,.8,.5,1)}.slide-left-enter[data-v-2610bb0c],.slide-right-leave-to[data-v-2610bb0c]{transform:translateX(-100%)}.slide-left-leave-to[data-v-2610bb0c],.slide-right-enter[data-v-2610bb0c]{transform:translateX(100%)}.slide-bottom-leave-to[data-v-2610bb0c],.slide-top-enter[data-v-2610bb0c]{transform:translateY(-100%)}.slide-bottom-enter[data-v-2610bb0c],.slide-top-leave-to[data-v-2610bb0c]{transform:translateY(100%)}",map:void 0,media:void 0})}),{name:"TabItem",props:{name:{type:String,default:"Tab Item"},disabled:Boolean},data:function(){return{activeModel:"",model:I.randomBytes(10).toString("hex")}},mounted:function(){this.tabs.setTabItem(this)},computed:{tabs:function(){return this.$parent},transition:function(){return this.tabs.transition},isActived:function(){return this.activeModel===this.model&&!this.disabled},slideDirection:function(){return this.transition.slide?this.transition.vertical?{left:"slide-top",right:"slide-bottom"}[this.transition.side]:{left:"slide-left",right:"slide-right"}[this.transition.side]:""},ownNavItemIndex:function(){var t=this;return this.tabs.navItems.findIndex((function(e){return e.model===t.model}))}},watch:{disabled:function(t){var e;t&&(null===(e=this.tabs)||void 0===e||e.disableTabItem(this.ownNavItemIndex)),this.tabs.navItems[this.ownNavItemIndex].disabled=t}}},"data-v-2610bb0c",false,undefined,!1,v,void 0,void 0),y=Object.freeze({__proto__:null,Tabs:g,TabItem:x}),w=function(t){Object.entries(y).forEach((function(a){var n=e(a,2),i=n[0],r=n[1];t.component(i,r)}))},T=Object.freeze({__proto__:null,default:w,Tabs:g,TabItem:x});return Object.entries(T).forEach((function(t){var a=e(t,2),n=a[0],i=a[1];"default"!==n&&(w[n]=i)})),w}();

dist/vue-material-tabs.ssr.js

@@ -1,2 +0,38 @@
-'use strict';function _slicedToArray(arr, i) {
+'use strict';function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+        args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+
+      _next(undefined);
+    });
+  };
+}
+
+function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
@@ -319,4 +355,5 @@ }
       functional: true,
-      render: function render(h, ctx) {
-        return ctx.props.node ? ctx.props.node : h("span", ctx.props.name);
+      render: function render(h, _ref) {
+        var props = _ref.props;
+        return props.node ? props.node : h("span", props.name);
       }
@@ -379,2 +416,3 @@ }
     // Force recalc the pagination offsets when the orientation/navItems is change;
+    navItems: "resizable",
     vertical: function vertical() {
@@ -384,55 +422,70 @@ Object.assign(this.$data, this.$options.data());
     },
-    navItems: "resizable"
+    tabItemActive: function tabItemActive(payload) {
+      this.sliderHandler();
+
+      if (this.pagination.has) {
+        this.paginationCollapse(payload);
+      }
+    }
   },
   methods: {
     select: function select(navItem) {
-      this.$emit("select", {
-        tabItem: navItem,
-        byUser: true
-      });
-      this.sliderHandler(navItem === null || navItem === void 0 ? void 0 : navItem.model);
-
-      if (this.pagination.has) {
-        this.paginationCollapse(navItem);
+      if (!(navItem !== null && navItem !== void 0 && navItem.disabled)) {
+        this.$emit("select", {
+          tabItem: navItem,
+          byUser: true
+        });
       }
     },
-    sliderHandler: function sliderHandler(model) {
-      var _this$$refs, _this$$refs2, _this$$refs3;
+    sliderHandler: function sliderHandler() {
+      var _this = this;
 
-      var navItemsElement = (_this$$refs = this.$refs) === null || _this$$refs === void 0 ? void 0 : _this$$refs.navItems;
+      return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+        var _this$$refs, _this$$refs2, _this$$refs2$_this$ta;
 
-      var _this$getElementRect = this.getElementRect({
-        el: navItemsElement,
-        prefix: "navItems"
-      }),
-          navItemsLeft = _this$getElementRect.navItemsLeft,
-          navItemsTop = _this$getElementRect.navItemsTop;
+        var navItemsElement, _this$getElementRect, navItemsLeft, navItemsTop, _this$getElementRect2, navActiveWidth, navActiveHeight, navActiveLeft, navActiveTop, children, sliderEl;
 
-      var _this$getElementRect2 = this.getElementRect({
-        el: (_this$$refs2 = this.$refs) === null || _this$$refs2 === void 0 ? void 0 : (_this$$refs3 = _this$$refs2[model || this.tabItemActive.model]) === null || _this$$refs3 === void 0 ? void 0 : _this$$refs3[0],
-        prefix: "navActive"
-      }),
-          navActiveWidth = _this$getElementRect2.navActiveWidth,
-          navActiveHeight = _this$getElementRect2.navActiveHeight,
-          navActiveLeft = _this$getElementRect2.navActiveLeft,
-          navActiveTop = _this$getElementRect2.navActiveTop;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return _this.$nextTick();
 
-      var children = navItemsElement.children;
-      var sliderEl = children[children.length - 1];
-      sliderEl.removeAttribute("style");
-      Object.assign(sliderEl.style, {
-        portrait: {
-          height: "".concat(navActiveHeight, "px"),
-          top: "".concat(navActiveTop - navItemsTop, "px")
-        },
-        landscape: {
-          width: "".concat(navActiveWidth, "px"),
-          left: "".concat(navActiveLeft - navItemsLeft, "px")
-        }
-      }[this.orientation]);
+              case 2:
+                navItemsElement = (_this$$refs = _this.$refs) === null || _this$$refs === void 0 ? void 0 : _this$$refs.navItems;
+                _this$getElementRect = _this.getElementRect({
+                  el: navItemsElement,
+                  prefix: "navItems"
+                }), navItemsLeft = _this$getElementRect.navItemsLeft, navItemsTop = _this$getElementRect.navItemsTop;
+                _this$getElementRect2 = _this.getElementRect({
+                  el: (_this$$refs2 = _this.$refs) === null || _this$$refs2 === void 0 ? void 0 : (_this$$refs2$_this$ta = _this$$refs2[_this.tabItemActive.model]) === null || _this$$refs2$_this$ta === void 0 ? void 0 : _this$$refs2$_this$ta[0],
+                  prefix: "navActive"
+                }), navActiveWidth = _this$getElementRect2.navActiveWidth, navActiveHeight = _this$getElementRect2.navActiveHeight, navActiveLeft = _this$getElementRect2.navActiveLeft, navActiveTop = _this$getElementRect2.navActiveTop;
+                children = navItemsElement.children;
+                sliderEl = children[children.length - 1];
+                sliderEl.removeAttribute("style");
+                Object.assign(sliderEl.style, {
+                  portrait: {
+                    height: "".concat(navActiveHeight, "px"),
+                    top: "".concat(navActiveTop - navItemsTop, "px")
+                  },
+                  landscape: {
+                    width: "".concat(navActiveWidth, "px"),
+                    left: "".concat(navActiveLeft - navItemsLeft, "px")
+                  }
+                }[_this.orientation]);
+
+              case 9:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }))();
     },
     getPagination: function getPagination() {
-      var _this$$refs4, _this$$refs5;
+      var _this$$refs3, _this$$refs4;
 
-      var navItemsElement = (_this$$refs4 = this.$refs) === null || _this$$refs4 === void 0 ? void 0 : _this$$refs4.navItems;
+      var navItemsElement = (_this$$refs3 = this.$refs) === null || _this$$refs3 === void 0 ? void 0 : _this$$refs3.navItems;
 
@@ -446,3 +499,3 @@ var _this$getElementRect3 = this.getElementRect({
       var _this$getElementRect4 = this.getElementRect({
-        el: (_this$$refs5 = this.$refs) === null || _this$$refs5 === void 0 ? void 0 : _this$$refs5.nav,
+        el: (_this$$refs4 = this.$refs) === null || _this$$refs4 === void 0 ? void 0 : _this$$refs4.nav,
         prefix: "nav"
@@ -465,6 +518,6 @@ }),
           offset: minOffset
-        }).map(function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 2),
-              k = _ref2[0],
-              v = _ref2[1];
+        }).map(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+              k = _ref3[0],
+              v = _ref3[1];
 
@@ -481,3 +534,3 @@ return [k, Math.abs(v)];
     },
-    paginationHandler: function paginationHandler(type) {
+    onPagination: function onPagination(to) {
       var _this$pagination = this.pagination,
@@ -489,3 +542,3 @@ maxOffset = _this$pagination.maxOffset,
 
-      if (type === "prev" && this.paginateIndicator.prev) {
+      if (to === "prev" && this.paginateIndicator.prev) {
         if (offset <= minOffset) {
@@ -503,3 +556,3 @@ this.pagination.offset = minOffset;
 
-      if (type === "next" && this.paginateIndicator.next) {
+      if (to === "next" && this.paginateIndicator.next) {
         if (translate + offset > maxOffset) {
@@ -512,9 +565,7 @@ this.pagination.offset = maxOffset - translate;
     },
-    paginationCollapse: function paginationCollapse(_ref3) {
-      var _this$$refs6, _this$$refs6$model, _this$$refs7;
+    paginationCollapse: function paginationCollapse() {
+      var _this$$refs5, _this$$refs5$this$tab, _this$$refs6;
 
-      var model = _ref3.model;
-
       var _this$getElementRect5 = this.getElementRect({
-        el: (_this$$refs6 = this.$refs) === null || _this$$refs6 === void 0 ? void 0 : (_this$$refs6$model = _this$$refs6[model]) === null || _this$$refs6$model === void 0 ? void 0 : _this$$refs6$model[0],
+        el: (_this$$refs5 = this.$refs) === null || _this$$refs5 === void 0 ? void 0 : (_this$$refs5$this$tab = _this$$refs5[this.tabItemActive.model]) === null || _this$$refs5$this$tab === void 0 ? void 0 : _this$$refs5$this$tab[0],
         prefix: "navActive"
@@ -530,3 +581,3 @@ }),
       var _this$getElementRect6 = this.getElementRect({
-        el: (_this$$refs7 = this.$refs) === null || _this$$refs7 === void 0 ? void 0 : _this$$refs7.nav,
+        el: (_this$$refs6 = this.$refs) === null || _this$$refs6 === void 0 ? void 0 : _this$$refs6.nav,
         prefix: "nav"
@@ -568,8 +619,8 @@ }),
     resizable: function resizable() {
-      var _this = this;
+      var _this2 = this;
 
       this.$nextTick(function () {
-        _this.getPagination();
+        _this2.getPagination();
 
-        _this.sliderHandler();
+        _this2.sliderHandler();
       });
@@ -613,3 +664,3 @@ },
     class: _vm.classes
-  }, [_vm._ssrNode("<div class=\"tab__pagination__prev\" data-v-2de04152>", "</div>", [_vm.pagination.has ? _c('Btn', {
+  }, [_vm._ssrNode("<div class=\"tab__pagination__prev\" data-v-c06add7c>", "</div>", [_vm.pagination.has ? _c('Btn', {
     attrs: {
@@ -620,6 +671,6 @@ "disabled": !_vm.paginateIndicator.prev
       "click": function click($event) {
-        return _vm.paginationHandler('prev');
+        return _vm.onPagination('prev');
       }
     }
-  }) : _vm._e()], 1), _vm._ssrNode(" "), _vm._ssrNode("<nav class=\"tab__nav\" data-v-2de04152>", "</nav>", [_vm._ssrNode("<ul class=\"tab__nav__items\"" + _vm._ssrStyle(null, _vm.styles, null) + " data-v-2de04152>", "</ul>", [_vm._l(_vm.navItems, function (navItem, index) {
+  }) : _vm._e()], 1), _vm._ssrNode(" "), _vm._ssrNode("<nav class=\"tab__nav\" data-v-c06add7c>", "</nav>", [_vm._ssrNode("<ul class=\"tab__nav__items\"" + _vm._ssrStyle(null, _vm.styles, null) + " data-v-c06add7c>", "</ul>", [_vm._l(_vm.navItems, function (navItem, index) {
     return _c('li', {
@@ -652,3 +703,3 @@ directives: [{
     })], 1);
-  }), _vm._ssrNode(" " + (_vm.navSlider ? "<hr class=\"tab__slider\" data-v-2de04152>" : "<!---->"))], 2)]), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"tab__pagination__next\" data-v-2de04152>", "</div>", [_vm.pagination.has ? _c('Btn', {
+  }), _vm._ssrNode(" " + (_vm.navSlider ? "<hr class=\"tab__slider\" data-v-c06add7c>" : "<!---->"))], 2)]), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"tab__pagination__next\" data-v-c06add7c>", "</div>", [_vm.pagination.has ? _c('Btn', {
     attrs: {
@@ -659,3 +710,3 @@ "disabled": !_vm.paginateIndicator.next
       "click": function click($event) {
-        return _vm.paginationHandler('next');
+        return _vm.onPagination('next');
       }
@@ -671,7 +722,7 @@ }
   if (!inject) return;
-  inject("data-v-2de04152_0", {
-    source: ".tab__pagination[data-v-2de04152]{display:flex;justify-content:space-between;align-items:center;vertical-align:middle;max-width:100%;flex:0 1 auto;position:relative;contain:content}.tab__pagination .tab__pagination__prev[data-v-2de04152],.tab__pagination__next[data-v-2de04152]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-2de04152] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-2de04152]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-2de04152]{display:flex;margin:0;padding:0;flex:1 auto;transition:.3s cubic-bezier(.25,.8,.5,1);height:100%}.tab__nav__items .tab__nav__item[data-v-2de04152]{list-style:none;text-align:center;cursor:pointer;padding:.9rem 1rem;letter-spacing:.0892857143em;display:flex;justify-content:center;align-items:center;text-align:center;color:gray;text-transform:uppercase;font-size:.875rem;font-weight:500;white-space:normal;transition:background .1s ease;position:relative;overflow:hidden;min-width:90px;max-width:360px;user-select:none}.tab__nav__items .tab__nav__item[data-v-2de04152]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-2de04152]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-2de04152]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-2de04152]{background:#f3f2f2}.tab__slider[data-v-2de04152]{height:2px;width:2px;background:#1867c0;border:none;margin:0;padding:0;bottom:0;position:absolute;transition:left .3s cubic-bezier(.25,.8,.5,1),top .3s cubic-bezier(.25,.8,.5,1)}.tab__pagination--vertical[data-v-2de04152]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-2de04152]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-2de04152]{padding:0;margin:0}.tab__pagination--vertical[data-v-2de04152] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-2de04152] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-2de04152]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-2de04152]:hover{background:#2f3236}.tab__pagination--auto .tab__nav__item[data-v-2de04152]{flex:1 auto}",
+  inject("data-v-c06add7c_0", {
+    source: ".tab__pagination[data-v-c06add7c]{display:flex;justify-content:space-between;align-items:center;vertical-align:middle;max-width:100%;flex:0 1 auto;position:relative;contain:content}.tab__pagination .tab__pagination__prev[data-v-c06add7c],.tab__pagination__next[data-v-c06add7c]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-c06add7c] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-c06add7c]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-c06add7c]{display:flex;margin:0;padding:0;flex:1 auto;transition:.3s cubic-bezier(.25,.8,.5,1);height:100%}.tab__nav__items .tab__nav__item[data-v-c06add7c]{list-style:none;text-align:center;cursor:pointer;padding:.9rem 1rem;letter-spacing:.0892857143em;display:flex;justify-content:center;align-items:center;text-align:center;color:gray;text-transform:uppercase;font-size:.875rem;font-weight:500;white-space:normal;transition:background .1s ease;position:relative;overflow:hidden;min-width:90px;max-width:360px;user-select:none}.tab__nav__items .tab__nav__item[data-v-c06add7c]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-c06add7c]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-c06add7c]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-c06add7c]{background:#f3f2f2}.tab__slider[data-v-c06add7c]{height:2px;width:2px;background:#1867c0;border:none;margin:0;padding:0;bottom:0;position:absolute;transition:left .3s cubic-bezier(.25,.8,.5,1),top .3s cubic-bezier(.25,.8,.5,1)}.tab__pagination--vertical[data-v-c06add7c]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-c06add7c]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-c06add7c]{padding:0;margin:0}.tab__pagination--vertical[data-v-c06add7c] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-c06add7c] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-c06add7c]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-c06add7c]:hover{background:#2f3236}.tab__pagination--auto .tab__nav__item[data-v-c06add7c]{flex:1 auto}",
     map: undefined,
     media: undefined
-  }), inject("data-v-2de04152_1", {
+  }), inject("data-v-c06add7c_1", {
     source: ".ripple{background-color:#1866c04d;border-radius:50%;position:absolute;transform:scale(0);animation:ripple .6s linear;z-index:2}@keyframes ripple{to{transform:scale(2.5);opacity:0}}",
@@ -685,6 +736,6 @@ map: undefined,
 
-var __vue_scope_id__$2 = "data-v-2de04152";
+var __vue_scope_id__$2 = "data-v-c06add7c";
 /* module identifier */
 
-var __vue_module_identifier__$2 = "data-v-2de04152";
+var __vue_module_identifier__$2 = "data-v-c06add7c";
 /* functional template */
@@ -698,3 +749,52 @@
   staticRenderFns: __vue_staticRenderFns__$2
-}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, createInjectorSSR, undefined);//
+}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, createInjectorSSR, undefined);var state = {
+  target: null,
+  touchstartX: 0,
+  touchstartY: 0,
+  isSwiping: 0
+};
+
+function start(e) {
+  if (!e) return;
+  state.isSwiping = true;
+  state.touchstartX = e === null || e === void 0 ? void 0 : e.touches[0].clientX;
+  state.touchstartY = e === null || e === void 0 ? void 0 : e.touches[0].clientY;
+}
+
+function move(e) {
+  var _state$target;
+
+  if (!state.isSwiping || !((_state$target = state.target) !== null && _state$target !== void 0 && _state$target._callback)) return;
+  var touchendX = e === null || e === void 0 ? void 0 : e.changedTouches[0].clientX;
+  var touchendY = e === null || e === void 0 ? void 0 : e.changedTouches[0].clientY;
+  var diffX = state.touchstartX - touchendX;
+  var diffY = state.touchstartY - touchendY;
+  if (diffY > 0 || diffX > 0) state.target._callback("next");else state.target._callback("prev");
+  state.isSwiping = false;
+}
+
+function listeners(add) {
+  [["touchstart", start], ["touchmove", move]].forEach(function (_ref) {
+    var _state$target2;
+
+    var _ref2 = _slicedToArray(_ref, 2),
+        k = _ref2[0],
+        v = _ref2[1];
+
+    state === null || state === void 0 ? void 0 : (_state$target2 = state.target) === null || _state$target2 === void 0 ? void 0 : _state$target2[add ? "addEventListener" : "removeEventListener"](k, v);
+  });
+}
+
+var touch = {
+  inserted: function inserted(el, _ref3) {
+    var value = _ref3.value;
+    if (!value || !el) return;
+    state.target = el;
+    state.target._callback = value;
+    listeners(true);
+  },
+  unbind: function unbind() {
+    listeners(false);
+  }
+};//
 var script$1 = {
@@ -705,2 +805,5 @@ name: "Tabs",
   },
+  directives: {
+    touch: touch
+  },
   props: {
@@ -790,6 +893,8 @@ dark: Boolean,
     setNavItem: function setNavItem(_ref) {
+      var _$slots$name;
+
       var model = _ref.model,
           name = _ref.name,
           disabled = _ref.disabled,
-          nameSlot = _ref.nameSlot;
+          $slots = _ref.$slots;
       this.navItems.push({
@@ -799,3 +904,3 @@ model: model,
         disabled: disabled,
-        nameSlot: nameSlot
+        nameSlot: (_$slots$name = $slots.name) === null || _$slots$name === void 0 ? void 0 : _$slots$name[0]
       });
@@ -833,2 +938,19 @@ this.tabItemIndexes.last = this.navItems.length - 1;
     },
+    onTouchSlide: function onTouchSlide(to) {
+      var tabItem;
+      var _this$tabItemIndexes3 = this.tabItemIndexes,
+          current = _this$tabItemIndexes3.current,
+          last = _this$tabItemIndexes3.last;
+
+      if (to === "next" && current < last) {
+        tabItem = this.navItems[current + 1];
+      } else if (to === "prev" && current > 0) {
+        tabItem = this.navItems[current - 1];
+      }
+
+      tabItem && this.activeTabItem({
+        tabItem: tabItem,
+        byUser: true
+      });
+    },
     findIndexTab: function findIndexTab(tab) {
@@ -867,3 +989,11 @@ return this.tabItems.findIndex(function (el) {
     "active": _vm.tabItemActive
-  }), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"tabs__content\" data-v-281cca8c>", "</div>", [_vm._t("default")], 2)], 2);
+  }), _vm._ssrNode(" "), _c('div', {
+    directives: [{
+      name: "touch",
+      rawName: "v-touch",
+      value: _vm.onTouchSlide,
+      expression: "onTouchSlide"
+    }],
+    staticClass: "tabs__content"
+  }, [_vm._t("default")], 2)], 2);
 };
@@ -876,4 +1006,4 @@
   if (!inject) return;
-  inject("data-v-281cca8c_0", {
-    source: ".tabs[data-v-281cca8c]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-281cca8c]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;height:100%;width:100%;flex:1 100%}.tabs--vertical[data-v-281cca8c]{flex-direction:row}.tabs--dark[data-v-281cca8c]{background:#222831}.tabs--dark .tabs__nav__item[data-v-281cca8c]{color:#f1f1f1}.tabs--dark .tabs__nav__items .active[data-v-281cca8c]{color:#fff}.tabs--dark .tabs__nav__items .disabled[data-v-281cca8c]{background:#2c2f35}.tabs--dark .tab__pagination[data-v-281cca8c] .btn svg{fill:#d6d5d5}.tabs--dark .tab__pagination[data-v-281cca8c] .btn:disabled svg{fill:#56575c}.tabs--dark .tab__pagination[data-v-281cca8c] .tab__nav__item:hover{background:#424750}",
+  inject("data-v-3d0a3126_0", {
+    source: ".tabs[data-v-3d0a3126]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-3d0a3126]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;height:100%;width:100%;flex:1 100%}.tabs--vertical[data-v-3d0a3126]{flex-direction:row}.tabs--dark[data-v-3d0a3126]{background:#222831}.tabs--dark .tabs__nav__item[data-v-3d0a3126]{color:#f1f1f1}.tabs--dark .tabs__nav__items .active[data-v-3d0a3126]{color:#fff}.tabs--dark .tabs__nav__items .disabled[data-v-3d0a3126]{background:#2c2f35}.tabs--dark .tab__pagination[data-v-3d0a3126] .btn svg{fill:#d6d5d5}.tabs--dark .tab__pagination[data-v-3d0a3126] .btn:disabled svg{fill:#56575c}.tabs--dark .tab__pagination[data-v-3d0a3126] .tab__nav__item:hover{background:#424750}",
     map: undefined,
@@ -886,6 +1016,6 @@ media: undefined
 
-var __vue_scope_id__$1 = "data-v-281cca8c";
+var __vue_scope_id__$1 = "data-v-3d0a3126";
 /* module identifier */
 
-var __vue_module_identifier__$1 = "data-v-281cca8c";
+var __vue_module_identifier__$1 = "data-v-3d0a3126";
 /* functional template */
@@ -928,3 +1058,3 @@
   },
-  created: function created() {
+  mounted: function mounted() {
     this.tabs.setTabItem(this);
@@ -997,3 +1127,3 @@ },
     style: {
-      'transition-duration': this.transition.duration + "ms"
+      'transition-duration': _vm.transition.duration + "ms"
     }
@@ -1008,4 +1138,4 @@ }, [_vm._t("default")], 2)]);
   if (!inject) return;
-  inject("data-v-a315dbc4_0", {
-    source: ".tab-item[data-v-a315dbc4]{position:absolute;top:0;left:0;z-index:1;height:100%;width:100%;transition:transform cubic-bezier(.25,.8,.5,1)}.slide-left-enter[data-v-a315dbc4],.slide-right-leave-to[data-v-a315dbc4]{transform:translateX(-100%)}.slide-left-leave-to[data-v-a315dbc4],.slide-right-enter[data-v-a315dbc4]{transform:translateX(100%)}.slide-bottom-leave-to[data-v-a315dbc4],.slide-top-enter[data-v-a315dbc4]{transform:translateY(-100%)}.slide-bottom-enter[data-v-a315dbc4],.slide-top-leave-to[data-v-a315dbc4]{transform:translateY(100%)}",
+  inject("data-v-2610bb0c_0", {
+    source: ".tab-item[data-v-2610bb0c]{position:absolute;top:0;left:0;z-index:1;height:100%;width:100%;transition:transform cubic-bezier(.25,.8,.5,1)}.slide-left-enter[data-v-2610bb0c],.slide-right-leave-to[data-v-2610bb0c]{transform:translateX(-100%)}.slide-left-leave-to[data-v-2610bb0c],.slide-right-enter[data-v-2610bb0c]{transform:translateX(100%)}.slide-bottom-leave-to[data-v-2610bb0c],.slide-top-enter[data-v-2610bb0c]{transform:translateY(-100%)}.slide-bottom-enter[data-v-2610bb0c],.slide-top-leave-to[data-v-2610bb0c]{transform:translateY(100%)}",
     map: undefined,
@@ -1018,6 +1148,6 @@ media: undefined
 
-var __vue_scope_id__ = "data-v-a315dbc4";
+var __vue_scope_id__ = "data-v-2610bb0c";
 /* module identifier */
 
-var __vue_module_identifier__ = "data-v-a315dbc4";
+var __vue_module_identifier__ = "data-v-2610bb0c";
 /* functional template */
@@ -1024,0 +1154,0 @@

package.json

 {
   "name": "vue-material-tabs",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Vue.js tabs component based in material design",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

115951

increased by8.01%

Lines of code

2016

increased by10.16%

No dependency changes