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