@razaman2/reactive-view 0.2.0 → 0.2.1

package/dist/components.mjs

@@ -1,7 +1,7 @@
-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 { _ as e, b as t, c as n, f as r, g as i, i as a, l as o, m as s, n as c, r as l, t as u, v as d } from "./src-DwXft6y4.mjs";
+import { t as f } from "./Select-x96YoTl5.mjs";
+import { t as p } from "./Label-DD9yGa7V.mjs";
+import { r as m, t as h } from "./Editor-DMCekNFl.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";
@@ -13,17 +13,17 @@ 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({
+var q = n({
 	modelName: "Button",
 	props: {
-		class: o(),
-		buttonClass: o(),
-		split: o({ type: Boolean }),
-		options: o({
+		class: c(),
+		buttonClass: c(),
+		split: c({ type: Boolean }),
+		options: c({
 			type: Array,
 			default: []
 		}),
-		unstyled: o({ type: Boolean })
+		unstyled: c({ type: Boolean })
 	},
 	setup(e, t, n) {
 		return { template: () => {
@@ -54,24 +54,24 @@ function Y(e, t) {
 var X = T({
 	name: "mdi-close",
 	render: Y
-}), Z = l({
+}), Z = n({
 	modelName: "CustomButton",
 	props: {
-		label: o({ type: [Number, String] }),
-		tag: o({
+		label: c({ type: [Number, String] }),
+		tag: c({
 			type: String,
 			default: "button"
 		}),
-		loading: o({
+		loading: c({
 			type: [Boolean, Function],
 			default: !1
 		}),
-		padding: o({
+		padding: c({
 			type: Boolean,
 			default: !0
 		}),
-		buttonClass: o(),
-		loadingClass: o()
+		buttonClass: c(),
+		loadingClass: c()
 	},
 	setup(e, t, n) {
 		let r = typeof n.loading == "function" ? n.loading : () => n.loading, i = N(!1);
@@ -93,10 +93,10 @@ var X = T({
 			}
 		};
 	}
-}), re = l({
+}), re = n({
 	modelName: "CustomModal",
 	props: {
-		title: o({
+		title: c({
 			type: [
 				Boolean,
 				Number,
@@ -104,63 +104,63 @@ var X = T({
 			],
 			default: "Modal Title"
 		}),
-		persistent: o({ type: Boolean }),
-		header: o({
+		persistent: c({ type: Boolean }),
+		header: c({
 			type: Boolean,
 			default: !0
 		}),
-		actions: o({
+		actions: c({
 			type: Boolean,
 			default: !0
 		}),
-		ok: o({
+		ok: c({
 			type: Boolean,
 			default: !0
 		}),
-		cancel: o({ type: Boolean }),
-		close: o({
+		cancel: c({ type: Boolean }),
+		close: c({
 			type: Boolean,
 			default: !0
 		}),
-		show: o({
+		show: c({
 			type: Boolean,
 			default: !0
 		}),
-		whenOk: o({
+		whenOk: c({
 			type: Function,
 			default: () => {}
 		}),
-		whenCancel: o({
+		whenCancel: c({
 			type: Function,
 			default: () => {}
 		}),
-		whenClose: o({
+		whenClose: c({
 			type: Function,
 			default: () => {}
 		}),
-		whenEscape: o({
+		whenEscape: c({
 			type: Function,
 			default: () => {}
 		}),
-		whenDismiss: o({
+		whenDismiss: c({
 			type: Function,
 			default: () => {}
 		}),
-		whenRouteChange: o({
+		whenRouteChange: c({
 			type: Function,
 			default: () => {}
 		}),
-		class: o(),
-		headerClass: o(),
-		titleClass: o(),
-		actionsClass: o(),
-		backdropClass: o(),
-		timeout: o({
+		class: c(),
+		headerClass: c(),
+		titleClass: c(),
+		actionsClass: c(),
+		backdropClass: c(),
+		timeout: c({
 			default: !1,
 			validator: (e) => typeof e == "number" || e === !1
 		}),
-		modal: o({ type: Boolean }),
-		id: o({ type: [Number, String] })
+		modal: c({ type: Boolean }),
+		id: c({ type: [Number, String] })
 	},
 	setup: (e, t, n) => {
 		j("dialog", e);
@@ -269,61 +269,61 @@ var X = T({
 			modalRef: r
 		};
 	}
-}), ie = l({
+}), ie = n({
 	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 });
+	setup(e, t) {
+		let n = 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,
+				let e = a(t).okButton();
+				if (e) return C(q, E({ unstyled: !0 }, r(e.props, "class"), {
+					loading: n.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"), {
+				let e = a(t).cancelButton();
+				if (e) return C(q, E(r(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({
+			closeButton: () => o(t).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()
+				loading: n,
+				try: () => a(t).triggerOk()
 			})
 		};
 	}
 }, re), ae = {
 	props: {
-		setup: d,
-		title: o({ type: String }),
-		description: o({ type: String }),
-		close: o({
+		setup: t,
+		title: c({ type: String }),
+		description: c({ type: String }),
+		close: c({
 			type: Boolean,
 			default: !0
 		}),
-		timeout: o({
+		timeout: c({
 			default: 3e3,
 			validator: (e) => typeof e == "number" || e === !1
 		})
 	},
-	setup(e, t) {
-		return (e) => C(r, {
+	setup(t, n) {
+		return (t) => C(e, {
 			modelName: "CustomAlert",
-			setup: (n) => {
+			setup: (e) => {
 				let r = {
 					default: C("path", {
 						"stroke-linecap": "round",
@@ -355,17 +355,17 @@ var X = T({
 						"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));
+				}, i = () => /alert-(info|success|warning|error)/.exec(t.$attrs.class)?.shift();
+				return P(t.timeout) && k(() => {
+					setTimeout(() => a(e).hide("timeout"), P(t.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()
+						a(e).alertIcon(),
+						C("div", null, [a(e).alertTitle(), t.$slots.default ? t.$slots.default({ component: e }) : a(e).alertDescription()]),
+						a(e).alertClose()
 					]),
 					alertIcon: () => C("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
@@ -376,21 +376,21 @@ var X = T({
 						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)]),
+					alertTitle: () => C("h3", { class: "font-bold" }, [P(t.title)]),
+					alertDescription: () => C("div", { class: "text-xs" }, [P(t.description)]),
 					alertClose: () => {
-						if (P(e.close)) return C(X, {
+						if (P(t.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")
+							onClick: () => a(e).hide("close")
 						}, null);
 					},
-					hide: (n) => {
-						e.$el.remove(), t.emit("close", n);
+					hide: (e) => {
+						t.$el.remove(), n.emit("close", e);
 					}
 				};
 			}
-		}, e.$slots);
+		}, t.$slots);
 	}
 }, oe = {
 	viewBox: "0 0 24 24",
@@ -520,11 +520,11 @@ var Me = T({
 	render: je
 }), Ne = {
 	props: {
-		setup: d,
+		setup: t,
 		ReactiveView: !0
 	},
 	setup() {
-		return (e) => C(r, {
+		return (t) => C(e, {
 			modelName: "ListPagination",
 			getDefaultData: (e) => ({
 				page: 1,
@@ -634,58 +634,58 @@ var Me = T({
 						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") } : {},
+					pagination: (t) => a(a(e).$attrs.list).tid === t.id ? {} : t.index < i.value || t.index >= o.value ? { class: l("hidden") } : {},
 					load: () => {},
 					to: o,
 					from: i
 				};
 			}
-		}, e.$slots);
+		}, t.$slots);
 	}
-}, Pe = l({
+}, Pe = n({
 	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({
+		isValid: c({ type: [Boolean, Function] }),
+		beforeItemAdding: c({ type: Function }),
+		whenItemAdding: c({ type: Function }),
+		beforeItemDeleting: c({ type: Function }),
+		whenItemDeleting: c({ type: Function }),
+		whenItemActive: c({ type: Function }),
+		whenItemInactive: c({ type: Function }),
+		defaultDisplayComponent: c(),
+		displayComponent: c({ default: () => e }),
+		itemProps: c({
 			type: [Function, Object],
 			default: () => ({})
 		}),
-		itemSlots: o({
+		itemSlots: c({
 			type: [Function, Object],
 			default: () => ({})
 		}),
-		itemKey: o({
+		itemKey: c({
 			type: String,
 			default: "id"
 		}),
-		paginator: o({ type: [Boolean, Object] }),
-		draggable: o({ type: Function }),
-		groupable: o({ type: Function }),
-		sortable: o({
+		paginator: c({ type: [Boolean, Object] }),
+		draggable: c({ type: Function }),
+		groupable: c({ type: Function }),
+		sortable: c({
 			type: Function,
 			default: (e) => e
 		}),
-		filterable: o({
+		filterable: c({
 			type: Function,
 			default: (e) => e
 		}),
-		clickable: o({
+		clickable: c({
 			type: Boolean,
 			default: !0
 		}),
-		selectable: o({
+		selectable: c({
 			type: Boolean,
 			default: !0
 		}),
-		selected: o({
+		selected: c({
 			type: [
 				Boolean,
 				Function,
@@ -695,51 +695,51 @@ var Me = T({
 			],
 			default: 0
 		}),
-		duplicate: o({
+		duplicate: c({
 			type: Function,
 			default: () => !1
 		}),
-		addToStart: o({
+		addToStart: c({
 			type: Boolean,
 			default: !0
 		}),
-		multiple: o({ type: Boolean }),
-		"data:callback_key": o({ type: [
+		multiple: c({ type: Boolean }),
+		"data:callback_key": c({ type: [
 			Boolean,
 			Function,
 			String
 		] }),
-		listPaginationClass: o(),
-		listDefaultClass: o(),
-		listTemplateClass: o(),
-		listClass: o()
+		listPaginationClass: c(),
+		listDefaultClass: c(),
+		listTemplateClass: c(),
+		listClass: c()
 	},
 	defaultData: [],
-	setup(e, t, i) {
+	setup(t, n, 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();
+				let e = a(t).activeComponent();
 				return typeof i.isValid == "function" ? i.isValid({
-					component: t,
-					list: e
-				}) : typeof P(i.isValid) == "boolean" ? P(i.isValid) : P(a(t).isValid);
+					component: e,
+					list: t
+				}) : typeof P(i.isValid) == "boolean" ? P(i.isValid) : P(a(e).isValid);
 			} catch {
 				return !1;
 			}
 		}), b = y(() => {
 			try {
-				return a(e).model.getData().map((t) => {
+				return a(t).model.getData().map((e) => {
 					try {
-						if (["Object"].includes(t.constructor.name)) {
-							let n = a(e).itemIdentifier(t);
-							return n || n === 0 ? t : Object.assign(t, { tid: U() });
+						if (["Object"].includes(e.constructor.name)) {
+							let n = a(t).itemIdentifier(e);
+							return n || n === 0 ? e : Object.assign(e, { tid: U() });
 						} else return {
-							"": t,
+							"": e,
 							tid: U()
 						};
 					} catch {
 						return {
-							"": t,
+							"": e,
 							tid: U()
 						};
 					}
@@ -747,20 +747,20 @@ var Me = T({
 			} catch {
 				return [];
 			}
-		}), x = y(() => i.sortable(i.filterable(P(b), e), e)), S = (e = {}, t = !0) => {
+		}), x = y(() => i.sortable(i.filterable(P(b), t), t)), S = (e = {}, t = !0) => {
 			try {
 				return e.hasOwnProperty(i.itemKey) ? i.itemKey : t ? "tid" : i.itemKey;
 			} catch {
 				return t ? "tid" : i.itemKey;
 			}
-		}, w = (t = {}) => {
+		}, w = (e = {}) => {
 			try {
-				return t[a(e).itemKey(t)];
+				return e[a(t).itemKey(e)];
 			} 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);
+		}, T = (e) => s[e], E = () => i.defaultDisplayComponent === !1 ? C(e, { class: "hidden" }) : i.defaultDisplayComponent === void 0 ? i.displayComponent : i.defaultDisplayComponent, D = () => C(i.displayComponent), O = (e = {}) => e.id === P(c) ? a(t).defaultDisplayComponent() : i.displayComponent, A = (e) => {
+			let n = a(t).itemIdentifier(e), r = a(t).getComponent(P(l)), o = a(t).getComponent(n);
 			if (o && i.duplicate({
 				id: n,
 				tid: P(c),
@@ -771,43 +771,43 @@ var Me = T({
 			{
 				let n = o ?? r;
 				if (n) {
-					let r = a(e).getComponent(P(c));
-					a(n).model.replaceData(t ?? I(r));
+					let r = a(t).getComponent(P(c));
+					a(n).model.replaceData(e ?? I(r));
 				}
 				return n;
 			}
-		}, j = (t, n) => new Promise(async (r) => {
+		}, j = (e, 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),
+				} : n ?? {}, c = a(t).itemIdentifier(i), l = a(t).getComponent(c);
+				return i.hasOwnProperty("tid") || s ? r.concat(e({
+					list: t,
+					data: a(t).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 = {
+		}), I = (e) => a(e).model.getData({ raw: !0 }) ?? a(e).model.getData(), L = async (e) => {
+			let n = i.beforeItemAdding ?? a(e).beforeItemAdding, r = i.whenItemAdding ?? a(e).whenItemAdding, o = {
 				tid: P(c),
-				data: V(t),
-				list: e
+				data: V(e),
+				list: t
 			};
-			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;
+			return (await n?.(Object.assign({}, o, { component: e }), t) ?? !0) && (await r?.(o, t) ? await r(Object.assign({}, o, { component: e }), t) : a(t).set(g.on(I(e)).clone())), e;
+		}, z = async (e) => {
+			if (!(a(e).$attrs.default || a(e).$attrs.template)) {
+				let n = i.beforeItemDeleting ?? a(e).beforeItemDeleting, r = i.whenItemDeleting ?? a(e).whenItemDeleting, o = { list: t };
+				return (await n?.(Object.assign({}, o, { component: e }), t) ?? !0) && (await r?.(o, t) ? await r(Object.assign({}, o, { component: e }), t) : a(t).unset(g.on(I(e)).clone())), e;
 			}
-		}, 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];
+		}, ee = (e) => {
+			let n = a(t).itemIdentifier(e);
+			P(x).findIndex((e) => a(t).itemIdentifier(e) === n) === -1 ? (a(t).model.replaceData(i.addToStart ? [e].concat(P(x)) : P(x).concat(e)), delete s[P(l)], c.value = U(), l.value = U()) : a(t).defaultComponent(e);
+		}, B = (e) => {
+			let n = a(t).itemIdentifier(e);
+			a(t).model.replaceData(P(x).filter((e) => a(t).itemIdentifier(e) !== n)), delete s[n];
 		}, V = (e, t) => {
 			try {
 				let { tid: n, ...r } = I(e);
@@ -816,27 +816,27 @@ var Me = T({
 				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 },
+			let e = a(t).activeItemIdentifier();
+			return a(t).getComponent(e);
+		}, W = () => i.selectable ? (i.multiple ? P(d) : P(d)[0]) ?? P(c) : P(c), te = ({ index: e, item: n }) => {
+			let r = a(t).itemIdentifier(n), o = r === P(l), u = r === P(c), p = (e) => ({
+				event: { [e]: !0 },
 				source: P(f),
-				target: a(e).getComponent(r),
+				target: a(t).getComponent(r),
 				items: P(x)
 			}), m = {
 				id: r,
 				key: r,
-				list: e,
+				list: t,
 				instance: (e) => s[r] = e,
 				default: u,
 				template: o,
 				selected: P(d).includes(r),
-				component: a(e).getComponent(r) ?? { model: _.setDefaultData(n) },
+				component: a(t).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;
+					let n = P(x).find((e) => a(t).itemIdentifier(e) === r);
+					return n === void 0 ? P(x)[e] : n;
 				},
 				"data:callback": (e, { component: t }) => {
 					try {
@@ -846,51 +846,51 @@ var Me = T({
 						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);
+				onClick: (e) => {
+					let n = a(t).getComponent(r);
+					i.selectable && (typeof a(n).whenItemSelected == "function" ? a(n).whenItemSelected(e, m) : P(d).includes(r) || (d.value = [r])), i.clickable && typeof a(n).whenItemClicked == "function" && a(n).whenItemClicked(e, m);
 				},
 				...o ? { class: "hidden" } : {},
-				...typeof t == "number" ? { index: t } : {},
+				...typeof e == "number" ? { index: e } : {},
 				...i.draggable ? {
 					draggable: !0,
-					ondragover: (t) => {
-						t.preventDefault(), i.draggable(p("over"), e);
+					ondragover: (e) => {
+						e.preventDefault(), i.draggable(p("over"), t);
 					},
 					ondragend: () => {
-						f.value = void 0, i.draggable(p("end"), e);
+						f.value = void 0, i.draggable(p("end"), t);
 					},
 					ondragstart: () => {
-						f.value = a(e).getComponent(r), i.draggable(p("start"), e);
+						f.value = a(t).getComponent(r), i.draggable(p("start"), t);
 					},
 					ondrop: () => {
-						i.draggable(p("drop"), e);
+						i.draggable(p("drop"), t);
 					},
 					ondragenter: () => {
-						a(e).itemIdentifier(I(f)) !== r && i.draggable(p("enter"), e);
+						a(t).itemIdentifier(I(f)) !== r && i.draggable(p("enter"), t);
 					},
 					ondragleave: () => {
-						a(e).itemIdentifier(I(f)) !== r && i.draggable(p("leave"), e);
+						a(t).itemIdentifier(I(f)) !== r && i.draggable(p("leave"), t);
 					}
 				} : {}
 			};
 			return m;
 		}, ne = () => {
-			let t = a(e).itemOptions({ item: { tid: P(c) } }), r = a(e).itemOptions({ item: { tid: P(l) } });
+			let e = a(t).itemOptions({ item: { tid: P(c) } }), n = a(t).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({
+				C("div", { class: i.listClass }, P(x).reduce((e, n, r) => e.concat(K(a(t).itemOptions({
 					index: r,
 					item: n
 				}))), [])),
 				C("div", {
-					...n(t, ["class"]),
-					class: R(u(t.class, i.listDefaultClass).string, u(i.listDefaultClass).string)
-				}, [K(t)]),
+					...r(e, ["class"]),
+					class: R(u(e.class, i.listDefaultClass).string, u(i.listDefaultClass).string)
+				}, [K(e)]),
 				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()])
+					...r(n, ["class"]),
+					class: R(u(n.class, i.listTemplateClass).string, u(i.listTemplateClass).string)
+				}, [K(n)]),
+				C("div", { class: i.listPaginationClass }, [a(t).paginationComponent()])
 			]);
 		}, G = (e) => {
 			try {
@@ -898,26 +898,26 @@ var Me = T({
 			} 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,
+		}, K = (n) => {
+			let o = a(t).activeDisplay(n), s = typeof o == "function" ? o(n) : o, { class: c, ...l } = typeof i.itemProps == "function" ? i.itemProps(n) : i.itemProps, { class: d } = a(t).pageProps(n), { class: f, ...p } = {
+				...n,
 				...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;
+			}, m = R(u(s.props.class, f, c, d).string, u(c, d).string), h = typeof i.itemSlots == "function" ? i.itemSlots(n) : i.itemSlots;
 			try {
 				return G(s) ? C(s, {
 					...p,
 					class: m
 				}, h) : G(s.type) ? C(s, {
 					...p,
-					...n(s.props, "class"),
+					...r(s.props, "class"),
 					class: m
-				}, s.children) : C(r, {
+				}, s.children) : C(e, {
 					...p,
-					...n(s.props, "class"),
+					...r(s.props, "class"),
 					class: m
 				}, () => s.children);
 			} catch (e) {
-				return console.log("component builder failed:", e, s), C("div", t, "Component failed to mount!");
+				return console.log("component builder failed:", e, s), C("div", n, "Component failed to mount!");
 			}
 		}, q = (e) => {
 			try {
@@ -927,56 +927,56 @@ var Me = T({
 			}
 		}, J = () => {
 			if (i.paginator) {
-				let { component: t = Ne, data: n, props: r } = i.paginator?.props?.ReactiveView ? {
+				let { component: e = Ne, data: n, props: r } = i.paginator?.props?.ReactiveView ? {
 					component: i.paginator,
-					props: { list: e }
+					props: { list: t }
 				} : i.paginator?.component || i.paginator?.data || i.paginator?.props ? {
 					...i.paginator,
 					props: {
-						list: i.paginator.list ?? e,
+						list: i.paginator.list ?? t,
 						...i.paginator.props
 					}
-				} : { props: { list: e } };
-				return C(t, {
+				} : { props: { list: t } };
+				return C(e, {
 					...r,
 					instance: p,
 					...n === void 0 ? {} : { data: n }
 				});
 			}
-		}, Y = (t) => C("button", {
+		}, Y = (e) => 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);
+				let n = a(t).defaultComponent(e);
+				if (n) return a(t).add(n);
 			},
-			disabled: !P(a(e).isValid)
-		}, "add"), X = (t) => {
-			let n = a(e).getComponent(a(e).itemIdentifier(t));
+			disabled: !P(a(t).isValid)
+		}, "add"), X = (e) => {
+			let n = a(t).getComponent(a(t).itemIdentifier(e));
 			return C("button", {
 				ref: h,
 				class: "btn btn-sm btn-error text-white uppercase",
 				onClick: () => {
-					if (n) return a(e).remove(n);
+					if (n) return a(t).remove(n);
 				},
 				disabled: !n || n === s[P(c)] || n === s[P(l)]
 			}, "delete");
 		}, Z = () => {
-			F(d, (t, n = []) => {
-				t.forEach((t) => {
+			F(d, (e, n = []) => {
+				e.forEach((e) => {
 					setTimeout(() => {
-						let n = a(e).getComponent(t), r = i.whenItemActive ?? a(n).whenItemActive;
+						let n = a(t).getComponent(e), r = i.whenItemActive ?? a(n).whenItemActive;
 						n && r && r({
-							list: e,
+							list: t,
 							data: a(n).model.getData(),
 							component: n
 						});
 					});
-				}), n.forEach((t) => {
+				}), n.forEach((e) => {
 					setTimeout(() => {
-						let n = a(e).getComponent(t), r = i.whenItemInactive ?? a(n).whenItemInactive;
+						let n = a(t).getComponent(e), r = i.whenItemInactive ?? a(n).whenItemInactive;
 						n && r && r({
-							list: e,
+							list: t,
 							data: a(n).model.getData(),
 							component: n
 						});
@@ -984,20 +984,20 @@ var Me = T({
 				});
 			}, { 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];
+			let e = (e, n = "") => {
+				if (typeof n == "string") return e.find((e) => e[a(t).itemKey(e)] === n || e[""] === n);
+				if (typeof n == "function") return e.find((e) => n(e));
+				if (["Object"].includes(n.constructor.name)) return e.find((e) => e[a(t).itemKey(e)] === n.id || e[a(t).itemKey(e)] === n[a(t).itemKey(n)]);
+				if (["Number"].includes(n.constructor.name)) return n > -1 ? e[n > e.length ? e.length - 1 : n] ?? e[e.length - 1] : e[e.length - Math.abs(n)] ?? e[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))];
+					if (n.length > r.length) d.value = [a(t).itemIdentifier(i.addToStart ? e(n, 0) : e(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)]);
+						let i = r.findIndex((e) => a(t).itemIdentifier(e) === P(d)[0]);
+						i > -1 && (d.value = [a(t).itemIdentifier(e(n, i) ?? e(n, -1)) ?? P(c)]);
 					}
-				} else d.value = [a(e).itemIdentifier(t(n, i.selected))];
+				} else d.value = [a(t).itemIdentifier(e(n, i.selected))];
 			}, { immediate: !0 });
 		};
 		return k(() => {
@@ -1031,7 +1031,7 @@ var Me = T({
 			id: o
 		};
 	}
-}), Fe = l({
+}), Fe = n({
 	modelName: "CustomTableRow",
 	setup: (e, t, n) => {
 		let r = a(a(e).$attrs.list);
@@ -1069,19 +1069,19 @@ var Me = T({
 			checkedRef: y(() => P(a(r).checkedRef).has(a(r).itemIdentifier(a(e).model.getData())))
 		};
 	}
-}), Ie = l({
+}), Ie = n({
 	modelName: "Popover",
 	props: {
-		autoClose: o({
+		autoClose: c({
 			type: Boolean,
 			default: !0
 		}),
-		timeout: o({
+		timeout: c({
 			default: 0,
 			validator: (e) => /^\d+$/.test(e)
 		}),
-		containerClass: o(),
-		boundary: o({ type: [
+		containerClass: c(),
+		boundary: c({ type: [
 			Function,
 			Object,
 			String
@@ -1151,30 +1151,30 @@ var Me = T({
 			popoverRef: i
 		};
 	}
-}), Le = l({
+}), Le = n({
 	modelName: "CustomTable",
 	props: {
-		empty: o({ type: Object }),
-		isSelectable: o({
+		empty: c({ type: Object }),
+		isSelectable: c({
 			type: Boolean,
 			default: !0
 		}),
-		isCollapsible: o({ type: Boolean }),
-		hasMenu: o({
+		isCollapsible: c({ type: Boolean }),
+		hasMenu: c({
 			type: Boolean,
 			default: !0
 		}),
-		hasHeaderMenu: o({ type: Boolean }),
-		headerClass: o(),
-		columnLines: o({ type: Boolean }),
-		rowLines: o({
+		hasHeaderMenu: c({ type: Boolean }),
+		headerClass: c(),
+		columnLines: c({ type: Boolean }),
+		rowLines: c({
 			type: Boolean,
 			default: !0
 		})
 	},
 	defaultDisplayComponent: !1,
 	displayComponent: Fe,
-	setup(e, t, r) {
+	setup(e, t, n) {
 		let o = N({
 			children: [],
 			props: {}
@@ -1192,23 +1192,23 @@ var Me = T({
 			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", {
+		}, _ = (e) => n.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 = () => n.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(n.isCollapsible || n.isSelectable ? "" : "[&>:nth-child(2)]:-ml-[calc(var(--column-gap,1rem)-0.75rem)]", n.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)])] }),
+				return C("div", { class: R(u({ "sticky top-0 z-10 bg-(--colors-F9FAFC) grid grid-cols-subgrid col-span-full": !0 }, n.headerClass, l).string, u(n.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(r(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)])] })
+					C(c.type, c.props, { default: () => [C("div", { class: "h-full bg-inherit flex items-center" }, [i && C(i, E(r(i.props, ["class"]), { class: R(i.props.class, u({ hidden: !n.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;
+			if (!a(e).model.getData().length && n.empty) return [a(e).emptyTableElement()];
+			let [r, i, o, s] = a(t).template().children;
 			return [
-				n.children,
+				r.children,
 				i.children,
 				o.children,
 				a(e).tablePagination(s.children),
@@ -1216,8 +1216,8 @@ var Me = T({
 			];
 		}, 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);
+		}, j = (...t) => C("div", { class: R("sticky left-0 bg-inherit self-stretch", n.isCollapsible || n.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", n.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(n.empty);
 			return C("div", { class: {
 				hidden: !e.get(),
 				"py-8 px-3 flex flex-col gap-y-3 col-span-full": !0
@@ -1227,7 +1227,7 @@ var Me = T({
 				C("div", { class: "hidden" }, [a(t).template()])
 			]);
 		}, L = ({ row: t } = {}) => {
-			if (r.hasMenu) return C(Ie, {
+			if (n.hasMenu) return C(Ie, {
 				boundary: "[data-table]",
 				setup: (n, r) => ({
 					trigger: () => C(q, {
@@ -1262,7 +1262,7 @@ var Me = T({
 				});
 			}
 		}, ee = ({ row: t } = {}) => {
-			if (r.isCollapsible) {
+			if (n.isCollapsible) {
 				let n = t && a(e).itemIdentifier(a(t).model.getData()), r = t ? P(c).has(n) : P(d);
 				return C(q, {
 					unstyled: !0,
@@ -1276,7 +1276,7 @@ var Me = T({
 				} }, null) });
 			}
 		}, V = ({ row: t } = {}) => {
-			if (r.isSelectable) return C(m, {
+			if (n.isSelectable) return C(m, {
 				type: "checkbox",
 				size: "large",
 				indeterminate: t === e && P(f),
@@ -1289,8 +1289,8 @@ var Me = T({
 		}, 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)
+				"bottom-16": !!P(n.$attrs.paginator),
+				"bottom-8": !P(n.$attrs.paginator)
 			} }, [
 				C("span", { class: "font-medium" }, [P(a(e).checkedRef).size, S(" Selected")]),
 				C(B, { layout: "vertical" }, null),
@@ -1336,10 +1336,10 @@ var Me = T({
 			} catch (t) {
 				try {
 					return a(e).rowElement();
-				} catch (n) {
-					console.warn(`[${r.modelName}]: failed to set table columns`, {
+				} catch (r) {
+					console.warn(`[${n.modelName}]: failed to set table columns`, {
 						e1: t,
-						e2: n
+						e2: r
 					}, a(e));
 				}
 			}
@@ -1378,39 +1378,39 @@ var Me = T({
 			handleCollapsible: J
 		};
 	}
-}, Pe), Re = l({
+}, Pe), Re = n({
 	props: {
-		defaultData: o(),
-		filled: o({ type: Boolean }),
-		timezone: o({ type: [Boolean, String] }),
-		time: o({ type: Boolean }),
-		date: o({
+		defaultData: c(),
+		filled: c({ type: Boolean }),
+		timezone: c({ type: [Boolean, String] }),
+		time: c({ type: Boolean }),
+		date: c({
 			type: Boolean,
 			default: !0
 		}),
-		type: o({
+		type: c({
 			type: String,
 			default: "date",
-			validator: (t) => {
-				let n = [
+			validator: (e) => {
+				let t = [
 					"date",
 					"dates",
 					"range"
 				];
-				return n.includes(t) || e(`[Datetime] invalid type. Must be one of ${n.join(", ")}.`);
+				return t.includes(e) || d(`[Datetime] invalid type. Must be one of ${t.join(", ")}.`);
 			}
 		}),
-		options: o({
+		options: c({
 			type: Object,
 			default: {}
 		}),
-		minDate: o({
+		minDate: c({
 			type: [Boolean, Date],
 			default: () => /* @__PURE__ */ new Date(),
 			validator: (e) => ["Boolean", "Date"].includes(e?.constructor.name) && e !== !0
 		}),
-		inputClass: o(),
-		panelClass: o()
+		inputClass: c(),
+		panelClass: c()
 	},
 	defaultData: (e) => P(e.defaultData) ?? {
 		date: void 0,
@@ -1498,7 +1498,7 @@ var We = T({
 	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({
+}, qe = n({
 	modelName: "DraggableList",
 	defaultData: [],
 	setup(e, t, n) {