@razaman2/reactive-view 0.0.34-beta.17 → 0.0.34-beta.19

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;
@@ -120,8 +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, dataPath, _default as default, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, 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;
@@ -120,8 +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, dataPath, _default as default, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, 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

@@ -61,6 +61,7 @@ __export(index_exports, {
   access: () => access,
   dataPath: () => dataPath,
   default: () => index_default,
+  defineReactiveView: () => defineReactiveView,
   extendVnode: () => extendVnode,
   getData: () => getData,
   getDate: () => getDate,
@@ -69,6 +70,7 @@ __export(index_exports, {
   safeRequest: () => safeRequest,
   setData: () => setData,
   setup: () => setup,
+  showComponent: () => showComponent,
   useSubscription: () => useSubscription
 });
 module.exports = __toCommonJS(index_exports);
@@ -172,7 +174,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.34-beta.17";
+var version = "0.0.34-beta.19";
 
 // src/ReactiveView.ts
 var setup = {
@@ -183,6 +185,7 @@ var setup = {
 var ReactiveView_default = {
   props: {
     setup: {},
+    beta: Boolean,
     ReactiveView: {
       type: Boolean,
       default: true
@@ -215,7 +218,7 @@ var ReactiveView_default = {
     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)) {
@@ -248,16 +251,46 @@ var ReactiveView_default = {
     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,
@@ -315,9 +348,9 @@ 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 });
       }
@@ -325,11 +358,13 @@ var ReactiveView_default = {
         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;
@@ -565,9 +600,56 @@ var extendVnode = (component, element) => {
     }
   });
 };
+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-modal";
+    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((0, import_vue2.unref)(componentState(vue)));
+  const data = import_object_manager2.default.on(componentState(vue));
   if (path) {
     return data.get(dataPath(vue, path), alternative);
   } else {
@@ -577,13 +659,13 @@ var getData = (component, path, alternative) => {
 var setData = (component, data, path) => {
   const vue = access(component);
   const diff = {
-    before: import_object_manager2.default.on((0, import_vue2.unref)(componentState(vue))).clone(),
+    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 "state" in component ? component.state : component.$attrs.state;
+  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;
@@ -594,6 +676,7 @@ var dataPath = (component, path) => {
   StyleParser,
   access,
   dataPath,
+  defineReactiveView,
   extendVnode,
   getData,
   getDate,
@@ -602,5 +685,6 @@ var dataPath = (component, path) => {
   safeRequest,
   setData,
   setup,
+  showComponent,
   useSubscription
 });

package/dist/index.mjs

@@ -124,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.17";
+var version = "0.0.34-beta.19";
 
 // src/ReactiveView.ts
 var setup = {
@@ -139,6 +139,7 @@ var setup = {
 var ReactiveView_default = {
   props: {
     setup: {},
+    beta: Boolean,
     ReactiveView: {
       type: Boolean,
       default: true
@@ -171,7 +172,7 @@ var ReactiveView_default = {
     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)) {
@@ -204,16 +205,46 @@ var ReactiveView_default = {
     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,
@@ -271,9 +302,9 @@ 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 });
       }
@@ -281,11 +312,13 @@ var ReactiveView_default = {
         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;
@@ -319,7 +352,7 @@ var ReactiveView_default = {
 };
 
 // src/index.ts
-import { h, unref as unref2, toRaw, createVNode as createVNode2 } 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;");
@@ -521,9 +554,56 @@ var extendVnode = (component, element) => {
     }
   });
 };
+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-modal";
+    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(unref2(componentState(vue)));
+  const data = ObjectManager2.on(componentState(vue));
   if (path) {
     return data.get(dataPath(vue, path), alternative);
   } else {
@@ -533,13 +613,13 @@ var getData = (component, path, alternative) => {
 var setData = (component, data, path) => {
   const vue = access(component);
   const diff = {
-    before: ObjectManager2.on(unref2(componentState(vue))).clone(),
+    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 "state" in component ? component.state : component.$attrs.state;
+  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;
@@ -550,6 +630,7 @@ export {
   access,
   dataPath,
   index_default as default,
+  defineReactiveView,
   extendVnode,
   getData,
   getDate,
@@ -558,5 +639,6 @@ export {
   safeRequest,
   setData,
   setup,
+  showComponent,
   useSubscription
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.0.34-beta.17",
+    "version": "0.0.34-beta.19",
     "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",