form-designer-xinyi/dist/index.cjs

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

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("./index-BXOkp5Wk.cjs"),e=require("vue"),t=require("./revoke-Bbm2vFx2.cjs");function R(){const{isDark:n}=x(),l=M.useToggle(n);return{isDark:n,toggleDark:l}}function I(){const n=e.ref(!1);return e.onMounted(()=>{A(n),q(n)}),e.watch(()=>n.value,()=>{n.value?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}),{isDark:n}}function A(n){var l=document.documentElement;l&&(l.classList.contains("dark")?n.value=!0:n.value=!1)}function q(n){var l=document.querySelector("html"),a=new MutationObserver(function(c){for(var i of c)if(i.type==="attributes"&&i.attributeName==="class"){const p=i.target;new Array(...p.classList).includes("dark")?n.value=!0:n.value=!1}});a.observe(l,{attributes:!0,attributeFilter:["class"]}),e.onUnmounted(()=>{a.disconnect()})}function T(){const n=e.ref(1),l=e.ref(!1),{isDark:a}=I(),{pressSpace:c,pressShift:i,pressCtrl:p}=P();return{canvasScale:n,pressSpace:c,pressShift:i,pressCtrl:p,disabledZoom:l,isDark:a}}const x=M.createSharedComposable(T);function P(){const n=e.ref(!1),l=e.ref(!1),a=e.ref(!1);return M.onKeyDown(" ",c=>{var i=c.target;["INPUT","TEXTAREA"].includes(i.tagName)||c.preventDefault(),n.value=!0}),M.onKeyUp(" ",()=>{n.value=!1}),M.onKeyDown("Shift",c=>{c.preventDefault(),l.value=!0}),M.onKeyUp("Shift",()=>{l.value=!1}),M.onKeyDown("Control",c=>{c.preventDefault(),a.value=!0}),M.onKeyUp("Control",()=>{a.value=!1}),{pressSpace:n,pressShift:l,pressCtrl:a}}function U(n){const{pressSpace:l}=x();let a=0,c=0;function i(d){var f;a=d.x,c=d.y,(f=d.dataTransfer)==null||f.setDragImage(document.createElement("div"),0,0)}function p(d){if(d.preventDefault(),!d.x||!d.y||!l.value)return;const f=d.x-a,h=d.y-c;a=d.x,c=d.y,n.value&&(n.value.scrollTop-=h,n.value.scrollLeft-=f)}function g(){l.value=!1}return{handleElementDragStart:i,handleElementDrag:p,handleElementDragEnd:g}}function K(n){const{pressCtrl:l,canvasScale:a,disabledZoom:c}=x();function i(p){if(!l.value||c.value)return;p.preventDefault();let g=0;p.deltaY<0?g=a.value+.05:g=a.value-.05,!(g>150||g<.5)&&(a.value=g)}return e.watch(()=>a.value,p=>{n.value&&!c.value&&(n.value.style.transform=`scale(${p})`)}),{handleZoom:i,canvasScale:a}}function H(n,l=16.66){let a;function c(){i(),a=window.setInterval(n,l)}function i(){window.clearInterval(a)}return{startTimedQuery:c,stopTimedQuery:i}}function L(n,l){let a=null;return(...c)=>{a&&clearTimeout(a),a=setTimeout(()=>{n.apply(this,c)},l)}}function N(){const n=e.ref({}),l=e.ref({}),a=e.ref(!1),c=e.ref([]);function i(o){return n.value[o]}function p(o,r){n.value[o]=r}function g(o){delete n.value[o]}function d(o,r=!1){const m=Object.entries(t.pluginManager.publicMethods).reduce((v,[y,s])=>(v[y]=s.handler,v),{});try{new Function(`const epic = this;${o}`).bind({...m,getComponent:i,find:i,defineExpose:f,publicMethods:m,pluginManager:t.pluginManager})()}catch(v){r&&console.error("[epic-desinger：自定义函数]异常：",v)}}function f(o){o!=null&&(l.value=o)}function h(o,...r){o==null||o.forEach(m=>{var v,y,s;if(m.type==="public"&&((v=t.pluginManager.publicMethods[m.methodName])==null||v.handler(...r)),m.type==="custom"&&((s=(y=l.value)[m.methodName])==null||s.call(y,...r)),m.type==="component"){(m.componentId!=null&&i(m.componentId))[m.methodName](...m.args?JSON.parse(m.args):r);return}})}function k(o=!0){a.value=o}function D(o){const r=t.findSchemas(o,()=>!0);c.value=r.map(m=>m.id)}return{componentInstances:n,funcs:l,isDesignMode:a,defaultComponentIds:c,getComponentInstance:i,find:i,addComponentInstance:p,removeComponentInstance:g,setMethods:d,doActions:h,setDesignMode:k,setDefaultComponentIds:D}}const O={key:0,class:"epic-loading-box"},Z={class:"epic-builder-main"},z={class:"epic-loading-box"},$=e.defineComponent({__name:"builder",props:{pageSchema:{},disabled:{type:Boolean}},emits:["ready"],setup(n,{expose:l,emit:a}){const c=t.loadAsyncComponent(()=>Promise.resolve().then(()=>require("./index-Da6i5WD2.cjs"))),i=N(),p=a,g=e.useSlots(),d=e.ref({}),f=e.ref(!1),h=n,k=e.reactive({schemas:[]});e.watch(()=>h.pageSchema,s=>{t.deepCompareAndModify(k,s)},{immediate:!0,deep:!0}),e.watch(()=>k.script,s=>{s&&s!==""&&i.setMethods(s,!0)},{immediate:!0}),e.provide("slots",g),e.provide("pageManager",i),e.provide("forms",d),e.provide("pageSchema",k),e.provide("disabled",e.computed(()=>h.disabled));function D(s="default"){return new Promise(async(S,C)=>{var E;if(!f.value){const _=e.watch(f,async()=>{_(),S(await D(s))});return}const w=(E=d.value)==null?void 0:E[s];if(!w)return C(`表单 [name=${s}] 不存在`),!1;const b=t.deepClone(await w.getData());S(b)})}function o(s="default"){return new Promise(async(S,C)=>{var b;if(!f.value){const E=e.watch(f,async()=>{E(),S(await o(s))});return}const w=(b=d.value)==null?void 0:b[s];if(!w)return C(`表单 [name=${s}] 不存在`),!1;try{await w.validate();const E=await w.getData();S(E)}catch(E){C(E)}})}function r(s,S="default"){var w;if(!f.value){const b=e.watch(f,()=>{b(),r(s,S)});return}const C=(w=d.value)==null?void 0:w[S];if(!C)return console.error(`表单 [name=${S}] 不存在`),!1;C.setData(s)}function m(s="default"){return new Promise(async(S,C)=>{var b;if(!f.value){const E=e.watch(f,async()=>{E(),S(await m(s))});return}const w=(b=d.value)==null?void 0:b[s];if(!w)return C(`表单 [name=${s}] 不存在`),!1;S(w)})}const{proxy:v}=e.getCurrentInstance();function y(){e.nextTick(()=>{f.value=!0,p("ready",i),v&&i.addComponentInstance("builder",v)})}return l({ready:f,getData:D,setData:r,validate:o,getFormInstance:m}),(s,S)=>e.unref(t.pluginManager).initialized.value?(e.openBlock(),e.createBlock(e.Suspense,{key:1,onResolve:y},{default:e.withCtx(()=>[e.createElementVNode("div",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.schemas,(C,w)=>(e.openBlock(),e.createBlock(e.unref(M._sfc_main),{key:w,componentSchema:C},null,8,["componentSchema"]))),128))])]),fallback:e.withCtx(()=>[e.createElementVNode("div",z,[e.createVNode(e.unref(c))])]),_:1})):(e.openBlock(),e.createElementBlock("div",O))}}),Q={class:"min-w-750px rounded"},X={class:"h-full rounded"},Y=e.defineComponent({__name:"index",setup(n,{expose:l}){const a=t.pluginManager.getComponent("monacoEditor"),c=t.pluginManager.getComponent("modal"),i=e.ref(null),p=e.ref(!1),g=e.ref(!1),d=e.ref({}),f=e.inject("pageSchema"),h=e.ref(null),k=e.ref("");function D(){g.value=!1}function o(){p.value=!1}function r(){p.value=!0,k.value=t.getUUID()}async function m(){try{const v=await h.value.validate();console.log("表单结果为：",v),d.value=JSON.stringify(v,null,2),e.nextTick(()=>{var y;(y=i.value)==null||y.setValue(d.value)}),g.value=!0}catch(v){typeof v=="string"&&alert(v+`\r
请添加表单组件后再尝试！`),console.error(v)}}return l({handleOpen:r}),(v,y)=>(e.openBlock(),e.createBlock(e.unref(c),{modelValue:p.value,"onUpdate:modelValue":y[1]||(y[1]=s=>p.value=s),title:"预览",class:"w-900px",width:"900px",onClose:o,onOk:m,okText:"输出结果"},{default:e.withCtx(()=>[e.createElementVNode("div",Q,[(e.openBlock(),e.createBlock(e.unref($),{key:k.value,ref_key:"kb",ref:h,"page-schema":e.unref(f)},null,8,["page-schema"])),e.createVNode(e.unref(c),{modelValue:g.value,"onUpdate:modelValue":y[0]||(y[0]=s=>g.value=s),title:"表单数据",class:"w-860px",width:"860px",onClose:D,onOk:D},{default:e.withCtx(()=>[e.createElementVNode("div",X,[e.createVNode(e.unref(a),{ref_key:"monacoEditorRef",ref:i,autoToggleTheme:"",class:"h-full editor","model-value":d.value},null,8,["model-value"])])]),_:1},8,["modelValue"])])]),_:1},8,["modelValue"]))}}),j={key:0,class:"epic-loading-box"},J={class:"epic-designer-main"},G={class:"epic-header-container"},W={class:"epic-loading-box"},ee=e.defineComponent({__name:"designer",props:{disabledZoom:{type:Boolean,default:!1},hiddenHeader:{type:Boolean,default:!1},lockDefaultSchemaEdit:{type:Boolean,default:!1},title:{default:"EpicDesigner默认项目"},defaultSchema:{default:()=>({schemas:[{type:"page",id:"root",label:"页面",children:[],componentProps:{style:{padding:"16px"}}}],script:`const { defineExpose, find } = epic;

function test (){
    console.log('test')
}

// 通过defineExpose暴露的函数或者属性
defineExpose({
 test
})`})}},emits:["ready","save","reset","toggleDeviceMode"],setup(n,{expose:l,emit:a}){const c=t.loadAsyncComponent(()=>Promise.resolve().then(()=>require("./index-n2IR3pLH.cjs"))),i=t.loadAsyncComponent(()=>Promise.resolve().then(()=>require("./index-fsDcHxrd.cjs"))),p=t.loadAsyncComponent(()=>Promise.resolve().then(()=>require("./index-BsV1DyDG.cjs"))),g=t.loadAsyncComponent(()=>Promise.resolve().then(()=>require("./index-BsH-8kV3.cjs"))),d=t.loadAsyncComponent(()=>Promise.resolve().then(()=>require("./index-Da6i5WD2.cjs"))),f=N(),h=n;f.setDesignMode(),f.setDefaultComponentIds(h.defaultSchema.schemas);const k=a,D=e.ref(null),o=e.reactive({checkedNode:null,hoverNode:null,disableHover:!1,matched:[]}),r=e.reactive({schemas:[],script:h.defaultSchema.script}),{disabledZoom:m}=x();e.watch(()=>h.disabledZoom,u=>{m.value=u},{immediate:!0}),e.watch(()=>r.script,u=>{u&&u!==""&&f.setMethods(u)},{immediate:!0}),e.provide("pageSchema",r),e.provide("pageManager",f),e.provide("designerProps",e.computed(()=>h)),e.provide("designer",{setCheckedNode:y,setHoverNode:s,setDisableHover:C,handleToggleDeviceMode:F,reset:E,state:o});function v(){r.schemas=t.deepClone(h.defaultSchema.schemas),y(r.schemas[0]),t.revoke.push(r.schemas,"初始化撤销功能")}async function y(u=r.schemas[0]){o.checkedNode=u,o.matched=t.getMatchedById(r.schemas,u.id)}async function s(u=null){var B;if(!u||o.disableHover)return o.hoverNode=null,!1;if((u==null?void 0:u.id)===((B=o.hoverNode)==null?void 0:B.id))return!1;o.hoverNode=u}function S(){e.nextTick(()=>{k("ready",{pageManager:f})})}async function C(u=!1){o.disableHover=u}function w(u){t.deepCompareAndModify(r,u)}function b(){return e.toRaw(r)}function E(){t.deepEqual(r.schemas,h.defaultSchema.schemas)&&r.script===h.defaultSchema.script||(t.deepCompareAndModify(r.schemas,h.defaultSchema.schemas),r.script=h.defaultSchema.script,y(r.schemas[0]),t.revoke.push(r.schemas,"重置操作"),k("reset",r))}function _(){k("save",e.toRaw(r))}function F(u){k("toggleDeviceMode",u)}function V(){D.value.handleOpen()}return v(),l({setData:w,getData:b,reset:E,preview:V}),(u,B)=>e.unref(t.pluginManager).initialized.value?(e.openBlock(),e.createBlock(e.Suspense,{key:1,onResolve:S},{default:e.withCtx(()=>[e.createElementVNode("div",J,[e.createElementVNode("div",G,[e.renderSlot(u.$slots,"header",{},()=>[h.hiddenHeader?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(c),{key:0,onPreview:V,onSave:_},{header:e.withCtx(()=>[e.renderSlot(u.$slots,"header-prefix")]),prefix:e.withCtx(()=>[e.renderSlot(u.$slots,"header-prefix")]),title:e.withCtx(()=>[e.renderSlot(u.$slots,"header-title")]),"right-prefix":e.withCtx(()=>[e.renderSlot(u.$slots,"header-right-prefix")]),"right-action":e.withCtx(()=>[e.renderSlot(u.$slots,"header-right-action")]),"right-suffix":e.withCtx(()=>[e.renderSlot(u.$slots,"header-right-suffix")]),_:3}))])]),e.createElementVNode("div",{class:e.normalizeClass(["epic-split-view-container",{"hidden-header":u.hiddenHeader}])},[e.createVNode(e.unref(i)),e.createVNode(e.unref(p)),e.createVNode(e.unref(g))],2),e.createVNode(Y,{ref_key:"previewRef",ref:D},null,512)])]),fallback:e.withCtx(()=>[e.createElementVNode("div",W,[e.createVNode(e.unref(d))])]),_:3})):(e.openBlock(),e.createElementBlock("div",j))}});exports.ENode=M._sfc_main;exports.PluginManager=t.PluginManager;exports.capitalizeFirstLetter=t.capitalizeFirstLetter;exports.convertKFormData=t.convertKFormData;exports.deepClone=t.deepClone;exports.deepCompareAndModify=t.deepCompareAndModify;exports.deepEqual=t.deepEqual;exports.findSchemaById=t.findSchemaById;exports.findSchemaInfoById=t.findSchemaInfoById;exports.findSchemas=t.findSchemas;exports.generateNewSchema=t.generateNewSchema;exports.getAttributeValue=t.getAttributeValue;exports.getFormFields=t.getFormFields;exports.getFormSchemas=t.getFormSchemas;exports.getMatchedById=t.getMatchedById;exports.getUUID=t.getUUID;exports.loadAsyncComponent=t.loadAsyncComponent;exports.mapSchemas=t.mapSchemas;exports.pluginManager=t.pluginManager;exports.recursionConvertedNode=t.recursionConvertedNode;exports.revoke=t.revoke;exports.setAttributeValue=t.setAttributeValue;exports.useRevoke=t.useRevoke;exports.EBuilder=$;exports.EDesigner=ee;exports.debounce=L;exports.getDarkState=A;exports.useDark=I;exports.useElementDrag=U;exports.useElementZoom=K;exports.useKeyPress=P;exports.usePageManager=N;exports.useShareStore=x;exports.useStore=T;exports.useTheme=R;exports.useTimedQuery=H;