@phantomclient/plugin 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/lib/chunks/api-DhaU9Jsd.js +1667 -0
- package/dist/lib/chunks/sdk-permissions-CyDMa4we.js +429 -0
- package/dist/lib/chunks/{state-kAlKf5xt.js → state-BGYMFLti.js} +9 -8
- package/dist/lib/guest.js +2174 -3171
- package/dist/lib/index.js +44 -37
- package/dist/lib/styles.css +1 -1
- package/dist/lib/vue.js +281 -121
- package/dist/runtime/chunks/api-DCkkcNDr.js +1 -0
- package/dist/runtime/chunks/{runtime-dom.esm-bundler-BbCcCl6A.js → runtime-dom.esm-bundler-Dcouf4CU.js} +1 -1
- package/dist/runtime/chunks/sdk-permissions-AYsXGgro.js +1 -0
- package/dist/runtime/chunks/{state-CFbUQLzX.js → state-CyERnsrb.js} +1 -1
- package/dist/runtime/frame.html +4 -4
- package/dist/runtime/runtime.css +1 -1
- package/dist/runtime/runtime.js +4 -1
- package/dist/runtime/sdk-vue.js +1 -1
- package/dist/runtime/sdk.js +1 -1
- package/dist/runtime/vue.js +1 -1
- package/dist/types/index.d.ts +4528 -425
- package/dist/types/vue.d.ts +3954 -424
- package/package.json +5 -2
- package/dist/lib/chunks/api-B2tHXZiJ.js +0 -9
- package/dist/lib/chunks/sdk-permissions-BnKU1K9D.js +0 -43
- package/dist/runtime/chunks/api-Bj1J6wAH.js +0 -1
- package/dist/runtime/chunks/sdk-permissions-D_NYB67a.js +0 -1
package/dist/lib/vue.js
CHANGED
|
@@ -1,149 +1,309 @@
|
|
|
1
|
-
import { computed as
|
|
2
|
-
import {
|
|
3
|
-
import { f as
|
|
4
|
-
function
|
|
5
|
-
const e =
|
|
6
|
-
if (!e) throw new
|
|
1
|
+
import { computed as b, inject as Ce, h as ee, toValue as te, defineComponent as V, useAttrs as be, useSlots as Z, openBlock as n, createBlock as y, resolveDynamicComponent as q, normalizeClass as h, withCtx as F, createElementBlock as i, createCommentVNode as m, renderSlot as I, ref as M, watch as G, toDisplayString as _, createElementVNode as k, useId as ne, onMounted as fe, onBeforeUnmount as oe, Fragment as R, withKeys as Ve, unref as z, createVNode as le, Teleport as re, normalizeStyle as J, createTextVNode as xe, createSlots as Be, mergeProps as Me, renderList as X, nextTick as ae, normalizeProps as qe, guardReactiveProps as Se, withModifiers as Ee, Comment as Ie, Text as je } from "vue";
|
|
2
|
+
import { c as Ae } from "./chunks/api-DhaU9Jsd.js";
|
|
3
|
+
import { f as Q, P as Pe, c as Te } from "./chunks/state-BGYMFLti.js";
|
|
4
|
+
function Le() {
|
|
5
|
+
const e = Ce(Pe, null) ?? Te();
|
|
6
|
+
if (!e) throw new Ae("NOT_SUPPORTED", Re());
|
|
7
7
|
return e;
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
return
|
|
9
|
+
function Re() {
|
|
10
|
+
return typeof document < "u" && "kind" in document.documentElement.dataset ? Q.initialized ? "usePlugin() found no plugin context: this frame is closing, and the plugin it ran has already been let go" : "usePlugin() found no plugin context, although a Phantom frame mounted this component. That is two copies of @phantomclient/plugin in the one frame: the frame provides the context on its copy, this component asks another, and neither can see the other. Check that @phantomclient/plugin and @phantomclient/plugin/vue resolve to the same installed package, and that nothing bundles the package into the plugin instead of leaving it to the frame" : "usePlugin() works inside a Phantom plugin frame; this component was drawn outside one";
|
|
11
11
|
}
|
|
12
|
-
function
|
|
13
|
-
return
|
|
12
|
+
function Xt(e) {
|
|
13
|
+
return Le().phantom(e);
|
|
14
14
|
}
|
|
15
|
-
function
|
|
16
|
-
return
|
|
15
|
+
function Zt() {
|
|
16
|
+
return b(() => Q.games);
|
|
17
17
|
}
|
|
18
|
-
function
|
|
19
|
-
return
|
|
18
|
+
function Jt() {
|
|
19
|
+
return b(() => Q.preferences);
|
|
20
20
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
function Qt() {
|
|
22
|
+
return b(() => Q.mode);
|
|
23
|
+
}
|
|
24
|
+
const De = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
25
|
+
var K = { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round" };
|
|
26
|
+
const Ne = ({ size: e, strokeWidth: a = 2, absoluteStrokeWidth: t, color: l, iconNode: o, name: r, class: p, ...c }, { slots: f }) => ee("svg", { ...K, width: e || K.width, height: e || K.height, stroke: l || K.stroke, "stroke-width": t ? Number(a) * 24 / Number(e) : a, class: ["lucide", `lucide-${De(r ?? "icon")}`], ...c }, [...o.map((v) => ee(...v)), ...f.default ? [f.default()] : []]), A = (e, a) => (t, { slots: l }) => ee(Ne, { ...t, iconNode: a, name: e }, l), ve = A("CheckIcon", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]), We = A("ChevronDownIcon", [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]]), Ue = A("CircleAlertIcon", [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }], ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }], ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]]), Fe = A("EyeOffIcon", [["path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49", key: "ct8e1f" }], ["path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242", key: "151rxh" }], ["path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143", key: "13bj9a" }], ["path", { d: "m2 2 20 20", key: "1ooewy" }]]), He = A("EyeIcon", [["path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0", key: "1nclc0" }], ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]]), Ke = A("InfoIcon", [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }], ["path", { d: "M12 16v-4", key: "1dtifu" }], ["path", { d: "M12 8h.01", key: "e9boi3" }]]), Oe = A("LoaderCircleIcon", [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]]), Ge = A("MinusIcon", [["path", { d: "M5 12h14", key: "1ays0h" }]]), ce = { xs: "w-6", sm: "w-7", md: "w-8", lg: "w-10", xl: "w-10" };
|
|
27
|
+
function Xe(e) {
|
|
28
|
+
const a = b(() => {
|
|
29
|
+
const l = { xs: "h-6 px-2 text-2xs", sm: "h-7 px-2.5 text-xs", md: "h-8 px-3 text-xs", lg: "h-10 px-3.5 text-sm", xl: "h-10 px-4 text-sm" };
|
|
30
|
+
return l[te(e)] || l.md;
|
|
31
|
+
}), t = b(() => ce[te(e)] || ce.md);
|
|
29
32
|
return { sizeClasses: a, squareClasses: t };
|
|
30
33
|
}
|
|
31
|
-
function
|
|
32
|
-
return { variantClasses:
|
|
34
|
+
function Ze(e) {
|
|
35
|
+
return { variantClasses: b(() => {
|
|
33
36
|
const a = { primary: ["border-transparent bg-phantom-accent text-phantom-accent-contrast", "hover:bg-phantom-accent-hover", "active:bg-phantom-accent-active"].join(" "), secondary: ["border-transparent bg-phantom-surface text-phantom-text", "hover:bg-phantom-selected", "active:bg-phantom-elevated"].join(" "), outline: ["border-phantom-border bg-transparent text-phantom-text", "hover:border-phantom-border-strong hover:bg-phantom-surface", "active:bg-phantom-selected"].join(" "), ghost: ["border-transparent bg-transparent text-phantom-muted", "hover:bg-phantom-surface hover:text-phantom-text", "active:bg-phantom-selected"].join(" "), danger: ["border-transparent bg-phantom-danger/[0.12] text-phantom-danger", "hover:bg-phantom-danger/20 hover:text-phantom-danger-hover", "active:bg-phantom-danger/25"].join(" "), success: ["border-transparent bg-phantom-positive/15 text-phantom-positive-strong", "hover:bg-phantom-positive/[0.22]", "active:bg-phantom-positive/[0.28]"].join(" ") };
|
|
34
|
-
return a[
|
|
37
|
+
return a[te(e)] || a.primary;
|
|
35
38
|
}) };
|
|
36
39
|
}
|
|
37
|
-
const
|
|
38
|
-
const t = e,
|
|
39
|
-
!t.disabled && !t.loading &&
|
|
40
|
+
const Je = { key: 0, class: "size-3.5 shrink-0 animate-spin rounded-full border border-current border-r-transparent", "aria-hidden": "true" }, Yt = V({ __name: "index", props: { variant: { default: "primary" }, size: { default: "md" }, disabled: { type: Boolean, default: !1 }, loading: { type: Boolean, default: !1 }, icon: {}, iconRight: {}, type: { default: "button" }, fullWidth: { type: Boolean, default: !1 }, href: {} }, emits: ["click"], setup(e, { emit: a }) {
|
|
41
|
+
const t = e, l = a, o = be(), r = Z(), { variantClasses: p } = Ze(() => t.variant), { sizeClasses: c, squareClasses: f } = Xe(() => t.size), v = b(() => typeof o.class == "string" && /(^|\s)rounded(-|\s|$)/.test(o.class)), g = b(() => !!(t.icon || t.iconRight) && !t.loading && !r.default), x = b(() => ["inline-flex items-center justify-center gap-1.5", v.value ? "" : "rounded-[7px]", "border font-medium tracking-normal", "transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-spring", "active:scale-[0.98]", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-phantom-accent/60", "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none", p.value, c.value, g.value && ["px-0", f.value], t.fullWidth && "w-full", t.loading && "cursor-wait", o.class]), $ = b(() => t.href !== void 0), B = b(() => t.disabled || t.loading), S = (j) => {
|
|
42
|
+
!t.disabled && !t.loading && l("click", j);
|
|
40
43
|
};
|
|
41
|
-
return (
|
|
42
|
-
} }),
|
|
43
|
-
const a = e, t =
|
|
44
|
-
return
|
|
44
|
+
return (j, P) => (n(), y(q($.value ? "a" : "button"), { type: $.value ? void 0 : t.type, href: $.value && !B.value ? t.href : void 0, disabled: $.value ? void 0 : B.value, "aria-disabled": $.value && B.value ? "true" : void 0, class: h([x.value, $.value && B.value && "pointer-events-none cursor-not-allowed opacity-50"]), onClick: S }, { default: F(() => [t.loading ? (n(), i("span", Je)) : t.icon ? (n(), y(q(t.icon), { key: 1, size: 14, class: "shrink-0" })) : m("", !0), I(j.$slots, "default"), t.iconRight && !t.loading ? (n(), y(q(t.iconRight), { key: 2, size: 14, class: "shrink-0" })) : m("", !0)]), _: 3 }, 8, ["type", "href", "disabled", "aria-disabled", "class"]));
|
|
45
|
+
} }), Qe = ["title"], Ye = ["src", "alt"], et = { key: 1 }, ea = V({ __name: "index", props: { name: {}, imageUrl: { default: null }, size: { default: "md" } }, setup(e) {
|
|
46
|
+
const a = e, t = M(!1), l = b(() => a.name.split(/\s+|@/).filter(Boolean).slice(0, 2).map((r) => r[0]).join("").toUpperCase()), o = b(() => a.size === "sm" ? "size-6 text-[8px]" : a.size === "lg" ? "size-10 text-xs" : a.size === "xl" ? "size-16 text-base" : "size-8 text-2xs");
|
|
47
|
+
return G(() => a.imageUrl, () => {
|
|
45
48
|
t.value = !1;
|
|
46
|
-
}), (
|
|
47
|
-
} }),
|
|
48
|
-
const a = e, t =
|
|
49
|
-
const
|
|
50
|
-
return a.quiet ? "bg-transparent text-phantom-muted" :
|
|
51
|
-
}),
|
|
52
|
-
const
|
|
53
|
-
return a.quiet ?
|
|
49
|
+
}), (r, p) => (n(), i("span", { class: h(["grid shrink-0 place-items-center overflow-hidden rounded-full bg-phantom-selected font-semibold text-phantom-muted", o.value]), title: a.name }, [a.imageUrl && !t.value ? (n(), i("img", { key: 0, src: a.imageUrl, alt: a.name, class: "size-full object-cover", referrerpolicy: "no-referrer", onError: p[0] || (p[0] = (c) => t.value = !0) }, null, 40, Ye)) : (n(), i("span", et, _(l.value), 1))], 10, Qe));
|
|
50
|
+
} }), tt = ["data-tone", "data-quiet"], ta = V({ __name: "index", props: { tone: { default: "neutral" }, dot: { type: Boolean, default: !1 }, size: { default: "md" }, quiet: { type: Boolean, default: !1 } }, setup(e) {
|
|
51
|
+
const a = e, t = b(() => {
|
|
52
|
+
const r = { neutral: "bg-phantom-selected text-phantom-muted", success: "bg-phantom-positive/15 text-phantom-positive-strong", warning: "bg-phantom-amber/15 text-phantom-amber", danger: "bg-phantom-danger/15 text-phantom-danger", info: "bg-phantom-info/15 text-phantom-info", blue: "bg-phantom-blue/15 text-phantom-blue", violet: "bg-phantom-violet/15 text-phantom-violet", aqua: "bg-phantom-aqua/15 text-phantom-aqua", orange: "bg-phantom-orange/15 text-phantom-orange", magenta: "bg-phantom-magenta/15 text-phantom-magenta" };
|
|
53
|
+
return a.quiet ? "bg-transparent text-phantom-muted" : r[a.tone];
|
|
54
|
+
}), l = b(() => a.quiet ? { neutral: "bg-phantom-subtle", success: "bg-phantom-positive", warning: "bg-phantom-amber", danger: "bg-phantom-danger", info: "bg-phantom-info", blue: "bg-phantom-blue", violet: "bg-phantom-violet", aqua: "bg-phantom-aqua", orange: "bg-phantom-orange", magenta: "bg-phantom-magenta" }[a.tone] : "bg-current"), o = b(() => {
|
|
55
|
+
const r = a.size === "sm";
|
|
56
|
+
return a.quiet ? r ? "h-[18px] gap-1.5 text-2xs" : "h-6 gap-1.5 text-xs" : r ? "h-[18px] gap-1 rounded px-1.5 text-[10px] leading-4" : "h-6 gap-1.5 rounded-full px-2.5 text-xs capitalize";
|
|
54
57
|
});
|
|
55
|
-
return (
|
|
56
|
-
} }),
|
|
57
|
-
const a = e, t = { neutral: { box: "border-phantom-border bg-phantom-surface text-phantom-text", icon: "text-phantom-muted" }, success: { box: "border-phantom-border bg-phantom-surface text-phantom-text", icon: "text-phantom-positive" }, warning: { box: "border-phantom-amber/25 bg-phantom-amber/10 text-phantom-amber", icon: "text-phantom-amber" }, danger: { box: "border-phantom-danger/25 bg-phantom-danger/10 text-phantom-danger", icon: "text-phantom-danger" }, info: { box: "border-phantom-info/25 bg-phantom-info/10 text-phantom-info", icon: "text-phantom-info" } },
|
|
58
|
-
return (
|
|
59
|
-
} }),
|
|
60
|
-
return (a, t) => (
|
|
61
|
-
} }),
|
|
62
|
-
const a = e, t =
|
|
63
|
-
function
|
|
64
|
-
var
|
|
65
|
-
const
|
|
66
|
-
if (!
|
|
67
|
-
const
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
function
|
|
71
|
-
|
|
72
|
-
}
|
|
73
|
-
function
|
|
74
|
-
|
|
58
|
+
return (r, p) => (n(), i("span", { class: h(["phantom-badge inline-flex shrink-0 items-center font-medium", [t.value, o.value]]), "data-tone": a.tone, "data-quiet": a.quiet || void 0 }, [a.dot || a.quiet ? (n(), i("span", { key: 0, class: h(["size-1.5 shrink-0 rounded-full", l.value]), "aria-hidden": "true" }, null, 2)) : m("", !0), I(r.$slots, "default")], 10, tt));
|
|
59
|
+
} }), at = ["role"], nt = { class: "min-w-0 flex-1" }, aa = V({ __name: "index", props: { tone: { default: "neutral" }, icon: { default: void 0 } }, setup(e) {
|
|
60
|
+
const a = e, t = { neutral: { box: "border-phantom-border bg-phantom-surface text-phantom-text", icon: "text-phantom-muted" }, success: { box: "border-phantom-border bg-phantom-surface text-phantom-text", icon: "text-phantom-positive" }, warning: { box: "border-phantom-amber/25 bg-phantom-amber/10 text-phantom-amber", icon: "text-phantom-amber" }, danger: { box: "border-phantom-danger/25 bg-phantom-danger/10 text-phantom-danger", icon: "text-phantom-danger" }, info: { box: "border-phantom-info/25 bg-phantom-info/10 text-phantom-info", icon: "text-phantom-info" } }, l = b(() => t[a.tone]);
|
|
61
|
+
return (o, r) => (n(), i("div", { class: h(["flex items-start gap-2 rounded-lg border px-3 py-2.5 text-xs leading-5", l.value.box]), role: a.tone === "danger" ? "alert" : void 0 }, [a.icon ? (n(), y(q(a.icon), { key: 0, size: 14, class: h(["mt-[3px] shrink-0", l.value.icon]) }, null, 8, ["class"])) : m("", !0), k("div", nt, [I(o.$slots, "default")])], 10, at));
|
|
62
|
+
} }), na = V({ __name: "EmptyState", props: { title: {}, description: { default: void 0 }, icon: { default: void 0 }, size: { default: "sm" }, plain: { type: Boolean, default: !1 } }, setup(e) {
|
|
63
|
+
return (a, t) => (n(), i("div", { class: h(["flex h-full flex-col items-center justify-center text-center", [e.size === "lg" ? "min-h-64 gap-2 rounded-xl px-6 py-14" : "min-h-24 gap-1.5 rounded-lg px-4 py-5", !e.plain && "border border-dashed border-phantom-border"]]) }, [e.icon ? (n(), i("span", { key: 0, class: h(["grid shrink-0 place-items-center border border-phantom-border bg-phantom-surface text-phantom-muted", e.size === "lg" ? "mb-3 size-12 rounded-[14px]" : "mb-2 size-9 rounded-[10px]"]), "aria-hidden": "true" }, [(n(), y(q(e.icon), { size: e.size === "lg" ? 20 : 16, "stroke-width": "1.8" }, null, 8, ["size"]))], 2)) : m("", !0), k("p", { class: h(e.size === "lg" ? "text-base font-medium text-phantom-text" : "text-xs font-medium text-phantom-text") }, _(e.title), 3), e.description ? (n(), i("p", { key: 1, class: h(e.size === "lg" ? "max-w-sm text-sm leading-6 text-phantom-muted" : "max-w-72 text-2xs leading-[18px] text-phantom-muted") }, _(e.description), 3)) : m("", !0), a.$slots.default ? (n(), i("div", { key: 2, class: h(e.size === "lg" ? "mt-4" : "mt-3") }, [I(a.$slots, "default")], 2)) : m("", !0)], 2));
|
|
64
|
+
} }), ot = ["aria-label", "aria-describedby"], lt = ["id"], rt = V({ __name: "InfoTip", props: { text: {}, label: {} }, setup(e) {
|
|
65
|
+
const a = e, t = ne(), l = M(null), o = M(null);
|
|
66
|
+
function r() {
|
|
67
|
+
var v;
|
|
68
|
+
const g = (v = l.value) == null ? void 0 : v.getBoundingClientRect();
|
|
69
|
+
if (!g) return;
|
|
70
|
+
const x = 136, $ = g.left + g.width / 2, B = Math.min(Math.max($, x), window.innerWidth - x);
|
|
71
|
+
o.value = { top: g.top - 8, left: B };
|
|
72
|
+
}
|
|
73
|
+
function p() {
|
|
74
|
+
o.value = null;
|
|
75
|
+
}
|
|
76
|
+
function c() {
|
|
77
|
+
o.value ? p() : r();
|
|
75
78
|
}
|
|
76
79
|
function f() {
|
|
77
|
-
|
|
80
|
+
p();
|
|
78
81
|
}
|
|
79
|
-
return
|
|
80
|
-
} }),
|
|
81
|
-
function
|
|
82
|
+
return fe(() => window.addEventListener("scroll", f, { capture: !0, passive: !0 })), oe(() => window.removeEventListener("scroll", f, { capture: !0 })), (v, g) => (n(), i(R, null, [k("button", { ref_key: "button", ref: l, type: "button", class: "inline-grid size-4 shrink-0 place-items-center rounded-full text-phantom-subtle outline-none transition-colors hover:text-phantom-text focus-visible:text-phantom-text focus-visible:ring-2 focus-visible:ring-phantom-accent/30", "aria-label": a.label ? `About ${a.label}` : "More about this", "aria-describedby": o.value ? z(t) : void 0, "data-info-tip": "", onMouseenter: r, onMouseleave: p, onFocus: r, onBlur: p, onClick: c, onKeydown: Ve(p, ["escape"]) }, [le(z(Ke), { size: 12, "stroke-width": "2", "aria-hidden": "true" })], 40, ot), (n(), y(re, { to: "body" }, [o.value ? (n(), i("span", { key: 0, id: z(t), role: "tooltip", class: "pointer-events-none fixed z-[200] w-max max-w-64 bg-phantom-elevated -translate-x-1/2 -translate-y-full rounded-lg border border-phantom-border-strong/80 px-2.5 py-1.5 text-left text-2xs leading-4 text-phantom-text-soft shadow-popover", style: J({ top: `${o.value.top}px`, left: `${o.value.left}px` }) }, _(a.text), 13, lt)) : m("", !0)]))], 64));
|
|
83
|
+
} }), st = { class: "min-w-0", "data-field": "" }, it = { key: 0, class: "mb-1.5 flex min-w-0 items-center gap-1.5" }, dt = ["for"], ut = { key: 1, class: "ml-auto shrink-0 text-2xs text-phantom-subtle" }, pt = ["id"], ct = ["id"];
|
|
84
|
+
function ge(e, a, t) {
|
|
82
85
|
return t || a ? `${e}-note` : void 0;
|
|
83
86
|
}
|
|
84
|
-
const
|
|
87
|
+
const ye = V({ __name: "FieldFrame", props: { for: {}, label: { default: void 0 }, info: { default: void 0 }, optional: { type: Boolean, default: !1 }, hint: { default: void 0 }, error: { default: void 0 }, disabled: { type: Boolean, default: !1 } }, setup(e) {
|
|
85
88
|
const a = e;
|
|
86
|
-
return (t,
|
|
87
|
-
} }),
|
|
88
|
-
const t = e,
|
|
89
|
-
var
|
|
90
|
-
return (
|
|
91
|
-
}),
|
|
92
|
-
function
|
|
93
|
-
const
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
return (
|
|
97
|
-
} }),
|
|
98
|
-
return (a, t) => (
|
|
99
|
-
} }),
|
|
100
|
-
const t = e,
|
|
101
|
-
function
|
|
102
|
-
var
|
|
103
|
-
const
|
|
104
|
-
|
|
89
|
+
return (t, l) => (n(), i("div", st, [a.label || t.$slots.label ? (n(), i("div", it, [k("label", { for: a.for, class: h(["truncate text-xs font-medium text-phantom-text-soft", a.disabled && "opacity-60"]) }, [I(t.$slots, "label", {}, () => [xe(_(a.label), 1)])], 10, dt), a.info ? (n(), y(rt, { key: 0, text: a.info, label: a.label }, null, 8, ["text", "label"])) : m("", !0), a.optional ? (n(), i("span", ut, " Optional ")) : m("", !0)])) : m("", !0), I(t.$slots, "default"), a.error ? (n(), i("p", { key: 1, id: `${a.for}-note`, class: "mt-1.5 flex items-start gap-1.5 text-2xs leading-4 text-phantom-danger", role: "alert" }, [le(z(Ue), { size: 12, class: "mt-0.5 shrink-0", "aria-hidden": "true" }), k("span", null, _(a.error), 1)], 8, pt)) : a.hint ? (n(), i("p", { key: 2, id: `${a.for}-note`, class: "mt-1.5 text-2xs leading-4 text-phantom-subtle" }, _(a.hint), 9, ct)) : m("", !0)]));
|
|
90
|
+
} }), mt = { class: "group relative min-w-0" }, ht = ["id", "value", "type", "placeholder", "disabled", "required", "list", "aria-invalid", "aria-describedby"], bt = { key: 1, class: "absolute inset-y-0 right-1.5 flex items-center gap-1 text-2xs text-phantom-subtle" }, ft = ["aria-label", "aria-pressed", "title", "disabled"], xt = ["id"], vt = ["value"], oa = V({ inheritAttrs: !1, __name: "index", props: { modelValue: { default: "" }, id: { default: void 0 }, label: { default: void 0 }, type: { default: "text" }, placeholder: { default: void 0 }, icon: { default: void 0 }, disabled: { type: Boolean, default: !1 }, required: { type: Boolean, default: !1 }, suggestions: { default: void 0 }, size: { default: "md" }, hint: { default: void 0 }, error: { default: void 0 }, info: { default: void 0 }, optional: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
|
|
91
|
+
const t = e, l = a, o = { xs: "h-7 text-2xs rounded-md bg-phantom-canvas px-2", sm: "h-8 text-xs rounded-lg bg-phantom-surface px-3", md: "h-9 text-[13px] rounded-lg bg-phantom-surface px-3", lg: "h-10 text-sm rounded-lg bg-phantom-surface px-3" }, r = { xs: 12, sm: 13, md: 14, lg: 15 }, p = be(), c = Z(), f = ne(), v = b(() => t.id ?? f), g = b(() => {
|
|
92
|
+
var C;
|
|
93
|
+
return (C = t.suggestions) != null && C.length ? `${v.value}-suggestions` : void 0;
|
|
94
|
+
}), x = M(!1), $ = b(() => t.type === "password"), B = b(() => $.value && x.value ? "text" : t.type), S = b(() => !!t.error), j = b(() => ge(v.value, t.hint, t.error)), P = b(() => $.value || !!c.trailing);
|
|
95
|
+
function H(C) {
|
|
96
|
+
const T = C.target;
|
|
97
|
+
l("update:modelValue", t.type === "number" ? T.valueAsNumber : T.value);
|
|
98
|
+
}
|
|
99
|
+
return (C, T) => (n(), y(ye, { for: v.value, label: t.label, info: t.info, optional: t.optional, hint: t.hint, error: t.error, disabled: t.disabled, "data-input": "" }, Be({ default: F(() => [k("div", mt, [t.icon ? (n(), y(q(t.icon), { key: 0, size: r[t.size], "stroke-width": "1.8", class: h(["pointer-events-none absolute top-1/2 -translate-y-1/2 transition-colors", [t.size === "xs" ? "left-2" : "left-3", S.value ? "text-phantom-danger" : "text-phantom-subtle group-focus-within:text-phantom-text-soft"]]), "aria-hidden": "true" }, null, 8, ["size", "class"])) : m("", !0), k("input", Me(z(p), { id: v.value, value: t.modelValue, type: B.value, placeholder: t.placeholder, disabled: t.disabled, required: t.required, list: g.value, "aria-invalid": S.value || void 0, "aria-describedby": j.value, class: ["w-full min-w-0 border text-phantom-text shadow-[inset_0_1px_0_rgb(0_0_0/0.04)] outline-none transition-[border-color,background-color,box-shadow] placeholder:text-phantom-subtle hover:border-phantom-border-strong focus:bg-phantom-selected focus:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", [o[t.size], t.icon && (t.size === "xs" ? "pl-7" : "pl-9"), P.value && "pr-10", S.value ? "border-phantom-danger/60 hover:border-phantom-danger/80 focus:border-phantom-danger/80 focus:ring-phantom-danger/15" : "border-phantom-border focus:border-phantom-border-strong focus:ring-phantom-accent/10"]], onInput: H }), null, 16, ht), P.value ? (n(), i("span", bt, [I(C.$slots, "trailing"), $.value ? (n(), i("button", { key: 0, type: "button", class: "grid size-7 place-items-center rounded-md text-phantom-subtle outline-none transition-colors hover:bg-phantom-selected hover:text-phantom-text focus-visible:ring-2 focus-visible:ring-phantom-accent/30 disabled:pointer-events-none", "aria-label": x.value ? "Hide password" : "Show password", "aria-pressed": x.value, title: x.value ? "Hide password" : "Show password", disabled: t.disabled, "data-reveal-password": "", onClick: T[0] || (T[0] = (D) => x.value = !x.value) }, [(n(), y(q(x.value ? z(Fe) : z(He)), { size: 14, "stroke-width": "1.8" }))], 8, ft)) : m("", !0)])) : m("", !0), g.value ? (n(), i("datalist", { key: 2, id: g.value }, [(n(!0), i(R, null, X(t.suggestions, (D) => (n(), i("option", { key: D, value: D }, null, 8, vt))), 128))], 8, xt)) : m("", !0)])]), _: 2 }, [z(c).label ? { name: "label", fn: F(() => [I(C.$slots, "label")]), key: "0" } : void 0]), 1032, ["for", "label", "info", "optional", "hint", "error", "disabled"]));
|
|
100
|
+
} }), gt = { class: "flex flex-wrap items-end justify-between gap-4" }, yt = { class: "min-w-0" }, kt = { key: 0, class: "mb-1 text-xs font-medium text-phantom-subtle" }, wt = { class: "text-display text-phantom-text" }, zt = { key: 1, class: "mt-1.5 max-w-xl text-[13px] leading-6 text-phantom-muted" }, _t = { key: 0, class: "flex shrink-0 flex-wrap items-center gap-2" }, la = V({ __name: "index", props: { title: {}, eyebrow: { default: void 0 }, description: { default: void 0 } }, setup(e) {
|
|
101
|
+
return (a, t) => (n(), i("header", gt, [k("div", yt, [e.eyebrow ? (n(), i("p", kt, _(e.eyebrow), 1)) : m("", !0), k("h1", wt, _(e.title), 1), e.description ? (n(), i("p", zt, _(e.description), 1)) : m("", !0)]), a.$slots.actions ? (n(), i("div", _t, [I(a.$slots, "actions")])) : m("", !0)]));
|
|
102
|
+
} }), $t = ["aria-selected", "onClick"], Ct = { key: 1, class: "text-2xs text-phantom-subtle" }, ra = V({ __name: "index", props: { modelValue: {}, options: {}, variant: { default: "pill" }, size: { default: "md" }, track: { type: Boolean, default: !1 }, block: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
|
|
103
|
+
const t = e, l = a, o = M(null), r = M(null), p = M(!1);
|
|
104
|
+
function c() {
|
|
105
|
+
var v;
|
|
106
|
+
const g = (v = o.value) == null ? void 0 : v.querySelector('[aria-selected="true"]');
|
|
107
|
+
r.value = g ? { left: g.offsetLeft, width: g.offsetWidth } : null;
|
|
105
108
|
}
|
|
106
109
|
let f = null;
|
|
107
|
-
return
|
|
108
|
-
|
|
109
|
-
}),
|
|
110
|
-
|
|
111
|
-
}, { deep: !0 }), (
|
|
112
|
-
} })
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
const
|
|
116
|
-
|
|
117
|
-
const
|
|
118
|
-
|
|
119
|
-
}
|
|
120
|
-
return
|
|
121
|
-
}
|
|
122
|
-
|
|
110
|
+
return fe(() => {
|
|
111
|
+
c(), requestAnimationFrame(() => p.value = !0), f = new ResizeObserver(() => c()), o.value && f.observe(o.value);
|
|
112
|
+
}), oe(() => f == null ? void 0 : f.disconnect()), G(() => [t.modelValue, t.options.map((v) => `${v.label}${v.badge ?? ""}`)], () => {
|
|
113
|
+
ae(c);
|
|
114
|
+
}, { deep: !0 }), (v, g) => (n(), i("div", { ref_key: "root", ref: o, class: h(["relative items-center", [e.block ? "flex w-full" : "inline-flex", e.variant === "underline" ? "gap-6" : "gap-0.5 rounded-lg p-0.5", e.variant === "pill" && e.track && "border border-phantom-border bg-phantom-surface"]]), role: "tablist" }, [r.value ? (n(), i("span", { key: 0, class: h(["absolute left-0", [e.variant === "underline" ? "bottom-0 h-0.5 rounded-full bg-phantom-text" : "phantom-segment-indicator inset-y-0.5 rounded-md bg-phantom-selected shadow-sm", p.value && "transition-[transform,width] duration-300 ease-spring"]]), style: J({ transform: `translateX(${r.value.left}px)`, width: `${r.value.width}px` }), "aria-hidden": "true" }, null, 6)) : m("", !0), (n(!0), i(R, null, X(e.options, (x) => (n(), i("button", { key: x.value, type: "button", role: "tab", "aria-selected": x.value === e.modelValue, class: h(["relative inline-flex items-center gap-1.5 font-medium outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-phantom-accent/45", [e.block && "flex-1 justify-center", e.variant === "underline" ? "rounded-md py-3 text-sm" : e.size === "sm" ? "rounded-md px-2 py-0.5 text-2xs" : "rounded-md px-2.5 py-1 text-xs", x.value === e.modelValue ? "text-phantom-text" : "text-phantom-muted hover:text-phantom-text", e.variant === "underline" && !r.value && x.value === e.modelValue && "shadow-[inset_0_-2px_0_rgb(var(--phantom-text))]"]]), onClick: ($) => l("update:modelValue", x.value) }, [x.icon ? (n(), y(q(x.icon), { key: 0, size: e.size === "sm" ? 12 : 13, class: "shrink-0", "aria-hidden": "true" }, null, 8, ["size"])) : m("", !0), xe(" " + _(x.label) + " ", 1), x.badge !== void 0 ? (n(), i("span", Ct, _(x.badge), 1)) : m("", !0)], 10, $t))), 128))], 2));
|
|
115
|
+
} });
|
|
116
|
+
function U(e, a, t) {
|
|
117
|
+
var l;
|
|
118
|
+
const o = e.length;
|
|
119
|
+
for (let r = 1; r <= o; r += 1) {
|
|
120
|
+
const p = ((a + t * r) % o + o) % o;
|
|
121
|
+
if (!((l = e[p]) != null && l.disabled)) return p;
|
|
122
|
+
}
|
|
123
|
+
return -1;
|
|
124
|
+
}
|
|
125
|
+
function Vt(e, a) {
|
|
126
|
+
var t;
|
|
127
|
+
const l = e.findIndex((o) => o.value === a);
|
|
128
|
+
return l >= 0 && !((t = e[l]) != null && t.disabled) ? l : U(e, -1, 1);
|
|
129
|
+
}
|
|
130
|
+
function Bt(e, a, t) {
|
|
131
|
+
const l = t.toLowerCase(), o = e.length, r = t.length === 1 ? a + 1 : Math.max(a, 0);
|
|
132
|
+
for (let p = 0; p < o; p += 1) {
|
|
133
|
+
const c = (r + p) % o, f = e[c];
|
|
134
|
+
if (f && !f.disabled && f.label.toLowerCase().startsWith(l)) return c;
|
|
135
|
+
}
|
|
136
|
+
return -1;
|
|
137
|
+
}
|
|
138
|
+
const Mt = 600;
|
|
139
|
+
function qt(e = Date.now) {
|
|
140
|
+
let a = "", t = -1 / 0;
|
|
141
|
+
return (l) => {
|
|
142
|
+
const o = e();
|
|
143
|
+
return a = o - t > Mt ? l : a + l, t = o, a;
|
|
144
|
+
};
|
|
145
|
+
}
|
|
146
|
+
function St(e, a, t, l) {
|
|
147
|
+
const { key: o } = e;
|
|
148
|
+
if (!a) return ["ArrowDown", "ArrowUp", "Enter", " "].includes(o) ? { kind: "open" } : { kind: "none" };
|
|
149
|
+
switch (o) {
|
|
150
|
+
case "ArrowDown":
|
|
151
|
+
return { kind: "move", index: U(l, t, 1) };
|
|
152
|
+
case "ArrowUp":
|
|
153
|
+
return { kind: "move", index: U(l, t, -1) };
|
|
154
|
+
case "Home":
|
|
155
|
+
return { kind: "move", index: U(l, -1, 1) };
|
|
156
|
+
case "End":
|
|
157
|
+
return { kind: "move", index: U(l, l.length, -1) };
|
|
158
|
+
case "Enter":
|
|
159
|
+
case " ":
|
|
160
|
+
return { kind: "choose", index: t };
|
|
161
|
+
case "Escape":
|
|
162
|
+
return { kind: "close", refocus: !0 };
|
|
163
|
+
case "Tab":
|
|
164
|
+
return { kind: "close", refocus: !1 };
|
|
165
|
+
default:
|
|
166
|
+
return o.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey ? { kind: "type", key: o } : { kind: "none" };
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
const me = 288, O = 4, W = 8;
|
|
170
|
+
function he(e, a, t, l = e.width) {
|
|
171
|
+
const o = a.height - e.bottom - W, r = e.top - W, p = o < Math.min(me, t) && r > o, c = e.left + l - (a.width - W);
|
|
172
|
+
return { left: `${c > 0 ? Math.max(W, e.left - c) : e.left}px`, minWidth: `${e.width}px`, maxWidth: `${Math.max(e.width, Math.min(352, a.width - W * 2))}px`, maxHeight: `${Math.max(0, Math.min(me, p ? r - O : o - O))}px`, ...p ? { bottom: `${a.height - e.top + O}px` } : { top: `${e.bottom + O}px` } };
|
|
173
|
+
}
|
|
174
|
+
const Et = ["id", "disabled", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant"], It = { key: 1, class: "shrink-0 text-phantom-subtle" }, jt = ["id", "aria-label"], At = ["id", "data-index", "aria-selected", "aria-disabled", "onMouseenter", "onClick"], Pt = { class: "min-w-0 flex-1" }, Tt = { key: 0, class: "mt-0.5 block text-2xs leading-4 text-phantom-subtle" }, Lt = { key: 1, class: "shrink-0 text-phantom-subtle" }, Rt = { key: 3, class: "w-3 shrink-0", "aria-hidden": "true" }, Dt = { key: 0, class: "px-3 py-1.5 text-2xs text-phantom-subtle" }, sa = V({ __name: "Select", props: { modelValue: {}, options: { default: void 0 }, ariaLabel: { default: void 0 }, label: { default: void 0 }, info: { default: void 0 }, hint: { default: void 0 }, error: { default: void 0 }, optional: { type: Boolean, default: !1 }, icon: { default: void 0 }, disabled: { type: Boolean, default: !1 }, placeholder: { default: "Choose one" }, size: { default: "md" }, variant: { default: "default" }, id: { default: void 0 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
|
|
175
|
+
const t = e, l = a, o = Z(), r = `phantom-select-${ne()}`, p = b(() => t.id ?? `${r}-field`), c = M(!1), f = M(-1), v = M(null), g = M(null), x = M({}), $ = b(() => t.size === "sm"), B = b(() => t.size === "lg"), S = b(() => t.variant === "ghost"), j = b(() => !!(t.label || t.hint || t.error));
|
|
176
|
+
function P(u) {
|
|
177
|
+
return typeof u == "string" ? u : Array.isArray(u) ? u.map((d) => P(d)).join("") : u && typeof u == "object" && "children" in u ? P(u.children) : "";
|
|
178
|
+
}
|
|
179
|
+
function H(u, d) {
|
|
180
|
+
for (const s of u ?? []) {
|
|
181
|
+
if (!s || typeof s != "object" || Array.isArray(s)) continue;
|
|
182
|
+
const w = s;
|
|
183
|
+
if (w.type === "option") {
|
|
184
|
+
const E = w.props ?? {}, N = P(w.children).trim();
|
|
185
|
+
d.push({ value: "value" in E ? E.value : N, label: N, description: typeof E.title == "string" ? E.title : void 0, disabled: E.disabled === "" || E.disabled === !0 });
|
|
186
|
+
} else w.type !== Ie && w.type !== je && Array.isArray(w.children) && H(w.children, d);
|
|
187
|
+
}
|
|
188
|
+
return d;
|
|
189
|
+
}
|
|
190
|
+
let C = [];
|
|
191
|
+
function T() {
|
|
192
|
+
var u;
|
|
193
|
+
return C = t.options ?? H((u = o.default) == null ? void 0 : u.call(o), []), C;
|
|
194
|
+
}
|
|
195
|
+
function D(u) {
|
|
196
|
+
return u.find((d) => d.value === t.modelValue);
|
|
197
|
+
}
|
|
198
|
+
async function ke() {
|
|
199
|
+
var u;
|
|
200
|
+
const d = v.value;
|
|
201
|
+
if (!d) return;
|
|
202
|
+
const s = { width: window.innerWidth, height: window.innerHeight }, w = C.length * 32 + 8, E = d.getBoundingClientRect();
|
|
203
|
+
x.value = he(E, s, w), await ae();
|
|
204
|
+
const N = (u = g.value) == null ? void 0 : u.getBoundingClientRect().width;
|
|
205
|
+
N && (x.value = he(E, s, w, N));
|
|
206
|
+
}
|
|
207
|
+
function Y() {
|
|
208
|
+
ae(() => {
|
|
209
|
+
var u, d;
|
|
210
|
+
(d = (u = g.value) == null ? void 0 : u.querySelector(`[data-index="${f.value}"]`)) == null || d.scrollIntoView({ block: "nearest" });
|
|
211
|
+
});
|
|
212
|
+
}
|
|
213
|
+
async function se() {
|
|
214
|
+
t.disabled || c.value || (f.value = Vt(C, t.modelValue), c.value = !0, await ke(), Y());
|
|
215
|
+
}
|
|
216
|
+
function L(u = !1) {
|
|
217
|
+
var d;
|
|
218
|
+
c.value && (c.value = !1, u && ((d = v.value) == null || d.focus()));
|
|
219
|
+
}
|
|
220
|
+
function ie(u) {
|
|
221
|
+
const d = C[u];
|
|
222
|
+
!d || d.disabled || (d.value !== t.modelValue && l("update:modelValue", d.value), L(!0));
|
|
223
|
+
}
|
|
224
|
+
const we = qt();
|
|
225
|
+
function ze(u) {
|
|
226
|
+
const d = St(u, c.value, f.value, C);
|
|
227
|
+
switch (d.kind) {
|
|
228
|
+
case "open":
|
|
229
|
+
u.preventDefault(), se();
|
|
230
|
+
return;
|
|
231
|
+
case "move":
|
|
232
|
+
u.preventDefault(), f.value = d.index, Y();
|
|
233
|
+
return;
|
|
234
|
+
case "choose":
|
|
235
|
+
u.preventDefault(), ie(d.index);
|
|
236
|
+
return;
|
|
237
|
+
case "close":
|
|
238
|
+
d.refocus && (u.preventDefault(), u.stopPropagation()), L(d.refocus);
|
|
239
|
+
return;
|
|
240
|
+
case "type": {
|
|
241
|
+
const s = Bt(C, f.value, we(d.key));
|
|
242
|
+
s >= 0 && (f.value = s, Y());
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
function de(u) {
|
|
248
|
+
var d, s;
|
|
249
|
+
const w = u.target;
|
|
250
|
+
(d = v.value) != null && d.contains(w) || (s = g.value) != null && s.contains(w) || L();
|
|
251
|
+
}
|
|
252
|
+
function _e(u) {
|
|
253
|
+
var d;
|
|
254
|
+
(d = g.value) != null && d.contains(u.target) || L();
|
|
255
|
+
}
|
|
256
|
+
function ue() {
|
|
257
|
+
L();
|
|
258
|
+
}
|
|
259
|
+
function pe(u) {
|
|
260
|
+
const d = u ? "addEventListener" : "removeEventListener";
|
|
261
|
+
document[d]("mousedown", de, !0), document[d]("touchstart", de, !0), window[d]("scroll", _e, !0), window[d]("resize", ue), window[d]("blur", ue);
|
|
262
|
+
}
|
|
263
|
+
G(c, (u) => pe(u)), G(() => t.disabled, (u) => u && L()), oe(() => pe(!1));
|
|
264
|
+
const $e = b(() => S.value ? ["gap-1 rounded-md bg-transparent px-1.5 font-medium text-inherit hover:bg-phantom-text/5 focus-visible:ring-2 focus-visible:ring-phantom-accent/20", $.value ? "h-8 text-xs" : "h-9 text-[13px]"] : ["border text-phantom-text focus-visible:border-phantom-border-strong focus-visible:ring-2 focus-visible:ring-phantom-accent/15", $.value ? "h-8 gap-1.5 rounded-lg bg-phantom-surface pl-3 pr-2 text-xs" : B.value ? "h-12 gap-3 rounded-full bg-phantom-panel pl-5 pr-4 text-sm" : "h-9 gap-2 rounded-lg bg-phantom-surface pl-3 pr-2.5 text-[13px]", t.error ? "border-phantom-danger/60 hover:border-phantom-danger/80" : c.value ? "border-phantom-border-strong" : "border-phantom-border hover:border-phantom-border-strong"]);
|
|
265
|
+
return (u, d) => (n(), y(q(j.value ? ye : "div"), qe(Se(j.value ? { for: p.value, label: e.label, info: e.info, optional: e.optional, hint: e.hint, error: e.error, disabled: e.disabled } : { class: "relative inline-flex min-w-0 align-middle" })), { default: F(() => [k("div", { class: h(j.value ? "relative flex min-w-0" : "contents") }, [k("button", { id: p.value, ref_key: "trigger", ref: v, type: "button", class: h(["flex w-full min-w-0 items-center outline-none transition-colors duration-150 disabled:pointer-events-none disabled:opacity-50", $e.value]), disabled: e.disabled, "aria-label": e.label ? void 0 : e.ariaLabel, "aria-invalid": e.error ? !0 : void 0, "aria-describedby": z(ge)(p.value, e.hint, e.error), "aria-haspopup": "listbox", "aria-expanded": c.value, "aria-controls": c.value ? `${r}-list` : void 0, "aria-activedescendant": c.value && f.value >= 0 ? `${r}-option-${f.value}` : void 0, onClick: d[0] || (d[0] = (s) => c.value ? L() : void se()), onKeydown: ze }, [(n(!0), i(R, null, X([D(T())], (s) => (n(), i(R, { key: String(s == null ? void 0 : s.value) }, [!S.value && (e.icon ?? (s == null ? void 0 : s.icon)) ? (n(), y(q(e.icon ?? (s == null ? void 0 : s.icon)), { key: 0, size: 13, "stroke-width": 1.8, "aria-hidden": "true", class: h(["shrink-0", [$.value ? "" : "mr-0.5", e.error ? "text-phantom-danger" : "text-phantom-subtle"]]) }, null, 8, ["class"])) : m("", !0), k("span", { class: h(["min-w-0 truncate text-left", [S.value ? "" : "flex-1", s ? "" : "text-phantom-subtle"]]) }, _((s == null ? void 0 : s.label) ?? e.placeholder), 3), s != null && s.detail ? (n(), i("span", It, _(s.detail), 1)) : m("", !0)], 64))), 128)), le(z(We), { size: $.value || S.value ? 12 : B.value ? 15 : 13, "aria-hidden": "true", class: h(["shrink-0 transition-transform duration-150", [S.value ? "opacity-70" : "text-phantom-subtle", c.value ? "rotate-180" : ""]]) }, null, 8, ["size", "class"])], 42, Et), (n(), y(re, { to: "body" }, [c.value ? (n(), i("ul", { key: 0, id: `${r}-list`, ref_key: "list", ref: g, role: "listbox", "aria-label": e.label ?? e.ariaLabel, class: h(["phantom-select-list fixed z-[1000] overflow-y-auto border border-phantom-border-strong/80 bg-phantom-elevated shadow-popover", B.value ? "rounded-[22px] p-1.5" : "rounded-[10px] p-1"]), style: J(x.value) }, [(n(!0), i(R, null, X(z(C), (s, w) => (n(), i("li", { id: `${r}-option-${w}`, key: `${String(s.value)}-${w}`, "data-index": w, role: "option", "aria-selected": s.value === e.modelValue, "aria-disabled": s.disabled || void 0, class: h(["flex cursor-default gap-2 text-phantom-text", [$.value ? "rounded-lg px-2 py-1 text-2xs" : B.value ? "rounded-2xl px-3.5 py-2.5 text-sm" : "rounded-lg px-2 py-1.5 text-xs", s.description ? "items-start" : "items-center", s.disabled ? "opacity-40" : "", w === f.value && !s.disabled ? "bg-phantom-control" : ""]]), onMousedown: d[1] || (d[1] = Ee(() => {
|
|
266
|
+
}, ["prevent"])), onMouseenter: (E) => !s.disabled && (f.value = w), onClick: (E) => ie(w) }, [s.icon ? (n(), y(q(s.icon), { key: 0, size: 13, "stroke-width": 1.8, "aria-hidden": "true", class: h(["shrink-0 text-phantom-subtle", s.description ? "mt-px" : ""]) }, null, 8, ["class"])) : m("", !0), k("span", Pt, [k("span", { class: h(["block truncate", s.value === e.modelValue ? "font-medium" : ""]) }, _(s.label), 3), s.description ? (n(), i("span", Tt, _(s.description), 1)) : m("", !0)]), s.detail ? (n(), i("span", Lt, _(s.detail), 1)) : m("", !0), s.value === e.modelValue ? (n(), y(z(ve), { key: 2, size: 12, "aria-hidden": "true", class: h(["shrink-0 text-phantom-accent", s.description ? "mt-0.5" : ""]) }, null, 8, ["class"])) : (n(), i("span", Rt))], 42, At))), 128)), z(C).length ? m("", !0) : (n(), i("li", Dt, " Nothing to choose from "))], 14, jt)) : m("", !0)]))], 2)]), _: 1 }, 16));
|
|
267
|
+
} }), ia = V({ __name: "Spinner", props: { size: { default: 13 } }, setup(e) {
|
|
268
|
+
return (a, t) => (n(), y(z(Oe), { size: e.size, class: "animate-spin", "aria-hidden": "true" }, null, 8, ["size"]));
|
|
269
|
+
} }), Nt = ["id", "checked", "indeterminate", "disabled", "aria-label"], da = V({ __name: "Checkbox", props: { modelValue: { type: Boolean }, label: { default: void 0 }, indeterminate: { type: Boolean, default: !1 }, disabled: { type: Boolean, default: !1 }, block: { type: Boolean, default: !1 }, align: { default: "center" }, id: { default: void 0 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
|
|
270
|
+
const t = a, l = Z();
|
|
271
|
+
return (o, r) => (n(), y(q(z(l).default ? "label" : "span"), { class: h(["gap-2.5", [z(l).default && e.block ? "flex w-full" : "inline-flex", e.align === "start" ? "items-start" : "items-center", e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"]]) }, { default: F(() => [k("span", { class: h(["relative grid size-4 shrink-0 place-items-center", z(l).default && e.align === "start" ? "mt-px" : ""]) }, [k("input", { id: e.id, type: "checkbox", class: "peer absolute inset-0 m-0 size-full cursor-[inherit] appearance-none opacity-0", checked: e.modelValue, indeterminate: e.indeterminate, disabled: e.disabled, "aria-label": z(l).default ? void 0 : e.label, onChange: r[0] || (r[0] = (p) => t("update:modelValue", p.target.checked)) }, null, 40, Nt), k("span", { class: h(["pointer-events-none grid size-4 place-items-center rounded-[5px] border transition-colors duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-phantom-accent/40", [e.modelValue || e.indeterminate ? "border-phantom-text bg-phantom-text text-phantom-canvas" : "border-phantom-border-strong bg-phantom-surface", !e.disabled && !e.modelValue && !e.indeterminate && "peer-hover:border-phantom-muted"]]), "aria-hidden": "true" }, [e.indeterminate ? (n(), y(z(Ge), { key: 0, size: 11, "stroke-width": 3 })) : e.modelValue ? (n(), y(z(ve), { key: 1, size: 11, "stroke-width": 3 })) : m("", !0)], 2)], 2), I(o.$slots, "default")]), _: 3 }, 8, ["class"]));
|
|
272
|
+
} }), Wt = ["checked", "disabled", "aria-label"], ua = V({ __name: "Switch", props: { modelValue: { type: Boolean }, label: { default: void 0 }, disabled: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(e, { emit: a }) {
|
|
273
|
+
const t = e, l = a;
|
|
274
|
+
function o(r) {
|
|
275
|
+
const p = r.currentTarget;
|
|
276
|
+
t.disabled || p.closest("label") || l("update:modelValue", !t.modelValue);
|
|
277
|
+
}
|
|
278
|
+
return (r, p) => (n(), i("span", { class: h(["relative inline-flex shrink-0", e.disabled ? "opacity-50" : "cursor-pointer"]), onClick: o }, [k("input", { type: "checkbox", role: "switch", class: "peer sr-only", checked: e.modelValue, disabled: e.disabled, "aria-label": e.label, onChange: p[0] || (p[0] = (c) => l("update:modelValue", c.target.checked)) }, null, 40, Wt), k("span", { class: h(["relative h-[17px] w-[30px] rounded-full border border-phantom-border-strong bg-phantom-surface transition-[background-color,border-color] duration-150 peer-checked:border-phantom-text-soft peer-checked:bg-phantom-text-soft peer-checked:[&>span]:translate-x-[13px] peer-checked:[&>span]:bg-phantom-accent-contrast peer-focus-visible:ring-2 peer-focus-visible:ring-phantom-accent/30", !e.disabled && "hover:border-phantom-muted peer-checked:hover:border-phantom-text"]), "aria-hidden": "true" }, [...p[1] || (p[1] = [k("span", { class: "absolute left-[2px] top-[2px] size-[11px] rounded-full bg-phantom-subtle shadow-[0_1px_2px_rgb(var(--phantom-shadow)/0.35)] transition-[transform,background-color] duration-200 ease-spring" }, null, -1)])], 2)], 2));
|
|
279
|
+
} }), Ut = { class: "block text-xs font-semibold text-phantom-text" }, Ft = { key: 0, class: "mt-0.5 block text-2xs text-phantom-subtle" }, Ht = { key: 1, class: "mt-1 block text-2xs text-phantom-amber" }, pa = V({ __name: "Tooltip", props: { at: {}, title: {}, description: { default: void 0 }, note: { default: void 0 }, place: { default: "beside" } }, setup(e) {
|
|
280
|
+
return (a, t) => (n(), y(re, { to: "body" }, [e.at ? (n(), i("span", { key: 0, role: "tooltip", class: h(["phantom-glass-raised pointer-events-none fixed z-[200] max-w-56 rounded-lg border border-phantom-border-strong/80 px-2.5 py-1.5 text-left", e.place === "below" ? "-translate-x-1/2" : "-translate-y-1/2"]), style: J({ top: `${e.at.top}px`, left: `${e.at.left}px` }) }, [k("span", Ut, _(e.title), 1), e.description ? (n(), i("span", Ft, _(e.description), 1)) : m("", !0), e.note ? (n(), i("span", Ht, _(e.note), 1)) : m("", !0)], 6)) : m("", !0)]));
|
|
123
281
|
} });
|
|
124
|
-
function
|
|
282
|
+
function ca(e, a = 10) {
|
|
125
283
|
const t = e.getBoundingClientRect();
|
|
126
284
|
return { top: t.top + t.height / 2, left: t.right + a };
|
|
127
285
|
}
|
|
128
|
-
|
|
286
|
+
M("dark");
|
|
129
287
|
export {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
288
|
+
ea as Avatar,
|
|
289
|
+
ta as Badge,
|
|
290
|
+
Yt as Button,
|
|
291
|
+
aa as Callout,
|
|
292
|
+
da as Checkbox,
|
|
293
|
+
na as EmptyState,
|
|
294
|
+
ye as FieldFrame,
|
|
295
|
+
rt as InfoTip,
|
|
296
|
+
oa as Input,
|
|
297
|
+
la as PageHeader,
|
|
298
|
+
ra as SegmentedControl,
|
|
299
|
+
sa as Select,
|
|
300
|
+
ia as Spinner,
|
|
301
|
+
ua as Switch,
|
|
302
|
+
pa as Tooltip,
|
|
303
|
+
ca as tooltipBeside,
|
|
304
|
+
Zt as useGames,
|
|
305
|
+
Xt as usePhantom,
|
|
306
|
+
Le as usePlugin,
|
|
307
|
+
Jt as usePreferences,
|
|
308
|
+
Qt as useThemeMode
|
|
149
309
|
};
|