vexip-ui/lib/components/split/split.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";require("../icon/index.cjs");const l=require("vue"),s=require("@vexip-ui/config"),k=require("@vexip-ui/hooks"),H=require("./props.cjs"),N=require("../icon/icon.cjs"),R=l.defineComponent({name:"Split",components:{Icon:N},props:H.splitProps,emits:["update:value"],setup(M,{emit:F}){const t=s.useProps("split",M,{value:{default:.5,validator:e=>e>0&&e<1,static:!0},min:.1,max:.9,vertical:!1,noTransition:!1,lazy:!1,canFull:!1}),i=s.useNameHelper("split"),m=s.useIcons(),a=l.ref(t.value),n=l.ref(0),d=l.ref(!1),g=l.ref(),o=l.ref(),z=l.computed(()=>t.vertical?"offsetHeight":"offsetWidth"),v=l.computed(()=>t.vertical?["top","bottom"]:["left","right"]),{target:E,moving:b}=k.useMoving({lazy:!0,capture:!1,onStart:(e,u)=>{if(n.value||!g.value||u.button>0)return!1;const{min:c,max:f,vertical:y,lazy:p}=t,r=g.value[z.value],C=c<=1?c:c/r,I=f<=1?f:f/r;e.outer=r,e.min=C,e.max=I,e.vertical=y,e.splitLazy=p,e.start=a.value*r,e.target=a.value,p&&o.value&&(o.value.style[v.value[0]]=`${a.value*100}`,o.value.style.display="block"),s.emitEvent(t.onMoveStart,a.value)},onMove:e=>{const u=e.outer,c=e.min,f=e.max,y=e.vertical?e.deltaY:e.deltaX,p=e.start,r=Math.min(Math.max(c,(p+y)/u),f);e.splitLazy?(o.value&&(o.value.style[v.value[0]]=`${r*100}%`),e.target=r):x(r),s.emitEvent(t.onMove,r)},onEnd:e=>{if(o.value&&(o.value.style.display=""),e.splitLazy){const u=e.target;Math.abs(u-a.value)>.01&&h(),x(u)}s.emitEvent(t.onMoveEnd,a.value)}}),$=l.computed(()=>{let e="";return n.value&&(t.vertical?e=n.value<0?"top":"bottom":e=n.value<0?"left":"right"),{[i.b()]:!0,[i.bs("vars")]:!0,[i.bm("inherit")]:t.inherit,[i.bm(t.vertical?"vertical":"horizontal")]:!0,[i.bm("moving")]:b.value,[i.bm(`${e}-full`)]:!!e,[i.bm("transition")]:d.value}}),q=l.computed(()=>({[v.value[1]]:n.value<0?"0":n.value>0?"100%":`${(1-a.value)*100}%`})),S=l.computed(()=>({[v.value[0]]:n.value<0?"100%":n.value>0?"0":`${a.value*100}%`})),w=l.computed(()=>({[v.value[0]]:n.value<0?"100%":n.value>0?"0":`calc(${a.value*100}% - var(${i.cv("handler-size")}) * 0.5)`})),T=l.computed(()=>t.vertical?[m.value.angleDown,m.value.angleUp]:[m.value.angleRight,m.value.angleLeft]);l.watch(()=>t.value,e=>{e.toFixed(5)!==a.value.toFixed(5)&&(a.value=e,h())}),l.watch(a,e=>{o.value&&(o.value.style[v.value[0]]=`${e*100}%`)}),l.watch(n,e=>{if(h(),e){let u;t.vertical?u=e<0?"top":"bottom":u=e<0?"left":"right",s.emitEvent(t.onFull,u)}else s.emitEvent(t.onReset)});function h(){d.value=!t.noTransition&&!b.value}function L(){d.value=!1}function P(e){t.canFull&&(n.value?n.value=0:n.value=e)}function x(e){e.toFixed(5)!==a.value.toFixed(5)&&(a.value=e,s.emitEvent(t.onChange,e),F("update:value",e))}return{props:t,nh:i,className:$,position:v,leftPaneStyle:q,rightPaneStyle:S,triggerStyle:w,fullIcons:T,wrapper:g,guide:o,handler:E,removeTransition:L,handleFull:P}}});module.exports=R;
//# sourceMappingURL=split.vue2.cjs.map