@razaman2/reactive-view 0.1.0-beta.15 → 0.1.0-beta.17

package/dist/index.mjs

@@ -1,917 +1,942 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+import e from "@razaman2/object-manager";
+import t from "@razaman2/data-manager";
+import { computed as n, createTextVNode as r, createVNode as i, defineComponent as a, getCurrentInstance as o, h as s, isReactive as c, isRef as l, mergeProps as u, nextTick as d, onBeforeUnmount as f, onMounted as p, provide as m, reactive as h, ref as g, render as _, resolveComponent as v, toRaw as y, unref as b, watch as x, watchEffect as S } from "vue";
+import { formatInTimeZone as C } from "date-fns-tz";
+import { twMerge as w } from "tailwind-merge";
+//#region src/Subscription.ts
+var T = class e {
+	subscriptions = [];
+	data = {};
+	static create() {
+		return new e();
+	}
+	subscribe(e, t, n) {
+		return this.isNameAvailable(e) && (this.subscriptions.push({
+			name: e,
+			handler: t
+		}), this.data[e] = n), this;
+	}
+	replace(e, t, n) {
+		return this.unsubscribe(e), this.subscribe(e, t, n);
+	}
+	unsubscribe(e) {
+		Array.isArray(e) || (e = e ? [e] : []);
+		let t = (e) => console.log(`%cUnsubscribed From Subscription (${e})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
+		return e.length ? e.forEach((e) => {
+			let n = this.find(e);
+			n && (n.handler(), this.remove(n), t(e));
+		}) : (this.subscriptions.forEach((e) => {
+			e.handler(), t(e.name);
+		}), this.subscriptions = []), this;
+	}
+	size() {
+		return this.subscriptions.length;
+	}
+	hasSubscription(e) {
+		return !!this.find(e);
+	}
+	remove(e) {
+		this.subscriptions.splice(this.subscriptions.indexOf(e), 1);
+	}
+	find(e) {
+		return this.subscriptions.find((t) => t.name === e);
+	}
+	isNameAvailable(e) {
+		if (this.hasSubscription(e)) throw Error(`There is already a subscription called "${e}".`);
+		return !0;
+	}
+	registrations() {
+		return this.subscriptions;
+	}
+	get(e) {
+		let t = this.find(e);
+		if (t) return t;
+		throw Error(`Subscription "${e}" doesn't exist!`);
+	}
+}, E = class e extends T {
+	static subscriptions = e.create();
+	static get() {
+		return this.subscriptions;
+	}
+}, D = {
+	name: "@razaman2/reactive-view",
+	version: "0.1.0-beta.17",
+	description: "This library enables you to build vue apps in an object oriented way. It provides a convenient approach to extend and override ui components. It provides a built in eventing system along with component data management.",
+	main: "dist/index.js",
+	module: "dist/index.mjs",
+	types: "dist/index.d.ts",
+	exports: { ".": {
+		types: "./dist/index.d.ts",
+		require: "./dist/index.js",
+		import: "./dist/index.mjs"
+	} },
+	scripts: {
+		prepublishOnly: "npm run build",
+		build: "vue-tsc -p tsconfig.build.json && vite build",
+		lint: "eslint \"src/**/*.ts\" \"tests/**/*.ts\"",
+		"lint:fix": "eslint \"src/**/*.ts\" \"tests/**/*.ts\" --fix",
+		format: "prettier --write \"src/**/*.ts\" \"tests/**/*.ts\"",
+		typecheck: "tsc",
+		test: "vitest run",
+		"test:watch": "vitest",
+		pr: "sh pr.sh"
+	},
+	keywords: [
+		"vue",
+		"vue-helper",
+		"reactive-view",
+		"vue-class-component",
+		"reactive-ui"
+	],
+	repository: {
+		type: "git",
+		url: "git+https://github.com/razaman2/reactive-view.git"
+	},
+	bugs: { url: "https://github.com/razaman2/reactive-view/issues" },
+	homepage: "https://github.com/razaman2/reactive-view#readme",
+	author: "razaman2",
+	license: "MIT",
+	dependencies: {
+		"@razaman2/data-manager": "^3.3.12",
+		"@razaman2/event-emitter": "^2.1.1",
+		"@razaman2/object-manager": "^3.4.7",
+		"date-fns": "^4.1.0",
+		"date-fns-tz": "^3.2.0",
+		"tailwind-merge": "^3.5.0"
+	},
+	peerDependencies: { vue: ">=3.0.0" },
+	devDependencies: {
+		"@eslint/js": "^10.0.1",
+		"@stylistic/eslint-plugin": "^5.10.0",
+		"@typescript-eslint/eslint-plugin": "^8.59.2",
+		"@typescript-eslint/parser": "^8.59.2",
+		"@vitejs/plugin-vue": "^6.0.6",
+		"@vitejs/plugin-vue-jsx": "^5.1.5",
+		"@vue/server-renderer": "^3.5.34",
+		"@vue/test-utils": "^2.4.10",
+		eslint: "^10.3.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-prettier": "^5.5.5",
+		"eslint-plugin-vue": "^10.9.1",
+		jsdom: "^29.1.1",
+		prettier: "^3.8.3",
+		typescript: "^5.9.3",
+		"typescript-eslint": "^8.59.2",
+		vite: "^8.0.11",
+		vitest: "^4.1.5",
+		"vue-tsc": "^3.2.8"
+	},
+	publishConfig: { access: "public" },
+	files: ["dist"]
+}, O = {
+	type: Function,
+	default: (e = {}, t = {}) => t,
+	ReactiveView: !0
+}, k = {
+	props: {
+		setup: {},
+		beta: [Boolean, String],
+		ReactiveView: {
+			type: Boolean,
+			default: !0
+		},
+		instance: { default: g() },
+		notifications: Object,
+		subscriptions: Object,
+		beforeSetData: Function,
+		data: { default: h({}) },
+		defaultData: {},
+		getDefaultData: {
+			type: Function,
+			default: (e) => e
+		},
+		model: {},
+		defer: {},
+		logging: { validator: (e) => ["Boolean"].includes(e.constructor.name) },
+		modelName: {
+			type: String,
+			default: "ReactiveView"
+		},
+		debug: {
+			type: Boolean,
+			default: !1
+		},
+		state: { default: h({}) }
+	},
+	setup(n, r) {
+		let a = [];
+		f(() => a.forEach((e) => e()));
+		let s = (t, n) => {
+			let r = g(!1), i = Array.from(new Set(t.paths().concat(n.paths()))).reduce((e, i) => (t.get(i) !== n.get(i) && (e.set(i, n.get(i)), r.value = !0), e), e.on({}));
+			return {
+				before: t.get(),
+				after: n.get(),
+				changes: i.get(),
+				changed: r.value
+			};
+		}, u = (e) => {
+			let t = r.attrs["data:path"];
+			return typeof t == "function" ? t(e) : e;
+		}, p = (e, t) => i("div", r.slots.default ? r.attrs : {
+			style: {
+				color: "red",
+				textAlign: "center"
+			},
+			...r.attrs
+		}, r.slots.default ? r.slots.default({
+			component: e,
+			vue: t,
+			props: n,
+			context: r
+		}) : `${n.modelName}: ${D.name}@${D.version}`), m = g(!1), _ = g(!1), v = g(typeof n.defer == "function" ? n.defer() : n.defer), y = ["Function"].includes(n.data?.constructor.name), S = ["AsyncFunction"].includes(n.data?.constructor.name), C = ["Promise"].includes(n.data?.constructor.name) || S, w = o(), T = n.getDefaultData("defaultData" in w.vnode.props ? w.vnode.props.defaultData : "data" in w.vnode.props && Array.isArray(b(w.vnode.props.data)) ? [] : {}), E = Array.isArray(T) ? [] : {};
+		return n.beta === "current" ? (() => {
+			let i = (e, t) => {
+				if (w && w.vnode.el) {
+					let n = new CustomEvent("data:emit", {
+						bubbles: !0,
+						composed: !0,
+						detail: {
+							before: t,
+							after: e
+						}
+					});
+					w.vnode.el.dispatchEvent(n);
+				}
+			}, o = {
+				data: n.beta ? ((e) => {
+					if (n.debug && console.warn(`[ReactiveView]: using beta props data in [${n.modelName}] component`, {
+						vue: w,
+						data: e,
+						defaultData: T,
+						isRef: l(e),
+						isReactive: c(e)
+					}), c(e)) return e;
+					if (l(e) || y || C) return h(E);
+					{
+						let t = "data" in w.vnode.props;
+						try {
+							return ["Array", "Object"].includes(e?.constructor?.name) ? h(t ? e : E) : h(t ? { "": e } : E);
+						} catch {
+							return h(t ? { "": e } : E);
+						}
+					}
+				})(w.vnode.props?.data) : h(e.on(C || y || l(n.data) || c(n.data) ? E : "data" in w.vnode.props ? n.data : E).clone()),
+				defaultData: e.on(T).clone(),
+				notifications: n.notifications,
+				subscriptions: n.subscriptions,
+				name: n.modelName,
+				logging: n.logging
+			}, d = new Proxy(n.model ? typeof n.model == "function" ? n.model(o) : n.model : new t(o), { get(t, r, i) {
+				return ["setData", "replaceData"].includes(r.toString()) ? (...i) => {
+					let a = B(f).beforeSetData ?? n.beforeSetData;
+					if (typeof a == "function") {
+						let n = e.on(t.getData()), o = i.length ? e.on(E).set(...i) : e.on(E).set(T);
+						a(B(f).diff(n, o), t) && t[r](...i);
+					} else t[r](...i);
+					return t;
+				} : Reflect.get(t, r, i);
+			} }), f = g({
+				parent: { self: w.proxy },
+				self: {
+					template: p,
+					model: d,
+					diff: s,
+					emit: i,
+					dataPath: u,
+					isValid: m
+				}
+			});
+			n.debug && console.warn("[ReactiveView]:", {
+				props: n,
+				context: r,
+				vue: w,
+				defer: v,
+				config: o,
+				model: d,
+				component: f,
+				datatype: E,
+				defaultData: T,
+				isValid: m,
+				isReady: _,
+				isFunctionData: y,
+				isAsyncFunctionData: S,
+				isAsyncData: C
+			});
+			let b = (t) => {
+				let n = typeof r.attrs["onUpdate:data"] == "function" ? { callback: r.attrs["onUpdate:data"] } : {
+					callback: (r.attrs["onUpdate:data"] ?? {}).callback ?? r.attrs["data:callback"],
+					options: Object.assign({
+						deep: r.attrs["data:deep"] ?? !0,
+						...r.attrs["data:immediate"] ? { immediate: r.attrs["data:immediate"] } : {},
+						...r.attrs["data:once"] ? { once: r.attrs["data:once"] } : {}
+					}, (r.attrs["onUpdate:data"] ?? {}).options)
+				};
+				r.attrs["data:log"] && console.warn("[ReactiveView]:data", {
+					config: n,
+					dataProp: t
+				}), a.push(x(y || l(t) || c(t) ? t : () => t, (t, r) => {
+					typeof n.callback == "function" ? d.replaceData(n.callback(B(f).diff(e.on(r), e.on(t)), { component: f }) ?? t) : d.replaceData(t);
+				}, n.options));
+			};
+			if (r.attrs["onUpdate:model"] || r.attrs["update:model"]) {
+				let t = typeof r.attrs["onUpdate:model"] == "function" ? {
+					callback: r.attrs["onUpdate:model"],
+					options: Object.assign({
+						deep: r.attrs["model:deep"] ?? !0,
+						...r.attrs["model:immediate"] ? { immediate: r.attrs["model:immediate"] } : {},
+						...r.attrs["model:once"] ? { once: r.attrs["model:once"] } : {}
+					}, (r.attrs["onUpdate:model"] ?? {}).options)
+				} : r.attrs["onUpdate:model"] ?? {};
+				r.attrs["model:log"] && console.warn("[ReactiveView]:model", { config: t }), a.push(x(() => e.on(d.getData()).clone(), (n, r) => {
+					t.callback(B(f).diff(e.on(r), e.on(n)), { component: f });
+				}, t.options));
+			}
+			if (n.beta) {
+				let t = l(n.data);
+				(t || y || C) && setTimeout(async () => {
+					let [i] = C ? await Promise.all([S ? n.data() : n.data, v.value ?? !0]) : [n.data];
+					a.push(x(t || y || typeof i == "function" ? i : () => i, (t, n) => {
+						if (n !== void 0 || t !== void 0) {
+							let i = r.attrs["data:callback"];
+							if (typeof i == "function") {
+								let r = B(f).diff(e.on(n), e.on(t));
+								d.replaceData(i(r, { component: f }) ?? t);
+							} else d.replaceData(t);
+						}
+					}, {
+						immediate: r.attrs["data:immediate"] ?? !0,
+						deep: r.attrs["data:deep"] ?? !0,
+						once: r.attrs["data:once"]
+					}));
+				});
+			} else setTimeout(async () => {
+				let [e] = await Promise.all([S ? n.data() : n.data, v.value ?? !0]);
+				b(e);
+			});
+			return setTimeout(async () => {
+				_.value = await v.value ?? !0;
+			}), f.value = [B(f)].reduce((e, t) => {
+				for (; t && typeof t.setup == "function" && (e = {
+					parent: e,
+					self: t.setup(f, e) ?? {}
+				}, !B(t.$parent).ReactiveView);) t = B(t.$parent);
+				return e;
+			}, f.value), n.instance.value = typeof n.instance == "function" ? n.instance(f.value) : f.value, (e) => _.value ? B(f).template(f, e) : r.slots.loading?.({ component: f });
+		})() : (() => {
+			let i = (e, t) => {
+				if (w && w.vnode.el) {
+					let n = new CustomEvent("emit:data", {
+						bubbles: !0,
+						composed: !0,
+						detail: {
+							before: t,
+							after: e
+						}
+					});
+					B(O).setData(e), w.vnode.el.dispatchEvent(n), w.vnode.el.dispatchEvent(new CustomEvent("data:emit", {
+						bubbles: !0,
+						composed: !0,
+						detail: {
+							before: t,
+							after: e
+						}
+					}));
+				}
+			}, o = (e) => B(O).model.setData(e), f = (t) => new Proxy(t, { get(t, r, i) {
+				return ["setData", "replaceData"].includes(r.toString()) ? (...i) => {
+					let a = B(O).beforeSetData ?? n.beforeSetData;
+					if (typeof a == "function") {
+						let n = e.on(t.getData()), o = i.length ? e.on(E).set(...i) : e.on(E).set(T);
+						a(B(O).diff(n, o), t) && t[r](...i);
+					} else t[r](...i);
+					return t;
+				} : Reflect.get(t, r, i);
+			} }), h = {
+				data: ((e) => {
+					if (l(e) || c(e)) return e;
+					if (y || C) return g(E);
+					{
+						let t = "data" in w.vnode.props;
+						try {
+							return ["Array", "Object"].includes(e?.constructor?.name) ? g(e) : g(t ? { "": e } : E);
+						} catch {
+							return g(t ? { "": e } : E);
+						}
+					}
+				})(w.vnode.props?.data),
+				defaultData: e.on(T).clone(),
+				notifications: n.notifications,
+				subscriptions: n.subscriptions,
+				name: n.modelName,
+				logging: n.logging
+			}, D = n.model ? typeof n.model == "function" ? n.model(h) : n.model : t.setConfig({ beforeGetData: (e) => l(e) ? b(e) : e }, h), O = g({
+				parent: { self: w.proxy },
+				self: {
+					template: p,
+					diff: s,
+					emit: i,
+					setData: o,
+					dataPath: u,
+					model: f(D),
+					isValid: m
+				}
+			});
+			if (r.attrs["onUpdate:model"] || r.attrs["update:model"]) {
+				let t = {
+					callback: typeof r.attrs["onUpdate:model"] == "function" ? r.attrs["onUpdate:model"] : r.attrs["update:model"],
+					options: {
+						immediate: r.attrs["model:immediate"],
+						deep: r.attrs["model:deep"],
+						once: r.attrs["model:once"]
+					}
+				};
+				a.push(x(() => e.on(D.getData()).clone(), (r, i) => {
+					let a = B(O).diff(e.on(i), e.on(r));
+					n.debug && console.warn(`[${n.modelName}]:model`, {
+						diff: a,
+						before: i,
+						after: r
+					}), a.changed && t.callback(a, { component: O });
+				}, t.options));
+			}
+			return d(async () => {
+				if (n.model !== !1) {
+					(y || C) && !("defaultData" in w.vnode.props) && console.warn(`${n.modelName}: defaultData is required for promise or function data.`, n.data);
+					let [t] = C ? await Promise.all([S ? n.data() : n.data, v.value ?? !0]) : [n.data], i = l(t) || c(t), o = typeof t == "function" || i ? t : () => t;
+					a.push(x(o, async (i, a) => {
+						let o = B(O).diff(e.on(a), e.on(i)), s = r.attrs["data:callback"];
+						n.debug && console.warn(`[${n.modelName}]:data`, {
+							diff: o,
+							data: t,
+							callback: s,
+							props: n,
+							context: r,
+							component: O
+						}), typeof s == "function" ? s(o, { component: O }) : D.replaceData(i);
+					}, {
+						immediate: r.attrs["data:immediate"] ?? !i,
+						deep: r.attrs["data:deep"],
+						once: r.attrs["data:once"]
+					}));
+				}
+			}), d(async () => {
+				_.value = await v.value ?? !0;
+			}), O.value = [B(O)].reduce((e, t) => {
+				for (; t && typeof t.setup == "function" && (e = {
+					parent: e,
+					self: t.setup(O, e) ?? {}
+				}, !B(t.$parent).ReactiveView);) t = B(t.$parent);
+				return e;
+			}, O.value), n.instance.value = typeof n.instance == "function" ? n.instance(O.value) : O.value, (e) => _.value ? B(O).template(O, e) : r.slots.loading?.({ component: O });
+		})();
+	}
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/index.ts
-import ObjectManager2 from "@razaman2/object-manager";
-
-// src/Subscription.ts
-var Subscription = class _Subscription {
-  constructor() {
-    this.subscriptions = [];
-    this.data = {};
-  }
-  static create() {
-    return new _Subscription();
-  }
-  subscribe(name, handler, data) {
-    if (this.isNameAvailable(name)) {
-      this.subscriptions.push({
-        name,
-        handler
-      });
-      this.data[name] = data;
-    }
-    return this;
-  }
-  replace(name, handler, data) {
-    this.unsubscribe(name);
-    return this.subscribe(name, handler, data);
-  }
-  unsubscribe(param1) {
-    if (!Array.isArray(param1)) {
-      param1 = param1 ? [param1] : [];
-    }
-    const log = (name) => {
-      return console.log(`%cUnsubscribed From Subscription (${name})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
-    };
-    if (param1.length) {
-      param1.forEach((name) => {
-        const subscription = this.find(name);
-        if (subscription) {
-          subscription.handler();
-          this.remove(subscription);
-          log(name);
-        }
-      });
-    } else {
-      this.subscriptions.forEach((subscription) => {
-        subscription.handler();
-        log(subscription.name);
-      });
-      this.subscriptions = [];
-    }
-    return this;
-  }
-  size() {
-    return this.subscriptions.length;
-  }
-  hasSubscription(name) {
-    return Boolean(this.find(name));
-  }
-  remove(subscription) {
-    this.subscriptions.splice(this.subscriptions.indexOf(subscription), 1);
-  }
-  find(name) {
-    return this.subscriptions.find((subscription) => {
-      return subscription.name === name;
-    });
-  }
-  isNameAvailable(name) {
-    if (this.hasSubscription(name)) {
-      throw new Error(`There is already a subscription called "${name}".`);
-    } else {
-      return true;
-    }
-  }
-  registrations() {
-    return this.subscriptions;
-  }
-  get(name) {
-    const subscription = this.find(name);
-    if (subscription) {
-      return subscription;
-    } else {
-      throw new Error(`Subscription "${name}" doesn't exist!`);
-    }
-  }
-};
-
-// src/Subscriptions.ts
-var _Subscriptions = class _Subscriptions extends Subscription {
-  static get() {
-    return this.subscriptions;
-  }
-};
-_Subscriptions.subscriptions = _Subscriptions.create();
-var Subscriptions = _Subscriptions;
-
-// src/ReactiveView.ts
-import ObjectManager from "@razaman2/object-manager";
-import DataManager from "@razaman2/data-manager";
-import { ref, reactive, watch, unref, isRef, isReactive, createVNode, getCurrentInstance, onBeforeUnmount } from "vue";
-
-// package.json
-var version = "0.1.0-beta.15";
-var package_default = {
-  name: "@razaman2/reactive-view",
-  version,
-  description: "This library enables you to build vue apps in an object oriented way. It provides a convenient approach to extend and override ui components. It provides a built in eventing system along with component data management.",
-  main: "dist/index.js",
-  module: "dist/index.mjs",
-  types: "dist/index.d.ts",
-  scripts: {
-    prepublishOnly: "npm run build",
-    build: "tsup src/index.ts --format cjs,esm --dts",
-    lint: "tsc",
-    test: "cd tests/vue-ts && npm run dev",
-    pr: "sh pr.sh"
-  },
-  keywords: [
-    "vue",
-    "vue-helper",
-    "reactive-view",
-    "vue-class-component",
-    "reactive-ui"
-  ],
-  author: "razaman2",
-  license: "MIT",
-  dependencies: {
-    "@razaman2/data-manager": "^3.3.8",
-    "@razaman2/event-emitter": "^2.1.1",
-    "@razaman2/object-manager": "^3.4.7",
-    "date-fns": "^4.1.0",
-    "date-fns-tz": "^3.2.0",
-    "tailwind-merge": "^3.5.0",
-    uuid: "^13.0.0"
-  },
-  peerDependencies: {
-    vue: ">=3.0.0"
-  },
-  devDependencies: {
-    "@types/uuid": "^11.0.0",
-    tsup: "^8.5.1",
-    typescript: "^5.9.3",
-    vitest: "^4.1.2"
-  },
-  publishConfig: {
-    access: "public"
-  },
-  files: [
-    "dist"
-  ]
-};
-
-// src/ReactiveView.ts
-var setup = {
-  type: Function,
-  default: (parent = {}, self = {}) => self,
-  ReactiveView: true
-};
-var ReactiveView_default = {
-  props: {
-    setup: {},
-    beta: [Boolean, String],
-    ReactiveView: {
-      type: Boolean,
-      default: true
-    },
-    instance: { default: ref() },
-    notifications: Object,
-    subscriptions: Object,
-    beforeSetData: Function,
-    data: { default: reactive({}) },
-    defaultData: {},
-    getDefaultData: {
-      type: Function,
-      default: (data) => data
-    },
-    model: {},
-    defer: {},
-    logging: {
-      validator: (logging) => {
-        return ["Boolean"].includes(logging.constructor.name);
-      }
-    },
-    modelName: {
-      type: String,
-      default: "ReactiveView"
-    },
-    debug: {
-      type: Boolean,
-      default: false
-    },
-    state: { default: reactive({}) }
-  },
-  setup(props, context) {
-    var _a, _b, _c;
-    const subscriptions = [];
-    onBeforeUnmount(() => subscriptions.forEach((subscription) => subscription()));
-    const diff = (before, after) => {
-      const changed = ref(false);
-      const paths = Array.from(new Set(before.paths().concat(after.paths())));
-      const changes = paths.reduce((changes2, path) => {
-        if (before.get(path) !== after.get(path)) {
-          changes2.set(path, after.get(path));
-          changed.value = true;
-        }
-        return changes2;
-      }, ObjectManager.on({}));
-      return { before: before.get(), after: after.get(), changes: changes.get(), changed: changed.value };
-    };
-    const dataPath2 = (path) => {
-      try {
-        return context.attrs["data:path"](path);
-      } catch (e) {
-        return path;
-      }
-    };
-    const template = (component, vue2) => {
-      return createVNode("div", context.slots.default ? context.attrs : __spreadValues({
-        style: { color: "red", textAlign: "center" }
-      }, context.attrs), context.slots.default ? context.slots.default({ component, vue: vue2, props, context }) : `${props.modelName}: ${package_default.name}@${package_default.version}`);
-    };
-    const isValid = ref(false);
-    const isReady = ref(false);
-    const defer = ref(typeof props.defer === "function" ? props.defer() : props.defer);
-    const isFunctionData = ["Function"].includes((_a = props.data) == null ? void 0 : _a.constructor.name);
-    const isAsyncFunctionData = ["AsyncFunction"].includes((_b = props.data) == null ? void 0 : _b.constructor.name);
-    const isAsyncData = ["Promise"].includes((_c = props.data) == null ? void 0 : _c.constructor.name) || isAsyncFunctionData;
-    const vue = getCurrentInstance();
-    const defaultData = props.getDefaultData(
-      "defaultData" in vue.vnode.props ? vue.vnode.props.defaultData : "data" in vue.vnode.props ? Array.isArray(unref(vue.vnode.props.data)) ? [] : {} : {}
-    );
-    const datatype = Array.isArray(defaultData) ? [] : {};
-    const beta = () => {
-      var _a2;
-      const emit = (after, before) => {
-        if (vue && vue.vnode.el) {
-          const event = new CustomEvent("data:emit", {
-            bubbles: true,
-            // Key: allows it to travel up
-            composed: true,
-            // Key: allows it to cross Shadow DOM boundaries
-            detail: { before, after }
-            // Payload goes here
-          });
-          access(component).model.setData(after);
-          vue.vnode.el.dispatchEvent(event);
-        }
-      };
-      const proxy = (data) => {
-        return new Proxy(data, {
-          get(target, key, receiver) {
-            if (["setData", "replaceData"].includes(key.toString())) {
-              return (...params) => {
-                var _a3;
-                const beforeSetData = (_a3 = access(component).beforeSetData) != null ? _a3 : props.beforeSetData;
-                if (typeof beforeSetData === "function") {
-                  const before = ObjectManager.on(target.getData());
-                  const after = params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData);
-                  const diff2 = access(component).diff(before, after);
-                  if (beforeSetData(diff2, target)) {
-                    target[key](...params);
-                  }
-                } else {
-                  target[key](...params);
-                }
-                return target;
-              };
-            } else {
-              return Reflect.get(target, key, receiver);
-            }
-          }
-        });
-      };
-      const normalize = (data) => {
-        if (isRef(data) || isReactive(data)) {
-          return data;
-        } else if (isFunctionData || isAsyncData) {
-          return ref(datatype);
-        } else {
-          const props2 = "data" in vue.vnode.props;
-          try {
-            if (["Array", "Object"].includes(data.constructor.name)) {
-              return ref(data);
-            } else {
-              return ref(props2 ? { "": data } : datatype);
-            }
-          } catch (e) {
-            return ref(props2 ? { "": data } : datatype);
-          }
-        }
-      };
-      const config = {
-        data: normalize((_a2 = vue.vnode.props) == null ? void 0 : _a2.data),
-        defaultData: ObjectManager.on(defaultData).clone(),
-        notifications: props.notifications,
-        subscriptions: props.subscriptions,
-        name: props.modelName,
-        logging: props.logging
-      };
-      const model = props.model ? typeof props.model === "function" ? props.model(config) : props.model : DataManager.setConfig({ beforeGetData: (data) => isRef(data) ? unref(data) : data }, config);
-      const component = ref({ parent: { self: vue.proxy }, self: { template, diff, emit, dataPath: dataPath2, model: proxy(model), isValid } });
-      if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
-        const config2 = {
-          callback: typeof context.attrs["onUpdate:model"] === "function" ? context.attrs["onUpdate:model"] : context.attrs["update:model"],
-          options: {
-            immediate: context.attrs["model:immediate"],
-            deep: context.attrs["model:deep"],
-            once: context.attrs["model:once"]
-          }
-        };
-        const source = () => ObjectManager.on(model.getData()).clone();
-        subscriptions.push(watch(source, (after, before) => {
-          const diff2 = access(component).diff(ObjectManager.on(before), ObjectManager.on(after));
-          if (props.debug) {
-            console.warn(`[${props.modelName}]:model`, { diff: diff2, before, after });
-          }
-          if (diff2.changed) {
-            config2.callback(diff2, { component });
-          }
-        }, config2.options));
-      }
-      const track = (source, options = {}) => {
-        var _a3, _b2, _c2, _d, _e;
-        subscriptions.push(watch(source, async (after, before) => {
-          const diff2 = access(component).diff(ObjectManager.on(before), ObjectManager.on(after));
-          const callback = context.attrs["data:callback"];
-          if (typeof callback === "function") {
-            callback(diff2, { component });
-          } else {
-            model.replaceData(after);
-          }
-        }, {
-          immediate: (_b2 = (_a3 = context.attrs["data:immediate"]) != null ? _a3 : options.immediate) != null ? _b2 : true,
-          deep: (_d = (_c2 = context.attrs["data:deep"]) != null ? _c2 : options.deep) != null ? _d : true,
-          once: (_e = context.attrs["data:once"]) != null ? _e : options.once
-        }));
-      };
-      setTimeout(async () => {
-        var _a3;
-        if (props.model !== false) {
-          if (isFunctionData || isAsyncData) {
-            if (!("defaultData" in vue.vnode.props)) {
-              console.warn(`${props.modelName}: defaultData is required for promise or function data.`, props.data);
-            }
-            const [data] = isAsyncData ? await Promise.all([
-              isAsyncFunctionData ? props.data() : props.data,
-              (_a3 = defer.value) != null ? _a3 : true
-            ]) : [props.data];
-            track(typeof data === "function" ? data : (() => data));
-          } else {
-            track(isRef(props.data) || isReactive(props.data) ? props.data : () => props.data, { immediate: false, deep: false });
-          }
-        }
-      });
-      setTimeout(async () => {
-        var _a3;
-        isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
-      });
-      component.value = [access(component)].reduce((options, parent) => {
-        var _a3;
-        while (parent) {
-          if (typeof parent.setup === "function") {
-            options = { parent: options, self: (_a3 = parent.setup(component, options)) != null ? _a3 : {} };
-            if (access(parent.$parent).ReactiveView) {
-              break;
-            } else {
-              parent = access(parent.$parent);
-            }
-          } else {
-            break;
-          }
-        }
-        return options;
-      }, component.value);
-      props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
-      return (vue2) => {
-        var _a3, _b2;
-        if (isReady.value) {
-          return access(component).template(component, vue2);
-        } else {
-          return (_b2 = (_a3 = context.slots).loading) == null ? void 0 : _b2.call(_a3, { component });
-        }
-      };
-    };
-    const current = () => {
-      var _a2, _b2, _c2, _d;
-      const emit = (after, before) => {
-        if (vue && vue.vnode.el) {
-          const event = new CustomEvent("data:emit", {
-            bubbles: true,
-            // Key: allows it to travel up
-            composed: true,
-            // Key: allows it to cross Shadow DOM boundaries
-            detail: { before, after }
-            // Payload goes here
-          });
-          vue.vnode.el.dispatchEvent(event);
-        }
-      };
-      const normalize = (data) => {
-        if (props.debug) {
-          console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData, isRef: isRef(data), isReactive: isReactive(data) });
-        }
-        if (isReactive(data)) {
-          return data;
-        } else {
-          if (isRef(data) || isFunctionData || isAsyncData) {
-            return reactive(datatype);
-          } else {
-            const props2 = "data" in vue.vnode.props;
-            try {
-              if (["Array", "Object"].includes(data.constructor.name)) {
-                return reactive(props2 ? data : datatype);
-              } else {
-                return reactive(props2 ? { "": data } : datatype);
-              }
-            } catch (e) {
-              return reactive(props2 ? { "": data } : datatype);
-            }
-          }
-        }
-      };
-      const config = {
-        data: props.beta ? normalize((_a2 = vue.vnode.props) == null ? void 0 : _a2.data) : reactive(ObjectManager.on(
-          isAsyncData || isFunctionData || isRef(props.data) || isReactive(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
-        ).clone()),
-        defaultData: ObjectManager.on(defaultData).clone(),
-        notifications: props.notifications,
-        subscriptions: props.subscriptions,
-        name: props.modelName,
-        logging: props.logging
-      };
-      const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new DataManager(config), {
-        get(target, key, receiver) {
-          if (["setData", "replaceData"].includes(key.toString())) {
-            return (...params) => {
-              var _a3;
-              const beforeSetData = (_a3 = access(component).beforeSetData) != null ? _a3 : props.beforeSetData;
-              if (typeof beforeSetData === "function") {
-                const before = ObjectManager.on(target.getData());
-                const after = params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData);
-                if (beforeSetData(access(component).diff(before, after), target)) {
-                  target[key](...params);
-                }
-              } else {
-                target[key](...params);
-              }
-              return target;
-            };
-          } else {
-            return Reflect.get(target, key, receiver);
-          }
-        }
-      });
-      const component = ref({ parent: { self: vue.proxy }, self: { template, model, diff, emit, dataPath: dataPath2, isValid } });
-      if (props.debug) {
-        console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isAsyncData });
-      }
-      const watchDataProp = (dataProp) => {
-        var _a3, _b3, _c3, _d2;
-        const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
-          callback: (_b3 = ((_a3 = context.attrs["onUpdate:data"]) != null ? _a3 : {}).callback) != null ? _b3 : context.attrs["data:callback"],
-          options: Object.assign(__spreadValues(__spreadValues({
-            deep: (_c3 = context.attrs["data:deep"]) != null ? _c3 : true
-          }, context.attrs["data:immediate"] ? { immediate: context.attrs["data:immediate"] } : {}), context.attrs["data:once"] ? { once: context.attrs["data:once"] } : {}), ((_d2 = context.attrs["onUpdate:data"]) != null ? _d2 : {}).options)
-        };
-        if (context.attrs["data:log"]) {
-          console.warn(`[ReactiveView]:data`, { config: config2, dataProp });
-        }
-        subscriptions.push(watch(isFunctionData || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
-          var _a4;
-          if (typeof config2.callback === "function") {
-            model.replaceData((_a4 = config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component })) != null ? _a4 : after);
-          } else {
-            model.replaceData(after);
-          }
-        }, config2.options));
-      };
-      if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
-        const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
-          callback: context.attrs["onUpdate:model"],
-          options: Object.assign(__spreadValues(__spreadValues({
-            deep: (_b2 = context.attrs["model:deep"]) != null ? _b2 : true
-          }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_c2 = context.attrs["onUpdate:model"]) != null ? _c2 : {}).options)
-        } : (_d = context.attrs["onUpdate:model"]) != null ? _d : {};
-        if (context.attrs["model:log"]) {
-          console.warn(`[ReactiveView]:model`, { config: config2 });
-        }
-        subscriptions.push(watch(() => ObjectManager.on(model.getData()).clone(), (after, before) => {
-          config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component });
-        }, config2.options));
-      }
-      if (props.beta) {
-        const isRefData = isRef(props.data);
-        if (isRefData || isFunctionData || isAsyncData) {
-          setTimeout(async () => {
-            var _a3, _b3, _c3;
-            const [data] = isAsyncData ? await Promise.all([
-              isAsyncFunctionData ? props.data() : props.data,
-              (_a3 = defer.value) != null ? _a3 : true
-            ]) : [props.data];
-            subscriptions.push(watch(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
-              var _a4;
-              if (before !== void 0 || after !== void 0) {
-                const callback = context.attrs["data:callback"];
-                if (typeof callback === "function") {
-                  const diff2 = access(component).diff(ObjectManager.on(before), ObjectManager.on(after));
-                  model.replaceData((_a4 = callback(diff2, { component })) != null ? _a4 : after);
-                } else {
-                  model.replaceData(after);
-                }
-              }
-            }, {
-              immediate: (_b3 = context.attrs["data:immediate"]) != null ? _b3 : true,
-              deep: (_c3 = context.attrs["data:deep"]) != null ? _c3 : true,
-              once: context.attrs["data:once"]
-            }));
-          });
-        }
-      } else {
-        setTimeout(async () => {
-          var _a3;
-          const [data] = await Promise.all([
-            isAsyncFunctionData ? props.data() : props.data,
-            (_a3 = defer.value) != null ? _a3 : true
-          ]);
-          watchDataProp(data);
-        });
-      }
-      setTimeout(async () => {
-        var _a3;
-        isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
-      });
-      component.value = [access(component)].reduce((options, parent) => {
-        var _a3;
-        while (parent) {
-          if (typeof parent.setup === "function") {
-            options = { parent: options, self: (_a3 = parent.setup(component, options)) != null ? _a3 : {} };
-            if (access(parent.$parent).ReactiveView) {
-              break;
-            } else {
-              parent = access(parent.$parent);
-            }
-          } else {
-            break;
-          }
-        }
-        return options;
-      }, component.value);
-      props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
-      return (vue2) => {
-        var _a3, _b3;
-        if (isReady.value) {
-          return access(component).template(component, vue2);
-        } else {
-          return (_b3 = (_a3 = context.slots).loading) == null ? void 0 : _b3.call(_a3, { component });
-        }
-      };
-    };
-    return props.beta === "next" ? beta() : current();
-  }
-};
-
-// src/index.ts
-import { h, ref as ref2, unref as unref2, toRaw, isRef as isRef2, isReactive as isReactive2, createApp, createVNode as createVNode2, defineComponent } from "vue";
-import { formatInTimeZone } from "date-fns-tz";
-import { twMerge } from "tailwind-merge";
-console.log(`%c[ReactiveView]: ${version}`, "background-color: red; color: yellow;");
-var index_default = ReactiveView_default;
-function safeRequest(request) {
-  return new Promise(async (resolve) => {
-    var _a, _b, _c, _d;
-    const { message } = (_a = request.loading) != null ? _a : {};
-    if (request.loading) {
-      request.loading.status = true;
-      if (request.message) {
-        request.loading.message = request.message;
-      }
-    }
-    try {
-      resolve(await request.try());
-    } catch (e) {
-      if ((_b = request.alternative) != null ? _b : true) {
-        resolve(request.catch ? await request.catch(e) : console.log(e));
-      }
-    } finally {
-      await ((_c = request.finally) == null ? void 0 : _c.call(request));
-      if (request.loading) {
-        request.loading.status = false;
-      }
-      if (request.loading && message) {
-        request.loading.message = message;
-      }
-      await ((_d = request.complete) == null ? void 0 : _d.call(request));
-    }
-  });
-}
-function getProps(props = {}, param2) {
-  var _a;
-  const exclude = Array.isArray(param2) || typeof param2 === "string" ? param2 : param2.exclude;
-  const exclusions = (Array.isArray(exclude) ? exclude : [exclude]).join("|");
-  const include = (_a = param2.include) != null ? _a : {};
-  return Object.entries(include).reduce((props2, [key, val]) => {
-    props2[key] = val;
-    return props2;
-  }, Object.entries(props).reduce((props2, [key, val]) => {
-    if (!RegExp(`(^|\\|)${key}($|\\|)`, "i").test(exclusions)) {
-      props2[key] = val;
-    }
-    return props2;
-  }, {}));
+//#endregion
+//#region src/showComponent.ts
+function A(e, t = {}) {
+	let n = (e) => {
+		let n = t.id ?? `dialog_${e.children.length + 1}`, r = document.createElement("div");
+		return r.setAttribute("id", n), e.appendChild(r), r;
+	}, r = (e) => {
+		let t = document.getElementById(e);
+		if (t) return n(t);
+		{
+			let t = document.createElement("div");
+			return t.setAttribute("id", e), document.body.appendChild(t), n(t);
+		}
+	}, a = t.container || "app-dialogs", o = r(a), s = i({ setup: () => () => e }, {
+		container: a,
+		unmount: () => {
+			_(null, o), o.remove();
+		}
+	}), c = t.app ?? document.querySelector("[data-v-app]");
+	try {
+		s.appContext = c.__vue_app__._context, _(s, o);
+	} catch {
+		console.warn("[ReactiveView]: showComponent called without an active app context.");
+	}
 }
-function getReactiveViewComponent(component, options = {}) {
-  const model = (component2) => {
-    try {
-      return (component2.type || component2).props.hasOwnProperty("model");
-    } catch (e) {
-      return false;
-    }
-  };
-  const props = getProps(options, "setup");
-  const slots = typeof component === "function" ? component : () => {
-    return (component.type || component).setup ? createVNode2(component, component.setup ? {} : props) : component;
-  };
-  return model(component) ? createVNode2(component, props) : createVNode2(ReactiveView_default, props, slots);
+//#endregion
+//#region src/components/CustomButton.vue
+var j = K({
+	modelName: "CustomButton",
+	props: {
+		label: [Number, String],
+		tag: {
+			type: String,
+			default: "button"
+		},
+		loading: {
+			type: [Boolean, Function],
+			default: !1
+		},
+		padding: {
+			type: Boolean,
+			default: !0
+		},
+		buttonClass: {},
+		loadingClass: {}
+	},
+	setup(e, t, n) {
+		let r = typeof n.loading == "function" ? n.loading : () => n.loading, a = g(!1);
+		return S(() => {
+			a.value = r();
+		}), {
+			template: () => i(n.tag, { class: w(W({
+				"px-0 h-min": !n.padding,
+				"btn uppercase rounded-lg text-sm font-normal leading-none": !0
+			}).string, W(n.buttonClass).string) }, { default: () => [B(e).buttonLoading(), i("div", { class: {
+				hidden: a.value,
+				contents: !0
+			} }, [B(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 (a.value) return n.$slots.loading ? n.$slots.loading({ component: e }) : i("span", { class: W("loading", n.loadingClass) }, null);
+			}
+		};
+	}
+}), M = K({
+	modelName: "CustomModal",
+	props: {
+		title: {
+			type: [
+				Boolean,
+				Number,
+				String
+			],
+			default: "Modal Title"
+		},
+		persistent: {
+			type: Boolean,
+			default: !1
+		},
+		header: {
+			type: Boolean,
+			default: !0
+		},
+		actions: {
+			type: Boolean,
+			default: !0
+		},
+		ok: {
+			type: Boolean,
+			default: !0
+		},
+		cancel: {
+			type: Boolean,
+			default: !1
+		},
+		close: {
+			type: Boolean,
+			default: !0
+		},
+		show: {
+			type: Boolean,
+			default: !0
+		},
+		whenOk: {
+			type: Function,
+			default: () => {}
+		},
+		whenCancel: {
+			type: Function,
+			default: () => {}
+		},
+		whenClose: {
+			type: Function,
+			default: () => {}
+		},
+		whenEscape: {
+			type: Function,
+			default: () => {}
+		},
+		whenDismiss: {
+			type: Function,
+			default: () => {}
+		},
+		whenRouteChange: {
+			type: Function,
+			default: () => {}
+		},
+		class: {},
+		headerClass: {},
+		titleClass: {},
+		actionsClass: {},
+		backdropClass: {},
+		timeout: {
+			default: !1,
+			validator: (e) => typeof e == "number" || e === !1
+		},
+		modal: {
+			type: Boolean,
+			default: !1
+		},
+		id: [Number, String]
+	},
+	setup: (e, t, a) => {
+		m("dialog", e);
+		let o = g(), s = g(), c = document.getElementById(a.$attrs.container ?? "app-dialogs"), l = n(() => B(e).trigger ?? a.$slots.trigger), d = n(() => l.value ? !1 : a.show), f = n(() => !0), p = (e) => {
+			throw Error(e);
+		}, h = () => i("div", null, [i("dialog", u({
+			class: "modal",
+			ref: o
+		}, l.value || B(e).watch ? {} : c ? { id: c.lastChild?.id } : p("Modal should be called with showComponent.ts | trigger element | trigger slot")), [B(e).modalBox(), B(e).modalBackdrop()]), l.value?.({ component: e })]), _ = () => i("div", { class: w(W("modal-box flex flex-col p-0", a.class).string, W(a.class).string) }, [
+			B(e).modalHeader(),
+			B(e).modalContent(),
+			B(e).modalActions()
+		]), y = () => a.$slots.default ? a.$slots.default({ component: e }) : i("div", { class: "px-4" }, [r("No Content")]), b = () => i("div", {
+			class: w("modal-backdrop", W({ "pointer-events-none": a.persistent }).string, W(a.backdropClass).string),
+			onClick: () => B(e).hide("backdrop")
+		}, null), S = () => {
+			if (a.actions) return i("div", {
+				style: "margin: 0;",
+				class: w("modal-action px-4 pb-4", W(a.actionsClass).string)
+			}, [B(e).okButton(), B(e).cancelButton()]);
+		}, C = () => {
+			if (a.header) return i("div", { class: w("flex items-center justify-between px-4 pt-4", W(a.headerClass).string) }, [B(e).title(), B(e).closeButton()]);
+		}, T = () => {
+			if (a.close) return i(v("i-mdi-close"), {
+				class: "cursor-pointer rounded-full text-xl transition duration-500 hover:scale-80 hover:ring",
+				onClick: async () => {
+					await a.whenClose(), B(e).hide("close");
+				}
+			}, null);
+		}, E = () => {
+			if (a.ok) return i(j, {
+				label: "ok",
+				class: "btn-sm btn-success text-white",
+				onClick: () => B(e).triggerOk(),
+				disabled: !B(e).isValid
+			}, null);
+		}, D = () => {
+			if (a.cancel) return i(j, {
+				label: "cancel",
+				class: "btn-sm btn-error text-white",
+				onClick: async () => {
+					await a.whenCancel(), B(e).hide("cancel");
+				}
+			}, null);
+		}, O = () => {
+			if (["String", "Number"].includes(a.title.constructor.name)) return i("h3", { class: w("w-full text-center font-bold", W(a.titleClass).string) }, [a.title]);
+		}, k = () => o.value[a.modal ? "showModal" : "show"](), A = (e) => o.value.close(e), M = () => o.value.open, N = (e) => {
+			a.$attrs.unmount?.(e), clearTimeout(s.value);
+		};
+		return setTimeout(() => {
+			let t = "open";
+			o.value && (new MutationObserver(async () => {
+				if (B(e).showing()) try {
+					await (await import("@razaman2/event-emitter")).default.global().emit(`dialog:${t}`, {
+						type: t,
+						component: e,
+						id: a.id
+					});
+				} finally {}
+			}).observe(o.value, {
+				attributes: !0,
+				attributeFilter: [t]
+			}), o.value.addEventListener("close", async (t) => {
+				let n = t.target.returnValue || "escape";
+				try {
+					await (await import("@razaman2/event-emitter")).default.global().emit("dialog:close", {
+						e: t,
+						type: n,
+						component: e,
+						id: a.id
+					});
+				} finally {
+					await a.whenDismiss({ type: n }), N({ type: n });
+				}
+			}), typeof a.timeout == "number" && (s.value = setTimeout(() => B(e).hide("timeout"), a.timeout)), B(e).watch ? x(B(e).watch, (t) => {
+				o.value && t ? B(e).show() : o.value && B(e).hide();
+			}, { deep: !0 }) : d.value && B(e).show()), document.addEventListener("keydown", async (e) => {
+				let t = e.key === "Escape";
+				a.persistent && t ? (e.stopPropagation(), e.preventDefault()) : t && await a.whenEscape();
+			});
+		}), {
+			template: h,
+			title: O,
+			modalBox: _,
+			modalHeader: C,
+			modalContent: y,
+			modalActions: S,
+			modalBackdrop: b,
+			closeButton: T,
+			okButton: E,
+			cancelButton: D,
+			show: k,
+			hide: A,
+			showing: M,
+			triggerOk: async () => {
+				await a.whenOk(B(e).model.getData()), B(e).hide("ok");
+			},
+			isValid: f,
+			modalRef: o
+		};
+	}
+}), N = {
+	props: {
+		setup: O,
+		title: { type: String },
+		description: { type: String },
+		close: {
+			type: Boolean,
+			default: !0
+		},
+		timeout: {
+			default: 3e3,
+			validator: (e) => typeof e == "number" || e === !1
+		}
+	},
+	setup(e, t) {
+		return (e) => i(F, {
+			modelName: "CustomAlert",
+			setup: (n) => {
+				let r = {
+					default: i("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": i("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": i("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": i("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": i("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)
+				}, a = /alert-(info|success|warning|error)/.exec(e.$attrs.class)?.shift();
+				return e.timeout && p(() => {
+					setTimeout(() => B(n).hide("timeout"), e.timeout);
+				}), {
+					template: () => i("div", {
+						role: "alert",
+						class: "alert"
+					}, [
+						B(n).alertIcon(),
+						i("div", null, [B(n).alertTitle(), e.$slots.default ? e.$slots.default({ component: n }) : B(n).alertDescription()]),
+						B(n).alertClose()
+					]),
+					alertIcon: () => i("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						class: {
+							[a ? "stroke-current" : "stroke-black"]: !0,
+							"h-6 w-6 shrink-0": !0
+						},
+						fill: "none",
+						viewBox: "0 0 24 24"
+					}, [r[a] || r.default]),
+					alertTitle: () => i("h3", { class: "font-bold" }, [e.title]),
+					alertDescription: () => i("div", { class: "text-xs" }, [e.description]),
+					alertClose: () => {
+						if (e.close) return i(v("i-mdi-close"), {
+							id: "alert-close",
+							class: "text-xl cursor-pointer rounded-full hover:scale-80 hover:ring transition duration-500",
+							onClick: () => B(n).hide("close")
+						}, null);
+					},
+					hide: (n) => {
+						e.$el.remove(), t.emit("close", n);
+					}
+				};
+			}
+		}, e.$slots);
+	}
+}, P = e.default || e;
+console.log(`%c[ReactiveView]: ${D.version}`, "background-color: red; color: yellow;");
+var F = k;
+async function I(e) {
+	let { message: t } = e.loading ?? {};
+	e.loading && (e.loading.status = !0, e.message && (e.loading.message = e.message));
+	try {
+		return await e.try();
+	} catch (t) {
+		if (e.alternative ?? !0) return e.catch ? await e.catch(t) : console.log(t);
+	} finally {
+		await e.finally?.(), e.loading && (e.loading.status = !1), e.loading && t && (e.loading.message = t), await e.complete?.();
+	}
 }
-function getDate(param1, param2) {
-  var _a, _b;
-  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const format = "MM/dd/yyyy h:mm a";
-  const options = typeof param2 === "string" ? { format: param2, timezone } : { format: (_a = param2 == null ? void 0 : param2.format) != null ? _a : format, timezone: (_b = param2 == null ? void 0 : param2.timezone) != null ? _b : timezone };
-  const datetime = () => {
-    try {
-      return param1 instanceof Date ? param1 : param1.toDate();
-    } catch (e) {
-      return /* @__PURE__ */ new Date();
-    }
-  };
-  return formatInTimeZone(datetime(), options.timezone, options.format);
+function L(e = {}, t) {
+	let n = Array.isArray(t) || typeof t == "string" ? t : t.exclude, r = (Array.isArray(n) ? n : [n]).join("|"), i = t.include ?? {};
+	return Object.entries(i).reduce((e, [t, n]) => (e[t] = n, e), Object.entries(e).reduce((e, [t, n]) => (RegExp(`(^|\\|)${t}($|\\|)`, "i").test(r) || (e[t] = n), e), {}));
 }
-function access(view = {}, alternative) {
-  var _a;
-  const resolve = (target) => {
-    return new Proxy(toRaw(target), {
-      get(target2, key) {
-        const component = { tree: target2 };
-        do {
-          if (key in component.tree) {
-            return component.tree[key];
-          } else if ("self" in component.tree && key in component.tree.self) {
-            return component.tree.self[key];
-          } else {
-            component.tree = "parent" in component.tree && component.tree.parent;
-          }
-        } while (component.tree);
-        try {
-          return new alternative();
-        } catch (e) {
-          return alternative;
-        }
-      }
-    });
-  };
-  try {
-    const component = (_a = unref2(typeof view === "function" ? view() : view)) != null ? _a : {};
-    return resolve("instance" in component ? component.instance : component);
-  } catch (e) {
-    return resolve(view);
-  }
+function R(e, t = {}) {
+	let n = (e) => {
+		try {
+			let t = (e.type || e).props;
+			return t && Object.prototype.hasOwnProperty.call(t, "model");
+		} catch {
+			return !1;
+		}
+	}, r = L(t, "setup"), a = typeof e == "function" ? e : () => (e.type || e).setup ? i(e, e.setup ? {} : r) : e;
+	return n(e) ? i(e, r) : i(k, r, a);
 }
-function useSubscription() {
-  const subscriptions = [];
-  const subscription = Subscriptions.get();
-  return {
-    addSubscription(name, handler = () => false, data) {
-      subscription.subscribe(name, handler, data);
-      subscriptions.push(() => subscription.unsubscribe(name));
-    },
-    replaceSubscription(name, handler = () => false, data) {
-      subscription.replace(name, handler, data);
-      subscriptions.push(() => subscription.unsubscribe(name));
-    },
-    removeSubscriptions() {
-      subscriptions.forEach((subscription2) => safeRequest({
-        try: () => subscription2()
-      }));
-    },
-    removeSubscription(name) {
-      subscription.unsubscribe(name);
-    },
-    hasSubscription(name) {
-      return subscription.hasSubscription(name);
-    },
-    subscriptions,
-    subscription
-  };
+function z(e, t) {
+	let n = Intl.DateTimeFormat().resolvedOptions().timeZone, r = typeof t == "string" ? {
+		format: t,
+		timezone: n
+	} : {
+		format: t?.format ?? "MM/dd/yyyy h:mm a",
+		timezone: t?.timezone ?? n
+	};
+	return C((() => {
+		try {
+			return e instanceof Date ? e : e.toDate();
+		} catch {
+			return /* @__PURE__ */ new Date();
+		}
+	})(), r.timezone, r.format);
 }
-var Prop = ({ default: value, type, validator, required } = {}) => {
-  const types1 = Array.isArray(type) ? type : [type != null ? type : Array];
-  const types2 = types1.includes(Object) ? types1 : types1.concat(Object);
-  return __spreadProps(__spreadValues({}, value ? { default: isRef2(value) || isReactive2(value) ? value : ref2(value) } : {}), {
-    required,
-    validator: (value2) => {
-      try {
-        return validator ? validator(unref2(value2)) : Array.from(new Set(types2.map((type2) => {
-          return typeof type2 === "function" ? type2().constructor.name : type2;
-        }))).includes(unref2(value2).constructor.name);
-      } catch (e) {
-        return !required;
-      }
-    }
-  });
-};
-function StyleParser(styles = {}) {
-  const transform = (style, status = true) => {
-    const remove = style.split(/(-{[^}]+})/);
-    return remove.reduce((object, style2) => {
-      var _a;
-      const remove2 = /-{(.+?)}/.exec(style2);
-      (remove2 ? (_a = remove2[1]) != null ? _a : style2 : style2).split(/\s+/).forEach((item) => {
-        if (item) {
-          Object.assign(object, { [item]: remove2 ? false : status });
-        }
-      });
-      return object;
-    }, {});
-  };
-  return Array.isArray(styles) ? styles.reduce((styles2, style) => Object.assign(transform(style), styles2), {}) : typeof styles === "string" ? transform(styles) : Object.entries(styles).reduce((acc, [styles2, value]) => {
-    return __spreadValues(__spreadValues({}, acc), transform(styles2, value));
-  }, {});
+function B(e = {}, t) {
+	let n = (e) => new Proxy(y(e), { get(e, n) {
+		let r = { tree: e };
+		do
+			if (n in r.tree) return r.tree[n];
+			else if ("self" in r.tree && n in r.tree.self) return r.tree.self[n];
+			else r.tree = "parent" in r.tree && r.tree.parent;
+		while (r.tree);
+		try {
+			return new t();
+		} catch {
+			return t;
+		}
+	} });
+	try {
+		let t = b(typeof e == "function" ? e() : e) ?? {};
+		return n("instance" in t ? t.instance : t);
+	} catch {
+		return n(e);
+	}
 }
-function MergeStyles(...params) {
-  return new Proxy(params.reduce((styles, style, index, items) => {
-    var _a;
-    const item = (_a = items[items.length - index - 1]) != null ? _a : {};
-    return __spreadValues(__spreadValues({}, StyleParser(typeof item === "function" ? item(items.slice(0, index - 1)) : item)), styles);
-  }, {}), {
-    get: (target, key, receiver) => {
-      const styles = Object.entries(target).reduce((styles2, [key2, val]) => {
-        return val ? styles2.concat(key2) : styles2;
-      }, []);
-      if (key === "string") {
-        return styles.join(" ");
-      } else if (key === "array") {
-        return styles;
-      } else {
-        return Reflect.get(target, key, receiver);
-      }
-    }
-  });
+function V() {
+	let e = [], t = E.get();
+	return {
+		addSubscription(n, r, i) {
+			t.subscribe(n, r, i), e.push(() => t.unsubscribe(n));
+		},
+		replaceSubscription(n, r, i) {
+			t.replace(n, r, i), e.push(() => t.unsubscribe(n));
+		},
+		removeSubscriptions() {
+			e.forEach((e) => I({ try: () => e() }));
+		},
+		removeSubscription(e) {
+			t.unsubscribe(e);
+		},
+		hasSubscription(e) {
+			return t.hasSubscription(e);
+		},
+		subscriptions: e,
+		subscription: t
+	};
 }
-var extendVnode = (component, element) => {
-  return new Proxy(access(component), {
-    get: (target, key) => {
-      const getVnode = () => {
-        try {
-          return target[key]();
-        } catch (e) {
-          throw new Error(`${key} does not exist as vnode on component.`);
-        }
-      };
-      const vnode = getVnode();
-      return (props = {}, slots) => {
-        var _a;
-        const isFunctionClass = typeof props.class === "function";
-        const isFunctionStyle = typeof props.style === "function";
-        const _b = (_a = vnode.props) != null ? _a : {}, { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
-        const finalClasses = twMerge(isFunctionClass ? "" : classes, MergeStyles(isFunctionClass ? props.class(classes) : props.class).string);
-        const finalStyles = MergeStyles(styles, isFunctionStyle ? props.style(styles) : props.style);
-        const functionalProps = Object.entries(props).reduce((props2, [key2, value]) => {
-          var _a2;
-          if (!["class", "style", "setup"].includes(key2) && typeof value === "function") {
-            props2[key2] = value((_a2 = vnode.props) == null ? void 0 : _a2[key2]);
-          }
-          return props2;
-        }, props);
-        const finalProps = Object.assign(rest, functionalProps, { class: finalClasses, style: finalStyles });
-        const finalSlots = slots ? typeof slots === "function" ? slots(vnode.children) : slots : vnode.children;
-        const finalElement = ["undefined"].includes(typeof element) ? vnode.type : element;
-        return h(finalElement, finalProps, finalSlots);
-      };
-    }
-  });
+var H = ({ default: e, type: t, validator: n, required: r } = {}) => {
+	let i = Array.isArray(t) ? t : [t ?? Array], a = i.includes(Object) ? i : i.concat(Object);
+	return {
+		...e ? { default: l(e) || c(e) ? e : g(e) } : {},
+		required: r,
+		validator: (e) => {
+			try {
+				return n ? n(b(e)) : Array.from(new Set(a.map((e) => typeof e == "function" ? e().constructor.name : e))).includes(b(e).constructor.name);
+			} catch {
+				return !r;
+			}
+		}
+	};
 };
-function defineReactiveView(param1, param2) {
-  const instance = ref2();
-  return defineComponent({
-    name: param1 == null ? void 0 : param1.modelName,
-    props: __spreadValues({ setup }, param1 ? param1.props : {}),
-    setup() {
-      const _a = param1 != null ? param1 : {}, { setup: setup2, props } = _a, rest = __objRest(_a, ["setup", "props"]);
-      return (component) => {
-        const props2 = Object.entries(rest).reduce((props3, [key, val]) => {
-          return Object.assign(props3, { [key]: typeof val === "function" ? val(component, instance) : val });
-        }, {});
-        const slots = typeof (param1 == null ? void 0 : param1.slots) === "function" ? param1.slots(component) : Array.isArray(param1 == null ? void 0 : param1.slots) ? () => param1.slots : param1 == null ? void 0 : param1.slots;
-        return createVNode2(param2 != null ? param2 : ReactiveView_default, __spreadProps(__spreadValues(__spreadValues({}, props2), Object.assign({}, props2, typeof setup2 === "function" ? {
-          setup: (self, parent) => setup2(self, parent, component)
-        } : {})), {
-          instance
-        }), slots);
-      };
-    }
-  });
+function U(e = {}) {
+	let t = (e, t = !0) => e.split(/(-{[^}]+})/).reduce((e, n) => {
+		let r = /-{(.+?)}/.exec(n);
+		return (r ? r[1] ?? n : n).split(/\s+/).forEach((n) => {
+			n && Object.assign(e, { [n]: r ? !1 : t });
+		}), e;
+	}, {});
+	return Array.isArray(e) ? e.reduce((e, n) => Object.assign(t(n), e), {}) : typeof e == "string" ? t(e) : Object.entries(e).reduce((e, [n, r]) => ({
+		...e,
+		...t(n, r)
+	}), {});
 }
-function showComponent(component, options = {}) {
-  var _a;
-  if (options.router) {
-    console.warn("[ReactiveView]: Deprecated {router} option used with {showComponent()}. \nUse {plugins} option instead.");
-  }
-  if (!options.key || !document.getElementById(options.key)) {
-    const container = options.container || "app-dialogs";
-    const dialogs = document.getElementById(container) || document.createElement("div");
-    if (!dialogs.hasAttribute("id")) {
-      dialogs.setAttribute("id", container);
-      document.body.appendChild(dialogs);
-    }
-    const dialog = document.createElement("div");
-    const id = (_a = options.key) != null ? _a : `dialog_${dialogs.children.length + 1}`;
-    dialog.setAttribute("id", id);
-    dialogs.appendChild(dialog);
-    const app = createApp(
-      {
-        setup() {
-          return () => component;
-        }
-      },
-      {
-        __cleanup__: () => {
-          document.querySelectorAll(`#${id}`).forEach((element) => element.remove());
-          app.unmount();
-        }
-      }
-    );
-    if (options.router) {
-      return app.use(options.router).mount(`#${id}`);
-    } else if (options.plugins) {
-      return options.plugins.reduce((app2, plugin) => {
-        return app2.use(...Array.isArray(plugin) ? plugin : [plugin]);
-      }, app).mount(`#${id}`);
-    } else {
-      return app.mount(`#${id}`);
-    }
-  }
+function W(...e) {
+	return new Proxy(e.reduce((e, t, n, r) => {
+		let i = r[r.length - n - 1] ?? {};
+		return {
+			...U(typeof i == "function" ? i(r.slice(0, n - 1)) : i),
+			...e
+		};
+	}, {}), { get: (e, t, n) => {
+		let r = Object.entries(e).reduce((e, [t, n]) => n ? e.concat(t) : e, []);
+		return t === "string" ? r.join(" ") : t === "array" ? r : Reflect.get(e, t, n);
+	} });
 }
-var getData = (component, path, alternative) => {
-  const vue = access(component);
-  const data = ObjectManager2.on(componentState(vue));
-  if (path) {
-    return data.get(dataPath(vue, path), alternative);
-  } else {
-    return data.get();
-  }
-};
-var setData = (component, data, path) => {
-  const vue = access(component);
-  const diff = {
-    before: ObjectManager2.on(componentState(vue)).clone(),
-    after: path ? ObjectManager2.on(componentState(vue)).set(dataPath(vue, path), data).get() : ObjectManager2.on(componentState(vue)).set(data).get()
-  };
-  return "state" in vue ? diff : vue.$emit("update:state", diff);
-};
-var componentState = (component) => {
-  return unref2("state" in component ? component.state : component.$attrs.state);
-};
-var dataPath = (component, path) => {
-  return typeof component.$attrs["data:path"] === "function" ? component.$attrs["data:path"](path) : path;
-};
-export {
-  MergeStyles,
-  Prop,
-  StyleParser,
-  access,
-  dataPath,
-  index_default as default,
-  defineReactiveView,
-  extendVnode,
-  getData,
-  getDate,
-  getProps,
-  getReactiveViewComponent,
-  safeRequest,
-  setData,
-  setup,
-  showComponent,
-  useSubscription
-};
+var G = (e, t) => new Proxy(B(e), { get: (e, n) => {
+	let r = (() => {
+		try {
+			return e[n]();
+		} catch {
+			throw Error(`${n} does not exist as vnode on component.`);
+		}
+	})();
+	return (e = {}, n) => {
+		let i = typeof e.class == "function", a = typeof e.style == "function", { class: o, style: c, ...l } = r.props ?? {}, u = w(i ? "" : o, W(i ? e.class(o) : e.class).string), d = W(c, a ? e.style(c) : e.style), f = Object.entries(e).reduce((e, [t, n]) => (![
+			"class",
+			"style",
+			"setup"
+		].includes(t) && typeof n == "function" && (e[t] = n(r.props?.[t])), e), e), p = Object.assign(l, f, {
+			class: u,
+			style: d
+		}), m = n ? typeof n == "function" ? n(r.children) : n : r.children;
+		return s(["undefined"].includes(typeof t) ? r.type : t, p, m);
+	};
+} });
+function K(e, t) {
+	let n = g();
+	return a({
+		name: e?.modelName,
+		props: {
+			setup: O,
+			...e ? e.props : {}
+		},
+		setup() {
+			let { setup: r, props: a, ...o } = e ?? {};
+			return (a) => {
+				let s = Object.entries(o).reduce((e, [t, r]) => Object.assign(e, { [t]: typeof r == "function" ? r(a, n) : r }), {}), c = typeof e?.slots == "function" ? e.slots(a) : Array.isArray(e?.slots) ? () => e.slots : e?.slots;
+				return i(t ?? k, {
+					...s,
+					...Object.assign({}, s, typeof r == "function" ? { setup: (e, t) => r(e, t, a) } : {}),
+					instance: n
+				}, c);
+			};
+		}
+	});
+}
+var q = (e, t, n) => {
+	let r = B(e), i = P.on(Y(r));
+	return t ? i.get(X(r, t), n) : i.get();
+}, J = (e, t, n) => {
+	let r = B(e), i = {
+		before: P.on(Y(r)).clone(),
+		after: n ? P.on(Y(r)).set(X(r, n), t).get() : P.on(Y(r)).set(t).get()
+	};
+	return "state" in r ? i : r.$emit("update:state", i);
+}, Y = (e) => b("state" in e ? e.state : e.$attrs.state), X = (e, t) => typeof e.$attrs["data:path"] == "function" ? e.$attrs["data:path"](t) : t;
+//#endregion
+export { N as CustomAlert, j as CustomButton, M as CustomModal, W as MergeStyles, H as Prop, U as StyleParser, B as access, X as dataPath, F as default, K as defineReactiveView, G as extendVnode, q as getData, z as getDate, L as getProps, R as getReactiveViewComponent, I as safeRequest, J as setData, O as setup, A as showComponent, V as useSubscription };