ai-form-designer/dist/form-DDcrxGg9.cjs

vue3+adv的设计器,可视化开发页面表单

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),P=require("element-plus"),_={key:0,class:"form-main",style:{height:"100%"}},C=e.defineComponent({__name:"form",props:{componentSchema:{type:Object,require:!0,default:()=>({})}},setup(d,{expose:f}){var u,p;const r=d,h=e.inject("pageManager",{}),o=e.ref(null),c=e.inject("forms",{}),v=e.ref(!0),l=e.reactive({});h.addFormData(l,(p=(u=r.componentSchema)==null?void 0:u.componentProps)==null?void 0:p.name),e.provide("formData",l);function m(){return l}function s(t){Object.assign(l,t)}function g(){var t;return(t=o.value)==null?void 0:t.validate()}e.onMounted(async()=>{var t,a,n,i;if(((t=r.componentSchema)==null?void 0:t.type)==="form"&&c.value&&o.value){const S=((n=(a=r.componentSchema)==null?void 0:a.componentProps)==null?void 0:n.name)??((i=r.componentSchema)==null?void 0:i.name)??"default";return c.value[S]=o.value,o.value.getData=m,o.value.setData=s,!1}});const y=e.computed(()=>{const t=r.componentSchema.componentProps;let a=t.labelCol,n=t.wrapperCol;return t.labelLayout==="fixed"&&(a={style:`width:${typeof t.labelWidth=="number"?t.labelWidth+"px":t.labelWidth}`},n={style:"width:auto;flex:1"}),{...t,labelCol:a,wrapperCol:n}}),b=e.computed(()=>r.componentSchema.children??[]);return f({form:o,getData:m,setData:s,validate:g}),(t,a)=>v.value?(e.openBlock(),e.createElementBlock("div",_,[e.createVNode(e.unref(P.ElForm),e.mergeProps({ref_key:"form",ref:o,model:l},y.value,{style:{height:"100%"}}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"edit-node",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,n=>e.renderSlot(t.$slots,"node",{componentSchema:n})),256))])]),_:3},16,["model"])])):e.createCommentVNode("",!0)}});exports.default=C;