@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
240 lines (239 loc) • 7.3 kB
JavaScript
import { ref as u, computed as B, createVNode as e, createTextVNode as l, nextTick as E, defineComponent as k } from "vue";
import x from "../color-picker/index.esm.js";
import D from "../combo-list/index.esm.js";
import S from "../number-spinner/index.esm.js";
import { withInstall as F } from "../common/index.esm.js";
const w = {
/** 边框线型列表 */
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 V(o, b) {
const {
defaultBorderStyles: a
} = o, s = u(o.styles), c = u(o.widths), i = u(o.colors), n = u(o.radiuses), r = u(4), v = u(!0), y = B(() => 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 = B(() => ({
borderStyle: s.value.slice(0, 4).join(" "),
borderWidth: c.value.slice(0, 4).join("px ") + "px",
borderColor: i.value.slice(0, 4).join(" "),
borderRadius: n.value.slice(0, 4).join("px ") + "px"
}));
function m(t) {
r.value = t, v.value = !1, E(() => {
v.value = !0;
});
}
function C(t) {
r.value < 4 ? s.value[r.value] = t[0].id : s.value.fill(t[0].id), b.emit("valueChanged", f.value);
}
function h(t) {
r.value < 4 ? c.value[r.value] = t : c.value.fill(t), b.emit("valueChanged", f.value);
}
function g(t) {
r.value < 4 ? i.value[r.value] = t.elementValue.value : i.value.fill(t.elementValue.value), b.emit("valueChanged", f.value);
}
function d() {
return e("div", {
class: "f-border-editor-directions"
}, [e("div", {
style: y.value(3),
class: "f-border-editor-direction",
title: "左边框",
onClick: () => m(3)
}, [l("┣")]), e("div", null, [e("div", {
style: y.value(0),
class: "f-border-editor-direction",
title: "上边框",
onClick: () => m(0)
}, [l("┳")]), e("div", {
style: y.value(4),
class: "f-border-editor-direction",
title: "全部",
onClick: () => m(4)
}, [l("╋")]), e("div", {
style: y.value(2),
class: "f-border-editor-direction",
title: "下边框",
onClick: () => m(2)
}, [l("┻")])]), e("div", {
style: y.value(1),
class: "f-border-editor-direction",
title: "右边框",
onClick: () => m(1)
}, [l("┫")])]);
}
function p() {
return e("div", {
class: "f-border-editor-customs"
}, [e("div", {
class: "f-border-editor-custom"
}, [e("div", {
class: "f-border-editor-title"
}, [l("线型")]), e(D, {
style: "flex: 1 1 0",
data: a,
modelValue: s.value[r.value],
"onUpdate:modelValue": (t) => s.value[r.value] = t,
onChange: C,
class: "f-border-editor-input"
}, null)]), e("div", {
class: "f-border-editor-custom"
}, [e("div", {
class: "f-border-editor-title"
}, [l("宽度(px)")]), e(S, {
style: "flex: 1 1 0",
min: 0,
modelValue: c.value[r.value],
"onUpdate:modelValue": (t) => c.value[r.value] = t,
onChange: h,
class: "f-border-editor-input"
}, null)]), e("div", {
class: "f-border-editor-custom"
}, [e("div", {
class: "f-border-editor-title"
}, [l("颜色")]), e(x, {
style: "flex: 1 1 0",
color: i.value[r.value],
"onUpdate:color": (t) => i.value[r.value] = t,
onValueChanged: g,
class: "f-border-editor-input"
}, null)])]);
}
function j() {
return e("div", null, [v.value ? e("div", {
class: "f-border-editor-custom-container"
}, [d(), p()]) : ""]);
}
return {
renderBorderEditorBasic: j
};
}
function O(o, b) {
const a = u(o.styles), s = u(o.widths), c = u(o.colors), i = u(o.radiuses), n = u(4), r = u(!0), v = B(() => function(d) {
return {
background: n.value === d ? "linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .2))" : "rgba(0, 0, 0, 0)"
};
}), y = B(() => ({
borderStyle: a.value.slice(0, 4).join(" "),
borderWidth: s.value.slice(0, 4).join("px ") + "px",
borderColor: c.value.slice(0, 4).join(" "),
borderRadius: i.value.slice(0, 4).join("px ") + "px"
}));
function f(d) {
n.value = d, r.value = !1, E(() => {
r.value = !0;
});
}
function m(d) {
n.value < 4 ? i.value[n.value] = d : i.value.fill(d), b.emit("valueChanged", y.value);
}
function C() {
return e("div", {
class: "f-border-editor-directions"
}, [e("div", null, [e("div", {
style: v.value(0),
class: "f-border-editor-direction",
title: "左上角",
onClick: () => f(0)
}, [l("┏")]), e("div", {
style: v.value(3),
class: "f-border-editor-direction",
title: "左下角",
onClick: () => f(3)
}, [l("┗")])]), e("div", {
style: v.value(4),
class: "f-border-editor-direction",
title: "全部",
onClick: () => f(4)
}, [l("╋")]), e("div", null, [e("div", {
style: v.value(1),
class: "f-border-editor-direction",
title: "右上角",
onClick: () => f(1)
}, [l("┓")]), e("div", {
style: v.value(2),
class: "f-border-editor-direction",
title: "右下角",
onClick: () => f(2)
}, [l("┛")])])]);
}
function h() {
return e("div", {
class: "f-border-editor-customs"
}, [e("div", {
class: "f-border-editor-custom"
}, [e("div", {
class: "f-border-editor-title"
}, [l("圆角(px)")]), e(S, {
style: "flex: 1 1 0",
min: 0,
modelValue: i.value[n.value],
"onUpdate:modelValue": (d) => i.value[n.value] = d,
onChange: m,
class: "f-border-editor-input"
}, null)])]);
}
function g() {
return e("div", null, [r.value ? e("div", {
class: "f-border-editor-custom-container"
}, [C(), h()]) : ""]);
}
return {
renderBorderEditorRadius: g
};
}
const A = /* @__PURE__ */ k({
name: "FBorderEditor",
props: w,
emits: ["valueChanged"],
setup(o, b) {
const a = u(!1), {
renderBorderEditorBasic: s
} = V(o, b), {
renderBorderEditorRadius: c
} = O(o, b), i = B(() => ({
"f-icon": !0,
"mr-1": !0,
"f-border-editor-icon": !0,
"f-icon-arrow-60-right": !a.value,
"f-icon-arrow-60-down": a.value
}));
function n() {
a.value = !a.value;
}
return () => e("div", null, [e("div", {
class: "f-border-editor-container"
}, [e("div", {
style: "display: flex"
}, [e("div", {
class: "f-border-editor-title",
style: "width: 80px"
}, [e("div", {
class: i.value,
onClick: n
}, null), e("div", null, [l("边框")])])]), a.value ? e("div", null, [s(), c()]) : ""])]);
}
}), T = F(A);
export {
A as FBorderEditor,
w as borderEditorProps,
T as default
};