@aplus-frontend/ui
Version:
2 lines (1 loc) • 4.68 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("@ant-design/icons-vue");require("../config-provider/index.js");const S=require("../config-provider/hooks/use-namespace.js"),I=["aria-valuenow","aria-valuemin","aria-valuemax"],V=e.defineComponent({name:"SplitBar",__name:"SplitBar",props:{index:{},active:{type:Boolean},resizable:{type:Boolean},startCollapsible:{type:Boolean},endCollapsible:{type:Boolean},onOffsetStart:{type:Function},onOffsetUpdate:{type:Function},onOffsetEnd:{},onCollapse:{type:Function},vertical:{type:Boolean},ariaNow:{},ariaMin:{},ariaMax:{},lazy:{type:Boolean},containerSize:{},draggerIcon:{},collapsibleIcon:{},showStartCollapsibleIcon:{type:[Boolean,String]},showEndCollapsibleIcon:{type:[Boolean,String]}},setup(z){function g(n){return typeof n=="number"&&!Number.isNaN(n)?Math.round(n):0}const o=z,{b:t,cssVar:E}=S.useNamespace("splitter-bar"),m=e.ref(null),c=e.ref(0),B=e.computed(()=>o.vertical?0:e.unref(c)),M=e.computed(()=>o.vertical?e.unref(c):0),O=n=>{o.resizable&&n.currentTarget&&(m.value=[n.pageX,n.pageY],o.onOffsetStart(o.index))},k=n=>{if(o.resizable&&n.touches.length===1){const a=n.touches[0];m.value=[a.pageX,a.pageY],o.onOffsetStart(o.index)}},N=n=>{const{containerSize:a,ariaMax:s,ariaMin:r,ariaNow:i}=o,l=a*i/100,u=l+n,d=Math.max(0,a*r/100),f=Math.max(a,a*s/100);return Math.max(d,Math.min(f,u))-l},C=(n,a)=>{const s=N(o.vertical?a:n);c.value=s},b=()=>{o.onOffsetUpdate(o.index,e.unref(B),e.unref(M)),c.value=0},h=n=>{switch(n){case!0:return t("collapse-bar-always-visible");case!1:return t("collapse-bar-always-hidden");case"auto":return t("collapse-bar-hover-only")}};e.watchEffect(n=>{const a=e.unref(m);if(a){const s=u=>{const{pageX:d,pageY:f}=u,p=d-a[0],y=f-a[1];o.lazy?C(p,y):o.onOffsetUpdate(o.index,p,y)},r=()=>{o.lazy&&b(),m.value=null,o.onOffsetEnd()},i=u=>{if(u.touches.length===1){const d=u.touches[0],f=d.pageX-a[0],p=d.pageY-a[1];o.lazy?C(f,p):o.onOffsetUpdate(o.index,f,p)}},l=()=>{o.lazy&&b(),m.value=null,o.onOffsetEnd()};window.addEventListener("touchmove",i),window.addEventListener("touchend",l),window.addEventListener("mousemove",s),window.addEventListener("mouseup",r),n(()=>{window.removeEventListener("touchmove",i),window.removeEventListener("touchend",l),window.removeEventListener("mousemove",s),window.removeEventListener("mouseup",r)})}},{flush:"post"});const v=e.computed(()=>{const{collapsibleIcon:n,vertical:a}=o;let s=null,r=null;const i=n?.start!==void 0,l=n?.end!==void 0;return a?(s=i?()=>n.start:w.UpOutlined,r=l?()=>n.end:w.DownOutlined):(s=i?()=>n.start:w.LeftOutlined,r=l?()=>n.end:w.RightOutlined),{startIcon:s,endIcon:r,startCustomize:i,endCustomize:l}});return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(t)()),role:"separator","aria-valuenow":g(o.ariaNow),"aria-valuemin":g(o.ariaMin),"aria-valuemax":g(o.ariaMax)},[o.lazy?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(t)("preview"),{[e.unref(t)("preview-active")]:!!c.value}]),style:e.normalizeStyle(e.unref(E)({"preview-offset":`${c.value}px`}))},null,6)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass([e.unref(t)("dragger"),{[e.unref(t)("dragger-disabled")]:!n.resizable,[e.unref(t)("dragger-active")]:n.active,[e.unref(t)("dragger-customize")]:n.draggerIcon!==void 0}]),onMousedown:O,onTouchstart:k},[n.draggerIcon!==void 0?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(t)("dragger-icon"))},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.draggerIcon)))],2)):e.createCommentVNode("",!0)],34),n.startCollapsible?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([e.unref(t)("collapse-bar"),e.unref(t)("collapse-bar-start"),v.value.startCustomize?e.unref(t)("collapse-bar-customize"):"",h(n.showStartCollapsibleIcon)]),onClick:a[0]||(a[0]=()=>n.onCollapse(n.index,"start"))},[e.createElementVNode("span",{class:e.normalizeClass([e.unref(t)("collapse-icon"),e.unref(t)("collapse-start")])},[e.createVNode(e.unref(v).startIcon)],2)],2)):e.createCommentVNode("",!0),n.endCollapsible?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass([e.unref(t)("collapse-bar"),e.unref(t)("collapse-bar-end"),v.value.endCustomize?e.unref(t)("collapse-bar-customize"):"",h(n.showEndCollapsibleIcon)]),onClick:a[1]||(a[1]=()=>n.onCollapse(n.index,"end"))},[e.createElementVNode("span",{class:e.normalizeClass([e.unref(t)("collapse-icon"),e.unref(t)("collapse-end")])},[e.createVNode(e.unref(v).endIcon)],2)],2)):e.createCommentVNode("",!0)],10,I))}});exports.default=V;