@farris/ui-vue 1.2.8 → 1.2.9

package/components/layout/index.umd.cjs

@@ -0,0 +1 @@
+(function(H,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("lodash-es"),require("bignumber.js")):typeof define=="function"&&define.amd?define(["exports","vue","lodash-es","bignumber.js"],a):(H=typeof globalThis<"u"?globalThis:H||self,a(H.layout={},H.Vue,H.LodashES))})(this,function(H,a,G){"use strict";const k={},L={};function R(t){const{properties:e,title:n,ignore:o}=t,l=o&&Array.isArray(o),s=Object.keys(e).reduce((c,m)=>((!l||!o.find(P=>P==m))&&(c[m]=e[m].type==="object"&&e[m].properties?R(e[m]):G.cloneDeep(e[m].default)),c),{});return(!l||!o.find(c=>c=="id"))&&(s.id=`${n}-${Date.now()}`),s}function E(t,e={},n){const o=k[t];if(o){let l=R(o);const s=L[t];return l=s?s({getSchemaByType:E},l,e,n):l,l}return null}function Q(t,e){const n=R(e);return Object.keys(t).reduce((o,l)=>(o[l]&&typeof o[l]=="object"?Object.assign(o[l],t[l]):o[l]=t[l],o),n),n}function U(t,e){return Object.keys(t).filter(o=>t[o]!=null).reduce((o,l)=>{if(e.has(l)){const s=e.get(l);if(typeof s=="string")o[s]=t[l];else{const c=s(l,t[l],t);Object.assign(o,c)}}else o[l]=t[l];return o},{})}function Z(t,e,n=new Map){const o=Q(t,e);return U(o,n)}function K(t={}){function e(r,d,u,v){if(typeof u=="number")return v[r].length===u;if(typeof u=="object"){const $=Object.keys(u)[0],O=u[$];if($==="not")return Number(v[r].length)!==Number(O);if($==="moreThan")return Number(v[r].length)>=Number(O);if($==="lessThan")return Number(v[r].length)<=Number(O)}return!1}function n(r,d,u,v){return v[r]&&v[r].propertyValue&&String(v[r].propertyValue.value)===String(u)}const o=new Map([["length",e],["getProperty",n]]);Object.keys(t).reduce((r,d)=>(r.set(d,t[d]),r),o);function l(r,d){const u=r;return typeof d=="number"?[{target:u,operator:"length",param:null,value:Number(d)}]:typeof d=="boolean"?[{target:u,operator:"getProperty",param:r,value:!!d}]:typeof d=="object"?Object.keys(d).map(v=>{if(v==="length")return{target:u,operator:"length",param:null,value:d[v]};const $=v,O=d[v];return{target:u,operator:"getProperty",param:$,value:O}}):[]}function s(r){return Object.keys(r).reduce((u,v)=>{const $=l(v,r[v]);return u.push(...$),u},[])}function c(r,d){if(o.has(r.operator)){const u=o.get(r.operator);return u&&u(r.target,r.param,r.value,d)||!1}return!1}function m(r,d){return s(r).reduce(($,O)=>$&&c(O,d),!0)}function P(r,d){const u=Object.keys(r),v=u.includes("allOf"),$=u.includes("anyOf"),O=v||$,f=(O?r[O?v?"allOf":"anyOf":"allOf"]:[r]).map(g=>m(g,d));return v?!f.includes(!1):f.includes(!0)}return{parseValueSchema:P}}const x={},I={};K();function F(t,e,n=new Map,o=(c,m,P)=>m,l={},s=c=>c){return k[e.title]=e,L[e.title]=o,x[e.title]=l,I[e.title]=s,(c={})=>{const m=Z(c,e,n),P=Object.keys(t).reduce((r,d)=>(r[d]=t[d].default,r),{});return Object.assign(P,m)}}function ee(t,e){return{customClass:e.class,customStyle:e.style}}const q=new Map([["appearance",ee]]);function W(t,e,n){return e}const te={$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"]},ne={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"}}}}},D={customStyle:{type:String,defaut:""},customClass:{type:String,defaut:""}},T=F(D,te,q,W,ne);function _(t){const e=a.ref(-1),n=a.ref(-1),o=a.ref(0),l=a.ref(0),s=a.ref(!1),c=a.ref(!1),m=a.computed(()=>({display:s.value?"block":"none",left:`${o.value}px`,cursor:"e-resize"})),P=a.computed(()=>({display:c.value?"block":"none",top:`${l.value}px`,cursor:"n-resize"})),r=a.computed(()=>({display:c.value||s.value?"block":"none"}));function d(z,f,h,g){const S=t.value;if(S){const{left:b,right:i,width:y}=S.getBoundingClientRect();let p=z.clientX-b;g==="right"&&(p=i-z.clientX),p>f&&(p=f),p<h&&(p=h),g==="right"&&(p=y-p),o.value=p}}function u(z,f,h,g){const S=t.value;if(S){const{top:b,bottom:i,height:y}=S.getBoundingClientRect();let p=z.clientY-b;g==="bottom"&&(p=i-z.clientY),p>f&&(p=f),p<h&&(p=h),g==="bottom"&&(p=y-p),l.value=p}}function v(){const z=t.value;if(z){const{width:f,height:h}=z.getBoundingClientRect();return{width:f,height:h}}return null}function $(){const z=t.value;return z?Array.from(z.querySelectorAll("[data-position]")).reduce((f,h)=>{const g=h.getAttribute("data-position");return f=Object.assign(f,{[g]:h}),f},{}):null}function O(z,f){const h=v(),g=$();if(h&&g){const S=g==null?void 0:g.right,b=g==null?void 0:g.left;if(z==="left"&&b)return S?h.width-S.clientWidth-f:h.width-f;if(z==="right"&&S)return b?h.width-b.clientWidth-f:h.width-f}}function w(z,f){const h=v(),g=$();if(h&&g){const S=g==null?void 0:g.bottom,b=g==null?void 0:g.top;if(z==="top"&&b)return S?h.height-S.clientHeight-f:h.height-f;if(z==="bottom"&&S)return b?h.height-b.clientHeight-f:h.height-f}}return{horizontalResizeHandleStyle:m,verticalResizeHandleStyle:P,resizeOverlayStyle:r,showHorizontalResizeHandle:s,showVerticalResizeHandle:c,horizontalResizeBarPosition:e,verticalResizeBarPosition:n,verticalResizeHandleOffset:l,horizontalResizeHandleOffset:o,draggingHorizontalResizeHandle:d,draggingVerticalResizeHandle:u,getPanelMaxHeight:w,getPanelMaxWidth:O}}const oe=["moz","ms","webkit"];function ae(){let t=0;return e=>{const n=new Date().getTime(),o=Math.max(0,16-(n-t)),l=setTimeout(()=>{e(n+o)},o);return t=n+o,l}}function re(){if(typeof window>"u")return()=>0;if(window.requestAnimationFrame)return window.requestAnimationFrame.bind(window);const t=oe.filter(e=>`${e}RequestAnimationFrame`in window)[0];return t?window[`${t}RequestAnimationFrame`]:ae()}re();function ie(t,e){return((e==null?void 0:e.split(" "))||[]).reduce((o,l)=>(l&&(o[l]=!0),o),t),t}function le(t,e){return((e==null?void 0:e.split(";"))||[]).reduce((o,l)=>{if(l){const s=l.split(":");o[s[0]]=s[1]}return o},t),t}const N=a.defineComponent({name:"FLayout",props:D,emits:[],setup(t,e){const n=a.ref(),o=_(n),{horizontalResizeHandleStyle:l,verticalResizeHandleStyle:s,resizeOverlayStyle:c}=o;a.provide("layout",{useResizeHandleComposition:o});const m=a.computed(()=>ie({"f-layout":!0},t==null?void 0:t.customClass)),P=a.computed(()=>le({},t==null?void 0:t.customStyle));return()=>a.createVNode("div",{class:m.value,style:P.value,ref:n},[e.slots.default&&e.slots.default(),a.createVNode("div",{class:"f-layout-resize-overlay",style:c.value},null),a.createVNode("div",{class:"f-layout-horizontal-resize-proxy",style:l.value},null),a.createVNode("div",{class:"f-layout-vertical-resize-proxy",style:s.value},null)])}}),se={$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}}},ce={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:"是否可见"}}}}},V={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}},Y=F(V,se,q,W,ce);function X(t,e,n,o,l){const{horizontalResizeBarPosition:s,horizontalResizeHandleOffset:c,showHorizontalResizeHandle:m,showVerticalResizeHandle:P,verticalResizeBarPosition:r,verticalResizeHandleOffset:d,draggingHorizontalResizeHandle:u,draggingVerticalResizeHandle:v,getPanelMaxHeight:$,getPanelMaxWidth:O}=l;let w="",z,f,h;function g(i){if((w==="left"||w==="right")&&f){const{left:y}=f.getBoundingClientRect(),{width:p}=z.getBoundingClientRect(),M=i.clientX-y;let C=w==="left"?(p||0)+(M-s.value):(p||0)-(M-s.value);C=n.value>0?Math.max(n.value,C):C;const j=O(w,n.value);j!=null&&(C=j>C?C:j),t.value=C}if((w==="top"||w==="bottom")&&f){const{top:y}=f.getBoundingClientRect(),{height:p}=z.getBoundingClientRect(),M=i.clientY-y;let C=w==="top"?(p||0)+(M-r.value):(p||0)-(M-r.value);C=o.value>0?Math.max(o.value,C):C;const j=$(w,o.value);j!=null&&(C=j>C?C:j),e.value=C}c.value=0,d.value=0,s.value=-1,r.value=-1,m.value=!1,P.value=!1,document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",g),document.body.style.userSelect="",w="",z=null,f=null}function S(i,y,p){if(w=y,z=p,m.value=!0,f=i.composedPath().find(C=>(C.className||"").split(" ")[0]==="f-layout"),f){const{left:C}=f.getBoundingClientRect(),j=i.clientX-C;c.value=j,s.value=j;const B=O(w,n.value)||0;h=me=>u(me,B,n.value,w),document.addEventListener("mousemove",h),document.addEventListener("mouseup",g),document.body.style.userSelect="none"}}function b(i,y,p){if(w=y,z=p,P.value=!0,f=i.composedPath().find(C=>(C.className||"").split(" ")[0]==="f-layout"),f){const{top:C}=f.getBoundingClientRect();d.value=i.clientY-C,r.value=i.clientY-C;const j=$(w,o.value)||0;h=B=>v(B,j,o.value,w),document.addEventListener("mousemove",h),document.addEventListener("mouseup",g),document.body.style.userSelect="none"}}return{onClickHorizontalResizeBar:S,onClickVerticalResizeBar:b}}const A=a.defineComponent({name:"FLayoutPane",props:V,emits:[],setup(t,e){const n=a.ref(t.minHeight<=0?100:t.minHeight),o=a.ref(t.minWidth<=0?100:t.minWidth),l=a.ref(t.width<=0?100:t.width),s=a.ref(t.height<=100?100:t.height),c=a.ref(Math.max(n.value,s.value)),m=a.ref(Math.max(o.value,l.value)),P=a.ref(),r=a.ref(t.position),d=a.ref(t.resizable);a.watch(()=>t.resizable,b=>{d.value=b});const u=a.inject("layout"),{useResizeHandleComposition:v}=u,$=X(m,c,o,n,v),{onClickHorizontalResizeBar:O,onClickVerticalResizeBar:w}=$,z=a.computed(()=>({"f-layout-resize-bar":!0,"f-layout-resize-bar-e":r.value==="left","f-layout-resize-bar-n":r.value==="bottom","f-layout-resize-bar-s":r.value==="top","f-layout-resize-bar-w":r.value==="right"})),f=a.computed(()=>r.value!=="center"&&d.value);function h(b,i){(i==="left"||i==="right")&&O(b,i,P.value),(i==="top"||i==="bottom")&&w(b,i,P.value)}const g=a.computed(()=>{const b={"f-layout-pane":!0,"f-page-content-nav":r.value==="left"||r.value==="right","f-page-content-main":r.value==="center"};return t.customClass&&String(t.customClass).split(" ").reduce((i,y)=>(i[y]=!0,i),b),b}),S=a.computed(()=>{const b={};return(m.value&&r.value==="left"||r.value==="right")&&(b.width=`${m.value}px`),(c.value&&r.value==="bottom"||r.value==="top")&&(b.height=`${c.value}px`),t.visible||(b.display="none"),b});return()=>a.createVNode("div",{ref:P,class:g.value,style:S.value,"data-position":r.value},[e.slots.default&&e.slots.default(),f.value&&a.createVNode("span",{class:z.value,onMousedown:b=>h(b,r.value)},null)])}});function ue(t,e){function n(){return!1}return{canAccepts:n}}function J(t,e,n){var b;function o(){n!=null&&n.resolveComponentContext&&n.resolveComponentContext()}o();const l=n&&n.getStyles&&n.getStyles()||"",s=n&&n.getDesignerClass&&n.getDesignerClass()||"",c=a.ref();function m(){return(e==null?void 0:e.schema.componentType)==="frame"?!1:n&&n.checkCanMoveComponent?n.checkCanMoveComponent():!0}function P(){return!1}function r(){return(e==null?void 0:e.schema.componentType)==="frame"?!1:n&&n.checkCanDeleteComponent?n.checkCanDeleteComponent():!0}function d(){return(e==null?void 0:e.schema.componentType)==="frame"?!0:n&&n.hideNestedPaddingInDesginerView?n.hideNestedPaddingInDesginerView():!1}function u(i){if(!i||!i.value)return null;if(i.value.schema&&i.value.schema.type==="component")return i.value;const y=a.ref(i==null?void 0:i.value.parent),p=u(y);return p||null}function v(i=e){const{componentInstance:y,designerItemElementRef:p}=i;return!y||!y.value?null:y.value.canMove?p:v(i.parent)}function $(i){return!!n&&n.canAccepts(i)}function O(){return(e==null?void 0:e.schema.label)||(e==null?void 0:e.schema.title)||(e==null?void 0:e.schema.name)}function w(){}function z(i,y){y&&n!=null&&n.onAcceptMovedChildElement&&n.onAcceptMovedChildElement(y)}function f(i,y){const{componentType:p}=i;let M=E(p,i,y);n&&n.onResolveNewComponentSchema&&(M=n.onResolveNewComponentSchema(i,M));const C=p.toLowerCase().replace("-","_");return M&&!M.id&&M.type===p&&(M.id=`${C}_${Math.random().toString().slice(2,6)}`),M}function h(i,y){const p=String(i.getAttribute("data-controltype")),M=i.getAttribute("data-feature"),C=M?JSON.parse(M):{};C.parentComponentInstance=c.value;let j=E(p,C);n&&n.onAcceptNewChildElement&&(j=n.onAcceptNewChildElement(i,y,j));const B=p.toLowerCase().replace("-","_");return j&&!j.id&&j.type===p&&(j.id=`${B}_${Math.random().toString().slice(2,6)}`),j}function g(i){}function S(...i){if(n&&n.getPropsConfig)return n.getPropsConfig(...i)}return c.value={canMove:m(),canSelectParent:P(),canDelete:r(),canNested:!d(),contents:e==null?void 0:e.schema.contents,elementRef:t,parent:(b=e==null?void 0:e.parent)==null?void 0:b.componentInstance,schema:e==null?void 0:e.schema,styles:l,designerClass:s,canAccepts:$,getBelongedComponentInstance:u,getDraggableDesignItemElement:v,getDraggingDisplayText:O,getPropConfig:S,getDragScopeElement:w,onAcceptMovedChildElement:z,onAcceptNewChildElement:h,onChildElementMovedOut:g,addNewChildComponentSchema:f,updateDragAndDropRules:o,triggerBelongedComponentToMoveWhenMoved:!!n&&n.triggerBelongedComponentToMoveWhenMoved||a.ref(!1),triggerBelongedComponentToDeleteWhenDeleted:!!n&&n.triggerBelongedComponentToDeleteWhenDeleted||a.ref(!1)},c}const fe=a.defineComponent({name:"FLayoutDesign",props:D,emits:[],setup(t,e){var d;const n=a.ref(),o=a.inject("design-item-context"),l=ue(o.schema,(d=o.parent)==null?void 0:d.schema),s=J(n,o,l);s.value.canNested=!1;const c=_(n),{horizontalResizeHandleStyle:m,verticalResizeHandleStyle:P,resizeOverlayStyle:r}=c;return a.provide("layout",{useResizeHandleComposition:c}),a.onMounted(()=>{n.value.componentInstance=s}),e.expose(s.value),()=>a.createVNode("div",{class:"f-layout f-page-content",ref:n},[e.slots.default&&e.slots.default(),a.createVNode("div",{class:"f-layout-resize-overlay",style:r.value},null),a.createVNode("div",{class:"f-layout-horizontal-resize-proxy",style:m.value},null),a.createVNode("div",{class:"f-layout-vertical-resize-proxy",style:P.value},null)])}});function pe(){function t(e){var l,s;if(!e)return!1;const n=((l=e.targetContainer)==null?void 0:l.componentInstance)&&e.targetContainer.componentInstance.value;if(!n)return!1;const o=(s=n.schema.appearance)==null?void 0:s.class;if(e.controlCategory==="input"||e.controlType==="form-group"){const c=n.schema.type,m=(c==="response-form"||c==="content-container")&&o&&o.includes("farris-form");if(n.schema.type!=="response-layout-item"&&!m)return!1}return e.controlType!=="field-set"}return{basalDragulaRuleForContainer:t}}function de(t,e){function n(s){return!!pe().basalDragulaRuleForContainer(s)}function o(s,c,m){return m}function l(){const s=["f-layout-pane"];return(t.position==="left"||t.position==="right")&&s.push("f-page-content-nav"),t.position==="center"&&s.push("f-page-content-main"),s.join(" ")}return{canAccepts:n,getDesignerClass:l,onAcceptNewChildElement:o}}const ye=a.defineComponent({name:"FLayoutPaneDesign",props:V,emits:[],setup(t,e){var b;const n=a.ref(),o=a.ref(),l=a.inject("design-item-context"),s=de(l.schema,(b=l.parent)==null?void 0:b.schema),c=J(o,l,s);c.value.canNested=!1,c.value.canMove=!1,c.value.canDelete=!1,a.onMounted(()=>{o.value.componentInstance=c}),e.expose(c.value);const m=a.ref(Math.max(t.minHeight,t.height)),P=a.ref(Math.max(t.minWidth,t.width)),r=a.ref(t.minHeight),d=a.ref(t.minWidth),u=a.ref(t.position),v=a.inject("layout"),{useResizeHandleComposition:$}=v,O=X(P,m,d,r,$),{onClickHorizontalResizeBar:w,onClickVerticalResizeBar:z}=O,f=a.computed(()=>({"f-layout-resize-bar":!0,"f-layout-resize-bar-e":u.value==="left","f-layout-resize-bar-n":u.value==="bottom","f-layout-resize-bar-s":u.value==="top","f-layout-resize-bar-w":u.value==="right"}));function h(i,y){(y==="left"||y==="right")&&w(i,y,n.value),(y==="top"||y==="bottom")&&z(i,y,n.value)}const g=a.computed(()=>{const i={"f-layout-pane":!0,"f-page-content-nav":u.value==="left"||u.value==="right","f-page-content-main":u.value==="center"};return t.customClass&&String(t.customClass).split(" ").reduce((y,p)=>(y[p]=!0,y),i),i}),S=a.computed(()=>{const i={flex:"1"};return(P.value&&u.value==="left"||u.value==="right")&&(i.width=`${P.value}px`),(m.value&&u.value==="bottom"||u.value==="top")&&(i.height=`${m.value}px`),i});return()=>a.createVNode("div",{ref:n,class:g.value,style:S.value},[a.createVNode("div",{ref:o,class:"drag-container","data-dragref":`${l.schema.id}-container`},[e.slots.default&&e.slots.default()]),a.createVNode("span",{class:f.value,onMousedown:i=>h(i,u.value)},null)])}});N.install=t=>{t.component(N.name,N),t.component(A.name,A)},N.register=(t,e,n,o)=>{t.layout=N,e.layout=T,t["layout-pane"]=A,e["layout-pane"]=Y},N.registerDesigner=(t,e,n)=>{t.layout=fe,e.layout=T,t["layout-pane"]=ye,e["layout-pane"]=Y},H.FLayout=N,H.FLayoutPane=A,H.default=N,H.layoutProps=D,H.layoutPropsResolver=T,Object.defineProperties(H,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});