1 line
17 KiB
JavaScript
1 line
17 KiB
JavaScript
import{BORDER_TOP_BOTTOM as e,Badge as t,FORM_KEY as n,addUnit as r,callInterceptor as i,cancelRaf as a,clamp as o,createNamespace as s,doubleRaf as c,extend as l,getElementTop as u,getScrollTop as d,getZIndexStyle as f,inBrowser as p,isDef as m,isHidden as h,makeNumericProp as g,makeRequiredProp as _,makeStringProp as v,numericProp as y,onMountedOrActivated as b,onPopupReopen as ee,pick as x,preventDefault as te,raf as S,route as ne,routeProps as C,setRootScrollTop as w,setScrollTop as T,truthProp as E,unitToPx as D,unknownProp as O,useChildren as k,useEventListener as A,useExpose as j,useId as M,usePageVisibility as N,useParent as P,useRect as F,useScrollParent as I,useTouch as L,windowHeight as R,windowWidth as re,withInstall as z}from"./_plugin-vue_export-helper-BFIprANq.js";import{computed as B,createVNode as V,defineComponent as H,getCurrentInstance as U,mergeProps as W,nextTick as G,normalizeClass as K,normalizeStyle as q,onActivated as ie,onBeforeUnmount as ae,onBeforeUpdate as oe,onDeactivated as se,onMounted as J,provide as ce,reactive as Y,ref as X,stringifyStyle as le,vShow as ue,watch as Z,watchEffect as de,withDirectives as fe}from"./index-CSge6Fca.js";import{TAB_STATUS_KEY as pe}from"./use-tab-status-B4r5fRjv.js";function me(e,t,n){let r,i=0,o=e.scrollLeft,s=n===0?1:Math.round(n*1e3/16),c=o;function l(){a(r)}function u(){c+=(t-o)/s,e.scrollLeft=c,++i<s&&(r=S(u))}return u(),l}function he(e,t,n,r){let i,o=d(e),s=o<t,c=n===0?1:Math.round(n*1e3/16),l=(t-o)/c;function u(){a(i)}function f(){o+=l,(s&&o>t||!s&&o<t)&&(o=t),T(e,o),s&&o<t||!s&&o>t?i=S(f):r&&(i=S(r))}return f(),u}function ge(){let e=X([]),t=[];oe(()=>{e.value=[]});let n=n=>(t[n]||(t[n]=t=>{e.value[n]=t}),t[n]);return[e,n]}function _e(e,t){if(!p||!window.IntersectionObserver)return;let n=new IntersectionObserver(e=>{t(e[0].intersectionRatio>0)},{root:document.body}),r=()=>{e.value&&n.observe(e.value)},i=()=>{e.value&&n.unobserve(e.value)};se(i),ae(i),b(r)}const[ve,ye]=s(`sticky`),be={zIndex:y,position:v(`top`),container:Object,offsetTop:g(0),offsetBottom:g(0)};var xe=H({name:ve,props:be,emits:[`scroll`,`change`],setup(e,{emit:t,slots:n}){let r=X(),i=I(r),a=Y({fixed:!1,width:0,height:0,transform:0}),o=X(!1),s=B(()=>D(e.position===`top`?e.offsetTop:e.offsetBottom)),c=B(()=>{if(o.value)return;let{fixed:e,height:t,width:n}=a;if(e)return{width:`${n}px`,height:`${t}px`}}),u=B(()=>{if(!a.fixed||o.value)return;let t=l(f(e.zIndex),{width:`${a.width}px`,height:`${a.height}px`,[e.position]:`${s.value}px`});return a.transform&&(t.transform=`translate3d(0, ${a.transform}px, 0)`),t}),p=e=>t(`scroll`,{scrollTop:e,isFixed:a.fixed}),m=()=>{if(!r.value||h(r))return;let{container:t,position:n}=e,i=F(r),o=d(window);if(a.width=i.width,a.height=i.height,n===`top`)if(t){let e=F(t),n=e.bottom-s.value-a.height;a.fixed=s.value>i.top&&e.bottom>0,a.transform=n<0?n:0}else a.fixed=s.value>i.top;else{let{clientHeight:e}=document.documentElement;if(t){let n=F(t),r=e-n.top-s.value-a.height;a.fixed=e-s.value<i.bottom&&e>n.top,a.transform=r<0?-r:0}else a.fixed=e-s.value<i.bottom}p(o)};return Z(()=>a.fixed,e=>t(`change`,e)),A(`scroll`,m,{target:i,passive:!0}),_e(r,m),Z([re,R],()=>{!r.value||h(r)||!a.fixed||(o.value=!0,G(()=>{let e=F(r);a.width=e.width,a.height=e.height,o.value=!1}))}),()=>{var e;return V(`div`,{ref:r,style:c.value},[V(`div`,{class:ye({fixed:a.fixed&&!o.value}),style:u.value},[(e=n.default)?.call(n)])])}}});const Se=z(xe),[Ce,Q]=s(`swipe`),we={loop:E,width:y,height:y,vertical:Boolean,autoplay:g(0),duration:g(500),touchable:E,lazyRender:Boolean,initialSwipe:g(0),indicatorColor:String,showIndicators:E,stopPropagation:E},Te=Symbol(Ce);var Ee=H({name:Ce,props:we,emits:[`change`,`dragStart`,`dragEnd`],setup(e,{emit:t,slots:n}){let r=X(),i=X(),a=Y({rect:null,width:0,height:0,offset:0,active:0,swiping:!1}),s=!1,l=L(),{children:u,linkChildren:d}=k(Te),f=B(()=>u.length),p=B(()=>a[e.vertical?`height`:`width`]),m=B(()=>e.vertical?l.deltaY.value:l.deltaX.value),g=B(()=>{if(a.rect){let t=e.vertical?a.rect.height:a.rect.width;return t-p.value*f.value}return 0}),_=B(()=>p.value?Math.ceil(Math.abs(g.value)/p.value):f.value),v=B(()=>f.value*p.value),y=B(()=>(a.active+f.value)%f.value),b=B(()=>{let t=e.vertical?`vertical`:`horizontal`;return l.direction.value===t}),x=B(()=>{let t={transitionDuration:`${a.swiping?0:e.duration}ms`,transform:`translate${e.vertical?`Y`:`X`}(${+a.offset.toFixed(2)}px)`};if(p.value){let n=e.vertical?`height`:`width`,r=e.vertical?`width`:`height`;t[n]=`${v.value}px`,t[r]=e[r]?`${e[r]}px`:``}return t}),S=t=>{let{active:n}=a;return t?e.loop?o(n+t,-1,f.value):o(n+t,0,_.value):n},ne=(t,n=0)=>{let r=t*p.value;e.loop||(r=Math.min(r,-g.value));let i=n-r;return e.loop||(i=o(i,g.value,0)),i},C=({pace:n=0,offset:r=0,emitChange:i})=>{if(f.value<=1)return;let{active:o}=a,s=S(n),c=ne(s,r);if(e.loop){if(u[0]&&c!==g.value){let e=c<g.value;u[0].setOffset(e?v.value:0)}if(u[f.value-1]&&c!==0){let e=c>0;u[f.value-1].setOffset(e?-v.value:0)}}a.active=s,a.offset=c,i&&s!==o&&t(`change`,y.value)},w=()=>{a.swiping=!0,a.active<=-1?C({pace:f.value}):a.active>=f.value&&C({pace:-f.value})},T=()=>{w(),l.reset(),c(()=>{a.swiping=!1,C({pace:-1,emitChange:!0})})},E=()=>{w(),l.reset(),c(()=>{a.swiping=!1,C({pace:1,emitChange:!0})})},D,O=()=>clearTimeout(D),M=()=>{O(),+e.autoplay>0&&f.value>1&&(D=setTimeout(()=>{E(),M()},+e.autoplay))},P=(t=+e.initialSwipe)=>{if(!r.value)return;let n=()=>{var n,i;if(!h(r)){let t={width:r.value.offsetWidth,height:r.value.offsetHeight};a.rect=t,a.width=+((n=e.width)??t.width),a.height=+((i=e.height)??t.height)}f.value&&(t=Math.min(f.value-1,t),t===-1&&(t=f.value-1)),a.active=t,a.swiping=!0,a.offset=ne(t),u.forEach(e=>{e.setOffset(0)}),M()};h(r)?G().then(n):n()},F=()=>P(a.active),I,z=t=>{!e.touchable||t.touches.length>1||(l.start(t),s=!1,I=Date.now(),O(),w())},H=n=>{if(e.touchable&&a.swiping&&(l.move(n),b.value)){let r=!e.loop&&(a.active===0&&m.value>0||a.active===f.value-1&&m.value<0);r||(te(n,e.stopPropagation),C({offset:m.value}),s||(t(`dragStart`,{index:y.value}),s=!0))}},U=()=>{if(!e.touchable||!a.swiping)return;let n=Date.now()-I,r=m.value/n,i=Math.abs(r)>.25||Math.abs(m.value)>p.value/2;if(i&&b.value){let t=e.vertical?l.offsetY.value:l.offsetX.value,n=0;n=e.loop?t>0?m.value>0?-1:1:0:-Math[m.value>0?`ceil`:`floor`](m.value/p.value),C({pace:n,emitChange:!0})}else m.value&&C({pace:0});s=!1,a.swiping=!1,t(`dragEnd`,{index:y.value}),M()},W=(t,n={})=>{w(),l.reset(),c(()=>{let r;r=e.loop&&t===f.value?a.active===0?0:t:t%f.value,n.immediate?c(()=>{a.swiping=!1}):a.swiping=!1,C({pace:r-a.active,emitChange:!0})})},K=(t,n)=>{let r=n===y.value,i=r?{backgroundColor:e.indicatorColor}:void 0;return V(`i`,{style:i,class:Q(`indicator`,{active:r})},null)},q=()=>{if(n.indicator)return n.indicator({active:y.value,total:f.value});if(e.showIndicators&&f.value>1)return V(`div`,{class:Q(`indicators`,{vertical:e.vertical})},[Array(f.value).fill(``).map(K)])};return j({prev:T,next:E,state:a,resize:F,swipeTo:W}),d({size:p,props:e,count:f,activeIndicator:y}),Z(()=>e.initialSwipe,e=>P(+e)),Z(f,()=>P(a.active)),Z(()=>e.autoplay,M),Z([re,R,()=>e.width,()=>e.height],F),Z(N(),e=>{e===`visible`?M():O()}),J(P),ie(()=>P(a.active)),ee(()=>P(a.active)),se(O),ae(O),A(`touchmove`,H,{target:i}),()=>{var t;return V(`div`,{ref:r,class:Q()},[V(`div`,{ref:i,style:x.value,class:Q(`track`,{vertical:e.vertical}),onTouchstartPassive:z,onTouchend:U,onTouchcancel:U},[(t=n.default)?.call(n)]),q()])}}});const De=z(Ee),[Oe,ke]=s(`tabs`);var Ae=H({name:Oe,props:{count:_(Number),inited:Boolean,animated:Boolean,duration:_(y),swipeable:Boolean,lazyRender:Boolean,currentIndex:_(Number)},emits:[`change`],setup(e,{emit:t,slots:n}){let r=X(),i=e=>t(`change`,e),a=()=>{var t;let a=(t=n.default)?.call(n);return e.animated||e.swipeable?V(De,{ref:r,loop:!1,class:ke(`track`),duration:e.duration*1e3,touchable:e.swipeable,lazyRender:e.lazyRender,showIndicators:!1,onChange:i},{default:()=>[a]}):a},o=t=>{let n=r.value;n&&n.state.active!==t&&n.swipeTo(t,{immediate:!e.inited})};return Z(()=>e.currentIndex,o),J(()=>{o(e.currentIndex)}),j({swipeRef:r}),()=>V(`div`,{class:ke(`content`,{animated:e.animated||e.swipeable})},[a()])}});const[je,$]=s(`tabs`),Me={type:v(`line`),color:String,border:Boolean,sticky:Boolean,shrink:Boolean,active:g(0),duration:g(.3),animated:Boolean,ellipsis:E,swipeable:Boolean,scrollspy:Boolean,offsetTop:g(0),background:String,lazyRender:E,showHeader:E,lineWidth:y,lineHeight:y,beforeChange:Function,swipeThreshold:g(5),titleActiveColor:String,titleInactiveColor:String},Ne=Symbol(je);var Pe=H({name:je,props:Me,emits:[`change`,`scroll`,`rendered`,`clickTab`,`update:active`],setup(t,{emit:n,slots:a}){let o,s,c,l,d,f=X(),p=X(),g=X(),_=X(),v=M(),y=I(f),[x,te]=ge(),{children:S,linkChildren:C}=k(Ne),T=Y({inited:!1,position:``,lineStyle:{},currentIndex:-1}),E=B(()=>S.length>+t.swipeThreshold||!t.ellipsis||t.shrink),O=B(()=>({borderColor:t.color,background:t.background})),N=(e,t)=>{var n;return(n=e.name)??t},P=B(()=>{let e=S[T.currentIndex];if(e)return N(e,T.currentIndex)}),L=B(()=>D(t.offsetTop)),R=B(()=>t.sticky?L.value+o:0),z=e=>{let n=p.value,r=x.value;if(!E.value||!n||!r||!r[T.currentIndex])return;let i=r[T.currentIndex].$el,a=i.offsetLeft-(n.offsetWidth-i.offsetWidth)/2;l&&l(),l=me(n,a,e?0:+t.duration)},H=()=>{let e=T.inited;G(()=>{let n=x.value;if(!n||!n[T.currentIndex]||t.type!==`line`||h(f.value))return;let i=n[T.currentIndex].$el,{lineWidth:a,lineHeight:o}=t,s=i.offsetLeft+i.offsetWidth/2,c={width:r(a),backgroundColor:t.color,transform:`translateX(${s}px) translateX(-50%)`};if(e&&(c.transitionDuration=`${t.duration}s`),m(o)){let e=r(o);c.height=e,c.borderRadius=e}T.lineStyle=c})},U=e=>{let t=e<T.currentIndex?-1:1;for(;e>=0&&e<S.length;){if(!S[e].disabled)return e;e+=t}},W=(e,r)=>{let i=U(e);if(!m(i))return;let a=S[i],o=N(a,i),s=T.currentIndex!==null;T.currentIndex!==i&&(T.currentIndex=i,r||z(),H()),o!==t.active&&(n(`update:active`,o),s&&n(`change`,o,a.title)),c&&!t.scrollspy&&w(Math.ceil(u(f.value)-L.value))},K=(e,t)=>{let n=S.findIndex((t,n)=>N(t,n)===e);W(n===-1?0:n,t)},q=(e=!1)=>{if(t.scrollspy){let n=S[T.currentIndex].$el;if(n&&y.value){let r=u(n,y.value)-R.value;s=!0,d&&d(),d=he(y.value,r,e?0:+t.duration,()=>{s=!1})}}},ae=(e,r,a)=>{let{title:o,disabled:s}=S[r],c=N(S[r],r);s||(i(t.beforeChange,{args:[c],done:()=>{W(r),q()}}),ne(e)),n(`clickTab`,{name:c,title:o,event:a,disabled:s})},oe=e=>{c=e.isFixed,n(`scroll`,e)},se=e=>{G(()=>{K(e),q(!0)})},J=()=>{for(let e=0;e<S.length;e++){let{top:t}=F(S[e].$el);if(t>R.value)return e===0?0:e-1}return S.length-1},ce=()=>{if(t.scrollspy&&!s){let e=J();W(e)}},le=()=>{if(t.type===`line`&&S.length)return V(`div`,{class:$(`line`),style:T.lineStyle},null)},ue=()=>{var n,r,i;let{type:o,border:s,sticky:c}=t,l=[V(`div`,{ref:c?void 0:g,class:[$(`wrap`),{[e]:o===`line`&&s}]},[V(`div`,{ref:p,role:`tablist`,class:$(`nav`,[o,{shrink:t.shrink,complete:E.value}]),style:O.value,"aria-orientation":`horizontal`},[(n=a[`nav-left`])?.call(a),S.map(e=>e.renderTitle(ae)),le(),(r=a[`nav-right`])?.call(a)])]),(i=a[`nav-bottom`])?.call(a)];return c?V(`div`,{ref:g},[l]):l},de=()=>{H(),G(()=>{var e,t;z(!0),(t=(e=_.value)?.swipeRef.value)==null||t.resize()})};Z(()=>[t.color,t.duration,t.lineWidth,t.lineHeight],H),Z(re,de),Z(()=>t.active,e=>{e!==P.value&&K(e)}),Z(()=>S.length,()=>{T.inited&&(K(t.active),H(),G(()=>{z(!0)}))});let fe=()=>{K(t.active,!0),G(()=>{T.inited=!0,g.value&&(o=F(g.value).height),z(!0)})},pe=(e,t)=>n(`rendered`,e,t);return j({resize:de,scrollTo:se}),ie(H),ee(H),b(fe),_e(f,H),A(`scroll`,ce,{target:y,passive:!0}),C({id:v,props:t,setLine:H,scrollable:E,onRendered:pe,currentName:P,setTitleRefs:te,scrollIntoView:z}),()=>V(`div`,{ref:f,class:$([t.type])},[t.showHeader?t.sticky?V(Se,{container:f.value,offsetTop:L.value,onScroll:oe},{default:()=>[ue()]}):ue():null,V(Ae,{ref:_,count:S.length,inited:T.inited,animated:t.animated,duration:t.duration,swipeable:t.swipeable,lazyRender:t.lazyRender,currentIndex:T.currentIndex,onChange:W},{default:()=>{var e;return[(e=a.default)?.call(a)]}})])}});const[Fe,Ie]=s(`tab`),Le=H({name:Fe,props:{id:String,dot:Boolean,type:String,color:String,title:String,badge:y,shrink:Boolean,isActive:Boolean,disabled:Boolean,controls:String,scrollable:Boolean,activeColor:String,inactiveColor:String,showZeroBadge:E},setup(e,{slots:n}){let r=B(()=>{let t={},{type:n,color:r,disabled:i,isActive:a,activeColor:o,inactiveColor:s}=e,c=n===`card`;r&&c&&(t.borderColor=r,i||(a?t.backgroundColor=r:t.color=r));let l=a?o:s;return l&&(t.color=l),t}),i=()=>{let r=V(`span`,{class:Ie(`text`,{ellipsis:!e.scrollable})},[n.title?n.title():e.title]);return e.dot||m(e.badge)&&e.badge!==``?V(t,{dot:e.dot,content:e.badge,showZero:e.showZeroBadge},{default:()=>[r]}):r};return()=>V(`div`,{id:e.id,role:`tab`,class:[Ie([e.type,{grow:e.scrollable&&!e.shrink,shrink:e.shrink,active:e.isActive,disabled:e.disabled}])],style:r.value,tabindex:e.disabled?void 0:e.isActive?0:-1,"aria-selected":e.isActive,"aria-disabled":e.disabled||void 0,"aria-controls":e.controls,"data-allow-mismatch":`attribute`},[i()])}}),[Re,ze]=s(`swipe-item`);var Be=H({name:Re,setup(e,{slots:t}){let n,r=Y({offset:0,inited:!1,mounted:!1}),{parent:i,index:a}=P(Te);if(!i)return;let o=B(()=>{let e={},{vertical:t}=i.props;return i.size.value&&(e[t?`height`:`width`]=`${i.size.value}px`),r.offset&&(e.transform=`translate${t?`Y`:`X`}(${r.offset}px)`),e}),s=B(()=>{let{loop:e,lazyRender:t}=i.props;if(!t||n)return!0;if(!r.mounted)return!1;let o=i.activeIndicator.value,s=i.count.value-1,c=o===0&&e?s:o-1,l=o===s&&e?0:o+1;return n=a.value===o||a.value===c||a.value===l,n}),c=e=>{r.offset=e};return J(()=>{G(()=>{r.mounted=!0})}),j({setOffset:c}),()=>{var e;return V(`div`,{class:ze(),style:o.value},[s.value?(e=t.default)?.call(t):null])}}});const Ve=z(Be),[He,Ue]=s(`tab`),We=l({},C,{dot:Boolean,name:y,badge:y,title:String,disabled:Boolean,titleClass:O,titleStyle:[String,Object],showZeroBadge:E});var Ge=H({name:He,props:We,setup(e,{slots:t}){let n=M(),r=X(!1),i=U(),{parent:a,index:o}=P(Ne);if(!a)return;let s=()=>{var t;return(t=e.name)??o.value},l=()=>{r.value=!0,a.props.lazyRender&&G(()=>{a.onRendered(s(),e.title)})},u=B(()=>{let e=s()===a.currentName.value;return e&&!r.value&&l(),e}),d=X(``),f=X(``);de(()=>{let{titleClass:t,titleStyle:n}=e;d.value=t?K(t):``,f.value=n&&typeof n!=`string`?le(q(n)):n});let p=r=>V(Le,W({key:n,id:`${a.id}-${o.value}`,ref:a.setTitleRefs(o.value),style:f.value,class:d.value,isActive:u.value,controls:n,scrollable:a.scrollable.value,activeColor:a.props.titleActiveColor,inactiveColor:a.props.titleInactiveColor,onClick:e=>r(i.proxy,o.value,e)},x(a.props,[`type`,`color`,`shrink`]),x(e,[`dot`,`badge`,`title`,`disabled`,`showZeroBadge`])),{title:t.title}),m=X(!u.value);return Z(u,e=>{e?m.value=!1:c(()=>{m.value=!0})}),Z(()=>e.title,()=>{a.setLine(),a.scrollIntoView()}),ce(pe,u),j({id:n,renderTitle:p}),()=>{var e;let i=`${a.id}-${o.value}`,{animated:s,swipeable:c,scrollspy:l,lazyRender:d}=a.props;if(!t.default&&!s)return;let f=l||u.value;if(s||c)return V(Ve,{id:n,role:`tabpanel`,class:Ue(`panel-wrapper`,{inactive:m.value}),tabindex:u.value?0:-1,"aria-hidden":!u.value,"aria-labelledby":i,"data-allow-mismatch":`attribute`},{default:()=>{var e;return[V(`div`,{class:Ue(`panel`)},[(e=t.default)?.call(t)])]}});let p=r.value||l||!d,h=p?(e=t.default)?.call(t):null;return fe(V(`div`,{id:n,role:`tabpanel`,class:Ue(`panel`),tabindex:f?0:-1,"aria-labelledby":i,"data-allow-mismatch":`attribute`},[h]),[[ue,f]])}}});const Ke=z(Ge),qe=z(Pe),[Je,Ye]=s(`form`),Xe={colon:Boolean,disabled:Boolean,readonly:Boolean,required:[Boolean,String],showError:Boolean,labelWidth:y,labelAlign:String,inputAlign:String,scrollToError:Boolean,scrollToErrorPosition:String,validateFirst:Boolean,submitOnEnter:E,showErrorMessage:E,errorMessageAlign:String,validateTrigger:{type:[String,Array],default:`onBlur`}};var Ze=H({name:Je,props:Xe,emits:[`submit`,`failed`],setup(e,{emit:t,slots:r}){let{children:i,linkChildren:a}=k(n),o=e=>e?i.filter(t=>e.includes(t.name)):i,s=e=>new Promise((t,n)=>{let r=[],i=o(e);i.reduce((e,t)=>e.then(()=>{if(!r.length)return t.validate().then(e=>{e&&r.push(e)})}),Promise.resolve()).then(()=>{r.length?n(r):t()})}),c=e=>new Promise((t,n)=>{let r=o(e);Promise.all(r.map(e=>e.validate())).then(e=>{e=e.filter(Boolean),e.length?n(e):t()})}),l=e=>{let t=i.find(t=>t.name===e);return t?new Promise((e,n)=>{t.validate().then(t=>{t?n(t):e()})}):Promise.reject()},u=t=>typeof t==`string`?l(t):e.validateFirst?s(t):c(t),d=e=>{typeof e==`string`&&(e=[e]);let t=o(e);t.forEach(e=>{e.resetValidation()})},f=()=>i.reduce((e,t)=>(e[t.name]=t.getValidationStatus(),e),{}),p=(e,t)=>{i.some(n=>n.name===e?(n.$el.scrollIntoView(t),!0):!1)},m=()=>i.reduce((e,t)=>(t.name!==void 0&&(e[t.name]=t.formValue.value),e),{}),h=()=>{let n=m();u().then(()=>t(`submit`,n)).catch(r=>{t(`failed`,{values:n,errors:r});let{scrollToError:i,scrollToErrorPosition:a}=e;i&&r[0].name&&p(r[0].name,a?{block:a}:void 0)})},g=e=>{te(e),h()};return a({props:e}),j({submit:h,validate:u,getValues:m,scrollToField:p,resetValidation:d,getValidationStatus:f}),()=>{var e;return V(`form`,{class:Ye(),onSubmit:g},[(e=r.default)?.call(r)])}}});const Qe=z(Ze);export{Qe as Form,Ke as Tab,qe as Tabs}; |