epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 2.69 kB
JavaScript
;const e=require("vue");;/* empty css */const g=require("../../../../base-ui/src/node/node.vue.cjs"),r=require("../../../../../utils/src/common/data.cjs");require("@vueuse/core");require("../../../../../hooks/src/store/index.cjs");const v=require("../../../../../utils/src/manager/pluginManager.cjs");require("vuedraggable");const k=["title"],_={class:"epic-attr-input"},P=e.defineComponent({__name:"style",setup(B){const p=e.inject("designer"),u=e.inject("pageSchema"),i=e.inject("revoke"),d=v.pluginManager.getComponentConfings(),l=e.computed(()=>p.state.selectedNode),y=[{field:"componentProps.style.width",label:"宽度",type:"EInputSize"},{field:"componentProps.style.height",label:"高度",type:"EInputSize"},{field:"componentProps.style.padding",label:"内边距",type:"EInputSize"},{field:"componentProps.style.margin",label:"外边距",type:"EInputSize"},{componentProps:{style:{},type:"color"},field:"componentProps.style.backgroundColor",label:"背景色",type:"color-picker"},{componentProps:{style:{},type:"color"},field:"componentProps.style.color",label:"字体颜色",type:"color-picker"}],s=e.computed(()=>{var n;if(!l.value||!l.value.type)return[];const t=((n=d[l.value.type])==null?void 0:n.config.style)??[];return[...y,...t]});function f(t){var n;return typeof t.show=="boolean"?t.show:((n=t.show)==null?void 0:n.call(t,{values:l.value}))??!0}function m(t,n,c,o=l.value){typeof c.onChange=="function"&&c.onChange({componentStyles:s,value:t,values:o}),c.changeSync?r.setValueByPath(o,n,t):e.nextTick(()=>{r.setValueByPath(o,n,t)}),i.push(u.schemas,"编辑组件属性")}return(t,n)=>{var c;return e.openBlock(),e.createElementBlock("div",{key:(c=l.value)==null?void 0:c.id,class:"epic-style-view"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,o=>{var a;return e.openBlock(),e.createElementBlock("div",{key:o.field},[f(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["epic-attr-item",o.layout])},[o.label?(e.openBlock(),e.createElementBlock("div",{key:0,class:"epic-attr-label",title:o.label},e.toDisplayString(o.label),9,k)):e.createCommentVNode("",!0),e.createElementVNode("div",_,[e.createVNode(e.unref(g),{"component-schema":{...o,componentProps:{...o.componentProps,...o.field==="componentProps.defaultValue"?(a=l.value)==null?void 0:a.componentProps:{},input:!1,field:void 0,hidden:!1},show:!0,noFormItem:!0},"model-value":e.unref(r.getValueByPath)(o.editData??l.value,o.field),"onUpdate:modelValue":h=>m(h,o.field,o,o.editData)},null,8,["component-schema","model-value","onUpdate:modelValue"])])],2)):e.createCommentVNode("",!0)])}),128))])}}});module.exports=P;