@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 13.7 kB
JavaScript
(function(R,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../common/index.umd.js"),require("../designer-canvas/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../common/index.umd.js","../designer-canvas/index.umd.js"],e):(R=typeof globalThis<"u"?globalThis:R||self,e(R.layout={},R.Vue,R.dynamicResolver,R.common,R.designerCanvas))})(this,function(R,e,V,q,k){"use strict";const D=new Map([["appearance",V.resolveAppearance]]);function A(t,r,l){return r}const X={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/layout.schema.json",title:"layout",description:"A Farris Container Component",type:"object",properties:{id:{description:"The unique identifier for layout component",type:"string"},type:{description:"The type string of layout component",type:"string",default:"layout"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},contents:{description:"",type:"array",default:[]},collapsable:{description:"",type:"boolean",default:!1},resizable:{description:"",type:"boolean",default:!0},visible:{description:"",type:"boolean",default:!0}},required:["id","type","contents"]},_={title:"layout",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"类型",title:"类型",type:"string",readonly:!0}}},behavior:{description:"Basic Infomation",title:"行为",properties:{collapsable:{description:"",title:"可收折",type:"boolean"},resizable:{description:"",title:"可调整尺寸",type:"boolean"}}}}},M={customStyle:{type:String,defaut:""},customClass:{type:String,defaut:""}},F=V.createPropsResolver(M,X,D,A,_);function T(t){const r=e.ref(-1),l=e.ref(-1),d=e.ref(0),v=e.ref(0),m=e.ref(!1),p=e.ref(!1),b=e.computed(()=>({display:m.value?"block":"none",left:`${d.value}px`,cursor:"e-resize"})),z=e.computed(()=>({display:p.value?"block":"none",top:`${v.value}px`,cursor:"n-resize"})),c=e.computed(()=>{const o={display:p.value||m.value?"block":"none"};return v.value>0&&(o.cursor="n-resize"),o});function C(o,s,i,a){const g=t.value;if(g){const{left:n,right:f,width:$}=g.getBoundingClientRect();let u=o.clientX-n;a==="right"&&(u=f-o.clientX),u>s&&(u=s),u<i&&(u=i),a==="right"&&(u=$-u),d.value=u}}function h(o,s,i,a){const g=t.value;if(g){const{top:n,bottom:f,height:$}=g.getBoundingClientRect();let u=o.clientY-n;a==="bottom"&&(u=f-o.clientY),u>s&&(u=s),u<i&&(u=i),a==="bottom"&&(u=$-u),v.value=u}}function S(){const o=t.value;if(o){const{width:s,height:i}=o.getBoundingClientRect();return{width:s,height:i}}return null}function x(){const o=t.value;return o?Array.from(o.querySelectorAll("[data-position]")).reduce((s,i)=>{const a=i.getAttribute("data-position");return s=Object.assign(s,{[a]:i}),s},{}):null}function B(o,s){const i=S(),a=x();if(i&&a){const g=a==null?void 0:a.right,n=a==null?void 0:a.left;if(o==="left"&&n)return g?i.width-g.clientWidth-s:i.width-s;if(o==="right"&&g)return n?i.width-n.clientWidth-s:i.width-s}}function O(o,s){const i=S(),a=x();if(i&&a){const g=a==null?void 0:a.bottom,n=a==null?void 0:a.top;if(o==="top"&&n)return g?i.height-g.clientHeight-s:i.height-s;if(o==="bottom"&&g)return n?i.height-n.clientHeight-s:i.height-s}}return{horizontalResizeHandleStyle:b,verticalResizeHandleStyle:z,resizeOverlayStyle:c,showHorizontalResizeHandle:m,showVerticalResizeHandle:p,horizontalResizeBarPosition:r,verticalResizeBarPosition:l,verticalResizeHandleOffset:v,horizontalResizeHandleOffset:d,draggingHorizontalResizeHandle:C,draggingVerticalResizeHandle:h,getPanelMaxHeight:O,getPanelMaxWidth:B}}const j=e.defineComponent({name:"FLayout",props:M,emits:[],setup(t,r){const l=e.ref(),d=T(l),{horizontalResizeHandleStyle:v,verticalResizeHandleStyle:m,resizeOverlayStyle:p}=d;e.provide("layout",{useResizeHandleComposition:d});const b=e.computed(()=>{const c={"f-layout":!0};return q.getCustomClass(c,t==null?void 0:t.customClass)}),z=e.computed(()=>{const c={};return q.getCustomStyle(c,t==null?void 0:t.customStyle)});return()=>e.createVNode("div",{class:b.value,style:z.value,ref:l},[r.slots.default&&r.slots.default(),e.createVNode("div",{class:"f-layout-resize-overlay",style:p.value},null),e.createVNode("div",{class:"f-layout-horizontal-resize-proxy",style:v.value},null),e.createVNode("div",{class:"f-layout-vertical-resize-proxy",style:m.value},null)])}}),G={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/layout-pane.schema.json",title:"layout-pane",description:"A Farris Container Component",type:"object",properties:{id:{description:"The unique identifier for a layout pane",type:"string"},type:{description:"The type string of layout paney",type:"string",default:"layout-pane"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},collapsable:{description:"",type:"boolean",default:!1},contents:{description:"",type:"array",default:[]},height:{description:"",type:"number"},position:{description:"",type:"string",default:"left",enum:["left","center","right","top","bottom"]},resizeable:{description:"",type:"boolean",default:!0},width:{description:"",type:"number"},visible:{description:"",type:"number",default:!0}},required:["id","type","contents"]},J={title:"layout-pane",description:"A Farris Container Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"enum"},width:{description:"",type:"number",title:"宽度"},height:{description:"",type:"number",title:"高度"}}},appearance:{title:"样式",description:"Appearance",properties:{class:{title:"class样式",type:"string",description:""},style:{title:"style",type:"string",description:""}}},behavior:{description:"",title:"行为",properties:{collapsable:{description:"",type:"boolean",title:"允许收折"},position:{description:"",type:"enum",title:"位置",editor:{type:"combo-list",data:[{id:"left",name:"左侧"},{id:"center",name:"居中"},{id:"right",name:"右侧"},{id:"top",name:"顶部"},{id:"bottom",name:"底部"}]}},resizeable:{description:"",type:"boolean",title:"允许调整尺寸"},visible:{description:"运行时组件是否可见",type:"boolean",title:"是否可见"}}}}},E={customClass:{type:String,defaut:""},customStyle:{type:String,defaut:""},width:{type:Number,default:-1},height:{type:Number,default:-1},position:{type:String,default:"left"},visible:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},collapsable:{type:Boolean,default:!1},minWidth:{type:Number,default:100},minHeight:{type:Number,default:100},maxWidth:{type:Number,default:null}},I=V.createPropsResolver(E,G,D,A,J);function Y(t,r,l,d,v,m){const{horizontalResizeBarPosition:p,horizontalResizeHandleOffset:b,showHorizontalResizeHandle:z,showVerticalResizeHandle:c,verticalResizeBarPosition:C,verticalResizeHandleOffset:h,draggingHorizontalResizeHandle:S,draggingVerticalResizeHandle:x,getPanelMaxHeight:B,getPanelMaxWidth:O}=v;let o="",s,i,a;const g=()=>m.maxWidth?m.maxWidth:O(o,l.value)||0;function n(u){if((o==="left"||o==="right")&&i){const{left:w}=i.getBoundingClientRect(),{width:H}=s.getBoundingClientRect(),L=u.clientX-w;let y=o==="left"?(H||0)+(L-p.value):(H||0)-(L-p.value);y=l.value>0?Math.max(l.value,y):y;const P=g();P!=null&&(y=P>y?y:P),t.value=y}if((o==="top"||o==="bottom")&&i){const{top:w}=i.getBoundingClientRect(),{height:H}=s.getBoundingClientRect(),L=u.clientY-w;let y=o==="top"?(H||0)+(L-C.value):(H||0)-(L-C.value);y=d.value>0?Math.max(d.value,y):y;const P=B(o,d.value);P!=null&&(y=P>y?y:P),r.value=y}b.value=0,h.value=0,p.value=-1,C.value=-1,z.value=!1,c.value=!1,document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",n),document.body.style.userSelect="",o="",s=null,i=null}function f(u,w,H){if(o=w,s=H,z.value=!0,i=u.composedPath().find(y=>(y.className||"").split(" ")[0]==="f-layout"),i){const{left:y}=i.getBoundingClientRect(),P=u.clientX-y;b.value=P,p.value=P;const W=g();a=ee=>S(ee,W,l.value,o),document.addEventListener("mousemove",a),document.addEventListener("mouseup",n),document.body.style.userSelect="none"}}function $(u,w,H){if(o=w,s=H,c.value=!0,i=u.composedPath().find(y=>(y.className||"").split(" ")[0]==="f-layout"),i){const{top:y}=i.getBoundingClientRect();h.value=u.clientY-y,C.value=u.clientY-y;const P=B(o,d.value)||0;a=W=>x(W,P,d.value,o),document.addEventListener("mousemove",a),document.addEventListener("mouseup",n),document.body.style.userSelect="none"}}return{onClickHorizontalResizeBar:f,onClickVerticalResizeBar:$}}const N=e.defineComponent({name:"FLayoutPane",props:E,emits:[],setup(t,r){const l=e.ref(t.minHeight<=0?100:t.minHeight),d=e.ref(t.minWidth<=0?100:t.minWidth),v=e.ref(t.width<=0?100:t.width),m=e.ref(t.height<=0?100:t.height),p=e.ref(Math.max(l.value,m.value)),b=e.ref(Math.max(d.value,v.value)),z=e.ref(),c=e.ref(t.position),C=e.ref(t.resizable);e.watch(()=>t.resizable,n=>{C.value=n});const h=e.inject("layout"),{useResizeHandleComposition:S}=h,x=Y(b,p,d,l,S,t),{onClickHorizontalResizeBar:B,onClickVerticalResizeBar:O}=x,o=e.computed(()=>({"f-layout-resize-bar":!0,"f-layout-resize-bar-e":c.value==="left","f-layout-resize-bar-n":c.value==="bottom","f-layout-resize-bar-s":c.value==="top","f-layout-resize-bar-w":c.value==="right"})),s=e.computed(()=>c.value!=="center"&&C.value);function i(n,f){(f==="left"||f==="right")&&B(n,f,z.value),(f==="top"||f==="bottom")&&O(n,f,z.value)}const a=e.computed(()=>{const n={"f-layout-pane":!0,"f-page-content-nav":c.value==="left"||c.value==="right","f-page-content-main":c.value==="center"};return t.customClass&&String(t.customClass).split(" ").reduce((f,$)=>(f[$]=!0,f),n),n}),g=e.computed(()=>{const n={};return(b.value&&c.value==="left"||c.value==="right")&&(n.width=`${b.value}px`),(p.value&&c.value==="bottom"||c.value==="top")&&(n.height=`${p.value}px`),t.visible||(n.display="none"),n});return()=>e.createVNode("div",{ref:z,class:a.value,style:g.value,"data-position":c.value},[r.slots.default&&r.slots.default(),s.value&&e.createVNode("span",{class:o.value,onMousedown:n=>i(n,c.value)},null)])}});function K(t,r){function l(){return!1}return{canAccepts:l}}const Q=e.defineComponent({name:"FLayoutDesign",props:M,emits:[],setup(t,r){var C;const l=e.ref(),d=e.inject("design-item-context"),v=K(d.schema,(C=d.parent)==null?void 0:C.schema),m=k.useDesignerComponent(l,d,v);m.value.canNested=!1;const p=T(l),{horizontalResizeHandleStyle:b,verticalResizeHandleStyle:z,resizeOverlayStyle:c}=p;return e.provide("layout",{useResizeHandleComposition:p}),e.onMounted(()=>{l.value.componentInstance=m}),r.expose(m.value),()=>e.createVNode("div",{class:"f-layout f-page-content",ref:l},[r.slots.default&&r.slots.default(),e.createVNode("div",{class:"f-layout-resize-overlay",style:c.value},null),e.createVNode("div",{class:"f-layout-horizontal-resize-proxy",style:b.value},null),e.createVNode("div",{class:"f-layout-vertical-resize-proxy",style:z.value},null)])}});function U(t,r){const l=t.schema;function d(m){return!!k.useDragulaCommonRule().basalDragulaRuleForContainer(m)}function v(){const m=["f-layout-pane"];return(l.position==="left"||l.position==="right")&&m.push("f-page-content-nav"),l.position==="center"&&m.push("f-page-content-main"),m.join(" ")}return{canAccepts:d,getDesignerClass:v}}const Z=e.defineComponent({name:"FLayoutPaneDesign",props:E,emits:[],setup(t,r){const l=e.ref(),d=e.ref();e.inject("designer-host-service");const v=e.inject("design-item-context"),m=U(v),p=k.useDesignerComponent(d,v,m);p.value.canNested=!1,p.value.canMove=!1,p.value.canDelete=!1,e.onMounted(()=>{d.value.componentInstance=p}),r.expose(p.value);const b=e.ref(Math.max(t.minHeight,t.height)),z=e.ref(Math.max(t.minWidth,t.width)),c=e.ref(t.minHeight),C=e.ref(t.minWidth),h=e.ref(t.position),S=e.inject("layout"),{useResizeHandleComposition:x}=S,B=Y(z,b,C,c,x,t),{onClickHorizontalResizeBar:O,onClickVerticalResizeBar:o}=B,s=e.computed(()=>({"f-layout-resize-bar":!0,"f-layout-resize-bar-e":h.value==="left","f-layout-resize-bar-n":h.value==="bottom","f-layout-resize-bar-s":h.value==="top","f-layout-resize-bar-w":h.value==="right"}));function i(n,f){(f==="left"||f==="right")&&O(n,f,l.value),(f==="top"||f==="bottom")&&o(n,f,l.value)}const a=e.computed(()=>{const n={"f-layout-pane":!0,"f-page-content-nav":h.value==="left"||h.value==="right","f-page-content-main":h.value==="center"};return t.customClass&&String(t.customClass).split(" ").reduce((f,$)=>(f[$]=!0,f),n),n}),g=e.computed(()=>{const n={flex:"1"};return(z.value&&h.value==="left"||h.value==="right")&&(n.width=`${z.value}px`),(b.value&&h.value==="bottom"||h.value==="top")&&(n.height=`${b.value}px`),n});return()=>e.createVNode("div",{ref:l,class:a.value,style:g.value},[e.createVNode("div",{ref:d,class:"drag-container","data-dragref":`${v.schema.id}-container`},[r.slots.default&&r.slots.default()]),e.createVNode("span",{class:s.value,onMousedown:n=>i(n,h.value)},null)])}});j.install=t=>{t.component(j.name,j),t.component(N.name,N)},j.register=(t,r,l,d)=>{t.layout=j,r.layout=F,t["layout-pane"]=N,r["layout-pane"]=I},j.registerDesigner=(t,r,l)=>{t.layout=Q,r.layout=F,t["layout-pane"]=Z,r["layout-pane"]=I},R.FLayout=j,R.FLayoutPane=N,R.default=j,R.layoutProps=M,R.layoutPropsResolver=F,Object.defineProperties(R,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});