vue-material-tabs - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/vue-material-tabs.esm.js

@@ -278,3 +278,3 @@ function calc(e) {
       functional: true,
-      render: (h, ctx) => h("span", [ctx.props.node])
+      render: (_, ctx) => ctx.props.node
     }
@@ -314,3 +314,3 @@ },
         "tab__pagination--vertical": this.vertical,
-        "tabs__nav--auto": this.navAuto && !this.vertical
+        "tab__pagination--auto": this.navAuto && !this.vertical
       };
@@ -330,2 +330,6 @@ },
       };
+    },
+
+    orientation() {
+      return this.vertical ? "portrait" : "landscape";
     }
@@ -335,8 +339,9 @@
   watch: {
-    vertical: ["sliderHandler", "setPagination"],
-    tabItemActive: ["sliderHandler", "paginationBySomething"]
+    vertical: ["sliderHandler", "setPaginationOffset"],
+    tabItemActive: ["sliderHandler", "paginationByCollapse"]
   },
 
   mounted() {
-    this.setPagination();
+    this.setPaginationOffset();
+    this.getElementRect(this.$refs.nav, "nav");
   },
@@ -352,67 +357,71 @@
 
-    testando() {
-      console.log("está fazendo o resize");
-    },
-
     async sliderHandler() {
-      var _this$$refs, _this$$refs$this$tabI, _this$$refs2;
+      var _this$$refs, _this$$refs2, _this$$refs2$this$tab;
 
       await this.$nextTick();
-      const navActiveItemElement = (_this$$refs = this.$refs) === null || _this$$refs === void 0 ? void 0 : (_this$$refs$this$tabI = _this$$refs[this.tabItemActive.model]) === null || _this$$refs$this$tabI === void 0 ? void 0 : _this$$refs$this$tabI[0];
-      const navItemsElement = (_this$$refs2 = this.$refs) === null || _this$$refs2 === void 0 ? void 0 : _this$$refs2.navItems;
-
-      if (navActiveItemElement && navItemsElement) {
-        const {
-          width,
-          height,
-          left: navActiveLeft,
-          top: navActiveTop
-        } = navActiveItemElement.getBoundingClientRect();
-        const {
-          left: navItemsLeft,
-          top: navItemsTop
-        } = navItemsElement.getBoundingClientRect();
-        const {
-          children
-        } = navItemsElement;
-        const sliderElement = children[children.length - 1];
-        sliderElement.removeAttribute("style");
-        Object.assign(sliderElement.style, {
-          vertical: {
-            height: `${height}px`,
-            top: `${navActiveTop - navItemsTop}px`
-          },
-          horizontal: {
-            width: `${width}px`,
-            left: `${navActiveLeft - navItemsLeft}px`
-          }
-        }[this.vertical ? "vertical" : "horizontal"]);
-      }
+      const navItemsElement = (_this$$refs = this.$refs) === null || _this$$refs === void 0 ? void 0 : _this$$refs.navItems;
+      const {
+        navItemsLeft,
+        navItemsTop
+      } = this.getElementRect({
+        el: navItemsElement,
+        prefix: "navItems"
+      });
+      const {
+        navActiveWidth,
+        navActiveHeight,
+        navActiveLeft,
+        navActiveTop
+      } = this.getElementRect({
+        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"
+      });
+      const {
+        children
+      } = navItemsElement;
+      const sliderEl = children[children.length - 1];
+      sliderEl.removeAttribute("style");
+      Object.assign(sliderEl.style, {
+        portrait: {
+          height: `${navActiveHeight}px`,
+          top: `${navActiveTop - navItemsTop}px`
+        },
+        landscape: {
+          width: `${navActiveWidth}px`,
+          left: `${navActiveLeft - navItemsLeft}px`
+        }
+      }[this.orientation]);
     },
 
