@mkbabb/glass-ui 6.0.0 → 7.0.0

package/dist/data-table-BygKg6ZA.js

@@ -0,0 +1,491 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./useResizeObserver-CdUlm2QZ.js";
+import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, isRef as f, mergeProps as p, nextTick as ee, normalizeClass as m, onBeforeUpdate as te, onUpdated as ne, openBlock as h, ref as g, renderList as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, toValue as x, unref as S, useAttrs as C, useSlots as re, withCtx as w, withModifiers as T } from "vue";
+//#region src/components/table/Table.vue?vue&type=script&setup=true&lang.ts
+var E = {
+	"data-slot": "table-container",
+	class: "relative w-full overflow-auto"
+}, D = [
+	"role",
+	"aria-label",
+	"aria-colcount",
+	"aria-rowcount"
+], O = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "Table",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		role: {},
+		ariaLabel: {},
+		ariaColCount: {},
+		ariaRowCount: {}
+	},
+	setup(t) {
+		let n = t, r = C();
+		return (t, i) => (h(), s("div", E, [c("table", p(S(r), {
+			"data-slot": "table",
+			class: S(e)("w-full caption-bottom text-sm", n.class),
+			role: n.role,
+			"aria-label": n.ariaLabel,
+			"aria-colcount": n.ariaColCount,
+			"aria-rowcount": n.ariaRowCount
+		}), [v(t.$slots, "default")], 16, D)]));
+	}
+}), k = /* @__PURE__ */ d({
+	__name: "TableBody",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (h(), s("tbody", { class: m(S(e)("[&_tr:last-child]:border-0", n.class)) }, [v(t.$slots, "default")], 2));
+	}
+}), A = /* @__PURE__ */ d({
+	__name: "TableCell",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (h(), s("td", { class: m(S(e)("table-cell align-middle [&:has([role=checkbox])]:pr-0", n.class)) }, [v(t.$slots, "default")], 2));
+	}
+}), j = /* @__PURE__ */ d({
+	__name: "TableHead",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (h(), s("th", { class: m(S(e)("table-head text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", n.class)) }, [v(t.$slots, "default")], 2));
+	}
+}), M = /* @__PURE__ */ d({
+	__name: "TableHeader",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (h(), s("thead", { class: m(S(e)("[&_tr]:border-b", n.class)) }, [v(t.$slots, "default")], 2));
+	}
+}), N = /* @__PURE__ */ d({
+	__name: "TableRow",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (h(), s("tr", { class: m(S(e)("border-b", n.class)) }, [v(t.$slots, "default")], 2));
+	}
+}), P = { class: "flex items-center justify-center py-10" }, F = /* @__PURE__ */ d({
+	__name: "TableEmpty",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		colspan: { default: 1 }
+	},
+	setup(t) {
+		let n = t, r = i(() => {
+			let { class: e, ...t } = n;
+			return t;
+		});
+		return (t, i) => (h(), a(N, null, {
+			default: w(() => [u(A, p({ class: S(e)("p-4 whitespace-nowrap align-middle text-sm text-foreground", n.class) }, r.value), {
+				default: w(() => [c("div", P, [v(t.$slots, "default")])]),
+				_: 3
+			}, 16, ["class"])]),
+			_: 3
+		}));
+	}
+}), I = /*#__PURE__*/ n(/* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "Skeleton",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t, r = C(), a = i(() => Object.fromEntries(Object.entries(r).filter(([e]) => e !== "role" && !e.startsWith("aria-"))));
+		return (t, r) => (h(), s("div", p(a.value, {
+			"data-slot": "skeleton",
+			"aria-hidden": "true",
+			class: S(e)("skeleton", n.class)
+		}), null, 16));
+	}
+}), [["__scopeId", "data-v-cd03d0b0"]]);
+//#endregion
+//#region src/components/data-table/composables/useDataTableRowIdentity.ts
+function L(e, t) {
+	return t.split(".").reduce((e, t) => {
+		if (!(typeof e != "object" || !e)) return e[t];
+	}, e);
+}
+function R(e) {
+	return f(e) ? e.value : e;
+}
+function z(e) {
+	return [
+		"string",
+		"number",
+		"symbol"
+	].includes(typeof e);
+}
+function ie(e) {
+	return { rowEntries: i(() => {
+		let t = /* @__PURE__ */ new Set(), n = R(e.getRowId);
+		return x(e.rows).map((r, i) => {
+			let a = n ? n(r) : L(r, x(e.rowKey));
+			if (!z(a)) throw TypeError(`[DataTable] Row ${i} has no stable identity.`);
+			if (t.has(a)) throw TypeError(`[DataTable] Duplicate row identity ${String(a)}.`);
+			return t.add(a), {
+				row: r,
+				key: a
+			};
+		});
+	}) };
+}
+//#endregion
+//#region src/components/data-table/composables/useDataTableResponsive.ts
+function ae(e) {
+	let { columns: t, responsive: n, cardBreakpoint: r, containerWidth: a } = e;
+	return {
+		isCard: i(() => {
+			let e = x(a);
+			return x(n) && e > 0 && e < x(r);
+		}),
+		headerColumn: i(() => x(t)[0]),
+		bodyColumns: i(() => x(t).slice(1))
+	};
+}
+//#endregion
+//#region src/components/data-table/DataTable.vue?vue&type=script&setup=true&lang.ts
+var oe = ["data-state", "aria-busy"], se = {
+	key: 0,
+	class: "data-table-state glass-quiet",
+	role: "alert"
+}, ce = {
+	key: 1,
+	class: "data-table-cards"
+}, le = ["role", "aria-label"], ue = { class: "data-table-card-header" }, de = { class: "data-table-card-title" }, fe = {
+	key: 0,
+	class: "data-table-card-fields"
+}, B = { class: "data-table-card-label" }, pe = ["data-align"], me = {
+	key: 3,
+	class: "data-table-state glass-quiet"
+}, he = ["data-align", "onClick"], ge = { "aria-hidden": "true" }, _e = { role: "alert" }, V = /* @__PURE__ */ d({
+	__name: "DataTable",
+	props: {
+		columns: {},
+		rows: {},
+		status: { default: "ready" },
+		filtered: {
+			type: Boolean,
+			default: !1
+		},
+		rowKey: { default: "_id" },
+		getRowId: {},
+		role: {},
+		ariaLabel: {},
+		ariaColCount: {},
+		ariaRowCount: {},
+		getRowAttrs: {},
+		getRowIndex: {},
+		rowRef: {},
+		tabbableRowId: {},
+		sort: {},
+		selectable: {
+			type: Boolean,
+			default: !1
+		},
+		selectedRowId: {},
+		responsive: {
+			type: Boolean,
+			default: !1
+		},
+		cardBreakpoint: { default: 640 },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: [
+		"update:sort",
+		"update:selectedRowId",
+		"update:tabbableRowId",
+		"select"
+	],
+	setup(n, { emit: d }) {
+		let f = n, x = d, C = re(), E = i(() => !!C["row-actions"]), D = i(() => f.role ?? (f.selectable || f.tabbableRowId !== void 0 ? "grid" : void 0)), P = i(() => f.ariaColCount ?? f.columns.length + +!!E.value), L = i(() => f.ariaRowCount ?? (D.value ? f.rows.length + 1 : void 0)), R = i(() => f.status === "error" ? "error" : f.status === "loading" && f.rows.length === 0 ? "loading" : f.rows.length === 0 ? f.filtered ? "filtered-empty" : "empty" : f.status), z = g(null), V = g(0);
+		t(z, (e) => {
+			V.value = e.width;
+		});
+		let { isCard: ve, headerColumn: H, bodyColumns: U } = ae({
+			columns: () => f.columns,
+			responsive: () => f.responsive,
+			cardBreakpoint: () => f.cardBreakpoint,
+			containerWidth: V
+		}), { rowEntries: W } = ie({
+			rows: () => f.rows,
+			rowKey: () => f.rowKey,
+			getRowId: i(() => f.getRowId)
+		}), G = /* @__PURE__ */ new Map();
+		function K(e, t, n) {
+			let r = n, i = n instanceof HTMLElement ? n : r?.$el, a = i instanceof HTMLElement ? i : null;
+			a ? G.set(e.key, a) : G.delete(e.key), f.rowRef?.(a, e.row, t);
+		}
+		let q = null;
+		te(() => {
+			q = Array.from(G).find(([, e]) => e === document.activeElement)?.[0] ?? null;
+		}), ne(() => {
+			q !== null && G.get(q)?.focus(), q = null;
+		});
+		let J = Array.from({ length: 5 }, (e, t) => t);
+		function Y(e, t) {
+			return t.split(".").reduce((e, t) => {
+				if (!(typeof e != "object" || !e)) return e[t];
+			}, e);
+		}
+		function X(e, t) {
+			let n = Y(e, t.key);
+			return t.formatter ? t.formatter(n, e) : n == null ? "—" : String(n);
+		}
+		function ye(e) {
+			if (!e.sortable) return;
+			let t = f.sort;
+			t?.key === e.key ? x("update:sort", {
+				key: e.key,
+				direction: t.direction === "asc" ? "desc" : "asc"
+			}) : x("update:sort", {
+				key: e.key,
+				direction: "asc"
+			});
+		}
+		function be(e) {
+			if (e.sortable) return f.sort?.key === e.key ? f.sort.direction === "asc" ? "ascending" : "descending" : "none";
+		}
+		function xe(e) {
+			return e.sortable ? f.sort?.key === e.key ? f.sort.direction === "asc" ? " ↑" : " ↓" : " ↕" : "";
+		}
+		function Se(e) {
+			return Object.is(f.selectedRowId, e.key);
+		}
+		function Z(e) {
+			x("update:selectedRowId", e.key), x("update:tabbableRowId", e.key), x("select", e.row), G.get(e.key)?.focus({ preventScroll: !0 });
+		}
+		function Ce(e, t) {
+			if (!(e.target instanceof Element)) return;
+			let n = e.target.closest("button,a[href],input,select,textarea,summary,[contenteditable=\"true\"],[tabindex]:not([tabindex=\"-1\"])");
+			(!n || n === e.currentTarget) && Z(t);
+		}
+		function we(e, t) {
+			if (e.target !== e.currentTarget) return;
+			if (["Enter", " "].includes(e.key)) {
+				if (!f.selectable) return;
+				e.preventDefault(), Z(t);
+				return;
+			}
+			let n = e.key === "Home" ? 0 : e.key === "End" ? W.value.length - 1 : -1, r = e.key === "ArrowUp" ? -1 : +(e.key === "ArrowDown");
+			if (n < 0 && r === 0) return;
+			let i = W.value.findIndex(({ key: e }) => Object.is(e, t.key)), a = Math.max(0, Math.min(W.value.length - 1, n >= 0 ? n : i + r)), o = W.value[a];
+			o && (e.preventDefault(), x("update:tabbableRowId", o.key), ee(() => G.get(o.key)?.focus({ preventScroll: !0 })));
+		}
+		let Q = i(() => f.tabbableRowId === void 0 ? f.selectable ? W.value.find(({ key: e }) => Object.is(e, f.selectedRowId))?.key ?? W.value[0]?.key ?? null : null : W.value.some(({ key: e }) => Object.is(e, f.tabbableRowId)) ? f.tabbableRowId : null);
+		function Te(e, t = !1) {
+			if (!f.selectable) return {};
+			let n = Se(e);
+			return {
+				class: "data-table-row-interactive",
+				role: t ? "option" : void 0,
+				"aria-selected": n,
+				"data-state": n ? "selected" : void 0,
+				onClick: (t) => Ce(t, e)
+			};
+		}
+		function $(e, t, n = !1) {
+			let r = { ...f.getRowAttrs?.(e.row, t) };
+			n ? delete r["aria-rowindex"] : f.getRowIndex && (r["aria-rowindex"] = f.getRowIndex(e.row, t));
+			let i = f.selectable || f.tabbableRowId !== void 0 ? {
+				class: "focus-ring",
+				tabindex: Object.is(Q.value, e.key) ? 0 : -1,
+				onFocus: () => x("update:tabbableRowId", e.key),
+				onKeydown: (t) => we(t, e)
+			} : {};
+			return p(r, Te(e, n), i);
+		}
+		return (t, i) => (h(), s("div", {
+			"data-slot": "data-table",
+			ref_key: "rootRef",
+			ref: z,
+			class: m(S(e)("data-table", f.class)),
+			"data-state": R.value,
+			"aria-busy": n.status === "loading" || void 0
+		}, [S(ve) ? (h(), s(r, { key: 0 }, [n.status === "error" ? (h(), s("div", se, [v(t.$slots, "error", {}, () => [i[2] ||= l("Unable to load data", -1)])])) : n.status === "loading" && n.rows.length === 0 ? (h(), s("div", ce, [(h(!0), s(r, null, _(S(J), (e) => (h(), s("div", {
+			key: "skel-card-" + e,
+			class: "data-table-card glass-quiet"
+		}, [u(S(I), { class: "data-table-card-skeleton-title" }), u(S(I), { class: "h-3 w-3/4" })]))), 128))])) : n.rows.length > 0 ? (h(), s("div", {
+			key: 2,
+			class: "data-table-cards",
+			role: n.selectable ? "listbox" : void 0,
+			"aria-label": n.selectable ? n.ariaLabel ?? "Rows" : void 0
+		}, [(h(!0), s(r, null, _(S(W), (n, u) => (h(), s("div", p({
+			key: n.key,
+			ref_for: !0,
+			ref: (e) => K(n, u, e)
+		}, { ref_for: !0 }, $(n, u, !0), { class: "data-table-card glass-quiet" }), [c("div", ue, [c("div", de, [S(H)?.component ? (h(), a(y(S(H).component), {
+			key: 0,
+			value: Y(n.row, S(H).key),
+			row: n.row
+		}, null, 8, ["value", "row"])) : S(H) ? (h(), s(r, { key: 1 }, [l(b(X(n.row, S(H))), 1)], 64)) : o("", !0)]), E.value ? (h(), s("div", {
+			key: 0,
+			class: "data-table-actions",
+			onClick: i[0] ||= T(() => {}, ["stop"])
+		}, [v(t.$slots, "row-actions", { row: n.row })])) : o("", !0)]), S(U).length > 0 ? (h(), s("dl", fe, [(h(!0), s(r, null, _(S(U), (t) => (h(), s(r, { key: t.key }, [c("dt", B, b(t.label), 1), c("dd", {
+			class: m(S(e)("data-table-card-value", t.class)),
+			"data-align": t.align ?? "left"
+		}, [t.component ? (h(), a(y(t.component), {
+			key: 0,
+			value: Y(n.row, t.key),
+			row: n.row
+		}, null, 8, ["value", "row"])) : (h(), s(r, { key: 1 }, [l(b(X(n.row, t)), 1)], 64))], 10, pe)], 64))), 128))])) : o("", !0)], 16))), 128))], 8, le)) : (h(), s("div", me, [n.filtered ? v(t.$slots, "filtered-empty", {}, () => [i[3] ||= l("No matching rows", -1)], void 0, 0) : v(t.$slots, "empty", {}, () => [i[4] ||= l("No rows yet", -1)], void 0, 1)]))], 64)) : (h(), a(S(O), {
+			key: 1,
+			role: D.value,
+			"aria-label": n.ariaLabel,
+			"aria-col-count": P.value,
+			"aria-row-count": L.value
+		}, {
+			default: w(() => [u(S(M), null, {
+				default: w(() => [u(S(N), {
+					class: "data-table-header-row",
+					"aria-rowindex": D.value === "grid" ? 1 : void 0
+				}, {
+					default: w(() => [(h(!0), s(r, null, _(n.columns, (e) => (h(), a(S(j), {
+						key: e.key,
+						class: m(e.headerClass),
+						"data-align": e.align ?? "left",
+						"aria-sort": be(e)
+					}, {
+						default: w(() => [e.sortable ? (h(), s("button", {
+							key: 0,
+							type: "button",
+							class: "data-table-sort focus-ring",
+							"data-align": e.align ?? "left",
+							onClick: (t) => ye(e)
+						}, [c("span", null, b(e.label), 1), c("span", ge, b(xe(e)), 1)], 8, he)) : (h(), s(r, { key: 1 }, [l(b(e.label), 1)], 64))]),
+						_: 2
+					}, 1032, [
+						"class",
+						"data-align",
+						"aria-sort"
+					]))), 128)), E.value ? (h(), a(S(j), {
+						key: 0,
+						class: "data-table-actions-cell"
+					})) : o("", !0)]),
+					_: 1
+				}, 8, ["aria-rowindex"])]),
+				_: 1
+			}), u(S(k), null, {
+				default: w(() => [n.status === "error" ? (h(), a(S(F), {
+					key: 0,
+					colspan: n.columns.length + +!!E.value,
+					role: D.value === "grid" ? "presentation" : void 0
+				}, {
+					default: w(() => [c("span", _e, [v(t.$slots, "error", {}, () => [i[5] ||= l("Unable to load data", -1)])])]),
+					_: 3
+				}, 8, ["colspan", "role"])) : n.status === "loading" && n.rows.length === 0 ? (h(!0), s(r, { key: 1 }, _(S(J), (e) => (h(), a(S(N), { key: "skel-" + e }, {
+					default: w(() => [(h(!0), s(r, null, _(n.columns, (e) => (h(), a(S(A), {
+						key: e.key,
+						"data-align": e.align ?? "left"
+					}, {
+						default: w(() => [u(S(I), { class: "data-table-cell-skeleton" })]),
+						_: 1
+					}, 8, ["data-align"]))), 128)), E.value ? (h(), a(S(A), {
+						key: 0,
+						class: "data-table-actions-cell"
+					}, {
+						default: w(() => [u(S(I), { class: "data-table-action-skeleton" })]),
+						_: 1
+					})) : o("", !0)]),
+					_: 1
+				}))), 128)) : n.rows.length > 0 ? (h(!0), s(r, { key: 2 }, _(S(W), (e, c) => (h(), a(S(N), p({
+					key: e.key,
+					ref_for: !0,
+					ref: (t) => K(e, c, t)
+				}, { ref_for: !0 }, $(e, c)), {
+					default: w(() => [(h(!0), s(r, null, _(n.columns, (t) => (h(), a(S(A), {
+						key: t.key,
+						class: m(t.class),
+						"data-align": t.align ?? "left"
+					}, {
+						default: w(() => [t.component ? (h(), a(y(t.component), {
+							key: 0,
+							value: Y(e.row, t.key),
+							row: e.row
+						}, null, 8, ["value", "row"])) : (h(), s(r, { key: 1 }, [l(b(X(e.row, t)), 1)], 64))]),
+						_: 2
+					}, 1032, ["class", "data-align"]))), 128)), E.value ? (h(), a(S(A), {
+						key: 0,
+						class: "data-table-actions-cell",
+						onClick: i[1] ||= T(() => {}, ["stop"])
+					}, {
+						default: w(() => [v(t.$slots, "row-actions", { row: e.row })]),
+						_: 2
+					}, 1024)) : o("", !0)]),
+					_: 2
+				}, 1040))), 128)) : (h(), a(S(F), {
+					key: 3,
+					colspan: n.columns.length + +!!E.value,
+					role: D.value === "grid" ? "presentation" : void 0
+				}, {
+					default: w(() => [n.filtered ? v(t.$slots, "filtered-empty", {}, () => [i[6] ||= l("No matching rows", -1)], void 0, 0) : v(t.$slots, "empty", {}, () => [i[7] ||= l("No rows yet", -1)], void 0, 1)]),
+					_: 3
+				}, 8, ["colspan", "role"]))]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, [
+			"role",
+			"aria-label",
+			"aria-col-count",
+			"aria-row-count"
+		])), v(t.$slots, "sentinel")], 10, oe));
+	}
+});
+//#endregion
+export { M as a, k as c, N as i, O as l, I as n, j as o, F as r, A as s, V as t };

package/dist/data-table.js

@@ -1,2 +1,2 @@
-import { t as e } from "./data-table-DveMdgBM.js";
+import { t as e } from "./data-table-BygKg6ZA.js";
 export { e as DataTable };

package/dist/deck.js

@@ -1,4 +1,4 @@
-import { t as e } from "./PagerDots-BoTQ7g5l.js";
+import { t as e } from "./PagerDots-BEq0MgtH.js";
 import { computed as t, createBlock as n, defineComponent as r, mergeModels as i, onBeforeUnmount as a, onMounted as o, openBlock as s, ref as c, toValue as l, useModel as u } from "vue";
 //#region src/components/deck/composables/useDeck.ts
 function d(e, n = {}) {
@@ -57,7 +57,7 @@ function h(e, t = {}) {
 //#region src/components/deck/DeckPager.vue
 var g = /* @__PURE__ */ r({
 	__name: "DeckPager",
-	props: /* @__PURE__ */ i({
+	props: /*@__PURE__*/ i({
 		total: {},
 		windowFit: {},
 		ring: {
@@ -69,7 +69,7 @@ var g = /* @__PURE__ */ r({
 		index: { default: 0 },
 		indexModifiers: {}
 	}),
-	emits: /* @__PURE__ */ i(["select"], ["update:index"]),
+	emits: /*@__PURE__*/ i(["select"], ["update:index"]),
 	setup(t, { emit: r }) {
 		let i = t, a = r, o = u(t, "index");
 		return (t, r) => (s(), n(e, {