@farris/ui-vue/components/spacing-editor/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../number-spinner/index.umd.js"),require("../combo-list/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../number-spinner/index.umd.js","../combo-list/index.umd.js"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i["spacing-editor"]={},i.Vue,i.FNumberSpinner,i.FComboList))})(this,function(i,e,y,h){"use strict";const S={defaultSpacings:{type:Array,default:[{id:"default",value:"4",name:"系统默认"},{id:"large",value:"20",name:"大(20px)"},{id:"middle",value:"16",name:"中(16px)"},{id:"small",value:"12",name:"小(12px)"},{id:"exsmall",value:"8",name:"超小(8px)"},{id:"none",value:"0",name:"无(0px)"},{id:"custom",value:"custom",name:"自定义"}]},directions:{type:Array,default:[{id:"top",title:"上"},{id:"right",title:"右"},{id:"bottom",title:"下"},{id:"left",title:"左"}]},margins:{type:Array,default:[4,4,4,4]},paddings:{type:Array,default:[4,4,4,4]}};function j(a,d){const{defaultSpacings:c}=a,{directions:s}=a,o=e.ref(a.margins),r=e.ref(a.paddings),t=e.ref(!1),l=e.ref("default"),m=e.computed(()=>({"f-icon":!0,"mr-1":!0,"f-spacing-editor-icon":!0,"f-icon-arrow-60-right":!t.value,"f-icon-arrow-60-down":t.value})),u=e.computed(()=>({margin:o.value.join("px ")+"px",padding:r.value.join("px ")+"px"}));function p(){t.value=!t.value}function V(n){n[0].name!=="自定义"?(o.value.fill(n[0].value),t.value=!1,e.nextTick(()=>{t.value=!0}),d.emit("valueChanged",u.value)):t.value=!0}function v(){l.value="custom",d.emit("valueChanged",u.value)}function x(){return t.value?e.createVNode("div",{class:"f-spacing-editor-custom-container"},[s.map((n,g)=>e.createVNode("div",null,[e.createVNode("div",{class:"f-spacing-editor-custom"},[e.createVNode("div",{class:"f-spacing-editor-title"},[n.title,e.createTextVNode("间距(px)")]),e.createVNode(y,{style:"flex: 1 1 0",min:0,modelValue:o.value[g],"onUpdate:modelValue":C=>o.value[g]=C,onChange:v},null)])]))]):""}function N(){return e.createVNode("div",{class:"f-spacing-editor-container"},[e.createVNode("div",{style:"display: flex"},[e.createVNode("div",{class:"f-spacing-editor-title"},[e.createVNode("div",{class:m.value,onClick:p},null),e.createVNode("div",null,[e.createTextVNode("外间距")])]),e.createVNode(h,{style:"flex: 1 1 0",data:c,modelValue:l.value,"onUpdate:modelValue":n=>l.value=n,onChange:V},null)]),x()])}return{renderSpacingEditorMargin:N}}function b(a,d){const{defaultSpacings:c}=a,{directions:s}=a,o=e.ref(a.margins),r=e.ref(a.paddings),t=e.ref(!1),l=e.ref("default"),m=e.computed(()=>({"f-icon":!0,"mr-1":!0,"f-spacing-editor-icon":!0,"f-icon-arrow-60-right":!t.value,"f-icon-arrow-60-down":t.value})),u=e.computed(()=>({margin:o.value.join("px ")+"px",padding:r.value.join("px ")+"px"}));function p(){t.value=!t.value}function V(n){n[0].name!=="自定义"?(r.value.fill(n[0].value),t.value=!1,e.nextTick(()=>{t.value=!0}),d.emit("valueChanged",u.value)):t.value=!0}function v(){l.value="custom",d.emit("valueChanged",u.value)}function x(){return t.value?e.createVNode("div",{class:"f-spacing-editor-custom-container"},[s.map((n,g)=>e.createVNode("div",null,[e.createVNode("div",{class:"f-spacing-editor-custom"},[e.createVNode("div",{class:"f-spacing-editor-title"},[n.title,e.createTextVNode("间距(px)")]),e.createVNode(y,{style:"flex: 1 1 0",min:0,modelValue:r.value[g],"onUpdate:modelValue":C=>r.value[g]=C,onChange:v},null)])]))]):""}function N(){return e.createVNode("div",{class:"f-spacing-editor-container"},[e.createVNode("div",{style:"display: flex"},[e.createVNode("div",{class:"f-spacing-editor-title"},[e.createVNode("div",{class:m.value,onClick:p},null),e.createVNode("div",null,[e.createTextVNode("内间距")])]),e.createVNode(h,{style:"flex: 1 1 0",data:c,modelValue:l.value,"onUpdate:modelValue":n=>l.value=n,onChange:V},null)]),x()])}return{renderSpacingEditorPadding:N}}const f=e.defineComponent({name:"FSpacingEditor",props:S,emits:["valueChanged"],setup(a,d){const{renderSpacingEditorMargin:c}=j(a,d),{renderSpacingEditorPadding:s}=b(a,d);return()=>e.createVNode("div",null,[c(),s()])}}),D={install(a){a.component(f.name,f)}};i.SpacingEditor=f,i.default=D,i.spacingEditorProps=S,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});