epic-designer-gold 1.0.1 → 1.0.2

package/dist/index-B4ido7VJ.cjs

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

package/dist/index-B72l3XQl.js

@@ -0,0 +1,453 @@
+import { c as _ } from "./_commonjsHelpers-BVfed4GL.js";
+import { r as F } from "./_vue_commonjs-external-NwvjgbHK.js";
+import { c as J, a as L, d as se, e as H, b as Q, _ as X, p as Y, r as ce } from "./index-D1ZL6feZ.js";
+import { _ as Z, i as de } from "./index-gA02bxwJ.js";
+function pe(e, a) {
+  for (var t = 0; t < a.length; t++) {
+    const n = a[t];
+    if (typeof n != "string" && !Array.isArray(n)) {
+      for (const l in n)
+        if (l !== "default" && !(l in e)) {
+          const s = Object.getOwnPropertyDescriptor(n, l);
+          s && Object.defineProperty(e, l, s.get ? s : {
+            enumerable: !0,
+            get: () => n[l]
+          });
+        }
+    }
+  }
+  return Object.freeze(Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }));
+}
+var ee = {}, U = {}, te = {}, W = {}, D = {};
+Object.defineProperty(D, "__esModule", { value: !0 });
+D.self = re;
+const ue = J;
+function re(e) {
+  const { fontWeight: a, textColor1: t, textColor2: n, textColorDisabled: l, dividerColor: s, fontSize: C } = e;
+  return {
+    titleFontSize: C,
+    titleFontWeight: a,
+    dividerColor: s,
+    titleTextColor: t,
+    titleTextColorDisabled: l,
+    fontSize: C,
+    textColor: n,
+    arrowColor: n,
+    arrowColorDisabled: l,
+    itemMargin: "16px 0 0 0",
+    titlePadding: "16px 0 0 0"
+  };
+}
+const fe = {
+  name: "Collapse",
+  common: ue.commonLight,
+  self: re
+};
+D.default = fe;
+Object.defineProperty(W, "__esModule", { value: !0 });
+const me = J, he = D, _e = {
+  name: "Collapse",
+  common: me.commonDark,
+  self: he.self
+};
+W.default = _e;
+var k = {}, q = {};
+Object.defineProperty(q, "__esModule", {
+  value: !0
+});
+const f = L;
+q.default = (0, f.cB)("collapse", [(0, f.cM)("rtl", `
+ direction: rtl;
+ `, [(0, f.cB)("collapse-item", [(0, f.cB)("collapse-item", {
+  marginRight: "32px",
+  marginLeft: 0
+}), (0, f.cM)("left-arrow-placement", [(0, f.cE)("header", [(0, f.cB)("collapse-item-arrow", {
+  marginRight: 0,
+  marginLeft: "4px"
+})])]), (0, f.cM)("right-arrow-placement", [(0, f.cE)("header", [(0, f.cB)("collapse-item-arrow", {
+  marginLeft: 0,
+  marginRight: "4px"
+})])]), (0, f.cM)("active", [(0, f.cE)("header", [(0, f.cM)("active", [(0, f.cB)("collapse-item-arrow", {
+  transform: "rotate(-90deg)"
+})])])])])])]);
+var ge = _ && _.__importDefault || function(e) {
+  return e && e.__esModule ? e : { default: e };
+};
+Object.defineProperty(k, "__esModule", { value: !0 });
+k.collapseRtl = void 0;
+const ve = ge(q);
+k.collapseRtl = {
+  name: "Collapse",
+  style: ve.default
+};
+(function(e) {
+  var a = _ && _.__importDefault || function(s) {
+    return s && s.__esModule ? s : { default: s };
+  };
+  Object.defineProperty(e, "__esModule", { value: !0 }), e.collapseRtl = e.collapseLight = e.collapseDark = void 0;
+  var t = W;
+  Object.defineProperty(e, "collapseDark", { enumerable: !0, get: function() {
+    return a(t).default;
+  } });
+  var n = D;
+  Object.defineProperty(e, "collapseLight", { enumerable: !0, get: function() {
+    return a(n).default;
+  } });
+  var l = k;
+  Object.defineProperty(e, "collapseRtl", { enumerable: !0, get: function() {
+    return l.collapseRtl;
+  } });
+})(te);
+var K = {}, V = {}, be = _ && _.__importDefault || function(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+};
+Object.defineProperty(V, "__esModule", {
+  value: !0
+});
+V.fadeInHeightExpandTransition = ye;
+const z = L, xe = be(se), {
+  cubicBezierEaseInOut: b,
+  cubicBezierEaseOut: $e,
+  cubicBezierEaseIn: Ce
+} = xe.default;
+function ye({
+  overflow: e = "hidden",
+  duration: a = ".3s",
+  originalTransition: t = "",
+  leavingDelay: n = "0s",
+  foldPadding: l = !1,
+  enterToProps: s = void 0,
+  leaveToProps: C = void 0,
+  reverse: I = !1
+} = {}) {
+  const w = I ? "leave" : "enter", i = I ? "enter" : "leave";
+  return [(0, z.c)(`&.fade-in-height-expand-transition-${i}-from,
+ &.fade-in-height-expand-transition-${w}-to`, Object.assign(Object.assign({}, s), {
+    opacity: 1
+  })), (0, z.c)(`&.fade-in-height-expand-transition-${i}-to,
+ &.fade-in-height-expand-transition-${w}-from`, Object.assign(Object.assign({}, C), {
+    opacity: 0,
+    marginTop: "0 !important",
+    marginBottom: "0 !important",
+    paddingTop: l ? "0 !important" : void 0,
+    paddingBottom: l ? "0 !important" : void 0
+  })), (0, z.c)(`&.fade-in-height-expand-transition-${i}-active`, `
+ overflow: ${e};
+ transition:
+ max-height ${a} ${b} ${n},
+ opacity ${a} ${$e} ${n},
+ margin-top ${a} ${b} ${n},
+ margin-bottom ${a} ${b} ${n},
+ padding-top ${a} ${b} ${n},
+ padding-bottom ${a} ${b} ${n}
+ ${t ? `,${t}` : ""}
+ `), (0, z.c)(`&.fade-in-height-expand-transition-${w}-active`, `
+ overflow: ${e};
+ transition:
+ max-height ${a} ${b},
+ opacity ${a} ${Ce},
+ margin-top ${a} ${b},
+ margin-bottom ${a} ${b},
+ padding-top ${a} ${b},
+ padding-bottom ${a} ${b}
+ ${t ? `,${t}` : ""}
+ `)];
+}
+Object.defineProperty(K, "__esModule", {
+  value: !0
+});
+const r = L, we = V;
+K.default = (0, r.cB)("collapse", "width: 100%;", [(0, r.cB)("collapse-item", `
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
+ transition:
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
+ margin: var(--n-item-margin);
+ `, [(0, r.cM)("disabled", [(0, r.cE)("header", "cursor: not-allowed;", [(0, r.cE)("header-main", `
+ color: var(--n-title-text-color-disabled);
+ `), (0, r.cB)("collapse-item-arrow", `
+ color: var(--n-arrow-color-disabled);
+ `)])]), (0, r.cB)("collapse-item", "margin-left: 32px;"), (0, r.c)("&:first-child", "margin-top: 0;"), (0, r.c)("&:first-child >", [(0, r.cE)("header", "padding-top: 0;")]), (0, r.cM)("left-arrow-placement", [(0, r.cE)("header", [(0, r.cB)("collapse-item-arrow", "margin-right: 4px;")])]), (0, r.cM)("right-arrow-placement", [(0, r.cE)("header", [(0, r.cB)("collapse-item-arrow", "margin-left: 4px;")])]), (0, r.cE)("content-wrapper", [(0, r.cE)("content-inner", "padding-top: 16px;"), (0, we.fadeInHeightExpandTransition)({
+  duration: "0.15s"
+})]), (0, r.cM)("active", [(0, r.cE)("header", [(0, r.cM)("active", [(0, r.cB)("collapse-item-arrow", "transform: rotate(90deg);")])])]), (0, r.c)("&:not(:first-child)", "border-top: 1px solid var(--n-divider-color);"), (0, r.cNotM)("disabled", [(0, r.cM)("trigger-area-main", [(0, r.cE)("header", [(0, r.cE)("header-main", "cursor: pointer;"), (0, r.cB)("collapse-item-arrow", "cursor: default;")])]), (0, r.cM)("trigger-area-arrow", [(0, r.cE)("header", [(0, r.cB)("collapse-item-arrow", "cursor: pointer;")])]), (0, r.cM)("trigger-area-extra", [(0, r.cE)("header", [(0, r.cE)("header-extra", "cursor: pointer;")])])]), (0, r.cE)("header", `
+ font-size: var(--n-title-font-size);
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ transition: color .3s var(--n-bezier);
+ position: relative;
+ padding: var(--n-title-padding);
+ color: var(--n-title-text-color);
+ `, [(0, r.cE)("header-main", `
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ font-weight: var(--n-title-font-weight);
+ transition: color .3s var(--n-bezier);
+ flex: 1;
+ color: var(--n-title-text-color);
+ `), (0, r.cE)("header-extra", `
+ display: flex;
+ align-items: center;
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
+ `), (0, r.cB)("collapse-item-arrow", `
+ display: flex;
+ transition:
+ transform .15s var(--n-bezier),
+ color .3s var(--n-bezier);
+ font-size: 18px;
+ color: var(--n-arrow-color);
+ `)])])]);
+(function(e) {
+  var a = _ && _.__importDefault || function(i) {
+    return i && i.__esModule ? i : { default: i };
+  };
+  Object.defineProperty(e, "__esModule", { value: !0 }), e.collapseInjectionKey = e.collapseProps = void 0;
+  const t = F, n = H, l = Q, s = X, C = te, I = Y, w = a(K);
+  e.collapseProps = Object.assign(Object.assign({}, l.useTheme.props), {
+    defaultExpandedNames: {
+      type: [Array, String],
+      default: null
+    },
+    expandedNames: [Array, String],
+    arrowPlacement: {
+      type: String,
+      default: "left"
+    },
+    accordion: {
+      type: Boolean,
+      default: !1
+    },
+    displayDirective: {
+      type: String,
+      default: "if"
+    },
+    triggerAreas: {
+      type: Array,
+      default: () => ["main", "extra", "arrow"]
+    },
+    onItemHeaderClick: [Function, Array],
+    "onUpdate:expandedNames": [Function, Array],
+    onUpdateExpandedNames: [Function, Array],
+    // deprecated
+    onExpandedNamesChange: {
+      type: [Function, Array],
+      validator: () => (process.env.NODE_ENV !== "production" && (0, s.warn)("collapse", "`on-expanded-names-change` is deprecated, please use `on-update:expanded-names` instead."), !0),
+      default: void 0
+    }
+  }), e.collapseInjectionKey = (0, s.createInjectionKey)("n-collapse"), e.default = (0, t.defineComponent)({
+    name: "Collapse",
+    props: e.collapseProps,
+    setup(i, { slots: A }) {
+      const { mergedClsPrefixRef: R, inlineThemeDisabled: u, mergedRtlRef: y } = (0, l.useConfig)(i), x = (0, t.ref)(i.defaultExpandedNames), m = (0, t.computed)(() => i.expandedNames), $ = (0, n.useMergedState)(m, x), p = (0, l.useTheme)("Collapse", "-collapse", w.default, C.collapseLight, i, R);
+      function h(d) {
+        const { "onUpdate:expandedNames": c, onUpdateExpandedNames: v, onExpandedNamesChange: j } = i;
+        v && (0, s.call)(v, d), c && (0, s.call)(c, d), j && (0, s.call)(j, d), x.value = d;
+      }
+      function g(d) {
+        const { onItemHeaderClick: c } = i;
+        c && (0, s.call)(c, d);
+      }
+      function M(d, c, v) {
+        const { accordion: j } = i, { value: B } = $;
+        if (j)
+          d ? (h([c]), g({ name: c, expanded: !0, event: v })) : (h([]), g({ name: c, expanded: !1, event: v }));
+        else if (!Array.isArray(B))
+          h([c]), g({ name: c, expanded: !0, event: v });
+        else {
+          const P = B.slice(), S = P.findIndex((T) => c === T);
+          ~S ? (P.splice(S, 1), h(P), g({ name: c, expanded: !1, event: v })) : (P.push(c), h(P), g({ name: c, expanded: !0, event: v }));
+        }
+      }
+      (0, t.provide)(e.collapseInjectionKey, {
+        props: i,
+        mergedClsPrefixRef: R,
+        expandedNamesRef: $,
+        slots: A,
+        toggleItem: M
+      });
+      const N = (0, I.useRtl)("Collapse", y, R), O = (0, t.computed)(() => {
+        const { common: { cubicBezierEaseInOut: d }, self: { titleFontWeight: c, dividerColor: v, titlePadding: j, titleTextColor: B, titleTextColorDisabled: P, textColor: S, arrowColor: T, fontSize: oe, titleFontSize: ne, arrowColorDisabled: le, itemMargin: ie } } = p.value;
+        return {
+          "--n-font-size": oe,
+          "--n-bezier": d,
+          "--n-text-color": S,
+          "--n-divider-color": v,
+          "--n-title-padding": j,
+          "--n-title-font-size": ne,
+          "--n-title-text-color": B,
+          "--n-title-text-color-disabled": P,
+          "--n-title-font-weight": c,
+          "--n-arrow-color": T,
+          "--n-arrow-color-disabled": le,
+          "--n-item-margin": ie
+        };
+      }), o = u ? (0, l.useThemeClass)("collapse", void 0, O, i) : void 0;
+      return {
+        rtlEnabled: N,
+        mergedTheme: p,
+        mergedClsPrefix: R,
+        cssVars: u ? void 0 : O,
+        themeClass: o == null ? void 0 : o.themeClass,
+        onRender: o == null ? void 0 : o.onRender
+      };
+    },
+    render() {
+      var i;
+      return (i = this.onRender) === null || i === void 0 || i.call(this), (0, t.h)("div", { class: [
+        `${this.mergedClsPrefix}-collapse`,
+        this.rtlEnabled && `${this.mergedClsPrefix}-collapse--rtl`,
+        this.themeClass
+      ], style: this.cssVars }, this.$slots);
+    }
+  });
+})(U);
+var ae = {}, G = {};
+Object.defineProperty(G, "__esModule", { value: !0 });
+const E = F, Pe = H, Ee = Z;
+G.default = (0, E.defineComponent)({
+  name: "CollapseItemContent",
+  props: {
+    displayDirective: {
+      type: String,
+      required: !0
+    },
+    show: Boolean,
+    clsPrefix: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e) {
+    return {
+      onceTrue: (0, Pe.useFalseUntilTruthy)((0, E.toRef)(e, "show"))
+    };
+  },
+  render() {
+    return (0, E.h)(Ee.NFadeInExpandTransition, null, {
+      default: () => {
+        const { show: e, displayDirective: a, onceTrue: t, clsPrefix: n } = this, l = a === "show" && t, s = (0, E.h)(
+          "div",
+          { class: `${n}-collapse-item__content-wrapper` },
+          (0, E.h)("div", { class: `${n}-collapse-item__content-inner` }, this.$slots)
+        );
+        return l ? (0, E.withDirectives)(s, [[E.vShow, e]]) : e ? s : null;
+      }
+    });
+  }
+});
+(function(e) {
+  var a = _ && _.__importDefault || function(u) {
+    return u && u.__esModule ? u : { default: u };
+  };
+  Object.defineProperty(e, "__esModule", { value: !0 }), e.collapseItemProps = void 0;
+  const t = F, n = ce, l = H, s = de, C = Y, I = Q, w = Z, i = X, A = U, R = a(G);
+  e.collapseItemProps = {
+    title: String,
+    name: [String, Number],
+    disabled: Boolean,
+    displayDirective: String
+  }, e.default = (0, t.defineComponent)({
+    name: "CollapseItem",
+    props: e.collapseItemProps,
+    setup(u) {
+      const { mergedRtlRef: y } = (0, I.useConfig)(u), x = (0, n.createId)(), m = (0, l.useMemo)(() => {
+        var o;
+        return (o = u.name) !== null && o !== void 0 ? o : x;
+      }), $ = (0, t.inject)(A.collapseInjectionKey);
+      $ || (0, i.throwError)("collapse-item", "`n-collapse-item` must be placed inside `n-collapse`.");
+      const { expandedNamesRef: p, props: h, mergedClsPrefixRef: g, slots: M } = $, N = (0, t.computed)(() => {
+        const { value: o } = p;
+        if (Array.isArray(o)) {
+          const { value: d } = m;
+          return !~o.findIndex((c) => c === d);
+        } else if (o) {
+          const { value: d } = m;
+          return d !== o;
+        }
+        return !0;
+      });
+      return {
+        rtlEnabled: (0, C.useRtl)("Collapse", y, g),
+        collapseSlots: M,
+        randomName: x,
+        mergedClsPrefix: g,
+        collapsed: N,
+        triggerAreas: (0, t.toRef)(h, "triggerAreas"),
+        mergedDisplayDirective: (0, t.computed)(() => {
+          const { displayDirective: o } = u;
+          return o || h.displayDirective;
+        }),
+        arrowPlacement: (0, t.computed)(() => h.arrowPlacement),
+        handleClick(o) {
+          let d = "main";
+          (0, n.happensIn)(o, "arrow") && (d = "arrow"), (0, n.happensIn)(o, "extra") && (d = "extra"), h.triggerAreas.includes(d) && $ && !u.disabled && $.toggleItem(N.value, m.value, o);
+        }
+      };
+    },
+    render() {
+      const { collapseSlots: u, $slots: y, arrowPlacement: x, collapsed: m, mergedDisplayDirective: $, mergedClsPrefix: p, disabled: h, triggerAreas: g } = this, M = (0, i.resolveSlotWithProps)(y.header, { collapsed: m }, () => [this.title]), N = y["header-extra"] || u["header-extra"], O = y.arrow || u.arrow;
+      return (0, t.h)(
+        "div",
+        { class: [
+          `${p}-collapse-item`,
+          `${p}-collapse-item--${x}-arrow-placement`,
+          h && `${p}-collapse-item--disabled`,
+          !m && `${p}-collapse-item--active`,
+          g.map((o) => `${p}-collapse-item--trigger-area-${o}`)
+        ] },
+        (0, t.h)(
+          "div",
+          { class: [
+            `${p}-collapse-item__header`,
+            !m && `${p}-collapse-item__header--active`
+          ] },
+          (0, t.h)(
+            "div",
+            { class: `${p}-collapse-item__header-main`, onClick: this.handleClick },
+            x === "right" && M,
+            (0, t.h)("div", { class: `${p}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1, "data-arrow": !0 }, (0, i.resolveSlotWithProps)(O, { collapsed: m }, () => {
+              var o;
+              return [
+                (0, t.h)(w.NBaseIcon, { clsPrefix: p }, {
+                  default: (o = u.expandIcon) !== null && o !== void 0 ? o : () => this.rtlEnabled ? (0, t.h)(s.ChevronLeftIcon, null) : (0, t.h)(s.ChevronRightIcon, null)
+                })
+              ];
+            })),
+            x === "left" && M
+          ),
+          (0, i.resolveWrappedSlotWithProps)(N, { collapsed: m }, (o) => (0, t.h)("div", { class: `${p}-collapse-item__header-extra`, onClick: this.handleClick, "data-extra": !0 }, o))
+        ),
+        (0, t.h)(R.default, { clsPrefix: p, displayDirective: $, show: !m }, y)
+      );
+    }
+  });
+})(ae);
+(function(e) {
+  var a = _ && _.__importDefault || function(l) {
+    return l && l.__esModule ? l : { default: l };
+  };
+  Object.defineProperty(e, "__esModule", { value: !0 }), e.collapseItemProps = e.NCollapseItem = e.collapseProps = e.NCollapse = void 0;
+  var t = U;
+  Object.defineProperty(e, "NCollapse", { enumerable: !0, get: function() {
+    return a(t).default;
+  } }), Object.defineProperty(e, "collapseProps", { enumerable: !0, get: function() {
+    return t.collapseProps;
+  } });
+  var n = ae;
+  Object.defineProperty(e, "NCollapseItem", { enumerable: !0, get: function() {
+    return a(n).default;
+  } }), Object.defineProperty(e, "collapseItemProps", { enumerable: !0, get: function() {
+    return n.collapseItemProps;
+  } });
+})(ee);
+const je = /* @__PURE__ */ pe({
+  __proto__: null
+}, [ee]);
+export {
+  je as i
+};