epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 2.99 kB
JavaScript
"use strict";const e=require("vue");;/* empty css */;/* empty css */;/* empty css */const q=require("../../../../../base-ui/src/node/node.vue.cjs");;/* empty css */const h=require("../../../../../../utils/src/common/data.cjs");require("../../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.cjs");require("@vueuse/core");require("../../../../../../hooks/src/store/index.cjs");const V=require("../../../../../../hooks/src/designer/useDesignerContext.cjs"),C=require("../../../../../../hooks/src/designer/useTableMeta.cjs"),d=require("../../../../../../manager/src/pluginManager.cjs");require("vue-draggable-plus");const _=["title"],k=e.defineComponent({__name:"attributeItem",props:{schema:{}},setup(m){const t=m,c=V.useDesignerContext(),i=c.pageSchema,f=c.revoke,r=e.computed(()=>c.state.selectedNode),u=C.useTableMeta(d.pluginManager);function v(s){var a;return typeof s.show=="boolean"?s.show:typeof s.show=="function"?(a=s.show)==null?void 0:a.call(s,{tableMeta:u.value,values:r.value}):!0}const g=d.pluginManager.component.getComponentConfigs(),b=e.computed(()=>{var o,n,l;if(!r.value||!r.value.type)return[];const a=[...((n=(o=g[r.value.type])==null?void 0:o.config)==null?void 0:n.attribute)??[]];return r.value.id===((l=i.schemas[0])==null?void 0:l.id)&&a.push({editData:i,field:"canvas.width",label:"画布宽度",type:"EInputSize"},{editData:i,field:"canvas.height",label:"画布高度",type:"EInputSize"}),a});function y(s,a,o,n=r.value){typeof o.onChange=="function"&&o.onChange({componentAttributes:b,tableMeta:u==null?void 0:u.value,value:s,values:n}),o.changeSync?h.setValueByPath(n,a,s):e.nextTick(()=>{h.setValueByPath(n,a,s)}),f.push("属性编辑")}const p=e.ref();return e.watchEffect(()=>{p.value=h.getValueByPath(t.schema.editData??r.value,t.schema.field)}),(s,a)=>{var o,n;return v(t.schema)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["epic-attr-item",t.schema.layout])},[t.schema.label?(e.openBlock(),e.createElementBlock("div",{key:0,class:"epic-attr-label",title:t.schema.label},e.toDisplayString(t.schema.label),9,_)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["epic-attr-input",{"block!":t.schema.layout==="vertical"}])},[e.createVNode(e.unref(q),{"is-property":"","component-schema":{...t.schema,props:{...t.schema.props,...t.schema.field==="props.defaultValue"?(o=r.value)==null?void 0:o.props:{},input:!1,field:void 0,hidden:!1,placeholder:((n=t.schema.props)==null?void 0:n.placeholder)??"请输入"},show:!0,noFormItem:!0},modelValue:p.value,"onUpdate:modelValue":[a[0]||(a[0]=l=>p.value=l),a[1]||(a[1]=l=>y(l,t.schema.field,t.schema,t.schema.editData))]},null,8,["component-schema","modelValue"])],2)],2)):e.createCommentVNode("",!0)}}});module.exports=k;