@mkbabb/glass-ui 6.0.0 → 8.0.0

package/dist/data-table-_RrOEdiw.js

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

package/dist/data-table.d.ts

@@ -1 +1 @@
-export * from "./components/data-table";
+export * from "./components/data-table/index.js";

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-_RrOEdiw.js";
 export { e as DataTable };