@razaman2/reactive-view 0.1.0-beta.9 → 0.2.0

package/dist/components.mjs

@@ -0,0 +1,1660 @@
+import { _ as e, c as t, d as n, g as r, h as i, i as a, n as o, p as s, r as c, s as l, t as u, y as d } from "./src-DgPt5VTg.mjs";
+import { t as f } from "./Select-CSA5Sk_b.mjs";
+import { t as p } from "./Label-B63BpiJm.mjs";
+import { r as m, t as h } from "./Editor-BX8prqWt.mjs";
+import g from "@razaman2/object-manager";
+import _ from "@razaman2/data-manager";
+import { Fragment as v, computed as y, createElementBlock as b, createElementVNode as x, createTextVNode as S, createVNode as C, h as w, markRaw as T, mergeProps as E, onBeforeMount as D, onBeforeUnmount as O, onMounted as k, openBlock as A, provide as j, reactive as M, ref as N, unref as P, watch as F, watchEffect as I } from "vue";
+import { formatInTimeZone as L } from "date-fns-tz";
+import { twMerge as R } from "tailwind-merge";
+import { Button as z, DatePicker as ee, Divider as B, Popover as V, SplitButton as H } from "primevue";
+import { v4 as U } from "uuid";
+import W from "inputmask";
+import { format as te, formatISO as ne, parse as G, parseISO as K } from "date-fns";
+//#endregion
+//#region src/components/Button.vue
+var q = l({
+	modelName: "Button",
+	props: {
+		class: o(),
+		buttonClass: o(),
+		split: o({ type: Boolean }),
+		options: o({
+			type: Array,
+			default: []
+		}),
+		unstyled: o({ type: Boolean })
+	},
+	setup(e, t, n) {
+		return { template: () => {
+			if (n.unstyled) return C(z, {
+				unstyled: !0,
+				class: R(u("btn uppercase rounded-lg text-sm font-normal leading-none", n.buttonClass, n.class).string, u(n.buttonClass, n.class).string)
+			}, n.$slots);
+			let e = R(u("btn uppercase leading-none", n.buttonClass, n.class).string, u(n.buttonClass, n.class).string), t = "shrink-0 text-sm! font-normal!", r = `${t} border-0! px-4! py-0! [&_.p-button-label]:[font:inherit]!`, i = "[background-image:linear-gradient(180deg,rgba(255,255,255,0.20)_28%,rgba(255,255,255,0.00)_100%)]!", a = "relative before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:transition-opacity hover:before:opacity-[0.15]", o = `${r} ${a} h-full bg-transparent! shadow-none! rounded-none! text-inherit! [font:inherit]!`, s = ["top", "bottom"].includes(n.$attrs.iconPos) ? "h-auto py-2! gap-1" : "";
+			return n.split ? C(H, {
+				class: R(t, i, e, "p-0! overflow-hidden"),
+				buttonProps: { class: R(o, "pr-2!") },
+				menuButtonProps: { class: R(o, "pl-2!") },
+				model: n.options
+			}, n.$slots) : C(z, { class: R(r, i, a, s, e) }, n.$slots);
+		} };
+	}
+}), J = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function Y(e, t) {
+	return A(), b("svg", J, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
+	}, null, -1)]]);
+}
+var X = T({
+	name: "mdi-close",
+	render: Y
+}), Z = l({
+	modelName: "CustomButton",
+	props: {
+		label: o({ type: [Number, String] }),
+		tag: o({
+			type: String,
+			default: "button"
+		}),
+		loading: o({
+			type: [Boolean, Function],
+			default: !1
+		}),
+		padding: o({
+			type: Boolean,
+			default: !0
+		}),
+		buttonClass: o(),
+		loadingClass: o()
+	},
+	setup(e, t, n) {
+		let r = typeof n.loading == "function" ? n.loading : () => n.loading, i = N(!1);
+		return I(() => {
+			i.value = r();
+		}), {
+			template: () => C(n.tag, { class: R(u({
+				"px-0 h-min": !n.padding,
+				"btn uppercase rounded-lg text-sm font-normal leading-none": !0
+			}).string, u(n.buttonClass).string) }, { default: () => [a(e).buttonLoading(), C("div", { class: {
+				hidden: i.value,
+				contents: !0
+			} }, [a(e).buttonIcon(), n.$slots.default ? n.$slots.default({ component: e }) : n.label])] }),
+			buttonIcon: () => {
+				if (n.$slots.icon) return n.$slots.icon({ component: e });
+			},
+			buttonLoading: () => {
+				if (i.value) return n.$slots.loading ? n.$slots.loading({ component: e }) : C("span", { class: u("loading", n.loadingClass) }, null);
+			}
+		};
+	}
+}), re = l({
+	modelName: "CustomModal",
+	props: {
+		title: o({
+			type: [
+				Boolean,
+				Number,
+				String
+			],
+			default: "Modal Title"
+		}),
+		persistent: o({ type: Boolean }),
+		header: o({
+			type: Boolean,
+			default: !0
+		}),
+		actions: o({
+			type: Boolean,
+			default: !0
+		}),
+		ok: o({
+			type: Boolean,
+			default: !0
+		}),
+		cancel: o({ type: Boolean }),
+		close: o({
+			type: Boolean,
+			default: !0
+		}),
+		show: o({
+			type: Boolean,
+			default: !0
+		}),
+		whenOk: o({
+			type: Function,
+			default: () => {}
+		}),
+		whenCancel: o({
+			type: Function,
+			default: () => {}
+		}),
+		whenClose: o({
+			type: Function,
+			default: () => {}
+		}),
+		whenEscape: o({
+			type: Function,
+			default: () => {}
+		}),
+		whenDismiss: o({
+			type: Function,
+			default: () => {}
+		}),
+		whenRouteChange: o({
+			type: Function,
+			default: () => {}
+		}),
+		class: o(),
+		headerClass: o(),
+		titleClass: o(),
+		actionsClass: o(),
+		backdropClass: o(),
+		timeout: o({
+			default: !1,
+			validator: (e) => typeof e == "number" || e === !1
+		}),
+		modal: o({ type: Boolean }),
+		id: o({ type: [Number, String] })
+	},
+	setup: (e, t, n) => {
+		j("dialog", e);
+		let r = N(), i = N(), o = document.getElementById(n.$attrs.container ?? "app-dialogs"), s = y(() => a(e).trigger ?? n.$slots.trigger), c = y(() => s.value ? !1 : n.show), l = y(() => !0), d = (e) => {
+			throw Error(e);
+		}, f = () => C("div", null, [C("dialog", E({
+			class: "modal",
+			ref: r
+		}, s.value || a(e).watch ? {} : o ? { id: o.lastChild?.id } : d("Modal should be called with showComponent.ts | trigger element | trigger slot")), [a(e).modalBox(), a(e).modalBackdrop()]), s.value?.({ component: e })]), p = () => C("div", { class: R(u("modal-box flex flex-col p-0", n.class).string, u(n.class).string) }, [
+			a(e).modalHeader(),
+			a(e).modalContent(),
+			a(e).modalActions()
+		]), m = () => n.$slots.default ? n.$slots.default({ component: e }) : C("div", { class: "px-4" }, [S("No Content")]), h = () => C("div", {
+			class: R("modal-backdrop", u({ "pointer-events-none": n.persistent }).string, u(n.backdropClass).string),
+			onClick: () => a(e).hide("backdrop")
+		}, null), g = () => {
+			if (n.actions) return C("div", {
+				style: "margin: 0;",
+				class: R("modal-action px-4 pb-4", u(n.actionsClass).string)
+			}, [a(e).okButton(), a(e).cancelButton()]);
+		}, _ = () => {
+			if (n.header) return C("div", { class: R("flex items-center justify-between px-4 pt-4", u(n.headerClass).string) }, [a(e).title(), a(e).closeButton()]);
+		}, v = () => {
+			if (n.close) return C(X, {
+				class: "cursor-pointer rounded-full text-xl transition duration-500 hover:scale-80 hover:ring",
+				onClick: async () => {
+					await n.whenClose(), a(e).hide("close");
+				}
+			}, null);
+		}, b = () => {
+			if (n.ok) return C(Z, {
+				label: "ok",
+				class: "btn-sm btn-success text-white",
+				onClick: () => a(e).triggerOk(),
+				disabled: !a(e).isValid
+			}, null);
+		}, x = () => {
+			if (n.cancel) return C(Z, {
+				label: "cancel",
+				class: "btn-sm btn-error text-white",
+				onClick: async () => {
+					await n.whenCancel(), a(e).hide("cancel");
+				}
+			}, null);
+		}, w = () => {
+			if (["String", "Number"].includes(n.title.constructor.name)) return C("h3", { class: R("w-full text-center font-bold", u(n.titleClass).string) }, [n.title]);
+		}, T = () => r.value[n.modal ? "showModal" : "show"](), D = (e) => r.value.close(e), k = () => r.value.open, A = (e) => {
+			n.$attrs.unmount?.(e), clearTimeout(i.value);
+		}, M = async () => {
+			let e = await import("@razaman2/event-emitter");
+			return (e.default?.global ? e.default : e.default.default).global();
+		}, P = async () => {
+			await n.whenOk(a(e).model.getData()), a(e).hide("ok");
+		}, I = async (e) => {
+			let t = e.key === "Escape";
+			n.persistent && t ? (e.stopPropagation(), e.preventDefault()) : t && await n.whenEscape();
+		}, L = async () => {
+			r.value && a(e).showing() && await n.whenRouteChange();
+		};
+		return O(() => {
+			document.removeEventListener("keydown", I), window.removeEventListener("hashchange", L), window.removeEventListener("popstate", L);
+		}), setTimeout(() => {
+			let t = "open";
+			r.value && (new MutationObserver(async () => {
+				if (a(e).showing()) try {
+					await (await M()).emit(`dialog:${t}`, {
+						type: t,
+						component: e,
+						id: n.id
+					});
+				} finally {}
+			}).observe(r.value, {
+				attributes: !0,
+				attributeFilter: [t]
+			}), r.value.addEventListener("close", async (t) => {
+				let r = t.target.returnValue || "escape";
+				try {
+					await (await M()).emit("dialog:close", {
+						e: t,
+						type: r,
+						component: e,
+						id: n.id
+					});
+				} finally {
+					await n.whenDismiss({ type: r }), A({ type: r });
+				}
+			}), typeof n.timeout == "number" && (i.value = setTimeout(() => a(e).hide("timeout"), n.timeout)), a(e).watch ? F(a(e).watch, (t) => {
+				r.value && t ? a(e).show() : r.value && a(e).hide();
+			}, { deep: !0 }) : c.value && a(e).show()), document.addEventListener("keydown", I), window.addEventListener("hashchange", L), window.addEventListener("popstate", L);
+		}), {
+			template: f,
+			title: w,
+			modalBox: p,
+			modalHeader: _,
+			modalContent: m,
+			modalActions: g,
+			modalBackdrop: h,
+			closeButton: v,
+			okButton: b,
+			cancelButton: x,
+			show: T,
+			hide: D,
+			showing: k,
+			triggerOk: P,
+			isValid: l,
+			modalRef: r
+		};
+	}
+}), ie = l({
+	cancel: !0,
+	titleClass: "text-left",
+	modelName: "ConfirmationModal",
+	title: (e, t) => a(t).confirmationTitle?.(),
+	slots: (e, t) => () => C(v, null, [C(B, null, null), C("div", { class: "pt-4 px-4 pb-8" }, [a(t).confirmationDescription()])]),
+	setup(e, r) {
+		let i = M({ status: !1 });
+		return {
+			confirmationTitle: () => "Confirm",
+			confirmationDescription: () => "Are you sure you sure?",
+			okButton: () => {
+				let e = a(r).okButton();
+				if (e) return C(q, E({ unstyled: !0 }, n(e.props, "class"), {
+					loading: i.status,
+					class: "h-8 normal-case! bg-white! text-(--colors-primary-500)! border-gray-200! rounded-lg! hover:bg-gray-50!",
+					label: "Continue"
+				}), e.children);
+			},
+			cancelButton: () => {
+				let e = a(r).cancelButton();
+				if (e) return C(q, E(n(e.props, "class"), {
+					unstyled: !0,
+					class: "h-8 -order-1 normal-case! bg-white! border-gray-200! text-gray-700! rounded-lg! hover:bg-gray-50! hover:text-gray-900!",
+					label: "Cancel"
+				}), e.children);
+			},
+			closeButton: () => t(r).closeButton({
+				unstyled: !0,
+				buttonClass: "border border-gray-200 bg-white text-gray-400 hover:text-red-500 transition-all duration-500 rounded-md! -{btn}"
+			}, () => C(q, null, { icon: () => C(X, { class: "size-5" }, null) })),
+			triggerOk: () => s({
+				loading: i,
+				try: () => a(r).triggerOk()
+			})
+		};
+	}
+}, re), ae = {
+	props: {
+		setup: d,
+		title: o({ type: String }),
+		description: o({ type: String }),
+		close: o({
+			type: Boolean,
+			default: !0
+		}),
+		timeout: o({
+			default: 3e3,
+			validator: (e) => typeof e == "number" || e === !1
+		})
+	},
+	setup(e, t) {
+		return (e) => C(r, {
+			modelName: "CustomAlert",
+			setup: (n) => {
+				let r = {
+					default: C("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					}, null),
+					"alert-info": C("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					}, null),
+					"alert-success": C("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+					}, null),
+					"alert-warning": C("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+					}, null),
+					"alert-error": C("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					}, null)
+				}, i = () => /alert-(info|success|warning|error)/.exec(e.$attrs.class)?.shift();
+				return P(e.timeout) && k(() => {
+					setTimeout(() => a(n).hide("timeout"), P(e.timeout));
+				}), {
+					template: () => C("div", {
+						role: "alert",
+						class: "alert"
+					}, [
+						a(n).alertIcon(),
+						C("div", null, [a(n).alertTitle(), e.$slots.default ? e.$slots.default({ component: n }) : a(n).alertDescription()]),
+						a(n).alertClose()
+					]),
+					alertIcon: () => C("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						class: {
+							[i() ? "stroke-current" : "stroke-black"]: !0,
+							"h-6 w-6 shrink-0": !0
+						},
+						fill: "none",
+						viewBox: "0 0 24 24"
+					}, [r[i()] || r.default]),
+					alertTitle: () => C("h3", { class: "font-bold" }, [P(e.title)]),
+					alertDescription: () => C("div", { class: "text-xs" }, [P(e.description)]),
+					alertClose: () => {
+						if (P(e.close)) return C(X, {
+							id: "alert-close",
+							class: "text-xl cursor-pointer rounded-full hover:scale-80 hover:ring transition duration-500",
+							onClick: () => a(n).hide("close")
+						}, null);
+					},
+					hide: (n) => {
+						e.$el.remove(), t.emit("close", n);
+					}
+				};
+			}
+		}, e.$slots);
+	}
+}, oe = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function se(e, t) {
+	return A(), b("svg", oe, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
+	}, null, -1)]]);
+}
+var ce = T({
+	name: "mdi-chevron-down",
+	render: se
+}), le = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function ue(e, t) {
+	return A(), b("svg", le, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z"
+	}, null, -1)]]);
+}
+var de = T({
+	name: "mdi-delete",
+	render: ue
+}), fe = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function pe(e, t) {
+	return A(), b("svg", fe, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83l3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z"
+	}, null, -1)]]);
+}
+var me = T({
+	name: "mdi-edit",
+	render: pe
+}), he = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function ge(e, t) {
+	return A(), b("svg", he, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M16 12a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2"
+	}, null, -1)]]);
+}
+var _e = T({
+	name: "mdi-more-horiz",
+	render: ge
+}), ve = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function ye(e, t) {
+	return A(), b("svg", ve, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6l-6-6zM16 6h2v12h-2z"
+	}, null, -1)]]);
+}
+var be = T({
+	name: "mdi-last-page",
+	render: ye
+}), xe = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function Se(e, t) {
+	return A(), b("svg", xe, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6l6 6zM6 6h2v12H6z"
+	}, null, -1)]]);
+}
+var Ce = T({
+	name: "mdi-first-page",
+	render: Se
+}), we = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function Te(e, t) {
+	return A(), b("svg", we, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"
+	}, null, -1)]]);
+}
+var Ee = T({
+	name: "mdi-navigate-next",
+	render: Te
+}), De = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function Oe(e, t) {
+	return A(), b("svg", De, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z"
+	}, null, -1)]]);
+}
+var ke = T({
+	name: "mdi-navigate-before",
+	render: Oe
+}), Ae = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function je(e, t) {
+	return A(), b("svg", Ae, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z"
+	}, null, -1)]]);
+}
+var Me = T({
+	name: "mdi-warning",
+	render: je
+}), Ne = {
+	props: {
+		setup: d,
+		ReactiveView: !0
+	},
+	setup() {
+		return (e) => C(r, {
+			modelName: "ListPagination",
+			getDefaultData: (e) => ({
+				page: 1,
+				rows: 5,
+				current: 1,
+				selections: [
+					1,
+					3,
+					5,
+					10,
+					15
+				],
+				...e
+			}),
+			setup: (e) => {
+				let t = N(a(e).model.getData("page") || 1), n = y(() => Math.ceil(r.value / a(e).model.getData("rows"))), r = y(() => a(e).model.getData("count") ?? a(a(e).$attrs.list).model.getData().length), i = y(() => o.value - a(e).model.getData("rows")), o = y(() => t.value * a(e).model.getData("rows"));
+				return F(n, (e) => {
+					e >= 1 && t.value > e && (t.value = e);
+				}), F(t, (t, i = 0) => {
+					let { current: o, rows: s } = a(e).model.getData();
+					if (i === 0) {
+						let n = t * s - (s - 1);
+						a(e).model.setData({
+							page: t,
+							current: n
+						});
+					} else if (t === 1) a(e).model.setData({
+						page: t,
+						current: 1
+					});
+					else if (t > i + 1) {
+						let i = r.value % s ? (n.value - 1) * s + 1 : n.value * s - (s - 1);
+						a(e).model.setData({
+							page: t,
+							current: i
+						});
+					} else i > t ? a(e).model.setData({
+						page: t,
+						current: (t - 1) * s + 1
+					}) : a(e).model.setData({
+						page: t,
+						current: o + s
+					});
+				}, { immediate: !0 }), D(() => {
+					a(e).load(a(e).$attrs.list, e);
+				}), {
+					template: () => {
+						let { current: n, rows: i } = a(e).model.getData();
+						return r.value ? C("div", { class: { "paginator flex flex-wrap gap-x-2 items-center justify-end": !0 } }, [
+							C("span", { class: "paginator-text" }, [S("Records per page:")]),
+							C("span", { class: "paginator-count" }, [a(e).rows()]),
+							C("span", { class: { "flex gap-x-1": !0 } }, [
+								C("span", { class: "start" }, [n > r.value ? r.value === 0 ? r.value : n - i : n]),
+								C("span", null, [S("-")]),
+								C("span", { class: "end" }, [i * t.value > r.value ? r.value : i * t.value]),
+								C("span", null, [S("of")]),
+								C("span", { class: "count" }, [r.value])
+							]),
+							a(e).controls()
+						]) : C("div", { class: { "flex justify-start items-center gap-x-2": !0 } }, [C(Me, null, null), C("span", null, [S("No data available")])]);
+					},
+					prev: () => C(Z, {
+						disabled: !(t.value > 1),
+						class: { "paginator-prev btn-xs disabled:text-black": !0 },
+						onClick: () => --t.value
+					}, { default: () => [C(ke, null, null)] }),
+					next: () => {
+						let { rows: n } = a(e).model.getData();
+						return C(Z, {
+							disabled: !(t.value * n < r.value),
+							class: { "paginator-next btn-xs disabled:text-black": !0 },
+							onClick: () => t.value += 1
+						}, { default: () => [C(Ee, null, null)] });
+					},
+					start: () => C(Z, {
+						disabled: !(t.value > 1),
+						class: { "paginator-start btn-xs disabled:text-black": !0 },
+						onClick: () => t.value = 1
+					}, { default: () => [C(Ce, null, null)] }),
+					end: () => {
+						let { rows: i } = a(e).model.getData();
+						return C(Z, {
+							disabled: !(t.value * i < r.value),
+							class: { "paginator-end btn-xs disabled:text-black": !0 },
+							onClick: () => t.value = n.value
+						}, { default: () => [C(be, null, null)] });
+					},
+					rows: () => C(f, {
+						placeholder: !1,
+						appendTo: "body",
+						sorted: !1,
+						class: "rounded max-w-max bg-transparent border-none cursor-pointer",
+						options: a(e).model.getData("selections"),
+						data: a(e).model.getData("rows"),
+						"onUpdate:model": ({ after: n }) => {
+							a(e).model.setData({
+								rows: parseInt(n),
+								count: r.value,
+								page: 1,
+								current: 1
+							}), t.value = 1;
+						}
+					}, null),
+					controls: () => C("div", { class: "flex gap-x-1" }, [
+						a(e).start(),
+						a(e).prev(),
+						a(e).next(),
+						a(e).end()
+					]),
+					pagination: (t) => a(a(e).$attrs.list).tid === t.id ? {} : t.index < i.value || t.index >= o.value ? { class: c("hidden") } : {},
+					load: () => {},
+					to: o,
+					from: i
+				};
+			}
+		}, e.$slots);
+	}
+}, Pe = l({
+	modelName: "ItemsList",
+	props: {
+		isValid: o({ type: [Boolean, Function] }),
+		beforeItemAdding: o({ type: Function }),
+		whenItemAdding: o({ type: Function }),
+		beforeItemDeleting: o({ type: Function }),
+		whenItemDeleting: o({ type: Function }),
+		whenItemActive: o({ type: Function }),
+		whenItemInactive: o({ type: Function }),
+		defaultDisplayComponent: o(),
+		displayComponent: o({ default: () => r }),
+		itemProps: o({
+			type: [Function, Object],
+			default: () => ({})
+		}),
+		itemSlots: o({
+			type: [Function, Object],
+			default: () => ({})
+		}),
+		itemKey: o({
+			type: String,
+			default: "id"
+		}),
+		paginator: o({ type: [Boolean, Object] }),
+		draggable: o({ type: Function }),
+		groupable: o({ type: Function }),
+		sortable: o({
+			type: Function,
+			default: (e) => e
+		}),
+		filterable: o({
+			type: Function,
+			default: (e) => e
+		}),
+		clickable: o({
+			type: Boolean,
+			default: !0
+		}),
+		selectable: o({
+			type: Boolean,
+			default: !0
+		}),
+		selected: o({
+			type: [
+				Boolean,
+				Function,
+				Number,
+				Object,
+				String
+			],
+			default: 0
+		}),
+		duplicate: o({
+			type: Function,
+			default: () => !1
+		}),
+		addToStart: o({
+			type: Boolean,
+			default: !0
+		}),
+		multiple: o({ type: Boolean }),
+		"data:callback_key": o({ type: [
+			Boolean,
+			Function,
+			String
+		] }),
+		listPaginationClass: o(),
+		listDefaultClass: o(),
+		listTemplateClass: o(),
+		listClass: o()
+	},
+	defaultData: [],
+	setup(e, t, i) {
+		let o = `component_${U()}`, s = M({}), c = N(U()), l = N(U()), d = N([P(c)]), f = N(), p = N(), m = N(), h = N(), v = y(() => {
+			try {
+				let t = a(e).activeComponent();
+				return typeof i.isValid == "function" ? i.isValid({
+					component: t,
+					list: e
+				}) : typeof P(i.isValid) == "boolean" ? P(i.isValid) : P(a(t).isValid);
+			} catch {
+				return !1;
+			}
+		}), b = y(() => {
+			try {
+				return a(e).model.getData().map((t) => {
+					try {
+						if (["Object"].includes(t.constructor.name)) {
+							let n = a(e).itemIdentifier(t);
+							return n || n === 0 ? t : Object.assign(t, { tid: U() });
+						} else return {
+							"": t,
+							tid: U()
+						};
+					} catch {
+						return {
+							"": t,
+							tid: U()
+						};
+					}
+				});
+			} catch {
+				return [];
+			}
+		}), x = y(() => i.sortable(i.filterable(P(b), e), e)), S = (e = {}, t = !0) => {
+			try {
+				return e.hasOwnProperty(i.itemKey) ? i.itemKey : t ? "tid" : i.itemKey;
+			} catch {
+				return t ? "tid" : i.itemKey;
+			}
+		}, w = (t = {}) => {
+			try {
+				return t[a(e).itemKey(t)];
+			} catch {
+				return;
+			}
+		}, T = (e) => s[e], E = () => i.defaultDisplayComponent === !1 ? C(r, { class: "hidden" }) : i.defaultDisplayComponent === void 0 ? i.displayComponent : i.defaultDisplayComponent, D = () => C(i.displayComponent), O = (t = {}) => t.id === P(c) ? a(e).defaultDisplayComponent() : i.displayComponent, A = (t) => {
+			let n = a(e).itemIdentifier(t), r = a(e).getComponent(P(l)), o = a(e).getComponent(n);
+			if (o && i.duplicate({
+				id: n,
+				tid: P(c),
+				items: P(x),
+				prev: r,
+				next: o
+			})) throw Error(`Component with id { ${n} } already exists.`);
+			{
+				let n = o ?? r;
+				if (n) {
+					let r = a(e).getComponent(P(c));
+					a(n).model.replaceData(t ?? I(r));
+				}
+				return n;
+			}
+		}, j = (t, n) => new Promise(async (r) => {
+			let i = P(x).reduce((r, i) => {
+				let { id: o = !0, force: s = !1 } = typeof n == "boolean" ? {
+					id: !0,
+					force: n
+				} : n ?? {}, c = a(e).itemIdentifier(i), l = a(e).getComponent(c);
+				return i.hasOwnProperty("tid") || s ? r.concat(t({
+					list: e,
+					data: a(e).finalize(l, o),
+					component: l,
+					tid: c
+				})) : r;
+			}, []);
+			r(await Promise.all(i));
+		}), I = (e) => a(e).model.getData({ raw: !0 }) ?? a(e).model.getData(), L = async (t) => {
+			let n = i.beforeItemAdding ?? a(t).beforeItemAdding, r = i.whenItemAdding ?? a(t).whenItemAdding, o = {
+				tid: P(c),
+				data: V(t),
+				list: e
+			};
+			return (await n?.(Object.assign({}, o, { component: t }), e) ?? !0) && (await r?.(o, e) ? await r(Object.assign({}, o, { component: t }), e) : a(e).set(g.on(I(t)).clone())), t;
+		}, z = async (t) => {
+			if (!(a(t).$attrs.default || a(t).$attrs.template)) {
+				let n = i.beforeItemDeleting ?? a(t).beforeItemDeleting, r = i.whenItemDeleting ?? a(t).whenItemDeleting, o = { list: e };
+				return (await n?.(Object.assign({}, o, { component: t }), e) ?? !0) && (await r?.(o, e) ? await r(Object.assign({}, o, { component: t }), e) : a(e).unset(g.on(I(t)).clone())), t;
+			}
+		}, ee = (t) => {
+			let n = a(e).itemIdentifier(t);
+			P(x).findIndex((t) => a(e).itemIdentifier(t) === n) === -1 ? (a(e).model.replaceData(i.addToStart ? [t].concat(P(x)) : P(x).concat(t)), delete s[P(l)], c.value = U(), l.value = U()) : a(e).defaultComponent(t);
+		}, B = (t) => {
+			let n = a(e).itemIdentifier(t);
+			a(e).model.replaceData(P(x).filter((t) => a(e).itemIdentifier(t) !== n)), delete s[n];
+		}, V = (e, t) => {
+			try {
+				let { tid: n, ...r } = I(e);
+				return r.id || t === !1 ? r : Object.assign({}, r, { id: a(e).getTid?.() ?? n });
+			} catch {
+				return {};
+			}
+		}, H = () => {
+			let t = a(e).activeItemIdentifier();
+			return a(e).getComponent(t);
+		}, W = () => i.selectable ? (i.multiple ? P(d) : P(d)[0]) ?? P(c) : P(c), te = ({ index: t, item: n }) => {
+			let r = a(e).itemIdentifier(n), o = r === P(l), u = r === P(c), p = (t) => ({
+				event: { [t]: !0 },
+				source: P(f),
+				target: a(e).getComponent(r),
+				items: P(x)
+			}), m = {
+				id: r,
+				key: r,
+				list: e,
+				instance: (e) => s[r] = e,
+				default: u,
+				template: o,
+				selected: P(d).includes(r),
+				component: a(e).getComponent(r) ?? { model: _.setDefaultData(n) },
+				defaultData: Array.isArray(n) ? [] : {},
+				data: () => {
+					let n = P(x).find((t) => a(e).itemIdentifier(t) === r);
+					return n === void 0 ? P(x)[t] : n;
+				},
+				"data:callback": (e, { component: t }) => {
+					try {
+						let n = i["data:callback_key"], r = typeof n == "function" ? n(e) : n;
+						r === !0 ? a(t).model.replaceData(e.after) : typeof r == "string" ? a(t).model.getData(r).valueOf() !== e.after[r].valueOf() && a(t).model.replaceData(e.after) : e.changed && a(t).model.replaceData(e.after);
+					} catch {
+						a(t).model.replaceData(e.after);
+					}
+				},
+				onClick: (t) => {
+					let n = a(e).getComponent(r);
+					i.selectable && (typeof a(n).whenItemSelected == "function" ? a(n).whenItemSelected(t, m) : P(d).includes(r) || (d.value = [r])), i.clickable && typeof a(n).whenItemClicked == "function" && a(n).whenItemClicked(t, m);
+				},
+				...o ? { class: "hidden" } : {},
+				...typeof t == "number" ? { index: t } : {},
+				...i.draggable ? {
+					draggable: !0,
+					ondragover: (t) => {
+						t.preventDefault(), i.draggable(p("over"), e);
+					},
+					ondragend: () => {
+						f.value = void 0, i.draggable(p("end"), e);
+					},
+					ondragstart: () => {
+						f.value = a(e).getComponent(r), i.draggable(p("start"), e);
+					},
+					ondrop: () => {
+						i.draggable(p("drop"), e);
+					},
+					ondragenter: () => {
+						a(e).itemIdentifier(I(f)) !== r && i.draggable(p("enter"), e);
+					},
+					ondragleave: () => {
+						a(e).itemIdentifier(I(f)) !== r && i.draggable(p("leave"), e);
+					}
+				} : {}
+			};
+			return m;
+		}, ne = () => {
+			let t = a(e).itemOptions({ item: { tid: P(c) } }), r = a(e).itemOptions({ item: { tid: P(l) } });
+			return C("div", { class: i.$attrs.class }, [
+				C("div", { class: i.listClass }, P(x).reduce((t, n, r) => t.concat(K(a(e).itemOptions({
+					index: r,
+					item: n
+				}))), [])),
+				C("div", {
+					...n(t, ["class"]),
+					class: R(u(t.class, i.listDefaultClass).string, u(i.listDefaultClass).string)
+				}, [K(t)]),
+				C("div", {
+					...n(r, ["class"]),
+					class: R(u(r.class, i.listTemplateClass).string, u(i.listTemplateClass).string)
+				}, [K(r)]),
+				C("div", { class: i.listPaginationClass }, [a(e).paginationComponent()])
+			]);
+		}, G = (e) => {
+			try {
+				return e.props.ReactiveView || e.props.setup.ReactiveView;
+			} catch {
+				return !1;
+			}
+		}, K = (t) => {
+			let o = a(e).activeDisplay(t), s = typeof o == "function" ? o(t) : o, { class: c, ...l } = typeof i.itemProps == "function" ? i.itemProps(t) : i.itemProps, { class: d } = a(e).pageProps(t), { class: f, ...p } = {
+				...t,
+				...l
+			}, m = R(u(s.props.class, f, c, d).string, u(c, d).string), h = typeof i.itemSlots == "function" ? i.itemSlots(t) : i.itemSlots;
+			try {
+				return G(s) ? C(s, {
+					...p,
+					class: m
+				}, h) : G(s.type) ? C(s, {
+					...p,
+					...n(s.props, "class"),
+					class: m
+				}, s.children) : C(r, {
+					...p,
+					...n(s.props, "class"),
+					class: m
+				}, () => s.children);
+			} catch (e) {
+				return console.log("component builder failed:", e, s), C("div", t, "Component failed to mount!");
+			}
+		}, q = (e) => {
+			try {
+				return P(p) && a(p).pagination?.(e) || {};
+			} catch {
+				return {};
+			}
+		}, J = () => {
+			if (i.paginator) {
+				let { component: t = Ne, data: n, props: r } = i.paginator?.props?.ReactiveView ? {
+					component: i.paginator,
+					props: { list: e }
+				} : i.paginator?.component || i.paginator?.data || i.paginator?.props ? {
+					...i.paginator,
+					props: {
+						list: i.paginator.list ?? e,
+						...i.paginator.props
+					}
+				} : { props: { list: e } };
+				return C(t, {
+					...r,
+					instance: p,
+					...n === void 0 ? {} : { data: n }
+				});
+			}
+		}, Y = (t) => C("button", {
+			ref: m,
+			class: "btn btn-sm btn-success text-white uppercase",
+			onClick: () => {
+				let n = a(e).defaultComponent(t);
+				if (n) return a(e).add(n);
+			},
+			disabled: !P(a(e).isValid)
+		}, "add"), X = (t) => {
+			let n = a(e).getComponent(a(e).itemIdentifier(t));
+			return C("button", {
+				ref: h,
+				class: "btn btn-sm btn-error text-white uppercase",
+				onClick: () => {
+					if (n) return a(e).remove(n);
+				},
+				disabled: !n || n === s[P(c)] || n === s[P(l)]
+			}, "delete");
+		}, Z = () => {
+			F(d, (t, n = []) => {
+				t.forEach((t) => {
+					setTimeout(() => {
+						let n = a(e).getComponent(t), r = i.whenItemActive ?? a(n).whenItemActive;
+						n && r && r({
+							list: e,
+							data: a(n).model.getData(),
+							component: n
+						});
+					});
+				}), n.forEach((t) => {
+					setTimeout(() => {
+						let n = a(e).getComponent(t), r = i.whenItemInactive ?? a(n).whenItemInactive;
+						n && r && r({
+							list: e,
+							data: a(n).model.getData(),
+							component: n
+						});
+					});
+				});
+			}, { immediate: !0 });
+		}, re = () => {
+			let t = (t, n = "") => {
+				if (typeof n == "string") return t.find((t) => t[a(e).itemKey(t)] === n || t[""] === n);
+				if (typeof n == "function") return t.find((e) => n(e));
+				if (["Object"].includes(n.constructor.name)) return t.find((t) => t[a(e).itemKey(t)] === n.id || t[a(e).itemKey(t)] === n[a(e).itemKey(n)]);
+				if (["Number"].includes(n.constructor.name)) return n > -1 ? t[n > t.length ? t.length - 1 : n] ?? t[t.length - 1] : t[t.length - Math.abs(n)] ?? t[0];
+			};
+			F(x, (n, r) => {
+				if (r) {
+					if (n.length > r.length) d.value = [a(e).itemIdentifier(i.addToStart ? t(n, 0) : t(n, -1))];
+					else if (n.length < r.length) {
+						let i = r.findIndex((t) => a(e).itemIdentifier(t) === P(d)[0]);
+						i > -1 && (d.value = [a(e).itemIdentifier(t(n, i) ?? t(n, -1)) ?? P(c)]);
+					}
+				} else d.value = [a(e).itemIdentifier(t(n, i.selected))];
+			}, { immediate: !0 });
+		};
+		return k(() => {
+			Z(), i.selectable && typeof i.selected != "boolean" && re();
+		}), {
+			template: ne,
+			displayComponent: D,
+			defaultDisplayComponent: E,
+			activeDisplay: O,
+			defaultComponent: A,
+			activeComponent: H,
+			activeItemIdentifier: W,
+			itemKey: S,
+			itemIdentifier: w,
+			itemOptions: te,
+			getComponent: T,
+			pageProps: q,
+			paginationComponent: J,
+			addButton: Y,
+			deleteButton: X,
+			map: j,
+			add: L,
+			remove: z,
+			set: ee,
+			unset: B,
+			finalize: V,
+			isValid: v,
+			defaultIdRef: c,
+			selectionsRef: d,
+			components: s,
+			id: o
+		};
+	}
+}), Fe = l({
+	modelName: "CustomTableRow",
+	setup: (e, t, n) => {
+		let r = a(a(e).$attrs.list);
+		return {
+			template: () => {
+				let t = P(r.row).props["data-row-class"] ?? "";
+				return C("div", {
+					"data-table-row": !0,
+					class: R(u("relative grid grid-cols-subgrid col-span-full bg-(--colors-white)", t).string, u(t).string, a(r).rowLineClass(), a(r).columnLineClass("[&>*:nth-child(n+3):not(:last-child)]:after:-inset-y-(--row-padding-y,0.75rem) [&>.sticky]:-my-(--row-padding-y,0.75rem) [&>.sticky]:py-(--row-padding-y,0.75rem)"), a(r).controlsInsetClass())
+				}, [
+					a(r).rowStart?.({ row: e }),
+					a(r).leftRowColumnControls({ row: e }),
+					a(e).rowElement().children,
+					a(r).rightRowColumnControls({ row: e }),
+					a(r).rowEnd?.({ row: e })
+				]);
+			},
+			rowCollapseButton: () => a(r).rowCollapseButton(e, t, n),
+			rowCheckbox: () => a(r).rowCheckbox(e, t, n),
+			rowElement: () => {
+				let i = () => C("div", { class: "grid grid-cols-[1fr_auto] text-red-500" }, [S("Extend [ rowElement ] Component")]);
+				if (typeof a(r).rowElement != "function") return i();
+				try {
+					return a(r).rowElement(e, t, n);
+				} catch (e) {
+					return console.error("failed to render row-element", e), i();
+				}
+			},
+			rowMenuButton: () => a(r).rowMenuButton(e, t, n),
+			whenCheckboxClicked: (t) => {
+				t.stopPropagation();
+				let n = a(r).itemIdentifier(a(e).model.getData()), i = P(a(r).checkedRef);
+				i.has(n) ? i.delete(n) : i.add(n);
+			},
+			checkedRef: y(() => P(a(r).checkedRef).has(a(r).itemIdentifier(a(e).model.getData())))
+		};
+	}
+}), Ie = l({
+	modelName: "Popover",
+	props: {
+		autoClose: o({
+			type: Boolean,
+			default: !0
+		}),
+		timeout: o({
+			default: 0,
+			validator: (e) => /^\d+$/.test(e)
+		}),
+		containerClass: o(),
+		boundary: o({ type: [
+			Function,
+			Object,
+			String
+		] })
+	},
+	setup(e, t, n) {
+		let r = `component_${U()}`, i = N(), o = N(0), s, c = () => {
+			let e = i.value;
+			if (!e?.visible || !e.container) return;
+			e.alignOverlay();
+			let t = e.container;
+			(window.scrollX || window.scrollY) && (t.style.top = `${parseFloat(t.style.top) - window.scrollY}px`, t.style.insetInlineStart = `${parseFloat(t.style.insetInlineStart) - window.scrollX}px`);
+			let n = e.target.getBoundingClientRect(), r = t.getBoundingClientRect(), a = t.offsetWidth, o = r.left + (r.width - a) / 2, s = getComputedStyle(t), c = (parseFloat(s.getPropertyValue("--p-popover-gutter")) || 0) + (parseFloat(s.borderTopLeftRadius) || 0), u = n.left + n.width / 2;
+			if (a > c * 2) {
+				let e = u - o < c ? Math.max(u - c, 0) - o : Math.max(0, Math.min(u + c, document.documentElement.clientWidth) - (o + a));
+				t.style.insetInlineStart = `${parseFloat(t.style.insetInlineStart) + e}px`, o += e;
+			}
+			let d = l(e.target)?.getBoundingClientRect();
+			if (d) {
+				let e = parseFloat(s.getPropertyValue("--p-popover-gutter")) || 0, r = t.offsetHeight, i = t.classList.contains("p-popover-flipped"), l = n.bottom + e + r <= d.bottom, f = n.top - e - r >= d.top;
+				!i && !l && f ? (t.style.top = `${n.top - r}px`, t.classList.add("p-popover-flipped"), t.setAttribute("data-p-popover-flipped", "true")) : i && !f && l && (t.style.top = `${n.bottom}px`, t.classList.remove("p-popover-flipped"), t.removeAttribute("data-p-popover-flipped"));
+				let p = Math.max(Math.min(0, d.right - (o + a)), d.left - o);
+				a > c * 2 && (p = Math.min(Math.max(p, u + c - (o + a)), u - c - o)), t.style.insetInlineStart = `${parseFloat(t.style.insetInlineStart) + p}px`, o += p;
+			}
+			t.style.setProperty("--p-popover-arrow-left", `${Math.max(0, n.left - o)}px`);
+		}, l = (e) => {
+			let t = P(n.boundary);
+			return typeof t == "function" ? t(e) : typeof t == "string" ? e.closest(t) : t;
+		}, d = () => {
+			s = new ResizeObserver(() => requestAnimationFrame(c)), s.observe(i.value.container);
+		}, f = () => {
+			s?.disconnect(), s = null;
+		};
+		return {
+			template: () => {
+				let t = a(e).trigger();
+				return C("div", { id: r }, [C(V, E({ onClick: (e) => {
+					n.autoClose || e.stopPropagation();
+				} }, n.$attrs, {
+					class: "fixed!",
+					style: {
+						"--p-popover-arrow-offset": `${o.value / 2}px`,
+						"--p-popover-border-radius": "var(--radius-lg)",
+						"--p-popover-border-color": "var(--colors-DCE1E8)",
+						"--p-popover-shadow": "0 2px 8px 0 rgba(18,55,105,0.12)"
+					},
+					onShow: d,
+					onHide: f,
+					ref: i
+				}), {
+					...n.$slots,
+					container: () => n.$slots.default ? n.$slots.default({ component: e }) : a(e).container()
+				}), C(t.type, E(t.props, { onClick: (e) => {
+					o.value = e.currentTarget.offsetWidth, i.value.toggle(e), n.timeout && setTimeout(() => i.value.hide(), n.timeout);
+				} }), t.children)]);
+			},
+			trigger: () => a(e).menuButton({
+				label: "Popover",
+				class: "w-max normal-case"
+			}),
+			container: () => C("div", { class: R(u({ "rounded-[calc(var(--radius-lg)-1px)] overflow-hidden": !0 }, n.containerClass).string, n.containerClass) }, [a(e).body()]),
+			body: () => C("span", { class: "px-2" }, [S("Your content here!")]),
+			menuButton: ({ class: e = "", ...t } = {}, n = {}) => C(q, E({
+				unstyled: !0,
+				class: R(u("flex justify-start h-8.5 w-full rounded-none", e).string, u(e).string)
+			}, t), n),
+			popoverRef: i
+		};
+	}
+}), Le = l({
+	modelName: "CustomTable",
+	props: {
+		empty: o({ type: Object }),
+		isSelectable: o({
+			type: Boolean,
+			default: !0
+		}),
+		isCollapsible: o({ type: Boolean }),
+		hasMenu: o({
+			type: Boolean,
+			default: !0
+		}),
+		hasHeaderMenu: o({ type: Boolean }),
+		headerClass: o(),
+		columnLines: o({ type: Boolean }),
+		rowLines: o({
+			type: Boolean,
+			default: !0
+		})
+	},
+	defaultDisplayComponent: !1,
+	displayComponent: Fe,
+	setup(e, t, r) {
+		let o = N({
+			children: [],
+			props: {}
+		}), s = N(/* @__PURE__ */ new Set()), c = N(/* @__PURE__ */ new Set()), l = y(() => {
+			let t = a(e).model.getData();
+			return t.length && t.every((t) => P(a(e).checkedRef).has(a(e).itemIdentifier(t)));
+		}), d = y(() => {
+			let t = a(e).model.getData();
+			return t.length && t.every((t) => P(a(e).expandedRef).has(a(e).itemIdentifier(t)));
+		}), f = y(() => !P(l) && !!P(s).size), p = () => {
+			a(e).model.getData().forEach((t) => {
+				P(a(e).checkedRef).add(a(e).itemIdentifier(t));
+			});
+		}, h = () => {
+			a(e).model.getData().forEach((t) => {
+				P(a(e).checkedRef).delete(a(e).itemIdentifier(t));
+			});
+		}, _ = (e) => r.columnLines ? `[&>.sticky]:z-1 [&>.sticky:not(:last-child):not(:has(~.sticky:not(:last-child)))]:-mr-[calc(var(--column-gap,1rem)/2)] [&>.sticky:not(:last-child):not(:has(~.sticky:not(:last-child)))]:shadow-[1px_0_0_var(--colors-EDEFF2)] [&>*:nth-child(n+3):not(:last-child):not(.sticky)]:relative [&>*:nth-child(n+3):not(:last-child)]:after:absolute [&>*:nth-child(n+3):not(:last-child)]:after:w-px [&>*:nth-child(n+3):not(:last-child)]:after:bg-(--colors-EDEFF2) [&>*:nth-child(n+3):not(:last-child)]:after:left-[calc(var(--column-gap,1rem)/-2)] ${e}` : "", b = () => r.rowLines ? "border-(--colors-EDEFF2) border-b last:border-b-0 [&:has(+:not([data-table-row]))]:border-b-0 [[data-table-row]_&]:border-b-0 [[data-table-row]_*_&]:border-t" : "", x = () => R(r.isCollapsible || r.isSelectable ? "" : "[&>:nth-child(2)]:-ml-[calc(var(--column-gap,1rem)-0.75rem)]", r.hasMenu ? "" : "[&>:nth-last-child(2)]:-mr-[calc(var(--column-gap,1rem)-0.75rem)]"), T = (e, t, n) => t ? e.props?.[`data-col-${t}`] ?? n : e.props ?? {}, D = () => C("div", {
+			"data-table": !0,
+			class: R("flex flex-col", P(o).props.class)
+		}, [a(e).tableHead(), a(e).tableBody()]), O = () => {
+			if (a(e).model.getData().length) {
+				let t = a(e).rowCheckbox({ row: e }), i = a(e).rowMenuButton({ row: e }), s = a(e).leftRowColumnControls({ row: e }), c = a(e).rightRowColumnControls({ row: e }), l = P(o).props["data-header-row-class"] ?? "";
+				return C("div", { class: R(u({ "sticky top-0 z-10 bg-(--colors-F9FAFC) grid grid-cols-subgrid col-span-full": !0 }, r.headerClass, l).string, u(r.headerClass, l).string, _("[&>*:nth-child(n+3):not(:last-child)]:after:inset-y-0"), x()) }, [
+					C(s.type, s.props, { default: () => [C("div", { class: "h-full bg-inherit flex items-center gap-x-2" }, [a(e).rowCollapseButton({}), t && C(t.type, E(n(t.props, ["onChange"]), { onChange: (e) => e.target.checked ? p() : h() }), t.children)])] }),
+					P(o).children.map((e) => T(e, "element") ?? w(T(e, "type", "div"), { class: R(u(T(e).class).string, u(T(e, "class")).string) }, T(e, "title"))),
+					C(c.type, c.props, { default: () => [C("div", { class: "h-full bg-inherit flex items-center" }, [i && C(i, E(n(i.props, ["class"]), { class: R(i.props.class, u({ hidden: !r.hasHeaderMenu }).string) }), i.children)])] })
+				]);
+			}
+		}, k = () => {
+			if (!a(e).model.getData().length && r.empty) return [a(e).emptyTableElement()];
+			let [n, i, o, s] = a(t).template().children;
+			return [
+				n.children,
+				i.children,
+				o.children,
+				a(e).tablePagination(s.children),
+				a(e).tableActionElement()
+			];
+		}, A = (e) => {
+			if (e?.some(Boolean)) return C("div", { class: "sticky bottom-0 z-10 col-span-full px-3 py-2 border-t border-(--colors-EDEFF2) bg-(--colors-white) text-sm" }, [C("div", { class: "sticky right-3 ml-auto w-max" }, [e])]);
+		}, j = (...t) => C("div", { class: R("sticky left-0 bg-inherit self-stretch", r.isCollapsible || r.isSelectable ? "px-3" : "px-0") }, [C("div", { class: "h-full flex items-center gap-x-2 bg-inherit" }, [a(e).rowCollapseButton(...t), a(e).rowCheckbox(...t)])]), M = (...t) => C("div", { class: R("sticky right-0 bg-inherit self-stretch", r.hasMenu ? "px-3" : "px-0") }, [C("div", { class: "h-full flex items-center gap-x-2 bg-inherit" }, [a(e).rowMenuButton(...t)])]), I = () => {
+			let e = g.on(r.empty);
+			return C("div", { class: {
+				hidden: !e.get(),
+				"py-8 px-3 flex flex-col gap-y-3 col-span-full": !0
+			} }, [
+				C("div", { class: "text-(--colors-0F0F12) text-center text-xl not-italic font-semibold leading-6 tracking-[-0.4px]" }, [e.get("title")]),
+				C("div", { class: "text-(--colors-494F62) text-center text-xs not-italic font-normal leading-3.5 tracking-[-0.24px]" }, [e.get("description")]),
+				C("div", { class: "hidden" }, [a(t).template()])
+			]);
+		}, L = ({ row: t } = {}) => {
+			if (r.hasMenu) return C(Ie, {
+				boundary: "[data-table]",
+				setup: (n, r) => ({
+					trigger: () => C(q, {
+						unstyled: !0,
+						class: "p-0 size-6 text-(--colors-A0A3B4) shrink-0"
+					}, { icon: () => C(_e, null, null) }),
+					body: () => C(v, null, [a(n).menuButton({
+						label: "Edit",
+						class: "normal-case",
+						onClick: async () => {
+							await a(e).handleEdit({ row: t });
+						}
+					}, { icon: () => C(me, { class: "text-(--colors-818898) shrink-0" }, null) }), a(n).menuButton({
+						label: "Delete",
+						class: "normal-case",
+						onClick: () => i(C(ie, {
+							setup: () => ({ confirmationTitle: () => "Delete" }),
+							whenOk: async () => {
+								await a(e).handleDelete({ row: t }), a(e).refresh();
+							}
+						}, null))
+					}, { icon: () => C(de, { class: "text-(--colors-818898) shrink-0" }, null) })])
+				})
+			}, null);
+		}, z = (t, n) => {
+			if (P(c).has(t) !== n) {
+				P(c)[n ? "add" : "delete"](t);
+				let r = a(e).getComponent(t);
+				r && a(e).handleCollapsible({
+					row: r,
+					expanded: n
+				});
+			}
+		}, ee = ({ row: t } = {}) => {
+			if (r.isCollapsible) {
+				let n = t && a(e).itemIdentifier(a(t).model.getData()), r = t ? P(c).has(n) : P(d);
+				return C(q, {
+					unstyled: !0,
+					class: "p-0 size-6 text-(--colors-A0A3B4) shrink-0",
+					onClick: () => {
+						t ? z(n, !r) : a(e).model.getData().forEach((t) => z(a(e).itemIdentifier(t), !r));
+					}
+				}, { icon: () => C(ce, { class: {
+					"transition-transform duration-200": !0,
+					"-rotate-90": !r
+				} }, null) });
+			}
+		}, V = ({ row: t } = {}) => {
+			if (r.isSelectable) return C(m, {
+				type: "checkbox",
+				size: "large",
+				indeterminate: t === e && P(f),
+				data: () => P(t === e ? a(e).isAllSelected : a(t).checkedRef),
+				onChange: (n) => {
+					let r = a(e).itemIdentifier(a(t).model.getData());
+					P(a(e).checkedRef)[n.target.checked ? "add" : "delete"](r);
+				}
+			}, null);
+		}, H = () => {
+			if (P(a(e).checkedRef).size) return C("div", { class: "sticky bottom-0 z-20 col-span-full" }, [C("div", { class: "sticky left-1/2 w-0" }, [C("div", { class: {
+				"absolute -translate-x-1/2 bg-white rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.12)] px-5 py-3 flex items-center w-max": !0,
+				"bottom-16": !!P(r.$attrs.paginator),
+				"bottom-8": !P(r.$attrs.paginator)
+			} }, [
+				C("span", { class: "font-medium" }, [P(a(e).checkedRef).size, S(" Selected")]),
+				C(B, { layout: "vertical" }, null),
+				a(e).bulkSelectAllButton(),
+				C(B, { layout: "vertical" }, null),
+				a(e).bulkClearAllButton(),
+				a(e).bulkExportButton(),
+				C(B, { layout: "vertical" }, null),
+				a(e).bulkDeleteButton(),
+				C(B, { layout: "vertical" }, null),
+				a(e).bulkCloseButton()
+			])])]);
+		}, U = () => C("button", {
+			class: {
+				"cursor-pointer hover:text-warning duration-300": !0,
+				"text-(--colors-primary-500)": P(l)
+			},
+			onClick: () => p()
+		}, [S("Select all")]), W = () => C("button", {
+			class: "cursor-pointer hover:text-warning duration-300",
+			onClick: () => h()
+		}, [S("Clear all")]), te = () => C("button", {
+			class: "flex items-center gap-x-1 cursor-pointer hover:text-error duration-300",
+			onClick: async () => {
+				i(C(ie, {
+					setup: () => ({ confirmationTitle: () => "Delete" }),
+					whenOk: async () => {
+						await a(e).handleBulkDelete(Array.from(P(a(e).checkedRef))), h(), a(e).refresh();
+					}
+				}, null));
+			}
+		}, [S("Delete")]), ne = () => C(v, null, [C(B, { layout: "vertical" }, null), C("button", {
+			class: "cursor-pointer hover:text-warning duration-300",
+			onClick: async () => {
+				await a(e).handleBulkExport(Array.from(P(a(e).checkedRef))), h();
+			}
+		}, [S("Export")])]), G = () => C("button", {
+			class: "cursor-pointer text-gray-400 hover:text-gray-600 duration-300",
+			onClick: () => h()
+		}, [C(X, { class: "size-4" }, null)]), K = () => {}, J = () => {}, Y = (e) => {
+			if (e && a(e).rowElement) try {
+				return a(e).rowElement().children.default();
+			} catch (t) {
+				try {
+					return a(e).rowElement();
+				} catch (n) {
+					console.warn(`[${r.modelName}]: failed to set table columns`, {
+						e1: t,
+						e2: n
+					}, a(e));
+				}
+			}
+		};
+		return F(() => Y(a(e, Function).defaultComponent()), (e) => {
+			e && (o.value = e);
+		}), {
+			template: D,
+			tableHead: O,
+			tableBody: k,
+			tablePagination: A,
+			columnLineClass: _,
+			rowLineClass: b,
+			controlsInsetClass: x,
+			leftRowColumnControls: j,
+			rightRowColumnControls: M,
+			emptyTableElement: I,
+			tableActionElement: H,
+			rowMenuButton: L,
+			rowCollapseButton: ee,
+			rowCheckbox: V,
+			bulkSelectAllButton: U,
+			bulkClearAllButton: W,
+			bulkDeleteButton: te,
+			bulkExportButton: ne,
+			bulkCloseButton: G,
+			selectAll: p,
+			deselectAll: h,
+			checkedRef: s,
+			expandedRef: c,
+			isAllSelected: l,
+			isAllExpanded: d,
+			isIndeterminate: f,
+			row: o,
+			refresh: K,
+			handleCollapsible: J
+		};
+	}
+}, Pe), Re = l({
+	props: {
+		defaultData: o(),
+		filled: o({ type: Boolean }),
+		timezone: o({ type: [Boolean, String] }),
+		time: o({ type: Boolean }),
+		date: o({
+			type: Boolean,
+			default: !0
+		}),
+		type: o({
+			type: String,
+			default: "date",
+			validator: (t) => {
+				let n = [
+					"date",
+					"dates",
+					"range"
+				];
+				return n.includes(t) || e(`[Datetime] invalid type. Must be one of ${n.join(", ")}.`);
+			}
+		}),
+		options: o({
+			type: Object,
+			default: {}
+		}),
+		minDate: o({
+			type: [Boolean, Date],
+			default: () => /* @__PURE__ */ new Date(),
+			validator: (e) => ["Boolean", "Date"].includes(e?.constructor.name) && e !== !0
+		}),
+		inputClass: o(),
+		panelClass: o()
+	},
+	defaultData: (e) => P(e.defaultData) ?? {
+		date: void 0,
+		dates: [],
+		range: {}
+	}[P(e.type)],
+	setup(e, t, n) {
+		let r = y(() => {
+			let t = a(e).model.getData();
+			if (c.value === "range") {
+				let n = g.on(t), r = n.get(a(e).dataPath("start")), i = n.get(a(e).dataPath("end"));
+				if (r && i) return [K(r), K(i)];
+			} else if (c.value === "multiple") return Array.isArray(t) ? t.map((e) => K(e)) : [];
+			else if (typeof t == "string") return o.value ? G(t, "HH:mm", /* @__PURE__ */ new Date()) : K(t);
+		}), i = y(() => !!P(n.time)), o = y(() => P(n.date) === !1), s = (e) => o.value ? te(e, "HH:mm") : i.value && typeof P(n.timezone) == "string" ? L(e, P(n.timezone), "yyyy-MM-dd'T'HH:mm:ssXXX") : ne(e, { representation: i.value ? "complete" : "date" }), c = y(() => ({
+			date: "single",
+			dates: "multiple",
+			range: "range"
+		})[P(n.type)]), l = N(), d = !1, f = (e) => e.target.tagName === "INPUT" && !e.target.closest(".p-datepicker-panel");
+		return { template: () => {
+			let t = o.value ? "hh:mm am" : `mm/dd/yyyy${i.value ? " hh:mm am" : ""}`;
+			return C(ee, E({
+				ref: l,
+				onMousedown: (e) => {
+					d = f(e) && l.value.overlayVisible;
+				},
+				onClick: (e) => {
+					f(e) && d && (l.value.overlayVisible = !1);
+				},
+				fluid: !0,
+				size: "small",
+				appendTo: "self",
+				hideOnRangeSelection: !0,
+				selectOtherMonths: !0,
+				manualInput: !1,
+				dateFormat: "mm/dd/yy",
+				showTime: i.value,
+				timeOnly: o.value,
+				hourFormat: "12"
+			}, P(n.options), n.$attrs, { panelClass: ["min-w-0! w-max!", P(n.panelClass)] }, P(n.minDate) && !o.value ? { minDate: P(n.minDate) } : {}, {
+				inputClass: R(u({ "bg-(--colors-F5F6F8)!": P(n.filled) }).string, u(P(n.inputClass)).string),
+				selectionMode: c.value,
+				placeholder: `${t}${c.value === "range" ? ` - ${t}` : c.value === "multiple" ? `, ..., ${t}` : ""}`,
+				modelValue: r.value,
+				"onUpdate:modelValue": (t) => {
+					if (t) if (c.value === "range") {
+						let [n, r] = t;
+						n && r && a(e).model.replaceData({
+							[a(e).dataPath("start")]: s(n),
+							[a(e).dataPath("end")]: s(r)
+						});
+					} else c.value === "multiple" ? a(e).model.replaceData(t.map(s)) : a(e).model.replaceData(s(t));
+					else a(e).model.replaceData();
+				}
+			}), null);
+		} };
+	}
+}), ze = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function Be(e, t) {
+	return A(), b("svg", ze, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"
+	}, null, -1)]]);
+}
+var Ve = T({
+	name: "mdi-trash-can-outline",
+	render: Be
+}), He = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function Ue(e, t) {
+	return A(), b("svg", He, [...t[0] ||= [x("path", {
+		fill: "currentColor",
+		d: "M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z"
+	}, null, -1)]]);
+}
+var We = T({
+	name: "mdi-drag-vertical",
+	render: Ue
+}), Ge = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==", Q = null, Ke = (e) => {
+	!e?.setDragImage || typeof Image > "u" || (Q || (Q = new Image(), Q.src = Ge), e.setDragImage(Q, 0, 0));
+}, qe = l({
+	modelName: "DraggableList",
+	defaultData: [],
+	setup(e, t, n) {
+		let r = N(null), i = N(null), o = (e) => r.value !== null && e !== r.value && e !== r.value + 1, s = (e, t) => {
+			r.value = t, e.dataTransfer && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", t.toString()), Ke(e.dataTransfer));
+		}, c = (e, t) => {
+			e.preventDefault(), i.value = t === r.value ? null : {
+				type: "item",
+				index: t
+			};
+		}, l = (e, t) => {
+			e.preventDefault(), i.value = o(t) ? {
+				type: "gap",
+				index: t
+			} : null;
+		}, u = (t, n) => {
+			if (t.preventDefault(), r.value !== null && r.value !== n) {
+				let t = [...a(e).model.getData() || []];
+				[t[r.value], t[n]] = [t[n], t[r.value]], a(e).model.replaceData(t);
+			}
+			f();
+		}, d = (t, n) => {
+			if (t.preventDefault(), o(n)) {
+				let t = [...a(e).model.getData() || []], [i] = t.splice(r.value, 1);
+				t.splice(n > r.value ? n - 1 : n, 0, i), a(e).model.replaceData(t);
+			}
+			f();
+		}, f = () => {
+			r.value = null, i.value = null;
+		}, p = (t) => {
+			let n = [...a(e).model.getData() || []];
+			n.splice(t, 1), a(e).model.replaceData(n);
+		}, m = () => {
+			let t = a(e).model.getData() || [];
+			return C("div", { class: "flex flex-col" }, [t.map((t, n) => [a(e).gap(n), a(e).itemRow(t, n)]), t.length ? a(e).gap(t.length) : !1]);
+		};
+		return {
+			template: m,
+			render: m,
+			gap: (t) => {
+				let n = i.value?.type === "gap" && i.value.index === t;
+				return C("div", {
+					key: `gap-${t}`,
+					"data-drop-gap": t,
+					onDragover: (n) => a(e).onGapDragOver(n, t),
+					onDrop: (n) => a(e).onGapDrop(n, t),
+					class: "mx-1 h-4 shrink-0 flex items-center"
+				}, [C("div", { class: {
+					"h-1 w-full rounded-full transition-colors": !0,
+					"bg-(--colors-DE851A) shadow-[0_0_0_3px_rgb(222_133_26/0.25)]": n
+				} }, null)]);
+			},
+			itemRow: (t, n) => {
+				let o = r.value === n, s = i.value?.type === "item" && i.value.index === n;
+				return C("div", {
+					key: t.id || t.uuid || `new-${n}`,
+					"data-drop-item": n,
+					draggable: "true",
+					onDragstart: (t) => a(e).onDragStart(t, n),
+					onDragover: (t) => a(e).onDragOver(t, n),
+					onDrop: (t) => a(e).onDrop(t, n),
+					onDragend: (t) => a(e).onDragEnd(t),
+					class: {
+						"px-3 flex items-center gap-x-3 bg-white border rounded shadow-sm cursor-move transition-all": !0,
+						"border-[#DCE1E8]": !s,
+						"opacity-40 border-dashed": o,
+						"border-(--colors-DE851A) ring-1 ring-inset ring-(--colors-DE851A) shadow-md": s
+					}
+				}, [
+					a(e).dragHandle(),
+					a(e).indexBadge(n),
+					C("div", { class: "grow flex items-center overflow-hidden" }, [a(e).itemContent(t, n)]),
+					a(e).removeAction(t, n)
+				]);
+			},
+			dragHandle: () => C("div", { class: "text-(--colors-8B8CA0) grid place-items-center cursor-grab active:cursor-grabbing" }, [C(We, { class: "size-6" }, null)]),
+			indexBadge: (e) => C("div", { class: "w-5 h-5 rounded-full bg-(--colors-primary-500) text-white flex items-center justify-center text-[10px] font-bold shrink-0" }, [e + 1]),
+			itemContent: (e, t) => n.$slots.default ? n.$slots.default({
+				item: e,
+				index: t
+			}) : C("div", { class: "text-sm font-medium text-(--colors-303136) truncate ml-2" }, [e.text || e.name || e.title || `Item ${t + 1}`]),
+			removeAction: (t, n) => C("button", {
+				type: "button",
+				onClick: () => a(e).onRemove(n),
+				class: "text-gray-400 hover:text-error duration-300 cursor-pointer",
+				"aria-label": "Remove item"
+			}, [C(Ve, { class: "size-6" }, null)]),
+			onDragStart: s,
+			onDragOver: c,
+			onGapDragOver: l,
+			onDrop: u,
+			onGapDrop: d,
+			onDragEnd: f,
+			onRemove: p,
+			dragIndex: r,
+			dropTarget: i
+		};
+	}
+}), $ = (e, { name: t } = {}) => new Proxy(e, { get: (e, n, r) => n === "unsigned" ? $(Object.assign({}, e, { allowMinus: !1 }), { name: t }) : n === "edit" ? (t) => Object.assign({}, e, t) : n === "name" ? t : Reflect.get(e, n, r) }), Je = {
+	currency: $({
+		alias: "currency",
+		prefix: "$",
+		autoUnmask: !0,
+		unmaskAsNumber: !0,
+		clearMaskOnLostFocus: !1,
+		rightAlign: !1,
+		numericInput: !0
+	}, { name: "Currency" }),
+	percentage: $({
+		alias: "numeric",
+		suffix: " %",
+		autoUnmask: !0,
+		unmaskAsNumber: !0,
+		clearMaskOnLostFocus: !1,
+		rightAlign: !1,
+		max: 100,
+		min: 0
+	}, { name: "Percentage" }),
+	pounds: $({
+		alias: "numeric",
+		suffix: " lbs",
+		autoUnmask: !0,
+		unmaskAsNumber: !0,
+		clearMaskOnLostFocus: !1,
+		rightAlign: !1
+	}, { name: "Pounds" }),
+	integer: $({
+		alias: "integer",
+		autoUnmask: !0,
+		unmaskAsNumber: !0,
+		clearMaskOnLostFocus: !1,
+		numericInput: !0,
+		rightAlign: !1
+	}, { name: "Integer" }),
+	float: $({
+		alias: "currency",
+		autoUnmask: !0,
+		unmaskAsNumber: !0,
+		clearMaskOnLostFocus: !1,
+		rightAlign: !1,
+		numericInput: !0,
+		digits: 2
+	}, { name: "Float" }),
+	number: $({
+		alias: "currency",
+		autoUnmask: !0,
+		unmaskAsNumber: !0,
+		clearMaskOnLostFocus: !1,
+		rightAlign: !1,
+		numericInput: !0,
+		digits: 2
+	}, { name: "Number" }),
+	phone: $({
+		mask: "(999) 999 - 9999",
+		placeholder: "0"
+	}, { name: "Phone number" })
+}, Ye = Object.assign(Je, { format: (e, t) => new Proxy(Je, { get: (n, r) => W.format(String(e ?? ""), Object.assign({}, Je[r], t)) }) });
+//#endregion
+export { q as Button, ie as ConfirmationModal, ae as CustomAlert, Z as CustomButton, re as CustomModal, Le as CustomTable, Fe as CustomTableRow, Re as Datetime, qe as DraggableList, h as Editor, m as Input, Pe as ItemsList, p as Label, Ne as ListPagination, Ye as Masks, Ie as Popover, f as Select };