@mkbabb/glass-ui 10.1.0 → 10.1.1

package/dist/data-table-Cs93-uY7.js

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

package/dist/data-table.js

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