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

vue3 component library, css framework

(function(e,c){typeof exports=="object"&&typeof module!="undefined"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(e=typeof globalThis!="undefined"?globalThis:e||self,e["es-split-area"]=c(e.Vue))})(this,function(e){"use strict";e.pushScopeId("data-v-1b6cd51e");const c=["onMousedown"],S=["onMousedown"];e.popScopeId();var p=e.defineComponent({props:{useMouse:{type:Boolean,default:!1},direction:{type:String,default:"y",validator:l=>["x","y"].includes(l)},area:{type:Array,default:()=>[1,1]},min:{type:Number,default:10},disabled:{type:Boolean,default:!1}},setup(l){const o=l,u=e.ref(null),i=Array(o.area.length).fill(null);let a=e.ref({}),y=!1,m=0,f=[];const z=()=>{var n,s,r;const t=(n=u.value)==null?void 0:n.getBoundingClientRect();return{width:(s=t==null?void 0:t.width)!=null?s:0,height:(r=t==null?void 0:t.height)!=null?r:0}},k=(n="width")=>{const s=o.area.reduce((t,d)=>t+d,0),r=z()[n];return o.area.reduce((t,d,C)=>(t[C]=`${d/s*r}px`,t),{})},h=()=>{y=!1},B=()=>{o.useMouse&&(o.direction==="x"&&(a.value=k()),o.direction==="y"&&(a.value=k("height")),console.log("mouseAreaSizeMap.value",a.value),document.body.addEventListener("mouseup",h))};e.watch([()=>o.area,()=>o.direction,()=>o.useMouse],()=>e.nextTick(B),{deep:!0}),e.onMounted(B),e.onUnmounted(()=>{o.useMouse&&document.body.removeEventListener("mouseup",h)});const b=(n,s)=>{y=!0,f=[n.x,n.y],m=s},F=n=>{if(!y||!o.useMouse)return;const s=o.direction==="x"?n.x-f[0]:n.y-f[1],r=parseFloat(a.value[m])+s,t=parseFloat(a.value[m+1])-s;r<o.min&&(n.movementX<0||n.movementY<0)||t<o.min||(a.value[m]=r+"px",a.value[m+1]=t+"px",f=[n.x,n.y])},g=e.computed(()=>o.disabled?{display:"none"}:{});return(n,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["es-split-area",`es-split-area-${l.direction}`]),ref:(r,t)=>{t.parentRef=r,u.value=r}},[l.useMouse?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createCommentVNode(" \u4F7F\u7528\u9F20\u6807\u62D6\u62FD "),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.area,(r,t)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.$slots[`area-${t+1}`]?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([`es-split-area-${l.direction}-item`]),style:e.normalizeStyle({flexBasis:e.unref(a)[t]}),onMousemove:F,onMouseup:h},[e.renderSlot(n.$slots,`area-${t+1}`)],38)):e.createCommentVNode("v-if",!0),n.$slots["split-line"]&&t<l.area.length-1?(e.openBlock(),e.createElementBlock("div",{key:1,class:"split-line--slot",ref:e.unref(i)[t],style:e.normalizeStyle(e.unref(g)),onMousedown:d=>b(d,t)},[e.renderSlot(n.$slots,"split-line")],44,c)):t<l.area.length-1?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(`es-split-area-${l.direction}-line`),ref:e.unref(i)[t],style:e.normalizeStyle(e.unref(g)),onMousedown:d=>b(d,t)},null,46,S)):e.createCommentVNode("v-if",!0)],64))),256))],2112)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createCommentVNode(" \u4F7F\u7528\u56FA\u5B9A\u914D\u7F6E\u6BD4\u4F8B "),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.area,(r,t)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.$slots[`area-${t+1}`]?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([`es-split-area-${l.direction}-item`]),style:e.normalizeStyle({flex:r})},[e.renderSlot(n.$slots,`area-${t+1}`)],6)):e.createCommentVNode("v-if",!0)],64))),256))],2112))],2))}});function M(l,o){o===void 0&&(o={});var u=o.insertAt;if(!(!l||typeof document=="undefined")){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",u==="top"&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=l:a.appendChild(document.createTextNode(l))}}var x=`.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;
}`;return M(x),p.__scopeId="data-v-1b6cd51e",p.__file="components/split-area/index.vue",p.install=l=>{l.component("es-split-area",p)},p});