7.css-vue
Version:
Vue3 component library for recreating Windows 7 UI
824 lines (823 loc) • 26.5 kB
JavaScript
import { openBlock as n, createElementBlock as l, normalizeClass as M, renderSlot as b, createTextVNode as C, toDisplayString as p, mergeProps as $, computed as g, withModifiers as U, createElementVNode as f, resolveComponent as N, createBlock as W, createCommentVNode as y, Fragment as v, renderList as x, createVNode as I, Transition as P, withCtx as A, normalizeStyle as D, withDirectives as B, vModelSelect as R, useSlots as F, vModelRadio as E, ref as V, withKeys as G, vModelText as _, vModelDynamic as K, useTemplateRef as Z, watch as q, unref as O } from "vue";
const J = /* @__PURE__ */ Object.assign({ name: "WinBalloon" }, {
__name: "Balloon",
props: {
top: { type: Boolean, default: !1 },
bottom: { type: Boolean, default: !1 },
left: { type: Boolean, default: !1 },
right: { type: Boolean, default: !1 },
caption: { type: String, default: null }
},
setup(e) {
return (t, u) => (n(), l("div", {
role: "tooltip",
class: M(["winui-balloon", { "is-bottom": e.bottom, "is-top": e.top, "is-left": e.left, "is-right": e.right }])
}, [
b(t.$slots, "default", {}, () => [
C(p(e.caption), 1)
])
], 2));
}
}), S = (e, t) => {
const u = e.__vccOpts || e;
for (const [o, a] of t)
u[o] = a;
return u;
}, Q = /* @__PURE__ */ Object.assign({ name: "WinButton" }, {
__name: "Button",
props: {
text: { type: String, default: "Button" }
},
setup(e) {
return (t, u) => (n(), l("button", $(t.$attrs, { class: "winui-button" }), [
b(t.$slots, "default", {}, () => [
C(p(e.text), 1)
], !0)
], 16));
}
}), z = /* @__PURE__ */ S(Q, [["__scopeId", "data-v-ca89fdd4"]]), ee = ["id", "name", "disabled", "checked"], te = ["for"], ne = /* @__PURE__ */ Object.assign({ name: "WinCheckbox" }, {
__name: "Checkbox",
props: {
disabled: { type: Boolean, default: !1 },
falseValue: { type: [Array, Boolean, Number, String, Object], default: void 0 },
modelValue: { type: [Array, Boolean, Number, String, Object], default: !1 },
name: { type: String, required: !0 },
label: { type: String, default: null },
trueValue: { type: [Array, Boolean, Number, String, Object], default: void 0 },
value: { type: [Array, Boolean, Number, String, Object], default: !0 }
},
emits: ["update:model-value"],
setup(e, { emit: t }) {
const u = t, o = e, a = g(() => `${o.name}-checkbox`), s = g(() => o.trueValue === void 0 ? o.value : o.trueValue), r = g(() => o.falseValue === void 0 ? !1 : o.falseValue), i = g(() => {
var d;
return Array.isArray(o.modelValue) ? (d = o.modelValue) == null ? void 0 : d.includes(s.value) : s.value === o.modelValue;
});
function m() {
if (o.disabled) return;
if (!Array.isArray(o.modelValue)) {
u("update:model-value", i.value ? r.value : s.value);
return;
}
if (i.value) {
u("update:model-value", o.modelValue.filter((c) => c !== s.value));
return;
}
u("update:model-value", [
...o.modelValue,
s.value
]);
}
return (d, c) => (n(), l("div", {
class: "winui-checkbox",
onClick: U(m, ["prevent"])
}, [
f("input", {
id: a.value,
name: e.name,
disabled: e.disabled,
type: "checkbox",
checked: i.value
}, null, 8, ee),
f("label", { for: a.value }, [
b(d.$slots, "label", {}, () => [
C(p(e.label), 1)
], !0)
], 8, te)
]));
}
}), ae = /* @__PURE__ */ S(ne, [["__scopeId", "data-v-faa2a64d"]]);
let L = function() {
let e = 0;
return function(t) {
return `${String(t || "")}-${++e}`;
};
};
const le = ["open"], ie = { class: "collapse-title" }, se = { key: 0 }, ue = /* @__PURE__ */ Object.assign({ name: "WinCollapse" }, {
__name: "Collapse",
props: {
open: { type: Boolean, default: !1 },
title: { type: String, required: !0 },
prependIcon: { type: String, default: null },
children: { type: Array, default: () => [] }
},
emits: ["update:open"],
setup(e, { emit: t }) {
const u = `winui-collapse-${L()}`, o = t, a = e, s = g({
get() {
return a.open;
},
set(r) {
o("update:open", r);
}
});
return (r, i) => {
const m = N("win-icon"), d = N("WinCollapse");
return n(), l("details", {
id: u,
class: "winui-collapse",
open: s.value,
onToggle: i[0] || (i[0] = (c) => s.value = !s.value)
}, [
f("summary", ie, [
b(r.$slots, "title", {}, () => [
e.prependIcon ? (n(), W(m, {
key: 0,
icon: e.prependIcon,
size: "16"
}, null, 8, ["icon"])) : y("", !0),
f("span", null, p(e.title), 1)
], !0)
]),
b(r.$slots, "default", {}, () => {
var c;
return [
((c = e.children) == null ? void 0 : c.length) > 0 ? (n(), l("ul", se, [
(n(!0), l(v, null, x(e.children, (w) => (n(), l("li", {
key: w.id
}, [
w.children ? (n(), W(d, {
key: 0,
title: w.title,
"prepend-icon": w.prependIcon,
children: w.children
}, null, 8, ["title", "prepend-icon", "children"])) : (n(), l(v, { key: 1 }, [
C(p(w.title), 1)
], 64))
]))), 128))
])) : y("", !0)
];
}, !0)
], 40, le);
};
}
}), oe = /* @__PURE__ */ S(ue, [["__scopeId", "data-v-2917fa65"]]), re = { class: "title-bar" }, de = { class: "title-bar-text" }, ce = {
class: "field-row",
style: { "justify-content": "flex-end" }
}, me = {
key: 0,
class: "status-bar"
}, fe = {
key: 0,
class: "w-full h-full bg-black/20 backdrop-blur-xs fixed top-0 left-0"
}, be = /* @__PURE__ */ Object.assign({ name: "WinDialog" }, {
__name: "Dialog",
props: {
modelValue: { type: Boolean, default: !1 },
title: { type: String, default: "Window" },
message: { type: String, default: null },
width: { type: String, default: "400px" },
height: { type: String, default: "auto" },
color: { type: String, default: "#4580c4" },
hasScrollbar: { type: Boolean, default: !1 },
hasStatus: { type: Boolean, default: !1 },
statusFields: { type: Array, default: () => [] },
permanent: { type: Boolean, default: !1 },
cancelable: { type: Boolean, default: !0 }
},
emits: ["accept", "cancel", "update:model-value"],
setup(e, { emit: t }) {
const u = t, o = e, a = g({
get() {
return o.modelValue;
},
set(i) {
u("update:model-value", i);
}
});
function s() {
a.value = !1, u("accept");
}
function r() {
a.value = !1, u("cancel");
}
return (i, m) => (n(), l(v, null, [
I(P, null, {
default: A(() => [
a.value ? (n(), l("div", {
key: 0,
class: "window glass active",
style: D([{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", "z-index": "1000" }, { width: e.width, height: e.height, "--window-background-color": e.color }])
}, [
f("div", re, [
f("div", de, p(e.title), 1)
]),
f("div", {
class: M(["window-body has-space", { "has-scrollbar": e.hasScrollbar }])
}, [
b(i.$slots, "default", {}, () => [
f("p", null, p(e.message), 1)
]),
f("section", ce, [
I(z, {
text: "Cancel",
onClick: r
}),
I(z, {
text: "Accept",
class: "default",
onClick: s
})
])
], 2),
e.hasStatus && e.statusFields.length || i.$slots.status ? (n(), l("div", me, [
b(i.$slots, "status", {}, () => [
(n(!0), l(v, null, x(e.statusFields, (d) => (n(), l("p", {
key: d,
class: "status-bar-field"
}, p(d), 1))), 128))
])
])) : y("", !0)
], 4)) : y("", !0)
]),
_: 3
}),
a.value ? (n(), l("div", fe)) : y("", !0)
], 64));
}
}), pe = {
key: 0,
value: void 0,
disabled: "",
selected: ""
}, ge = ["value", "disabled", "selected"], ye = /* @__PURE__ */ Object.assign({ name: "WinDropdown" }, {
__name: "Dropdown",
props: {
modelValue: { type: [Number, String], default: null },
options: { type: Array, default: () => [] },
placeholder: { type: String, default: null },
itemValue: { type: String, default: "id" },
itemTitle: { type: String, default: "name" }
},
emits: ["update:model-value"],
setup(e, { emit: t }) {
const u = t, o = e, a = g({
get() {
return o.modelValue;
},
set(s) {
u("update:model-value", s);
}
});
return (s, r) => B((n(), l("select", {
"onUpdate:modelValue": r[0] || (r[0] = (i) => a.value = i),
class: "winui-dropdown"
}, [
b(s.$slots, "placeholder", {}, () => [
e.placeholder ? (n(), l("option", pe, p(e.placeholder), 1)) : y("", !0)
]),
b(s.$slots, "options", {}, () => [
(n(!0), l(v, null, x(e.options, (i) => (n(), l("option", {
key: i[e.itemValue],
value: i[e.itemValue],
disabled: i.disabled,
selected: a.value === i[e.itemValue]
}, p(i[e.itemTitle]), 9, ge))), 128))
])
], 512)), [
[R, a.value]
]);
}
}), ve = { class: "winui-groupbox" }, he = { key: 0 }, $e = /* @__PURE__ */ Object.assign({ name: "WinGroupbox" }, {
__name: "Groupbox",
props: {
title: { type: String, default: null }
},
setup(e) {
return (t, u) => (n(), l("fieldset", ve, [
e.title || t.label ? (n(), l("legend", he, p(e.title || t.label), 1)) : y("", !0),
b(t.$slots, "default")
]));
}
}), we = { class: "winui-icon" }, Se = ["width", "height"], ke = ["d"], xe = /* @__PURE__ */ Object.assign({ name: "WinIcon" }, {
__name: "Icon",
props: {
icon: { type: String, required: !0 },
size: { type: [String, Number], default: 24 }
},
setup(e) {
const t = {
monitor: "M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z"
};
return (u, o) => (n(), l("span", we, [
(n(), l("svg", {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
width: `${e.size}px`,
height: `${e.size}px`
}, [
f("path", {
d: t[e.icon]
}, null, 8, ke)
], 8, Se))
]));
}
}), T = /* @__PURE__ */ S(xe, [["__scopeId", "data-v-08570360"]]), Ve = ["href", "target"], We = /* @__PURE__ */ Object.assign({ name: "WinLink" }, {
__name: "Link",
props: {
prependIcon: { type: String, default: null },
href: { type: String, default: null },
text: { type: String, default: null },
to: { type: [String, Object], default: null },
target: { type: String, default: null }
},
setup(e) {
return (t, u) => e.href || e.to ? (n(), l("a", {
key: 0,
class: "winui-link",
href: e.href,
target: t.$attrs.target
}, [
e.prependIcon ? (n(), W(T, {
key: 0,
icon: e.prependIcon,
size: "16"
}, null, 8, ["icon"])) : y("", !0),
b(t.$slots, "default", {}, () => [
f("span", null, p(e.text), 1)
], !0)
], 8, Ve)) : (n(), l("button", $({ key: 1 }, t.$attrs, { class: "winui-link" }), [
e.prependIcon ? (n(), W(T, {
key: 0,
icon: e.prependIcon,
size: "16"
}, null, 8, ["icon"])) : y("", !0),
b(t.$slots, "default", {}, () => [
f("span", null, p(e.text), 1)
], !0)
], 16));
}
}), Be = /* @__PURE__ */ S(We, [["__scopeId", "data-v-523d5ff7"]]), je = {
role: "listbox",
class: "winui-listbox"
}, Ce = ["onClick"], Oe = /* @__PURE__ */ Object.assign({ name: "WinListbox" }, {
__name: "Listbox",
props: {
modelValue: { type: [Number, String], required: !0 },
options: { type: Array, required: !0 },
itemValue: { type: String, default: "id" },
itemText: { type: String, default: "name" }
},
emits: ["update:model-value"],
setup(e, { emit: t }) {
const u = t, o = e, a = g({
get() {
return o.modelValue;
},
set(i) {
u("update:model-value", i);
}
});
function s(i) {
return i[o.itemValue] === a.value ? { "aria-selected": !0 } : {};
}
function r(i) {
a.value = i;
}
return (i, m) => (n(), l("ul", je, [
(n(!0), l(v, null, x(e.options, (d) => (n(), l("li", $({
key: d[e.itemValue],
ref_for: !0
}, s(d), {
role: "option",
onClick: (c) => r(d[e.itemValue])
}), p(d[e.itemText]), 17, Ce))), 128))
]));
}
}), Me = /* @__PURE__ */ S(Oe, [["__scopeId", "data-v-55547bd9"]]), _e = {
class: "winui-menu",
role: "menu"
}, X = /* @__PURE__ */ Object.assign({ name: "WinMenu" }, {
__name: "Menu",
setup(e) {
return (t, u) => (n(), l("ul", _e, [
b(t.$slots, "default")
]));
}
}), Ie = {
class: "winui-menubar",
role: "menubar"
}, Ne = /* @__PURE__ */ Object.assign({ name: "WinMenuBar" }, {
__name: "MenuBar",
setup(e) {
return (t, u) => (n(), l("ul", Ie, [
b(t.$slots, "default")
]));
}
}), ze = {
key: 0,
class: "winui-menuitem-button"
}, Te = /* @__PURE__ */ Object.assign({ name: "WinMenuItem" }, {
__name: "MenuItem",
props: {
title: { type: String, default: null },
children: { type: Array, default: () => [] }
},
setup(e) {
const t = F(), u = g(() => {
const a = t != null && t.submenu ? t.submenu() : [];
return (a == null ? void 0 : a.length) > 0;
}), o = g(() => u.value ? {
"aria-haspopup": !0
} : {});
return (a, s) => {
var r;
return n(), l("li", $(o.value, {
class: "winui-menuitem",
role: "menuitem"
}), [
b(a.$slots, "default", {}, () => [
u.value ? (n(), l(v, { key: 1 }, [
C(p(e.title), 1)
], 64)) : (n(), l("label", ze, p(e.title), 1))
], !0),
a.$slots.submenu || ((r = e.children) == null ? void 0 : r.length) > 0 ? b(a.$slots, "submenu", { key: 0 }, () => {
var i;
return [
((i = e.children) == null ? void 0 : i.length) > 0 ? (n(), W(X, { key: 0 }, {
default: A(() => [
(n(!0), l(v, null, x(e.children, (m, d) => (n(), W(Y, {
key: d,
title: m.title,
children: m.children
}, null, 8, ["title", "children"]))), 128))
]),
_: 1
})) : y("", !0)
];
}, !0) : y("", !0)
], 16);
};
}
}), Y = /* @__PURE__ */ S(Te, [["__scopeId", "data-v-21bf0756"]]), Ae = /* @__PURE__ */ Object.assign({ name: "WinProgress" }, {
__name: "Progress",
props: {
variant: { type: String, default: "success" },
inert: { type: Boolean, default: !1 },
transition: { type: [Number, String], default: 300 },
indeterminate: { type: Boolean, default: !1 },
progress: {
type: [Number, String],
default: 0,
validator(e) {
return isNaN(e) ? e == null ? void 0 : e.endsWith("%") : e >= 0 && e <= 100;
}
}
},
setup(e) {
const t = e, u = g(() => t.indeterminate ? {} : {
"aria-valuemin": 0,
"aria-valuemax": 100,
"aria-valuenow": isNaN(t.progress) ? Number(t.progress.slice(0, -1)) : this.progress
});
return (o, a) => (n(), l("div", $(u.value, {
role: "progressbar",
class: ["winui-progress", { [e.variant]: !0, marquee: e.indeterminate, animate: !e.inert }]
}), [
e.indeterminate ? y("", !0) : (n(), l("div", {
key: 0,
style: D({
"--progress": isNaN(e.progress) ? e.progress : e.progress + "%",
"--transition": e.transition / 1e3 + "s"
})
}, null, 4))
], 16));
}
}), De = /* @__PURE__ */ S(Ae, [["__scopeId", "data-v-a92a2776"]]), qe = { class: "winui-radio" }, Le = ["id", "value", "name", "disabled"], Xe = ["for"], Ye = /* @__PURE__ */ Object.assign({ name: "WinRadio" }, {
__name: "Radio",
props: {
name: { type: String, required: !0 },
modelValue: { type: [Number, String, Boolean], default: null },
value: { type: [Number, String, Boolean], required: !0 },
disabled: { type: Boolean, default: !1 },
label: { type: String, required: !0 }
},
emits: ["update:model-value"],
setup(e, { emit: t }) {
const u = t, o = e, a = g({
get() {
return o.modelValue;
},
set(r) {
u("update:model-value", r);
}
}), s = g(() => `${o.name}-${o.value}-radio`);
return (r, i) => (n(), l("div", qe, [
B(f("input", {
id: s.value,
"onUpdate:modelValue": i[0] || (i[0] = (m) => a.value = m),
value: e.value,
name: e.name,
disabled: e.disabled,
type: "radio"
}, null, 8, Le), [
[E, a.value]
]),
b(r.$slots, "default", {}, () => [
f("label", { for: s.value }, p(e.label), 9, Xe)
])
]));
}
}), He = ["placeholder"], Ue = {
key: 1,
class: "searchbox win-searchbox"
}, Pe = ["placeholder"], Re = /* @__PURE__ */ Object.assign({ name: "WinSearchbox" }, {
__name: "Searchbox",
props: {
instant: { type: Boolean, default: !1 },
placeholder: { type: String, default: "Search" }
},
emits: ["update:search", "search"],
setup(e, { emit: t }) {
const u = `searchbox-${L()}`, o = t, a = V();
function s() {
o("search", a.value);
}
return (r, i) => e.instant ? B((n(), l("input", $({
key: 0,
id: u,
"onUpdate:modelValue": i[0] || (i[0] = (m) => a.value = m)
}, r.$attrs, {
type: "search",
class: "winui-searchbox",
placeholder: e.placeholder,
onKeyup: G(s, ["enter"])
}), null, 16, He)), [
[_, a.value]
]) : (n(), l("div", Ue, [
B(f("input", {
"onUpdate:modelValue": i[1] || (i[1] = (m) => a.value = m),
type: "search",
placeholder: e.placeholder
}, null, 8, Pe), [
[_, a.value]
]),
f("button", {
"aria-label": "search",
onClick: s
})
]));
}
}), Fe = /* @__PURE__ */ S(Re, [["__scopeId", "data-v-030abff4"]]), Ee = /* @__PURE__ */ Object.assign({ name: "WinSlider" }, {
__name: "Slider",
props: {
modelValue: { type: [String, Number], default: 0 }
},
emits: ["update:model-value"],
setup(e, { emit: t }) {
const u = t, o = e, a = g({
get() {
return o.modelValue;
},
set(s) {
u("update:model-value", s);
}
});
return (s, r) => B((n(), l("input", $({
"onUpdate:modelValue": r[0] || (r[0] = (i) => a.value = i)
}, s.$attrs, {
type: "range",
class: "winui-slider"
}), null, 16)), [
[_, a.value]
]);
}
}), Ge = { class: "winui-tabs" }, Ke = ["hidden"], Ze = /* @__PURE__ */ Object.assign({ name: "WinTabs" }, {
__name: "Tabs",
props: {
modelValue: { type: String, required: !0 },
tabs: { type: Object, required: !0 },
justified: { type: Boolean, default: !1 }
},
emits: ["update:model-value"],
setup(e, { emit: t }) {
const u = t, o = e, a = g({
get() {
return o.modelValue;
},
set(s) {
u("update:model-value", s);
}
});
return (s, r) => {
const i = N("win-button");
return n(), l("div", Ge, [
f("menu", {
role: "tablist",
class: M({ justified: e.justified })
}, [
(n(!0), l(v, null, x(e.tabs, (m, d) => (n(), W(i, {
key: d,
"aria-selected": a.value === d,
role: "tab",
onClick: (c) => a.value = d
}, {
default: A(() => [
C(p(m), 1)
]),
_: 2
}, 1032, ["aria-selected", "onClick"]))), 128))
], 2),
(n(!0), l(v, null, x(e.tabs, (m, d) => (n(), l("article", {
key: d,
hidden: a.value !== d,
role: "tabpanel"
}, [
b(s.$slots, d, $({ ref_for: !0 }, { title: m, tab: d }, {
hidden: a.value !== d
}))
], 8, Ke))), 128))
]);
};
}
}), Je = ["readonly"], Qe = ["readonly", "type"], et = /* @__PURE__ */ Object.assign({ name: "WinTextbox" }, {
__name: "Textbox",
props: {
modelValue: { type: String, required: !0 },
type: { type: String, default: "text" },
readonly: { type: Boolean, default: !1 }
},
emits: ["update:model-value"],
setup(e, { emit: t }) {
const u = t, o = e, a = g({
get() {
return o.modelValue;
},
set(s) {
u("update:model-value", s);
}
});
return (s, r) => e.type === "textarea" ? B((n(), l("textarea", $({
key: 0,
"onUpdate:modelValue": r[0] || (r[0] = (i) => a.value = i)
}, s.$attrs, {
readonly: e.readonly,
class: "winui-textbox"
}), null, 16, Je)), [
[_, a.value]
]) : B((n(), l("input", $({
key: 1,
"onUpdate:modelValue": r[1] || (r[1] = (i) => a.value = i)
}, s.$attrs, {
readonly: e.readonly,
type: e.type,
class: "winui-textbox"
}), null, 16, Qe)), [
[K, a.value]
]);
}
}), tt = { class: "tree-view winui-treeview" }, nt = /* @__PURE__ */ Object.assign({ name: "WinTreeview" }, {
__name: "Treeview",
setup(e) {
return (t, u) => (n(), l("ul", tt, [
b(t.$slots, "default")
]));
}
});
function at(e, t) {
const u = V(!1), o = V(e.offsetX), a = V(e.offsetY);
let s = e.offsetX, r = e.offsetY;
function i(c) {
e.draggable && (c.preventDefault(), u.value = !0, s = (t.value || c.target).offsetLeft - c.clientX, r = (t.value || c.target).offsetTop - c.clientY, c.target.onmousemove = m, c.target.onmouseup = d);
}
function m(c) {
!e.draggable || !u.value || (c.preventDefault(), o.value = c.clientX + s, a.value = c.clientY + r);
}
function d(c) {
e.draggable && (u.value = !1, c.target.onmouseup = null, c.target.onmousemove = null);
}
return {
dragging: u,
offsetX: o,
offsetY: a,
onMouseDown: i
};
}
const lt = { class: "title-bar-text" }, it = { class: "title-bar-controls" }, st = ["aria-label"], ut = {
key: 0,
class: "status-bar"
}, ot = /* @__PURE__ */ Object.assign({ name: "WinWindow" }, {
__name: "Window",
props: {
active: { type: Boolean, default: !1 },
title: { type: String, default: "Window" },
width: { type: String, default: "auto" },
height: { type: String, default: "auto" },
color: { type: String, default: "#4580c4" },
hasSpace: { type: Boolean, default: !1 },
hasScrollbar: { type: Boolean, default: !1 },
hasStatus: { type: Boolean, default: !1 },
statusFields: { type: Array, default: () => [] },
minimizable: { type: Boolean, default: !0 },
maximizable: { type: Boolean, default: !0 },
closable: { type: Boolean, default: !0 },
draggable: { type: Boolean, default: !1 },
offsetX: { type: Number, default: 0 },
offsetY: { type: Number, default: 0 }
},
emits: ["minimize", "maximize", "close"],
setup(e, { emit: t }) {
const u = t, o = e, a = Z("targetWindow"), s = V(!1), r = V(0), i = V(0), {
dragging: m,
offsetX: d,
offsetY: c,
onMouseDown: w
} = at(o, a);
function H() {
try {
if (s.value) {
d.value = r.value, c.value = i.value, r.value = 0, i.value = 0, s.value = !1;
return;
}
r.value = d.value, i.value = c.value, d.value = 0, c.value = 0, s.value = !0;
} finally {
u("maximize");
}
}
return q(d, (k, h) => {
k !== h && s.value;
}), q(c, (k, h) => {
k !== h && s.value;
}), (k, h) => (n(), l("div", {
ref_key: "targetWindow",
ref: a,
class: M(["window glass", { active: e.active, draggable: e.draggable, dragging: O(m), maximized: s.value }]),
style: D({
width: e.width,
height: e.height,
"--window-background-color": e.color,
top: `${O(c)}px`,
left: `${O(d)}px`
})
}, [
f("div", {
ref: "windowTitleBar",
class: "title-bar",
onMousedown: h[2] || (h[2] = (...j) => O(w) && O(w)(...j))
}, [
f("div", lt, p(e.title), 1),
f("div", it, [
e.minimizable ? (n(), l("button", {
key: 0,
"aria-label": "Minimize",
onClick: h[0] || (h[0] = (j) => u("minimize"))
})) : y("", !0),
e.maximizable ? (n(), l("button", {
key: 1,
"aria-label": s.value ? "Restore" : "Maximize",
onClick: H
}, null, 8, st)) : y("", !0),
e.closable ? (n(), l("button", {
key: 2,
"aria-label": "Close",
onClick: h[1] || (h[1] = (j) => k.$emit("close"))
})) : y("", !0)
])
], 544),
f("div", {
class: M(["window-body", { "has-space": e.hasSpace, "has-scrollbar": e.hasScrollbar }])
}, [
b(k.$slots, "default")
], 2),
e.hasStatus && e.statusFields.length || k.$slots.status ? (n(), l("div", ut, [
b(k.$slots, "status", {}, () => [
(n(!0), l(v, null, x(e.statusFields, (j) => (n(), l("p", {
key: j,
class: "status-bar-field"
}, p(j), 1))), 128))
])
])) : y("", !0)
], 6));
}
}), rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
WinBalloon: J,
WinButton: z,
WinCheckbox: ae,
WinCollapse: oe,
WinDialog: be,
WinDropdown: ye,
WinGroupbox: $e,
WinIcon: T,
WinLink: Be,
WinListbox: Me,
WinMenu: X,
WinMenubar: Ne,
WinMenuitem: Y,
WinProgress: De,
WinRadio: Ye,
WinSearchbox: Fe,
WinSlider: Ee,
WinTabs: Ze,
WinTextbox: et,
WinTreeview: nt,
WinWindow: ot
}, Symbol.toStringTag, { value: "Module" })), ct = {
install(e) {
Object.values(rt).forEach((t) => {
e.component(t.name, t);
});
}
};
export {
ct as default
};