deepdark-ui
Version:
面向开发者的暗黑风格的数字孪生组件库；基于vue3的开发
1,544 lines (1,543 loc) • 1.09 MB
JavaScript
import { defineComponent as mt, createElementBlock as G, openBlock as B, createCommentVNode as J, createElementVNode as k, ref as q, watchEffect as Ki, normalizeStyle as Tt, createBlock as wt, renderSlot as Qr, Fragment as Yt, renderList as Xt, unref as tt, toDisplayString as Qa, mergeModels as Cv, useModel as Xx, createVNode as Mv, withCtx as Av, createTextVNode as Ev, useSlots as Zx, computed as qx } from "vue";
const Kx = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "-1 -1 102 22",
width: "100%",
height: "100%",
preserveAspectRatio: "none"
}, Qx = { key: 0 }, jx = ["fill", "fill-opacity"], Jx = ["stroke", "stroke-width"], tb = ["stroke", "stroke-width"], eb = ["stroke"], rb = ["stroke"], ib = ["stroke"], nb = ["stroke"], ab = { key: 1 }, ob = ["fill"], sb = ["stroke"], lb = ["stroke"], ub = ["stroke"], cb = ["stroke"], fb = /* @__PURE__ */ mt({
__name: "index",
props: {
hoverBoo: { default: !1, type: Boolean },
strokeWidth: { default: 0.5, type: Number },
colorDefault: { default: "var(--sky-blue-7)", type: String },
colorDark: { default: "var(--sky-blue-8)", type: String },
colorDark2: { default: "var(--sky-blue-9)", type: String },
colorDark3: { default: "var(--sky-blue-10)", type: String },
colorBackground: { default: "var(--bgColor-deep-dark2)", type: String },
opacity: { default: 0.4, type: Number }
},
setup(e) {
return (t, r) => (B(), G("svg", Kx, [
e.hoverBoo ? J("", !0) : (B(), G("g", Qx, [
k("path", {
d: "M0 10 L4 0 L96 0 L100 10 L96 20 L4 20 L0 10z",
fill: e.colorBackground,
"fill-opacity": e.opacity
}, null, 8, jx),
k("path", {
d: "M2 6 L4 0 L96 0 L98 6",
stroke: e.colorDefault,
"stroke-width": e.strokeWidth,
fill: "none"
}, null, 8, Jx),
k("path", {
d: "M2 14 L4 20 L96 20 L98 14",
stroke: e.colorDefault,
"stroke-width": e.strokeWidth,
fill: "none"
}, null, 8, tb),
k("ellipse", {
cx: "1.7",
cy: "7",
rx: "1.5%",
ry: "5%",
stroke: e.colorDefault,
"stroke-width": "0.5"
}, null, 8, eb),
k("ellipse", {
cx: "1.7",
cy: "13",
rx: "1.5%",
ry: "5%",
stroke: e.colorDefault,
"stroke-width": "0.5"
}, null, 8, rb),
k("ellipse", {
cx: "98.3",
cy: "7",
rx: "1.5%",
ry: "5%",
stroke: e.colorDefault,
"stroke-width": "0.5"
}, null, 8, ib),
k("ellipse", {
cx: "98.3",
cy: "13",
rx: "1.5%",
ry: "5%",
stroke: e.colorDefault,
"stroke-width": "0.5"
}, null, 8, nb)
])),
e.hoverBoo ? (B(), G("g", ab, [
k("path", {
d: "M0 10 L4 0 L96 0 L100 10 L96 20 L4 20 L0 10z",
fill: e.colorBackground,
"fill-opacity": "0.9"
}, null, 8, ob),
k("path", {
d: "M2 8 L4 0 L96 0 L98 8",
stroke: e.colorDefault,
"stroke-width": "0.5",
fill: "none"
}, null, 8, sb),
k("path", {
d: "M2 12 L4 20 L96 20 L98 12",
stroke: e.colorDefault,
"stroke-width": "0.5",
fill: "none"
}, null, 8, lb),
k("ellipse", {
cx: "2",
cy: "10",
rx: "2%",
ry: "7%",
stroke: e.colorDefault,
"stroke-width": "0.5"
}, null, 8, ub),
k("ellipse", {
cx: "98",
cy: "10",
rx: "2%",
ry: "7%",
stroke: e.colorDefault,
"stroke-width": "0.5"
}, null, 8, cb)
])) : J("", !0)
]));
}
}), hb = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "-1 -1 102 22",
width: "100%",
height: "100%",
preserveAspectRatio: "none"
}, vb = ["stroke"], db = { key: 0 }, pb = ["fill"], gb = ["fill"], yb = ["fill"], mb = ["fill"], _b = ["fill"], xb = ["fill"], bb = ["fill"], wb = ["fill"], Sb = ["fill"], Db = ["fill"], kb = ["fill"], Tb = ["fill"], Lb = ["fill", "fill-opacity"], Cb = { key: 1 }, Mb = ["fill"], Ab = ["fill"], Eb = ["fill"], Ib = ["fill"], Pb = ["fill"], Ob = ["fill"], Rb = ["fill"], Nb = ["fill"], Bb = ["fill"], Vb = ["fill"], $b = ["fill"], zb = ["fill"], Fb = ["fill"], Gb = /* @__PURE__ */ mt({
__name: "index",
props: {
hoverBoo: { default: !1, type: Boolean },
strokeWidth: { default: 0.5, type: Number },
colorDefault: { default: "var(--sky-blue-7)", type: String },
colorDark: { default: "var(--sky-blue-8)", type: String },
colorDark2: { default: "var(--sky-blue-9)", type: String },
colorDark3: { default: "var(--sky-blue-10)", type: String },
colorHoverBackground: { default: "var(--bgColor-deep-dark)", type: String },
colorBackground: { default: "var(--bgColor-deep-dark2)", type: String },
opacity: { default: 0.4, type: Number }
},
setup(e) {
return (t, r) => (B(), G("svg", hb, [
k("path", {
d: "M1 0 L99 0 M1 20 L99 20",
stroke: e.colorDefault,
"stroke-width": "0.5"
}, null, 8, vb),
e.hoverBoo ? J("", !0) : (B(), G("g", db, [
k("rect", {
x: "0",
y: "1",
width: "2",
height: "1",
fill: e.colorDark2
}, null, 8, pb),
k("rect", {
x: "0",
y: "5",
width: "2",
height: "1",
fill: e.colorDark
}, null, 8, gb),
k("rect", {
x: "0",
y: "8.2",
width: "2",
height: "1",
fill: e.colorDefault
}, null, 8, yb),
k("rect", {
x: "0",
y: "11.8",
width: "2",
height: "1",
fill: e.colorDefault
}, null, 8, mb),
k("rect", {
x: "0",
y: "15",
width: "2",
height: "1",
fill: e.colorDark
}, null, 8, _b),
k("rect", {
x: "0",
y: "18",
width: "2",
height: "1",
fill: e.colorDark2
}, null, 8, xb),
k("rect", {
x: "98",
y: "1",
width: "2",
height: "1",
fill: e.colorDark2
}, null, 8, bb),
k("rect", {
x: "98",
y: "5",
width: "2",
height: "1",
fill: e.colorDark
}, null, 8, wb),
k("rect", {
x: "98",
y: "8.2",
width: "2",
height: "1",
fill: e.colorDefault
}, null, 8, Sb),
k("rect", {
x: "98",
y: "11.8",
width: "2",
height: "1",
fill: e.colorDefault
}, null, 8, Db),
k("rect", {
x: "98",
y: "15",
width: "2",
height: "1",
fill: e.colorDark
}, null, 8, kb),
k("rect", {
x: "98",
y: "18",
width: "2",
height: "1",
fill: e.colorDark2
}, null, 8, Tb),
k("path", {
d: "M2 1 L98 1 L98 19 L2 19",
fill: e.colorBackground,
"fill-opacity": e.opacity
}, null, 8, Lb)
])),
e.hoverBoo ? (B(), G("g", Cb, [
k("rect", {
x: "0",
y: "1",
width: "3",
height: "2.5",
fill: e.colorDark2
}, null, 8, Mb),
k("rect", {
x: "0",
y: "4",
width: "3",
height: "2.5",
fill: e.colorDark
}, null, 8, Ab),
k("rect", {
x: "0",
y: "7",
width: "3",
height: "2.7",
fill: e.colorDefault
}, null, 8, Eb),
k("rect", {
x: "0",
y: "10.2",
width: "3",
height: "2.7",
fill: e.colorDefault
}, null, 8, Ib),
k("rect", {
x: "0",
y: "13.5",
width: "3",
height: "2.5",
fill: e.colorDark
}, null, 8, Pb),
k("rect", {
x: "0",
y: "16.5",
width: "3",
height: "2.5",
fill: e.colorDark2
}, null, 8, Ob),
k("rect", {
x: "97",
y: "1",
width: "3",
height: "2.5",
fill: e.colorDark2
}, null, 8, Rb),
k("rect", {
x: "97",
y: "4",
width: "3",
height: "2.5",
fill: e.colorDark
}, null, 8, Nb),
k("rect", {
x: "97",
y: "7",
width: "3",
height: "2.7",
fill: e.colorDefault
}, null, 8, Bb),
k("rect", {
x: "97",
y: "10.2",
width: "3",
height: "2.7",
fill: e.colorDefault
}, null, 8, Vb),
k("rect", {
x: "97",
y: "13.5",
width: "3",
height: "2.5",
fill: e.colorDark
}, null, 8, $b),
k("rect", {
x: "97",
y: "16.5",
width: "3",
height: "2.5",
fill: e.colorDark2
}, null, 8, zb),
k("path", {
d: "M2 1 L98 1 L98 19 L2 19",
fill: e.colorHoverBackground
}, null, 8, Fb)
])) : J("", !0)
]));
}
}), Wb = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "-1 -1 102 22",
width: "100%",
height: "100%",
preserveAspectRatio: "none"
}, Hb = { key: 0 }, Ub = ["fill", "fill-opacity"], Yb = ["stroke", "stroke-width"], Xb = ["stroke", "stroke-width"], Zb = ["stroke", "stroke-width"], qb = { key: 1 }, Kb = ["fill", "stroke"], Qb = ["stroke"], jb = ["stroke"], Jb = ["stroke"], tw = /* @__PURE__ */ mt({
__name: "index",
props: {
hoverBoo: { default: !1, type: Boolean },
strokeWidth: { default: 0.5, type: Number },
colorDefault: { default: "var(--sky-blue-7)", type: String },
colorDark: { default: "var(--sky-blue-8)", type: String },
colorDark2: { default: "var(--sky-blue-9)", type: String },
colorDark3: { default: "var(--sky-blue-10)", type: String },
colorHoverBackground: { default: "var(--bgColor-deep-dark)", type: String },
colorBackground: { default: "var(--bgColor-deep-dark2)", type: String },
opacity: { default: 0.4, type: Number }
},
setup(e) {
return (t, r) => (B(), G("svg", Wb, [
e.hoverBoo ? J("", !0) : (B(), G("g", Hb, [
k("path", {
d: "M6 0 L94 0 L99 2 L99 18 L94 20 L6 20 L1 18 L1 2 L6 0",
fill: e.colorBackground,
"fill-opacity": e.opacity
}, null, 8, Ub),
k("path", {
d: "M2 0 L48 0 M52 0 L98 0 M2 20 L48 20 M52 20 L98 20",
fill: "none",
stroke: e.colorDefault,
"stroke-width": e.strokeWidth
}, null, 8, Yb),
k("path", {
d: "M0 2 L0 9 M0 11 L0 18",
fill: "none",
stroke: e.colorDefault,
"stroke-width": e.strokeWidth
}, null, 8, Xb),
k("path", {
d: "M100 2 L100 9 M100 11 L100 18",
fill: "none",
stroke: e.colorDefault,
"stroke-width": e.strokeWidth
}, null, 8, Zb)
])),
e.hoverBoo ? (B(), G("g", qb, [
k("path", {
d: "M6 0 L94 0 L99 2 L99 18 L94 20 L6 20 L1 18 L1 2 L6 0",
fill: e.colorBackground,
"fill-opacity": 0.9,
stroke: e.colorDefault,
"stroke-width": "0.5"
}, null, 8, Kb),
k("path", {
d: "M5 0 L95 0 M2 20 L95 20",
fill: "none",
stroke: e.colorDefault,
"stroke-width": "0.5"
}, null, 8, Qb),
k("path", {
d: "M5 0 L0 2 M0 18 L5 20 M95 0 L100 2 M100 18 L95 20",
fill: "none",
stroke: e.colorDefault,
"stroke-width": "0.5"
}, null, 8, jb),
k("path", {
d: "M0 2 L0 18 M100 2 L100 18",
fill: "none",
stroke: e.colorDark,
"stroke-width": "2"
}, null, 8, Jb)
])) : J("", !0)
]));
}
}), ew = { class: "--dk--button--content" }, rw = /* @__PURE__ */ mt({
__name: "index",
props: {
width: { default: "120px", type: String },
height: { default: "26px", type: String },
mold: { default: "circle", type: String },
colorType: { default: "sky-blue", type: String },
strokeWidth: { default: 0.5, type: Number },
colorBackground: { default: null, type: String },
opacity: { default: 0.4, type: Number },
customStyle: { default: {}, type: Object }
},
setup(e) {
let t = e;
const r = q(!1), i = q("var(--sky-blue-4)"), n = q("var(--sky-blue-5)"), a = q("var(--sky-blue-7)"), o = q("var(--sky-blue-8)"), s = q("var(--sky-blue-9)"), l = q("var(--sky-blue-10)"), u = q(""), c = q({});
Ki(() => {
t.colorType && (i.value = "var(--" + t.colorType + "-4)", n.value = "var(--" + t.colorType + "-5)", a.value = "var(--" + t.colorType + "-7)", o.value = "var(--" + t.colorType + "-8)", s.value = "var(--" + t.colorType + "-9)", l.value = "var(--" + t.colorType + "-10)", u.value = t.colorBackground ? t.colorBackground : s.value, c.value = { color: n.value }, Object.assign(c.value, t.customStyle));
});
const f = () => {
r.value = !0;
}, v = () => {
r.value = !1;
};
return (h, d) => (B(), G("div", {
style: Tt({ width: e.width, height: e.height, display: "inline-block" })
}, [
k("section", {
class: "--dk--button",
onMouseover: f,
onMouseleave: v
}, [
e.mold === "circle" ? (B(), wt(fb, {
key: 0,
colorText: n.value,
colorDefault: a.value,
colorDark: o.value,
colorDark2: s.value,
colorDark3: l.value,
hoverBoo: r.value,
width: e.width,
height: e.height,
strokeWidth: e.strokeWidth,
colorBackground: u.value,
opacity: e.opacity
}, null, 8, ["colorText", "colorDefault", "colorDark", "colorDark2", "colorDark3", "hoverBoo", "width", "height", "strokeWidth", "colorBackground", "opacity"])) : J("", !0),
e.mold === "stick" ? (B(), wt(Gb, {
key: 1,
colorText: n.value,
colorDefault: a.value,
colorDark: o.value,
colorDark2: s.value,
colorDark3: l.value,
hoverBoo: r.value,
strokeWidth: e.strokeWidth,
colorBackground: u.value,
opacity: e.opacity
}, null, 8, ["colorText", "colorDefault", "colorDark", "colorDark2", "colorDark3", "hoverBoo", "strokeWidth", "colorBackground", "opacity"])) : J("", !0),
e.mold === "bar" ? (B(), wt(tw, {
key: 2,
colorText: n.value,
colorDefault: a.value,
colorDark: o.value,
colorDark2: s.value,
colorDark3: l.value,
hoverBoo: r.value,
strokeWidth: e.strokeWidth,
colorBackground: u.value,
opacity: e.opacity
}, null, 8, ["colorText", "colorDefault", "colorDark", "colorDark2", "colorDark3", "hoverBoo", "strokeWidth", "colorBackground", "opacity"])) : J("", !0),
k("main", ew, [
k("section", null, [
Qr(h.$slots, "icon", {}, void 0, !0)
]),
k("section", {
class: "--dk--button--content--text",
style: Tt(c.value)
}, [
Qr(h.$slots, "default", {}, void 0, !0)
], 4)
])
], 32)
], 4));
}
}), Qi = (e, t) => {
const r = e.__vccOpts || e;
for (const [i, n] of t)
r[i] = n;
return r;
}, ja = /* @__PURE__ */ Qi(rw, [["__scopeId", "data-v-446cf454"]]);
ja.install = (e) => (e.component("dk-button", ja), e);
const ji = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
let t = Math.random() * 16 | 0;
return (e == "x" ? t : t & 3 | 8).toString(16);
}), iw = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 -0.5 100 101",
width: "100%",
height: "100%",
preserveAspectRatio: "none"
}, nw = ["fill", "fill-opacity", "stroke", "stroke-width"], aw = ["stroke"], ow = ["fill"], sw = ["cy", "fill"], lw = ["cy", "fill"], uw = ["cy", "fill"], cw = ["cy", "fill"], fw = { key: 0 }, hw = ["id"], vw = ["stop-color"], dw = ["stop-color"], pw = ["id"], gw = ["stop-color"], yw = ["stop-color"], mw = ["id"], _w = ["stop-color"], xw = ["stop-color"], bw = ["id"], ww = ["stop-color"], Sw = ["stop-color"], Dw = ["id"], kw = ["stop-color"], Tw = ["stop-color"], Lw = ["id"], Cw = ["stop-color"], Mw = ["stop-color"], Aw = ["id"], Ew = ["stop-color"], Iw = ["stop-color"], Pw = ["id"], Ow = ["stop-color"], Rw = ["stop-color"], Nw = ["fill"], Bw = ["fill"], Vw = ["fill"], $w = ["fill"], zw = ["fill"], Fw = ["fill"], Gw = ["fill"], Ww = ["fill"], Hw = /* @__PURE__ */ mt({
__name: "index",
props: {
gradientBoo: { default: !1, type: Boolean },
strokeWidth: { default: 0.5, type: Number },
colorDefault: { default: "var(--sky-blue-7)", type: String },
colorDark: { default: "var(--sky-blue-8)", type: String },
colorDark2: { default: "var(--sky-blue-9)", type: String },
colorDark3: { default: "var(--sky-blue-10)", type: String },
colorBackground: { default: "var(--bgColor-deep-dark2)", type: String },
opacity: { default: 0.4, type: Number }
},
setup(e) {
let t = ji();
return (r, i) => (B(), G("svg", iw, [
k("path", {
d: "M3 1.2 L5 0 L96 0 L100 4 L100 30 L98 33 L98 77 L100 80 L100 96 L96 100 L4 100 L0 97 L0 80 L2 77 L2 33 L0 30 L0 5 L1.3 3",
fill: e.colorBackground,
"fill-opacity": e.opacity,
stroke: e.colorDark,
"stroke-width": e.strokeWidth
}, null, 8, nw),
k("circle", {
cx: "2.2",
cy: "2.2",
r: "1.4",
fill: "none",
stroke: e.colorDefault,
"stroke-width": "0.4"
}, null, 8, aw),
k("circle", {
cx: "2.2",
cy: "2.2",
r: "0.8",
fill: e.colorDefault
}, null, 8, ow),
(B(), G(Yt, null, Xt(16, (n) => k("circle", {
cx: "0.4",
cy: 29.6 + n * 3,
r: "0.4",
fill: e.colorDefault
}, null, 8, sw)), 64)),
(B(), G(Yt, null, Xt(15, (n) => k("circle", {
cx: "1.2",
cy: 31.1 + n * 3,
r: "0.4",
fill: e.colorDefault
}, null, 8, lw)), 64)),
(B(), G(Yt, null, Xt(16, (n) => k("circle", {
cx: "99.6",
cy: 29.6 + n * 3,
r: "0.4",
fill: e.colorDefault
}, null, 8, uw)), 64)),
(B(), G(Yt, null, Xt(15, (n) => k("circle", {
cx: "98.8",
cy: 31.1 + n * 3,
r: "0.4",
fill: e.colorDefault
}, null, 8, cw)), 64)),
e.gradientBoo ? (B(), G("g", fw, [
k("defs", null, [
k("linearGradient", {
id: `grad_left${tt(t)}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark,
"stop-opacity": "0.5"
}, null, 8, vw),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, dw)
], 8, hw),
k("linearGradient", {
id: `grad_right${tt(t)}`,
x1: "100%",
y1: "0%",
x2: "0%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark,
"stop-opacity": "0.5"
}, null, 8, gw),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, yw)
], 8, pw),
k("linearGradient", {
id: `grad_top${tt(t)}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark,
"stop-opacity": "0.5"
}, null, 8, _w),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, xw)
], 8, mw),
k("linearGradient", {
id: `grad_bottom${tt(t)}`,
x1: "0%",
y1: "100%",
x2: "0%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark,
"stop-opacity": "0.5"
}, null, 8, ww),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, Sw)
], 8, bw),
k("linearGradient", {
id: `grad_lt${tt(t)}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "100%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark,
"stop-opacity": "0.5"
}, null, 8, kw),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, Tw)
], 8, Dw),
k("linearGradient", {
id: `grad_lb${tt(t)}`,
x1: "0%",
y1: "100%",
x2: "100%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark,
"stop-opacity": "0.8"
}, null, 8, Cw),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, Mw)
], 8, Lw),
k("linearGradient", {
id: `grad_rt${tt(t)}`,
x1: "100%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark,
"stop-opacity": "0.8"
}, null, 8, Ew),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, Iw)
], 8, Aw),
k("linearGradient", {
id: `grad_rb${tt(t)}`,
x1: "100%",
y1: "100%",
x2: "0%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark,
"stop-opacity": "0.8"
}, null, 8, Ow),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, Rw)
], 8, Pw)
]),
k("rect", {
x: "0",
y: "4",
width: "4",
height: "92",
fill: `url(#grad_left${tt(t)})`
}, null, 8, Nw),
k("rect", {
x: "96",
y: "4",
width: "4",
height: "92",
fill: `url(#grad_right${tt(t)})`
}, null, 8, Bw),
k("rect", {
x: "4",
y: "0",
width: "92",
height: "4",
fill: `url(#grad_top${tt(t)})`
}, null, 8, Vw),
k("rect", {
x: "4",
y: "96",
width: "92",
height: "4",
fill: `url(#grad_bottom${tt(t)})`
}, null, 8, $w),
k("polygon", {
points: "5,0 0,5 4,5 5,4",
fill: `url(#grad_lt${tt(t)})`
}, null, 8, zw),
k("polygon", {
points: "0,96 4,100 4,96 4,96",
fill: `url(#grad_lb${tt(t)})`
}, null, 8, Fw),
k("polygon", {
points: "96,0 100,4 96,4 96,4",
fill: `url(#grad_rt${tt(t)})`
}, null, 8, Gw),
k("polygon", {
points: "100,96 96,100 96,96 96,96",
fill: `url(#grad_rb${tt(t)})`
}, null, 8, Ww)
])) : J("", !0)
]));
}
}), Uw = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 100 100",
width: "1em",
preserveAspectRatio: "none"
}, Yw = ["fill"], Xw = ["fill"], Zw = ["fill"], qw = /* @__PURE__ */ mt({
__name: "headLeft",
props: {
colorDefault: { default: "var(--sky-blue-7)", type: String }
},
setup(e) {
return (t, r) => (B(), G("svg", Uw, [
k("circle", {
cx: "33",
cy: "33",
r: "10",
fill: e.colorDefault
}, null, 8, Yw),
k("circle", {
cx: "33",
cy: "66",
r: "10",
fill: e.colorDefault
}, null, 8, Xw),
k("circle", {
cx: "66",
cy: "50",
r: "10",
fill: e.colorDefault
}, null, 8, Zw)
]));
}
}), Kw = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 100 100",
width: "1em",
preserveAspectRatio: "none"
}, Qw = ["fill"], jw = ["fill"], Jw = ["fill"], tS = /* @__PURE__ */ mt({
__name: "headRight",
props: {
colorDefault: { default: "var(--sky-blue-7)", type: String }
},
setup(e) {
return (t, r) => (B(), G("svg", Kw, [
k("circle", {
cx: "66",
cy: "33",
r: "10",
fill: e.colorDefault
}, null, 8, Qw),
k("circle", {
cx: "66",
cy: "66",
r: "10",
fill: e.colorDefault
}, null, 8, jw),
k("circle", {
cx: "33",
cy: "50",
r: "10",
fill: e.colorDefault
}, null, 8, Jw)
]));
}
}), eS = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "-0.5 -0.5 101 101",
width: "100%",
height: "100%",
preserveAspectRatio: "none"
}, rS = ["fill", "fill-opacity"], iS = ["stroke", "stroke-width"], nS = ["stroke"], aS = ["stroke"], oS = ["fill"], sS = ["fill"], lS = ["fill"], uS = ["fill"], cS = { key: 0 }, fS = ["id"], hS = ["stop-color"], vS = ["stop-color"], dS = ["id"], pS = ["stop-color"], gS = ["stop-color"], yS = ["id"], mS = ["stop-color"], _S = ["stop-color"], xS = ["id"], bS = ["stop-color"], wS = ["stop-color"], SS = ["id"], DS = ["stop-color"], kS = ["stop-color"], TS = ["id"], LS = ["stop-color"], CS = ["stop-color"], MS = ["fill"], AS = ["fill"], ES = ["fill"], IS = ["fill"], PS = ["fill"], OS = ["fill"], RS = /* @__PURE__ */ mt({
__name: "index",
props: {
gradientBoo: { default: !1, type: Boolean },
strokeWidth: { default: 0.5, type: Number },
colorDefault: { default: "var(--sky-blue-7)", type: String },
colorDark: { default: "var(--sky-blue-8)", type: String },
colorDark2: { default: "var(--sky-blue-9)", type: String },
colorDark3: { default: "var(--sky-blue-10)", type: String },
colorBackground: { default: "var(--bgColor-deep-dark2)", type: String },
opacity: { default: 0.4, type: Number }
},
setup(e) {
let t = ji();
return (r, i) => (B(), G("svg", eS, [
k("path", {
d: "M5 0 L98 0 L100 5 L100 95 L95 100 L0 100 L0 5 L5 0z",
fill: e.colorBackground,
"fill-opacity": e.opacity
}, null, 8, rS),
k("path", {
d: "M5 0 L91 0 M100 3 L100 95 L95 100 L0 100 L0 5 L5 0",
fill: "none",
stroke: e.colorDark,
"stroke-width": e.strokeWidth
}, null, 8, iS),
k("path", {
d: "M10 0 L5 0 L0 5 L0 10 M100 90 L100 95 L95 100 L90 100",
fill: "none",
stroke: e.colorDefault,
"stroke-width": "1"
}, null, 8, nS),
k("path", {
d: "M45 0 L55 0",
fill: "none",
stroke: e.colorDark,
"stroke-width": "2"
}, null, 8, aS),
k("path", {
d: "M98 -0.5 L100 3 L99 3 L97 -0.5z",
fill: e.colorDefault
}, null, 8, oS),
k("path", {
d: "M96 -0.5 L98 3 L97 3 L95 -0.5z",
fill: e.colorDark
}, null, 8, sS),
k("path", {
d: "M94 -0.5 L96 3 L95 3 L93 -0.5z",
fill: e.colorDark2
}, null, 8, lS),
k("path", {
d: "M92 -0.5 L94 3 L93 3 L91 -0.5z",
fill: e.colorDark3
}, null, 8, uS),
e.gradientBoo ? (B(), G("g", cS, [
k("defs", null, [
k("linearGradient", {
id: `grad_left${tt(t)}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.3"
}, null, 8, hS),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, vS)
], 8, fS),
k("linearGradient", {
id: `grad_right${tt(t)}`,
x1: "100%",
y1: "0%",
x2: "0%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.3"
}, null, 8, pS),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, gS)
], 8, dS),
k("linearGradient", {
id: `grad_top${tt(t)}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.3"
}, null, 8, mS),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, _S)
], 8, yS),
k("linearGradient", {
id: `grad_bottom${tt(t)}`,
x1: "0%",
y1: "100%",
x2: "0%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.3"
}, null, 8, bS),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, wS)
], 8, xS),
k("linearGradient", {
id: `grad_lt${tt(t)}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "100%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.5"
}, null, 8, DS),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, kS)
], 8, SS),
k("linearGradient", {
id: `grad_rb${tt(t)}`,
x1: "100%",
y1: "100%",
x2: "0%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.5"
}, null, 8, LS),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, CS)
], 8, TS)
]),
k("rect", {
x: "0",
y: "5",
width: "4",
height: "95",
fill: `url(#grad_left${tt(t)})`
}, null, 8, MS),
k("rect", {
x: "96",
y: "5",
width: "4",
height: "90",
fill: `url(#grad_right${tt(t)})`
}, null, 8, AS),
k("rect", {
x: "5",
y: "0",
width: "90",
height: "4",
fill: `url(#grad_top${tt(t)})`
}, null, 8, ES),
k("rect", {
x: "0",
y: "96",
width: "95",
height: "4",
fill: `url(#grad_bottom${tt(t)})`
}, null, 8, IS),
k("polygon", {
points: "5,0 5,5 0,5",
fill: `url(#grad_lt${tt(t)})`
}, null, 8, PS),
k("polygon", {
points: "100,95 95,95 95,100",
fill: `url(#grad_rb${tt(t)})`
}, null, 8, OS)
])) : J("", !0)
]));
}
}), NS = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 100 100",
width: "1em",
preserveAspectRatio: "none"
}, BS = ["fill"], VS = ["fill"], $S = ["fill"], zS = /* @__PURE__ */ mt({
__name: "headLeft",
props: {
colorDefault: { default: "var(--sky-blue-7)", type: String },
colorDark: { default: "var(--sky-blue-8)", type: String },
colorDark2: { default: "var(--sky-blue-9)", type: String }
},
setup(e) {
return (t, r) => (B(), G("svg", NS, [
k("path", {
d: "M0 10 L30 50 L0 90 L20 90 L50 50 L20 10 L0 10z",
fill: e.colorDefault
}, null, 8, BS),
k("path", {
d: "M30 10 L60 50 L30 90 L50 90 L80 50 L50 10 L30 10z",
fill: e.colorDark
}, null, 8, VS),
k("path", {
d: "M60 10 L90 50 L60 90 L80 90 L110 50 L80 10 L60 10z",
fill: e.colorDark2
}, null, 8, $S)
]));
}
}), FS = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 110 100",
width: "1em",
preserveAspectRatio: "none"
}, GS = ["fill"], WS = ["fill"], HS = ["fill"], US = /* @__PURE__ */ mt({
__name: "headRight",
props: {
colorDefault: { default: "var(--sky-blue-7)", type: String },
colorDark: { default: "var(--sky-blue-8)", type: String },
colorDark2: { default: "var(--sky-blue-9)", type: String }
},
setup(e) {
return (t, r) => (B(), G("svg", FS, [
k("path", {
d: "M30 10 L0 50 L30 90 L50 90 L20 50 L50 10 L20 10z",
fill: e.colorDark2
}, null, 8, GS),
k("path", {
d: "M60 10 L30 50 L60 90 L80 90 L50 50 L80 10 L50 10z",
fill: e.colorDark
}, null, 8, WS),
k("path", {
d: "M90 10 L60 50 L90 90 L110 90 L80 50 L110 10 L80 10z",
fill: e.colorDefault
}, null, 8, HS)
]));
}
}), YS = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 100 100",
width: "100%",
height: "100%",
preserveAspectRatio: "none"
}, XS = ["fill", "fill-opacity", "stroke", "stroke-width"], ZS = ["stroke"], qS = ["fill"], KS = ["fill"], QS = { key: 0 }, jS = ["id"], JS = ["stop-color"], tD = ["stop-color"], eD = ["id"], rD = ["stop-color"], iD = ["stop-color"], nD = ["id"], aD = ["stop-color"], oD = ["stop-color"], sD = ["id"], lD = ["stop-color"], uD = ["stop-color"], cD = ["id"], fD = ["stop-color"], hD = ["stop-color"], vD = ["id"], dD = ["stop-color"], pD = ["stop-color"], gD = ["id"], yD = ["stop-color"], mD = ["stop-color"], _D = ["id"], xD = ["stop-color"], bD = ["stop-color"], wD = ["id"], SD = ["stop-color"], DD = ["stop-color"], kD = ["id"], TD = ["stop-color"], LD = ["stop-color"], CD = ["id"], MD = ["stop-color"], AD = ["stop-color"], ED = ["id"], ID = ["stop-color"], PD = ["stop-color"], OD = { key: 1 }, RD = ["fill"], ND = ["fill"], BD = ["fill"], VD = ["fill"], $D = ["fill"], zD = ["fill"], FD = ["fill"], GD = ["fill"], WD = /* @__PURE__ */ mt({
__name: "index",
props: {
gradientBoo: { default: !1, type: Boolean },
strokeWidth: { default: 0.5, type: Number },
colorDefault: { default: "var(--sky-blue-7)", type: String },
colorDark: { default: "var(--sky-blue-8)", type: String },
colorDark2: { default: "var(--sky-blue-9)", type: String },
colorDark3: { default: "var(--sky-blue-10)", type: String },
colorBackground: { default: "var(--bgColor-deep-dark2)", type: String },
opacity: { default: 0.4, type: Number }
},
setup(e) {
let t = ji();
return (r, i) => (B(), G("svg", YS, [
k("path", {
d: "M5 0 L95 0 L100 5 L100 95 L95 100 L5 100 L0 95 L0 5 L5 0",
fill: e.colorBackground,
"fill-opacity": e.opacity,
stroke: e.colorDark,
"stroke-width": e.strokeWidth
}, null, 8, XS),
k("path", {
d: `M10 0 L5 0 L0 5 L0 10 M90 0 L95 0 L100 5 L100 10 M100 90 L100 95 L95 100 L90 100 M0 90 L0 95 L5\r
100 L10 100`,
fill: "none",
stroke: e.colorDefault,
"stroke-width": "1"
}, null, 8, ZS),
k("path", {
d: "M0 30 L0 80 L1.5 75 L1.5 35Z",
fill: e.colorDark,
stroke: "none",
"stroke-width": "0"
}, null, 8, qS),
k("path", {
d: "M100 30 L100 80 L98.5 75 L98.5 35Z",
fill: e.colorDark,
stroke: "none",
"stroke-width": "0"
}, null, 8, KS),
e.gradientBoo ? (B(), G("defs", QS, [
k("linearGradient", {
id: `grad_left${tt(t)}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.3"
}, null, 8, JS),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, tD)
], 8, jS),
k("linearGradient", {
id: `grad_right${tt(t)}`,
x1: "100%",
y1: "0%",
x2: "0%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.3"
}, null, 8, rD),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, iD)
], 8, eD),
k("linearGradient", {
id: `grad_top${tt(t)}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.3"
}, null, 8, aD),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, oD)
], 8, nD),
k("linearGradient", {
id: `grad_bottom${tt(t)}`,
x1: "0%",
y1: "100%",
x2: "0%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.3"
}, null, 8, lD),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, uD)
], 8, sD),
k("linearGradient", {
id: `grad_lt${tt(t)}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "100%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.5"
}, null, 8, fD),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, hD)
], 8, cD),
k("linearGradient", {
id: `grad_lb${tt(t)}`,
x1: "0%",
y1: "100%",
x2: "100%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.5"
}, null, 8, dD),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, pD)
], 8, vD),
k("linearGradient", {
id: `grad_rt${tt(t)}`,
x1: "100%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.5"
}, null, 8, yD),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, mD)
], 8, gD),
k("linearGradient", {
id: `grad_rb${tt(t)}`,
x1: "100%",
y1: "100%",
x2: "0%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.5"
}, null, 8, xD),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, bD)
], 8, _D),
k("linearGradient", {
id: `grad_lt${tt(t)}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "100%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.5"
}, null, 8, SD),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, DD)
], 8, wD),
k("linearGradient", {
id: `grad_lb${tt(t)}`,
x1: "0%",
y1: "100%",
x2: "100%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.5"
}, null, 8, TD),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, LD)
], 8, kD),
k("linearGradient", {
id: `grad_rt${tt(t)}`,
x1: "100%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.5"
}, null, 8, MD),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, AD)
], 8, CD),
k("linearGradient", {
id: `grad_rb${tt(t)}`,
x1: "100%",
y1: "100%",
x2: "0%",
y2: "0%"
}, [
k("stop", {
offset: "0%",
"stop-color": e.colorDark2,
"stop-opacity": "0.5"
}, null, 8, ID),
k("stop", {
offset: "100%",
"stop-color": e.colorDark2,
"stop-opacity": "0"
}, null, 8, PD)
], 8, ED)
])) : J("", !0),
e.gradientBoo ? (B(), G("g", OD, [
k("rect", {
x: "0",
y: "4",
width: "4",
height: "92",
fill: `url(#grad_left${tt(t)})`
}, null, 8, RD),
k("rect", {
x: "96",
y: "4",
width: "4",
height: "92",
fill: `url(#grad_right${tt(t)})`
}, null, 8, ND),
k("rect", {
x: "4",
y: "0",
width: "92",
height: "4",
fill: `url(#grad_top${tt(t)})`
}, null, 8, BD),
k("rect", {
x: "4",
y: "96",
width: "92",
height: "4",
fill: `url(#grad_bottom${tt(t)})`
}, null, 8, VD),
k("polygon", {
points: "5,0 0,5 4,5 5,4",
fill: `url(#grad_lt${tt(t)})`
}, null, 8, $D),
k("polygon", {
points: "0,96 4,100 4,96 4,96",
fill: `url(#grad_lb${tt(t)})`
}, null, 8, zD),
k("polygon", {
points: "96,0 100,4 96,4 96,4",
fill: `url(#grad_rt${tt(t)})`
}, null, 8, FD),
k("polygon", {
points: "100,96 96,100 96,96 96,96",
fill: `url(#grad_rb${tt(t)})`
}, null, 8, GD)
])) : J("", !0)
]));
}
}), HD = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 80 100",
width: "1em",
preserveAspectRatio: "none"
}, UD = ["fill"], YD = ["fill"], XD = ["fill"], ZD = /* @__PURE__ */ mt({
__name: "headLeft",
props: {
colorDefault: { default: "var(--sky-blue-7)", type: String },
colorDark: { default: "var(--sky-blue-8)", type: String },
colorDark2: { default: "var(--sky-blue-9)", type: String }
},
setup(e) {
return (t, r) => (B(), G("svg", HD, [
k("path", {
d: "M0 30 L20 30 L20 70 L0 70z",
fill: e.colorDark2
}, null, 8, UD),
k("path", {
d: "M30 20 L50 20 L50 80 L30 80z",
fill: e.colorDark
}, null, 8, YD),
k("path", {
d: "M60 10 L80 10 L80 90 L60 90z",
fill: e.colorDefault
}, null, 8, XD)
]));
}
}), qD = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 80 100",
width: "1em",
preserveAspectRatio: "none"
}, KD = ["fill"], QD = ["fill"], jD = ["fill"], JD = /* @__PURE__ */ mt({
__name: "headRight",
props: {
colorDefault: { default: "var(--sky-blue-7)", type: String },
colorDark: { default: "var(--sky-blue-8)", type: String },
colorDark2: { default: "var(--sky-blue-9)", type: String }
},
setup(e) {
return (t, r) => (B(), G("svg", qD, [
k("path", {
d: "M0 10 L20 10 L20 90 L0 90z",
fill: e.colorDefault
}, null, 8, KD),
k("path", {
d: "M30 20 L50 20 L50 80 L30 80z",
fill: e.colorDark
}, null, 8, QD),
k("path", {
d: "M60 30 L80 30 L80 70 L60 70z",
fill: e.colorDark2
}, null, 8, jD)
]));
}
}), tk = { class: "--dk--panel" }, ek = { class: "--dk--panel--content" }, rk = { class: "--dk--panel--content--header-icon-left" }, ik = { class: "--dk--panel--content--header--title" }, nk = { class: "--dk--panel--content--header-icon-right" }, ak = {
name: "dk-panel"
}, ok = /* @__PURE__ */ mt({
...ak,
props: {
width: { default: "auto", type: String },
height: { default: "auto", type: String },
mold: { default: "circle", type: String },
title: { default: "", type: String },
titlePosition: { default: "flex-start", type: String },
gradientBoo: { default: !1, type: Boolean },
showHeader: { default: !0, type: Boolean },
colorType: { default: "sky-blue", type: String },
colorBackground: { default: null, type: String },
opacity: { default: 0.6, type: Number },
strokeWidth: { default: 0.5, type: Number },
customStyle: { default: {}, type: Object }
},
setup(e) {
let t = e;
const r = q("var(--sky-blue-4)"), i = q("var(--sky-blue-5)"), n = q("var(--sky-blue-7)"), a = q("var(--sky-blue-8)"), o = q("var(--sky-blue-9)"), s = q("var(--sky-blue-10)"), l = q(""), u = q({});
return Ki(() => {
r.value = "var(--" + t.colorType + "-4)", i.value = "var(--" + t.colorType + "-5)", n.value = "var(--" + t.colorType + "-7)", a.value = "var(--" + t.colorType + "-8)", o.value = "var(--" + t.colorType + "-9)", s.value = "var(--" + t.colorType + "-10)", l.value = t.colorBackground ? t.colorBackground : s.value, u.value = { color: i.value }, Object.assign(u.value, t.customStyle);
}), (c, f) => (B(), G("div", {
style: Tt({ width: e.width, height: e.height })
}, [
k("div", tk, [
e.mold === "circle" ? (B(), wt(Hw, {
key: 0,
gradientBoo: e.gradientBoo,
strokeWidth: e.strokeWidth,
colorText: i.value,
colorDefault: n.value,
colorDark: a.value,
colorDark2: o.value,
colorDark3: s.value,
colorBackground: l.value,
opacity: e.opacity
}, null, 8, ["gradientBoo", "strokeWidth", "colorText", "colorDefault", "colorDark", "colorDark2", "colorDark3", "colorBackground", "opacity"])) : J("", !0),
e.mold === "stick" ? (B(), wt(RS, {
key: 1,
gradientBoo: e.gradientBoo,
strokeWidth: e.strokeWidth,
colorText: i.value,
colorDefault: n.value,
colorDark: a.value,
colorDark2: o.value,
colorDark3: s.value,
colorBackground: l.value,
opacity: e.opacity
}, null, 8, ["gradientBoo", "strokeWidth", "colorText", "colorDefault", "colorDark", "colorDark2", "colorDark3", "colorBackground", "opacity"])) : J("", !0),
e.mold === "bar" ? (B(), wt(WD, {
key: 2,
gradientBoo: e.gradientBoo,
strokeWidth: e.strokeWidth,
colorText: i.value,
colorDefault: n.value,
colorDark: a.value,
colorDark2: o.value,
colorDark3: s.value,
colorBackground: l.value,
opacity: e.opacity
}, null, 8, ["gradientBoo", "strokeWidth", "colorText", "colorDefault", "colorDark", "colorDark2", "colorDark3", "colorBackground", "opacity"])) : J("", !0),
k("section", ek, [
e.showHeader ? (B(), G("header", {
key: 0,
class: "--dk--panel--content--header",
style: Tt({ color: r.value, borderColor: o.value, justifyContent: e.titlePosition })
}, [
k("div", rk, [
e.mold === "circle" ? (B(), wt(qw, {
key: 0,
colorDefault: n.value
}, null, 8, ["colorDefault"])) : J("", !0),
e.mold === "stick" ? (B(), wt(zS, {
key: 1,
colorDefault: n.value
}, null, 8, ["colorDefault"])) : J("", !0),
e.mold === "bar" ? (B(), wt(ZD, {
key: 2,
colorDefault: n.value,
colorDark: a.value,
colorDark2: o.value
}, null, 8, ["colorDefault", "colorDark", "colorDark2"])) : J("", !0)
]),
k("div", ik, Qa(e.title), 1),
k("div", nk, [
e.mold === "circle" ? (B(), wt(tS, {
key: 0,
colorDefault: n.value
}, null, 8, ["colorDefault"])) : J("", !0),
e.mold === "stick" ? (B(), wt(US, {
key: 1,
colorDefault: n.value
}, null, 8, ["colorDefault"])) : J("", !0),
e.mold === "bar" ? (B(), wt(JD, {
key: 2,
colorDefault: n.value,