vue-material-tabs
Advanced tools
Comparing version 0.2.1 to 0.2.2
@@ -411,3 +411,3 @@ function calc(e) { | ||
slider() { | ||
sliderElement() { | ||
var _this$$refs; | ||
@@ -429,5 +429,45 @@ | ||
tabItemActive() { | ||
this.sliderHandler(); | ||
this.pagination.has && this.paginationCollapse(); | ||
tabItemActive(tabItemActive) { | ||
this.setSliderPosition(); | ||
if (this.pagination.has && tabItemActive !== null && tabItemActive !== void 0 && tabItemActive.model) { | ||
var _navItemActiveElement, _navElement$getClient; | ||
const navItemActiveElement = this.$refs[tabItemActive.model][0]; | ||
const navElement = this.$refs.nav; | ||
const navActiveItemRectsCollection = navItemActiveElement === null || navItemActiveElement === void 0 ? void 0 : (_navItemActiveElement = navItemActiveElement.getClientRects()) === null || _navItemActiveElement === void 0 ? void 0 : _navItemActiveElement[0]; | ||
const navRectsCollection = navElement === null || navElement === void 0 ? void 0 : (_navElement$getClient = navElement.getClientRects()) === null || _navElement$getClient === void 0 ? void 0 : _navElement$getClient[0]; | ||
if (!navActiveItemRectsCollection || !navRectsCollection) return; | ||
const { | ||
translate, | ||
maxOffset | ||
} = this.pagination; | ||
let toTranslate = translate; // Portrait | ||
if (this.orientation === "portrait") { | ||
if (navActiveItemRectsCollection.bottom > navRectsCollection.bottom) { | ||
toTranslate = toTranslate + navActiveItemRectsCollection.height; | ||
} | ||
if (navActiveItemRectsCollection.top < navRectsCollection.top) { | ||
toTranslate = navActiveItemRectsCollection.height > toTranslate ? 0 : toTranslate - navActiveItemRectsCollection.height; | ||
} | ||
} | ||
if (this.orientation === "landscape") { | ||
if (navActiveItemRectsCollection.right > navRectsCollection.right) { | ||
toTranslate = toTranslate + navActiveItemRectsCollection.width; | ||
} | ||
if (navActiveItemRectsCollection.left < navRectsCollection.left) { | ||
toTranslate = navActiveItemRectsCollection.width > toTranslate ? 0 : toTranslate - navActiveItemRectsCollection.width; | ||
} | ||
if (toTranslate > maxOffset) { | ||
toTranslate = toTranslate + (maxOffset - toTranslate); | ||
} | ||
} | ||
this.pagination.translate = Math.abs(toTranslate); | ||
} | ||
} | ||
@@ -438,4 +478,10 @@ | ||
mounted() { | ||
this.setTheme(); | ||
this.resizable(); | ||
const { | ||
nav, | ||
navItem, | ||
slider | ||
} = this.theme; | ||
this.$el.style.background = nav; | ||
this.$refs.navItems.style.color = navItem; | ||
if (this.sliderElement) this.sliderElement.style.background = slider; | ||
}, | ||
@@ -448,92 +494,58 @@ | ||
async sliderHandler() { | ||
var _this$tabItemActive; | ||
async setSliderPosition() { | ||
var _this$tabItemActive, _this$$refs$navItems, _this$$refs$navItems$, _this$$refs$model$, _this$$refs$model$$ge; | ||
if ((_this$tabItemActive = this.tabItemActive) !== null && _this$tabItemActive !== void 0 && _this$tabItemActive.model) { | ||
var _this$$refs2, _this$$refs3, _this$$refs3$this$tab; | ||
await this.$nextTick(); | ||
const model = (_this$tabItemActive = this.tabItemActive) === null || _this$tabItemActive === void 0 ? void 0 : _this$tabItemActive.model; | ||
if (!model) return; | ||
const navItemsRectsCollection = (_this$$refs$navItems = this.$refs.navItems) === null || _this$$refs$navItems === void 0 ? void 0 : (_this$$refs$navItems$ = _this$$refs$navItems.getClientRects()) === null || _this$$refs$navItems$ === void 0 ? void 0 : _this$$refs$navItems$[0]; | ||
const navActiveItemRectsCollection = (_this$$refs$model$ = this.$refs[model][0]) === null || _this$$refs$model$ === void 0 ? void 0 : (_this$$refs$model$$ge = _this$$refs$model$.getClientRects()) === null || _this$$refs$model$$ge === void 0 ? void 0 : _this$$refs$model$$ge[0]; | ||
await this.$nextTick(); | ||
const navItemsElement = (_this$$refs2 = this.$refs) === null || _this$$refs2 === void 0 ? void 0 : _this$$refs2.navItems; | ||
const { | ||
navItemsLeft, | ||
navItemsTop | ||
} = this.getElementRect({ | ||
el: navItemsElement, | ||
prefix: "navItems" | ||
}); | ||
const { | ||
navActiveWidth, | ||
navActiveHeight, | ||
navActiveLeft, | ||
navActiveTop | ||
} = this.getElementRect({ | ||
el: (_this$$refs3 = this.$refs) === null || _this$$refs3 === void 0 ? void 0 : (_this$$refs3$this$tab = _this$$refs3[this.tabItemActive.model]) === null || _this$$refs3$this$tab === void 0 ? void 0 : _this$$refs3$this$tab[0], | ||
prefix: "navActive" | ||
}); | ||
if (this.sliderElement) { | ||
var _this$sliderElement; | ||
if (this.slider) { | ||
var _this$slider; | ||
Object.assign((_this$slider = this.slider) === null || _this$slider === void 0 ? void 0 : _this$slider.style, { | ||
portrait: { | ||
height: `${navActiveHeight}px`, | ||
top: `${navActiveTop - navItemsTop}px`, | ||
width: "", | ||
left: "" | ||
}, | ||
landscape: { | ||
width: `${navActiveWidth}px`, | ||
left: `${navActiveLeft - navItemsLeft}px`, | ||
height: "", | ||
top: "" | ||
} | ||
}[this.orientation]); | ||
} | ||
Object.assign((_this$sliderElement = this.sliderElement) === null || _this$sliderElement === void 0 ? void 0 : _this$sliderElement.style, { | ||
portrait: { | ||
height: navActiveItemRectsCollection.height + "px", | ||
top: navActiveItemRectsCollection.top - navItemsRectsCollection.top + "px", | ||
width: "", | ||
left: "" | ||
}, | ||
landscape: { | ||
width: navActiveItemRectsCollection.width + "px", | ||
left: navActiveItemRectsCollection.left - navItemsRectsCollection.left + "px", | ||
height: "", | ||
top: "" | ||
} | ||
}[this.orientation]); | ||
} | ||
}, | ||
setPagination() { | ||
var _this$tabItemActive2; | ||
setPaginationSettings() { | ||
var _this$$refs2; | ||
if ((_this$tabItemActive2 = this.tabItemActive) !== null && _this$tabItemActive2 !== void 0 && _this$tabItemActive2.model) { | ||
var _this$$refs4, _this$$refs5; | ||
const paginationRefactory = (has, maxOffset, minOffset) => ({ | ||
has, | ||
maxOffset, | ||
minOffset, | ||
offset: minOffset | ||
}); | ||
const navItemsElement = (_this$$refs4 = this.$refs) === null || _this$$refs4 === void 0 ? void 0 : _this$$refs4.navItems; | ||
const { | ||
navItemsWidth | ||
} = this.getElementRect({ | ||
el: navItemsElement, | ||
prefix: "navItems" | ||
}); | ||
const { | ||
navWidth, | ||
navHeight | ||
} = this.getElementRect({ | ||
el: (_this$$refs5 = this.$refs) === null || _this$$refs5 === void 0 ? void 0 : _this$$refs5.nav, | ||
prefix: "nav" | ||
}); | ||
const navItemsHeight = [...(navItemsElement === null || navItemsElement === void 0 ? void 0 : navItemsElement.children)].slice(0, -1).map(el => el.offsetHeight).reduce((a, c) => Math.abs(a + c), 0); | ||
const navItemsElement = (_this$$refs2 = this.$refs) === null || _this$$refs2 === void 0 ? void 0 : _this$$refs2.navItems; | ||
const navItemsElementWidth = navItemsElement === null || navItemsElement === void 0 ? void 0 : navItemsElement.offsetWidth; | ||
const navItemsElementHeight = navItemsElement === null || navItemsElement === void 0 ? void 0 : navItemsElement.offsetHeight; | ||
const navElement = this.$refs.nav; | ||
const navElementWidth = navElement === null || navElement === void 0 ? void 0 : navElement.offsetWidth; | ||
const navElementHeight = navElement === null || navElement === void 0 ? void 0 : navElement.offsetHeight; | ||
Object.assign(this.pagination, { | ||
portrait: paginationRefactory(navItemsElementHeight > navElementHeight, navItemsElementHeight - navElementHeight, navElementHeight), | ||
landscape: paginationRefactory(navItemsElementWidth > navElementWidth, navItemsElementWidth - navElementWidth, navElementWidth) | ||
}[this.orientation]); | ||
const paginationFactory = (has, maxOffset, minOffset) => { | ||
const paginationOffsets = Object.entries({ | ||
has, | ||
maxOffset, | ||
minOffset, | ||
offset: minOffset | ||
}).map(([k, v]) => [k, Math.abs(v)]); | ||
return Object.fromEntries(paginationOffsets); | ||
}; | ||
Object.assign(this.pagination, { | ||
portrait: paginationFactory(navItemsHeight > navHeight, navItemsHeight - navHeight, navHeight), | ||
landscape: paginationFactory(navItemsWidth > navWidth, navItemsWidth - navWidth, navWidth) | ||
}[this.orientation]); | ||
if (this.pagination.maxOffset === 0) { | ||
this.pagination.translate = 0; | ||
} | ||
if (this.pagination.maxOffset === 0) { | ||
this.pagination.translate = 0; | ||
} | ||
}, | ||
onPagination(to) { | ||
pagitionTo(to) { | ||
const { | ||
@@ -568,87 +580,8 @@ maxOffset, | ||
paginationCollapse() { | ||
var _this$$refs6, _this$$refs6$this$tab, _this$$refs7; | ||
const { | ||
navActiveRight, | ||
navActiveLeft, | ||
navActiveTop, | ||
navActiveBottom, | ||
navActiveWidth, | ||
navActiveHeight | ||
} = this.getElementRect({ | ||
el: (_this$$refs6 = this.$refs) === null || _this$$refs6 === void 0 ? void 0 : (_this$$refs6$this$tab = _this$$refs6[this.tabItemActive.model]) === null || _this$$refs6$this$tab === void 0 ? void 0 : _this$$refs6$this$tab[0], | ||
prefix: "navActive" | ||
}); | ||
const { | ||
navRight, | ||
navLeft, | ||
navTop, | ||
navBottom | ||
} = this.getElementRect({ | ||
el: (_this$$refs7 = this.$refs) === null || _this$$refs7 === void 0 ? void 0 : _this$$refs7.nav, | ||
prefix: "nav" | ||
}); | ||
const { | ||
translate, | ||
maxOffset | ||
} = this.pagination; | ||
let toTranslate = translate; // Portrait | ||
if (this.vertical && navActiveBottom > navBottom) { | ||
toTranslate = toTranslate + navActiveHeight; | ||
} | ||
if (this.vertical && navActiveTop < navTop) { | ||
toTranslate = navActiveHeight > toTranslate ? 0 : toTranslate - navActiveHeight; | ||
} // Landscape | ||
if (!this.vertical && navActiveRight > navRight) { | ||
toTranslate = toTranslate + navActiveWidth; | ||
} | ||
if (!this.vertical && navActiveLeft < navLeft) { | ||
toTranslate = navActiveWidth > toTranslate ? 0 : toTranslate - navActiveWidth; | ||
} | ||
if (toTranslate > maxOffset) { | ||
toTranslate = toTranslate + (maxOffset - toTranslate); | ||
} | ||
this.pagination.translate = Math.abs(toTranslate); | ||
async resizable() { | ||
await this.$nextTick(); | ||
this.setPaginationSettings(); | ||
this.setSliderPosition(); | ||
}, | ||
resizable() { | ||
this.$nextTick(() => { | ||
this.setPagination(); | ||
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); | ||
}, | ||
setTheme() { | ||
const { | ||
nav, | ||
navItem, | ||
slider | ||
} = this.theme; | ||
this.$el.style.background = nav; | ||
this.$refs.navItems.style.color = navItem; | ||
if (this.slider) this.slider.style.background = slider; | ||
}, | ||
getActiveColor({ | ||
@@ -697,3 +630,3 @@ model | ||
"click": function ($event) { | ||
return _vm.onPagination('prev'); | ||
return _vm.pagitionTo('prev'); | ||
} | ||
@@ -705,4 +638,4 @@ } | ||
rawName: "v-touch", | ||
value: _vm.onPagination, | ||
expression: "onPagination" | ||
value: _vm.pagitionTo, | ||
expression: "pagitionTo" | ||
}], | ||
@@ -755,3 +688,3 @@ ref: "nav", | ||
"click": function ($event) { | ||
return _vm.onPagination('next'); | ||
return _vm.pagitionTo('next'); | ||
} | ||
@@ -767,7 +700,7 @@ } | ||
if (!inject) return; | ||
inject("data-v-b6c84eb6_0", { | ||
source: ".tab__pagination[data-v-b6c84eb6]{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-b6c84eb6],.tab__pagination__next[data-v-b6c84eb6]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-b6c84eb6] .vmt__btn svg{transform:rotate(180deg)}.tab__nav[data-v-b6c84eb6]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-b6c84eb6]{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-b6c84eb6]{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;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-b6c84eb6]:hover:not(.disabled,.active){background:hsla(0,0%,100%,.09)}.tab__nav__items .active[data-v-b6c84eb6]:hover{background:hsla(0,0%,100%,.18)}.tab__nav__items .disabled[data-v-b6c84eb6]{background:#6969694f}.tab__slider[data-v-b6c84eb6]{height:2px;width:2px;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-b6c84eb6]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-b6c84eb6]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-b6c84eb6]{padding:0;margin:0}.tab__pagination--vertical[data-v-b6c84eb6] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-b6c84eb6] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-b6c84eb6]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tab__pagination--auto .tab__nav__item[data-v-b6c84eb6]{flex:1 auto}", | ||
inject("data-v-27b1c930_0", { | ||
source: ".tab__pagination[data-v-27b1c930]{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-27b1c930],.tab__pagination__next[data-v-27b1c930]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-27b1c930] .vmt__btn svg{transform:rotate(180deg)}.tab__nav[data-v-27b1c930]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-27b1c930]{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-27b1c930]{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;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-27b1c930]:hover:not(.disabled,.active){background:hsla(0,0%,100%,.09)}.tab__nav__items .active[data-v-27b1c930]:hover{background:hsla(0,0%,100%,.18)}.tab__nav__items .disabled[data-v-27b1c930]{background:#6969694f}.tab__slider[data-v-27b1c930]{height:2px;width:2px;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-27b1c930]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-27b1c930]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-27b1c930]{padding:0;margin:0}.tab__pagination--vertical[data-v-27b1c930] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-27b1c930] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-27b1c930]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tab__pagination--auto .tab__nav__item[data-v-27b1c930]{flex:1 auto}", | ||
map: undefined, | ||
media: undefined | ||
}), inject("data-v-b6c84eb6_1", { | ||
}), inject("data-v-27b1c930_1", { | ||
source: ".ripple{z-index:2;background-color:hsla(0,0%,100%,.23);border-radius:50%;position:absolute;transform:scale(0);animation:ripple .6s linear}@keyframes ripple{to{transform:scale(2.5);opacity:0}}", | ||
@@ -781,3 +714,3 @@ map: undefined, | ||
const __vue_scope_id__$2 = "data-v-b6c84eb6"; | ||
const __vue_scope_id__$2 = "data-v-27b1c930"; | ||
/* module identifier */ | ||
@@ -784,0 +717,0 @@ |
@@ -1,1 +0,1 @@ | ||
var VueMaterialTabs=function(){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e,n,i,a,r,o){try{var s=t[r](o),l=s.value}catch(t){return void n(t)}s.done?e(l):Promise.resolve(l).then(i,a)}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 i,a,r=[],o=!0,s=!1;try{for(n=n.call(t);!(o=(i=n.next()).done)&&(r.push(i.value),!e||r.length!==e);o=!0);}catch(t){s=!0,a=t}finally{try{o||null==n.return||n.return()}finally{if(s)throw a}}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 i(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)||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 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,i=new Array(e);n<e;n++)i[n]=t[n];return i}function o(t){var e=t.currentTarget,n=function(t){var e=t.currentTarget.getBoundingClientRect(),n=t.clientX-e.left,i=t.clientY-e.top,a=Math.sqrt(Math.pow(t.currentTarget.clientWidth,2)+Math.pow(t.currentTarget.clientHeight,2))/2;return{x:"".concat(n-a,"px"),y:"".concat(i-a,"px"),size:"".concat(2*a,"px")}}(t),i=n.size,a=n.y,r=n.x,o=document.createElement("span");o.classList.add("ripple"),o.style.width=o.style.height=i,o.style.top=a,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 l={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,i,a,r=0,o=function(t){return function(){var n;clearTimeout(r),r=setTimeout(t,Number(null===(n=e.value)||void 0===n?void 0:n.delay)||400)}};"function"==typeof e.value?t._onResize=null!==(a=e.modifiers)&&void 0!==a&&a.debounce?o(e.value):e.value:"function"==typeof(null===(n=e.value)||void 0===n?void 0:n.cb)&&null!==(i=e.modifiers)&&void 0!==i&&i.debounce&&(t._onResize=o(e.value.cb)),window.addEventListener("resize",t._onResize)},unbind:function(t){window.removeEventListener("resize",t._onResize),delete t._onResize}},d={touchstartX:0,isSwiping:!1};function v(t){d.isSwiping=!0,d.touchstartX=t.touches[0].clientX}function u(t){if(d.isSwiping){var e=t.currentTarget,n=t.changedTouches[0].clientX,i=d.touchstartX-n,a=Math.abs(.1*e.offsetWidth);i>a?(d.isSwiping=!1,e._callback("next")):i<-a&&(d.isSwiping=!1,e._callback("prev"))}}var f={bind:function(t,e){var n=e.value;n&&t&&(t._callback=n,function(t){t.addEventListener("touchstart",v),t.addEventListener("touchmove",u)}(t))},unbind:function(t){!function(t){t.removeEventListener("touchstart",v),t.removeEventListener("touchmove",u)}(t),t._callback&&delete t._callback}};function m(t,e,n,i,a,r,o,s,l,c){"boolean"!=typeof o&&(l=s,s=o,o=!1);const d="function"==typeof n?n.options:n;let v;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,a&&(d.functional=!0)),i&&(d._scopeId=i),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,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},d._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(d.functional){const t=d.render;d.render=function(e,n){return v.call(n),t(e,n)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,v):[v]}return n}const h="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function p(t){return(t,e)=>function(t,e){const n=h?e.media||"default":t,i=_[n]||(_[n]={ids:new Set,styles:[]});if(!i.ids.has(t)){i.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))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===b&&(b=document.head||document.getElementsByTagName("head")[0]),b.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(n),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const t=i.ids.size-1,e=document.createTextNode(n),a=i.element.childNodes;a[t]&&i.element.removeChild(a[t]),a.length?i.element.insertBefore(e,a[t]):i.element.appendChild(e)}}}(t,e)}let b;const _={};var g=m({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{directives:[{name:"resize",rawName:"v-resize.debounce",value:t.resizable,expression:"resizable",modifiers:{debounce:!0}}],class:t.classes},[n("div",{staticClass:"tab__pagination__prev"},[t.pagination.has?n("Btn",{attrs:{disabled:!t.paginateIndicator.prev},on:{click:function(e){return t.onPagination("prev")}}}):t._e()],1),t._v(" "),n("nav",{directives:[{name:"touch",rawName:"v-touch",value:t.onPagination,expression:"onPagination"}],ref:"nav",staticClass:"tab__nav"},[n("ul",{ref:"navItems",staticClass:"tab__nav__items",style:t.transform},[t._l(t.navItems,(function(e){return n("li",{directives:[{name:"ripple",rawName:"v-ripple",value:t.ripple&&!e.disabled,expression:"ripple && !navItem.disabled"}],key:e.model,ref:e.model,refInFor:!0,staticClass:"tab__nav__item",class:{active:e.model===t.tabItemActive.model,disabled:e.disabled},style:t.getActiveColor(e),on:{click:function(n){return n.preventDefault(),t.select(e)}}},[n("VNode",{attrs:{node:e.nameSlot,name:e.name}})],1)})),t._v(" "),t.navSlider?n("hr",{ref:"slider",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.onPagination("next")}}}):t._e()],1)])},staticRenderFns:[]},(function(t){t&&(t("data-v-b6c84eb6_0",{source:".tab__pagination[data-v-b6c84eb6]{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-b6c84eb6],.tab__pagination__next[data-v-b6c84eb6]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-b6c84eb6] .vmt__btn svg{transform:rotate(180deg)}.tab__nav[data-v-b6c84eb6]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-b6c84eb6]{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-b6c84eb6]{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;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-b6c84eb6]:hover:not(.disabled,.active){background:hsla(0,0%,100%,.09)}.tab__nav__items .active[data-v-b6c84eb6]:hover{background:hsla(0,0%,100%,.18)}.tab__nav__items .disabled[data-v-b6c84eb6]{background:#6969694f}.tab__slider[data-v-b6c84eb6]{height:2px;width:2px;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-b6c84eb6]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-b6c84eb6]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-b6c84eb6]{padding:0;margin:0}.tab__pagination--vertical[data-v-b6c84eb6] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-b6c84eb6] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-b6c84eb6]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tab__pagination--auto .tab__nav__item[data-v-b6c84eb6]{flex:1 auto}",map:void 0,media:void 0}),t("data-v-b6c84eb6_1",{source:".ripple{z-index:2;background-color:hsla(0,0%,100%,.23);border-radius:50%;position:absolute;transform:scale(0);animation:ripple .6s linear}@keyframes ripple{to{transform:scale(2.5);opacity:0}}",map:void 0,media:void 0}))}),{inject:["theme"],components:{Btn:m({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("button",{staticClass:"vmt__btn",on:{click:function(e){return t.$emit("click")}}},[n("svg",{style:{fill:t.theme.arrow},attrs:{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-c67981d6_0",{source:".vmt__btn[data-v-c67981d6]{outline:0;border:none;background:0 0;cursor:pointer}.vmt__btn svg[data-v-c67981d6]{height:24px;width:24px;fill:rgba(214,213,213,.925)}.vmt__btn:disabled svg[data-v-c67981d6]{fill:#d6d6d652!important;cursor:default}",map:void 0,media:void 0})}),{name:"Btn",inject:["theme"]},"data-v-c67981d6",false,undefined,!1,p,void 0,void 0),VNode:{functional:!0,render:function(t,e){var n=e.props;return n.node?n.node:t("span",n.name)}}},directives:{ripple:l,resize:c,touch:f},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}},transform:function(){return"transform: translate".concat(this.vertical?"Y":"X","(-").concat(this.pagination.translate,"px)")},paginateIndicator:function(){var t=this.pagination,e=t.translate;return{next:e<t.maxOffset,prev:e>0}},orientation:function(){return this.vertical?"portrait":"landscape"},slider:function(){var t;return null===(t=this.$refs)||void 0===t?void 0:t.slider}},watch:{navItems:"resizable",vertical:function(){Object.assign(this.$data,this.$options.data()),this.resizable()},tabItemActive:function(){this.sliderHandler(),this.pagination.has&&this.paginationCollapse()}},mounted:function(){this.setTheme(),this.resizable()},methods:{select:function(t){this.$emit("select",t)},sliderHandler:function(){var t,n=this;return(t=regeneratorRuntime.mark((function t(){var e,i,a,r,o,s,l,c,d,v,u,f,m,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(null===(e=n.tabItemActive)||void 0===e||!e.model){t.next=7;break}return t.next=3,n.$nextTick();case 3:o=null===(i=n.$refs)||void 0===i?void 0:i.navItems,s=n.getElementRect({el:o,prefix:"navItems"}),l=s.navItemsLeft,c=s.navItemsTop,d=n.getElementRect({el:null===(a=n.$refs)||void 0===a||null===(r=a[n.tabItemActive.model])||void 0===r?void 0:r[0],prefix:"navActive"}),v=d.navActiveWidth,u=d.navActiveHeight,f=d.navActiveLeft,m=d.navActiveTop,n.slider&&Object.assign(null===(h=n.slider)||void 0===h?void 0:h.style,{portrait:{height:"".concat(u,"px"),top:"".concat(m-c,"px"),width:"",left:""},landscape:{width:"".concat(v,"px"),left:"".concat(f-l,"px"),height:"",top:""}}[n.orientation]);case 7:case"end":return t.stop()}}),t)})),function(){var n=this,i=arguments;return new Promise((function(a,r){var o=t.apply(n,i);function s(t){e(o,a,r,s,l,"next",t)}function l(t){e(o,a,r,s,l,"throw",t)}s(void 0)}))})()},setPagination:function(){var t;if(null!==(t=this.tabItemActive)&&void 0!==t&&t.model){var e,a,r=null===(e=this.$refs)||void 0===e?void 0:e.navItems,o=this.getElementRect({el:r,prefix:"navItems"}).navItemsWidth,s=this.getElementRect({el:null===(a=this.$refs)||void 0===a?void 0:a.nav,prefix:"nav"}),l=s.navWidth,c=s.navHeight,d=i(null==r?void 0:r.children).slice(0,-1).map((function(t){return t.offsetHeight})).reduce((function(t,e){return Math.abs(t+e)}),0),v=function(t,e,i){var a=Object.entries({has:t,maxOffset:e,minOffset:i,offset:i}).map((function(t){var e=n(t,2),i=e[0],a=e[1];return[i,Math.abs(a)]}));return Object.fromEntries(a)};Object.assign(this.pagination,{portrait:v(d>c,d-c,c),landscape:v(o>l,o-l,l)}[this.orientation]),0===this.pagination.maxOffset&&(this.pagination.translate=0)}},onPagination:function(t){var e=this.pagination,n=e.maxOffset,i=e.offset,a=e.translate,r=e.minOffset;if("prev"===t&&this.paginateIndicator.prev){if(i<=r&&(this.pagination.offset=r),a-i<i)return void(this.pagination.translate=0);this.pagination.translate=a-i}"next"===t&&this.paginateIndicator.next&&(a+i>n&&(this.pagination.offset=n-a),this.pagination.translate=a+this.pagination.offset)},paginationCollapse:function(){var t,e,n,i=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"}),a=i.navActiveRight,r=i.navActiveLeft,o=i.navActiveTop,s=i.navActiveBottom,l=i.navActiveWidth,c=i.navActiveHeight,d=this.getElementRect({el:null===(n=this.$refs)||void 0===n?void 0:n.nav,prefix:"nav"}),v=d.navRight,u=d.navLeft,f=d.navTop,m=d.navBottom,h=this.pagination,p=h.translate,b=h.maxOffset,_=p;this.vertical&&s>m&&(_+=c),this.vertical&&o<f&&(_=c>_?0:_-c),!this.vertical&&a>v&&(_+=l),!this.vertical&&r<u&&(_=l>_?0:_-l),_>b&&(_+=b-_),this.pagination.translate=Math.abs(_)},resizable:function(){var t=this;this.$nextTick((function(){t.setPagination(),t.sliderHandler()}))},getElementRect:function(t){var e=t.el,i=t.prefix;if(e){var a=JSON.parse,r=JSON.stringify,o=Object.entries(a(r(e.getBoundingClientRect()))).map((function(t){var e=n(t,2),a=e[0],r=e[1];return[i+a.charAt(0).toUpperCase()+a.slice(1),r]}));return Object.fromEntries(o)}},setTheme:function(){var t=this.theme,e=t.nav,n=t.navItem,i=t.slider;this.$el.style.background=e,this.$refs.navItems.style.color=n,this.slider&&(this.slider.style.background=i)},getActiveColor:function(t){if(t.model===this.tabItemActive.model)return{color:this.theme.navActiveItem}}}},"data-v-b6c84eb6",false,undefined,!1,p,void 0,void 0),I=function(t,e,n,i,a){return{nav:t,navItem:e,navActiveItem:n,slider:i,arrow:a}},x={default:I("#fff","#000000","#1867c0","#1867c0","#616161"),purple:I("#4A148C","#BDBDBD","#fff","#CE93D8","#f3f3f3"),red:I("#F44336","#f3f3f3","#fff","#EF9A9A","#f3f3f3"),pink:I("#E91E63","#F8BBD0","#fff","#F8BBD0","#f3f3f3"),cyan:I("#00BCD4","#B2EBF2","#fff","#80DEEA","#f3f3f3"),green:I("#4CAF50","#C8E6C9","#fff","#A5D6A7","#f3f3f3")},y=m({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",{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-70c2cf86_0",{source:".tabs[data-v-70c2cf86]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-70c2cf86]{display:flex;position:relative;justify-content:center;align-items:center;overflow:hidden}.tabs--vertical[data-v-70c2cf86]{flex-direction:row}",map:void 0,media:void 0})}),{name:"Tabs",components:{NavTab:g},directives:{touch:f},provide:function(){return{theme:this.getTheme}},props:{value:[Number,String],theme:{type:[Object,String],default:"default"},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},noTouch:Boolean},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}},transition:function(){return{slide:this.slide,duration:this.slide?this.slideDuration:0,vertical:this.slideVertical,side:this.slideSide}},getTheme:function(){return"string"==typeof this.theme?x[this.theme]||x.default:"object"===t(this.theme)&&this.theme?this.theme:x.default}},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)},value:{immediate:!0,handler:function(t){var e=this;this.$nextTick((function(){var n=e.navItems[t];n&&e.activeTabItem(n)}))}}},methods:{register:function(t){this.isTabItemComponent(t)&&(this.tabItems.push(t),this.setNavItem(t))},unRegister:function(t){this.isTabItemComponent(t)&&(this.disableTabItem(t.ownNavItemIndex),this.tabItems.splice(this.findIndexTab(t),1),this.navItems.splice(t.ownNavItemIndex,1),this.tabItemIndexes.last=this.navItems.length-1)},isTabItemComponent:function(t){var e=t.$options;return"TabItem"===(null==e?void 0:e.name)},setNavItem:function(t){var e,n=t.model,i=t.name,a=t.disabled,r=t.$slots;this.navItems.push({model:n,name:i,disabled:a,nameSlot:null===(e=r.name)||void 0===e?void 0:e[0]}),this.tabItemIndexes.last=this.navItems.length-1},activeTabItem:function(t){null!=t&&t.disabled||(this.tabItemActive=t,this.$emit("input",this.findIndexTab(t)))},disableTabItem:function(t){var e=this.tabItemIndexes,n=e.current,i=e.last;if(t===n){var a=n===i?n-1:n+1;this.activeTabItem(this.navItems[a])}},setTabItemTransitionSide:function(){var t=this.tabItemIndexes,e=t.current,n=t.previous;this.slideSide=e>n?"right":"left"},onTouchSlide:function(t){if(!this.noTouch){var e,n=this.tabItemIndexes,i=n.current,a=n.last;"next"===t&&i<a?e=this.navItems[i+1]:"prev"===t&&i>0&&(e=this.navItems[i-1]),e&&this.activeTabItem(e)}},findIndexTab:function(t){return this.tabItems.findIndex((function(e){return e.model==t.model}))}}},"data-v-70c2cf86",false,undefined,!1,p,void 0,void 0),T=m({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:t.slideDirection},on:{beforeEnter:t.beforeEnterHandle,leave:t.leaveHandle}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.isActived,expression:"isActived"}],staticClass:"vmt__tab-item",style:{"transition-duration":t.transition.duration+"ms"}},[t._t("default")],2)])},staticRenderFns:[]},(function(t){t&&t("data-v-90aaa762_0",{source:".vmt__tab-item[data-v-90aaa762]{top:0;left:0;z-index:1;width:100%;height:inherit;background:#fff;transition:transform cubic-bezier(.25,.8,.5,1)}.slide-left-enter[data-v-90aaa762],.slide-right-leave-to[data-v-90aaa762]{transform:translateX(-100%)}.slide-left-leave-to[data-v-90aaa762],.slide-right-enter[data-v-90aaa762]{transform:translateX(100%)}.slide-bottom-leave-to[data-v-90aaa762],.slide-top-enter[data-v-90aaa762]{transform:translateY(-100%)}.slide-bottom-enter[data-v-90aaa762],.slide-top-leave-to[data-v-90aaa762]{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:Math.random().toString("16").substring("2")}},mounted:function(){this.$parent.register(this)},beforeDestroy:function(){this.$parent.unRegister(this)},computed:{transition:function(){return this.$parent.transition||200},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,e=this;return null===(t=this.$parent)||void 0===t?void 0:t.navItems.findIndex((function(t){return t.model===e.model}))}},watch:{disabled:function(t){var e;t&&(null===(e=this.$parent)||void 0===e||e.disableTabItem(this.ownNavItemIndex)),this.$parent.navItems[this.ownNavItemIndex].disabled=t}},methods:{beforeEnterHandle:function(t){t.style.position="relative"},leaveHandle:function(t){t.style.position="absolute"}}},"data-v-90aaa762",false,undefined,!1,p,void 0,void 0),w=Object.freeze({__proto__:null,Tabs:y,TabItem:T}),A=function(t){Object.entries(w).forEach((function(e){var i=n(e,2),a=i[0],r=i[1];t.component(a,r)}))},S=Object.freeze({__proto__:null,default:A,Tabs:y,TabItem:T});return Object.entries(S).forEach((function(t){var e=n(t,2),i=e[0],a=e[1];"default"!==i&&(A[i]=a)})),A}(); | ||
var VueMaterialTabs=function(){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e,n,i,a,o,r){try{var s=t[o](r),l=s.value}catch(t){return void n(t)}s.done?e(l):Promise.resolve(l).then(i,a)}function n(t){return function(){var n=this,i=arguments;return new Promise((function(a,o){var r=t.apply(n,i);function s(t){e(r,a,o,s,l,"next",t)}function l(t){e(r,a,o,s,l,"throw",t)}s(void 0)}))}}function i(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 i,a,o=[],r=!0,s=!1;try{for(n=n.call(t);!(r=(i=n.next()).done)&&(o.push(i.value),!e||o.length!==e);r=!0);}catch(t){s=!0,a=t}finally{try{r||null==n.return||n.return()}finally{if(s)throw a}}return o}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return a(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return a(t,e)}(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,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function o(t){var e=t.currentTarget,n=function(t){var e=t.currentTarget.getBoundingClientRect(),n=t.clientX-e.left,i=t.clientY-e.top,a=Math.sqrt(Math.pow(t.currentTarget.clientWidth,2)+Math.pow(t.currentTarget.clientHeight,2))/2;return{x:"".concat(n-a,"px"),y:"".concat(i-a,"px"),size:"".concat(2*a,"px")}}(t),i=n.size,a=n.y,o=n.x,r=document.createElement("span");r.classList.add("ripple"),r.style.width=r.style.height=i,r.style.top=a,r.style.left=o,e.appendChild(r),setTimeout((function(){return r.remove()}),1e3)}function r(t,e){null==t||t[e?"addEventListener":"removeEventListener"]("click",o)}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 l={inserted:function(t,e){var n,i,a,o=0,r=function(t){return function(){var n;clearTimeout(o),o=setTimeout(t,Number(null===(n=e.value)||void 0===n?void 0:n.delay)||400)}};"function"==typeof e.value?t._onResize=null!==(a=e.modifiers)&&void 0!==a&&a.debounce?r(e.value):e.value:"function"==typeof(null===(n=e.value)||void 0===n?void 0:n.cb)&&null!==(i=e.modifiers)&&void 0!==i&&i.debounce&&(t._onResize=r(e.value.cb)),window.addEventListener("resize",t._onResize)},unbind:function(t){window.removeEventListener("resize",t._onResize),delete t._onResize}},d={touchstartX:0,isSwiping:!1};function c(t){d.isSwiping=!0,d.touchstartX=t.touches[0].clientX}function u(t){if(d.isSwiping){var e=t.currentTarget,n=t.changedTouches[0].clientX,i=d.touchstartX-n,a=Math.abs(.1*e.offsetWidth);i>a?(d.isSwiping=!1,e._callback("next")):i<-a&&(d.isSwiping=!1,e._callback("prev"))}}var v={bind:function(t,e){var n=e.value;n&&t&&(t._callback=n,function(t){t.addEventListener("touchstart",c),t.addEventListener("touchmove",u)}(t))},unbind:function(t){!function(t){t.removeEventListener("touchstart",c),t.removeEventListener("touchmove",u)}(t),t._callback&&delete t._callback}};function f(t,e,n,i,a,o,r,s,l,d){"boolean"!=typeof r&&(l=s,s=r,r=!1);const c="function"==typeof n?n.options:n;let u;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,a&&(c.functional=!0)),i&&(c._scopeId=i),o?(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,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(o)},c._ssrRegister=u):e&&(u=r?function(t){e.call(this,d(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,s(t))}),u)if(c.functional){const t=c.render;c.render=function(e,n){return u.call(n),t(e,n)}}else{const t=c.beforeCreate;c.beforeCreate=t?[].concat(t,u):[u]}return n}const m="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function h(t){return(t,e)=>function(t,e){const n=m?e.media||"default":t,i=b[n]||(b[n]={ids:new Set,styles:[]});if(!i.ids.has(t)){i.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))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===p&&(p=document.head||document.getElementsByTagName("head")[0]),p.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(n),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const t=i.ids.size-1,e=document.createTextNode(n),a=i.element.childNodes;a[t]&&i.element.removeChild(a[t]),a.length?i.element.insertBefore(e,a[t]):i.element.appendChild(e)}}}(t,e)}let p;const b={};var _=f({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{directives:[{name:"resize",rawName:"v-resize.debounce",value:t.resizable,expression:"resizable",modifiers:{debounce:!0}}],class:t.classes},[n("div",{staticClass:"tab__pagination__prev"},[t.pagination.has?n("Btn",{attrs:{disabled:!t.paginateIndicator.prev},on:{click:function(e){return t.pagitionTo("prev")}}}):t._e()],1),t._v(" "),n("nav",{directives:[{name:"touch",rawName:"v-touch",value:t.pagitionTo,expression:"pagitionTo"}],ref:"nav",staticClass:"tab__nav"},[n("ul",{ref:"navItems",staticClass:"tab__nav__items",style:t.transform},[t._l(t.navItems,(function(e){return n("li",{directives:[{name:"ripple",rawName:"v-ripple",value:t.ripple&&!e.disabled,expression:"ripple && !navItem.disabled"}],key:e.model,ref:e.model,refInFor:!0,staticClass:"tab__nav__item",class:{active:e.model===t.tabItemActive.model,disabled:e.disabled},style:t.getActiveColor(e),on:{click:function(n){return n.preventDefault(),t.select(e)}}},[n("VNode",{attrs:{node:e.nameSlot,name:e.name}})],1)})),t._v(" "),t.navSlider?n("hr",{ref:"slider",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.pagitionTo("next")}}}):t._e()],1)])},staticRenderFns:[]},(function(t){t&&(t("data-v-27b1c930_0",{source:".tab__pagination[data-v-27b1c930]{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-27b1c930],.tab__pagination__next[data-v-27b1c930]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-27b1c930] .vmt__btn svg{transform:rotate(180deg)}.tab__nav[data-v-27b1c930]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-27b1c930]{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-27b1c930]{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;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-27b1c930]:hover:not(.disabled,.active){background:hsla(0,0%,100%,.09)}.tab__nav__items .active[data-v-27b1c930]:hover{background:hsla(0,0%,100%,.18)}.tab__nav__items .disabled[data-v-27b1c930]{background:#6969694f}.tab__slider[data-v-27b1c930]{height:2px;width:2px;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-27b1c930]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-27b1c930]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-27b1c930]{padding:0;margin:0}.tab__pagination--vertical[data-v-27b1c930] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-27b1c930] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-27b1c930]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tab__pagination--auto .tab__nav__item[data-v-27b1c930]{flex:1 auto}",map:void 0,media:void 0}),t("data-v-27b1c930_1",{source:".ripple{z-index:2;background-color:hsla(0,0%,100%,.23);border-radius:50%;position:absolute;transform:scale(0);animation:ripple .6s linear}@keyframes ripple{to{transform:scale(2.5);opacity:0}}",map:void 0,media:void 0}))}),{inject:["theme"],components:{Btn:f({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("button",{staticClass:"vmt__btn",on:{click:function(e){return t.$emit("click")}}},[n("svg",{style:{fill:t.theme.arrow},attrs:{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-c67981d6_0",{source:".vmt__btn[data-v-c67981d6]{outline:0;border:none;background:0 0;cursor:pointer}.vmt__btn svg[data-v-c67981d6]{height:24px;width:24px;fill:rgba(214,213,213,.925)}.vmt__btn:disabled svg[data-v-c67981d6]{fill:#d6d6d652!important;cursor:default}",map:void 0,media:void 0})}),{name:"Btn",inject:["theme"]},"data-v-c67981d6",false,undefined,!1,h,void 0,void 0),VNode:{functional:!0,render:function(t,e){var n=e.props;return n.node?n.node:t("span",n.name)}}},directives:{ripple:s,resize:l,touch:v},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}},transform:function(){return"transform: translate".concat(this.vertical?"Y":"X","(-").concat(this.pagination.translate,"px)")},paginateIndicator:function(){var t=this.pagination,e=t.translate;return{next:e<t.maxOffset,prev:e>0}},orientation:function(){return this.vertical?"portrait":"landscape"},sliderElement:function(){var t;return null===(t=this.$refs)||void 0===t?void 0:t.slider}},watch:{navItems:"resizable",vertical:function(){Object.assign(this.$data,this.$options.data()),this.resizable()},tabItemActive:function(t){if(this.setSliderPosition(),this.pagination.has&&null!=t&&t.model){var e,n,i=this.$refs[t.model][0],a=this.$refs.nav,o=null==i||null===(e=i.getClientRects())||void 0===e?void 0:e[0],r=null==a||null===(n=a.getClientRects())||void 0===n?void 0:n[0];if(!o||!r)return;var s=this.pagination,l=s.translate,d=s.maxOffset,c=l;"portrait"===this.orientation&&(o.bottom>r.bottom&&(c+=o.height),o.top<r.top&&(c=o.height>c?0:c-o.height)),"landscape"===this.orientation&&(o.right>r.right&&(c+=o.width),o.left<r.left&&(c=o.width>c?0:c-o.width),c>d&&(c+=d-c)),this.pagination.translate=Math.abs(c)}}},mounted:function(){var t=this.theme,e=t.nav,n=t.navItem,i=t.slider;this.$el.style.background=e,this.$refs.navItems.style.color=n,this.sliderElement&&(this.sliderElement.style.background=i)},methods:{select:function(t){this.$emit("select",t)},setSliderPosition:function(){var t=this;return n(regeneratorRuntime.mark((function e(){var n,i,a,o,r,s,l,d,c;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.$nextTick();case 2:if(s=null===(n=t.tabItemActive)||void 0===n?void 0:n.model){e.next=5;break}return e.abrupt("return");case 5:l=null===(i=t.$refs.navItems)||void 0===i||null===(a=i.getClientRects())||void 0===a?void 0:a[0],d=null===(o=t.$refs[s][0])||void 0===o||null===(r=o.getClientRects())||void 0===r?void 0:r[0],t.sliderElement&&Object.assign(null===(c=t.sliderElement)||void 0===c?void 0:c.style,{portrait:{height:d.height+"px",top:d.top-l.top+"px",width:"",left:""},landscape:{width:d.width+"px",left:d.left-l.left+"px",height:"",top:""}}[t.orientation]);case 8:case"end":return e.stop()}}),e)})))()},setPaginationSettings:function(){var t,e=function(t,e,n){return{has:t,maxOffset:e,minOffset:n,offset:n}},n=null===(t=this.$refs)||void 0===t?void 0:t.navItems,i=null==n?void 0:n.offsetWidth,a=null==n?void 0:n.offsetHeight,o=this.$refs.nav,r=null==o?void 0:o.offsetWidth,s=null==o?void 0:o.offsetHeight;Object.assign(this.pagination,{portrait:e(a>s,a-s,s),landscape:e(i>r,i-r,r)}[this.orientation]),0===this.pagination.maxOffset&&(this.pagination.translate=0)},pagitionTo:function(t){var e=this.pagination,n=e.maxOffset,i=e.offset,a=e.translate,o=e.minOffset;if("prev"===t&&this.paginateIndicator.prev){if(i<=o&&(this.pagination.offset=o),a-i<i)return void(this.pagination.translate=0);this.pagination.translate=a-i}"next"===t&&this.paginateIndicator.next&&(a+i>n&&(this.pagination.offset=n-a),this.pagination.translate=a+this.pagination.offset)},resizable:function(){var t=this;return n(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.$nextTick();case 2:t.setPaginationSettings(),t.setSliderPosition();case 4:case"end":return e.stop()}}),e)})))()},getActiveColor:function(t){if(t.model===this.tabItemActive.model)return{color:this.theme.navActiveItem}}}},"data-v-27b1c930",false,undefined,!1,h,void 0,void 0),g=function(t,e,n,i,a){return{nav:t,navItem:e,navActiveItem:n,slider:i,arrow:a}},I={default:g("#fff","#000000","#1867c0","#1867c0","#616161"),purple:g("#4A148C","#BDBDBD","#fff","#CE93D8","#f3f3f3"),red:g("#F44336","#f3f3f3","#fff","#EF9A9A","#f3f3f3"),pink:g("#E91E63","#F8BBD0","#fff","#F8BBD0","#f3f3f3"),cyan:g("#00BCD4","#B2EBF2","#fff","#80DEEA","#f3f3f3"),green:g("#4CAF50","#C8E6C9","#fff","#A5D6A7","#f3f3f3")},x=f({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",{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-70c2cf86_0",{source:".tabs[data-v-70c2cf86]{background:#fff;display:flex;flex-direction:column;border-radius:.23rem;height:100%;width:100%}.tabs__content[data-v-70c2cf86]{display:flex;position:relative;justify-content:center;align-items:center;overflow:hidden}.tabs--vertical[data-v-70c2cf86]{flex-direction:row}",map:void 0,media:void 0})}),{name:"Tabs",components:{NavTab:_},directives:{touch:v},provide:function(){return{theme:this.getTheme}},props:{value:[Number,String],theme:{type:[Object,String],default:"default"},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},noTouch:Boolean},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}},transition:function(){return{slide:this.slide,duration:this.slide?this.slideDuration:0,vertical:this.slideVertical,side:this.slideSide}},getTheme:function(){return"string"==typeof this.theme?I[this.theme]||I.default:"object"===t(this.theme)&&this.theme?this.theme:I.default}},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)},value:{immediate:!0,handler:function(t){var e=this;this.$nextTick((function(){var n=e.navItems[t];n&&e.activeTabItem(n)}))}}},methods:{register:function(t){this.isTabItemComponent(t)&&(this.tabItems.push(t),this.setNavItem(t))},unRegister:function(t){this.isTabItemComponent(t)&&(this.disableTabItem(t.ownNavItemIndex),this.tabItems.splice(this.findIndexTab(t),1),this.navItems.splice(t.ownNavItemIndex,1),this.tabItemIndexes.last=this.navItems.length-1)},isTabItemComponent:function(t){var e=t.$options;return"TabItem"===(null==e?void 0:e.name)},setNavItem:function(t){var e,n=t.model,i=t.name,a=t.disabled,o=t.$slots;this.navItems.push({model:n,name:i,disabled:a,nameSlot:null===(e=o.name)||void 0===e?void 0:e[0]}),this.tabItemIndexes.last=this.navItems.length-1},activeTabItem:function(t){null!=t&&t.disabled||(this.tabItemActive=t,this.$emit("input",this.findIndexTab(t)))},disableTabItem:function(t){var e=this.tabItemIndexes,n=e.current,i=e.last;if(t===n){var a=n===i?n-1:n+1;this.activeTabItem(this.navItems[a])}},setTabItemTransitionSide:function(){var t=this.tabItemIndexes,e=t.current,n=t.previous;this.slideSide=e>n?"right":"left"},onTouchSlide:function(t){if(!this.noTouch){var e,n=this.tabItemIndexes,i=n.current,a=n.last;"next"===t&&i<a?e=this.navItems[i+1]:"prev"===t&&i>0&&(e=this.navItems[i-1]),e&&this.activeTabItem(e)}},findIndexTab:function(t){return this.tabItems.findIndex((function(e){return e.model==t.model}))}}},"data-v-70c2cf86",false,undefined,!1,h,void 0,void 0),y=f({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:t.slideDirection},on:{beforeEnter:t.beforeEnterHandle,leave:t.leaveHandle}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.isActived,expression:"isActived"}],staticClass:"vmt__tab-item",style:{"transition-duration":t.transition.duration+"ms"}},[t._t("default")],2)])},staticRenderFns:[]},(function(t){t&&t("data-v-90aaa762_0",{source:".vmt__tab-item[data-v-90aaa762]{top:0;left:0;z-index:1;width:100%;height:inherit;background:#fff;transition:transform cubic-bezier(.25,.8,.5,1)}.slide-left-enter[data-v-90aaa762],.slide-right-leave-to[data-v-90aaa762]{transform:translateX(-100%)}.slide-left-leave-to[data-v-90aaa762],.slide-right-enter[data-v-90aaa762]{transform:translateX(100%)}.slide-bottom-leave-to[data-v-90aaa762],.slide-top-enter[data-v-90aaa762]{transform:translateY(-100%)}.slide-bottom-enter[data-v-90aaa762],.slide-top-leave-to[data-v-90aaa762]{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:Math.random().toString("16").substring("2")}},mounted:function(){this.$parent.register(this)},beforeDestroy:function(){this.$parent.unRegister(this)},computed:{transition:function(){return this.$parent.transition||200},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,e=this;return null===(t=this.$parent)||void 0===t?void 0:t.navItems.findIndex((function(t){return t.model===e.model}))}},watch:{disabled:function(t){var e;t&&(null===(e=this.$parent)||void 0===e||e.disableTabItem(this.ownNavItemIndex)),this.$parent.navItems[this.ownNavItemIndex].disabled=t}},methods:{beforeEnterHandle:function(t){t.style.position="relative"},leaveHandle:function(t){t.style.position="absolute"}}},"data-v-90aaa762",false,undefined,!1,h,void 0,void 0),w=Object.freeze({__proto__:null,Tabs:x,TabItem:y}),T=function(t){Object.entries(w).forEach((function(e){var n=i(e,2),a=n[0],o=n[1];t.component(a,o)}))},S=Object.freeze({__proto__:null,default:T,Tabs:x,TabItem:y});return Object.entries(S).forEach((function(t){var e=i(t,2),n=e[0],a=e[1];"default"!==n&&(T[n]=a)})),T}(); |
@@ -57,10 +57,2 @@ 'use strict';function _typeof(obj) { | ||
function _toConsumableArray(arr) { | ||
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); | ||
} | ||
function _arrayWithoutHoles(arr) { | ||
if (Array.isArray(arr)) return _arrayLikeToArray(arr); | ||
} | ||
function _arrayWithHoles(arr) { | ||
@@ -70,6 +62,2 @@ if (Array.isArray(arr)) return arr; | ||
function _iterableToArray(iter) { | ||
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); | ||
} | ||
function _iterableToArrayLimit(arr, i) { | ||
@@ -122,6 +110,2 @@ var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); | ||
function _nonIterableSpread() { | ||
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 _nonIterableRest() { | ||
@@ -500,3 +484,3 @@ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
}, | ||
slider: function slider() { | ||
sliderElement: function sliderElement() { | ||
var _this$$refs; | ||
@@ -515,10 +499,54 @@ | ||
}, | ||
tabItemActive: function tabItemActive() { | ||
this.sliderHandler(); | ||
this.pagination.has && this.paginationCollapse(); | ||
tabItemActive: function tabItemActive(_tabItemActive) { | ||
this.setSliderPosition(); | ||
if (this.pagination.has && _tabItemActive !== null && _tabItemActive !== void 0 && _tabItemActive.model) { | ||
var _navItemActiveElement, _navElement$getClient; | ||
var navItemActiveElement = this.$refs[_tabItemActive.model][0]; | ||
var navElement = this.$refs.nav; | ||
var navActiveItemRectsCollection = navItemActiveElement === null || navItemActiveElement === void 0 ? void 0 : (_navItemActiveElement = navItemActiveElement.getClientRects()) === null || _navItemActiveElement === void 0 ? void 0 : _navItemActiveElement[0]; | ||
var navRectsCollection = navElement === null || navElement === void 0 ? void 0 : (_navElement$getClient = navElement.getClientRects()) === null || _navElement$getClient === void 0 ? void 0 : _navElement$getClient[0]; | ||
if (!navActiveItemRectsCollection || !navRectsCollection) return; | ||
var _this$pagination2 = this.pagination, | ||
translate = _this$pagination2.translate, | ||
maxOffset = _this$pagination2.maxOffset; | ||
var toTranslate = translate; // Portrait | ||
if (this.orientation === "portrait") { | ||
if (navActiveItemRectsCollection.bottom > navRectsCollection.bottom) { | ||
toTranslate = toTranslate + navActiveItemRectsCollection.height; | ||
} | ||
if (navActiveItemRectsCollection.top < navRectsCollection.top) { | ||
toTranslate = navActiveItemRectsCollection.height > toTranslate ? 0 : toTranslate - navActiveItemRectsCollection.height; | ||
} | ||
} | ||
if (this.orientation === "landscape") { | ||
if (navActiveItemRectsCollection.right > navRectsCollection.right) { | ||
toTranslate = toTranslate + navActiveItemRectsCollection.width; | ||
} | ||
if (navActiveItemRectsCollection.left < navRectsCollection.left) { | ||
toTranslate = navActiveItemRectsCollection.width > toTranslate ? 0 : toTranslate - navActiveItemRectsCollection.width; | ||
} | ||
if (toTranslate > maxOffset) { | ||
toTranslate = toTranslate + (maxOffset - toTranslate); | ||
} | ||
} | ||
this.pagination.translate = Math.abs(toTranslate); | ||
} | ||
} | ||
}, | ||
mounted: function mounted() { | ||
this.setTheme(); | ||
this.resizable(); | ||
var _this$theme = this.theme, | ||
nav = _this$theme.nav, | ||
navItem = _this$theme.navItem, | ||
slider = _this$theme.slider; | ||
this.$el.style.background = nav; | ||
this.$refs.navItems.style.color = navItem; | ||
if (this.sliderElement) this.sliderElement.style.background = slider; | ||
}, | ||
@@ -529,9 +557,9 @@ methods: { | ||
}, | ||
sliderHandler: function sliderHandler() { | ||
setSliderPosition: function setSliderPosition() { | ||
var _this = this; | ||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() { | ||
var _this$tabItemActive; | ||
var _this$tabItemActive, _this$$refs$navItems, _this$$refs$navItems$, _this$$refs$model$, _this$$refs$model$$ge; | ||
var _this$$refs2, _this$$refs3, _this$$refs3$_this$ta, navItemsElement, _this$getElementRect, navItemsLeft, navItemsTop, _this$getElementRect2, navActiveWidth, navActiveHeight, navActiveLeft, navActiveTop, _this$slider; | ||
var model, navItemsRectsCollection, navActiveItemRectsCollection, _this$sliderElement; | ||
@@ -542,26 +570,24 @@ return regeneratorRuntime.wrap(function _callee$(_context) { | ||
case 0: | ||
if (!((_this$tabItemActive = _this.tabItemActive) !== null && _this$tabItemActive !== void 0 && _this$tabItemActive.model)) { | ||
_context.next = 7; | ||
_context.next = 2; | ||
return _this.$nextTick(); | ||
case 2: | ||
model = (_this$tabItemActive = _this.tabItemActive) === null || _this$tabItemActive === void 0 ? void 0 : _this$tabItemActive.model; | ||
if (model) { | ||
_context.next = 5; | ||
break; | ||
} | ||
_context.next = 3; | ||
return _this.$nextTick(); | ||
return _context.abrupt("return"); | ||
case 3: | ||
navItemsElement = (_this$$refs2 = _this.$refs) === null || _this$$refs2 === void 0 ? void 0 : _this$$refs2.navItems; | ||
_this$getElementRect = _this.getElementRect({ | ||
el: navItemsElement, | ||
prefix: "navItems" | ||
}), navItemsLeft = _this$getElementRect.navItemsLeft, navItemsTop = _this$getElementRect.navItemsTop; | ||
_this$getElementRect2 = _this.getElementRect({ | ||
el: (_this$$refs3 = _this.$refs) === null || _this$$refs3 === void 0 ? void 0 : (_this$$refs3$_this$ta = _this$$refs3[_this.tabItemActive.model]) === null || _this$$refs3$_this$ta === void 0 ? void 0 : _this$$refs3$_this$ta[0], | ||
prefix: "navActive" | ||
}), navActiveWidth = _this$getElementRect2.navActiveWidth, navActiveHeight = _this$getElementRect2.navActiveHeight, navActiveLeft = _this$getElementRect2.navActiveLeft, navActiveTop = _this$getElementRect2.navActiveTop; | ||
case 5: | ||
navItemsRectsCollection = (_this$$refs$navItems = _this.$refs.navItems) === null || _this$$refs$navItems === void 0 ? void 0 : (_this$$refs$navItems$ = _this$$refs$navItems.getClientRects()) === null || _this$$refs$navItems$ === void 0 ? void 0 : _this$$refs$navItems$[0]; | ||
navActiveItemRectsCollection = (_this$$refs$model$ = _this.$refs[model][0]) === null || _this$$refs$model$ === void 0 ? void 0 : (_this$$refs$model$$ge = _this$$refs$model$.getClientRects()) === null || _this$$refs$model$$ge === void 0 ? void 0 : _this$$refs$model$$ge[0]; | ||
if (_this.slider) { | ||
Object.assign((_this$slider = _this.slider) === null || _this$slider === void 0 ? void 0 : _this$slider.style, { | ||
if (_this.sliderElement) { | ||
Object.assign((_this$sliderElement = _this.sliderElement) === null || _this$sliderElement === void 0 ? void 0 : _this$sliderElement.style, { | ||
portrait: { | ||
height: "".concat(navActiveHeight, "px"), | ||
top: "".concat(navActiveTop - navItemsTop, "px"), | ||
height: navActiveItemRectsCollection.height + "px", | ||
top: navActiveItemRectsCollection.top - navItemsRectsCollection.top + "px", | ||
width: "", | ||
@@ -571,4 +597,4 @@ left: "" | ||
landscape: { | ||
width: "".concat(navActiveWidth, "px"), | ||
left: "".concat(navActiveLeft - navItemsLeft, "px"), | ||
width: navActiveItemRectsCollection.width + "px", | ||
left: navActiveItemRectsCollection.left - navItemsRectsCollection.left + "px", | ||
height: "", | ||
@@ -580,3 +606,3 @@ top: "" | ||
case 7: | ||
case 8: | ||
case "end": | ||
@@ -589,61 +615,35 @@ return _context.stop(); | ||
}, | ||
setPagination: function setPagination() { | ||
var _this$tabItemActive2; | ||
setPaginationSettings: function setPaginationSettings() { | ||
var _this$$refs2; | ||
if ((_this$tabItemActive2 = this.tabItemActive) !== null && _this$tabItemActive2 !== void 0 && _this$tabItemActive2.model) { | ||
var _this$$refs4, _this$$refs5; | ||
var navItemsElement = (_this$$refs4 = this.$refs) === null || _this$$refs4 === void 0 ? void 0 : _this$$refs4.navItems; | ||
var _this$getElementRect3 = this.getElementRect({ | ||
el: navItemsElement, | ||
prefix: "navItems" | ||
}), | ||
navItemsWidth = _this$getElementRect3.navItemsWidth; | ||
var _this$getElementRect4 = this.getElementRect({ | ||
el: (_this$$refs5 = this.$refs) === null || _this$$refs5 === void 0 ? void 0 : _this$$refs5.nav, | ||
prefix: "nav" | ||
}), | ||
navWidth = _this$getElementRect4.navWidth, | ||
navHeight = _this$getElementRect4.navHeight; | ||
var 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 Math.abs(a + c); | ||
}, 0); | ||
var paginationFactory = function paginationFactory(has, maxOffset, minOffset) { | ||
var paginationOffsets = Object.entries({ | ||
has: has, | ||
maxOffset: maxOffset, | ||
minOffset: minOffset, | ||
offset: minOffset | ||
}).map(function (_ref2) { | ||
var _ref3 = _slicedToArray(_ref2, 2), | ||
k = _ref3[0], | ||
v = _ref3[1]; | ||
return [k, Math.abs(v)]; | ||
}); | ||
return Object.fromEntries(paginationOffsets); | ||
var paginationRefactory = function paginationRefactory(has, maxOffset, minOffset) { | ||
return { | ||
has: has, | ||
maxOffset: maxOffset, | ||
minOffset: minOffset, | ||
offset: minOffset | ||
}; | ||
}; | ||
Object.assign(this.pagination, { | ||
portrait: paginationFactory(navItemsHeight > navHeight, navItemsHeight - navHeight, navHeight), | ||
landscape: paginationFactory(navItemsWidth > navWidth, navItemsWidth - navWidth, navWidth) | ||
}[this.orientation]); | ||
var navItemsElement = (_this$$refs2 = this.$refs) === null || _this$$refs2 === void 0 ? void 0 : _this$$refs2.navItems; | ||
var navItemsElementWidth = navItemsElement === null || navItemsElement === void 0 ? void 0 : navItemsElement.offsetWidth; | ||
var navItemsElementHeight = navItemsElement === null || navItemsElement === void 0 ? void 0 : navItemsElement.offsetHeight; | ||
var navElement = this.$refs.nav; | ||
var navElementWidth = navElement === null || navElement === void 0 ? void 0 : navElement.offsetWidth; | ||
var navElementHeight = navElement === null || navElement === void 0 ? void 0 : navElement.offsetHeight; | ||
Object.assign(this.pagination, { | ||
portrait: paginationRefactory(navItemsElementHeight > navElementHeight, navItemsElementHeight - navElementHeight, navElementHeight), | ||
landscape: paginationRefactory(navItemsElementWidth > navElementWidth, navItemsElementWidth - navElementWidth, navElementWidth) | ||
}[this.orientation]); | ||
if (this.pagination.maxOffset === 0) { | ||
this.pagination.translate = 0; | ||
} | ||
if (this.pagination.maxOffset === 0) { | ||
this.pagination.translate = 0; | ||
} | ||
}, | ||
onPagination: function onPagination(to) { | ||
var _this$pagination2 = this.pagination, | ||
maxOffset = _this$pagination2.maxOffset, | ||
offset = _this$pagination2.offset, | ||
translate = _this$pagination2.translate, | ||
minOffset = _this$pagination2.minOffset; | ||
pagitionTo: function pagitionTo(to) { | ||
var _this$pagination3 = this.pagination, | ||
maxOffset = _this$pagination3.maxOffset, | ||
offset = _this$pagination3.offset, | ||
translate = _this$pagination3.translate, | ||
minOffset = _this$pagination3.minOffset; | ||
@@ -671,89 +671,28 @@ if (to === "prev" && this.paginateIndicator.prev) { | ||
}, | ||
paginationCollapse: function paginationCollapse() { | ||
var _this$$refs6, _this$$refs6$this$tab, _this$$refs7; | ||
var _this$getElementRect5 = this.getElementRect({ | ||
el: (_this$$refs6 = this.$refs) === null || _this$$refs6 === void 0 ? void 0 : (_this$$refs6$this$tab = _this$$refs6[this.tabItemActive.model]) === null || _this$$refs6$this$tab === void 0 ? void 0 : _this$$refs6$this$tab[0], | ||
prefix: "navActive" | ||
}), | ||
navActiveRight = _this$getElementRect5.navActiveRight, | ||
navActiveLeft = _this$getElementRect5.navActiveLeft, | ||
navActiveTop = _this$getElementRect5.navActiveTop, | ||
navActiveBottom = _this$getElementRect5.navActiveBottom, | ||
navActiveWidth = _this$getElementRect5.navActiveWidth, | ||
navActiveHeight = _this$getElementRect5.navActiveHeight; | ||
var _this$getElementRect6 = this.getElementRect({ | ||
el: (_this$$refs7 = this.$refs) === null || _this$$refs7 === void 0 ? void 0 : _this$$refs7.nav, | ||
prefix: "nav" | ||
}), | ||
navRight = _this$getElementRect6.navRight, | ||
navLeft = _this$getElementRect6.navLeft, | ||
navTop = _this$getElementRect6.navTop, | ||
navBottom = _this$getElementRect6.navBottom; | ||
var _this$pagination3 = this.pagination, | ||
translate = _this$pagination3.translate, | ||
maxOffset = _this$pagination3.maxOffset; | ||
var toTranslate = translate; // Portrait | ||
if (this.vertical && navActiveBottom > navBottom) { | ||
toTranslate = toTranslate + navActiveHeight; | ||
} | ||
if (this.vertical && navActiveTop < navTop) { | ||
toTranslate = navActiveHeight > toTranslate ? 0 : toTranslate - navActiveHeight; | ||
} // Landscape | ||
if (!this.vertical && navActiveRight > navRight) { | ||
toTranslate = toTranslate + navActiveWidth; | ||
} | ||
if (!this.vertical && navActiveLeft < navLeft) { | ||
toTranslate = navActiveWidth > toTranslate ? 0 : toTranslate - navActiveWidth; | ||
} | ||
if (toTranslate > maxOffset) { | ||
toTranslate = toTranslate + (maxOffset - toTranslate); | ||
} | ||
this.pagination.translate = Math.abs(toTranslate); | ||
}, | ||
resizable: function resizable() { | ||
var _this2 = this; | ||
this.$nextTick(function () { | ||
_this2.setPagination(); | ||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() { | ||
return regeneratorRuntime.wrap(function _callee2$(_context2) { | ||
while (1) { | ||
switch (_context2.prev = _context2.next) { | ||
case 0: | ||
_context2.next = 2; | ||
return _this2.$nextTick(); | ||
_this2.sliderHandler(); | ||
}); | ||
}, | ||
getElementRect: function getElementRect(_ref4) { | ||
var el = _ref4.el, | ||
prefix = _ref4.prefix; | ||
if (!el) return; | ||
var parse = JSON.parse, | ||
stringify = JSON.stringify; | ||
var rect = Object.entries(parse(stringify(el.getBoundingClientRect()))); | ||
var newRect = rect.map(function (_ref5) { | ||
var _ref6 = _slicedToArray(_ref5, 2), | ||
i = _ref6[0], | ||
k = _ref6[1]; | ||
case 2: | ||
_this2.setPaginationSettings(); | ||
return [prefix + i.charAt(0).toUpperCase() + i.slice(1), k]; | ||
}); | ||
return Object.fromEntries(newRect); | ||
_this2.setSliderPosition(); | ||
case 4: | ||
case "end": | ||
return _context2.stop(); | ||
} | ||
} | ||
}, _callee2); | ||
}))(); | ||
}, | ||
setTheme: function setTheme() { | ||
var _this$theme = this.theme, | ||
nav = _this$theme.nav, | ||
navItem = _this$theme.navItem, | ||
slider = _this$theme.slider; | ||
this.$el.style.background = nav; | ||
this.$refs.navItems.style.color = navItem; | ||
if (this.slider) this.slider.style.background = slider; | ||
}, | ||
getActiveColor: function getActiveColor(_ref7) { | ||
var model = _ref7.model; | ||
getActiveColor: function getActiveColor(_ref2) { | ||
var model = _ref2.model; | ||
@@ -789,3 +728,3 @@ if (model === this.tabItemActive.model) { | ||
class: _vm.classes | ||
}, [_vm._ssrNode("<div class=\"tab__pagination__prev\" data-v-b6c84eb6>", "</div>", [_vm.pagination.has ? _c('Btn', { | ||
}, [_vm._ssrNode("<div class=\"tab__pagination__prev\" data-v-27b1c930>", "</div>", [_vm.pagination.has ? _c('Btn', { | ||
attrs: { | ||
@@ -796,3 +735,3 @@ "disabled": !_vm.paginateIndicator.prev | ||
"click": function click($event) { | ||
return _vm.onPagination('prev'); | ||
return _vm.pagitionTo('prev'); | ||
} | ||
@@ -804,8 +743,8 @@ } | ||
rawName: "v-touch", | ||
value: _vm.onPagination, | ||
expression: "onPagination" | ||
value: _vm.pagitionTo, | ||
expression: "pagitionTo" | ||
}], | ||
ref: "nav", | ||
staticClass: "tab__nav" | ||
}, [_vm._ssrNode("<ul class=\"tab__nav__items\"" + _vm._ssrStyle(null, _vm.transform, null) + " data-v-b6c84eb6>", "</ul>", [_vm._l(_vm.navItems, function (navItem) { | ||
}, [_vm._ssrNode("<ul class=\"tab__nav__items\"" + _vm._ssrStyle(null, _vm.transform, null) + " data-v-27b1c930>", "</ul>", [_vm._l(_vm.navItems, function (navItem) { | ||
return _c('li', { | ||
@@ -839,3 +778,3 @@ directives: [{ | ||
})], 1); | ||
}), _vm._ssrNode(" " + (_vm.navSlider ? "<hr class=\"tab__slider\" data-v-b6c84eb6>" : "<!---->"))], 2)]), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"tab__pagination__next\" data-v-b6c84eb6>", "</div>", [_vm.pagination.has ? _c('Btn', { | ||
}), _vm._ssrNode(" " + (_vm.navSlider ? "<hr class=\"tab__slider\" data-v-27b1c930>" : "<!---->"))], 2)]), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"tab__pagination__next\" data-v-27b1c930>", "</div>", [_vm.pagination.has ? _c('Btn', { | ||
attrs: { | ||
@@ -846,3 +785,3 @@ "disabled": !_vm.paginateIndicator.next | ||
"click": function click($event) { | ||
return _vm.onPagination('next'); | ||
return _vm.pagitionTo('next'); | ||
} | ||
@@ -858,7 +797,7 @@ } | ||
if (!inject) return; | ||
inject("data-v-b6c84eb6_0", { | ||
source: ".tab__pagination[data-v-b6c84eb6]{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-b6c84eb6],.tab__pagination__next[data-v-b6c84eb6]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-b6c84eb6] .vmt__btn svg{transform:rotate(180deg)}.tab__nav[data-v-b6c84eb6]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-b6c84eb6]{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-b6c84eb6]{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;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-b6c84eb6]:hover:not(.disabled,.active){background:hsla(0,0%,100%,.09)}.tab__nav__items .active[data-v-b6c84eb6]:hover{background:hsla(0,0%,100%,.18)}.tab__nav__items .disabled[data-v-b6c84eb6]{background:#6969694f}.tab__slider[data-v-b6c84eb6]{height:2px;width:2px;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-b6c84eb6]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-b6c84eb6]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-b6c84eb6]{padding:0;margin:0}.tab__pagination--vertical[data-v-b6c84eb6] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-b6c84eb6] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-b6c84eb6]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tab__pagination--auto .tab__nav__item[data-v-b6c84eb6]{flex:1 auto}", | ||
inject("data-v-27b1c930_0", { | ||
source: ".tab__pagination[data-v-27b1c930]{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-27b1c930],.tab__pagination__next[data-v-27b1c930]{flex:1 40px;min-width:40px}.tab__pagination__next[data-v-27b1c930] .vmt__btn svg{transform:rotate(180deg)}.tab__nav[data-v-27b1c930]{position:relative;display:flex;overflow:hidden;flex:1 100%}.tab__nav__items[data-v-27b1c930]{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-27b1c930]{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;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-27b1c930]:hover:not(.disabled,.active){background:hsla(0,0%,100%,.09)}.tab__nav__items .active[data-v-27b1c930]:hover{background:hsla(0,0%,100%,.18)}.tab__nav__items .disabled[data-v-27b1c930]{background:#6969694f}.tab__slider[data-v-27b1c930]{height:2px;width:2px;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-27b1c930]{flex-direction:column}.tab__pagination--vertical .tab__nav__items[data-v-27b1c930]{flex-direction:column;flex:1 auto;position:relative}.tab__pagination--vertical .tab__nav__item *[data-v-27b1c930]{padding:0;margin:0}.tab__pagination--vertical[data-v-27b1c930] .tab__pagination__prev svg{transform:rotate(90deg)}.tab__pagination--vertical[data-v-27b1c930] .tab__pagination__next svg{transform:rotate(270deg)}.tab__pagination--vertical .tab__nav__item[data-v-27b1c930]{justify-content:left;padding-top:1.6rem;padding-bottom:1.6rem}.tab__pagination--auto .tab__nav__item[data-v-27b1c930]{flex:1 auto}", | ||
map: undefined, | ||
media: undefined | ||
}), inject("data-v-b6c84eb6_1", { | ||
}), inject("data-v-27b1c930_1", { | ||
source: ".ripple{z-index:2;background-color:hsla(0,0%,100%,.23);border-radius:50%;position:absolute;transform:scale(0);animation:ripple .6s linear}@keyframes ripple{to{transform:scale(2.5);opacity:0}}", | ||
@@ -872,6 +811,6 @@ map: undefined, | ||
var __vue_scope_id__$2 = "data-v-b6c84eb6"; | ||
var __vue_scope_id__$2 = "data-v-27b1c930"; | ||
/* module identifier */ | ||
var __vue_module_identifier__$2 = "data-v-b6c84eb6"; | ||
var __vue_module_identifier__$2 = "data-v-27b1c930"; | ||
/* functional template */ | ||
@@ -878,0 +817,0 @@ |
{ | ||
"name": "vue-material-tabs", | ||
"version": "0.2.1", | ||
"version": "0.2.2", | ||
"description": "Vue.js tabs component based in material design", | ||
@@ -5,0 +5,0 @@ "author": "Jairo Blatt <jairoblatt@gmail.com>", |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
123548
2130