@orvui/vue 0.0.0-stage → 0.1.1

package/dist/table-BObEN15h.js

@@ -0,0 +1,921 @@
+import { i as e, s as t, t as n } from "./composables-BJ1sih_H.js";
+import { n as r } from "./state-DWNDjqAL.js";
+import { c as i, l as a, r as o } from "./ease-rIvCM4O3.js";
+import { t as s } from "./utils-DIrLOK2M.js";
+import { t as c } from "./RenderContent-CwtJ7hLl.js";
+import { t as l } from "./Checkbox-yoCQLa6d.js";
+import { Fragment as u, Teleport as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, nextTick as b, normalizeClass as x, normalizeStyle as S, onBeforeUnmount as C, onMounted as w, openBlock as T, ref as E, renderList as D, renderSlot as O, resolveDynamicComponent as k, toDisplayString as A, unref as j, useId as M, watch as N, watchEffect as P, withCtx as F, withKeys as I, withModifiers as L } from "vue";
+import { motion as R } from "motion-v";
+import { ArrowDownToLine as z, ArrowLeftToLine as B, ArrowRightToLine as V, ArrowUpToLine as H, ChevronUp as U, GripVertical as W, MoreHorizontal as G, MoreVertical as K, Trash2 as q } from "lucide-vue-next";
+import { useVirtualizer as J } from "@tanstack/vue-virtual";
+// src/motion/table/src/useTableColumns.ts
+function Y(e, t) {
+	let n = parseFloat(e ?? "");
+	return Number.isFinite(n) ? e?.endsWith("px") ? n : e?.endsWith("rem") ? n * t : null : null;
+}
+function X(e, t, n, r) {
+	let i = E(e().map((e) => e.key)), a = E({}), o = E(null), s = E(null), c = f(() => {
+		let t = e(), n = new Map(t.map((e) => [e.key, e])), r = i.value.filter((e) => n.has(e)), a = new Set(r);
+		for (let e = 0; e < t.length; e++) {
+			let n = t[e].key;
+			if (a.has(n)) continue;
+			let i = e ? r.indexOf(t[e - 1].key) : -1;
+			r.splice(e === 0 ? 0 : i < 0 ? e : i + 1, 0, n), a.add(n);
+		}
+		return r.map((e) => n.get(e));
+	}), l, u;
+	function d(e) {
+		u = {
+			element: e.currentTarget,
+			pointer: e.pointerId
+		};
+		try {
+			u.element.setPointerCapture(u.pointer);
+		} catch {}
+	}
+	function p() {
+		let e = u;
+		if (u = void 0, e) try {
+			e.element.releasePointerCapture(e.pointer);
+		} catch {}
+	}
+	function m(e) {
+		return e.button === 0 && (e.preventDefault(), e.stopPropagation(), !0);
+	}
+	function h(e) {
+		return Object.fromEntries(c.value.map((r) => {
+			let i = t.value[r.key]?.getBoundingClientRect().width ?? 0;
+			return [r.key, (e ? Math.round(i) : i) || n()];
+		}));
+	}
+	function g(e, t) {
+		if (!m(t)) return;
+		let n = h(!0), r = { ...a.value };
+		for (let e of c.value) r[e.key] ?? (r[e.key] = n[e.key]);
+		a.value = r, l = {
+			key: e,
+			x: t.clientX,
+			width: r[e]
+		}, d(t);
+	}
+	function _(e) {
+		l && (a.value = {
+			...a.value,
+			[l.key]: Math.max(n(), l.width + e.clientX - l.x)
+		});
+	}
+	function v() {
+		let e = l;
+		l = void 0, p(), e && r("columnResize", e.key, a.value[e.key] ?? e.width);
+	}
+	function y(e, t) {
+		m(t) && (o.value = e, d(t));
+	}
+	function b(e) {
+		if (!o.value) return;
+		let n = c.value.findIndex((n) => {
+			let r = t.value[n.key]?.getBoundingClientRect();
+			return r ? e.clientX < r.left + r.width / 2 : !1;
+		});
+		s.value = n < 0 ? c.value.length : n;
+	}
+	function x(e) {
+		i.value = e, r("columnOrderChange", e);
+	}
+	function S() {
+		let e = o.value, t = s.value;
+		if (e && t !== null) {
+			let n = c.value.map((e) => e.key), r = n.indexOf(e);
+			r >= 0 && (n.splice(r, 1), n.splice(t - +(r < t), 0, e), x(n));
+		}
+		o.value = null, s.value = null, p();
+	}
+	function w() {
+		l = void 0, o.value = null, s.value = null, p();
+	}
+	function T(e, t) {
+		Object.keys(a.value).length || (a.value = h(!1));
+		let i = Math.max(n(), (a.value[e] ?? n()) + 10 * t);
+		a.value = {
+			...a.value,
+			[e]: i
+		}, r("columnResize", e, i);
+	}
+	function D(e, t) {
+		let n = c.value.map((e) => e.key), r = n.indexOf(e), i = Math.max(0, Math.min(n.length - 1, r + t));
+		r < 0 || r === i || (n.splice(i, 0, n.splice(r, 1)[0]), x(n));
+	}
+	return C(w), {
+		ordered: c,
+		widths: a,
+		dragKey: o,
+		dropIndex: s,
+		startResize: g,
+		moveResize: _,
+		endResize: v,
+		startReorder: y,
+		moveReorder: b,
+		endReorder: S,
+		cancel: w,
+		keyboardResize: T,
+		keyboardReorder: D
+	};
+}
+// src/motion/table/src/use-table.ts
+function Z(e, n) {
+	let i = r(e, n, "selectedRowIds", e.defaultSelectedRowIds), a = r(e, n, "sort", e.defaultSort), o = E({}), s = E({}), c = E(null), l = t(), u = E(16), d = X(() => e.columns, o, () => e.minColumnWidth, n), p = d.ordered, m = d.widths;
+	w(() => {
+		let e = parseFloat(getComputedStyle(document.documentElement).fontSize);
+		e > 0 && (u.value = e);
+	});
+	let h = f(() => {
+		let t = e.data.map((t, n) => ({
+			row: t,
+			id: e.getRowId?.(t, n) ?? String(n)
+		})), n = a.value, r = n ? e.columns.find((e) => e.key === n.key) : void 0;
+		if (!n || !r) return t;
+		let i = (e) => r.sortValue ? r.sortValue(e) : e[r.key];
+		return t.sort((e, t) => {
+			let r = i(e.row), a = i(t.row);
+			return (n.direction === "asc" ? 1 : -1) * (typeof r == "number" && typeof a == "number" ? r - a : String(r).localeCompare(String(a)));
+		});
+	}), g = f(() => new Set(i.value)), _ = f(() => h.value.length > 0 && h.value.every((e) => g.value.has(e.id))), v = f(() => h.value.some((e) => g.value.has(e.id)));
+	function y(e) {
+		let t = Array.from(e);
+		i.value = t, n("selectionChange", t);
+	}
+	function b() {
+		let e = new Set(g.value), t = _.value;
+		for (let { id: n } of h.value) t ? e.delete(n) : e.add(n);
+		y(e);
+	}
+	function x(e) {
+		let t = new Set(g.value);
+		t.has(e) ? t.delete(e) : t.add(e), y(t);
+	}
+	function S(e) {
+		let t = a.value, r = t?.key === e ? t.direction === "asc" ? {
+			key: e,
+			direction: "desc"
+		} : null : {
+			key: e,
+			direction: "asc"
+		};
+		a.value = r, n("sortChange", r);
+	}
+	let T = J(f(() => ({
+		count: h.value.length,
+		getScrollElement: () => c.value,
+		estimateSize: () => e.rowHeight,
+		overscan: e.overscan,
+		getItemKey: (e) => h.value[e]?.id ?? e
+	}))), D = f(() => T.value.getVirtualItems().filter((e) => e.index < h.value.length)), O = f(() => T.value.getTotalSize()), k = f(() => D.value[0]?.start ?? 0), A = f(() => D.value.length ? O.value - D.value.at(-1).end : 0), j = f(() => p.value.length > 0 && p.value.every((e) => m.value[e.key] != null)), M = f(() => Math.round(p.value.reduce((t, n) => t + (m.value[n.key] ?? Y(n.width, u.value) ?? (e.onColumnRename || !n.cell && n.editable ? Math.max(e.minColumnWidth, 120) : e.minColumnWidth)), e.selectable ? 48 : 0))), P = f(() => p.value.length + +!!e.selectable + 1), F = !1;
+	N(() => e.loading, (e) => {
+		e || (F = !1);
+	});
+	function I() {
+		let t = c.value;
+		t && !e.loading && !F && t.scrollHeight - t.scrollTop - t.clientHeight < e.rowHeight * 4 && (F = !0, n("endReached"));
+	}
+	let L = E(null), R = E(null), U, W;
+	function G(t) {
+		(e.onInsertColumn || e.onDeleteColumn) && (clearTimeout(U), L.value = t);
+	}
+	function K() {
+		clearTimeout(U), U = setTimeout(() => {
+			L.value = null;
+		}, 100);
+	}
+	function Z(t, n) {
+		(e.onInsertRow || e.onDeleteRow) && (clearTimeout(W), R.value = {
+			id: t,
+			index: n
+		});
+	}
+	function Q() {
+		clearTimeout(W), W = setTimeout(() => {
+			R.value = null;
+		}, 100);
+	}
+	C(() => {
+		clearTimeout(U), clearTimeout(W);
+	});
+	let $ = f(() => p.value.findIndex((e) => e.key === L.value));
+	return {
+		headers: o,
+		rowElements: s,
+		viewport: c,
+		reduce: l,
+		controller: d,
+		columns: p,
+		widths: m,
+		rows: h,
+		selectedSet: g,
+		allSelected: _,
+		someSelected: v,
+		toggleAll: b,
+		toggleRow: x,
+		toggleSort: S,
+		sort: a,
+		virtualRows: D,
+		paddingTop: k,
+		paddingBottom: A,
+		sized: j,
+		minWidth: M,
+		colSpan: P,
+		scroll: I,
+		activeColumn: L,
+		activeRow: R,
+		activeColumnIndex: $,
+		columnItems: f(() => {
+			let t = $.value, r = p.value[t];
+			return r ? [...e.onInsertColumn ? [{
+				label: "Insert before",
+				icon: B,
+				onSelect: () => n("insertColumn", t, "before")
+			}, {
+				label: "Insert after",
+				icon: V,
+				onSelect: () => n("insertColumn", t, "after")
+			}] : [], ...e.onDeleteColumn ? [{
+				label: "Delete column",
+				icon: q,
+				destructive: !0,
+				onSelect: () => n("deleteColumn", r.key, t)
+			}] : []] : [];
+		}),
+		rowItems: f(() => {
+			let t = R.value;
+			return t ? [...e.onInsertRow ? [{
+				label: "Insert before",
+				icon: H,
+				onSelect: () => n("insertRow", t.index, "before")
+			}, {
+				label: "Insert after",
+				icon: z,
+				onSelect: () => n("insertRow", t.index, "after")
+			}] : [], ...e.onDeleteRow ? [{
+				label: "Delete row",
+				icon: q,
+				destructive: !0,
+				onSelect: () => n("deleteRow", t.id, t.index)
+			}] : []] : [];
+		}),
+		activateColumn: G,
+		deactivateColumn: K,
+		activateRow: Z,
+		deactivateRow: Q
+	};
+}
+// src/motion/table/src/TableHeader.vue?vue&type=script&setup=true&lang.ts
+var Q = {
+	key: 0,
+	class: "sticky top-0 z-10 border-border border-b bg-muted"
+}, $ = { class: "flex items-center justify-center" }, ee = [
+	"aria-sort",
+	"data-drop",
+	"data-dropend",
+	"onPointerenter"
+], te = [
+	"aria-label",
+	"onPointerdown",
+	"onKeydown"
+], ne = ["onClick"], re = { class: "truncate" }, ie = [
+	"value",
+	"aria-label",
+	"onInput"
+], ae = [
+	"aria-label",
+	"onPointerdown",
+	"onKeydown"
+], oe = "select-none [-webkit-touch-callout:none] [-webkit-user-select:none]", se = /* @__PURE__ */ y({
+	__name: "TableHeader",
+	props: {
+		columns: {},
+		rowHeight: {},
+		reduce: { type: Boolean },
+		selectable: { type: Boolean },
+		allSelected: { type: Boolean },
+		someSelected: { type: Boolean },
+		sort: {},
+		resizable: { type: Boolean },
+		reorderable: { type: Boolean },
+		activeColumn: {},
+		headers: {},
+		controller: {},
+		renamable: { type: Boolean }
+	},
+	emits: [
+		"toggleAll",
+		"toggleSort",
+		"rename",
+		"activate",
+		"deactivate"
+	],
+	setup(e, { emit: t }) {
+		let n = t, r = (e) => e === "right" ? "justify-end" : e === "center" ? "justify-center" : "justify-start", i = (e) => e === "right" ? "text-right" : e === "center" ? "text-center" : "text-left";
+		return (t, d) => (T(), h("thead", null, [g("tr", { style: S({ height: e.rowHeight + "px" }) }, [
+			e.selectable ? (T(), h("th", Q, [g("div", $, [v(l, {
+				"model-value": e.allSelected,
+				indeterminate: !e.allSelected && e.someSelected,
+				"aria-label": "Select all rows",
+				class: "size-6",
+				"onUpdate:modelValue": d[0] ||= (e) => n("toggleAll")
+			}, null, 8, ["model-value", "indeterminate"])])])) : m("", !0),
+			(T(!0), h(u, null, D(e.columns, (t, l) => (T(), h("th", {
+				key: t.key,
+				ref_for: !0,
+				ref: (n) => {
+					e.headers[t.key] = n;
+				},
+				style: S(e.activeColumn === t.key ? { boxShadow: "inset 0 1px 0 var(--color-primary)" } : void 0),
+				"aria-sort": e.sort?.key === t.key ? e.sort.direction === "asc" ? "ascending" : "descending" : void 0,
+				"data-drop": e.controller.dragKey.value ? e.controller.dropIndex.value === l : void 0,
+				"data-dropend": e.controller.dragKey.value ? e.controller.dropIndex.value === e.columns.length && l === e.columns.length - 1 : void 0,
+				class: "group sticky top-0 z-10 border-border border-b bg-muted p-0 font-medium text-muted-foreground data-[drop=true]:before:absolute data-[drop=true]:before:inset-y-0 data-[drop=true]:before:left-0 data-[drop=true]:before:w-0.5 data-[drop=true]:before:bg-primary data-[dropend=true]:after:absolute data-[dropend=true]:after:inset-y-0 data-[dropend=true]:after:right-0 data-[dropend=true]:after:w-0.5 data-[dropend=true]:after:bg-primary",
+				onPointerenter: (e) => n("activate", t.key),
+				onPointerleave: d[7] ||= (e) => n("deactivate")
+			}, [v(j(R).div, {
+				class: x(["flex h-full items-center", r(t.align)]),
+				style: S({ height: e.rowHeight + "px" }),
+				animate: e.reduce ? { opacity: e.controller.dragKey.value === t.key ? .5 : 1 } : {
+					scale: e.controller.dragKey.value === t.key ? 1.04 : 1,
+					opacity: e.controller.dragKey.value === t.key ? .5 : 1
+				},
+				transition: j(a)
+			}, {
+				default: F(() => [e.reorderable ? (T(), h("button", {
+					key: 0,
+					type: "button",
+					"aria-label": "Reorder " + t.key + " column",
+					class: x(j(s)("flex h-full w-6 cursor-grab touch-none items-center justify-center text-muted-foreground/60 transition-colors hover:text-foreground active:cursor-grabbing", oe)),
+					onPointerdown: (n) => e.controller.startReorder(t.key, n),
+					onPointermove: d[1] ||= (...t) => e.controller.moveReorder && e.controller.moveReorder(...t),
+					onPointerup: d[2] ||= (...t) => e.controller.endReorder && e.controller.endReorder(...t),
+					onPointercancel: d[3] ||= (...t) => e.controller.cancel && e.controller.cancel(...t),
+					onKeydown: [I(L((n) => e.controller.keyboardReorder(t.key, -1), ["prevent"]), ["left"]), I(L((n) => e.controller.keyboardReorder(t.key, 1), ["prevent"]), ["right"])]
+				}, [v(j(W), { class: "h-3.5 w-3.5" })], 42, te)) : m("", !0), t.sortable ? (T(), h("button", {
+					key: 1,
+					type: "button",
+					class: x(j(s)("flex h-full min-w-0 flex-1 select-none items-center gap-1 px-4 transition-colors hover:text-foreground", r(t.align), e.sort?.key === t.key && "text-primary")),
+					onClick: (e) => n("toggleSort", t.key)
+				}, [g("span", re, [v(j(c), { node: t.header }, null, 8, ["node"])]), v(j(R).span, {
+					"aria-hidden": "true",
+					class: "inline-flex shrink-0",
+					animate: {
+						rotate: e.sort?.key === t.key && e.sort.direction === "desc" ? 180 : 0,
+						opacity: e.sort?.key === t.key ? 1 : .35
+					},
+					transition: e.reduce ? { duration: 0 } : {
+						duration: .18,
+						ease: j(o)
+					}
+				}, {
+					default: F(() => [v(j(U), { class: "h-3.5 w-3.5" })]),
+					_: 1
+				}, 8, ["animate", "transition"])], 10, ne)) : e.renamable ? (T(), h("input", {
+					key: 2,
+					value: typeof t.header == "string" ? t.header : "",
+					"aria-label": "Rename " + t.key + " column",
+					size: 1,
+					class: x(j(s)("min-w-0 flex-1 truncate appearance-none rounded-md border-0 bg-transparent px-4 font-medium text-muted-foreground outline-none transition-colors focus:bg-muted focus:text-foreground", i(t.align))),
+					onInput: (e) => n("rename", t.key, e.target.value)
+				}, null, 42, ie)) : (T(), h("span", {
+					key: 3,
+					class: x(["min-w-0 flex-1 truncate px-4", i(t.align)])
+				}, [v(j(c), { node: t.header }, null, 8, ["node"])], 2))]),
+				_: 2
+			}, 1032, [
+				"class",
+				"style",
+				"animate",
+				"transition"
+			]), e.resizable ? (T(), h("button", {
+				key: 0,
+				type: "button",
+				"aria-label": "Resize " + t.key + " column",
+				class: x(j(s)("absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none bg-transparent transition-colors hover:bg-muted", oe)),
+				onPointerdown: (n) => e.controller.startResize(t.key, n),
+				onPointermove: d[4] ||= (...t) => e.controller.moveResize && e.controller.moveResize(...t),
+				onPointerup: d[5] ||= (...t) => e.controller.endResize && e.controller.endResize(...t),
+				onPointercancel: d[6] ||= (...t) => e.controller.cancel && e.controller.cancel(...t),
+				onKeydown: [I(L((n) => e.controller.keyboardResize(t.key, 1), ["prevent"]), ["right"]), I(L((n) => e.controller.keyboardResize(t.key, -1), ["prevent"]), ["left"])]
+			}, null, 42, ae)) : m("", !0)], 44, ee))), 128)),
+			d[8] ||= g("th", {
+				"aria-hidden": "true",
+				class: "sticky top-0 z-10 border-border border-b bg-muted"
+			}, null, -1)
+		], 4)]));
+	}
+});
+// src/motion/table/src/use-table-menu.ts
+function ce(r) {
+	let i = E(null), a = E(null), o = E(null), s = t(), c = M(), l = e(f(() => o.value !== null), a), u = !1;
+	function d(e = !1) {
+		o.value = null, e && b(() => {
+			u || i.value?.focus({ preventScroll: !0 });
+		});
+	}
+	function p() {
+		d();
+	}
+	function m(e) {
+		l.claimEscape(e) && d(!0);
+	}
+	function h() {
+		if (o.value) {
+			d();
+			return;
+		}
+		let e = i.value?.getBoundingClientRect();
+		e && (o.value = {
+			top: e.bottom + 4,
+			left: Math.max(8, Math.min(innerWidth - 196, e.right - 188))
+		});
+	}
+	function g(e) {
+		if (e.key === "Tab") {
+			d();
+			return;
+		}
+		if (![
+			"ArrowUp",
+			"ArrowDown",
+			"Home",
+			"End"
+		].includes(e.key)) return;
+		e.preventDefault();
+		let t = Array.from(n(a.value)?.querySelectorAll("button") ?? []), r = t.indexOf(document.activeElement);
+		t[e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : (r + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus();
+	}
+	return N(o, (e) => r(!!e), { flush: "sync" }), P((e) => {
+		if (!o.value) return;
+		let t = !0;
+		window.addEventListener("scroll", p, !0), window.addEventListener("resize", p), window.addEventListener("keydown", m), b(() => {
+			t && !u && n(a.value)?.querySelector("button")?.focus({ preventScroll: !0 });
+		}), e(() => {
+			t = !1, window.removeEventListener("scroll", p, !0), window.removeEventListener("resize", p), window.removeEventListener("keydown", m);
+		});
+	}), C(() => {
+		u = !0;
+	}), {
+		trigger: i,
+		panel: a,
+		coords: o,
+		reduce: s,
+		id: c,
+		close: d,
+		toggle: h,
+		navigate: g
+	};
+}
+// src/motion/table/src/TableMenu.vue?vue&type=script&setup=true&lang.ts
+var le = [
+	"aria-label",
+	"aria-controls",
+	"aria-expanded"
+], ue = ["onClick"], de = /* @__PURE__ */ y({
+	__name: "TableMenu",
+	props: {
+		items: {},
+		ariaLabel: {},
+		triggerClassName: {}
+	},
+	emits: ["openChange"],
+	setup(e, { emit: t }) {
+		let n = t, { trigger: r, panel: a, coords: o, reduce: l, id: f, close: y, toggle: b, navigate: C } = ce((e) => n("openChange", e));
+		return (t, n) => (T(), h(u, null, [g("button", {
+			ref_key: "trigger",
+			ref: r,
+			type: "button",
+			"aria-label": e.ariaLabel,
+			"aria-haspopup": "menu",
+			"aria-controls": j(o) ? j(f) : void 0,
+			"aria-expanded": !!j(o),
+			class: x(e.triggerClassName),
+			onClick: n[0] ||= L((...e) => j(b) && j(b)(...e), ["stop"])
+		}, [O(t.$slots, "default")], 10, le), j(o) ? (T(), p(d, {
+			key: 0,
+			to: "body"
+		}, [g("div", {
+			class: "fixed inset-0 z-40",
+			onPointerdown: n[1] ||= (e) => j(y)()
+		}, null, 32), v(j(R).div, {
+			ref_key: "panel",
+			ref: a,
+			id: j(f),
+			role: "menu",
+			"aria-label": e.ariaLabel,
+			class: "fixed z-50 overflow-hidden rounded-xl border border-border bg-background p-1 shadow-xl",
+			style: S({
+				top: j(o).top + "px",
+				left: j(o).left + "px",
+				width: "188px"
+			}),
+			initial: j(l) ? { opacity: 0 } : {
+				opacity: 0,
+				scale: .96,
+				y: -4
+			},
+			animate: j(l) ? { opacity: 1 } : {
+				opacity: 1,
+				scale: 1,
+				y: 0
+			},
+			transition: j(l) ? { duration: 0 } : j(i),
+			onKeydown: j(C)
+		}, {
+			default: F(() => [(T(!0), h(u, null, D(e.items, (e) => (T(), h("button", {
+				key: e.label,
+				type: "button",
+				role: "menuitem",
+				class: x(j(s)("flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors outline-none [&_svg]:h-4 [&_svg]:w-4", e.destructive ? "text-rose-500 hover:bg-rose-500/10 focus:bg-rose-500/10" : "text-foreground hover:bg-muted focus:bg-muted")),
+				onClick: (t) => {
+					j(y)(!0), e.onSelect();
+				}
+			}, [e.icon ? (T(), p(j(c), {
+				key: 0,
+				node: e.icon
+			}, null, 8, ["node"])) : m("", !0), _(A(e.label), 1)], 10, ue))), 128))]),
+			_: 1
+		}, 8, [
+			"id",
+			"aria-label",
+			"style",
+			"initial",
+			"animate",
+			"transition",
+			"onKeydown"
+		])])) : m("", !0)], 64));
+	}
+}), fe = /* @__PURE__ */ y({
+	__name: "TableHandle",
+	props: {
+		anchor: {},
+		orientation: {},
+		label: {},
+		items: {}
+	},
+	emits: ["enter", "leave"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = E(!1), a = f(() => n.anchor?.getBoundingClientRect()), o = f(() => {
+			let e = a.value;
+			if (!e) return;
+			let t = n.orientation === "row";
+			return {
+				position: "fixed",
+				top: (t ? e.top + e.height / 2 : e.top) + "px",
+				left: (t ? e.left : e.left + e.width / 2) + "px",
+				transform: "translate(-50%,-50%)",
+				zIndex: 40
+			};
+		});
+		function s() {
+			r("leave");
+		}
+		function c(e) {
+			i.value = e, r(e ? "enter" : "leave");
+		}
+		return w(() => {
+			window.addEventListener("scroll", s, !0), window.addEventListener("resize", s);
+		}), C(() => {
+			window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", s);
+		}), (t, n) => a.value ? (T(), p(d, {
+			key: 0,
+			to: "body"
+		}, [g("div", {
+			style: S(o.value),
+			onPointerenter: n[0] ||= (e) => r("enter"),
+			onPointerleave: n[1] ||= (e) => !i.value && r("leave")
+		}, [v(de, {
+			ariaLabel: e.label,
+			items: e.items,
+			"trigger-class-name": e.orientation === "row" ? "flex h-6 w-2 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm transition-colors hover:bg-primary/90" : "flex h-2 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm transition-colors hover:bg-primary/90",
+			onOpenChange: c
+		}, {
+			default: F(() => [(T(), p(k(e.orientation === "row" ? j(K) : j(G)), { class: "h-3 w-3" }))]),
+			_: 1
+		}, 8, [
+			"ariaLabel",
+			"items",
+			"trigger-class-name"
+		])], 36)])) : m("", !0);
+	}
+}), pe = ["value", "aria-label"], me = /* @__PURE__ */ y({
+	__name: "EditableCell",
+	props: {
+		value: {},
+		label: {}
+	},
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let n = t, r = (e) => n("change", e.target.value);
+		return (t, n) => (T(), h("input", {
+			value: e.value,
+			"aria-label": e.label,
+			size: 1,
+			placeholder: "Empty",
+			class: "-mx-2 w-full min-w-0 appearance-none rounded-md border-0 bg-transparent px-2 py-1 text-foreground outline-none transition-colors placeholder:text-muted-foreground/40 focus:bg-muted focus:ring-1 focus:ring-ring",
+			onInput: r
+		}, null, 40, pe));
+	}
+}), he = { key: 0 }, ge = /* @__PURE__ */ y({
+	__name: "SkeletonRows",
+	props: {
+		count: {},
+		columns: {},
+		selectable: { type: Boolean },
+		rowHeight: {}
+	},
+	setup(e) {
+		let t = (e) => e === "right" ? "text-right" : e === "center" ? "text-center" : "text-left";
+		return (n, r) => (T(!0), h(u, null, D(e.count, (n) => (T(), h("tr", {
+			key: n,
+			"aria-hidden": "true",
+			style: S({ height: e.rowHeight + "px" }),
+			class: "border-border/60 border-b"
+		}, [
+			e.selectable ? (T(), h("td", he)) : m("", !0),
+			(T(!0), h(u, null, D(e.columns, (e) => (T(), h("td", {
+				key: e.key,
+				class: x(["px-4", t(e.align)])
+			}, [g("div", { class: x(["h-3 animate-pulse rounded-full bg-muted", e.align === "right" ? "ml-auto w-10" : "w-2/3"]) }, null, 2)], 2))), 128)),
+			r[0] ||= g("td", null, null, -1)
+		], 4))), 128));
+	}
+}), _e = [
+	"aria-rowcount",
+	"aria-colcount",
+	"aria-busy"
+], ve = {
+	key: 0,
+	style: { width: "48px" }
+}, ye = { key: 1 }, be = ["colspan"], xe = ["colspan"], Se = [
+	"data-index",
+	"data-selected",
+	"aria-rowindex",
+	"aria-selected",
+	"onPointerenter",
+	"onFocusin"
+], Ce = {
+	key: 0,
+	class: "text-center"
+}, we = { class: "flex items-center justify-center" }, Te = ["colspan"], Ee = /* @__PURE__ */ y({
+	__name: "Table",
+	props: {
+		data: {},
+		columns: {},
+		getRowId: {},
+		selectable: {
+			type: Boolean,
+			default: !1
+		},
+		selectedRowIds: {},
+		defaultSelectedRowIds: { default: () => [] },
+		onSelectionChange: {},
+		sort: {},
+		defaultSort: { default: null },
+		onSortChange: {},
+		resizable: {
+			type: Boolean,
+			default: !1
+		},
+		minColumnWidth: { default: 64 },
+		onColumnResize: {},
+		reorderable: {
+			type: Boolean,
+			default: !1
+		},
+		onColumnOrderChange: {},
+		onCellEdit: {},
+		onColumnRename: {},
+		onInsertRow: {},
+		onDeleteRow: {},
+		onInsertColumn: {},
+		onDeleteColumn: {},
+		rowHeight: { default: 48 },
+		height: { default: 440 },
+		overscan: { default: 10 },
+		onEndReached: {},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		skeletonRows: { default: 3 },
+		emptyState: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: "No data"
+		},
+		className: {}
+	},
+	emits: [
+		"update:selectedRowIds",
+		"selectionChange",
+		"update:sort",
+		"sortChange",
+		"columnResize",
+		"columnOrderChange",
+		"cellEdit",
+		"columnRename",
+		"insertRow",
+		"deleteRow",
+		"insertColumn",
+		"deleteColumn",
+		"endReached"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, { headers: i, rowElements: a, viewport: o, reduce: d, controller: f, columns: _, widths: y, rows: b, selectedSet: C, allSelected: w, someSelected: E, toggleAll: k, toggleRow: A, toggleSort: M, sort: N, virtualRows: P, paddingTop: F, paddingBottom: I, sized: L, minWidth: R, colSpan: z, scroll: B, activeColumn: V, activeRow: H, activeColumnIndex: U, columnItems: W, rowItems: G, activateColumn: K, deactivateColumn: q, activateRow: J, deactivateRow: Y } = Z(n, r);
+		function X(e) {
+			return (t) => {
+				a.value[e] = t;
+			};
+		}
+		let Q = (e) => e === "right" ? "text-right" : e === "center" ? "text-center" : "text-left";
+		return (t, n) => (T(), h("div", { class: x(j(s)("w-full overflow-hidden border border-border bg-background text-sm", e.className)) }, [
+			g("div", {
+				ref_key: "viewport",
+				ref: o,
+				class: "overflow-auto",
+				style: S({ height: e.height + "px" }),
+				onScrollPassive: n[2] ||= (...e) => j(B) && j(B)(...e)
+			}, [g("table", {
+				"aria-rowcount": j(b).length + 1,
+				"aria-colcount": j(_).length + +!!e.selectable,
+				"aria-busy": e.loading || void 0,
+				class: x(j(s)("border-collapse", j(L) && "w-max")),
+				style: S({
+					tableLayout: "fixed",
+					minWidth: `max(100%, ${j(R)}px)`
+				})
+			}, [
+				g("colgroup", null, [
+					e.selectable ? (T(), h("col", ve)) : m("", !0),
+					(T(!0), h(u, null, D(j(_), (e) => (T(), h("col", {
+						key: e.key,
+						style: S(j(y)[e.key] == null ? e.width ? { width: e.width } : void 0 : { width: j(y)[e.key] + "px" })
+					}, null, 4))), 128)),
+					n[5] ||= g("col", null, null, -1)
+				]),
+				v(se, {
+					columns: j(_),
+					"row-height": e.rowHeight,
+					reduce: j(d),
+					headers: j(i),
+					controller: j(f),
+					selectable: e.selectable,
+					"all-selected": j(w),
+					"some-selected": j(E),
+					sort: j(N),
+					resizable: e.resizable,
+					reorderable: e.reorderable,
+					"active-column": j(V),
+					renamable: !!e.onColumnRename,
+					onToggleAll: j(k),
+					onToggleSort: j(M),
+					onRename: n[0] ||= (e, t) => r("columnRename", e, t),
+					onActivate: j(K),
+					onDeactivate: j(q)
+				}, null, 8, [
+					"columns",
+					"row-height",
+					"reduce",
+					"headers",
+					"controller",
+					"selectable",
+					"all-selected",
+					"some-selected",
+					"sort",
+					"resizable",
+					"reorderable",
+					"active-column",
+					"renamable",
+					"onToggleAll",
+					"onToggleSort",
+					"onActivate",
+					"onDeactivate"
+				]),
+				g("tbody", null, [j(b).length ? (T(), h(u, { key: 1 }, [
+					j(F) > 0 ? (T(), h("tr", {
+						key: 0,
+						"aria-hidden": "true",
+						style: S({ height: j(F) + "px" })
+					}, [g("td", { colspan: j(z) }, null, 8, xe)], 4)) : m("", !0),
+					(T(!0), h(u, null, D(j(P), (i) => (T(), h("tr", {
+						key: String(i.key),
+						ref_for: !0,
+						ref: X(j(b)[i.index].id),
+						"data-index": i.index,
+						"data-selected": j(C).has(j(b)[i.index].id),
+						"aria-rowindex": i.index + 2,
+						"aria-selected": e.selectable ? j(C).has(j(b)[i.index].id) : void 0,
+						style: S({ height: e.rowHeight + "px" }),
+						class: "border-border/60 border-b transition-colors data-[selected=true]:bg-muted/60 hover:bg-muted/50",
+						onPointerenter: (e) => j(J)(j(b)[i.index].id, i.index),
+						onPointerleave: n[1] ||= (...e) => j(Y) && j(Y)(...e),
+						onFocusin: (e) => j(J)(j(b)[i.index].id, i.index)
+					}, [
+						e.selectable ? (T(), h("td", Ce, [g("div", we, [v(l, {
+							"model-value": j(C).has(j(b)[i.index].id),
+							"aria-label": "Select row " + (i.index + 1),
+							"onUpdate:modelValue": (e) => j(A)(j(b)[i.index].id)
+						}, null, 8, [
+							"model-value",
+							"aria-label",
+							"onUpdate:modelValue"
+						])])])) : m("", !0),
+						(T(!0), h(u, null, D(j(_), (e) => (T(), h("td", {
+							key: e.key,
+							class: x(["truncate px-4 text-foreground", Q(e.align)])
+						}, [O(t.$slots, "cell-" + e.key, {
+							row: j(b)[i.index].row,
+							value: j(b)[i.index].row[e.key],
+							rowId: j(b)[i.index].id
+						}, () => [!e.cell && e.editable ? (T(), p(me, {
+							key: 0,
+							value: String(j(b)[i.index].row[e.key] ?? ""),
+							label: e.key + " for row " + (i.index + 1),
+							onChange: (t) => r("cellEdit", j(b)[i.index].id, e.key, t)
+						}, null, 8, [
+							"value",
+							"label",
+							"onChange"
+						])) : (T(), p(j(c), {
+							key: 1,
+							node: e.cell ? e.cell(j(b)[i.index].row) : j(b)[i.index].row[e.key]
+						}, null, 8, ["node"]))])], 2))), 128)),
+						n[6] ||= g("td", { "aria-hidden": "true" }, null, -1)
+					], 44, Se))), 128)),
+					j(I) > 0 ? (T(), h("tr", {
+						key: 1,
+						"aria-hidden": "true",
+						style: S({ height: j(I) + "px" })
+					}, [g("td", { colspan: j(z) }, null, 8, Te)], 4)) : m("", !0),
+					e.loading ? (T(), p(ge, {
+						key: 2,
+						count: e.skeletonRows,
+						columns: j(_),
+						selectable: e.selectable,
+						"row-height": e.rowHeight
+					}, null, 8, [
+						"count",
+						"columns",
+						"selectable",
+						"row-height"
+					])) : m("", !0)
+				], 64)) : (T(), h(u, { key: 0 }, [e.loading ? (T(), p(ge, {
+					key: 0,
+					count: Math.max(1, Math.ceil(e.height / e.rowHeight)),
+					columns: j(_),
+					selectable: e.selectable,
+					"row-height": e.rowHeight
+				}, null, 8, [
+					"count",
+					"columns",
+					"selectable",
+					"row-height"
+				])) : (T(), h("tr", ye, [g("td", {
+					colspan: j(z),
+					class: "p-10 text-center text-muted-foreground"
+				}, [O(t.$slots, "empty", {}, () => [v(j(c), { node: e.emptyState }, null, 8, ["node"])])], 8, be)]))], 64))])
+			], 14, _e)], 36),
+			j(V) && j(U) >= 0 ? (T(), p(fe, {
+				key: 0,
+				anchor: j(i)[j(V)] ?? null,
+				orientation: "column",
+				label: j(V) + " column options",
+				items: j(W),
+				onEnter: n[3] ||= (e) => j(K)(j(V)),
+				onLeave: j(q)
+			}, null, 8, [
+				"anchor",
+				"label",
+				"items",
+				"onLeave"
+			])) : m("", !0),
+			j(H) ? (T(), p(fe, {
+				key: 1,
+				anchor: j(a)[j(H).id] ?? null,
+				orientation: "row",
+				label: "Row " + (j(H).index + 1) + " options",
+				items: j(G),
+				onEnter: n[4] ||= (e) => j(J)(j(H).id, j(H).index),
+				onLeave: j(Y)
+			}, null, 8, [
+				"anchor",
+				"label",
+				"items",
+				"onLeave"
+			])) : m("", !0)
+		], 2));
+	}
+});
+export { Ee as t };
+
+//# sourceMappingURL=table-BObEN15h.js.map