@razaman2/reactive-view 0.0.34-beta.2 → 0.0.34-beta.20

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
+import { SetupContext, ComponentPublicInstance, UnwrapRef, defineComponent } from 'vue';
 
 type ComponentExtension = {
     parent?: ComponentExtension;
@@ -43,6 +43,7 @@ declare const setup: {
 declare const _default: {
     props: {
         setup: {};
+        beta: BooleanConstructor;
         ReactiveView: {
             type: BooleanConstructor;
             default: boolean;
@@ -53,7 +54,9 @@ declare const _default: {
         notifications: ObjectConstructor;
         subscriptions: ObjectConstructor;
         beforeSetData: FunctionConstructor;
-        data: {};
+        data: {
+            default: () => {};
+        };
         defaultData: {};
         getDefaultData: {
             type: FunctionConstructor;
@@ -72,6 +75,9 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
+        state: {
+            default: () => {};
+        };
     };
     setup(props: Record<string, any>, context: SetupContext): (vue: ComponentPublicInstance) => any;
 };
@@ -115,5 +121,14 @@ declare function useSubscription(): {
 declare function StyleParser(styles?: Array<string> | Record<string, boolean> | string): {};
 declare function MergeStyles(...params: any): any;
 declare const extendVnode: (component: Record<string, any>, element: any) => Record<string, (props?: Record<string, any>, slots?: Record<string, any> | ((slots: Record<string, any>) => Record<string, any>)) => any>;
+declare function defineReactiveView(options: Record<string, any>, component: typeof _default, _options: Record<string, any>): ReturnType<typeof defineComponent>;
+declare function showComponent(component: any, options?: {
+    container?: string;
+    key?: string;
+    router?: any;
+}): void;
+declare const getData: (component: any, path: number | string, alternative: any) => any;
+declare const setData: (component: any, data: any, path?: string) => any;
+declare const dataPath: (component: any, path: string | number) => any;
 
-export { MergeStyles, StyleParser, access, _default as default, extendVnode, getDate, getProps, getReactiveViewComponent, safeRequest, setup, useSubscription };
+export { MergeStyles, StyleParser, access, dataPath, _default as default, defineReactiveView, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, setup, showComponent, useSubscription };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
+import { SetupContext, ComponentPublicInstance, UnwrapRef, defineComponent } from 'vue';
 
 type ComponentExtension = {
     parent?: ComponentExtension;
@@ -43,6 +43,7 @@ declare const setup: {
 declare const _default: {
     props: {
         setup: {};
+        beta: BooleanConstructor;
         ReactiveView: {
             type: BooleanConstructor;
             default: boolean;
@@ -53,7 +54,9 @@ declare const _default: {
         notifications: ObjectConstructor;
         subscriptions: ObjectConstructor;
         beforeSetData: FunctionConstructor;
-        data: {};
+        data: {
+            default: () => {};
+        };
         defaultData: {};
         getDefaultData: {
             type: FunctionConstructor;
@@ -72,6 +75,9 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
+        state: {
+            default: () => {};
+        };
     };
     setup(props: Record<string, any>, context: SetupContext): (vue: ComponentPublicInstance) => any;
 };
@@ -115,5 +121,14 @@ declare function useSubscription(): {
 declare function StyleParser(styles?: Array<string> | Record<string, boolean> | string): {};
 declare function MergeStyles(...params: any): any;
 declare const extendVnode: (component: Record<string, any>, element: any) => Record<string, (props?: Record<string, any>, slots?: Record<string, any> | ((slots: Record<string, any>) => Record<string, any>)) => any>;
+declare function defineReactiveView(options: Record<string, any>, component: typeof _default, _options: Record<string, any>): ReturnType<typeof defineComponent>;
+declare function showComponent(component: any, options?: {
+    container?: string;
+    key?: string;
+    router?: any;
+}): void;
+declare const getData: (component: any, path: number | string, alternative: any) => any;
+declare const setData: (component: any, data: any, path?: string) => any;
+declare const dataPath: (component: any, path: string | number) => any;
 
-export { MergeStyles, StyleParser, access, _default as default, extendVnode, getDate, getProps, getReactiveViewComponent, safeRequest, setup, useSubscription };
+export { MergeStyles, StyleParser, access, dataPath, _default as default, defineReactiveView, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, setup, showComponent, useSubscription };

package/dist/index.js

@@ -59,16 +59,22 @@ __export(index_exports, {
   MergeStyles: () => MergeStyles,
   StyleParser: () => StyleParser,
   access: () => access,
+  dataPath: () => dataPath,
   default: () => index_default,
+  defineReactiveView: () => defineReactiveView,
   extendVnode: () => extendVnode,
+  getData: () => getData,
   getDate: () => getDate,
   getProps: () => getProps,
   getReactiveViewComponent: () => getReactiveViewComponent,
   safeRequest: () => safeRequest,
+  setData: () => setData,
   setup: () => setup,
+  showComponent: () => showComponent,
   useSubscription: () => useSubscription
 });
 module.exports = __toCommonJS(index_exports);
+var import_object_manager2 = __toESM(require("@razaman2/object-manager"));
 
 // src/Subscription.ts
 var Subscription = class _Subscription {
@@ -168,7 +174,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.34-beta.2";
+var version = "0.0.34-beta.20";
 
 // src/ReactiveView.ts
 var setup = {
@@ -179,17 +185,16 @@ var setup = {
 var ReactiveView_default = {
   props: {
     setup: {},
+    beta: Boolean,
     ReactiveView: {
       type: Boolean,
       default: true
     },
-    instance: {
-      default: () => (0, import_vue.ref)()
-    },
+    instance: { default: () => (0, import_vue.ref)() },
     notifications: Object,
     subscriptions: Object,
     beforeSetData: Function,
-    data: {},
+    data: { default: () => ({}) },
     defaultData: {},
     getDefaultData: {
       type: Function,
@@ -209,10 +214,27 @@ var ReactiveView_default = {
     debug: {
       type: Boolean,
       default: false
-    }
+    },
+    state: { default: () => (0, import_vue.reactive)({}) }
   },
   setup(props, context) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    const diff = (before, after) => {
+      const change = after.paths().reduce((change2, path) => {
+        if (before.get(path) !== after.get(path)) {
+          change2.set(path, after.get(path));
+        }
+        return change2;
+      }, import_object_manager.default.on({}));
+      return { before: before.get(), after: after.get(), change: change.get() };
+    };
+    const dataPath2 = (path) => {
+      try {
+        return context.attrs["data:path"](path);
+      } catch (e) {
+        return path;
+      }
+    };
     const template = (component2, vue2) => {
       return (0, import_vue.createVNode)(
         "div",
@@ -224,21 +246,51 @@ var ReactiveView_default = {
     };
     const isValid = (0, import_vue.ref)(false);
     const isReady = (0, import_vue.ref)(false);
-    const isFunctionData = ["Function"].includes(((_a = props.data) != null ? _a : {}).constructor.name);
-    const isAsyncFunctionData = ["AsyncFunction"].includes(((_b = props.data) != null ? _b : {}).constructor.name);
-    const isPromiseData = ["Promise"].includes(((_c = props.data) != null ? _c : {}).constructor.name) || isAsyncFunctionData;
+    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 isPromiseData = ["Promise"].includes((_c = props.data) == null ? void 0 : _c.constructor.name) || isAsyncFunctionData;
     const defer = (0, import_vue.ref)(typeof props.defer === "function" ? props.defer() : props.defer);
     const vue = (0, import_vue.getCurrentInstance)();
-    if ((isPromiseData || isFunctionData) && !("defaultData" in vue.vnode.props)) {
+    if ((isFunctionData || isPromiseData) && !("defaultData" in vue.vnode.props)) {
       console.error("[ReactiveView]: defaultData is required for promise or async function data.");
     }
     const defaultData = props.getDefaultData(
       ((_d = vue.vnode.props) == null ? void 0 : _d.hasOwnProperty("defaultData")) ? vue.vnode.props.defaultData : ((_e = vue.vnode.props) == null ? void 0 : _e.hasOwnProperty("data")) ? Array.isArray(vue.vnode.props.data) ? [] : {} : {}
     );
     const datatype = Array.isArray(defaultData) ? [] : {};
+    const normalize = (data) => {
+      var _a2, _b2, _c2;
+      console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, data, defaultData);
+      if ((0, import_vue.isReactive)(data)) {
+        return data;
+      } else if ((0, import_vue.isRef)(data)) {
+        try {
+          if (["Array", "Object"].includes((0, import_vue.unref)(data).constructor.name)) {
+            return (0, import_vue.unref)(data);
+          } else {
+            return (0, import_vue.reactive)({ "": (0, import_vue.unref)(data) });
+          }
+        } catch (e) {
+          return (0, import_vue.reactive)({ "": (0, import_vue.unref)(data) });
+        }
+      } else {
+        if (isFunctionData || isPromiseData) {
+        } else {
+          try {
+            if (["Array", "Object"].includes(data.constructor.name)) {
+              return (0, import_vue.reactive)(((_a2 = vue.vnode.props) == null ? void 0 : _a2.hasOwnProperty("data")) ? data : defaultData);
+            } else {
+              return (0, import_vue.reactive)({ "": ((_b2 = vue.vnode.props) == null ? void 0 : _b2.hasOwnProperty("data")) ? data : defaultData });
+            }
+          } catch (e) {
+            return (0, import_vue.reactive)({ "": ((_c2 = vue.vnode.props) == null ? void 0 : _c2.hasOwnProperty("data")) ? data : defaultData });
+          }
+        }
+      }
+    };
     const config = {
-      data: (0, import_vue.reactive)(import_object_manager.default.on(
-        isPromiseData || isFunctionData || (0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? datatype : ((_f = vue.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? props.data : datatype
+      data: props.beta ? normalize((_f = vue.vnode.props) == null ? void 0 : _f.data) : (0, import_vue.reactive)(import_object_manager.default.on(
+        isPromiseData || isFunctionData || (0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? datatype : ((_g = vue.vnode.props) == null ? void 0 : _g.hasOwnProperty("data")) ? props.data : datatype
       ).clone()),
       defaultData: import_object_manager.default.on(defaultData).clone(),
       notifications: props.notifications,
@@ -254,8 +306,8 @@ var ReactiveView_default = {
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
               const before = target.getData();
-              const after = (params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData)).get();
-              if (beforeSetData({ before, after }, target)) {
+              const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
+              if (beforeSetData(diff(import_object_manager.default.on(before), after), target)) {
                 target[key](...params);
               }
             } else {
@@ -268,24 +320,25 @@ var ReactiveView_default = {
         }
       }
     });
-    const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, isValid } });
+    const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, dataPath: dataPath2, isValid } });
     if (props.debug) {
       console.log("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
     }
     const watchDataProp = (dataProp) => {
-      var _a2, _b2, _c2;
+      var _a2, _b2, _c2, _d2;
       const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
         callback: (_b2 = ((_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {}).callback) != null ? _b2 : context.attrs["data:callback"],
-        options: Object.assign(__spreadValues(__spreadValues(__spreadValues({}, context.attrs["data:immediate"] ? { immediate: context.attrs["data:immediate"] } : {}), context.attrs["data:deep"] ? { deep: context.attrs["data:deep"] } : {}), context.attrs["data:once"] ? { once: context.attrs["data:once"] } : {}), ((_c2 = context.attrs["onUpdate:data"]) != null ? _c2 : {}).options)
+        options: Object.assign(__spreadValues(__spreadValues({
+          deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : 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.log(`[ReactiveView]:data`, { config: config2, dataProp });
       }
       (0, import_vue.watch)(isFunctionData || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
         var _a3;
-        const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
         if (typeof config2.callback === "function") {
-          model.replaceData((_a3 = config2.callback(diff, { component })) != null ? _a3 : after);
+          model.replaceData((_a3 = config2.callback(diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component })) != null ? _a3 : after);
         } else {
           model.replaceData(after);
         }
@@ -295,22 +348,23 @@ var ReactiveView_default = {
       const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
         callback: context.attrs["onUpdate:model"],
         options: Object.assign(__spreadValues(__spreadValues({
-          deep: (_g = context.attrs["model:deep"]) != null ? _g : true
-        }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_h = context.attrs["onUpdate:model"]) != null ? _h : {}).options)
-      } : (_i = context.attrs["onUpdate:model"]) != null ? _i : {};
+          deep: (_h = context.attrs["model:deep"]) != null ? _h : true
+        }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_i = context.attrs["onUpdate:model"]) != null ? _i : {}).options)
+      } : (_j = context.attrs["onUpdate:model"]) != null ? _j : {};
       if (context.attrs["model:log"]) {
         console.log(`[ReactiveView]:model`, { config: config2 });
       }
       (0, import_vue.watch)(() => model.getData(), (after, before) => {
-        const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
-        config2.callback(diff, { component });
+        config2.callback(diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component });
       }, config2.options);
     }
-    setTimeout(async () => {
-      var _a2;
-      const [data] = await Promise.all([isAsyncFunctionData ? props.data() : props.data, (_a2 = defer.value) != null ? _a2 : true]);
-      watchDataProp(data);
-    });
+    if (!props.beta) {
+      setTimeout(async () => {
+        var _a2;
+        const [data] = await Promise.all([isAsyncFunctionData ? props.data() : props.data, (_a2 = defer.value) != null ? _a2 : true]);
+        watchDataProp(data);
+      });
+    }
     setTimeout(async () => {
       var _a2;
       isReady.value = (_a2 = await defer.value) != null ? _a2 : true;
@@ -346,6 +400,8 @@ var ReactiveView_default = {
 // src/index.ts
 var import_vue2 = require("vue");
 var import_date_fns_tz = require("date-fns-tz");
+var import_tailwind_merge = require("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) => {
@@ -375,7 +431,7 @@ function safeRequest(request) {
     }
   });
 }
-function getProps(props, param2) {
+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("|");
@@ -420,7 +476,7 @@ function getDate(param1, param2) {
 }
 function access(view = {}, alternative) {
   const resolve = (target) => {
-    return new Proxy(target, {
+    return new Proxy((0, import_vue2.toRaw)(target), {
       get(target2, key) {
         const component = { tree: target2 };
         do {
@@ -441,9 +497,8 @@ function access(view = {}, alternative) {
     });
   };
   try {
-    const component = typeof view === "function" ? view() : view;
-    const ref2 = (0, import_vue2.isRef)(component) ? component.value : component;
-    return resolve(ref2.ReactiveView ? access(ref2.instance) : ref2);
+    const component = (0, import_vue2.unref)(typeof view === "function" ? view() : view);
+    return resolve("instance" in component ? component.instance : component);
   } catch (e) {
     return resolve(view);
   }
@@ -526,37 +581,110 @@ var extendVnode = (component, element) => {
       const vnode = getVnode();
       return (props = {}, slots) => {
         var _a;
-        const _b = getProps((_a = vnode.props) != null ? _a : {}, []), { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
-        const finalClasses = MergeStyles(classes, typeof props.class === "function" ? props.class(classes) : props.class);
+        const isFunctionClass = typeof props.class === "function";
+        const _b = (_a = vnode.props) != null ? _a : {}, { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
+        const finalClasses = (0, import_tailwind_merge.twMerge)(isFunctionClass ? "" : classes, MergeStyles(isFunctionClass ? props.class(classes) : props.class).string);
+        const finalStyles = MergeStyles(styles, typeof props.style === "function" ? props.style(styles) : props.style);
         const functionalProps = Object.entries(props).reduce((props2, [key2, value]) => {
-          if (![
-            "class"
-            /*, "style"*/
-          ].includes(key2) && typeof value === "function") {
-            props2[key2] = value(vnode.props[key2]);
+          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 = typeof slots === "function" ? slots(vnode.children) : vnode.children;
-        return (0, import_vue2.h)(["string", "undefined"].includes(typeof element) ? vnode : element, finalProps, finalSlots);
+        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 (0, import_vue2.h)(finalElement, finalProps, finalSlots);
+      };
+    }
+  });
+};
+function defineReactiveView(param1, param2) {
+  console.log(`log params:`, { param1, param2 });
+  return (0, import_vue2.defineComponent)({
+    props: __spreadValues({ setup }, param1.props),
+    setup() {
+      const _a = param1, { setup: setup2, props } = _a, rest = __objRest(_a, ["setup", "props"]);
+      return (component) => {
+        return (0, import_vue2.createVNode)(param2 != null ? param2 : ReactiveView_default, Object.assign({}, rest, setup2 ? {
+          setup: (self, parent) => setup2(self, parent, component)
+          // @ts-ignore
+        } : {}), typeof param1.slots === "function" ? param1.slots(component) : param1.slots);
       };
     }
   });
+}
+function showComponent(component, options = {}) {
+  var _a;
+  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 = (0, import_vue2.createApp)(
+      {
+        setup() {
+          return () => component;
+        }
+      },
+      {
+        __cleanup__: () => {
+          document.querySelectorAll(`#${id}`).forEach((element) => element.remove());
+        }
+      }
+    );
+    if (options.router) {
+      app.use(options.router).mount(`#${id}`);
+    } else {
+      app.mount(`#${id}`);
+    }
+  }
+}
+var getData = (component, path, alternative) => {
+  const vue = access(component);
+  const data = import_object_manager2.default.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: import_object_manager2.default.on(componentState(vue)).clone(),
+    after: path ? import_object_manager2.default.on(componentState(vue)).set(dataPath(vue, path), data).get() : import_object_manager2.default.on(componentState(vue)).set(data).get()
+  };
+  return "state" in vue ? diff : vue.$emit("update:state", diff);
+};
+var componentState = (component) => {
+  return (0, import_vue2.unref)("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;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MergeStyles,
   StyleParser,
   access,
+  dataPath,
+  defineReactiveView,
   extendVnode,
+  getData,
   getDate,
   getProps,
   getReactiveViewComponent,
   safeRequest,
+  setData,
   setup,
+  showComponent,
   useSubscription
 });

package/dist/index.mjs

@@ -27,6 +27,9 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
+// src/index.ts
+import ObjectManager2 from "@razaman2/object-manager";
+
 // src/Subscription.ts
 var Subscription = class _Subscription {
   constructor() {
@@ -121,11 +124,11 @@ var Subscriptions = _Subscriptions;
 // src/ReactiveView.ts
 import ObjectManager from "@razaman2/object-manager";
 import DataManager from "@razaman2/data-manager";
-import { ref, reactive, watch, isRef, isReactive, createVNode, getCurrentInstance } from "vue";
+import { ref, reactive, watch, unref, isRef, isReactive, createVNode, getCurrentInstance } from "vue";
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.34-beta.2";
+var version = "0.0.34-beta.20";
 
 // src/ReactiveView.ts
 var setup = {
@@ -136,17 +139,16 @@ var setup = {
 var ReactiveView_default = {
   props: {
     setup: {},
+    beta: Boolean,
     ReactiveView: {
       type: Boolean,
       default: true
     },
-    instance: {
-      default: () => ref()
-    },
+    instance: { default: () => ref() },
     notifications: Object,
     subscriptions: Object,
     beforeSetData: Function,
-    data: {},
+    data: { default: () => ({}) },
     defaultData: {},
     getDefaultData: {
       type: Function,
@@ -166,10 +168,27 @@ var ReactiveView_default = {
     debug: {
       type: Boolean,
       default: false
-    }
+    },
+    state: { default: () => reactive({}) }
   },
   setup(props, context) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    const diff = (before, after) => {
+      const change = after.paths().reduce((change2, path) => {
+        if (before.get(path) !== after.get(path)) {
+          change2.set(path, after.get(path));
+        }
+        return change2;
+      }, ObjectManager.on({}));
+      return { before: before.get(), after: after.get(), change: change.get() };
+    };
+    const dataPath2 = (path) => {
+      try {
+        return context.attrs["data:path"](path);
+      } catch (e) {
+        return path;
+      }
+    };
     const template = (component2, vue2) => {
       return createVNode(
         "div",
@@ -181,21 +200,51 @@ var ReactiveView_default = {
     };
     const isValid = ref(false);
     const isReady = ref(false);
-    const isFunctionData = ["Function"].includes(((_a = props.data) != null ? _a : {}).constructor.name);
-    const isAsyncFunctionData = ["AsyncFunction"].includes(((_b = props.data) != null ? _b : {}).constructor.name);
-    const isPromiseData = ["Promise"].includes(((_c = props.data) != null ? _c : {}).constructor.name) || isAsyncFunctionData;
+    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 isPromiseData = ["Promise"].includes((_c = props.data) == null ? void 0 : _c.constructor.name) || isAsyncFunctionData;
     const defer = ref(typeof props.defer === "function" ? props.defer() : props.defer);
     const vue = getCurrentInstance();
-    if ((isPromiseData || isFunctionData) && !("defaultData" in vue.vnode.props)) {
+    if ((isFunctionData || isPromiseData) && !("defaultData" in vue.vnode.props)) {
       console.error("[ReactiveView]: defaultData is required for promise or async function data.");
     }
     const defaultData = props.getDefaultData(
       ((_d = vue.vnode.props) == null ? void 0 : _d.hasOwnProperty("defaultData")) ? vue.vnode.props.defaultData : ((_e = vue.vnode.props) == null ? void 0 : _e.hasOwnProperty("data")) ? Array.isArray(vue.vnode.props.data) ? [] : {} : {}
     );
     const datatype = Array.isArray(defaultData) ? [] : {};
+    const normalize = (data) => {
+      var _a2, _b2, _c2;
+      console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, data, defaultData);
+      if (isReactive(data)) {
+        return data;
+      } else if (isRef(data)) {
+        try {
+          if (["Array", "Object"].includes(unref(data).constructor.name)) {
+            return unref(data);
+          } else {
+            return reactive({ "": unref(data) });
+          }
+        } catch (e) {
+          return reactive({ "": unref(data) });
+        }
+      } else {
+        if (isFunctionData || isPromiseData) {
+        } else {
+          try {
+            if (["Array", "Object"].includes(data.constructor.name)) {
+              return reactive(((_a2 = vue.vnode.props) == null ? void 0 : _a2.hasOwnProperty("data")) ? data : defaultData);
+            } else {
+              return reactive({ "": ((_b2 = vue.vnode.props) == null ? void 0 : _b2.hasOwnProperty("data")) ? data : defaultData });
+            }
+          } catch (e) {
+            return reactive({ "": ((_c2 = vue.vnode.props) == null ? void 0 : _c2.hasOwnProperty("data")) ? data : defaultData });
+          }
+        }
+      }
+    };
     const config = {
-      data: reactive(ObjectManager.on(
-        isPromiseData || isFunctionData || isRef(props.data) || isReactive(props.data) ? datatype : ((_f = vue.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? props.data : datatype
+      data: props.beta ? normalize((_f = vue.vnode.props) == null ? void 0 : _f.data) : reactive(ObjectManager.on(
+        isPromiseData || isFunctionData || isRef(props.data) || isReactive(props.data) ? datatype : ((_g = vue.vnode.props) == null ? void 0 : _g.hasOwnProperty("data")) ? props.data : datatype
       ).clone()),
       defaultData: ObjectManager.on(defaultData).clone(),
       notifications: props.notifications,
@@ -211,8 +260,8 @@ var ReactiveView_default = {
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
               const before = target.getData();
-              const after = (params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData)).get();
-              if (beforeSetData({ before, after }, target)) {
+              const after = params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData);
+              if (beforeSetData(diff(ObjectManager.on(before), after), target)) {
                 target[key](...params);
               }
             } else {
@@ -225,24 +274,25 @@ var ReactiveView_default = {
         }
       }
     });
-    const component = ref({ parent: { self: vue.proxy }, self: { template, model, isValid } });
+    const component = ref({ parent: { self: vue.proxy }, self: { template, model, dataPath: dataPath2, isValid } });
     if (props.debug) {
       console.log("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
     }
     const watchDataProp = (dataProp) => {
-      var _a2, _b2, _c2;
+      var _a2, _b2, _c2, _d2;
       const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
         callback: (_b2 = ((_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {}).callback) != null ? _b2 : context.attrs["data:callback"],
-        options: Object.assign(__spreadValues(__spreadValues(__spreadValues({}, context.attrs["data:immediate"] ? { immediate: context.attrs["data:immediate"] } : {}), context.attrs["data:deep"] ? { deep: context.attrs["data:deep"] } : {}), context.attrs["data:once"] ? { once: context.attrs["data:once"] } : {}), ((_c2 = context.attrs["onUpdate:data"]) != null ? _c2 : {}).options)
+        options: Object.assign(__spreadValues(__spreadValues({
+          deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : 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.log(`[ReactiveView]:data`, { config: config2, dataProp });
       }
       watch(isFunctionData || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
         var _a3;
-        const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
         if (typeof config2.callback === "function") {
-          model.replaceData((_a3 = config2.callback(diff, { component })) != null ? _a3 : after);
+          model.replaceData((_a3 = config2.callback(diff(ObjectManager.on(before), ObjectManager.on(after)), { component })) != null ? _a3 : after);
         } else {
           model.replaceData(after);
         }
@@ -252,22 +302,23 @@ var ReactiveView_default = {
       const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
         callback: context.attrs["onUpdate:model"],
         options: Object.assign(__spreadValues(__spreadValues({
-          deep: (_g = context.attrs["model:deep"]) != null ? _g : true
-        }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_h = context.attrs["onUpdate:model"]) != null ? _h : {}).options)
-      } : (_i = context.attrs["onUpdate:model"]) != null ? _i : {};
+          deep: (_h = context.attrs["model:deep"]) != null ? _h : true
+        }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_i = context.attrs["onUpdate:model"]) != null ? _i : {}).options)
+      } : (_j = context.attrs["onUpdate:model"]) != null ? _j : {};
       if (context.attrs["model:log"]) {
         console.log(`[ReactiveView]:model`, { config: config2 });
       }
       watch(() => model.getData(), (after, before) => {
-        const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
-        config2.callback(diff, { component });
+        config2.callback(diff(ObjectManager.on(before), ObjectManager.on(after)), { component });
       }, config2.options);
     }
-    setTimeout(async () => {
-      var _a2;
-      const [data] = await Promise.all([isAsyncFunctionData ? props.data() : props.data, (_a2 = defer.value) != null ? _a2 : true]);
-      watchDataProp(data);
-    });
+    if (!props.beta) {
+      setTimeout(async () => {
+        var _a2;
+        const [data] = await Promise.all([isAsyncFunctionData ? props.data() : props.data, (_a2 = defer.value) != null ? _a2 : true]);
+        watchDataProp(data);
+      });
+    }
     setTimeout(async () => {
       var _a2;
       isReady.value = (_a2 = await defer.value) != null ? _a2 : true;
@@ -301,8 +352,10 @@ var ReactiveView_default = {
 };
 
 // src/index.ts
-import { createVNode as createVNode2, isRef as isRef2, h } from "vue";
+import { h, unref as unref2, toRaw, 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) => {
@@ -332,7 +385,7 @@ function safeRequest(request) {
     }
   });
 }
-function getProps(props, param2) {
+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("|");
@@ -377,7 +430,7 @@ function getDate(param1, param2) {
 }
 function access(view = {}, alternative) {
   const resolve = (target) => {
-    return new Proxy(target, {
+    return new Proxy(toRaw(target), {
       get(target2, key) {
         const component = { tree: target2 };
         do {
@@ -398,9 +451,8 @@ function access(view = {}, alternative) {
     });
   };
   try {
-    const component = typeof view === "function" ? view() : view;
-    const ref2 = isRef2(component) ? component.value : component;
-    return resolve(ref2.ReactiveView ? access(ref2.instance) : ref2);
+    const component = unref2(typeof view === "function" ? view() : view);
+    return resolve("instance" in component ? component.instance : component);
   } catch (e) {
     return resolve(view);
   }
@@ -483,37 +535,110 @@ var extendVnode = (component, element) => {
       const vnode = getVnode();
       return (props = {}, slots) => {
         var _a;
-        const _b = getProps((_a = vnode.props) != null ? _a : {}, []), { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
-        const finalClasses = MergeStyles(classes, typeof props.class === "function" ? props.class(classes) : props.class);
+        const isFunctionClass = typeof props.class === "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, typeof props.style === "function" ? props.style(styles) : props.style);
         const functionalProps = Object.entries(props).reduce((props2, [key2, value]) => {
-          if (![
-            "class"
-            /*, "style"*/
-          ].includes(key2) && typeof value === "function") {
-            props2[key2] = value(vnode.props[key2]);
+          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 = typeof slots === "function" ? slots(vnode.children) : vnode.children;
-        return h(["string", "undefined"].includes(typeof element) ? vnode : element, finalProps, finalSlots);
+        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);
       };
     }
   });
 };
+function defineReactiveView(param1, param2) {
+  console.log(`log params:`, { param1, param2 });
+  return defineComponent({
+    props: __spreadValues({ setup }, param1.props),
+    setup() {
+      const _a = param1, { setup: setup2, props } = _a, rest = __objRest(_a, ["setup", "props"]);
+      return (component) => {
+        return createVNode2(param2 != null ? param2 : ReactiveView_default, Object.assign({}, rest, setup2 ? {
+          setup: (self, parent) => setup2(self, parent, component)
+          // @ts-ignore
+        } : {}), typeof param1.slots === "function" ? param1.slots(component) : param1.slots);
+      };
+    }
+  });
+}
+function showComponent(component, options = {}) {
+  var _a;
+  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());
+        }
+      }
+    );
+    if (options.router) {
+      app.use(options.router).mount(`#${id}`);
+    } else {
+      app.mount(`#${id}`);
+    }
+  }
+}
+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,
   StyleParser,
   access,
+  dataPath,
   index_default as default,
+  defineReactiveView,
   extendVnode,
+  getData,
   getDate,
   getProps,
   getReactiveViewComponent,
   safeRequest,
+  setData,
   setup,
+  showComponent,
   useSubscription
 };

package/package.json

@@ -1,46 +1,47 @@
-{
-    "name": "@razaman2/reactive-view",
-    "version": "0.0.34-beta.2",
-    "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"
-    },
-    "keywords": [
-        "vue",
-        "vue-helper",
-        "reactive-view",
-        "vue-class-component",
-        "reactive-ui"
-    ],
-    "author": "razaman2",
-    "license": "MIT",
-    "dependencies": {
-        "@razaman2/data-manager": "^3.2.12",
-        "@razaman2/event-emitter": "^2.1.1",
-        "@razaman2/object-manager": "^3.4.2",
-        "date-fns": "^4.1.0",
-        "date-fns-tz": "^3.2.0",
-        "uuid": "^11.1.0"
-    },
-    "peerDependencies": {
-        "vue": "^3.5.18"
-    },
-    "devDependencies": {
-        "@types/uuid": "^10.0.0",
-        "tsup": "^8.5.0",
-        "typescript": "^5.9.2",
-        "vitest": "^3.2.4"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "files": [
-        "dist"
-    ]
-}
+{
+    "name": "@razaman2/reactive-view",
+    "version": "0.0.34-beta.20",
+    "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"
+    },
+    "keywords": [
+        "vue",
+        "vue-helper",
+        "reactive-view",
+        "vue-class-component",
+        "reactive-ui"
+    ],
+    "author": "razaman2",
+    "license": "MIT",
+    "dependencies": {
+        "@razaman2/data-manager": "^3.2.12",
+        "@razaman2/event-emitter": "^2.1.1",
+        "@razaman2/object-manager": "^3.4.5",
+        "date-fns": "^4.1.0",
+        "date-fns-tz": "^3.2.0",
+        "tailwind-merge": "^3.3.1",
+        "uuid": "^11.1.0"
+    },
+    "peerDependencies": {
+        "vue": "^3.5.20"
+    },
+    "devDependencies": {
+        "@types/uuid": "^10.0.0",
+        "tsup": "^8.5.0",
+        "typescript": "^5.9.2",
+        "vitest": "^3.2.4"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist"
+    ]
+}