form-designer-xinyi/dist/attributeView-D8Tr4RkF.cjs

基于vue3的设计器,可视化开发页面表单

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),v=require("./index-BXOkp5Wk.cjs"),c=require("./revoke-Bbm2vFx2.cjs"),g=["title"],P=e.defineComponent({__name:"attributeView",setup(k){function b(o){const l={...o,componentProps:{...o.componentProps},input:!1,field:void 0,hidden:!1,show:!0,noFormItem:!0};if(o.field==="componentProps.defaultValue"&&r.value){if(r.value.type==="JDictSelectTag")return l;l.componentProps={...l.componentProps,...r.value.componentProps}}return l}const i=e.inject("designer"),d=e.inject("pageSchema"),m=c.pluginManager.getComponentConfings(),r=e.computed(()=>i.state.checkedNode);function h(o){var l;return typeof o.show=="boolean"?o.show:typeof o.show=="function"?(l=o.show)==null?void 0:l.call(o,{values:r.value}):!0}const s=e.ref([]);e.watch(()=>{var o;return(o=i.state.checkedNode)==null?void 0:o.type},()=>{var u,f;const o=(u=i.state.checkedNode)==null?void 0:u.type;if(!o)return[];let l=[];["page","form","card","row","col"].includes(o)||(l=[{label:"标签布局",type:"radio",field:"componentProps.labelLayout",componentProps:{options:[{label:"固定宽度",value:"fixed"},{label:"自适应宽度",value:"flex"}]}},{label:"标签宽度",type:"EInputSize",field:"componentProps.labelWidth",show:({values:p})=>{var a;return((a=p.componentProps)==null?void 0:a.labelLayout)==="fixed"}},{label:"labelCol",type:"input",field:"componentProps.labelCol.span",show:({values:p})=>{var a;return((a=p.componentProps)==null?void 0:a.labelLayout)==="flex"},componentProps:{labelCol:{span:5}}},{label:"wrapperCol",type:"input",field:"componentProps.wrapperCol.span",show:({values:p})=>{var a;return((a=p.componentProps)==null?void 0:a.labelLayout)==="flex"},componentProps:{wrapperCol:{span:19}}},{label:"标签对齐",type:"select",componentProps:{placeholder:"请选择",allowClear:!0,optionType:"button",options:[{label:"左",value:"left"},{label:"右",value:"right"}]},field:"componentProps.labelAlign"},{label:"表单布局",type:"select",componentProps:{layout:"horizontal",placeholder:"请选择",allowClear:!0,optionType:"button",options:[{label:"水平",value:"horizontal"},{label:"垂直",value:"vertical"},{label:"内联",value:"inline"}]},field:"componentProps.layout"}]);const t=((f=m[o])==null?void 0:f.config.attribute)??[];s.value=[{label:"组件ID",type:"input",field:"id",componentProps:{disabled:!0}},{label:"标签提示",type:"textarea",field:"suffix",componentProps:{disabled:!1}},...l,...t],o==="page"&&s.value.push({label:"画布宽度",type:"EInputSize",field:"canvas.width",editData:d},{label:"画布高度",type:"EInputSize",field:"canvas.height",editData:d})},{immediate:!0});function y(o,l,n,t=r.value){typeof n.onChange=="function"&&n.onChange({value:o,values:t,componentAttributes:s}),n.changeSync?c.setAttributeValue(o,l,t):e.nextTick(()=>{c.setAttributeValue(o,l,t)}),c.revoke.push(d.schemas,"编辑组件属性")}return(o,l)=>{var n;return e.openBlock(),e.createElementBlock("div",{class:"epic-attribute-view",key:(n=r.value)==null?void 0:n.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,t=>(e.openBlock(),e.createElementBlock("div",{key:t.field},[h(t)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["epic-attr-item",t.layout])},[e.createElementVNode("div",{class:"epic-attr-label",title:t.label},e.toDisplayString(t.label),9,g),e.createElementVNode("div",{class:e.normalizeClass(["epic-attr-input",{"block!":t.layout==="vertical"}])},[e.createVNode(e.unref(v._sfc_main),{componentSchema:b(t),"model-value":e.unref(c.getAttributeValue)(t.field,t.editData??r.value),"onUpdate:modelValue":u=>y(u,t.field,t,t.editData)},null,8,["componentSchema","model-value","onUpdate:modelValue"])],2)],2)):e.createCommentVNode("",!0)]))),128))])}}});exports.default=P;