@mkbabb/glass-ui 0.3.0 → 2.1.0

package/dist/DataTable-Ce00dbHD.js

@@ -0,0 +1,460 @@
+import { t as e } from "./cn-DJXf4yaB.js";
+import { n as t } from "./button-BlOW34DT.js";
+import { t as n } from "./_plugin-vue_export-helper-n-_DRHWS.js";
+import { n as r, r as i, t as a } from "./ContextMenuContent-CvXfU5qz.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useSlots as ee, withCtx as w, withModifiers as T } from "vue";
+import { useElementSize as te } from "@vueuse/core";
+//#region src/components/ui/table/Table.vue?vue&type=script&setup=true&lang.ts
+var E = { class: "relative w-full overflow-auto" }, D = /* @__PURE__ */ m({
+	__name: "Table",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (_(), u("div", E, [d("table", { class: g(C(e)("w-full caption-bottom text-sm", n.class)) }, [b(t.$slots, "default")], 2)]));
+	}
+}), O = /* @__PURE__ */ m({
+	__name: "TableBody",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (_(), u("tbody", { class: g(C(e)("[&_tr:last-child]:border-0", n.class)) }, [b(t.$slots, "default")], 2));
+	}
+}), k = /* @__PURE__ */ m({
+	__name: "TableCell",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (_(), u("td", { class: g(C(e)("table-cell align-middle [&:has([role=checkbox])]:pr-0", n.class)) }, [b(t.$slots, "default")], 2));
+	}
+}), A = /* @__PURE__ */ m({
+	__name: "TableHead",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (_(), u("th", { class: g(C(e)("table-head text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", n.class)) }, [b(t.$slots, "default")], 2));
+	}
+}), j = /* @__PURE__ */ m({
+	__name: "TableHeader",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (_(), u("thead", { class: g(C(e)("[&_tr]:border-b", n.class)) }, [b(t.$slots, "default")], 2));
+	}
+}), M = /* @__PURE__ */ m({
+	__name: "TableRow",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (_(), u("tr", { class: g(C(e)("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", n.class)) }, [b(t.$slots, "default")], 2));
+	}
+}), N = { class: "flex items-center justify-center py-10" }, P = /* @__PURE__ */ m({
+	__name: "TableEmpty",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		colspan: { default: 1 }
+	},
+	setup(t) {
+		let n = t, r = s(() => {
+			let { class: e, ...t } = n;
+			return t;
+		});
+		return (t, i) => (_(), c(M, null, {
+			default: w(() => [p(k, h({ class: C(e)("p-4 whitespace-nowrap align-middle text-sm text-foreground", n.class) }, r.value), {
+				default: w(() => [d("div", N, [b(t.$slots, "default")])]),
+				_: 3
+			}, 16, ["class"])]),
+			_: 3
+		}));
+	}
+}), F = /* @__PURE__ */ n(/* @__PURE__ */ m({
+	__name: "Skeleton",
+	props: {
+		variant: { default: "pulse" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t;
+		return (r, i) => (_(), u("div", { class: g(C(e)("rounded-input bg-muted", t.variant === "pulse" && "animate-pulse", t.variant === "shimmer" && "skeleton-shimmer", t.variant === "breath" && "skeleton-breath", n.class)) }, null, 2));
+	}
+}), [["__scopeId", "data-v-bb7e255e"]]), I = { class: "tabular-nums" }, L = { class: "flex items-center gap-1" }, R = {
+	key: 0,
+	class: "px-1 select-none"
+}, z = /* @__PURE__ */ m({
+	__name: "DataTablePagination",
+	props: {
+		page: {},
+		pageSize: {},
+		total: {},
+		class: {}
+	},
+	emits: ["update:page"],
+	setup(n, { emit: r }) {
+		let i = n, a = r, l = s(() => Math.max(1, Math.ceil(i.total / i.pageSize))), m = s(() => Math.min(Math.max(1, i.page), l.value)), h = s(() => {
+			let e = l.value, t = m.value;
+			if (e <= 7) return Array.from({ length: e }, (e, t) => t + 1);
+			let n = [1];
+			t > 3 && n.push(null);
+			let r = Math.max(2, t - 1), i = Math.min(e - 1, t + 1);
+			for (let e = r; e <= i; e++) n.push(e);
+			return t < e - 2 && n.push(null), n.push(e), n;
+		});
+		function v(e) {
+			let t = Math.min(Math.max(1, e), l.value);
+			t !== i.page && a("update:page", t);
+		}
+		return (r, a) => (_(), u("div", { class: g(C(e)("flex items-center justify-between border-t border-border px-4 py-2 text-sm text-muted-foreground", i.class)) }, [d("span", I, S(n.total.toLocaleString()) + " result" + S(n.total === 1 ? "" : "s"), 1), d("div", L, [
+			p(C(t), {
+				variant: "ghost",
+				size: "icon",
+				disabled: m.value <= 1,
+				onClick: a[0] ||= (e) => v(1),
+				"aria-label": "First page"
+			}, {
+				default: w(() => [...a[4] ||= [f(" ⟨⟨ ", -1)]]),
+				_: 1
+			}, 8, ["disabled"]),
+			p(C(t), {
+				variant: "ghost",
+				size: "icon",
+				disabled: m.value <= 1,
+				onClick: a[1] ||= (e) => v(m.value - 1),
+				"aria-label": "Previous page"
+			}, {
+				default: w(() => [...a[5] ||= [f(" ⟨ ", -1)]]),
+				_: 1
+			}, 8, ["disabled"]),
+			(_(!0), u(o, null, y(h.value, (e, n) => (_(), u(o, { key: n }, [e === null ? (_(), u("span", R, "...")) : (_(), c(C(t), {
+				key: 1,
+				variant: e === m.value ? "default" : "ghost",
+				size: "icon",
+				class: "tabular-nums",
+				onClick: (t) => v(e)
+			}, {
+				default: w(() => [f(S(e), 1)]),
+				_: 2
+			}, 1032, ["variant", "onClick"]))], 64))), 128)),
+			p(C(t), {
+				variant: "ghost",
+				size: "icon",
+				disabled: m.value >= l.value,
+				onClick: a[2] ||= (e) => v(m.value + 1),
+				"aria-label": "Next page"
+			}, {
+				default: w(() => [...a[6] ||= [f(" ⟩ ", -1)]]),
+				_: 1
+			}, 8, ["disabled"]),
+			p(C(t), {
+				variant: "ghost",
+				size: "icon",
+				disabled: m.value >= l.value,
+				onClick: a[3] ||= (e) => v(l.value),
+				"aria-label": "Last page"
+			}, {
+				default: w(() => [...a[7] ||= [f(" ⟩⟩ ", -1)]]),
+				_: 1
+			}, 8, ["disabled"])
+		])], 2));
+	}
+}), B = {
+	key: 0,
+	class: "flex flex-col gap-2"
+}, V = {
+	key: 1,
+	class: "flex flex-col gap-2"
+}, H = ["onClick"], U = { class: "flex items-start justify-between gap-2" }, ne = { class: "min-w-0 font-medium" }, re = {
+	key: 0,
+	class: "mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1"
+}, ie = { class: "text-muted-foreground" }, ae = {
+	key: 2,
+	class: "rounded-lg border border-border p-6 text-center text-muted-foreground"
+}, W = /* @__PURE__ */ m({
+	__name: "DataTable",
+	props: {
+		columns: {},
+		rows: {},
+		total: {},
+		page: {},
+		pageSize: {},
+		isLoading: {
+			type: Boolean,
+			default: !1
+		},
+		rowKey: { default: "_id" },
+		getRowId: {},
+		sort: {},
+		infinite: {
+			type: Boolean,
+			default: !1
+		},
+		hasMore: {
+			type: Boolean,
+			default: !1
+		},
+		responsive: {
+			type: Boolean,
+			default: !1
+		},
+		cardBreakpoint: { default: 640 },
+		class: {}
+	},
+	emits: [
+		"update:page",
+		"update:sort",
+		"select",
+		"load-more"
+	],
+	setup(t, { emit: n }) {
+		let m = t, h = n, E = ee(), N = s(() => !!E["row-actions"]), I = s(() => !!E["row-context-menu"]), L = v(null), { width: R } = te(L), W = s(() => m.responsive && R.value > 0 && R.value < m.cardBreakpoint), G = s(() => Array.from({ length: Math.min(m.pageSize, 5) }, (e, t) => t)), K = /* @__PURE__ */ new WeakMap(), oe = 0;
+		function q(e, t) {
+			return t.split(".").reduce((e, t) => {
+				if (!(typeof e != "object" || !e)) return e[t];
+			}, e);
+		}
+		function J(e) {
+			return typeof e == "string" || typeof e == "number" || typeof e == "symbol";
+		}
+		function se(e) {
+			return typeof e == "symbol" ? e.toString() : JSON.stringify(e);
+		}
+		function ce(e) {
+			return m.getRowId ? m.getRowId(e) : q(e, m.rowKey);
+		}
+		function le(e) {
+			let t = e, n = K.get(t);
+			if (n) return n;
+			let r = Symbol(`DataTable row ${oe++}`);
+			return K.set(t, r), r;
+		}
+		let Y = s(() => {
+			let e = m.rows.map((e) => ce(e)), t = /* @__PURE__ */ new Map();
+			for (let n of e) J(n) && t.set(n, (t.get(n) ?? 0) + 1);
+			let n = e.filter((e) => !J(e)).length;
+			n > 0 && `${n}`;
+			let r = Array.from(t).filter(([, e]) => e > 1).map(([e]) => se(e));
+			return r.length > 0 && (`${r.join(",")}`, `${r.join(", ")}`), m.rows.map((n, r) => {
+				let i = e[r];
+				return {
+					row: n,
+					key: J(i) && t.get(i) === 1 ? i : le(n)
+				};
+			});
+		});
+		function X(e, t) {
+			let n = q(e, t.key);
+			return t.formatter ? t.formatter(n, e) : n == null ? "—" : String(n);
+		}
+		function Z(e) {
+			return e === "right" ? "text-right" : e === "center" ? "text-center" : "text-left";
+		}
+		function ue(e) {
+			if (!e.sortable) return;
+			let t = m.sort;
+			t?.key === e.key ? h("update:sort", {
+				key: e.key,
+				direction: t.direction === "asc" ? "desc" : "asc"
+			}) : h("update:sort", {
+				key: e.key,
+				direction: "asc"
+			});
+		}
+		function de(e) {
+			return e.sortable ? m.sort?.key === e.key ? m.sort.direction === "asc" ? " ↑" : " ↓" : " ↕" : "";
+		}
+		let Q = s(() => m.columns[0]), $ = s(() => m.columns.slice(1));
+		return (n, s) => (_(), u("div", {
+			ref_key: "rootRef",
+			ref: L,
+			class: g(C(e)("overflow-hidden", m.class))
+		}, [
+			W.value ? (_(), u(o, { key: 0 }, [t.isLoading && t.rows.length === 0 ? (_(), u("div", B, [(_(!0), u(o, null, y(G.value, (e) => (_(), u("div", {
+				key: "skel-card-" + e,
+				class: "rounded-lg border border-border p-3"
+			}, [p(C(F), { class: "mb-2 h-4 w-1/2" }), p(C(F), { class: "h-3 w-3/4" })]))), 128))])) : t.rows.length > 0 ? (_(), u("div", V, [(_(!0), u(o, null, y(Y.value, (t) => (_(), c(x(I.value ? C(i) : "div"), { key: t.key }, {
+				default: w(() => [(_(), c(x(I.value ? C(r) : "div"), { "as-child": I.value ? !0 : void 0 }, {
+					default: w(() => [d("div", {
+						class: "cursor-pointer rounded-lg border border-border p-3 transition-colors hover:bg-muted/40",
+						onClick: (e) => h("select", t.row)
+					}, [d("div", U, [d("div", ne, [Q.value?.component ? (_(), c(x(Q.value.component), {
+						key: 0,
+						value: q(t.row, Q.value.key),
+						row: t.row
+					}, null, 8, ["value", "row"])) : Q.value ? (_(), u(o, { key: 1 }, [f(S(X(t.row, Q.value)), 1)], 64)) : l("", !0)]), N.value ? (_(), u("div", {
+						key: 0,
+						class: "shrink-0",
+						onClick: s[0] ||= T(() => {}, ["stop"])
+					}, [b(n.$slots, "row-actions", { row: t.row })])) : l("", !0)]), $.value.length > 0 ? (_(), u("dl", re, [(_(!0), u(o, null, y($.value, (n) => (_(), u(o, { key: n.key }, [d("dt", ie, S(n.label), 1), d("dd", { class: g(C(e)("min-w-0 break-words", n.align === "right" && "text-right", n.class)) }, [n.component ? (_(), c(x(n.component), {
+						key: 0,
+						value: q(t.row, n.key),
+						row: t.row
+					}, null, 8, ["value", "row"])) : (_(), u(o, { key: 1 }, [f(S(X(t.row, n)), 1)], 64))], 2)], 64))), 128))])) : l("", !0)], 8, H)]),
+					_: 2
+				}, 1032, ["as-child"])), I.value ? (_(), c(C(a), { key: 0 }, {
+					default: w(() => [b(n.$slots, "row-context-menu", { row: t.row })]),
+					_: 2
+				}, 1024)) : l("", !0)]),
+				_: 2
+			}, 1024))), 128))])) : (_(), u("div", ae, [b(n.$slots, "empty", {}, () => [s[4] ||= f("No results found", -1)])]))], 64)) : (_(), c(C(D), { key: 1 }, {
+				default: w(() => [p(C(j), null, {
+					default: w(() => [p(C(M), { class: "text-muted-foreground" }, {
+						default: w(() => [(_(!0), u(o, null, y(t.columns, (t) => (_(), c(C(A), {
+							key: t.key,
+							class: g(C(e)(Z(t.align), t.sortable && "cursor-pointer select-none", t.headerClass)),
+							onClick: (e) => ue(t)
+						}, {
+							default: w(() => [f(S(t.label) + S(de(t)), 1)]),
+							_: 2
+						}, 1032, ["class", "onClick"]))), 128)), N.value ? (_(), c(C(A), {
+							key: 0,
+							class: "w-10"
+						})) : l("", !0)]),
+						_: 1
+					})]),
+					_: 1
+				}), p(C(O), null, {
+					default: w(() => [t.isLoading && t.rows.length === 0 ? (_(!0), u(o, { key: 0 }, y(G.value, (e) => (_(), c(C(M), { key: "skel-" + e }, {
+						default: w(() => [(_(!0), u(o, null, y(t.columns, (e) => (_(), c(C(k), {
+							key: e.key,
+							class: g(Z(e.align))
+						}, {
+							default: w(() => [p(C(F), { class: "h-4 w-3/4" })]),
+							_: 1
+						}, 8, ["class"]))), 128)), N.value ? (_(), c(C(k), {
+							key: 0,
+							class: "w-10"
+						}, {
+							default: w(() => [p(C(F), { class: "h-4 w-6" })]),
+							_: 1
+						})) : l("", !0)]),
+						_: 1
+					}))), 128)) : t.rows.length > 0 ? (_(!0), u(o, { key: 1 }, y(Y.value, (d) => (_(), u(o, { key: d.key }, [I.value ? (_(), c(C(i), { key: 0 }, {
+						default: w(() => [p(C(r), { "as-child": "" }, {
+							default: w(() => [p(C(M), {
+								class: "cursor-pointer",
+								onClick: (e) => h("select", d.row)
+							}, {
+								default: w(() => [(_(!0), u(o, null, y(t.columns, (t) => (_(), c(C(k), {
+									key: t.key,
+									class: g(C(e)(Z(t.align), t.class))
+								}, {
+									default: w(() => [t.component ? (_(), c(x(t.component), {
+										key: 0,
+										value: q(d.row, t.key),
+										row: d.row
+									}, null, 8, ["value", "row"])) : (_(), u(o, { key: 1 }, [f(S(X(d.row, t)), 1)], 64))]),
+									_: 2
+								}, 1032, ["class"]))), 128)), N.value ? (_(), c(C(k), {
+									key: 0,
+									class: "w-10",
+									onClick: s[1] ||= T(() => {}, ["stop"])
+								}, {
+									default: w(() => [b(n.$slots, "row-actions", { row: d.row })]),
+									_: 2
+								}, 1024)) : l("", !0)]),
+								_: 2
+							}, 1032, ["onClick"])]),
+							_: 2
+						}, 1024), p(C(a), null, {
+							default: w(() => [b(n.$slots, "row-context-menu", { row: d.row })]),
+							_: 2
+						}, 1024)]),
+						_: 2
+					}, 1024)) : (_(), c(C(M), {
+						key: 1,
+						class: "cursor-pointer",
+						onClick: (e) => h("select", d.row)
+					}, {
+						default: w(() => [(_(!0), u(o, null, y(t.columns, (t) => (_(), c(C(k), {
+							key: t.key,
+							class: g(C(e)(Z(t.align), t.class))
+						}, {
+							default: w(() => [t.component ? (_(), c(x(t.component), {
+								key: 0,
+								value: q(d.row, t.key),
+								row: d.row
+							}, null, 8, ["value", "row"])) : (_(), u(o, { key: 1 }, [f(S(X(d.row, t)), 1)], 64))]),
+							_: 2
+						}, 1032, ["class"]))), 128)), N.value ? (_(), c(C(k), {
+							key: 0,
+							class: "w-10",
+							onClick: s[2] ||= T(() => {}, ["stop"])
+						}, {
+							default: w(() => [b(n.$slots, "row-actions", { row: d.row })]),
+							_: 2
+						}, 1024)) : l("", !0)]),
+						_: 2
+					}, 1032, ["onClick"]))], 64))), 128)) : (_(), c(C(P), {
+						key: 2,
+						colspan: t.columns.length + +!!N.value
+					}, {
+						default: w(() => [b(n.$slots, "empty", {}, () => [s[5] ||= f("No results found", -1)])]),
+						_: 3
+					}, 8, ["colspan"]))]),
+					_: 3
+				})]),
+				_: 3
+			})),
+			t.infinite ? b(n.$slots, "sentinel", { key: 2 }) : l("", !0),
+			!t.infinite && t.total > 0 ? (_(), c(z, {
+				key: 3,
+				page: t.page,
+				"page-size": t.pageSize,
+				total: t.total,
+				"onUpdate:page": s[3] ||= (e) => h("update:page", e)
+			}, null, 8, [
+				"page",
+				"page-size",
+				"total"
+			])) : l("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { M as a, k as c, P as i, O as l, z as n, j as o, F as r, A as s, W as t, D as u };

package/dist/DialogContent-CmCijgX9.js

@@ -0,0 +1,93 @@
+import { t as e } from "./cn-DJXf4yaB.js";
+import { t } from "./x-cdWAmO-q.js";
+import { t as n } from "./useSpringMount-BTRBNzXP.js";
+import { t as r } from "./ModalOverlay-DKLVY-cj.js";
+import { computed as i, createBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeProps as d, openBlock as f, renderSlot as p, unref as m, withCtx as h } from "vue";
+import { DialogClose as g, DialogContent as _, DialogPortal as v, DialogRoot as y, injectDialogRootContext as b, useForwardPropsEmits as x } from "reka-ui";
+//#endregion
+//#region src/components/ui/dialog/Dialog.vue
+var S = /* @__PURE__ */ c({
+	__name: "Dialog",
+	props: {
+		open: { type: Boolean },
+		defaultOpen: { type: Boolean },
+		modal: { type: Boolean }
+	},
+	emits: ["update:open"],
+	setup(e, { emit: t }) {
+		let n = x(e, t);
+		return (e, t) => (f(), a(m(y), d(l(m(n))), {
+			default: h(() => [p(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), C = "fixed left-1/2 top-1/2 z-modal grid w-full max-w-lg gap-4 p-6", w = "-translate-x-1/2 -translate-y-1/2 duration-[var(--duration-normal)] popover-animate", T = /* @__PURE__ */ c({
+	__name: "DialogContent",
+	props: {
+		forceMount: { type: Boolean },
+		disableOutsidePointerEvents: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		variant: { default: "glass" },
+		scrimAnimation: {},
+		spring: { type: [Boolean, String] }
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(c, { emit: l }) {
+		let d = c, y = l, S = x(i(() => {
+			let { class: e, variant: t, scrimAnimation: n, spring: r, ...i } = d;
+			return i;
+		}), y), T = i(() => d.variant === "opaque" ? "bg-background border sm:rounded-dialog" : "glass-floating rounded-dialog"), E = d.spring ? b() : null, D = d.spring && E ? n({
+			open: E.open,
+			preset: typeof d.spring == "string" ? d.spring : "smooth"
+		}) : null, O = i(() => {
+			if (!D) return;
+			let e = D.position.value;
+			return {
+				transform: `translate(-50%, -50%) scale(${1 - .05 * e})`,
+				opacity: String(1 - e),
+				animation: "none",
+				transition: "none"
+			};
+		});
+		return (n, i) => (f(), a(m(v), null, {
+			default: h(() => [s(r, {
+				scrim: "glass",
+				animate: "fade",
+				layout: "centered",
+				"scrim-animation": d.scrimAnimation
+			}, null, 8, ["scrim-animation"]), s(m(_), u(m(S), {
+				class: m(e)(C, d.spring ? "" : w, T.value, d.class),
+				style: O.value,
+				"data-spring": d.spring ? typeof d.spring == "string" ? d.spring : "smooth" : void 0
+			}), {
+				default: h(() => [p(n.$slots, "default"), s(m(g), { class: "focus-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" }, {
+					default: h(() => [s(m(t), { class: "w-4 h-4" }), i[0] ||= o("span", { class: "sr-only" }, "Close", -1)]),
+					_: 1
+				})]),
+				_: 3
+			}, 16, [
+				"class",
+				"style",
+				"data-spring"
+			])]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { S as n, T as t };