gepic
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 2.6 kB
JavaScript
;const e=require("vue"),g=require("../../../../node/src/node.vue.cjs"),v=require("../../../../../../utils/manager/pluginManager.cjs");require("@vueuse/core");require("../../../../../../hooks/store/index.cjs");const r=require("../../../../../../utils/common/data.cjs"),k=["title"],_={class:"epic-attr-input"},P=e.defineComponent({__name:"styleView",setup(B){const p=e.inject("designer"),u=e.inject("pageSchema"),i=e.inject("revoke"),d=v.pluginManager.getComponentConfings(),l=e.computed(()=>p.state.checkedNode),y=[{label:"宽度",type:"EInputSize",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:"color-picker",field:"componentProps.style.backgroundColor",componentProps:{type:"color",style:{}}},{label:"字体颜色",type:"color-picker",field:"componentProps.style.color",componentProps:{type:"color",style:{}}}],a=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 h(t,n,c,o=l.value){typeof c.onChange=="function"&&c.onChange({value:t,values:o,componentStyles:a}),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(a.value,o=>{var s;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"?(s=l.value)==null?void 0:s.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":m=>h(m,o.field,o,o.editData)},null,8,["component-schema","model-value","onUpdate:modelValue"])])],2)):e.createCommentVNode("",!0)])}),128))])}}});module.exports=P;