epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 3.34 kB
JavaScript
;const e=require("vue");;/* empty css */const x=require("../../../../base-ui/src/icon/icon.vue2.cjs"),u=require("../../../../../utils/src/common/data.cjs");require("@vueuse/core");require("../../../../../hooks/src/store/index.cjs");const r=require("../../../../../utils/src/manager/pluginManager.cjs"),b=require("vuedraggable"),w={class:"epic-component-view flex flex-col"},E={class:"epic-search-box px-10px py-6px"},B={class:"flex flex-1 overflow-auto"},q={class:"epic-tabs-box"},L=["title","onClick"],M={class:"box-border h-full flex-1 overflow-auto py-2"},I=["onClick"],j={class:"epic-componet-label w-0 flex-1 truncate"},$={class:"pt-42px text-center text-gray-400"},D=e.defineComponent({__name:"index",setup(P){const S=r.pluginManager.getComponent("input"),d=e.inject("pageSchema"),p=e.inject("designer"),k=e.inject("revoke"),y=e.inject("designerProps"),m=r.pluginManager.getComponentSchemaGroups(),a=e.ref(""),g={title:"全部",list:[]},c=e.ref(g),C=e.computed(()=>[g,...m.value]),s=e.computed(()=>{let o=c.value.list;return c.value.title==="全部"&&(o=m.value.map(t=>t.list).flat()),o.filter(n=>{var t;return((t=n.label)==null?void 0:t.includes(a.value))&&(!y.value.formMode||n.type!=="form")})});function V(o){c.value=o}function N(o){var v,f,_;const n=u.findSchemaInfoById(d.schemas,((v=p.state.selectedNode)==null?void 0:v.id)??"root");if(!n)return!1;let{index:t,schema:l,list:i}=n;l.children&&!((_=(f=r.pluginManager.getComponentConfingByType(l.type))==null?void 0:f.editConstraints)!=null&&_.childImmovable)&&(i=l.children,t=l.children.length-1);const h=u.generateNewSchema(o);i.splice(t+1,0,h),p.setSelectedNode(h),k.push(d.schemas,"插入组件")}return(o,n)=>(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",E,[e.createVNode(e.unref(S),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=t=>a.value=t),value:a.value,"onUpdate:value":n[1]||(n[1]=t=>a.value=t),placeholder:"搜索组件",clearable:"","allow-clear":""},{prefix:e.withCtx(()=>[e.createVNode(e.unref(x),{class:"text-$epic-text-helper",name:"icon--epic--search-rounded"})]),_:1},8,["modelValue","value"])]),e.createElementVNode("div",B,[e.createElementVNode("div",q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C.value,(t,l)=>(e.openBlock(),e.createElementBlock("div",{key:l,class:e.normalizeClass(["epic-tab cursor-pointer truncate",{checked:c.value.title===t.title}]),title:t.title,onClick:i=>V(t)},e.toDisplayString(t.title),11,L))),128))]),e.createElementVNode("div",M,[e.createVNode(e.unref(b),e.mergeProps({modelValue:s.value,"onUpdate:modelValue":n[2]||(n[2]=t=>s.value=t)},{group:{name:"edit-draggable",pull:"clone",put:!1},sort:!1,animation:180,ghostClass:"moving"},{clone:e.unref(u.generateNewSchema),"item-key":"id",class:"px-10px grid grid-cols-[auto_auto] gap-2"}),{item:e.withCtx(({element:t})=>[e.createElementVNode("div",{class:"epic-componet-item flex items-center truncate",onClick:l=>N(t)},[e.createVNode(e.unref(x),{name:e.unref(r.pluginManager).getComponentConfingByType(t.type).icon??""},null,8,["name"]),e.createElementVNode("div",j,e.toDisplayString(t.label),1)],8,I)]),_:1},16,["modelValue","clone"]),e.withDirectives(e.createElementVNode("div",$," 没有查询到的组件 ",512),[[e.vShow,s.value.length===0]])])])]))}});module.exports=D;