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