@farris/ui-vue/components/response-layout/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(g,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../designer-canvas/index.umd.js"),require("../property-panel/index.umd.js"),require("../dynamic-form/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../designer-canvas/index.umd.js","../property-panel/index.umd.js","../dynamic-form/index.umd.js"],o):(g=typeof globalThis<"u"?globalThis:g||self,o(g["response-layout"]={},g.Vue,g.dynamicResolver,g.designerCanvas,g.propertyPanel,g.dynamicForm))})(this,function(g,o,I,R,T,A){"use strict";const V=new Map([["appearance",I.resolveAppearance]]);function D(s,e,t){if(t.componentFeature){const c=JSON.parse(t.componentFeature);e.appearance={class:"bg-white"},e.contents=String(c.splitter).split(":").map(i=>{const l=s.getSchemaByType("response-layout-item");return l.appearance={class:`h-100 col-${i} px-0`},l})}return e}const q={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/response-layout.schema.json",title:"response-layout",description:"A Farris Container Component",type:"object",properties:{id:{description:"The unique identifier for a Respnse Layout",type:"string"},type:{description:"The type string of Respnse Layout component",type:"string",default:"response-layout"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},contents:{description:"",type:"array",default:[]},size:{description:"",type:"object",properties:{width:{type:"number"},height:{type:"number"}},default:null},visible:{description:"",type:"boolean",default:!0}},required:["id","type","contents"]},j={customClass:{type:String,default:""},customStyle:{type:String,default:""}},z=I.createPropsResolver(j,q,V,D),N=I.getPropsResolverGenerator(j,q,V,D),F=o.defineComponent({name:"FResponseLayout",props:j,emits:[],setup(s,e){function t(i,l){i&&l&&l.split(" ").reduce((a,m)=>(a[m]=!0,a),i)}const c=o.computed(()=>{const i={"d-flex":!0,"f-response-layout":!0};return t(i,s.customClass),i});return()=>o.createVNode("div",{class:c.value,style:s.customStyle},[e.slots.default&&e.slots.default()])}}),B={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/response-layout-item.schema.json",title:"response-layout-item",description:"A Farris Container Component",type:"object",properties:{id:{description:"The unique identifier for a Respnse Layout Item",type:"string"},type:{description:"The type string of Respnse Layout Item component",type:"string",default:"response-layout-item"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},contents:{description:"",type:"array",default:[]},size:{description:"",type:"object",properties:{width:{type:"number"},height:{type:"number"}},default:null},visible:{description:"",type:"boolean",default:!0}},required:["id","type","contents"]},v={customClass:{type:String,default:""},customStyle:{type:String,default:""}};I.createPropsResolver(v,B,V);const x=I.getPropsResolverGenerator(v,B,V,void 0),M=o.defineComponent({name:"FResponseLayoutItem",props:v,emits:[],setup(s,e){const t=o.computed(()=>({"f-response-layout-item":!0,[s.customClass]:!!s.customClass}));return()=>o.createVNode("div",{class:t.value,style:s.customStyle},[e.slots.default&&e.slots.default()])}});class J extends T.BaseControlProperty{constructor(e,t){super(e,t)}getPropertyConfig(e){return this.propertyConfig.categories.basic=this.getBasicPropConfig(e),this.propertyConfig.categories.appearance=this.getAppearanceConfig(e),this.propertyConfig.categories.layout=this.getLayoutPropConfig(e,this.viewModelId),this.propertyConfig}getLayoutPropConfig(e,t){return{title:"布局",description:"layout",properties:{layout:{title:"",type:"select",description:"配置布局容器内区块个数及比例。",editor:{type:"response-layout-splitter",layout:e.contents||[]}}},setPropertyRelates(c,i){R.canvasChanged.value++}}}}function W(s,e){const t=s.schema;function c(a){return!1}function i(a){return new J(a,e).getPropertyConfig(t)}function l(){var f;const a=s.designerItemElementRef.value.querySelector(`#${t.id}`);if(!a)return;const m=((f=s.schema.contents)==null?void 0:f.map(h=>h.id))||[];Array.from(a.children).map(h=>{var $;const C=($=h.componentInstance)==null?void 0:$.value;C!=null&&C.schema&&!m.includes(C.schema.id)&&C.onRemoveComponent&&C.onRemoveComponent(e)})}function u(a){var m;a&&((m=a==null?void 0:a.changeObject)==null?void 0:m.propertyID)==="layout"&&l()}return{canAccepts:c,getPropsConfig:i,onPropertyChanged:u}}const K=o.defineComponent({name:"FResponseLayoutDesign",props:j,emits:[],setup(s,e){const t=o.ref(),c=o.inject("design-item-context"),i=o.inject("designer-host-service"),l=W(c,i),u=R.useDesignerComponent(t,c,l);o.onMounted(()=>{t.value.componentInstance=u}),e.expose(u.value);function a(f,h){f&&h&&h.split(" ").reduce(($,r)=>($[r]=!0,$),f)}const m=o.computed(()=>{const f={"d-flex":!0,"response-layout":!0};return a(f,s.customClass),f});return()=>o.createVNode("div",{ref:t,class:m.value,style:"height:inherit;"},[e.slots.default&&e.slots.default()])}});class Q extends T.BaseControlProperty{constructor(e,t){super(e,t)}getPropertyConfig(e){return this.propertyConfig.categories.basic=this.getBasicPropConfig(e),this.propertyConfig.categories.appearance=this.getAppearanceConfig(e),this.propertyConfig}}function Y(s,e){const t=s.schema;function c(r){var X,k,U;const{componentType:n,sourceType:p,bindingTargetId:d,sourceElement:y}=r,{schemaService:b,formSchemaUtils:L}=e,P=L.getViewModelIdByComponentId((k=(X=s.componentInstance)==null?void 0:X.value)==null?void 0:k.belongedComponentId),O=L.getViewModelById(P);if([R.DgControl["response-layout"].type,R.DgControl["query-solution"].type,R.DgControl.fieldset.type,R.DgControl["filter-bar"].type,R.DgControl.drawer.type].includes(n)||(U=t.contents)!=null&&U.length)return!1;if(p==="field"){const w=b.getFieldByIDAndVMID(d,P);if(!w||!w.schemaField)return!1}if(y&&y.componentInstance){const{componentInstance:w}=y,_=L.getViewModelIdByComponentId(w.value.belongedComponentId);if(_!==P&&n==="form-group")return L.getViewModelById(_).bindTo===O.bindTo}return!0}function i(){return!1}function l(){return!1}function u(){return!0}function a(r){return new Q(r,e).getPropertyConfig(t)}function m(){t.appearance||(t.appearance={class:""}),t.appearance.class||(t.appearance.class=""),t.appearance.class.includes("farris-form")||(t.appearance.class+=" f-form-layout farris-form farris-form-controls-inline farris-form-auto")}function f(r,n){var p,d,y;if(r.componentCategory==="input"){const{label:b}=r;let L;const P=e==null?void 0:e.controlCreatorUtils;return(p=r.bindingSourceContext)!=null&&p.entityFieldNode?L=P.setFormFieldProperty((d=r.bindingSourceContext)==null?void 0:d.entityFieldNode,n==null?void 0:n.type,"col-12"):(L=P.createFormGroupWithoutField(n==null?void 0:n.type,"col-12"),L.label=b),m(),A.useDesignerRules(s,e).syncFieldToViewModel(r,(y=L.editor)==null?void 0:y.type),L}return n}function h(r,n){if(!r||!r.componentInstance||!e)return;const d=r.componentInstance.value.schema;if(d.type==="form-group"&&m(),!d.binding||!d.binding.field)return;const y=A.useDesignerRules(s,e);y.onAcceptMovedChildElement&&y.onAcceptMovedChildElement(r,n)}function C(){!t.appearance||!t.appearance.class||(t.appearance.class=t.appearance.class.replace("f-form-layout",""),t.appearance.class=t.appearance.class.replace("farris-form",""),t.appearance.class=t.appearance.class.replace("farris-form-controls-inline",""),t.appearance.class=t.appearance.class.replace("farris-form-auto",""),t.appearance.class=t.appearance.class.trim())}function $(r){var n,p,d;r&&((d=(p=(n=r.componentInstance)==null?void 0:n.value)==null?void 0:p.schema)==null?void 0:d.type)==="form-group"&&C()}return{canAccepts:c,checkCanDeleteComponent:i,checkCanMoveComponent:l,hideNestedPaddingInDesginerView:u,getPropsConfig:a,onResolveNewComponentSchema:f,onAcceptMovedChildElement:h,onChildElementMovedOut:$}}const Z=o.defineComponent({name:"FResponseLayoutItemDesign",props:v,emits:[],setup(s,e){const t=o.ref(),c=o.inject("design-item-context"),i=o.inject("designer-host-service"),l=Y(c,i),u=R.useDesignerComponent(t,c,l),{designerContext:a}=i,m=!!a&&!!a.responsiveForm&&a.designerMode==="Mobile";o.onMounted(()=>{t.value.componentInstance=u}),e.expose(u.value);const f=o.computed(()=>({"f-response-layout-item":!0,[s.customClass]:!!s.customClass})),h=o.computed(()=>({display:"inherit",flex:1,paddingRight:m?void 0:"8px"}));return()=>o.createVNode("div",{ref:t,class:f.value,style:h.value,"data-dragref":`${c.schema.id}-container`},[e.slots.default&&e.slots.default()])}}),G={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/response-layout-splitter.schema.json",title:"response-layout-splitter",description:"A Splitter Editor for Response Layout",type:"object",properties:{id:{description:"The unique identifier for response layout splitter editor",type:"string"},type:{description:"The type string of response layout splitter editor component",type:"string",default:"response-layout-splitter"},layout:{description:"",type:"object",default:{}}},required:["id","type"]},S={layout:{type:Array}};I.createPropsResolver(S,G);const H=I.getPropsResolverGenerator(S,G,void 0,void 0);function ee(s,e){const t=o.inject("FMessageBoxService"),c=["12","6:6","3:9","9:3","4:4:4","3:6:3","3:3:6","3:3:3:3"],i=o.ref([]),l=o.ref(""),u=o.ref(s.layout||[]),a=o.ref(!0);function m(){c.forEach(r=>{i.value.push(r.split(":").map(n=>`col-${n}`))})}function f(){if(!(s!=null&&s.layout))return;if(!u.value.length){l.value="";return}a.value=!0;const r=[];u.value.forEach(n=>{n.appearance||(n.appearance={class:""});const d=(n.appearance.class||"").split(" ").find(y=>/^col-([1-9]|10|11|12)$/.test(y));d?r.push(parseInt(d.replace("col-",""),10)):r.push(0)}),l.value=r.join(":"),a.value=c.includes(l.value)}function h(r){for(let n=r.length;n<u.value.length;n++){const p=u.value[n];if(p&&p.contents&&p.contents.length)return!0}return!1}function C(r,n){a.value=!0,l.value=r;for(let p=0;p<n.length;p++){const d=u.value[p];if(d){let y=d.appearance&&d.appearance.class||"";const b=y.split(" ").find(L=>/^col-([1-9]|10|11|12)$/.test(L));b?(y=y.replace(b,`col-${n[p]}`),d.appearance.class=y):d.appearance.class+=` col-${n[p]}`}else{const y=I.getSchemaByType("response-layout-item");y.id=`layout_${Math.random().toString().slice(2,6)}`,y.appearance={class:`h-100 col-${n[p]} px-0`},u.value.push(y)}}u.value.length=n.length,e.emit("change")}function $(r){const n=r.split(":");if(n.length<u.value.length&&h(n)){let p="应用XXX列布局将删除右侧区域内的控件，此操作不可撤销，确定应用？";p=p.replace("XXX",n.length+""),t==null||t.question(p,"",()=>{C(r,n)},()=>{})}else C(r,n)}return m(),f(),{standardLayouts:c,standardLayoutClass:i,selectedLayout:l,currentLayoutItems:u,isStandardLayout:a,onSelectColumnLayout:$}}const E=o.defineComponent({name:"FResponseLayoutSplitter",props:S,emits:["change"],setup(s,e){const{standardLayouts:t,standardLayoutClass:c,selectedLayout:i,isStandardLayout:l,onSelectColumnLayout:u}=ee(s,e),a=o.computed(()=>f=>({"columns-layout-option":!0,active:i.value===f}));function m(){return o.createVNode("ul",{class:"columns-layout-list"},[t.map((f,h)=>o.createVNode("li",{class:a.value(f),onClick:()=>u(f)},[o.createVNode("div",{class:"columns-layout-icon d-flex"},[c.value[h].map(C=>o.createVNode("div",{class:{"columns-layout-item":!0,[C]:!0}},[o.createTextVNode(" ")]))])])),l.value?"":o.createVNode("li",{class:"columns-layout-option active",title:"自定义布局"},[o.createVNode("div",{class:"columns-layout-icon icon-custom"},[o.createTextVNode(" ")])])])}return()=>o.createVNode("div",{class:"columns-layout"},[m(),l.value?o.createVNode("div",{class:"farris-group-wrap mt-2"},[o.createVNode("div",{class:"form-group farris-form-group d-flex"},[o.createVNode("label",{class:"col-form-label mb-0",style:"width: 89px;"},[o.createVNode("div",{class:"wrap"},[o.createVNode("span",{class:"farris-label-text"},[o.createTextVNode(" 布局比例 ")])])]),o.createVNode("div",{class:"farris-input-wrap"},[o.createVNode("input",{type:"input",class:"form-control form-control-sm",value:i.value,readonly:!0},null)])])]):""])}}),te={install(s){s.component(F.name,F).component(M.name,M)},register(s,e,t,c,i){s["response-layout"]=F,s["response-layout-item"]=M,e["response-layout"]=N(i),e["response-layout-item"]=x(i),s["response-layout-splitter"]=E,e["response-layout-splitter"]=H(i)},registerDesigner(s,e,t,c){s["response-layout"]=K,s["response-layout-item"]=Z,e["response-layout"]=N(c),e["response-layout-item"]=x(c)}};g.FResponseLayout=F,g.FResponseLayoutItem=M,g.FResponseLayoutSplitter=E,g.default=te,g.responseLayoutProps=j,g.responseLayoutPropsResolver=z,g.responseLayoutPropsResolverGenerator=N,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});