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

Farris Vue, a Farris Design based Vue3 component library.

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