-    async setPagination() {
-      var _this$$refs3;
+    async setPaginationOffset() {
+      var _this$$refs3, _this$$refs4;
 
       await this.$nextTick();
-      this.pagination.translate = 0;
-      const offsetOrigin = this.vertical ? "offsetHeight" : "offsetWidth";
-      const navItemsOfsset = this.$refs.navItems[offsetOrigin];
-      const navOffset = (_this$$refs3 = this.$refs) === null || _this$$refs3 === void 0 ? void 0 : _this$$refs3.nav[offsetOrigin];
-      this.pagination.has = navItemsOfsset > navOffset;
+      const navItemsElement = (_this$$refs3 = this.$refs) === null || _this$$refs3 === void 0 ? void 0 : _this$$refs3.navItems;
+      const {
+        navItemsWidth
+      } = this.getElementRect({
+        el: navItemsElement,
+        prefix: "navItems"
+      });
+      const {
+        navWidth,
+        navHeight
+      } = this.getElementRect({
+        el: (_this$$refs4 = this.$refs) === null || _this$$refs4 === void 0 ? void 0 : _this$$refs4.nav,
+        prefix: "nav"
+      });
+      const navItemsHeight = [...(navItemsElement === null || navItemsElement === void 0 ? void 0 : navItemsElement.children)].slice(0, -1).map(el => el.offsetHeight).reduce((a, c) => a + c, 0);
 
-      if (this.pagination.has) {
-        let maxOffset = navItemsOfsset - navOffset; // Temporary solution to get height og nav items when vertical is set
+      const paginationFactory = (has, maxOffset, minOffset) => ({
+        has,
+        maxOffset,
+        minOffset,
+        offset: minOffset
+      });
 
-        if (offsetOrigin === "offsetHeight") {
-          var _this$$refs4;
-
-          const height = [...((_this$$refs4 = this.$refs) === null || _this$$refs4 === void 0 ? void 0 : _this$$refs4.navItems.children)].map(({
-            offsetHeight
-          }) => offsetHeight);
-          maxOffset = height.reduce((a, c) => a + c) - navOffset;
-        }
-
-        this.pagination.maxOffset = maxOffset;
-        this.pagination.offset = this.pagination.minOffset = navOffset;
-      }
+      Object.assign(this.pagination, {
+        portrait: paginationFactory(navItemsHeight > navHeight, navItemsHeight - navHeight, navHeight),
+        landscape: paginationFactory(navItemsWidth > navWidth, navItemsWidth - navWidth, navWidth)
+      }[this.orientation]);
     },
@@ -450,3 +459,3 @@
 
-    paginationBySomething({
+    async paginationByCollapse({
       model
@@ -456,31 +465,57 @@ }) {
 
-      const navActiveItemElement = (_this$$refs5 = this.$refs) === null || _this$$refs5 === void 0 ? void 0 : (_this$$refs5$model = _this$$refs5[model]) === null || _this$$refs5$model === void 0 ? void 0 : _this$$refs5$model[0];
-      const navElement = (_this$$refs6 = this.$refs) === null || _this$$refs6 === void 0 ? void 0 : _this$$refs6.nav;
+      await this.$nextTick();
+      const {
+        navActiveRight,
+        navActiveLeft,
+        navActiveTop,
+        navActiveBottom
+      } = this.getElementRect({
+        el: (_this$$refs5 = this.$refs) === null || _this$$refs5 === void 0 ? void 0 : (_this$$refs5$model = _this$$refs5[model]) === null || _this$$refs5$model === void 0 ? void 0 : _this$$refs5$model[0],
+        prefix: "navActive"
+      });
+      const {
+        navRight,
+        navLeft,
+        navTop,
+        navBottom
+      } = this.getElementRect({
+        el: (_this$$refs6 = this.$refs) === null || _this$$refs6 === void 0 ? void 0 : _this$$refs6.nav,
+        prefix: "nav"
+      });
+      let toTranslate = this.pagination.translate;
 
-      if (navActiveItemElement && navElement) {
-        let toTranslate = this.pagination.translate;
-        const {
-          right: navActiveRight,
-          left: navActiveLeft
-        } = navActiveItemElement.getBoundingClientRect();
-        const {
-          right: navRight,
-          left: navLeft
-        } = navElement.getBoundingClientRect();
-
+      if (this.orientation === "portrait") {
+        if (navActiveBottom > navBottom) {
+          toTranslate = toTranslate + (navActiveBottom - navBottom);
+        } else if (navActiveTop < navTop) {
+          toTranslate = toTranslate - (navTop - navActiveTop);
+        }
+      } else {
         if (navActiveRight > navRight) {
           toTranslate = toTranslate + (navActiveRight - navRight);
-        }
-
-        if (navActiveLeft < navLeft) {
+        } else if (navActiveLeft < navLeft) {
           toTranslate = toTranslate - (navLeft - navActiveLeft);
         }
+      }
 
-        this.pagination.translate = Math.floor(toTranslate);
-      }
+      this.pagination.translate = toTranslate;
     },
 
     resizable() {
-      this.setPagination();
+      this.setPaginationOffset();
       this.sliderHandler();
+    },
+
+    getElementRect({
+      el,
+      prefix
+    }) {
+      if (!el) return;
+      const {
+        parse,
+        stringify
+      } = JSON;
+      const rect = Object.entries(parse(stringify(el.getBoundingClientRect())));
+      const newRect = rect.map(([i, k]) => [prefix + i.charAt(0).toUpperCase() + i.slice(1), k]);
+      return Object.fromEntries(newRect);
     }
@@ -510,5 +545,5 @@
     class: _vm.classes
-  }, [_vm.pagination.has ? _c('div', {
-    staticClass: "tab-pagination__prev"
-  }, [_c('Btn', {
+  }, [_c('div', {
+    staticClass: "tab__pagination__prev"
+  }, [_vm.pagination.has ? _c('Btn', {
     attrs: {
@@ -522,3 +557,3 @@ "disabled": !_vm.paginateIndicator.previous
     }
-  })], 1) : _vm._e(), _vm._v(" "), _c('nav', {
+  }) : _vm._e()], 1), _vm._v(" "), _c('nav', {
     ref: "nav",
@@ -559,5 +594,5 @@ staticClass: "tab__nav"
     staticClass: "tab__slider"
-  }) : _vm._e()], 2)]), _vm._v(" "), _vm.pagination.has ? _c('div', {
-    staticClass: "tab-pagination__next"
-  }, [_c('Btn', {
+  }) : _vm._e()], 2)]), _vm._v(" "), _c('div', {
+    staticClass: "tab__pagination__next"
+  }, [_vm.pagination.has ? _c('Btn', {
     attrs: {
@@ -571,3 +606,3 @@ "disabled": !_vm.paginateIndicator.next
     }
-  })], 1) : _vm._e()]);
+  }) : _vm._e()], 1)]);
 };
@@ -580,7 +615,7 @@
   if (!inject) return;
