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