gepic
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 3.28 kB
JavaScript
;const e=require("vue"),b=require("vuedraggable"),r=require("../../../../../../utils/manager/pluginManager.cjs");require("@vueuse/core");require("../../../../../../hooks/store/index.cjs");const u=require("../../../../../../utils/common/data.cjs"),x=require("../../../../icon/src/icon.vue.cjs"),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"},M=["title","onClick"],I={class:"h-full flex-1 overflow-auto py-2 box-border"},L=["onClick"],j={class:"epic-componet-label flex-1 w-0 truncate"},$={class:"text-center pt-42px text-gray-400"},D=e.defineComponent({__name:"index",setup(P){const k=r.pluginManager.getComponent("input"),d=e.inject("pageSchema"),p=e.inject("designer"),C=e.inject("revoke"),y=e.inject("designerProps"),m=r.pluginManager.getComponentSchemaGroups(),c=e.ref(""),h={title:"全部",list:[]},a=e.ref(h),S=e.computed(()=>[h,...m.value]),s=e.computed(()=>{let o=a.value.list;if(a.value.title==="全部"){const n=m.value.map(t=>t.list);o=[].concat(...n)}return o.filter(n=>{var t;return((t=n.label)==null?void 0:t.includes(c.value))&&(!y.value.formMode||n.type!=="form")})});function V(o){a.value=o}function N(o){var v,f,_;const n=u.findSchemaInfoById(d.schemas,((v=p.state.checkedNode)==null?void 0:v.id)??"root");if(!n)return!1;let{list:t,schema:l,index:i}=n;l.children&&!((_=(f=r.pluginManager.getComponentConfingByType(l.type))==null?void 0:f.editConstraints)!=null&&_.childImmovable)&&(t=l.children,i=l.children.length-1);const g=u.generateNewSchema(o);t.splice(i+1,0,g),p.setCheckedNode(g),C.push(d.schemas,"插入组件")}return(o,n)=>(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",E,[e.createVNode(e.unref(k),{modelValue:c.value,"onUpdate:modelValue":n[0]||(n[0]=t=>c.value=t),value:c.value,"onUpdate:value":n[1]||(n[1]=t=>c.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(S.value,(t,l)=>(e.openBlock(),e.createElementBlock("div",{key:l,class:e.normalizeClass(["epic-tab cursor-pointer truncate",{checked:a.value.title===t.title}]),title:t.title,onClick:i=>V(t)},e.toDisplayString(t.title),11,M))),128))]),e.createElementVNode("div",I,[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:"grid grid-cols-[auto_auto] px-10px 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,L)]),_:1},16,["modelValue","clone"]),e.withDirectives(e.createElementVNode("div",$," 没有查询到的组件 ",512),[[e.vShow,!s.value.length]])])])]))}});module.exports=D;