-  inject("data-v-509891a2_0", {
-    source: ".tab__pagination[data-v-509891a2]{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__next[data-v-509891a2],.tab__pagination .tab-pagination__prev[data-v-509891a2]{flex:1 40px;min-width:40px}.tab-pagination__next[data-v-509891a2] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-509891a2]{position:relative;display:flex;overflow:hidden;margin:0 .3rem;flex:1 100%}.tab__nav__items[data-v-509891a2]{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-509891a2]{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-509891a2]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-509891a2]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-509891a2]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-509891a2]{background:#f3f2f2}.tab__slider[data-v-509891a2]{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-509891a2]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-509891a2]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical[data-v-509891a2] .tab-pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-509891a2] .tab-pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-509891a2]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-509891a2]:hover{background:#2f3236}.tabs__nav--auto .tab__nav__item[data-v-509891a2]{flex:1 auto}",
+  inject("data-v-cc184518_0", {
+    source: ".tab__pagination[data-v-cc184518]{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-cc184518],.tab__pagination__next[data-v-cc184518]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-cc184518] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-cc184518]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-cc184518]{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-cc184518]{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-cc184518]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-cc184518]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-cc184518]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-cc184518]{background:#f3f2f2}.tab__slider[data-v-cc184518]{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-cc184518]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-cc184518]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-cc184518]{padding:0;margin:0}.tab__pagination--vertical[data-v-cc184518] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-cc184518] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-cc184518]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-cc184518]:hover{background:#2f3236}.tab__pagination--auto .tab__nav__item[data-v-cc184518]{flex:1 auto}",
     map: undefined,
     media: undefined
-  }), inject("data-v-509891a2_1", {
+  }), inject("data-v-cc184518_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(4);opacity:0}}",
@@ -594,3 +629,3 @@ map: undefined,
 
-const __vue_scope_id__$2 = "data-v-509891a2";
+const __vue_scope_id__$2 = "data-v-cc184518";
 /* module identifier */
@@ -809,4 +844,4 @@
   if (!inject) return;
-  inject("data-v-07b6fa80_0", {
-    source: ".tabs[data-v-07b6fa80]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-07b6fa80]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;vertical-align:middle;height:100%;width:100%}.tabs--vertical[data-v-07b6fa80]{flex-direction:row}.tabs--dark[data-v-07b6fa80]{background:#222831}.tabs--dark .tab__nav__item[data-v-07b6fa80]{color:#f1f1f1}.tabs--dark .tab__nav__items .active[data-v-07b6fa80]{color:#fff}.tabs--dark .tab__nav__items .disabled[data-v-07b6fa80]{background:#2c2f35}.tabs--dark .tab__pagination[data-v-07b6fa80] .btn svg{fill:#d6d5d5}.tabs--dark .tab__pagination[data-v-07b6fa80] .btn:disabled svg{fill:#707279}",
+  inject("data-v-dee1394c_0", {
+    source: ".tabs[data-v-dee1394c]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-dee1394c]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;height:100%;width:100%;flex:1 100%}.tabs--vertical[data-v-dee1394c]{flex-direction:row}.tabs--dark[data-v-dee1394c]{background:#222831}.tabs--dark .tabs__nav__item[data-v-dee1394c]{color:#f1f1f1}.tabs--dark .tabs__nav__items .active[data-v-dee1394c]{color:#fff}.tabs--dark .tabs__nav__items .disabled[data-v-dee1394c]{background:#2c2f35}.tabs--dark .tabs__nav[data-v-dee1394c] .btn svg{fill:#d6d5d5}.tabs--dark .tabs__nav[data-v-dee1394c] .btn:disabled svg{fill:#707279}",
     map: undefined,
@@ -819,3 +854,3 @@ media: undefined
 
-const __vue_scope_id__$1 = "data-v-07b6fa80";
+const __vue_scope_id__$1 = "data-v-dee1394c";
 /* module identifier */
@@ -822,0 +857,0 @@

dist/vue-material-tabs.min.js

@@ -1,1 +0,1 @@
-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(e){return 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)}))}}function a(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)||i(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 n(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||i(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 i(t,e){if(t){if("string"==typeof t)return r(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)?r(t,e):void 0}}function r(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 o(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 s(t,e){null==t||t[e?"addEventListener":"removeEventListener"]("click",o)}var d={bind:function(t,e){return s(t,e.value)},update:function(t,e){return s(t,e.value)},unbind:function(t){return s(t,!1)}};var l={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,l){"boolean"!=typeof o&&(d=s,s=o,o=!1);const c="function"==typeof a?a.options:a;let u;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),n&&(c._scopeId=n),r?(u=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=u):e&&(u=o?function(t){e.call(this,l(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,s(t))}),u)if(c.functional){const t=c.render;c.render=function(e,a){return u.call(a),t(e,a)}}else{const t=c.beforeCreate;c.beforeCreate=t?[].concat(t,u):[u]}return a}const u="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function v(t){return(t,e)=>function(t,e){const a=u?e.media||"default":t,n=m[a]||(m[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===f&&(f=document.head||document.getElementsByTagName("head")[0]),f.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 f;const m={};var p=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",{staticClass:"tabs__content"},[t._t("default")],2)],2)},staticRenderFns:[]},(function(t){t&&t("data-v-07b6fa80_0",{source:".tabs[data-v-07b6fa80]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-07b6fa80]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;vertical-align:middle;height:100%;width:100%}.tabs--vertical[data-v-07b6fa80]{flex-direction:row}.tabs--dark[data-v-07b6fa80]{background:#222831}.tabs--dark .tab__nav__item[data-v-07b6fa80]{color:#f1f1f1}.tabs--dark .tab__nav__items .active[data-v-07b6fa80]{color:#fff}.tabs--dark .tab__nav__items .disabled[data-v-07b6fa80]{background:#2c2f35}.tabs--dark .tab__pagination[data-v-07b6fa80] .btn svg{fill:#d6d5d5}.tabs--dark .tab__pagination[data-v-07b6fa80] .btn:disabled svg{fill:#707279}",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},[t.pagination.has?a("div",{staticClass:"tab-pagination__prev"},[a("Btn",{attrs:{disabled:!t.paginateIndicator.previous},on:{click:function(e){return t.paginationHandler("previous")}}})],1):t._e(),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,expression:"ripple"}],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)}}},[e.nameSlot?a("VNode",{attrs:{node:e.nameSlot}}):a("span",[t._v("\n          "+t._s(e.name)+"\n        ")])],1)})),t._v(" "),t.navSlider?a("hr",{staticClass:"tab__slider"}):t._e()],2)]),t._v(" "),t.pagination.has?a("div",{staticClass:"tab-pagination__next"},[a("Btn",{attrs:{disabled:!t.paginateIndicator.next},on:{click:function(e){return t.paginationHandler("next")}}})],1):t._e()])},staticRenderFns:[]},(function(t){t&&(t("data-v-509891a2_0",{source:".tab__pagination[data-v-509891a2]{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__next[data-v-509891a2],.tab__pagination .tab-pagination__prev[data-v-509891a2]{flex:1 40px;min-width:40px}.tab-pagination__next[data-v-509891a2] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-509891a2]{position:relative;display:flex;overflow:hidden;margin:0 .3rem;flex:1 100%}.tab__nav__items[data-v-509891a2]{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-509891a2]{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-509891a2]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-509891a2]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-509891a2]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-509891a2]{background:#f3f2f2}.tab__slider[data-v-509891a2]{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-509891a2]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-509891a2]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical[data-v-509891a2] .tab-pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-509891a2] .tab-pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-509891a2]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-509891a2]:hover{background:#2f3236}.tabs__nav--auto .tab__nav__item[data-v-509891a2]{flex:1 auto}",map:void 0,media:void 0}),t("data-v-509891a2_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(4);opacity:0}}",map:void 0,media:void 0}))}),{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){return t("span",[e.props.node])}}},directives:{ripple:d,resize:l},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,"tabs__nav--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,previous:this.pagination.translate>0}}},watch:{vertical:["sliderHandler","setPagination"],tabItemActive:["sliderHandler","paginationBySomething"]},mounted:function(){this.setPagination()},methods:{select:function(t){this.$emit("select",{tabItem:t,byUser:!0})},testando:function(){console.log("está fazendo o resize")},sliderHandler:function(){var t=this;return e(regeneratorRuntime.mark((function e(){var a,n,i,r,o,s,d,l,c,u,v,f,m,p,b;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.$nextTick();case 2:r=null===(a=t.$refs)||void 0===a||null===(n=a[t.tabItemActive.model])||void 0===n?void 0:n[0],o=null===(i=t.$refs)||void 0===i?void 0:i.navItems,r&&o&&(s=r.getBoundingClientRect(),d=s.width,l=s.height,c=s.left,u=s.top,v=o.getBoundingClientRect(),f=v.left,m=v.top,p=o.children,(b=p[p.length-1]).removeAttribute("style"),Object.assign(b.style,{vertical:{height:"".concat(l,"px"),top:"".concat(u-m,"px")},horizontal:{width:"".concat(d,"px"),left:"".concat(c-f,"px")}}[t.vertical?"vertical":"horizontal"]));case 5:case"end":return e.stop()}}),e)})))()},setPagination:function(){var t=this;return e(regeneratorRuntime.mark((function e(){var a,i,r,o,s,d,l;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.$nextTick();case 2:t.pagination.translate=0,i=t.vertical?"offsetHeight":"offsetWidth",r=t.$refs.navItems[i],o=null===(a=t.$refs)||void 0===a?void 0:a.nav[i],t.pagination.has=r>o,t.pagination.has&&(s=r-o,"offsetHeight"===i&&(l=n(null===(d=t.$refs)||void 0===d?void 0:d.navItems.children).map((function(t){return t.offsetHeight})),s=l.reduce((function(t,e){return t+e}))-o),t.pagination.maxOffset=s,t.pagination.offset=t.pagination.minOffset=o);case 8:case"end":return e.stop()}}),e)})))()},paginationHandler:function(t){var e=this.pagination,a=e.maxOffset,n=e.offset,i=e.translate,r=e.minOffset;if("previous"===t&&this.paginateIndicator.previous){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)},paginationBySomething:function(t){var e,a,n,i=t.model,r=null===(e=this.$refs)||void 0===e||null===(a=e[i])||void 0===a?void 0:a[0],o=null===(n=this.$refs)||void 0===n?void 0:n.nav;if(r&&o){var s=this.pagination.translate,d=r.getBoundingClientRect(),l=d.right,c=d.left,u=o.getBoundingClientRect(),v=u.right,f=u.left;l>v&&(s+=l-v),c<f&&(s-=f-c),this.pagination.translate=Math.floor(s)}},resizable:function(){this.setPagination(),this.sliderHandler()}}},"data-v-509891a2",false,undefined,!1,v,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}}},computed:{tabItems:function(){var t;return null===(t=this.$slots)||void 0===t?void 0:t.default.map((function(t){var e=t.componentInstance,a=t.componentOptions;if("TabItem"===(null==a?void 0:a.tag))return e})).filter((function(t){return t}))},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.setNavItems(),this.activeTabItem({tabItem:this.navItems[0],byUser:!1})},methods:{setNavItems:function(){var t,e=null===(t=this.tabItems)||void 0===t?void 0:t.map((function(t){var e,a=t.model,n=t.name,i=t.disabled,r=t.$slots;return{model:a,name:n,disabled:i,nameSlot:null==r||null===(e=r.name)||void 0===e?void 0:e[0]}}));null!=e&&e.length&&(this.navItems=e,this.tabItemIndexes.last=e.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-07b6fa80",false,undefined,!1,v,void 0,void 0),b=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":this.transition.duration+"ms"}},[t._t("default")],2)])},staticRenderFns:[]},(function(t){t&&t("data-v-15af76e8_0",{source:".tab-item[data-v-15af76e8]{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-15af76e8],.slide-right-leave-to[data-v-15af76e8]{transform:translateX(-100%)}.slide-left-leave-to[data-v-15af76e8],.slide-right-enter[data-v-15af76e8]{transform:translateX(100%)}.slide-bottom-leave-to[data-v-15af76e8],.slide-top-enter[data-v-15af76e8]{transform:translateY(-100%)}.slide-bottom-enter[data-v-15af76e8],.slide-top-leave-to[data-v-15af76e8]{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:""}},created:function(){this.model=Math.random().toString(36).substring(2)},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-15af76e8",false,undefined,!1,v,void 0,void 0),h=Object.freeze({__proto__:null,Tabs:p,TabItem:b}),_=function(t){Object.entries(h).forEach((function(e){var n=a(e,2),i=n[0],r=n[1];t.component(i,r)}))},g=Object.freeze({__proto__:null,default:_,Tabs:p,TabItem:b});return Object.entries(g).forEach((function(t){var e=a(t,2),n=e[0],i=e[1];"default"!==n&&(_[n]=i)})),_}();
+var VueMaterialTabs=function(){"use strict";function t(t,e,n,a,i,r,o){try{var s=t[r](o),d=s.value}catch(t){return void n(t)}s.done?e(d):Promise.resolve(d).then(a,i)}function e(e){return function(){var n=this,a=arguments;return new Promise((function(i,r){var o=e.apply(n,a);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)}))}}function n(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=t&&("undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"]);if(null==n)return;var a,i,r=[],o=!0,s=!1;try{for(n=n.call(t);!(o=(a=n.next()).done)&&(r.push(a.value),!e||r.length!==e);o=!0);}catch(t){s=!0,i=t}finally{try{o||null==n.return||n.return()}finally{if(s)throw i}}return r}(t,e)||i(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 r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||i(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 i(t,e){if(t){if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(t,e):void 0}}function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,a=new Array(e);n<e;n++)a[n]=t[n];return a}function o(t){var e=t.currentTarget,n=function(t){var e=t.currentTarget.getBoundingClientRect(),n=t.clientX-e.left,a=t.clientY-e.top,i=Math.sqrt(Math.pow(t.currentTarget.clientWidth,2)+Math.pow(t.currentTarget.clientHeight,2))/2;return{x:"".concat(n-i,"px"),y:"".concat(a-i,"px"),size:"".concat(2*i,"px")}}(t),a=n.size,i=n.y,r=n.x,o=document.createElement("span");o.classList.add("ripple"),o.style.width=o.style.height=a,o.style.top=i,o.style.left=r,e.appendChild(o),setTimeout((function(){return o.remove()}),1e3)}function s(t,e){null==t||t[e?"addEventListener":"removeEventListener"]("click",o)}var d={bind:function(t,e){return s(t,e.value)},update:function(t,e){return s(t,e.value)},unbind:function(t){return s(t,!1)}};var c={inserted:function(t,e){var n=null==e?void 0:e.value;n&&window.addEventListener("resize",n),t._onResize=n},unbind:function(t){t._onResize&&(window.removeEventListener("resize",t._onResize),delete t._onResize)}};function l(t,e,n,a,i,r,o,s,d,c){"boolean"!=typeof o&&(d=s,s=o,o=!1);const l="function"==typeof n?n.options:n;let v;if(t&&t.render&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),a&&(l._scopeId=a),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,n){return v.call(n),t(e,n)}}else{const t=l.beforeCreate;l.beforeCreate=t?[].concat(t,v):[v]}return n}const v="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function u(t){return(t,e)=>function(t,e){const n=v?e.media||"default":t,a=m[n]||(m[n]={ids:new Set,styles:[]});if(!a.ids.has(t)){a.ids.add(t);let n=e.source;if(e.map&&(n+="\n/*# sourceURL="+e.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",e.media&&a.element.setAttribute("media",e.media),void 0===f&&(f=document.head||document.getElementsByTagName("head")[0]),f.appendChild(a.element)),"styleSheet"in a.element)a.styles.push(n),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{const t=a.ids.size-1,e=document.createTextNode(n),i=a.element.childNodes;i[t]&&a.element.removeChild(i[t]),i.length?a.element.insertBefore(e,i[t]):a.element.appendChild(e)}}}(t,e)}let f;const m={};var p=l({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:t.classes},[t._t("nav",[n("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(" "),n("div",{staticClass:"tabs__content"},[t._t("default")],2)],2)},staticRenderFns:[]},(function(t){t&&t("data-v-dee1394c_0",{source:".tabs[data-v-dee1394c]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-dee1394c]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;height:100%;width:100%;flex:1 100%}.tabs--vertical[data-v-dee1394c]{flex-direction:row}.tabs--dark[data-v-dee1394c]{background:#222831}.tabs--dark .tabs__nav__item[data-v-dee1394c]{color:#f1f1f1}.tabs--dark .tabs__nav__items .active[data-v-dee1394c]{color:#fff}.tabs--dark .tabs__nav__items .disabled[data-v-dee1394c]{background:#2c2f35}.tabs--dark .tabs__nav[data-v-dee1394c] .btn svg{fill:#d6d5d5}.tabs--dark .tabs__nav[data-v-dee1394c] .btn:disabled svg{fill:#707279}",map:void 0,media:void 0})}),{name:"Tabs",components:{NavTab:l({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{directives:[{name:"resize",rawName:"v-resize",value:t.resizable,expression:"resizable"}],class:t.classes},[n("div",{staticClass:"tab__pagination__prev"},[t.pagination.has?n("Btn",{attrs:{disabled:!t.paginateIndicator.previous},on:{click:function(e){return t.paginationHandler("previous")}}}):t._e()],1),t._v(" "),n("nav",{ref:"nav",staticClass:"tab__nav"},[n("ul",{ref:"navItems",staticClass:"tab__nav__items",style:t.styles},[t._l(t.navItems,(function(e,a){return n("li",{directives:[{name:"ripple",rawName:"v-ripple",value:t.ripple,expression:"ripple"}],key:"tab-item-"+a,ref:e.model,refInFor:!0,staticClass:"tab__nav__item",class:{active:e.model===t.tabItemActive.model,disabled:e.disabled},on:{click:function(n){return n.preventDefault(),t.select(e)}}},[e.nameSlot?n("VNode",{attrs:{node:e.nameSlot}}):n("span",[t._v("\n          "+t._s(e.name)+"\n        ")])],1)})),t._v(" "),t.navSlider?n("hr",{staticClass:"tab__slider"}):t._e()],2)]),t._v(" "),n("div",{staticClass:"tab__pagination__next"},[t.pagination.has?n("Btn",{attrs:{disabled:!t.paginateIndicator.next},on:{click:function(e){return t.paginationHandler("next")}}}):t._e()],1)])},staticRenderFns:[]},(function(t){t&&(t("data-v-cc184518_0",{source:".tab__pagination[data-v-cc184518]{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-cc184518],.tab__pagination__next[data-v-cc184518]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-cc184518] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-cc184518]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-cc184518]{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-cc184518]{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-cc184518]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-cc184518]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-cc184518]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-cc184518]{background:#f3f2f2}.tab__slider[data-v-cc184518]{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-cc184518]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-cc184518]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-cc184518]{padding:0;margin:0}.tab__pagination--vertical[data-v-cc184518] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-cc184518] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-cc184518]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-cc184518]:hover{background:#2f3236}.tab__pagination--auto .tab__nav__item[data-v-cc184518]{flex:1 auto}",map:void 0,media:void 0}),t("data-v-cc184518_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(4);opacity:0}}",map:void 0,media:void 0}))}),{components:{Btn:l({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("button",{staticClass:"btn",on:{click:function(e){return t.$emit("click")}}},[n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",role:"img","aria-hidden":"true"}},[n("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,u,void 0,void 0),VNode:{functional:!0,render:function(t,e){return e.props.node}}},directives:{ripple:d,resize:c},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,previous:this.pagination.translate>0}},orientation:function(){return this.vertical?"portrait":"landscape"}},watch:{vertical:["sliderHandler","setPaginationOffset"],tabItemActive:["sliderHandler","paginationByCollapse"]},mounted:function(){this.setPaginationOffset(),this.getElementRect(this.$refs.nav,"nav")},methods:{select:function(t){this.$emit("select",{tabItem:t,byUser:!0})},sliderHandler:function(){var t=this;return e(regeneratorRuntime.mark((function e(){var n,a,i,r,o,s,d,c,l,v,u,f,m,p;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.$nextTick();case 2:r=null===(n=t.$refs)||void 0===n?void 0:n.navItems,o=t.getElementRect({el:r,prefix:"navItems"}),s=o.navItemsLeft,d=o.navItemsTop,c=t.getElementRect({el:null===(a=t.$refs)||void 0===a||null===(i=a[t.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,(p=m[m.length-1]).removeAttribute("style"),Object.assign(p.style,{portrait:{height:"".concat(v,"px"),top:"".concat(f-d,"px")},landscape:{width:"".concat(l,"px"),left:"".concat(u-s,"px")}}[t.orientation]);case 9:case"end":return e.stop()}}),e)})))()},setPaginationOffset:function(){var t=this;return e(regeneratorRuntime.mark((function e(){var n,i,r,o,s,d,c,l,v,u;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.$nextTick();case 2:r=null===(n=t.$refs)||void 0===n?void 0:n.navItems,o=t.getElementRect({el:r,prefix:"navItems"}),s=o.navItemsWidth,d=t.getElementRect({el:null===(i=t.$refs)||void 0===i?void 0:i.nav,prefix:"nav"}),c=d.navWidth,l=d.navHeight,v=a(null==r?void 0:r.children).slice(0,-1).map((function(t){return t.offsetHeight})).reduce((function(t,e){return t+e}),0),u=function(t,e,n){return{has:t,maxOffset:e,minOffset:n,offset:n}},Object.assign(t.pagination,{portrait:u(v>l,v-l,l),landscape:u(s>c,s-c,c)}[t.orientation]);case 8:case"end":return e.stop()}}),e)})))()},paginationHandler:function(t){var e=this.pagination,n=e.maxOffset,a=e.offset,i=e.translate,r=e.minOffset;if("previous"===t&&this.paginateIndicator.previous){if(a<=r&&(this.pagination.offset=r),i-a<a)return void(this.pagination.translate=0);this.pagination.translate=i-a}"next"===t&&this.paginateIndicator.next&&(i+a>n&&(this.pagination.offset=n-i),this.pagination.translate=i+this.pagination.offset)},paginationByCollapse:function(t){var n=this;return e(regeneratorRuntime.mark((function e(){var a,i,r,o,s,d,c,l,v,u,f,m,p,b,h;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return o=t.model,e.next=3,n.$nextTick();case 3:s=n.getElementRect({el:null===(a=n.$refs)||void 0===a||null===(i=a[o])||void 0===i?void 0:i[0],prefix:"navActive"}),d=s.navActiveRight,c=s.navActiveLeft,l=s.navActiveTop,v=s.navActiveBottom,u=n.getElementRect({el:null===(r=n.$refs)||void 0===r?void 0:r.nav,prefix:"nav"}),f=u.navRight,m=u.navLeft,p=u.navTop,b=u.navBottom,h=n.pagination.translate,"portrait"===n.orientation?v>b?h+=v-b:l<p&&(h-=p-l):d>f?h+=d-f:c<m&&(h-=m-c),n.pagination.translate=h;case 8:case"end":return e.stop()}}),e)})))()},resizable:function(){this.setPaginationOffset(),this.sliderHandler()},getElementRect:function(t){var e=t.el,a=t.prefix;if(e){var i=JSON.parse,r=JSON.stringify,o=Object.entries(i(r(e.getBoundingClientRect()))).map((function(t){var e=n(t,2),i=e[0],r=e[1];return[a+i.charAt(0).toUpperCase()+i.slice(1),r]}));return Object.fromEntries(o)}}}},"data-v-cc184518",false,undefined,!1,u,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}}},computed:{tabItems:function(){var t;return null===(t=this.$slots)||void 0===t?void 0:t.default.map((function(t){var e=t.componentInstance,n=t.componentOptions;if("TabItem"===(null==n?void 0:n.tag))return e})).filter((function(t){return t}))},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.setNavItems(),this.activeTabItem({tabItem:this.navItems[0],byUser:!1})},methods:{setNavItems:function(){var t,e=null===(t=this.tabItems)||void 0===t?void 0:t.map((function(t){var e,n=t.model,a=t.name,i=t.disabled,r=t.$slots;return{model:n,name:a,disabled:i,nameSlot:null==r||null===(e=r.name)||void 0===e?void 0:e[0]}}));null!=e&&e.length&&(this.navItems=e,this.tabItemIndexes.last=e.length-1)},activeTabItem:function(t){var e=t.tabItem,n=t.byUser;e.disabled||(this.tabItemActive=e,this.$emit("input",null==e?void 0:e.name),n&&this.$emit("change",null==e?void 0:e.name))},disableTabItem:function(t){var e=this.tabItemIndexes,n=e.current,a=e.last;if(t===n){var i=n===a?n-1:n+1;this.activeTabItem({tabItem:this.navItems[i],byUser:!0})}},setTabItemTransitionSide:function(){var t=this.tabItemIndexes,e=t.current,n=t.previous;this.slideSide=e>n?"right":"left"},findIndexTab:function(t){return this.tabItems.findIndex((function(e){return e.model==t.model}))}}},"data-v-dee1394c",false,undefined,!1,u,void 0,void 0),b=l({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:t.slideDirection}},[n("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-15af76e8_0",{source:".tab-item[data-v-15af76e8]{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-15af76e8],.slide-right-leave-to[data-v-15af76e8]{transform:translateX(-100%)}.slide-left-leave-to[data-v-15af76e8],.slide-right-enter[data-v-15af76e8]{transform:translateX(100%)}.slide-bottom-leave-to[data-v-15af76e8],.slide-top-enter[data-v-15af76e8]{transform:translateY(-100%)}.slide-bottom-enter[data-v-15af76e8],.slide-top-leave-to[data-v-15af76e8]{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:""}},created:function(){this.model=Math.random().toString(36).substring(2)},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-15af76e8",false,undefined,!1,u,void 0,void 0),h=Object.freeze({__proto__:null,Tabs:p,TabItem:b}),_=function(t){Object.entries(h).forEach((function(e){var a=n(e,2),i=a[0],r=a[1];t.component(i,r)}))},g=Object.freeze({__proto__:null,default:_,Tabs:p,TabItem:b});return Object.entries(g).forEach((function(t){var e=n(t,2),a=e[0],i=e[1];"default"!==a&&(_[a]=i)})),_}();

dist/vue-material-tabs.ssr.js

@@ -355,4 +355,4 @@ 'use strict';function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
       functional: true,
-      render: function render(h, ctx) {
-        return h("span", [ctx.props.node]);
+      render: function render(_, ctx) {
+        return ctx.props.node;
       }
@@ -395,3 +395,3 @@ }
         "tab__pagination--vertical": this.vertical,
-        "tabs__nav--auto": this.navAuto && !this.vertical
+        "tab__pagination--auto": this.navAuto && !this.vertical
       };
@@ -409,10 +409,14 @@ },
       };
+    },
+    orientation: function orientation() {
+      return this.vertical ? "portrait" : "landscape";
     }
   },
   watch: {
-    vertical: ["sliderHandler", "setPagination"],
-    tabItemActive: ["sliderHandler", "paginationBySomething"]
+    vertical: ["sliderHandler", "setPaginationOffset"],
+    tabItemActive: ["sliderHandler", "paginationByCollapse"]
   },
   mounted: function mounted() {
-    this.setPagination();
+    this.setPaginationOffset();
+    this.getElementRect(this.$refs.nav, "nav");
   },
@@ -426,5 +430,2 @@ methods: {
     },
-    testando: function testando() {
-      console.log("está fazendo o resize");
-    },
     sliderHandler: function sliderHandler() {
@@ -434,5 +435,5 @@ var _this = this;
       return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-        var _this$$refs, _this$$refs$_this$tab, _this$$refs2;
+        var _this$$refs, _this$$refs2, _this$$refs2$_this$ta;
 
-        var navActiveItemElement, navItemsElement, _navActiveItemElement, width, height, navActiveLeft, navActiveTop, _navItemsElement$getB, navItemsLeft, navItemsTop, children, sliderElement;
+        var navItemsElement, _this$getElementRect, navItemsLeft, navItemsTop, _this$getElementRect2, navActiveWidth, navActiveHeight, navActiveLeft, navActiveTop, children, sliderEl;
 
@@ -447,24 +448,26 @@ return regeneratorRuntime.wrap(function _callee$(_context) {
               case 2:
-                navActiveItemElement = (_this$$refs = _this.$refs) === null || _this$$refs === void 0 ? void 0 : (_this$$refs$_this$tab = _this$$refs[_this.tabItemActive.model]) === null || _this$$refs$_this$tab === void 0 ? void 0 : _this$$refs$_this$tab[0];
-                navItemsElement = (_this$$refs2 = _this.$refs) === null || _this$$refs2 === void 0 ? void 0 : _this$$refs2.navItems;
+                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]);
 
-                if (navActiveItemElement && navItemsElement) {
-                  _navActiveItemElement = navActiveItemElement.getBoundingClientRect(), width = _navActiveItemElement.width, height = _navActiveItemElement.height, navActiveLeft = _navActiveItemElement.left, navActiveTop = _navActiveItemElement.top;
-                  _navItemsElement$getB = navItemsElement.getBoundingClientRect(), navItemsLeft = _navItemsElement$getB.left, navItemsTop = _navItemsElement$getB.top;
-                  children = navItemsElement.children;
-                  sliderElement = children[children.length - 1];
-                  sliderElement.removeAttribute("style");
-                  Object.assign(sliderElement.style, {
-                    vertical: {
-                      height: "".concat(height, "px"),
-                      top: "".concat(navActiveTop - navItemsTop, "px")
-                    },
-                    horizontal: {
-                      width: "".concat(width, "px"),
-                      left: "".concat(navActiveLeft - navItemsLeft, "px")
-                    }
-                  }[_this.vertical ? "vertical" : "horizontal"]);
-                }
-
-              case 5:
+              case 9:
               case "end":
@@ -477,9 +480,9 @@ return _context.stop();
     },
-    setPagination: function setPagination() {
+    setPaginationOffset: function setPaginationOffset() {
       var _this2 = this;
 
       return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-        var _this2$$refs;
+        var _this2$$refs, _this2$$refs2;
 
-        var offsetOrigin, navItemsOfsset, navOffset, maxOffset, _this2$$refs2, height;
+        var navItemsElement, _this2$getElementRect, navItemsWidth, _this2$getElementRect2, navWidth, navHeight, navItemsHeight, paginationFactory;
 
@@ -494,25 +497,31 @@ return regeneratorRuntime.wrap(function _callee2$(_context2) {
               case 2:
-                _this2.pagination.translate = 0;
-                offsetOrigin = _this2.vertical ? "offsetHeight" : "offsetWidth";
-                navItemsOfsset = _this2.$refs.navItems[offsetOrigin];
-                navOffset = (_this2$$refs = _this2.$refs) === null || _this2$$refs === void 0 ? void 0 : _this2$$refs.nav[offsetOrigin];
-                _this2.pagination.has = navItemsOfsset > navOffset;
+                navItemsElement = (_this2$$refs = _this2.$refs) === null || _this2$$refs === void 0 ? void 0 : _this2$$refs.navItems;
+                _this2$getElementRect = _this2.getElementRect({
+                  el: navItemsElement,
+                  prefix: "navItems"
+                }), navItemsWidth = _this2$getElementRect.navItemsWidth;
+                _this2$getElementRect2 = _this2.getElementRect({
+                  el: (_this2$$refs2 = _this2.$refs) === null || _this2$$refs2 === void 0 ? void 0 : _this2$$refs2.nav,
+                  prefix: "nav"
+                }), navWidth = _this2$getElementRect2.navWidth, navHeight = _this2$getElementRect2.navHeight;
+                navItemsHeight = _toConsumableArray(navItemsElement === null || navItemsElement === void 0 ? void 0 : navItemsElement.children).slice(0, -1).map(function (el) {
+                  return el.offsetHeight;
+                }).reduce(function (a, c) {
+                  return a + c;
+                }, 0);
 
-                if (_this2.pagination.has) {
-                  maxOffset = navItemsOfsset - navOffset; // Temporary solution to get height og nav items when vertical is set
+                paginationFactory = function paginationFactory(has, maxOffset, minOffset) {
+                  return {
+                    has: has,
+                    maxOffset: maxOffset,
+                    minOffset: minOffset,
+                    offset: minOffset
+                  };
+                };
 
-                  if (offsetOrigin === "offsetHeight") {
-                    height = _toConsumableArray((_this2$$refs2 = _this2.$refs) === null || _this2$$refs2 === void 0 ? void 0 : _this2$$refs2.navItems.children).map(function (_ref) {
-                      var offsetHeight = _ref.offsetHeight;
-                      return offsetHeight;
-                    });
-                    maxOffset = height.reduce(function (a, c) {
-                      return a + c;
-                    }) - navOffset;
-                  }
+                Object.assign(_this2.pagination, {
+                  portrait: paginationFactory(navItemsHeight > navHeight, navItemsHeight - navHeight, navHeight),
+                  landscape: paginationFactory(navItemsWidth > navWidth, navItemsWidth - navWidth, navWidth)
+                }[_this2.orientation]);
 
-                  _this2.pagination.maxOffset = maxOffset;
-                  _this2.pagination.offset = _this2.pagination.minOffset = navOffset;
-                }
-
               case 8:
@@ -554,34 +563,72 @@ case "end":
     },
-    paginationBySomething: function paginationBySomething(_ref2) {
-      var _this$$refs3, _this$$refs3$model, _this$$refs4;
+    paginationByCollapse: function paginationByCollapse(_ref) {
+      var _this3 = this;
 
-      var model = _ref2.model;
-      var navActiveItemElement = (_this$$refs3 = this.$refs) === null || _this$$refs3 === void 0 ? void 0 : (_this$$refs3$model = _this$$refs3[model]) === null || _this$$refs3$model === void 0 ? void 0 : _this$$refs3$model[0];
-      var navElement = (_this$$refs4 = this.$refs) === null || _this$$refs4 === void 0 ? void 0 : _this$$refs4.nav;
+      return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+        var _this3$$refs, _this3$$refs$model, _this3$$refs2;
 
-      if (navActiveItemElement && navElement) {
-        var toTranslate = this.pagination.translate;
+        var model, _this3$getElementRect, navActiveRight, navActiveLeft, navActiveTop, navActiveBottom, _this3$getElementRect2, navRight, navLeft, navTop, navBottom, toTranslate;
 
-        var _navActiveItemElement2 = navActiveItemElement.getBoundingClientRect(),
-            navActiveRight = _navActiveItemElement2.right,
-            navActiveLeft = _navActiveItemElement2.left;
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                model = _ref.model;
+                _context3.next = 3;
+                return _this3.$nextTick();
 
-        var _navElement$getBoundi = navElement.getBoundingClientRect(),
-            navRight = _navElement$getBoundi.right,
-            navLeft = _navElement$getBoundi.left;
+              case 3:
+                _this3$getElementRect = _this3.getElementRect({
+                  el: (_this3$$refs = _this3.$refs) === null || _this3$$refs === void 0 ? void 0 : (_this3$$refs$model = _this3$$refs[model]) === null || _this3$$refs$model === void 0 ? void 0 : _this3$$refs$model[0],
+                  prefix: "navActive"
+                }), navActiveRight = _this3$getElementRect.navActiveRight, navActiveLeft = _this3$getElementRect.navActiveLeft, navActiveTop = _this3$getElementRect.navActiveTop, navActiveBottom = _this3$getElementRect.navActiveBottom;
+                _this3$getElementRect2 = _this3.getElementRect({
+                  el: (_this3$$refs2 = _this3.$refs) === null || _this3$$refs2 === void 0 ? void 0 : _this3$$refs2.nav,
+                  prefix: "nav"
+                }), navRight = _this3$getElementRect2.navRight, navLeft = _this3$getElementRect2.navLeft, navTop = _this3$getElementRect2.navTop, navBottom = _this3$getElementRect2.navBottom;
+                toTranslate = _this3.pagination.translate;
 
-        if (navActiveRight > navRight) {
-          toTranslate = toTranslate + (navActiveRight - navRight);
-        }
+                if (_this3.orientation === "portrait") {
+                  if (navActiveBottom > navBottom) {
+                    toTranslate = toTranslate + (navActiveBottom - navBottom);
+                  } else if (navActiveTop < navTop) {
+                    toTranslate = toTranslate - (navTop - navActiveTop);
+                  }
+                } else {
+                  if (navActiveRight > navRight) {
+                    toTranslate = toTranslate + (navActiveRight - navRight);
+                  } else if (navActiveLeft < navLeft) {
+                    toTranslate = toTranslate - (navLeft - navActiveLeft);
+                  }
+                }
 
-        if (navActiveLeft < navLeft) {
-          toTranslate = toTranslate - (navLeft - navActiveLeft);
-        }
+                _this3.pagination.translate = toTranslate;
 
-        this.pagination.translate = Math.floor(toTranslate);
-      }
+              case 8:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }))();
     },
     resizable: function resizable() {
-      this.setPagination();
+      this.setPaginationOffset();
       this.sliderHandler();
+    },
+    getElementRect: function getElementRect(_ref2) {
+      var el = _ref2.el,
+          prefix = _ref2.prefix;
+      if (!el) return;
+      var parse = JSON.parse,
+          stringify = JSON.stringify;
+      var rect = Object.entries(parse(stringify(el.getBoundingClientRect())));
+      var newRect = rect.map(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            i = _ref4[0],
+            k = _ref4[1];
+
+        return [prefix + i.charAt(0).toUpperCase() + i.slice(1), k];
+      });
+      return Object.fromEntries(newRect);
     }
@@ -608,3 +655,3 @@ }
     class: _vm.classes
-  }, [_vm.pagination.has ? _vm._ssrNode("<div class=\"tab-pagination__prev\" data-v-509891a2>", "</div>", [_c('Btn', {
+  }, [_vm._ssrNode("<div class=\"tab__pagination__prev\" data-v-cc184518>", "</div>", [_vm.pagination.has ? _c('Btn', {
     attrs: {
@@ -618,3 +665,3 @@ "disabled": !_vm.paginateIndicator.previous
     }
-  })], 1) : _vm._e(), _vm._ssrNode(" "), _vm._ssrNode("<nav class=\"tab__nav\" data-v-509891a2>", "</nav>", [_vm._ssrNode("<ul class=\"tab__nav__items\"" + _vm._ssrStyle(null, _vm.styles, null) + " data-v-509891a2>", "</ul>", [_vm._l(_vm.navItems, function (navItem, index) {
+  }) : _vm._e()], 1), _vm._ssrNode(" "), _vm._ssrNode("<nav class=\"tab__nav\" data-v-cc184518>", "</nav>", [_vm._ssrNode("<ul class=\"tab__nav__items\"" + _vm._ssrStyle(null, _vm.styles, null) + " data-v-cc184518>", "</ul>", [_vm._l(_vm.navItems, function (navItem, index) {
     return _c('li', {
@@ -646,3 +693,3 @@ directives: [{
     }) : _c('span', [_vm._v("\n          " + _vm._s(navItem.name) + "\n        ")])], 1);
-  }), _vm._ssrNode(" " + (_vm.navSlider ? "<hr class=\"tab__slider\" data-v-509891a2>" : "<!---->"))], 2)]), _vm._ssrNode(" "), _vm.pagination.has ? _vm._ssrNode("<div class=\"tab-pagination__next\" data-v-509891a2>", "</div>", [_c('Btn', {
+  }), _vm._ssrNode(" " + (_vm.navSlider ? "<hr class=\"tab__slider\" data-v-cc184518>" : "<!---->"))], 2)]), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"tab__pagination__next\" data-v-cc184518>", "</div>", [_vm.pagination.has ? _c('Btn', {
     attrs: {
@@ -656,3 +703,3 @@ "disabled": !_vm.paginateIndicator.next
     }
-  })], 1) : _vm._e()], 2);
+  }) : _vm._e()], 1)], 2);
 };
@@ -665,7 +712,7 @@
   if (!inject) return;
-  inject("data-v-509891a2_0", {
-    source: ".tab__pagination[data-v-509891a2]{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__next[data-v-509891a2],.tab__pagination .tab-pagination__prev[data-v-509891a2]{flex:1 40px;min-width:40px}.tab-pagination__next[data-v-509891a2] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-509891a2]{position:relative;display:flex;overflow:hidden;margin:0 .3rem;flex:1 100%}.tab__nav__items[data-v-509891a2]{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-509891a2]{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-509891a2]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-509891a2]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-509891a2]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-509891a2]{background:#f3f2f2}.tab__slider[data-v-509891a2]{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-509891a2]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-509891a2]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical[data-v-509891a2] .tab-pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-509891a2] .tab-pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-509891a2]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-509891a2]:hover{background:#2f3236}.tabs__nav--auto .tab__nav__item[data-v-509891a2]{flex:1 auto}",
+  inject("data-v-cc184518_0", {
+    source: ".tab__pagination[data-v-cc184518]{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-cc184518],.tab__pagination__next[data-v-cc184518]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-cc184518] .btn svg{transform:rotate(180deg)}.tab__nav[data-v-cc184518]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-cc184518]{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-cc184518]{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-cc184518]:hover:not(.disabled){background:#faf9f9}.tab__nav__items .active[data-v-cc184518]{color:#000;color:#1867c0}.tab__nav__items .active[data-v-cc184518]:hover{background:#1b7ef01c!important}.tab__nav__items .disabled[data-v-cc184518]{background:#f3f2f2}.tab__slider[data-v-cc184518]{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-cc184518]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-cc184518]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-cc184518]{padding:0;margin:0}.tab__pagination--vertical[data-v-cc184518] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-cc184518] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-cc184518]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tabs--dark .tab__nav__item[data-v-cc184518]:hover{background:#2f3236}.tab__pagination--auto .tab__nav__item[data-v-cc184518]{flex:1 auto}",
     map: undefined,
     media: undefined
-  }), inject("data-v-509891a2_1", {
+  }), inject("data-v-cc184518_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(4);opacity:0}}",
@@ -679,6 +726,6 @@ map: undefined,
 
-var __vue_scope_id__$2 = "data-v-509891a2";
+var __vue_scope_id__$2 = "data-v-cc184518";
 /* module identifier */
 
