epic-designer-gold/dist/index-BozsQqds.cjs

基于vue3的设计器,可视化开发页面表单

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),U=require("./pluginManager-C8aQylGX.cjs"),L=require("./index-BoL2PSBk.cjs"),I=require("element-plus"),S=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),_={class:"box-model-container"},w={class:"visual-box"},z={class:"margin-area"},R={class:"margin-btns"},W={class:"margin-input top"},j={class:"margin-input right"},y={class:"margin-input bottom"},H={class:"margin-input left"},O={class:"border-area"},T={class:"padding-area"},A={class:"padding-btns"},D={class:"padding-input top"},F={class:"padding-input right"},G={class:"padding-input bottom"},J={class:"padding-input left"},K=l.defineComponent({__name:"index",props:{modelValue:{}},emits:["update:modelValue"],setup(x,{emit:B}){L.useLocale();const r=U.pluginManager.getComponent("input");U.pluginManager.getComponent("select");const a=x;l.onMounted(()=>{var i,e,t,u,g,p,s,d,c,V,N,k;(i=a.modelValue)!=null&&i.padding?o.value=h((e=a.modelValue)==null?void 0:e.padding):(o.value.top=(t=a.modelValue)==null?void 0:t["padding-top"],o.value.right=(u=a.modelValue)==null?void 0:u["padding-right"],o.value.bottom=(g=a.modelValue)==null?void 0:g["padding-bottom"],o.value.left=(p=a.modelValue)==null?void 0:p["padding-left"]),(s=a.modelValue)!=null&&s.margin?n.value=h((d=a.modelValue)==null?void 0:d.margin):(n.value.top=(c=a.modelValue)==null?void 0:c["margin-top"],n.value.right=(V=a.modelValue)==null?void 0:V["margin-right"],n.value.bottom=(N=a.modelValue)==null?void 0:N["margin-bottom"],n.value.left=(k=a.modelValue)==null?void 0:k["margin-left"])});function $(){n.value.left=null,n.value.top=null,n.value.right=null,n.value.bottom=null,f("update:modelValue",{...a.modelValue,"margin-left":null,"margin-top":null,"margin-right":null,"margin-bottom":null})}const v=l.ref(!1),b=l.ref(!1);function M(){v.value=!v.value}function C(){b.value=!b.value}function P(){o.value.left=null,o.value.top=null,o.value.right=null,o.value.bottom=null,f("update:modelValue",{...a.modelValue,"padding-left":null,"padding-top":null,"padding-right":null,"padding-bottom":null})}function m(i,e,t){const u=i.target.value.trim();if(!u)return;if(["px","%","vw","vh","rem","em","pt"].some(d=>u.endsWith(d))){E(e,t,u,i.target.value);return}if(/^\d+$/.test(u)){const d=u+"px";i.target.value=d,E(e,t,d,i.target.value)}else q(i,e,t)}function E(i,e,t,u){const g=i==="padding",p=g?b.value:v.value,s=g?o:n;if(!p)s.value[e]=t,f("update:modelValue",{...a.modelValue,[`${i}-${e}`]:u});else{const d=["left","right","top","bottom"];d.forEach(V=>{s.value[V]=t});const c=d.reduce((V,N)=>({...V,[`${i}-${N}`]:u}),{});f("update:modelValue",{...a.modelValue,...c})}}function q(i,e,t){i.target.value="";const u=e==="padding",g=u?b.value:v.value,p=u?o:n;if(!g)p.value[t]="",f("update:modelValue",{...a.modelValue,[`${e}-${t}`]:null});else{const s=["left","right","top","bottom"];s.forEach(c=>{p.value[c]=null});const d=s.reduce((c,V)=>({...c,[`${e}-${V}`]:null}),{});f("update:modelValue",{...a.modelValue,...d})}I.ElMessage.info("请输入有效值（数字或带单位的值）")}function h(i){const e=i.split(/\s+/);return e.length===1?{top:e[0],right:e[0],bottom:e[0],left:e[0]}:e.length===2?{top:e[0],right:e[1],bottom:e[0],left:e[1]}:e.length===3?{top:e[0],right:e[1],bottom:e[2],left:e[1]}:e.length===4?{top:e[0],right:e[1],bottom:e[2],left:e[3]}:null}const n=l.ref({top:null,right:null,bottom:null,left:null});l.ref({width:null,style:"solid",color:"#3498db"});const o=l.ref({top:null,right:null,bottom:null,left:null}),f=B;return l.ref(null),l.ref("px"),(i,e)=>(l.openBlock(),l.createElementBlock("div",_,[l.createElementVNode("div",w,[l.createElementVNode("div",z,[e[18]||(e[18]=l.createElementVNode("div",{class:"margin-title"},"外边距",-1)),l.createElementVNode("div",R,[l.createElementVNode("span",{title:"同时修改每个方向外边距",style:l.normalizeStyle({color:v.value?"#016bf3":""}),onClick:M,class:"icon iconfont icon--epic icon--epic--links-fill"},null,4),l.createElementVNode("span",{title:"清空外边距",onClick:$,class:"icon iconfont icon--epic icon--epic--delete-bin-line"})]),l.createElementVNode("div",W,[l.createVNode(l.unref(r),{modelValue:n.value.top,"onUpdate:modelValue":e[0]||(e[0]=t=>n.value.top=t),min:"0",onBlur:e[1]||(e[1]=t=>m(t,"margin","top"))},null,8,["modelValue"])]),l.createElementVNode("div",j,[l.createVNode(l.unref(r),{modelValue:n.value.right,"onUpdate:modelValue":e[2]||(e[2]=t=>n.value.right=t),min:"0",onBlur:e[3]||(e[3]=t=>m(t,"margin","right"))},null,8,["modelValue"])]),l.createElementVNode("div",y,[l.createVNode(l.unref(r),{modelValue:n.value.bottom,"onUpdate:modelValue":e[4]||(e[4]=t=>n.value.bottom=t),min:"0",onBlur:e[5]||(e[5]=t=>m(t,"margin","bottom"))},null,8,["modelValue"])]),l.createElementVNode("div",H,[l.createVNode(l.unref(r),{modelValue:n.value.left,"onUpdate:modelValue":e[6]||(e[6]=t=>n.value.left=t),min:"0",onBlur:e[7]||(e[7]=t=>m(t,"margin","left"))},null,8,["modelValue"])]),l.createElementVNode("div",O,[l.createElementVNode("div",T,[e[16]||(e[16]=l.createElementVNode("div",{class:"padding-title"},"内边距",-1)),l.createElementVNode("div",A,[l.createElementVNode("span",{onClick:C,title:"同时修改每个方向内边距",style:l.normalizeStyle({color:b.value?"#016bf3":""}),class:"icon iconfont icon--epic icon--epic--links-fill"},null,4),l.createElementVNode("span",{title:"清空内边距",onClick:P,class:"icon iconfont icon--epic icon--epic--delete-bin-line"})]),l.createElementVNode("div",D,[l.createVNode(l.unref(r),{modelValue:o.value.top,"onUpdate:modelValue":e[8]||(e[8]=t=>o.value.top=t),min:"0",onBlur:e[9]||(e[9]=t=>m(t,"padding","top"))},null,8,["modelValue"])]),l.createElementVNode("div",F,[l.createVNode(l.unref(r),{modelValue:o.value.right,"onUpdate:modelValue":e[10]||(e[10]=t=>o.value.right=t),min:"0",onBlur:e[11]||(e[11]=t=>m(t,"padding","right"))},null,8,["modelValue"])]),l.createElementVNode("div",G,[l.createVNode(l.unref(r),{modelValue:o.value.bottom,"onUpdate:modelValue":e[12]||(e[12]=t=>o.value.bottom=t),min:"0",onBlur:e[13]||(e[13]=t=>m(t,"padding","bottom"))},null,8,["modelValue"])]),l.createElementVNode("div",J,[l.createVNode(l.unref(r),{modelValue:o.value.left,"onUpdate:modelValue":e[14]||(e[14]=t=>o.value.left=t),min:"0",onBlur:e[15]||(e[15]=t=>m(t,"padding","left"))},null,8,["modelValue"])]),e[17]||(e[17]=l.createElementVNode("div",{class:"content-area"},[l.createElementVNode("div",{class:"content-controls"}," content ")],-1))])])])])]))}}),Q=S._export_sfc(K,[["__scopeId","data-v-539d5450"]]);exports.default=Q;