1 line
8.3 KiB
JavaScript
1 line
8.3 KiB
JavaScript
import{N as Ae,Q as Ie,aI as z,aJ as oe,a as h,c as f,aS as ne,w as R,bI as ke,a1 as Be,aU as Me,aV as Pe,U as _,a3 as De,a4 as ae,bR as $e}from"./index-3a2b6cd5.js";import{Q as xe}from"./QResizeObserver-889eb2e3.js";import{r as Ee}from"./rtl-36dd996b.js";function Fe(o,P,D){const b=D===!0?["left","right"]:["top","bottom"];return`absolute-${P===!0?b[0]:b[1]}${o?` text-${o}`:""}`}const Qe=["left","center","right","justify"],ze=Ae({name:"QTabs",props:{modelValue:[Number,String],align:{type:String,default:"center",validator:o=>Qe.includes(o)},breakpoint:{type:[String,Number],default:600},vertical:Boolean,shrink:Boolean,stretch:Boolean,activeClass:String,activeColor:String,activeBgColor:String,indicatorColor:String,leftIcon:String,rightIcon:String,outsideArrows:Boolean,mobileArrows:Boolean,switchIndicator:Boolean,narrowIndicator:Boolean,inlineLabel:Boolean,noCaps:Boolean,dense:Boolean,contentClass:String,"onUpdate:modelValue":[Function,Array]},setup(o,{slots:P,emit:D}){const{proxy:b}=Ie(),{$q:L}=b,{registerTick:re}=z(),{registerTick:le}=z(),{registerTick:ie}=z(),{registerTimeout:ue,removeTimeout:se}=oe(),{registerTimeout:H,removeTimeout:ce}=oe(),S=h(null),s=h(null),T=h(o.modelValue),y=h(!1),$=h(!0),x=h(!1),j=h(!1),A=f(()=>L.platform.is.desktop===!0||o.mobileArrows===!0),c=[],E=h(0),I=h(!1);let F,O,g,w=A.value===!0?G:ne;const fe=f(()=>({activeClass:o.activeClass,activeColor:o.activeColor,activeBgColor:o.activeBgColor,indicatorClass:Fe(o.indicatorColor,o.switchIndicator,o.vertical),narrowIndicator:o.narrowIndicator,inlineLabel:o.inlineLabel,noCaps:o.noCaps})),ve=f(()=>{const e=E.value,t=T.value;for(let n=0;n<e;n++)if(c[n].name.value===t)return!0;return!1}),de=f(()=>`q-tabs__content--align-${y.value===!0?"left":j.value===!0?"justify":o.align}`),he=f(()=>`q-tabs row no-wrap items-center q-tabs--${y.value===!0?"":"not-"}scrollable q-tabs--${o.vertical===!0?"vertical":"horizontal"} q-tabs__arrows--${A.value===!0&&o.outsideArrows===!0?"outside":"inside"}`+(o.dense===!0?" q-tabs--dense":"")+(o.shrink===!0?" col-shrink":"")+(o.stretch===!0?" self-stretch":"")),ge=f(()=>"q-tabs__content row no-wrap items-center self-stretch hide-scrollbar relative-position "+de.value+(o.contentClass!==void 0?` ${o.contentClass}`:"")+(L.platform.is.mobile===!0?" scroll":"")),k=f(()=>o.vertical===!0?{container:"height",content:"offsetHeight",scroll:"scrollHeight"}:{container:"width",content:"offsetWidth",scroll:"scrollWidth"}),B=f(()=>o.vertical!==!0&&L.lang.rtl===!0),Q=f(()=>Ee===!1&&B.value===!0);R(B,w),R(()=>o.modelValue,e=>{V({name:e,setCurrent:!0,skipEmit:!0})}),R(()=>o.outsideArrows,()=>{q()}),R(A,e=>{w=e===!0?G:ne,q()});function V({name:e,setCurrent:t,skipEmit:n,fromRoute:l}){T.value!==e&&(n!==!0&&o["onUpdate:modelValue"]!==void 0&&D("update:modelValue",e),(t===!0||o["onUpdate:modelValue"]===void 0)&&(me(T.value,e),T.value=e))}function q(){re(()=>{N({width:S.value.offsetWidth,height:S.value.offsetHeight})})}function N(e){if(k.value===void 0||s.value===null)return;const t=e[k.value.container],n=Math.min(s.value[k.value.scroll],Array.prototype.reduce.call(s.value.children,(i,r)=>i+(r[k.value.content]||0),0)),l=t>0&&n>t;y.value=l,l===!0&&le(w),j.value=t<parseInt(o.breakpoint,10)}function me(e,t){const n=e!=null&&e!==""?c.find(i=>i.name.value===e):null,l=t!=null&&t!==""?c.find(i=>i.name.value===t):null;if(n&&l){const i=n.tabIndicatorRef.value,r=l.tabIndicatorRef.value;clearTimeout(F),i.style.transition="none",i.style.transform="none",r.style.transition="none",r.style.transform="none";const a=i.getBoundingClientRect(),u=r.getBoundingClientRect();r.style.transform=o.vertical===!0?`translate3d(0,${a.top-u.top}px,0) scale3d(1,${u.height?a.height/u.height:1},1)`:`translate3d(${a.left-u.left}px,0,0) scale3d(${u.width?a.width/u.width:1},1,1)`,ie(()=>{F=setTimeout(()=>{r.style.transition="transform .25s cubic-bezier(.4, 0, .2, 1)",r.style.transform="none"},70)})}l&&y.value===!0&&C(l.rootRef.value)}function C(e){const{left:t,width:n,top:l,height:i}=s.value.getBoundingClientRect(),r=e.getBoundingClientRect();let a=o.vertical===!0?r.top-l:r.left-t;if(a<0){s.value[o.vertical===!0?"scrollTop":"scrollLeft"]+=Math.floor(a),w();return}a+=o.vertical===!0?r.height-i:r.width-n,a>0&&(s.value[o.vertical===!0?"scrollTop":"scrollLeft"]+=Math.ceil(a),w())}function G(){const e=s.value;if(e!==null){const t=e.getBoundingClientRect(),n=o.vertical===!0?e.scrollTop:Math.abs(e.scrollLeft);B.value===!0?($.value=Math.ceil(n+t.width)<e.scrollWidth-1,x.value=n>0):($.value=n>0,x.value=o.vertical===!0?Math.ceil(n+t.height)<e.scrollHeight:Math.ceil(n+t.width)<e.scrollWidth)}}function K(e){v(),O=setInterval(()=>{we(e)===!0&&v()},5)}function X(){K(Q.value===!0?Number.MAX_SAFE_INTEGER:0)}function J(){K(Q.value===!0?0:Number.MAX_SAFE_INTEGER)}function v(){clearInterval(O)}function be(e,t){const n=Array.prototype.filter.call(s.value.children,u=>u===t||u.matches&&u.matches(".q-tab.q-focusable")===!0),l=n.length;if(l===0)return;if(e===36)return C(n[0]),n[0].focus(),!0;if(e===35)return C(n[l-1]),n[l-1].focus(),!0;const i=e===(o.vertical===!0?38:37),r=e===(o.vertical===!0?40:39),a=i===!0?-1:r===!0?1:void 0;if(a!==void 0){const u=B.value===!0?-1:1,d=n.indexOf(t)+a*u;return d>=0&&d<l&&(C(n[d]),n[d].focus({preventScroll:!0})),!0}}const Te=f(()=>Q.value===!0?{get:e=>Math.abs(e.scrollLeft),set:(e,t)=>{e.scrollLeft=-t}}:o.vertical===!0?{get:e=>e.scrollTop,set:(e,t)=>{e.scrollTop=t}}:{get:e=>e.scrollLeft,set:(e,t)=>{e.scrollLeft=t}});function we(e){const t=s.value,{get:n,set:l}=Te.value;let i=!1,r=n(t);const a=e<r?-1:1;return r+=a*5,r<0?(i=!0,r=0):(a===-1&&r<=e||a===1&&r>=e)&&(i=!0,r=e),l(t,r),w(),i}function Y(e,t){for(const n in e)if(e[n]!==t[n])return!1;return!0}function ye(){let e=null,t={matchedLen:0,queryDiff:9999,hrefLen:0};const n=c.filter(a=>a.routeData!==void 0&&a.routeData.hasRouterLink.value===!0),{hash:l,query:i}=b.$route,r=Object.keys(i).length;for(const a of n){const u=a.routeData.exact.value===!0;if(a.routeData[u===!0?"linkIsExactActive":"linkIsActive"].value!==!0)continue;const{hash:d,query:U,matched:Re,href:_e}=a.routeData.resolvedLink.value,W=Object.keys(U).length;if(u===!0){if(d!==l||W!==r||Y(i,U)===!1)continue;e=a.name.value;break}if(d!==""&&d!==l||W!==0&&Y(U,i)===!1)continue;const m={matchedLen:Re.length,queryDiff:r-W,hrefLen:_e.length-d.length};if(m.matchedLen>t.matchedLen){e=a.name.value,t=m;continue}else if(m.matchedLen!==t.matchedLen)continue;if(m.queryDiff<t.queryDiff)e=a.name.value,t=m;else if(m.queryDiff!==t.queryDiff)continue;m.hrefLen>t.hrefLen&&(e=a.name.value,t=m)}e===null&&c.some(a=>a.routeData===void 0&&a.name.value===T.value)===!0||V({name:e,setCurrent:!0})}function Ce(e){if(se(),I.value!==!0&&S.value!==null&&e.target&&typeof e.target.closest=="function"){const t=e.target.closest(".q-tab");t&&S.value.contains(t)===!0&&(I.value=!0,y.value===!0&&C(t))}}function Le(){ue(()=>{I.value=!1},30)}function M(){p.avoidRouteWatcher===!1?H(ye):ce()}function Z(){if(g===void 0){const e=R(()=>b.$route.fullPath,M);g=()=>{e(),g=void 0}}}function Se(e){c.push(e),E.value++,q(),e.routeData===void 0||b.$route===void 0?H(()=>{if(y.value===!0){const t=T.value,n=t!=null&&t!==""?c.find(l=>l.name.value===t):null;n&&C(n.rootRef.value)}}):(Z(),e.routeData.hasRouterLink.value===!0&&M())}function qe(e){c.splice(c.indexOf(e),1),E.value--,q(),g!==void 0&&e.routeData!==void 0&&(c.every(t=>t.routeData===void 0)===!0&&g(),M())}const p={currentModel:T,tabProps:fe,hasFocus:I,hasActiveTab:ve,registerTab:Se,unregisterTab:qe,verifyRouteModel:M,updateModel:V,onKbdNavigate:be,avoidRouteWatcher:!1};ke($e,p);function ee(){clearTimeout(F),v(),g!==void 0&&g()}let te;return Be(ee),Me(()=>{te=g!==void 0,ee()}),Pe(()=>{te===!0&&Z(),q()}),()=>{const e=[_(xe,{onResize:N}),_("div",{ref:s,class:ge.value,onScroll:w},De(P.default))];return A.value===!0&&e.push(_(ae,{class:"q-tabs__arrow q-tabs__arrow--left absolute q-tab__icon"+($.value===!0?"":" q-tabs__arrow--faded"),name:o.leftIcon||L.iconSet.tabs[o.vertical===!0?"up":"left"],onMousedownPassive:X,onTouchstartPassive:X,onMouseupPassive:v,onMouseleavePassive:v,onTouchendPassive:v}),_(ae,{class:"q-tabs__arrow q-tabs__arrow--right absolute q-tab__icon"+(x.value===!0?"":" q-tabs__arrow--faded"),name:o.rightIcon||L.iconSet.tabs[o.vertical===!0?"down":"right"],onMousedownPassive:J,onTouchstartPassive:J,onMouseupPassive:v,onMouseleavePassive:v,onTouchendPassive:v})),_("div",{ref:S,class:he.value,role:"tablist",onFocusin:Ce,onFocusout:Le},e)}}});export{ze as Q};
|