form-designer-xinyi
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 18 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),x=require("./revoke-Bbm2vFx2.cjs"),I=require("./index.cjs"),A=require("./index-Df9Drsqp.cjs"),q=require("./icon.vue_vue_type_script_setup_true_lang-CXgVOUsT.cjs"),G=require("./vuedraggable.umd--vzlsgiq.cjs"),ee={class:"epic-widget-action-item whitespace-nowrap"},te={key:0,class:"flex"},ne=e.defineComponent({__name:"previewWidgets",setup(j,{expose:N}){const y=e.inject("pageManager",{}),g=e.inject("pageSchema"),d=e.inject("designer"),f=e.inject("designerProps"),i=e.ref(null),k=e.ref(null),_=e.ref(null),B=e.ref(!1),r=e.ref(!1),m=e.ref(!0),s=e.ref("top"),{canvasScale:u,disabledZoom:h}=I.useShareStore();let o=null;const O=e.computed(()=>{const t=d.state.checkedNode;return!(!(t!=null&&t.id)||f.value.lockDefaultSchemaEdit&&y.defaultComponentIds.value.includes(t==null?void 0:t.id))}),V=e.computed(()=>{var w,S,C,v,M,L;const t=y.componentInstances.value,p=(w=d.state.checkedNode)==null?void 0:w.id;if((C=(S=d.state.checkedNode)==null?void 0:S.componentProps)!=null&&C.hidden)return null;const b=x.pluginManager.getComponentConfingByType((v=d.state.checkedNode)==null?void 0:v.type)??null;if(!p||!(t!=null&&t[p]))return null;if(b!=null&&b.defaultSchema.input&&((M=d.state.checkedNode)==null?void 0:M.noFormItem)!==!0)return(L=t[p+"formItem"])==null?void 0:L.$el;const a=t[p];return!a||!a.$el||!(a.$el instanceof Element)||a.$el.nodeName==="#text"||!a.$el.getBoundingClientRect?null:a.$el}),E=e.computed(()=>{var w,S,C,v;const t=y.componentInstances.value,p=(w=d.state.hoverNode)==null?void 0:w.id,b=x.pluginManager.getComponentConfingByType((S=d.state.hoverNode)==null?void 0:S.type)??null;if(!p||!(t!=null&&t[p]))return null;if(b!=null&&b.defaultSchema.input&&((C=d.state.hoverNode)==null?void 0:C.noFormItem)!==!0)return(v=t[p+"formItem"])==null?void 0:v.$el;const a=t[p];return!((a==null?void 0:a.$el)instanceof Element)||(a==null?void 0:a.$el.nodeName)==="#text"?null:a==null?void 0:a.$el}),{mutationObserver:$,observerConfig:F}=Z(T),{startTimedQuery:H,stopTimedQuery:z}=I.useTimedQuery(T);e.watch(()=>V.value,t=>{if(t){B.value=!0,$.observe(t,F);const p=t.parentNode;p&&(p.ondragstart=()=>{m.value=!1,H()},p.ondragend=()=>{m.value=!0,z()}),T()}else B.value=!1});const{mutationObserver:P,observerConfig:l}=Z(J);e.watch(()=>E.value,t=>{t&&(P.observe(t,l),J())});let n=0;e.watch(()=>{var t;return(t=d.state.hoverNode)==null?void 0:t.id},t=>{if(t){r.value=!0,clearTimeout(n);return}n=setTimeout(()=>{r.value=!1},300)});let c=0,R=0;function T(){const t=V.value;if(!t||!o)return;const{top:p,left:b}=o==null?void 0:o.getBoundingClientRect(),{top:a,left:w,width:S,height:C}=t.getBoundingClientRect(),v=h.value?1:u.value,M=a-p+((o==null?void 0:o.scrollTop)??0)*v,L=w-b+((o==null?void 0:o.scrollLeft)??0)*v,D=C/v;i.value&&(i.value.style.width=`${S/v}px`,i.value.style.height=`${D}px`,i.value.style.top=`${M/v}px`,i.value.style.left=`${L/v}px`,U(M,L)),_.value&&(M<45&&D<100?(_.value.style.top="",_.value.style.bottom="-30px",_.value.style["border-radius"]="0px 0px 4px 4px",s.value="bottom"):M<45?(_.value.style.top="0px",_.value.style["border-radius"]="0px 0px 4px 0",s.value="center"):(_.value.style.top="-30px",_.value.style["border-radius"]="4px 4px 0px 0px",s.value="top"))}function U(t,p){const b=V.value;if(!o||!b)return;const a=o.getBoundingClientRect(),{width:w}=b.getBoundingClientRect(),S=h.value?1:u.value,C=t/S-a.top;let v=p/S-a.left+w/S;v<a.width&&(v=0);const M=o.scrollTop-a.height/3+60,L=o.scrollTop+a.height/3*2,D=o.scrollLeft-a.width+200,W=o.scrollLeft+a.width-200;Math.abs(C-c)<10&&Math.abs(v-R)<10||(c=C,R=v,!(C>M&&C<L&&v>D&&v<W)&&(o.scrollTop=C,o.scrollLeft=v))}function J(){var D,W;const t=E.value;if(!t)return;const{top:p,left:b}=(o==null?void 0:o.getBoundingClientRect())??{top:0,left:0},{top:a,left:w,width:S,height:C}=((D=t.getBoundingClientRect)==null?void 0:D.call(t))??((W=t.nextElementSibling)==null?void 0:W.getBoundingClientRect()),v=h.value?1:u.value,M=a-p+((o==null?void 0:o.scrollTop)??0)*v,L=w-b+((o==null?void 0:o.scrollLeft)??0)*v;k.value&&(k.value.style.width=`${S/v}px`,k.value.style.height=`${C/v}px`,k.value.style.top=`${M/v}px`,k.value.style.left=`${L/v}px`)}function Z(t){const p=window.MutationObserver,b={childList:!0,attributes:!0,subtree:!0};return{mutationObserver:new p(t),observerConfig:b}}function K(){var S;const t=x.findSchemaInfoById(g.schemas,((S=d.state.checkedNode)==null?void 0:S.id)??"root");if(!t)return!1;const{list:p,schema:b,index:a}=t,w=x.generateNewSchema(b);p.splice(a+1,0,w),d.setCheckedNode(w),x.revoke.push(g.schemas,"复制组件")}function X(){var w;const t=x.findSchemaInfoById(g.schemas,((w=d.state.checkedNode)==null?void 0:w.id)??"root");if(!t)return!1;let{list:p,schema:b,index:a}=t;p.splice(a,1),a===p.length&&a--,d.setCheckedNode(p[a]),x.revoke.push(g.schemas,"删除组件")}function Y(t){o=t,o==null||o.addEventListener("scroll",()=>{T()}),A.useResizeObserver(V,T),A.useResizeObserver(E,J)}return N({handleInit:Y}),(t,p)=>{var b,a,w,S,C;return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.withDirectives(e.createElementVNode("div",{ref_key:"selectorRef",ref:i,class:e.normalizeClass(["epic-checked-widget absolute pointer-events-none z-20",s.value+" "+(m.value?"transition-all":"")])},[e.createElementVNode("div",{class:"epic-widget-action-box",ref_key:"actionBoxRef",ref:_},[e.createElementVNode("div",ee,e.toDisplayString((a=e.unref(x.pluginManager).getComponentConfingByType(((b=e.unref(d).state.checkedNode)==null?void 0:b.type)??""))==null?void 0:a.defaultSchema.label),1),O.value?(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("div",{title:"复制",class:"epic-widget-action-item pointer-events-auto",onClick:K},[e.createVNode(e.unref(q._sfc_main),{name:"icon-fuzhi3"})]),e.createElementVNode("div",{title:"删除",class:"epic-widget-action-item pointer-events-auto",onClick:X},[e.createVNode(e.unref(q._sfc_main),{name:"icon-shanchu1"})])])):e.createCommentVNode("",!0)],512)],2),[[e.vShow,B.value&&((w=e.unref(d).state.checkedNode)==null?void 0:w.id)!=="root"]]),e.withDirectives(e.createElementVNode("div",{ref_key:"hoverWidgetRef",ref:k,class:"epic-hover-widget absolute transition-all pointer-events-none z-998"},null,512),[[e.vShow,r.value&&((S=e.unref(d).state.checkedNode)==null?void 0:S.id)!==((C=e.unref(d).state.hoverNode)==null?void 0:C.id)]])],64)}}}),oe=e.defineComponent({name:"EditNodeItem",__name:"editNodeItem",props:{schemas:{}},emits:["update:schemas"],setup(j,{emit:N}){const y=e.inject("designer"),g=e.inject("pageSchema"),d=j,f=N,i=e.computed({get(){return d.schemas},set(m){f("update:schemas",m)}});function k(m){y.setCheckedNode(i.value[m]),y.setDisableHover(!0)}function _(){y.setDisableHover(),x.revoke.push(g.schemas,"拖拽组件")}function B(){x.revoke.push(g.schemas,"插入组件")}function r(m){var s;return m.type==="page"||(s=x.pluginManager.getComponentConfingByType(m.type).editConstraints)!=null&&s.immovable?"unmover-item":"draggable-item"}return(m,s)=>(e.openBlock(),e.createBlock(e.unref(G.draggable),e.mergeProps({modelValue:i.value,"onUpdate:modelValue":s[0]||(s[0]=u=>i.value=u),"item-key":"id","component-data":{type:"transition-group"},class:"epic-draggable-range"},{animation:200,group:"edit-draggable",handle:".draggable-item",ghostClass:"moveing"},{onStart:s[1]||(s[1]=u=>k(u.oldIndex)),onEnd:s[2]||(s[2]=u=>_()),onAdd:s[3]||(s[3]=u=>{k(u.newIndex),B()})}),{item:e.withCtx(({element:u,index:h})=>[(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["widget-box",r(u)]),key:h},[e.createVNode(Q,{schema:u},null,8,["schema"])],2))]),_:1},16,["modelValue"]))}}),Q=e.defineComponent({name:"ENodeItem",__name:"nodeItem",props:{schema:{},name:{}},setup(j){const N=e.useAttrs(),y=e.inject("designer"),g=e.inject("pageManager",{}),d=e.ref(null);e.provide("nodeAttrs",N);const f=j,i=e.computed(()=>{var h,o,O,V,E;const r=g.componentInstances.value,m=(h=f.schema)==null?void 0:h.id,s=x.pluginManager.getComponentConfingByType((o=f.schema)==null?void 0:o.type)??null;if(!m||!(r!=null&&r[m]))return null;if(s!=null&&s.defaultSchema.input&&((O=f.schema)==null?void 0:O.noFormItem)!==!0)return(V=r[m+"formItem"])==null?void 0:V.$el;const u=r[m];return((E=u==null?void 0:u.$el)==null?void 0:E.nodeName)==="#text"?null:u==null?void 0:u.$el});e.watch(()=>i.value,r=>{r==null||r.addEventListener("click",k,!1),r==null||r.addEventListener("mouseover",_,!1),r==null||r.addEventListener("mouseout",B,!1)}),e.onUnmounted(()=>{var r,m,s;(r=i.value)==null||r.removeEventListener("click",k,!1),(m=i.value)==null||m.removeEventListener("mouseover",_,!1),(s=i.value)==null||s.removeEventListener("mouseout",B,!1)});function k(r){r.stopPropagation(),y.setCheckedNode(f.schema)}function _(r){f.schema.type!=="page"&&(r.stopPropagation(),y.setHoverNode(f.schema))}function B(r){r.stopPropagation(),y.setHoverNode(null)}return(r,m)=>{var u,h;const s=e.resolveComponent("ENodeItem");return e.openBlock(),e.createBlock(e.unref(A._sfc_main),{ref_key:"nodeRef",ref:d,componentSchema:f.schema},e.createSlots({_:2},[(h=(u=e.unref(x.pluginManager).getComponentConfingByType(f.schema.type))==null?void 0:u.editConstraints)!=null&&h.childImmovable?{name:"edit-node",fn:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.schema.children,o=>(e.openBlock(),e.createBlock(s,{key:o.id,schema:o},null,8,["schema"]))),128))]),key:"0"}:{name:"edit-node",fn:e.withCtx(()=>[f.schema.children?(e.openBlock(),e.createBlock(oe,{key:0,schemas:f.schema.children,"onUpdate:schemas":m[0]||(m[0]=o=>f.schema.children=o)},null,8,["schemas"])):e.createCommentVNode("",!0)]),key:"1"}]),1032,["componentSchema"])}}}),le={class:"min-w-750px rounded h-full"},ae=e.defineComponent({__name:"previewJson",setup(j,{expose:N}){const y=x.pluginManager.getComponent("modal"),g=x.pluginManager.getComponent("monacoEditor"),d={theme:"vs-light",selectOnLineNumbers:!0,minimap:{enabled:!1},readOnly:!0},f=e.ref(null),i=e.ref(!1),k=e.inject("pageSchema");function _(){i.value=!1}function B(){i.value=!0,f.value?f.value.setValue(JSON.stringify(k,null,2)):setTimeout(()=>{B()},300)}function r(m="epic-data.json"){let s="data:text/json;charset=utf-8,";s+=JSON.stringify(k,null,2);var u=encodeURI(s),h=document.createElement("a");h.setAttribute("href",u),h.setAttribute("download",m),h.click()}return N({handleOpen:B}),(m,s)=>(e.openBlock(),e.createBlock(e.unref(y),{modelValue:i.value,"onUpdate:modelValue":s[0]||(s[0]=u=>i.value=u),title:"查看数据",class:"w-900px",width:"900px",onClose:_,onOk:r,okText:"导出数据"},{default:e.withCtx(()=>[e.createElementVNode("div",le,[e.createVNode(e.unref(g),{ref_key:"monacoEditorRef",ref:f,class:"editor h-full",autoToggleTheme:"",config:d,language:"json"},null,512)])]),_:1},8,["modelValue"]))}}),re={class:"epic-edit-toolbar flex items-center justify-between px-4"},se={class:"flex-1 h-full flex items-center"},ie=["title","onClick"],ce={class:"flex-1 h-full flex items-center justify-center"},ue=["title","onClick"],de={class:"flex-1 h-full flex items-center justify-end"},fe={key:0,class:"flex items-center ml-12px"},me={class:"pr-8px w-82px cursor-pointer"},pe={class:"w-90px cursor-pointer"},ve=e.defineComponent({__name:"toolbar",setup(j){const N=x.pluginManager.getComponent("slider"),y=x.pluginManager.getComponent("select"),{canvasScale:g,disabledZoom:d}=I.useShareStore(),f=e.ref("pc"),i=e.inject("pageSchema"),k=e.inject("designer"),_=e.ref(null),B=[{icon:"icon-a-diannaotoubu",title:"pc",key:"pc"},{icon:"icon-a-pingbantoubu",title:"平板",key:"pad"},{icon:"icon-a-shoujitoubu",title:"手机",key:"mobile"}],r=x.revoke.recordList,m=x.revoke.undoList,s=e.computed(()=>[{icon:"icon-daima1",title:"查看数据",on:()=>$()},{icon:"icon-shangchuan1",title:"导入数据",on:F},{icon:"icon-shanchu1",title:"清空",on:E},{icon:"icon-chexiao2x",title:"撤销",on:O,disabled:!r.value.length},{icon:"icon-fanhui2x",title:"重做",on:V,disabled:!m.value.length}]),u=e.ref(null),h=e.computed({get(){return`${(g.value*100).toFixed(0)}%`},set(l){g.value=Number(l)}}),o=[{label:"60%",value:"0.6"},{label:"80%",value:"0.8"},{label:"100%",value:"1.0"},{label:"120%",value:"1.2"},{label:"140%",value:"1.4"}];function O(){const l=x.revoke.undo();l&&(x.deepCompareAndModify(i.schemas,l),k.setCheckedNode(i.schemas[0]))}function V(){const l=x.revoke.redo();l&&(x.deepCompareAndModify(i.schemas,l),k.setCheckedNode(i.schemas[0]))}function E(){k.reset()}function $(){_.value.handleOpen()}function F(){var l;(l=u.value)==null||l.click()}function H(l){var R;const n=(R=l.target.files)==null?void 0:R[0];if(!n)return;l.target.value=null;const c=new FileReader;c.readAsText(n),c.onload=T=>{var U;z((U=T.target)==null?void 0:U.result)}}function z(l){try{let n=JSON.parse(l??"");n.schemas||(n=x.convertKFormData(n)),x.deepCompareAndModify(i,n)}catch(n){console.error(n)}}function P(l){k.handleToggleDeviceMode(l),f.value=l;const n={pc:{},pad:{width:"800px",mode:l},mobile:{width:"420px",mode:l}};i.canvas=n[l]}return(l,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",re,[e.createElementVNode("div",se,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,(c,R)=>(e.openBlock(),e.createElementBlock("div",{title:c.title,class:e.normalizeClass(["epic-action-item h-90% px-10px flex items-center cursor-pointer",{disabled:c.disabled}]),key:R,onClick:c.on},[e.createVNode(e.unref(q._sfc_main),{name:c.icon},null,8,["name"])],10,ie))),128))]),e.withDirectives(e.createElementVNode("input",{type:"file",ref_key:"fileRef",ref:u,accept:".json,.txt",onChange:H},null,544),[[e.vShow,!1]]),e.createElementVNode("div",ce,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(B,c=>e.createElementVNode("div",{title:c.title,class:e.normalizeClass(["epic-device-item h-90% px-10px flex items-center cursor-pointer",{checked:c.key===f.value}]),key:c.key,onClick:R=>P(c.key)},[e.createVNode(e.unref(q._sfc_main),{name:c.icon},null,8,["name"])],10,ue)),64))]),e.createElementVNode("div",de,[e.unref(d)?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",fe,[e.createElementVNode("div",me,[e.createVNode(e.unref(y),{value:h.value,"onUpdate:value":n[0]||(n[0]=c=>h.value=c),modelValue:h.value,"onUpdate:modelValue":n[1]||(n[1]=c=>h.value=c),options:o,size:"small"},null,8,["value","modelValue"])]),e.createElementVNode("div",pe,[e.createVNode(e.unref(N),{min:.6,max:1.4,step:.01,tooltip:!1,value:e.unref(g),"onUpdate:value":n[2]||(n[2]=c=>e.isRef(g)?g.value=c:null),modelValue:e.unref(g),"onUpdate:modelValue":n[3]||(n[3]=c=>e.isRef(g)?g.value=c:null)},null,8,["value","modelValue"])])]))])]),e.createVNode(ae,{ref_key:"previewJson",ref:_},null,512)],64))}}),he={class:"h-full flex flex-col relative"},ge=["draggable"],xe=e.defineComponent({__name:"editScreenContainer",setup(j){const N=e.inject("pageSchema"),y=e.ref(null),g=e.ref(null),d=e.ref(null),{pressSpace:f,disabledZoom:i}=I.useShareStore(),{handleElementDragStart:k,handleElementDrag:_,handleElementDragEnd:B}=I.useElementDrag(y),{width:r,height:m}=A.useElementSize(y),{canvasScale:s,handleZoom:u}=I.useElementZoom(g);let h=0,o=0;const O=e.ref({}),V=e.ref({}),E=e.ref({}),$=e.shallowRef({width:0,height:0});e.watch(()=>{var l,n;return{width:(l=N.canvas)==null?void 0:l.width,height:(n=N.canvas)==null?void 0:n.height}},H),e.watch(E,()=>{e.nextTick(F)}),e.onMounted(()=>{var l,n;H({width:(l=N.canvas)==null?void 0:l.width,height:(n=N.canvas)==null?void 0:n.height})});function F(){const l=e.unref(d);l&&($.value={width:l.clientWidth,height:l.clientHeight})}function H({width:l,height:n}){E.value={width:l??"0",height:n??"0"}}A.watchOnce(r,z),e.watch($,z);function z(){if(i.value){V.value={width:h+"px",height:o+"px",transform:"translate(0px, 20px)"};return}let l=$.value.width||h,n=$.value.height||o;O.value={width:r.value+l+"px",height:m.value+n+"px"},V.value={width:l+"px",height:n+"px"},P()}function P(){e.nextTick(()=>{var T;let l=$.value.width||h;const c=($.value.height||o)/2,R=l/2;(T=y.value)==null||T.scrollTo(R,c)})}return A.useResizeObserver(y,([{contentRect:l}])=>{if(h=l.width-60,o=l.height-80,!i.value)if($.value.width===0)s.value=1;else{const n=(h-20)/$.value.width;s.value=n<1.2?n:s.value}I.debounce(z,50)()}),(l,n)=>(e.openBlock(),e.createElementBlock("div",he,[e.createVNode(ve),e.createElementVNode("div",{ref_key:"editScreenContainerRef",ref:y,class:e.normalizeClass(["flex-1 overflow-auto overflow-y-hidden epic-edit-screen-container",{"cursor-grab":e.unref(f)}]),draggable:e.unref(f),onWheel:n[0]||(n[0]=(...c)=>e.unref(u)&&e.unref(u)(...c)),onDragstart:n[1]||(n[1]=(...c)=>e.unref(k)&&e.unref(k)(...c)),onDragend:n[2]||(n[2]=(...c)=>e.unref(B)&&e.unref(B)(...c)),onDrag:n[3]||(n[3]=(...c)=>e.unref(_)&&e.unref(_)(...c))},[e.createElementVNode("div",{id:"canvasContainer",class:"flex items-center justify-center",style:e.normalizeStyle(O.value)},[e.createElementVNode("div",{ref_key:"draggableElRef",ref:g,class:"transition-all"},[e.createElementVNode("div",{class:e.normalizeClass({"pointer-events-none":e.unref(f)}),style:e.normalizeStyle(V.value)},[e.renderSlot(l.$slots,"default")],6)],512)],4)],42,ge),e.createElementVNode("div",{ref_key:"sizeBoxRef",ref:d,class:"absolute op-0 pointer-events-none",style:e.normalizeStyle(E.value)},null,4)]))}}),ye={class:"epic-edit-canvas"},ke=e.defineComponent({__name:"index",setup(j){const N=e.ref(null),y=e.ref(null),g=e.inject("pageSchema"),d=e.computed(()=>g.schemas[0]),f=e.computed(()=>({width:"100%",height:"100%"}));return e.onMounted(()=>{var i;(i=y.value)==null||i.handleInit(N.value)}),(i,k)=>(e.openBlock(),e.createElementBlock("section",ye,[e.createVNode(xe,null,{default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"epicEditRangeRef",ref:N,class:"epic-edit-range rounded-md overflow-auto relative",style:e.normalizeStyle(f.value)},[e.createVNode(Q,{schema:d.value},null,8,["schema"]),e.createVNode(ne,{ref_key:"ePreviewWidgetsRef",ref:y},null,512)],4)]),_:1})]))}});exports.default=ke;