quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 10.7 kB
JavaScript
import{_ as t,a as n}from"../typeof.js";import{_ as e,a,b as i,c as o,H as r,d as l,N as c,B as d,P as s,O as v}from"../index2.js";import{_ as u}from"../defineProperty.js";import{s as h}from"../public.js";import"../sticky/index.js";function f(t){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,o=e(t);if(n){var r=e(this).constructor;i=Reflect.construct(o,arguments,r)}else i=o.apply(this,arguments);return a(this,i)}}var b=function(e){i(l,r);var a=f(l);function l(){var n;t(this,l);for(var e=arguments.length,i=new Array(e),r=0;r<e;r++)i[r]=arguments[r];return n=a.call.apply(a,[this].concat(i)),u(o(n),"label",""),u(o(n),"name",""),u(o(n),"disabled",!1),n}return n(l,[{key:"render",value:function(){return r.h("slot",null)}}]),l}();l([c()],b.prototype,"label",void 0),l([c()],b.prototype,"name",void 0),l([c({type:Boolean})],b.prototype,"disabled",void 0),b=l([d("quark-tab-content")],b);var p=function(e){i(l,r);var a=f(l);function l(){var n;t(this,l);for(var e=arguments.length,i=new Array(e),c=0;c<e;c++)i[c]=arguments[c];return n=a.call.apply(a,[this].concat(i)),u(o(n),"activekey","0"),u(o(n),"sticky",!1),u(o(n),"offsettop","0vw"),u(o(n),"linewidth","40px"),u(o(n),"dark",!1),u(o(n),"shrink",!1),u(o(n),"init",!1),u(o(n),"tabNavs",[]),u(o(n),"leftIndex",0),u(o(n),"tabPos",{}),u(o(n),"startX",0),u(o(n),"startY",0),u(o(n),"endX",0),u(o(n),"endY",0),u(o(n),"tabLineStyle",""),u(o(n),"slotRef",s()),u(o(n),"navRef",s()),u(o(n),"handleChange",(function(){var t,e,a,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"0",o=n.tabPos[i];n.activekey=i;var r=null===(t=n.slotRef.current)||void 0===t?void 0:t.assignedNodes(),l=h(r);void 0===o&&(n.activekey=l[0].name,o=n.tabPos[n.activekey]),l.forEach((function(t){t.getAttribute("name")===n.activekey?t.setAttribute("active",""):t.removeAttribute("active")})),n.navRef.current.parentNode.scrollLeft=(null===(e=o)||void 0===e?void 0:e.left)+(null===(a=o)||void 0===a?void 0:a.width)/2-n.navRef.current.parentNode.offsetWidth/2;var c=n.navRef.current.querySelector("quark-tab-nav[active]");c&&c.removeAttribute("active");var d=n.navRef.current.querySelector("quark-tab-nav[name='".concat(i,"']"));d&&d.setAttribute("active",!0),n.initTabLine(),n.initTabContent()})),u(o(n),"handleTouchStart",(function(t){n.startX=t.changedTouches[0].clientX,n.startY=t.changedTouches[0].clientY,n.endX=0,n.endY=0})),u(o(n),"handleTouchMove",(function(t){n.endX=t.changedTouches[0].clientX,n.endY=t.changedTouches[0].clientY})),u(o(n),"handleTouchEnd",(function(t){var e=n.angle({X:n.startX,Y:n.startY},{X:n.endX,Y:n.endY});void 0!==n.endX&&void 0!==n.endY&&0!==n.endX&&(Math.abs(e)>30||(n.endX>n.startX?n.prevSlider():n.nextSlider()))})),u(o(n),"emitChange",(function(t){n.$emit("change",{detail:{name:t.name,label:t.label||""}})})),u(o(n),"prevSlider",(function(){var t=n.tabPos[n.activekey];if(t){var e=Object.keys(n.tabPos);if(t.index<=0&&e.length>0)return n.activekey=e[e.length-1],void n.emitChange(n.tabPos[n.activekey]);var a,i,o=t.index-1;if(e.forEach((function(t){var e=n.tabPos[t];e.index===o&&(a=t,i=e)})),i&&i.disabled)return n.activekey=a,void n.prevSlider();a&&(n.activekey=a,n.emitChange(n.tabPos[n.activekey]))}})),u(o(n),"nextSlider",(function(){var t=n.tabPos[n.activekey];if(t){var e=Object.keys(n.tabPos);if(t.index>=e.length-1)return n.activekey=e[0],void n.emitChange(n.tabPos[n.activekey]);var a,i,o=t.index+1;if(e.forEach((function(t){var e=n.tabPos[t];e.index===o&&(a=t,i=e)})),i&&i.disabled)return n.activekey=a,void n.nextSlider();a&&(n.activekey=a,n.emitChange(n.tabPos[n.activekey]))}})),u(o(n),"angle",(function(t,n){var e=n.X-t.X,a=n.Y-t.Y;return 360*Math.atan(a/e)/(2*Math.PI)})),u(o(n),"slotchange",(function(){n.initTabNavs(),setTimeout(n.initTabLine,0),setTimeout(n.initTabContent,0)})),u(o(n),"initTabNavs",(function(){var t,e=null===(t=n.slotRef.current)||void 0===t?void 0:t.assignedNodes();h(e).forEach((function(t,e){null===t.name&&(t.name=String(e)),n.tabNavs.push({disabled:t.disabled,name:t.name,label:t.label,dark:n.dark})})),n.init=!0})),u(o(n),"initTabLine",(function(){var t,e=null===(t=n.navRef.current)||void 0===t?void 0:t.querySelectorAll("quark-tab-nav");Array.from(e).forEach((function(t,e){n.tabPos[t.name]={index:e,width:t.offsetWidth,left:t.offsetLeft,label:t.textContent,disabled:t.disabled}}))})),u(o(n),"initTabContent",(function(){var t,e,a,i=n.tabPos[n.activekey],o=null===(t=n.slotRef.current)||void 0===t?void 0:t.assignedNodes(),r=h(o);void 0===i&&(n.activekey=r[0].name,i=n.tabPos[n.activekey]),r.forEach((function(t){t.getAttribute("name")===n.activekey?t.setAttribute("active",""):t.removeAttribute("active")})),n.tabLineStyle=n.getLineStyle(null===(e=i)||void 0===e?void 0:e.width,null===(a=i)||void 0===a?void 0:a.left),n.leftIndex=i.index})),u(o(n),"getLineStyle",(function(t,e){var a=n.linewidth;a.includes("px")&&a.replace("px","");var i=e+.5*(t-(a=parseInt(a,10)));return"width:".concat(a-12,"px;transform:translateX(").concat(i+6,"px)")})),u(o(n),"handleClick",(function(t,e){e.active||e.disabled||(n.handleChange(e.name),n.emitChange(e))})),u(o(n),"renderTabNav",(function(){return r.h("div",{class:"quark-tab-nav-con",part:"nav-con"},r.h("div",{class:"quark-tab-nav ".concat(n.shrink?"quark-tab-nav__shrink":"quark-tab-nav__flex"),part:"tab-navs",ref:n.navRef},n.tabNavs.map((function(t){return r.h("quark-tab-nav",{part:"tab-nav",active:t.name===n.activekey,disabled:t.disabled,shrink:n.shrink,dark:t.dark,name:t.name,onClick:function(e){return n.handleClick(e,t)}},t.label)}))),r.h("i",{class:"quark-tab-line",part:"tab-line",style:n.tabLineStyle}))})),n}return n(l,[{key:"componentDidUpdate",value:function(t,n,e){"activekey"===t&&n!==e&&this.init&&this.handleChange(e)}},{key:"render",value:function(){var t={transform:"translateX(".concat(100*-this.leftIndex,"%)")};return r.h("div",{class:"quark-tabs"},this.sticky&&r.h("quark-sticky",{part:"sticky",offsettop:this.offsettop},this.renderTabNav()),!this.sticky&&this.renderTabNav(),r.h("div",{class:"quark-tab-content",part:"content",ontouchstart:this.handleTouchStart,ontouchmove:this.handleTouchMove,ontouchend:this.handleTouchEnd},r.h("div",{class:"quark-tab-content-wrap",part:"content-wrap",style:t},r.h("slot",{ref:this.slotRef,onslotchange:this.slotchange},"NEED CONTENT"))))}}]),l}();l([c()],p.prototype,"activekey",void 0),l([c({type:Boolean})],p.prototype,"sticky",void 0),l([c()],p.prototype,"offsettop",void 0),l([c()],p.prototype,"linewidth",void 0),l([c({type:Boolean})],p.prototype,"dark",void 0),l([c({type:Boolean})],p.prototype,"shrink",void 0),l([v()],p.prototype,"init",void 0),l([v()],p.prototype,"tabNavs",void 0),l([v()],p.prototype,"leftIndex",void 0),l([v()],p.prototype,"tabPos",void 0),l([v()],p.prototype,"startX",void 0),l([v()],p.prototype,"startY",void 0),l([v()],p.prototype,"endX",void 0),l([v()],p.prototype,"endY",void 0),l([v()],p.prototype,"tabLineStyle",void 0),p=l([d({tag:"quark-tabs",style:":host {\n display: block;\n text-align: unset;\n background-color: var(--tabs-background-color, #fff);\n}\n\n.quark-tabs {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n.quark-tab-nav-con {\n position: relative;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-behavior: smooth;\n}\n\n.quark-tab-nav__flex {\n display: flex;\n}\n\n.quark-tab-nav-con::-webkit-scrollbar {\n width: 0 !important;\n height: 0 !important;\n background: transparent !important;\n}\n\n.quark-tab-line {\n background: var(--tab-active-line-color, #0088ff);\n position: absolute;\n width: 0;\n margin-top: -0.8vw;\n height: 0.8vw;\n border-radius: 0.53333vw;\n transition: 0.25s;\n transition-timing-function: ease-in-out;\n}\n\n.quark-tab-content {\n overflow: hidden;\n flex: 1;\n}\n\n.quark-tab-content-wrap {\n display: flex;\n width: 100%;\n height: 100%;\n transition-property: transform;\n transition-duration: 0.25s;\n transition-timing-function: ease-in-out;\n}\n\n::slotted(quark-tab-content) {\n box-sizing: border-box;\n width: 100%;\n visibility: visible;\n height: 100%;\n flex-shrink: 0;\n overflow: auto;\n}\n\n::slotted(quark-tab-content:not([active])) {\n visibility: hidden;\n height: 0;\n}\n\n:host([dark]) .quark-tab-line {\n background-color: #fff;\n}\n\n:host([dark][active]) .quark-tab-line {\n color: #fff;\n}\n\n::selection {\n background: transparent;\n}"})],p);var k=function(e){i(l,r);var a=f(l);function l(){var n;t(this,l);for(var e=arguments.length,i=new Array(e),r=0;r<e;r++)i[r]=arguments[r];return n=a.call.apply(a,[this].concat(i)),u(o(n),"active",!1),u(o(n),"disabled",!1),u(o(n),"dark",!1),u(o(n),"shrink",!1),u(o(n),"name",0),u(o(n),"handleClick",(function(){n.active||n.disabled||n.$emit("change",{detail:{name:n.name,label:n.innerHTML||""}})})),n}return n(l,[{key:"render",value:function(){return r.h("div",{class:"quark-tab-nav",onClick:this.handleClick,part:"root"},r.h("slot",null))}}]),l}();l([c({type:Boolean})],k.prototype,"active",void 0),l([c({type:Boolean})],k.prototype,"disabled",void 0),l([c({type:Boolean})],k.prototype,"dark",void 0),l([c({type:Boolean})],k.prototype,"shrink",void 0),l([c()],k.prototype,"name",void 0),k=l([d({tag:"quark-tab-nav",style:":host {\n display: inline-flex;\n flex: 1;\n height: var(--tab-item-height, 11.73333vw);\n line-height: var(--tab-item-height, 11.73333vw);\n min-width: var(--tab-item-min-width, 20vw);\n font-weight: 400;\n color: var(--tab-item-color, #5e6266);\n font-size: var(--tab-item-font-size, 4.26667vw);\n font-family: var(--tag-font-family, PingFangSC-Regular, PingFang SC);\n background-color: var(--tab-item-background-color, #fff);\n}\n\n:host([shrink]) {\n min-width: auto;\n width: var(--tab-item-shrink-width, auto);\n padding: 0 var(--tab-item-shrink-padding, 0);\n}\n\n:host([active]) {\n font-weight: 500;\n color: var(--tab-item-active-color, #333333);\n font-family: var(--tag-font-family, PingFangSC-Medium, PingFang SC);\n}\n\n:host([disabled]) {\n color: var(--tab-item-disabled-color, #c8c9cc);\n pointer-events: none;\n}\n\n:host([disabled]) .quark-tab-nav {\n cursor: not-allowed;\n}\n\n:host([dark]) .quark-tab-nav {\n color: var(--tab-item-dark-color, #fff);\n background-color: var(--tab-item-dark-background-color, #242729);\n}\n\n:host([dark][disabled]) .quark-tab-nav {\n color: var(--tab-item-disabled-color, #c8c9cc);\n}\n\n:host .quark-tab-nav {\n width: 100%;\n text-align: center;\n cursor: pointer;\n}\n"})],k);var y=p;export{b as QuarkTabContent,k as QuarkTabNav,y as default};