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

Farris Vue, a Farris Design based Vue3 component library.

(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../color-picker/index.umd.js"),require("../combo-list/index.umd.js"),require("../number-spinner/index.umd.js"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../color-picker/index.umd.js","../combo-list/index.umd.js","../number-spinner/index.umd.js","../common/index.umd.js"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o["border-editor"]={},o.Vue,o.FColorPicker,o.FComboList,o.FNumberSpinner,o.common))})(this,function(o,e,p,j,B,g){"use strict";const x={defaultBorderStyles:{type:Array,default:[{id:"none",name:"无"},{id:"solid",name:"实线"},{id:"dotted",name:"点线"},{id:"dashed",name:"虚线"}]},styles:{type:Array,default:["none","none","none","none","none"]},widths:{type:Array,default:[0,0,0,0,0]},colors:{type:Array,default:["#000000","#000000","#000000","#000000","#000000"]},radiuses:{type:Array,default:[0,0,0,0,0]}};function E(d,V){const{defaultBorderStyles:n}=d,c=e.ref(d.styles),s=e.ref(d.widths),i=e.ref(d.colors),a=e.ref(d.radiuses),r=e.ref(4),u=e.ref(!0),b=e.computed(()=>function(t){return{background:r.value===t?"linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .2))":"rgba(0, 0, 0, 0)"}}),f=e.computed(()=>({borderStyle:c.value.slice(0,4).join(" "),borderWidth:s.value.slice(0,4).join("px ")+"px",borderColor:i.value.slice(0,4).join(" "),borderRadius:a.value.slice(0,4).join("px ")+"px"}));function m(t){r.value=t,u.value=!1,e.nextTick(()=>{u.value=!0})}function N(t){r.value<4?c.value[r.value]=t[0].id:c.value.fill(t[0].id),V.emit("valueChanged",f.value)}function y(t){r.value<4?s.value[r.value]=t:s.value.fill(t),V.emit("valueChanged",f.value)}function v(t){r.value<4?i.value[r.value]=t.elementValue.value:i.value.fill(t.elementValue.value),V.emit("valueChanged",f.value)}function l(){return e.createVNode("div",{class:"f-border-editor-directions"},[e.createVNode("div",{style:b.value(3),class:"f-border-editor-direction",title:"左边框",onClick:()=>m(3)},[e.createTextVNode("┣")]),e.createVNode("div",null,[e.createVNode("div",{style:b.value(0),class:"f-border-editor-direction",title:"上边框",onClick:()=>m(0)},[e.createTextVNode("┳")]),e.createVNode("div",{style:b.value(4),class:"f-border-editor-direction",title:"全部",onClick:()=>m(4)},[e.createTextVNode("╋")]),e.createVNode("div",{style:b.value(2),class:"f-border-editor-direction",title:"下边框",onClick:()=>m(2)},[e.createTextVNode("┻")])]),e.createVNode("div",{style:b.value(1),class:"f-border-editor-direction",title:"右边框",onClick:()=>m(1)},[e.createTextVNode("┫")])])}function h(){return e.createVNode("div",{class:"f-border-editor-customs"},[e.createVNode("div",{class:"f-border-editor-custom"},[e.createVNode("div",{class:"f-border-editor-title"},[e.createTextVNode("线型")]),e.createVNode(j,{style:"flex: 1 1 0",data:n,modelValue:c.value[r.value],"onUpdate:modelValue":t=>c.value[r.value]=t,onChange:N,class:"f-border-editor-input"},null)]),e.createVNode("div",{class:"f-border-editor-custom"},[e.createVNode("div",{class:"f-border-editor-title"},[e.createTextVNode("宽度(px)")]),e.createVNode(B,{style:"flex: 1 1 0",min:0,modelValue:s.value[r.value],"onUpdate:modelValue":t=>s.value[r.value]=t,onChange:y,class:"f-border-editor-input"},null)]),e.createVNode("div",{class:"f-border-editor-custom"},[e.createVNode("div",{class:"f-border-editor-title"},[e.createTextVNode("颜色")]),e.createVNode(p,{style:"flex: 1 1 0",color:i.value[r.value],"onUpdate:color":t=>i.value[r.value]=t,onValueChanged:v,class:"f-border-editor-input"},null)])])}function T(){return e.createVNode("div",null,[u.value?e.createVNode("div",{class:"f-border-editor-custom-container"},[l(),h()]):""])}return{renderBorderEditorBasic:T}}function k(d,V){const n=e.ref(d.styles),c=e.ref(d.widths),s=e.ref(d.colors),i=e.ref(d.radiuses),a=e.ref(4),r=e.ref(!0),u=e.computed(()=>function(l){return{background:a.value===l?"linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .2))":"rgba(0, 0, 0, 0)"}}),b=e.computed(()=>({borderStyle:n.value.slice(0,4).join(" "),borderWidth:c.value.slice(0,4).join("px ")+"px",borderColor:s.value.slice(0,4).join(" "),borderRadius:i.value.slice(0,4).join("px ")+"px"}));function f(l){a.value=l,r.value=!1,e.nextTick(()=>{r.value=!0})}function m(l){a.value<4?i.value[a.value]=l:i.value.fill(l),V.emit("valueChanged",b.value)}function N(){return e.createVNode("div",{class:"f-border-editor-directions"},[e.createVNode("div",null,[e.createVNode("div",{style:u.value(0),class:"f-border-editor-direction",title:"左上角",onClick:()=>f(0)},[e.createTextVNode("┏")]),e.createVNode("div",{style:u.value(3),class:"f-border-editor-direction",title:"左下角",onClick:()=>f(3)},[e.createTextVNode("┗")])]),e.createVNode("div",{style:u.value(4),class:"f-border-editor-direction",title:"全部",onClick:()=>f(4)},[e.createTextVNode("╋")]),e.createVNode("div",null,[e.createVNode("div",{style:u.value(1),class:"f-border-editor-direction",title:"右上角",onClick:()=>f(1)},[e.createTextVNode("┓")]),e.createVNode("div",{style:u.value(2),class:"f-border-editor-direction",title:"右下角",onClick:()=>f(2)},[e.createTextVNode("┛")])])])}function y(){return e.createVNode("div",{class:"f-border-editor-customs"},[e.createVNode("div",{class:"f-border-editor-custom"},[e.createVNode("div",{class:"f-border-editor-title"},[e.createTextVNode("圆角(px)")]),e.createVNode(B,{style:"flex: 1 1 0",min:0,modelValue:i.value[a.value],"onUpdate:modelValue":l=>i.value[a.value]=l,onChange:m,class:"f-border-editor-input"},null)])])}function v(){return e.createVNode("div",null,[r.value?e.createVNode("div",{class:"f-border-editor-custom-container"},[N(),y()]):""])}return{renderBorderEditorRadius:v}}const C=e.defineComponent({name:"FBorderEditor",props:x,emits:["valueChanged"],setup(d,V){const n=e.ref(!1),{renderBorderEditorBasic:c}=E(d,V),{renderBorderEditorRadius:s}=k(d,V),i=e.computed(()=>({"f-icon":!0,"mr-1":!0,"f-border-editor-icon":!0,"f-icon-arrow-60-right":!n.value,"f-icon-arrow-60-down":n.value}));function a(){n.value=!n.value}return()=>e.createVNode("div",null,[e.createVNode("div",{class:"f-border-editor-container"},[e.createVNode("div",{style:"display: flex"},[e.createVNode("div",{class:"f-border-editor-title",style:"width: 80px"},[e.createVNode("div",{class:i.value,onClick:a},null),e.createVNode("div",null,[e.createTextVNode("边框")])])]),n.value?e.createVNode("div",null,[c(),s()]):""])])}}),S=g.withInstall(C);o.FBorderEditor=C,o.borderEditorProps=x,o.default=S,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});