json-schema-form-vue3/dist/json-schema-form-vue3.umd.js

A Vue 3 component for editing JSON Schema with nested object and array support

(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@element-plus/icons-vue")):typeof define=="function"&&define.amd?define(["exports","vue","@element-plus/icons-vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.JsonSchemaFormVue3={},p.Vue,p.ElementPlusIconsVue))})(this,function(p,e,h){"use strict";const y={class:"jsf-json-schema-form"},E={key:0,class:"jsf-top-button"},U={class:"jsf-schema-container"},q={key:0,class:"jsf-empty-state"},F={class:"jsf-property-fields"},O={class:"jsf-action-buttons"},P={key:0,class:"jsf-array-items"},x={class:"jsf-property-fields"},J={key:0,class:"jsf-nested-schema"},T={key:1,class:"jsf-nested-schema"},k=((V,b)=>{const i=V.__vccOpts||V;for(const[d,a]of b)i[d]=a;return i})(e.defineComponent({name:"JsonSchemaForm",__name:"main",props:{modelValue:{},isRootLevel:{type:Boolean,default:!0}},emits:["update:model-value"],setup(V,{emit:b}){const i=V,d=b,a=e.ref({}),B=["string","number","integer","object","array","boolean","null"];e.onMounted(()=>{a.value=Object.keys(i.modelValue.properties||{}).reduce((o,l)=>(o[l]=l,o),{})}),e.watch(()=>i.modelValue,o=>{const l={};for(const n in o.properties)Object.prototype.hasOwnProperty.call(o.properties,n)&&(!a.value[n]||a.value[n]!==n?l[n]=n:l[n]=a.value[n]);Object.keys(a.value).forEach(n=>{let s;for(const m in l)if(l[m]===a.value[n]){s=m;break}o.properties&&(o.properties[n]||s&&o.properties[s])&&a.value[n]});const t={};Object.keys(o.properties||{}).forEach(n=>{t[n]=a.value[n]||n}),a.value=t},{deep:!0,immediate:!0});const I=o=>{var l;return((l=i.modelValue.required)==null?void 0:l.includes(o))||!1},C=o=>{var s;const l={...i.modelValue};let t;o&&((s=l.properties)!=null&&s[o])?(l.properties[o].properties||(l.properties[o].properties={}),t=l.properties[o].properties):(l.properties||(l.properties={}),t=l.properties);const n=`property${Object.keys(t).length+1}`;t[n]={type:"string",title:""},a.value[n]=n,d("update:model-value",l)},L=o=>{var s;const l={...i.modelValue};if(!l.properties)return;const{[o]:t,...n}=l.properties;l.properties=n,l.required=((s=l.required)==null?void 0:s.filter(m=>m!==o))||[],delete a.value[o],d("update:model-value",l)},R=o=>{var m;const l=a.value[o];if(o===l||l.trim()===""){a.value[o]=o;return}const t={...i.modelValue};if(!t.properties)return;const{[o]:n,...s}=t.properties;t.properties={...s,[l]:n},t.required=(m=t.required)==null?void 0:m.map(_=>_===o?l:_),delete a.value[o],a.value[l]=l,d("update:model-value",t)},A=(o,l)=>{const t={...i.modelValue};t.properties&&(t.properties={...t.properties,[o]:{...t.properties[o],type:l,...l==="object"&&{properties:{}},...l==="array"&&{items:{type:"string"}}}},d("update:model-value",t))},M=(o,l)=>{const t={...i.modelValue};t.properties&&(t.properties={...t.properties,[o]:{...t.properties[o],title:l}},d("update:model-value",t))},$=(o,l)=>{const t={...i.modelValue};t.properties&&(t.properties={...t.properties,[o]:l},d("update:model-value",t))},D=(o,l)=>{const t={...i.modelValue},n=new Set(t.required||[]);l?n.add(o):n.delete(o),t.required=Array.from(n),d("update:model-value",t)},z=(o,l)=>{const t={...i.modelValue};t.properties&&(t.properties={...t.properties,[o]:{...t.properties[o],items:{...t.properties[o].items,type:l,...l==="object"&&{properties:{}}}}},d("update:model-value",t))},G=(o,l)=>{const t={...i.modelValue};if(!t.properties)return;const n=t.properties[o];n.items?n.items={...n.items,title:l}:n.items={type:"string",title:l},t.properties={...t.properties,[o]:n},d("update:model-value",t)},H=(o,l)=>{const t={...i.modelValue};t.properties&&(t.properties={...t.properties,[o]:{...t.properties[o],items:l}},d("update:model-value",t))};return(o,l)=>{const t=e.resolveComponent("el-button"),n=e.resolveComponent("el-input"),s=e.resolveComponent("el-form-item"),m=e.resolveComponent("el-checkbox"),_=e.resolveComponent("el-option"),w=e.resolveComponent("el-select"),S=e.resolveComponent("JsonSchemaForm"),Q=e.resolveComponent("el-form");return e.openBlock(),e.createElementBlock("div",y,[e.createVNode(Q,{ref:"formRef"},{default:e.withCtx(()=>[o.isRootLevel&&o.modelValue.properties&&Object.keys(o.modelValue.properties).length>0?(e.openBlock(),e.createElementBlock("div",E,[e.createVNode(t,{type:"primary",icon:e.unref(h.Plus),circle:"",onClick:l[0]||(l[0]=()=>C())},null,8,["icon"])])):e.createCommentVNode("",!0),e.createElementVNode("div",U,[!o.modelValue.properties||Object.keys(o.modelValue.properties).length===0?(e.openBlock(),e.createElementBlock("div",q,[e.createVNode(t,{type:"primary",icon:e.unref(h.Plus),circle:"",onClick:l[1]||(l[1]=()=>C())},null,8,["icon"])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.modelValue.properties,(u,c)=>{var g;return e.openBlock(),e.createElementBlock("div",{key:c,class:"jsf-property-row"},[e.createElementVNode("div",F,[e.createVNode(s,{label:"属性"},{default:e.withCtx(()=>[e.createVNode(n,{modelValue:a.value[c],"onUpdate:modelValue":r=>a.value[c]=r,onBlur:r=>R(c)},null,8,["modelValue","onUpdate:modelValue","onBlur"])]),_:2},1024),e.createVNode(s,{label:"必填"},{default:e.withCtx(()=>[e.createVNode(m,{"model-value":I(c),"onUpdate:modelValue":r=>D(c,r)},null,8,["model-value","onUpdate:modelValue"])]),_:2},1024),e.createVNode(s,{label:"类型"},{default:e.withCtx(()=>[e.createVNode(w,{"model-value":u.type,"onUpdate:modelValue":r=>A(c,r)},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(B,r=>e.createVNode(_,{key:r,label:r,value:r},null,8,["label","value"])),64))]),_:2},1032,["model-value","onUpdate:modelValue"])]),_:2},1024),e.createVNode(s,{label:"标题"},{default:e.withCtx(()=>[e.createVNode(n,{"model-value":u.title,"onUpdate:modelValue":r=>M(c,r)},null,8,["model-value","onUpdate:modelValue"])]),_:2},1024),e.createElementVNode("div",O,[e.createVNode(t,{type:"danger",icon:e.unref(h.Delete),circle:"",onClick:r=>L(c)},null,8,["icon","onClick"]),u.type==="object"?(e.openBlock(),e.createBlock(t,{key:0,type:"primary",icon:e.unref(h.Plus),circle:"",onClick:()=>C(c)},null,8,["icon","onClick"])):e.createCommentVNode("",!0)])]),u.type==="array"?(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("div",x,[e.createVNode(s,{label:"数组项"},{default:e.withCtx(()=>[e.createVNode(n,{value:"items",disabled:""})]),_:1}),e.createVNode(s,{label:"必填"},{default:e.withCtx(()=>[e.createVNode(m,{disabled:""})]),_:1}),e.createVNode(s,{label:"类型"},{default:e.withCtx(()=>{var r;return[e.createVNode(w,{"model-value":(r=u.items)==null?void 0:r.type,"onUpdate:modelValue":f=>z(c,f)},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(B,f=>e.createVNode(_,{key:f,label:f,value:f},null,8,["label","value"])),64))]),_:2},1032,["model-value","onUpdate:modelValue"])]}),_:2},1024),e.createVNode(s,{label:"标题"},{default:e.withCtx(()=>{var r;return[e.createVNode(n,{"model-value":(r=u.items)==null?void 0:r.title,"onUpdate:modelValue":f=>G(c,f)},null,8,["model-value","onUpdate:modelValue"])]}),_:2},1024)]),((g=u.items)==null?void 0:g.type)==="object"?(e.openBlock(),e.createElementBlock("div",J,[e.createVNode(S,{"model-value":u.items,"onUpdate:modelValue":r=>H(c,r),"is-root-level":!1},null,8,["model-value","onUpdate:modelValue"])])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),u.type==="object"?(e.openBlock(),e.createElementBlock("div",T,[e.createVNode(S,{"model-value":u,"onUpdate:modelValue":r=>$(c,r),"is-root-level":!1},null,8,["model-value","onUpdate:modelValue"])])):e.createCommentVNode("",!0)])}),128))])]),_:1},512)])}}}),[["__scopeId","data-v-d63f4d47"]]);k.name="JsonSchemaForm";const j=V=>{V.component("JsonSchemaForm",k)},N={install:j,component:k};p.JsonSchemaForm=k,p.default=N,p.install=j,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});