angel-table 0.0.0-stage → 0.0.2

package/dist/angel-table.js

@@ -0,0 +1,919 @@
+import { Fragment as e, memo as t, useCallback as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+// \0rolldown/runtime.js
+var u = (e, t) => () => (t || (e((t = { exports: {} }).exports, t, t.exports), e = null), t.exports), d = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+}), f = /* @__PURE__ */ u(((e) => {
+	var t = d("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+	e.c = function(e) {
+		return t.H.useMemoCache(e);
+	};
+})), p = /* @__PURE__ */ u(((e) => {
+	process.env.NODE_ENV !== "production" && (function() {
+		var t = d("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+		e.c = function(e) {
+			var n = t.H;
+			return n === null && console.error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem."), n.useMemoCache(e);
+		};
+	})();
+})), m = (/* @__PURE__ */ u(((e, t) => {
+	t.exports = process.env.NODE_ENV === "production" ? f() : p();
+})))(), h = (e) => {
+	let t = (0, m.c)(26), { value: n, options: i, noLabel: a, title: s, onChange: u, direction: d } = e, f = n === void 0 ? "" : n, p = a !== void 0 && a, h = d === void 0 ? "bottom" : d, [g, _] = o(!1), [v, y] = o(s), [b, x] = o(f), S;
+	t[0] !== s || t[1] !== f ? (S = () => {
+		(f === void 0 || f === "") && y(s);
+	}, t[0] = s, t[1] = f, t[2] = S) : S = t[2];
+	let C;
+	t[3] === f ? C = t[4] : (C = [f], t[3] = f, t[4] = C), r(S, C);
+	let w;
+	t[5] === Symbol.for("react.memo_cache_sentinel") ? (w = (e) => {
+		e.currentTarget.contains(e.relatedTarget) || _(!1);
+	}, t[5] = w) : w = t[5];
+	let T = `angel-table__dropdown ${g ? "is-open" : ""}`, E;
+	t[6] === g ? E = t[7] : (E = () => _(!g), t[6] = g, t[7] = E);
+	let D;
+	t[8] === v ? D = t[9] : (D = /* @__PURE__ */ c("span", { children: v }), t[8] = v, t[9] = D);
+	let O;
+	t[10] === Symbol.for("react.memo_cache_sentinel") ? (O = /* @__PURE__ */ c("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "10",
+		height: "10",
+		fill: "currentColor",
+		viewBox: "0 0 16 16",
+		className: "angel-table__dropdown-arrow",
+		children: /* @__PURE__ */ c("path", {
+			fillRule: "evenodd",
+			d: "M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"
+		})
+	}), t[10] = O) : O = t[10];
+	let k;
+	t[11] !== E || t[12] !== D ? (k = /* @__PURE__ */ l("button", {
+		onClick: E,
+		className: "angel-table__button angel-table__button--secondary angel-table__dropdown-trigger",
+		children: [D, O]
+	}), t[11] = E, t[12] = D, t[13] = k) : k = t[13];
+	let A;
+	t[14] !== p || t[15] !== u || t[16] !== i || t[17] !== g || t[18] !== s || t[19] !== b ? (A = g && /* @__PURE__ */ l("div", {
+		className: "angel-table__dropdown-menu",
+		children: [!p && /* @__PURE__ */ c("button", {
+			type: "button",
+			onClick: () => {
+				x(""), y(s), u && u(""), _(!1);
+			},
+			className: `angel-table__dropdown-item ${b === "" ? "active" : ""}`,
+			children: s
+		}), i.map((e) => /* @__PURE__ */ c("button", {
+			type: "button",
+			onClick: () => {
+				x(e.value + ""), y(e.title), u && u(e.value), _(!1);
+			},
+			className: `angel-table__dropdown-item ${e.value + "" === b ? "active" : ""}`,
+			children: e.title
+		}, e.value))]
+	}), t[14] = p, t[15] = u, t[16] = i, t[17] = g, t[18] = s, t[19] = b, t[20] = A) : A = t[20];
+	let j;
+	return t[21] !== h || t[22] !== k || t[23] !== A || t[24] !== T ? (j = /* @__PURE__ */ l("div", {
+		onBlur: w,
+		"data-direction": h,
+		className: T,
+		children: [k, A]
+	}), t[21] = h, t[22] = k, t[23] = A, t[24] = T, t[25] = j) : j = t[25], j;
+}, g = t((e) => {
+	let t = (0, m.c)(15), { options: n, onChange: r, direction: i } = e, a = i === void 0 ? "bottom" : i, [s, u] = o(!1), [d, f] = o(n), p;
+	t[0] === Symbol.for("react.memo_cache_sentinel") ? (p = (e) => {
+		e.currentTarget.contains(e.relatedTarget) || u(!1);
+	}, t[0] = p) : p = t[0];
+	let h = `angel-table__dropdown ${s ? "is-open" : ""}`, g;
+	t[1] === s ? g = t[2] : (g = () => u(!s), t[1] = s, t[2] = g);
+	let v;
+	t[3] === Symbol.for("react.memo_cache_sentinel") ? (v = /* @__PURE__ */ l("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		fill: "currentColor",
+		viewBox: "0 0 16 16",
+		children: [/* @__PURE__ */ c("path", { d: "M2 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z" }), /* @__PURE__ */ c("path", { d: "M13 4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1z" })]
+	}), t[3] = v) : v = t[3];
+	let y;
+	t[4] === g ? y = t[5] : (y = /* @__PURE__ */ c("button", {
+		onClick: g,
+		className: "angel-table__button angel-table__button--secondary ",
+		children: v
+	}), t[4] = g, t[5] = y);
+	let b;
+	t[6] !== r || t[7] !== d || t[8] !== s ? (b = s && /* @__PURE__ */ c("div", {
+		className: "angel-table__dropdown-menu",
+		children: d.map((e, t) => /* @__PURE__ */ l("button", {
+			type: "button",
+			onClick: () => {
+				let e = d.map((e, n) => ({
+					...e,
+					show: n === t ? !e.show : e.show
+				}));
+				e.filter(_).length > 1 && (r?.(t), f(e));
+			},
+			className: "angel-table__dropdown-item angel-table__button",
+			children: [e.show ? /* @__PURE__ */ c("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "16",
+				height: "16",
+				fill: "blue",
+				className: " selected",
+				viewBox: "0 0 16 16",
+				children: /* @__PURE__ */ c("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" })
+			}) : /* @__PURE__ */ l("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "16",
+				height: "16",
+				fill: "currentColor",
+				className: "not-selected",
+				viewBox: "0 0 16 16",
+				children: [/* @__PURE__ */ c("path", { d: "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" }), /* @__PURE__ */ c("path", { d: "m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" })]
+			}), /* @__PURE__ */ c("p", { children: e.title })]
+		}, e.value))
+	}), t[6] = r, t[7] = d, t[8] = s, t[9] = b) : b = t[9];
+	let x;
+	return t[10] !== a || t[11] !== h || t[12] !== y || t[13] !== b ? (x = /* @__PURE__ */ l("div", {
+		onBlur: p,
+		"data-direction": a,
+		className: h,
+		children: [y, b]
+	}), t[10] = a, t[11] = h, t[12] = y, t[13] = b, t[14] = x) : x = t[14], x;
+});
+function _(e) {
+	return e.show;
+}
+// lib/Table/hook/useAngelPagination.ts
+function v(e) {
+	let t = (0, m.c)(9), n;
+	t[0] === e ? n = t[1] : (n = e === void 0 ? {} : e, t[0] = e, t[1] = n);
+	let { pageOption: r, perPageOption: i } = n, a = r === void 0 ? 1 : r, s = i === void 0 ? 10 : i, [c, l] = o(a), [u, d] = o(0), [f, p] = o(s), h;
+	t[2] !== c || t[3] !== f || t[4] !== u ? (h = {
+		page: c,
+		perPage: f,
+		totalPage: u
+	}, t[2] = c, t[3] = f, t[4] = u, t[5] = h) : h = t[5];
+	let g;
+	t[6] === Symbol.for("react.memo_cache_sentinel") ? (g = {
+		setPage: l,
+		setPerPage: p,
+		setTotalPage: d
+	}, t[6] = g) : g = t[6];
+	let _;
+	return t[7] === h ? _ = t[8] : (_ = {
+		data: h,
+		handle: g
+	}, t[7] = h, t[8] = _), _;
+}
+// lib/Table/hook/useAngelFilterSerchSort.ts
+function y() {
+	let e = (0, m.c)(14), t;
+	e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = {}, e[0] = t) : t = e[0];
+	let [n, i] = o(t), [a, s] = o(""), [c, l] = o(""), u;
+	e[1] === Symbol.for("react.memo_cache_sentinel") ? (u = {
+		field: "",
+		direction: "asc"
+	}, e[1] = u) : u = e[1];
+	let [d, f] = o(u), p;
+	e[2] === Symbol.for("react.memo_cache_sentinel") ? (p = (e) => {
+		f((t) => ({
+			field: e,
+			direction: t.field === e && t.direction === "asc" ? "desc" : "asc"
+		}));
+	}, e[2] = p) : p = e[2];
+	let h = p, g, _;
+	e[3] === a ? (g = e[4], _ = e[5]) : (g = () => {
+		let e = setTimeout(() => {
+			l(a);
+		}, 500);
+		return () => clearTimeout(e);
+	}, _ = [a], e[3] = a, e[4] = g, e[5] = _), r(g, _);
+	let v;
+	e[6] !== c || e[7] !== n || e[8] !== a || e[9] !== d ? (v = {
+		filter: n,
+		search: a,
+		debouncedSearch: c,
+		sort: d
+	}, e[6] = c, e[7] = n, e[8] = a, e[9] = d, e[10] = v) : v = e[10];
+	let y;
+	e[11] === Symbol.for("react.memo_cache_sentinel") ? (y = {
+		setFilter: i,
+		setSearch: s,
+		setSort: f,
+		setDebouncedSearch: l,
+		handleSort: h
+	}, e[11] = y) : y = e[11];
+	let b;
+	return e[12] === v ? b = e[13] : (b = {
+		data: v,
+		handle: y
+	}, e[12] = v, e[13] = b), b;
+}
+// lib/Table/hook/useAngelCheck.ts
+function b({ rowData: e, keyObject: t, is_select: r, selectedItem: a }) {
+	let [s, c] = o({}), { checkAll: l, selectedCount: u } = i(() => {
+		let n = e.filter((e) => s[String(e[t])]).length;
+		if (r && a) {
+			a(e);
+			let t = [];
+			for (let e in s) t.push(e);
+		}
+		return {
+			checkAll: e.length > 0 && n === e.length,
+			selectedCount: n
+		};
+	}, [
+		s,
+		e,
+		t
+	]), d = n(() => {
+		let n = {};
+		e.forEach((e) => {
+			n[String(e[t])] = !l;
+		}), c(n);
+	}, [e]);
+	return {
+		handle: {
+			handleCheck: n((e) => {
+				let n = String(e[t]);
+				c((e) => ({
+					...e,
+					[n]: !e[n]
+				}));
+			}, []),
+			handleCheckAll: d,
+			setCheckedId: c
+		},
+		data: {
+			selectedCount: u,
+			checkedId: s,
+			checkAll: l
+		}
+	};
+}
+// lib/Table/hook/useAngelData.ts
+function x(e) {
+	let t = new URLSearchParams();
+	return Object.entries(e).forEach(([e, n]) => {
+		n !== "" && t.set(e, n);
+	}), t;
+}
+function S({ rows: e = [], setup: t = {} }) {
+	let { url: i = "", viewDefault: s = "table", angelFetch: c, keyObject: l = "id", is_select: u = !1, selectedItem: d } = t, { data: { page: f, perPage: p, totalPage: m }, handle: { setPage: h, setPerPage: g, setTotalPage: _ } } = v(), { data: { debouncedSearch: S, filter: C, search: w, sort: T }, handle: { handleSort: E, setFilter: D, setSearch: O, setSort: k, setDebouncedSearch: A } } = y(), { data: { checkedId: j, selectedCount: M, checkAll: N }, handle: { handleCheck: P, handleCheckAll: F, setCheckedId: I } } = b({
+		is_select: u,
+		keyObject: l,
+		rowData: e,
+		selectedItem: d
+	}), [L, R] = o(e), [z, B] = o(!1), [V, H] = o(s), U = a(null), W = n(() => {
+		D({}), h(1), O(""), A(""), k({
+			direction: "asc",
+			field: ""
+		});
+	}, []);
+	return r(() => {
+		let e = new AbortController(), t = AbortSignal.timeout(5e3);
+		return (async () => {
+			B(!0);
+			try {
+				let n = x(C);
+				n.set("page", String(f)), n.set("perPage", String(p)), S.trim() !== "" && n.set("search", S.trim()), T.field && (n.set("field", T.field), n.set("direction", T.direction));
+				let r = i.includes("?") ? "&" : "?", a = `${i}${r}${n.toString()}`;
+				if (c) {
+					let e = await c(a);
+					R(e.data ?? []), _(Math.max(1, Number(e.totalPage ?? 1))), I({});
+				} else {
+					let n = await fetch(a, {
+						method: "GET",
+						signal: AbortSignal.any([e.signal, t])
+					});
+					if (!n.ok) throw Error(`Request failed: ${n.status}`);
+					let r = await n.json();
+					if (e.signal.aborted) return;
+					R(r.data ?? []), _(Math.max(1, Number(r.totalPage ?? 1))), I({});
+				}
+				U.current?.scrollIntoView({
+					behavior: "smooth",
+					block: "start"
+				});
+			} catch (e) {
+				if (e instanceof Error && e.name === "AbortError") return;
+				R([]), _(1);
+			} finally {
+				e.signal.aborted || B(!1);
+			}
+		})(), () => e.abort();
+	}, [
+		C,
+		f,
+		p,
+		i,
+		S,
+		T
+	]), {
+		data: {
+			page: f,
+			perPage: p,
+			totalPage: m,
+			debouncedSearch: S,
+			filter: C,
+			search: w,
+			sort: T,
+			checkedId: j,
+			selectedCount: M,
+			rowData: L,
+			view: V,
+			loading: z,
+			targetRef: U,
+			checkAll: N
+		},
+		handle: {
+			setPage: h,
+			setPerPage: g,
+			setTotalPage: _,
+			handleResetFilter: W,
+			handleSort: E,
+			setFilter: D,
+			setSearch: O,
+			setSort: k,
+			handleCheck: P,
+			handleCheckAll: F,
+			setCheckedId: I,
+			setRowData: R,
+			setView: H
+		}
+	};
+}
+// lib/Table/hook/useAngelColumn.ts
+function C(e) {
+	let t = (0, m.c)(4), { columns: n } = e, r;
+	t[0] === n ? r = t[1] : (r = [...n.map(w)], t[0] = n, t[1] = r);
+	let [i, a] = o(r), s;
+	return t[2] === i ? s = t[3] : (s = {
+		setShowColumm: a,
+		showColumm: i
+	}, t[2] = i, t[3] = s), s;
+}
+function w(e) {
+	return {
+		...e,
+		show: !0
+	};
+}
+// lib/Table/components/Sort.tsx
+var T = (t) => {
+	let n = (0, m.c)(20), { columns: i, field: a, sortDirection: s, onSort: u } = t, [d, f] = o(!1), [p, h] = o(a), [g, _] = o(s), v;
+	n[0] === i ? v = n[1] : (v = i.filter(E), n[0] = i, n[1] = v);
+	let y = v, b, x;
+	n[2] === a ? (b = n[3], x = n[4]) : (b = () => (h(a), D), x = [a], n[2] = a, n[3] = b, n[4] = x), r(b, x);
+	let S;
+	n[5] === Symbol.for("react.memo_cache_sentinel") ? (S = (e) => {
+		e.currentTarget.contains(e.relatedTarget) || f(!1);
+	}, n[5] = S) : S = n[5];
+	let C;
+	n[6] === d ? C = n[7] : (C = () => f(!d), n[6] = d, n[7] = C);
+	let w;
+	n[8] === Symbol.for("react.memo_cache_sentinel") ? (w = /* @__PURE__ */ c("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		fill: "currentColor",
+		viewBox: "0 0 16 16",
+		children: /* @__PURE__ */ c("path", {
+			fillRule: "evenodd",
+			d: "M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5m-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5"
+		})
+	}), n[8] = w) : w = n[8];
+	let T;
+	n[9] === C ? T = n[10] : (T = /* @__PURE__ */ c("button", {
+		onClick: C,
+		className: "angel-table__button angel-table__button--secondary ",
+		children: w
+	}), n[9] = C, n[10] = T);
+	let O;
+	n[11] !== d || n[12] !== u || n[13] !== p || n[14] !== g || n[15] !== y ? (O = d && /* @__PURE__ */ l("div", {
+		className: "angel-table__dropdown-menu",
+		children: [
+			y.map((e) => /* @__PURE__ */ c("button", {
+				type: "button",
+				onClick: () => {
+					(g !== "asc" || e.field !== p) && (h(e.field), _("asc"), u && u({
+						field: e.field,
+						sortDirection: "asc"
+					}));
+				},
+				className: `angel-table__dropdown-item angel-table__button ${p === e.field ? "active" : ""}`,
+				children: /* @__PURE__ */ l("p", { children: [" ", e.title] })
+			}, e.field)),
+			/* @__PURE__ */ c("hr", {}),
+			y.filter((e) => e.field === p).map((t) => /* @__PURE__ */ l(e, { children: [/* @__PURE__ */ l("button", {
+				onClick: () => {
+					_("asc"), u && u({
+						field: t.field,
+						sortDirection: "asc"
+					});
+				},
+				className: `angel-table__dropdown-item angel-table__button ${g === "asc" ? "active" : ""}`,
+				children: [/* @__PURE__ */ c("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					width: "16",
+					height: "16",
+					fill: "currentColor",
+					className: "bi bi-arrow-up",
+					viewBox: "0 0 16 16",
+					children: /* @__PURE__ */ c("path", {
+						fillRule: "evenodd",
+						d: "M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"
+					})
+				}), /* @__PURE__ */ c("p", { children: t.sortLabel?.ascLabel ?? "Ascending" })]
+			}), /* @__PURE__ */ l("button", {
+				onClick: () => {
+					_("desc"), u && u({
+						field: t.field,
+						sortDirection: "desc"
+					});
+				},
+				className: `angel-table__dropdown-item angel-table__button ${g === "desc" ? "active" : ""}`,
+				children: [/* @__PURE__ */ c("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					width: "16",
+					height: "16",
+					fill: "currentColor",
+					viewBox: "0 0 16 16",
+					children: /* @__PURE__ */ c("path", {
+						fillRule: "evenodd",
+						d: "M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"
+					})
+				}), /* @__PURE__ */ c("p", { children: t.sortLabel?.descLabel ?? "Descending" })]
+			})] }, t.field))
+		]
+	}), n[11] = d, n[12] = u, n[13] = p, n[14] = g, n[15] = y, n[16] = O) : O = n[16];
+	let k;
+	return n[17] !== T || n[18] !== O ? (k = /* @__PURE__ */ l("div", {
+		onBlur: S,
+		"data-direction": "bottom",
+		className: "angel-table__dropdown ",
+		children: [T, O]
+	}), n[17] = T, n[18] = O, n[19] = k) : k = n[19], k;
+};
+function E(e) {
+	return e.sort && e.show;
+}
+function D() {}
+// lib/Table/Table.tsx
+var O = (t) => {
+	let { columns: r, card: a, className: o, empty: u, perPages: d, selector: f, setup: p } = i(() => {
+		let { columns: e, card: n, className: r, empty: i, perPages: a = [
+			10,
+			15,
+			20
+		], rows: o, selector: s, setup: c = {} } = t;
+		return {
+			columns: e,
+			card: n,
+			className: r,
+			empty: i,
+			perPages: a,
+			rows: o,
+			selector: s,
+			setup: c
+		};
+	}, [t]), { keyObject: m = "id", contentPage: _ = "Page", mode: v = "light", selectedRender: y = (e) => /* @__PURE__ */ l("span", { children: [
+		"Selected: ",
+		/* @__PURE__ */ c("strong", { children: e }),
+		" items"
+	] }), is_select: b = !1, showColumns: x } = i(() => p, [p]), { data: { checkedId: w, filter: E, loading: D, page: O, perPage: k, rowData: A, search: j, selectedCount: M, sort: N, totalPage: P, view: F, targetRef: I, checkAll: L }, handle: { handleCheck: R, handleCheckAll: z, handleResetFilter: B, handleSort: V, setCheckedId: H, setFilter: U, setPage: W, setPerPage: G, setSearch: K, setView: q } } = S(t), { setShowColumm: J, showColumm: Y } = C({ columns: r }), X = n(() => u ? u.render() : /* @__PURE__ */ l("div", {
+		className: "angel-table__empty",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "angel-table__empty-icon",
+				children: /* @__PURE__ */ l("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ c("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "M4 5.5A1.5 1.5 0 0 1 5.5 4h13A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5v-13Z"
+					}), /* @__PURE__ */ c("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "M8 9h8M8 13h5m2 4 2 2 4-4"
+					})]
+				})
+			}),
+			/* @__PURE__ */ c("h3", {
+				className: "angel-table__empty-title",
+				children: "No data found"
+			}),
+			/* @__PURE__ */ c("p", {
+				className: "angel-table__empty-description",
+				children: "No data available to display. Please try again later."
+			}),
+			/* @__PURE__ */ c("button", {
+				type: "button",
+				className: "angel-table__button angel-table__button--secondary",
+				onClick: () => W(1),
+				children: "Refresh"
+			})
+		]
+	}), [u]), Z = /* @__PURE__ */ c("tr", { children: Y.filter((e) => e.show).map((e) => e.field === "check_field" ? /* @__PURE__ */ c("th", {
+		style: { width: e.width },
+		className: `angel-table__check-cell ${e.className ?? ""}`,
+		children: /* @__PURE__ */ c("input", {
+			type: "checkbox",
+			checked: L,
+			onChange: z,
+			"aria-label": "Chọn tất cả"
+		})
+	}, e.field) : e.field === "action_field" ? /* @__PURE__ */ c("th", {
+		style: { width: e.width },
+		className: `angel-table__index-cell ${e.className ?? ""}`,
+		children: e.title
+	}, e.field) : e.field === "index_field" ? /* @__PURE__ */ c("th", {
+		style: { width: e.width },
+		onClick: () => {
+			e.sort && V(e.field);
+		},
+		className: `angel-table__index-cell ${e.className ?? ""}`,
+		children: /* @__PURE__ */ c("span", {
+			className: "angel-table__sort",
+			children: "#"
+		})
+	}, e.field) : /* @__PURE__ */ c("th", {
+		style: { width: e.width },
+		onClick: () => V(e.field),
+		className: e.className ?? "",
+		children: /* @__PURE__ */ l("span", {
+			className: "angel-table__sort",
+			children: [e.title, e.sort && /* @__PURE__ */ l("span", {
+				className: "angel-table__sort-icon",
+				children: [
+					N.field === e.field && N.direction === "asc" && /* @__PURE__ */ c("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						width: "16",
+						height: "16",
+						fill: "currentColor",
+						className: "bi bi-arrow-up",
+						viewBox: "0 0 16 16",
+						children: /* @__PURE__ */ c("path", {
+							fillRule: "evenodd",
+							d: "M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"
+						})
+					}),
+					N.field === e.field && N.direction === "desc" && /* @__PURE__ */ c("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						width: "16",
+						height: "16",
+						fill: "currentColor",
+						className: "bi bi-arrow-down",
+						viewBox: "0 0 16 16",
+						children: /* @__PURE__ */ c("path", {
+							fillRule: "evenodd",
+							d: "M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"
+						})
+					}),
+					N.field !== e.field && /* @__PURE__ */ c("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						width: "16",
+						height: "16",
+						fill: "currentColor",
+						viewBox: "0 0 16 16",
+						children: /* @__PURE__ */ c("path", {
+							fillRule: "evenodd",
+							d: "M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5m-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5"
+						})
+					})
+				]
+			})]
+		})
+	}, e.field)) });
+	return /* @__PURE__ */ l("div", {
+		"data-theme": v,
+		className: `angel-table-container  ${o}`,
+		children: [/* @__PURE__ */ c("div", {
+			className: "angel-table-toolbar",
+			children: /* @__PURE__ */ l("div", {
+				className: "angel-table__toolbar",
+				children: [/* @__PURE__ */ l("div", {
+					className: "angel-table__toolbar-left",
+					children: [f?.map((e) => /* @__PURE__ */ c(h, {
+						value: E[e.field],
+						...e,
+						onChange: (t) => {
+							U((n) => ({
+								...n,
+								[e.field]: t
+							})), W(1);
+						},
+						direction: "bottom"
+					}, e.field)), M > 0 && b && /* @__PURE__ */ l("div", {
+						className: "angel-table__selection",
+						children: [y(M), /* @__PURE__ */ c("button", {
+							type: "button",
+							onClick: () => H({}),
+							children: "Clear selection"
+						})]
+					})]
+				}), /* @__PURE__ */ l("div", {
+					className: "angel-table__toolbar-left",
+					children: [
+						x && /* @__PURE__ */ c(g, {
+							onChange: (e) => {
+								let t = Y.map((t, n) => ({
+									...t,
+									show: n === e ? !t.show : t.show
+								}));
+								J([...t]);
+							},
+							options: [...r.map((e) => ({
+								value: e.field,
+								title: e.title,
+								show: !0
+							}))]
+						}),
+						/* @__PURE__ */ c(T, {
+							columns: Y,
+							onSort: (e) => {
+								V(e.field);
+							},
+							field: N.field,
+							sortDirection: N.direction
+						}),
+						/* @__PURE__ */ c("button", {
+							onClick: () => {
+								q(F === "table" ? "card" : "table");
+							},
+							className: "angel-table__button angel-table__button--secondary",
+							children: F === "table" ? /* @__PURE__ */ l("svg", {
+								xmlns: "http://www.w3.org/2000/svg",
+								fill: "currentColor",
+								viewBox: "0 0 16 16",
+								children: [/* @__PURE__ */ c("path", { d: "M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z" }), /* @__PURE__ */ c("path", { d: "M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8m0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" })]
+							}) : /* @__PURE__ */ c("svg", {
+								xmlns: "http://www.w3.org/2000/svg",
+								width: "16",
+								height: "16",
+								fill: "currentColor",
+								viewBox: "0 0 16 16",
+								children: /* @__PURE__ */ c("path", { d: "M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z" })
+							})
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "angel-table__search-box",
+							children: [/* @__PURE__ */ l("svg", {
+								xmlns: "http://www.w3.org/2000/svg",
+								width: "16",
+								height: "16",
+								fill: "currentColor",
+								viewBox: "0 0 16 16",
+								children: [/* @__PURE__ */ c("path", { d: "M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" }), " "]
+							}), /* @__PURE__ */ c("input", {
+								type: "text",
+								name: "angel-table__search",
+								placeholder: "Search...",
+								value: j,
+								onChange: (e) => {
+									K(e.currentTarget.value);
+								}
+							})]
+						}),
+						/* @__PURE__ */ c("button", {
+							type: "button",
+							className: "angel-table__button angel-table__button--secondary",
+							onClick: B,
+							children: /* @__PURE__ */ l("svg", {
+								xmlns: "http://www.w3.org/2000/svg",
+								width: "16",
+								height: "16",
+								fill: "currentColor",
+								viewBox: "0 0 16 16",
+								children: [/* @__PURE__ */ c("path", {
+									fillRule: "evenodd",
+									d: "M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"
+								}), /* @__PURE__ */ c("path", { d: "M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466" })]
+							})
+						})
+					]
+				})]
+			})
+		}), /* @__PURE__ */ l("div", {
+			className: "angel-table-body",
+			children: [
+				D && /* @__PURE__ */ c(s, { children: /* @__PURE__ */ l("div", {
+					className: "angel-table__loading-container",
+					children: [/* @__PURE__ */ c("div", { className: "angel-table__loading-backdrop" }), /* @__PURE__ */ c("div", {
+						className: "angel-table__loading-overlay",
+						children: /* @__PURE__ */ c("div", {
+							className: "angel-table__loading-text",
+							children: "Loading..."
+						})
+					})]
+				}) }),
+				/* @__PURE__ */ c("div", {
+					className: "angel-table__desktop",
+					ref: I,
+					children: F === "table" ? /* @__PURE__ */ c("div", {
+						style: { maxHeight: p.heightTable ?? 600 },
+						className: "angel-table ",
+						children: /* @__PURE__ */ l("table", { children: [/* @__PURE__ */ c("thead", { children: Z }), /* @__PURE__ */ c("tbody", { children: A.length === 0 && !D ? /* @__PURE__ */ c("tr", {
+							className: "",
+							children: /* @__PURE__ */ c("td", {
+								colSpan: r.length,
+								children: X()
+							})
+						}) : A.map((e, t) => {
+							let n = String(e[m]);
+							return /* @__PURE__ */ c("tr", {
+								className: w[n] ? "is-selected" : "",
+								children: Y.filter((e) => e.show).map((r) => r.field === "action_field" ? /* @__PURE__ */ c("td", {
+									className: r.className ?? "",
+									children: r.render ? r.render(e) : ""
+								}, r.field) : r.field === "check_field" ? /* @__PURE__ */ c("td", {
+									className: `angel-table__check-cell ${r.className ?? ""}`,
+									children: /* @__PURE__ */ c("input", {
+										type: "checkbox",
+										checked: !!w[n],
+										onChange: () => R(e),
+										"aria-label": `Chọn dòng ${n}`
+									})
+								}, r.field) : r.field === "index_field" ? /* @__PURE__ */ c("td", {
+									className: `angel-table__index-cell ${r.className ?? ""}`,
+									children: t + 1
+								}, r.field) : /* @__PURE__ */ c("td", {
+									className: r.className ?? "",
+									children: r.render ? r.render(e) : e[r.field]
+								}, r.field))
+							}, n);
+						}) })] })
+					}) : /* @__PURE__ */ c(e, { children: A.length === 0 ? X() : /* @__PURE__ */ c("ul", {
+						className: "angel-table__cards",
+						children: A.map((t, n) => {
+							let r = t[m];
+							return /* @__PURE__ */ c(e, { children: a ? a.render(t, () => R(t), w[r]) : /* @__PURE__ */ l("li", {
+								onClick: () => {
+									R(t);
+								},
+								className: "angel-table__card ",
+								children: [w[r] && b && /* @__PURE__ */ c("span", {
+									className: "is-selected",
+									children: "Selected"
+								}), Y.filter((e) => e.show).map((e, i) => ["check_field", "index_field"].includes(e.field) ? null : e.field === "action_field" ? /* @__PURE__ */ c("div", { children: e.render ? e.render(t) : /* @__PURE__ */ c(s, {}) }, `${r ?? n}-${e.field ?? i}`) : /* @__PURE__ */ l("div", {
+									className: "angel-table__card_row",
+									children: [/* @__PURE__ */ c("div", {
+										className: "angel-table__card_column_left",
+										children: e.title
+									}), /* @__PURE__ */ c("div", {
+										className: "angel-table__card_column_right",
+										children: e.render ? e.render(t) : t[e.field]
+									})]
+								}, `${r ?? n}-${e.field ?? i}`))]
+							}) }, r ?? n);
+						})
+					}) })
+				}),
+				/* @__PURE__ */ c("ul", {
+					className: "angel-table__mobile",
+					children: /* @__PURE__ */ c(e, { children: A.length === 0 ? X() : /* @__PURE__ */ c("li", {
+						className: "angel-table__cards",
+						children: A.map((t, n) => {
+							let r = String(t[m]);
+							return w[r], /* @__PURE__ */ c(e, { children: a ? a.render(t, () => R(t), w[r]) : /* @__PURE__ */ l("div", {
+								className: "angel-table__card",
+								children: [w[r] && b && /* @__PURE__ */ c("span", {
+									className: "is-selected",
+									children: "Selected"
+								}), Y.filter((e) => e.show).map((e, i) => ["check_field", "index_field"].includes(e.field) ? null : e.field === "action_field" ? /* @__PURE__ */ c("div", { children: e.render ? e.render(t) : /* @__PURE__ */ c(s, {}) }, `${String(r ?? n)}-${e.field ?? i}`) : /* @__PURE__ */ l("div", {
+									className: "angel-table__card_row",
+									children: [/* @__PURE__ */ c("div", {
+										className: "angel-table__card_column_left",
+										children: e.title
+									}), /* @__PURE__ */ c("div", {
+										className: "angel-table__card_column_right",
+										children: e.render ? e.render(t) : t[e.field]
+									})]
+								}, `${String(r ?? n)}-${e.field ?? i}`))]
+							}) }, String(r ?? n));
+						})
+					}) })
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "angel-table__footer",
+					children: [/* @__PURE__ */ c("div", {
+						className: "angel-table__footer-info",
+						children: D ? "Đang tải..." : /* @__PURE__ */ l(s, { children: [
+							_,
+							" ",
+							/* @__PURE__ */ c("strong", { children: O }),
+							" /",
+							" ",
+							/* @__PURE__ */ c("strong", { children: P })
+						] })
+					}), /* @__PURE__ */ l("div", {
+						className: "angel-table__pagination",
+						children: [
+							/* @__PURE__ */ c(h, {
+								field: "",
+								onChange: (e) => {
+									G(Number(e)), W(1);
+								},
+								noLabel: !0,
+								direction: "top",
+								options: [...d.map((e) => ({
+									title: e + "",
+									value: e + ""
+								}))],
+								title: k + ""
+							}),
+							/* @__PURE__ */ c("button", {
+								type: "button",
+								className: "angel-table__page-button",
+								disabled: O <= 1 || D,
+								onClick: () => W(() => 1),
+								"aria-label": "Trang trước",
+								children: /* @__PURE__ */ l("svg", {
+									xmlns: "http://www.w3.org/2000/svg",
+									width: "16",
+									height: "16",
+									fill: "currentColor",
+									viewBox: "0 0 16 16",
+									children: [/* @__PURE__ */ c("path", {
+										fillRule: "evenodd",
+										d: "M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"
+									}), /* @__PURE__ */ c("path", {
+										fillRule: "evenodd",
+										d: "M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"
+									})]
+								})
+							}),
+							/* @__PURE__ */ c("button", {
+								type: "button",
+								className: "angel-table__page-button",
+								disabled: O <= 1 || D,
+								onClick: () => W((e) => Math.max(1, e - 1)),
+								"aria-label": "Trang trước",
+								children: /* @__PURE__ */ c("svg", {
+									xmlns: "http://www.w3.org/2000/svg",
+									width: "16",
+									height: "16",
+									fill: "currentColor",
+									viewBox: "0 0 16 16",
+									children: /* @__PURE__ */ c("path", {
+										fillRule: "evenodd",
+										d: "M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"
+									})
+								})
+							}),
+							/* @__PURE__ */ c("span", {
+								className: "angel-table__page-number",
+								children: O
+							}),
+							/* @__PURE__ */ c("button", {
+								type: "button",
+								className: "angel-table__page-button",
+								disabled: O >= P || D,
+								onClick: () => W((e) => Math.min(P, e + 1)),
+								"aria-label": "Trang tiếp theo",
+								children: /* @__PURE__ */ c("svg", {
+									xmlns: "http://www.w3.org/2000/svg",
+									width: "16",
+									height: "16",
+									fill: "currentColor",
+									viewBox: "0 0 16 16",
+									children: /* @__PURE__ */ c("path", {
+										fillRule: "evenodd",
+										d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"
+									})
+								})
+							}),
+							/* @__PURE__ */ c("button", {
+								type: "button",
+								className: "angel-table__page-button",
+								disabled: O >= P || D,
+								onClick: () => W(() => P),
+								"aria-label": "Trang tiếp theo",
+								children: /* @__PURE__ */ l("svg", {
+									xmlns: "http://www.w3.org/2000/svg",
+									width: "16",
+									height: "16",
+									fill: "currentColor",
+									viewBox: "0 0 16 16",
+									children: [/* @__PURE__ */ c("path", {
+										fillRule: "evenodd",
+										d: "M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708"
+									}), /* @__PURE__ */ c("path", {
+										fillRule: "evenodd",
+										d: "M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708"
+									})]
+								})
+							})
+						]
+					})]
+				})
+			]
+		})]
+	});
+};
+export { O as Table };