-var __vue_module_identifier__$2 = "data-v-509891a2";
+var __vue_module_identifier__$2 = "data-v-cc184518";
 /* functional template */
@@ -869,3 +916,3 @@
     "active": _vm.tabItemActive
-  }), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"tabs__content\" data-v-07b6fa80>", "</div>", [_vm._t("default")], 2)], 2);
+  }), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"tabs__content\" data-v-dee1394c>", "</div>", [_vm._t("default")], 2)], 2);
 };
@@ -878,4 +925,4 @@
   if (!inject) return;
-  inject("data-v-07b6fa80_0", {
-    source: ".tabs[data-v-07b6fa80]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-07b6fa80]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;vertical-align:middle;height:100%;width:100%}.tabs--vertical[data-v-07b6fa80]{flex-direction:row}.tabs--dark[data-v-07b6fa80]{background:#222831}.tabs--dark .tab__nav__item[data-v-07b6fa80]{color:#f1f1f1}.tabs--dark .tab__nav__items .active[data-v-07b6fa80]{color:#fff}.tabs--dark .tab__nav__items .disabled[data-v-07b6fa80]{background:#2c2f35}.tabs--dark .tab__pagination[data-v-07b6fa80] .btn svg{fill:#d6d5d5}.tabs--dark .tab__pagination[data-v-07b6fa80] .btn:disabled svg{fill:#707279}",
+  inject("data-v-dee1394c_0", {
+    source: ".tabs[data-v-dee1394c]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-dee1394c]{display:flex;position:relative;overflow:hidden;justify-content:center;align-items:center;height:100%;width:100%;flex:1 100%}.tabs--vertical[data-v-dee1394c]{flex-direction:row}.tabs--dark[data-v-dee1394c]{background:#222831}.tabs--dark .tabs__nav__item[data-v-dee1394c]{color:#f1f1f1}.tabs--dark .tabs__nav__items .active[data-v-dee1394c]{color:#fff}.tabs--dark .tabs__nav__items .disabled[data-v-dee1394c]{background:#2c2f35}.tabs--dark .tabs__nav[data-v-dee1394c] .btn svg{fill:#d6d5d5}.tabs--dark .tabs__nav[data-v-dee1394c] .btn:disabled svg{fill:#707279}",
     map: undefined,
@@ -888,6 +935,6 @@ media: undefined
 
-var __vue_scope_id__$1 = "data-v-07b6fa80";
+var __vue_scope_id__$1 = "data-v-dee1394c";
 /* module identifier */
 
-var __vue_module_identifier__$1 = "data-v-07b6fa80";
+var __vue_module_identifier__$1 = "data-v-dee1394c";
 /* functional template */
@@ -894,0 +941,0 @@

package.json

 {
   "name": "vue-material-tabs",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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

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

Improved metrics

Total package byte prevSize

108962

increased by2.28%

Lines of code

1871

increased by4.88%

No dependency changes