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