eslink-ui-plus/es/split-area/index.js

vue3 component library, css framework

import{pushScopeId as E,popScopeId as D,defineComponent as L,ref as z,watch as R,nextTick as N,onMounted as T,onUnmounted as P,computed as U,openBlock as s,createElementBlock as r,normalizeClass as b,Fragment as c,createCommentVNode as f,renderList as B,normalizeStyle as M,unref as v,renderSlot as S}from"vue";E("data-v-1b6cd51e");const j=["onMousedown"],V=["onMousedown"];D();var y=L({props:{useMouse:{type:Boolean,default:!1},direction:{type:String,default:"y",validator:a=>["x","y"].includes(a)},area:{type:Array,default:()=>[1,1]},min:{type:Number,default:10},disabled:{type:Boolean,default:!1}},setup(a){const n=a,m=z(null),u=Array(n.area.length).fill(null);let l=z({}),g=!1,p=0,h=[];const C=()=>{var t,i,o;const e=(t=m.value)==null?void 0:t.getBoundingClientRect();return{width:(i=e==null?void 0:e.width)!=null?i:0,height:(o=e==null?void 0:e.height)!=null?o:0}},$=(t="width")=>{const i=n.area.reduce((e,d)=>e+d,0),o=C()[t];return n.area.reduce((e,d,I)=>(e[I]=`${d/i*o}px`,e),{})},x=()=>{g=!1},w=()=>{n.useMouse&&(n.direction==="x"&&(l.value=$()),n.direction==="y"&&(l.value=$("height")),console.log("mouseAreaSizeMap.value",l.value),document.body.addEventListener("mouseup",x))};R([()=>n.area,()=>n.direction,()=>n.useMouse],()=>N(w),{deep:!0}),T(w),P(()=>{n.useMouse&&document.body.removeEventListener("mouseup",x)});const F=(t,i)=>{g=!0,h=[t.x,t.y],p=i},A=t=>{if(!g||!n.useMouse)return;const i=n.direction==="x"?t.x-h[0]:t.y-h[1],o=parseFloat(l.value[p])+i,e=parseFloat(l.value[p+1])-i;o<n.min&&(t.movementX<0||t.movementY<0)||e<n.min||(l.value[p]=o+"px",l.value[p+1]=e+"px",h=[t.x,t.y])},k=U(()=>n.disabled?{display:"none"}:{});return(t,i)=>(s(),r("div",{class:b(["es-split-area",`es-split-area-${a.direction}`]),ref:(o,e)=>{e.parentRef=o,m.value=o}},[a.useMouse?(s(),r(c,{key:0},[f(" \u4F7F\u7528\u9F20\u6807\u62D6\u62FD "),(s(!0),r(c,null,B(a.area,(o,e)=>(s(),r(c,null,[t.$slots[`area-${e+1}`]?(s(),r("div",{key:0,class:b([`es-split-area-${a.direction}-item`]),style:M({flexBasis:v(l)[e]}),onMousemove:A,onMouseup:x},[S(t.$slots,`area-${e+1}`)],38)):f("v-if",!0),t.$slots["split-line"]&&e<a.area.length-1?(s(),r("div",{key:1,class:"split-line--slot",ref:v(u)[e],style:M(v(k)),onMousedown:d=>F(d,e)},[S(t.$slots,"split-line")],44,j)):e<a.area.length-1?(s(),r("div",{key:2,class:b(`es-split-area-${a.direction}-line`),ref:v(u)[e],style:M(v(k)),onMousedown:d=>F(d,e)},null,46,V)):f("v-if",!0)],64))),256))],2112)):(s(),r(c,{key:1},[f(" \u4F7F\u7528\u56FA\u5B9A\u914D\u7F6E\u6BD4\u4F8B "),(s(!0),r(c,null,B(a.area,(o,e)=>(s(),r(c,null,[t.$slots[`area-${e+1}`]?(s(),r("div",{key:0,class:b([`es-split-area-${a.direction}-item`]),style:M({flex:o})},[S(t.$slots,`area-${e+1}`)],6)):f("v-if",!0)],64))),256))],2112))],2))}});function X(a,n){n===void 0&&(n={});var m=n.insertAt;if(!(!a||typeof document=="undefined")){var u=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css",m==="top"&&u.firstChild?u.insertBefore(l,u.firstChild):u.appendChild(l),l.styleSheet?l.styleSheet.cssText=a:l.appendChild(document.createTextNode(a))}}var Y=`.es-split-area-x[data-v-1b6cd51e] {
  display: flex;
  flex-direction: row;
}
.es-split-area-x:hover .es-split-area-x-line[data-v-1b6cd51e] {
  display: block;
}
.es-split-area-x-item[data-v-1b6cd51e],
.es-split-area-y-item[data-v-1b6cd51e] {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: overlay;
}
.es-split-area-y[data-v-1b6cd51e] {
  display: flex;
  flex-direction: column;
}
.es-split-area-y:hover .es-split-area-y-line[data-v-1b6cd51e] {
  display: block;
}
.es-split-area-x-line[data-v-1b6cd51e] {
  border-right: dashed 3px red;
  border-bottom: none;
  border-top: none;
  border-left: none;
  display: none;
  cursor: col-resize;
}
.es-split-area-y-line[data-v-1b6cd51e] {
  border-bottom: dashed 3px red;
  border-top: none;
  border-left: none;
  border-right: none;
  display: none;
  cursor: row-resize;
}`;X(Y),y.__scopeId="data-v-1b6cd51e",y.__file="components/split-area/index.vue",y.install=a=>{a.component("es-split-area",y)};export{y as default};