epic-designer/dist/ui/naiveUi/form/form.vue2.cjs

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

"use strict";const e=require("vue"),P=require("naive-ui/lib/form"),k={key:0,class:"form-main",style:{height:"100%"}},j=e.defineComponent({__name:"form",props:{componentSchema:{default:()=>({}),require:!0,type:Object}},setup(d,{expose:f}){var l,p;const n=d,v=e.inject("pageManager",{}),o=e.ref(null),m=e.inject("forms",{}),h=e.ref(!0),r=e.reactive({});e.provide("formData",r),v.addFormData(r,(p=(l=n.componentSchema)==null?void 0:l.componentProps)==null?void 0:p.name);function s(){return r}function u(t){Object.assign(r,t)}function g(){var t;return(t=o.value)==null?void 0:t.validate()}function S(){var t;return(t=o.value)==null?void 0:t.restoreValidation()}e.onMounted(async()=>{var t,c,a,i;if(((t=n.componentSchema)==null?void 0:t.type)==="form"&&m.value&&o.value){const D=((a=(c=n.componentSchema)==null?void 0:c.componentProps)==null?void 0:a.name)??((i=n.componentSchema)==null?void 0:i.name)??"default";m.value[D]=o.value,o.value.getData=s,o.value.setData=u}});const _=e.computed(()=>n.componentSchema.componentProps),y=e.computed(()=>n.componentSchema.children??[]);return f({clearValidate:S,form:o,getData:s,setData:u,validate:g}),(t,c)=>h.value?(e.openBlock(),e.createElementBlock("div",k,[e.createVNode(e.unref(P.NForm),e.mergeProps({ref_key:"form",ref:o,model:r},_.value,{style:{height:"100%"}}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"edit-node",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,a=>e.renderSlot(t.$slots,"node",{componentSchema:a})),256))])]),_:3},16,["model"])])):e.createCommentVNode("",!0)}});module.exports=j;