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