@razaman2/reactive-view 0.0.14 → 0.0.16

package/dist/index.js

@@ -164,7 +164,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.14";
+var version = "0.0.16";
 
 // src/ReactiveView.ts
 var props = {
@@ -204,29 +204,30 @@ var setup = {
 var ReactiveView_default = {
   props: __spreadValues(__spreadValues({}, setup), props),
   setup(props2, context) {
-    var _a, _b, _c;
-    const template = (vue, options) => {
+    var _a, _b, _c, _d, _e;
+    const template = (vue, options2) => {
       var _a2, _b2, _c2;
       const vnode = context.slots.default ? (0, import_vue.h)(
         "div",
         context.attrs,
-        context.slots.default({ vue, options, props: props2, context })
+        context.slots.default({ vue, options: options2, props: props2, context })
       ) : (0, import_vue.h)("div", __spreadValues({
         style: {
           color: "red",
           textAlign: "center"
         }
       }, context.attrs), `${props2.modelName}: ${name}@${version}`);
-      return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, options, props: props2, context })) != null ? _c2 : vnode;
+      return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, options: options2, props: props2, context })) != null ? _c2 : vnode;
     };
     const isValid = (0, import_vue.ref)(false);
     const sync = (0, import_vue.ref)(false);
     const rendered = (0, import_vue.ref)(false);
+    const component = (0, import_vue.ref)((_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.proxy);
     const defaultData = props2.getDefaultData(
-      Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
+      Array.isArray(props2.state) ? (_b = props2.defaultData) != null ? _b : [] : (_c = props2.defaultData) != null ? _c : {}
     );
     const type = Array.isArray(defaultData) ? [] : {};
-    const state = (0, import_vue.reactive)(import_data_manager.default.transform(props2.await ? type : (_c = props2.state) != null ? _c : type));
+    const state = (0, import_vue.reactive)(import_data_manager.default.transform(props2.await ? type : (_d = props2.state) != null ? _d : type));
     const config = {
       defaultData,
       data: state,
@@ -235,22 +236,33 @@ var ReactiveView_default = {
       notifications: props2.notifications,
       subscriptions: props2.subscriptions
     };
-    return ($vue) => {
-      var _a2, _c2, _d;
-      const getState = new Proxy(props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new import_data_manager.default(config), {
-        get(target, property, receiver) {
-          var _a3, _b3;
-          const beforeSetData = (_b3 = (_a3 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a3.beforeSetData) != null ? _b3 : access($vue).beforeSetData;
-          if (["setData", "replaceData"].includes(property) && typeof beforeSetData === "function") {
-            return (...params) => {
-              const type2 = Array.isArray(defaultData) ? [] : {};
-              beforeSetData(import_object_manager.default.on(type2).set(...params).get(), target);
-            };
-          } else {
-            return Reflect.get(target, property, receiver);
-          }
+    const getState = new Proxy(props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new import_data_manager.default(config), {
+      get(target, property, receiver) {
+        if (["setData", "replaceData"].includes(property)) {
+          return (...params) => {
+            const type2 = Array.isArray(defaultData) ? [] : {};
+            (0, import_vue.nextTick)(() => {
+              var _a2, _b2;
+              const beforeSetData = (_b2 = (_a2 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a2.beforeSetData) != null ? _b2 : access(component).beforeSetData;
+              if (typeof beforeSetData === "function") {
+                beforeSetData(import_object_manager.default.on(type2).set(...params).get(), target);
+              } else {
+                target[property](...params);
+              }
+            });
+          };
+        } else {
+          return Reflect.get(target, property, receiver);
         }
-      });
+      }
+    });
+    const options = {
+      parent: { self: component.value },
+      self: { template, getState, isValid }
+    };
+    const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
+    return ($vue) => {
+      var _a2, _b2;
       if (props2.await instanceof Promise) {
         (0, import_vue.nextTick)(async () => {
           getState.replaceData(await props2.await);
@@ -264,15 +276,10 @@ var ReactiveView_default = {
       } else {
         rendered.value = true;
       }
-      const options = {
-        parent: { self: $vue },
-        self: { template, getState, isValid }
-      };
-      const _b2 = (_a2 = props2.setup(options)) != null ? _a2 : options, { parent = {}, self = {} } = _b2, rest = __objRest(_b2, ["parent", "self"]);
       if (context.attrs["onUpdate:modelState"]) {
         const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
           callback: context.attrs["onUpdate:modelState"]
-        } : (_c2 = context.attrs["onUpdate:modelState"]) != null ? _c2 : {};
+        } : (_a2 = context.attrs["onUpdate:modelState"]) != null ? _a2 : {};
         (0, import_vue.watch)(() => import_object_manager.default.on(state).clone(), (after, before) => {
           var _a3;
           const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
@@ -287,7 +294,7 @@ var ReactiveView_default = {
       if (context.attrs["onUpdate:propsState"] || props2.sync) {
         const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? {
           callback: context.attrs["onUpdate:propsState"]
-        } : (_d = context.attrs["onUpdate:propsState"]) != null ? _d : {};
+        } : (_b2 = context.attrs["onUpdate:propsState"]) != null ? _b2 : {};
         (0, import_vue.watch)(() => import_object_manager.default.on(props2.state).clone(), (after, before) => {
           const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
           if (props2.sync && typeof config2.callback !== "function") {

package/dist/index.mjs

@@ -122,11 +122,11 @@ var Subscriptions = _Subscriptions;
 // src/ReactiveView.ts
 import ObjectManager from "@razaman2/object-manager";
 import DataManager from "@razaman2/data-manager";
-import { h, ref, reactive, watch, nextTick } from "vue";
+import { h, ref, reactive, watch, nextTick, getCurrentInstance } from "vue";
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.14";
+var version = "0.0.16";
 
 // src/ReactiveView.ts
 var props = {
@@ -166,29 +166,30 @@ var setup = {
 var ReactiveView_default = {
   props: __spreadValues(__spreadValues({}, setup), props),
   setup(props2, context) {
-    var _a, _b, _c;
-    const template = (vue, options) => {
+    var _a, _b, _c, _d, _e;
+    const template = (vue, options2) => {
       var _a2, _b2, _c2;
       const vnode = context.slots.default ? h(
         "div",
         context.attrs,
-        context.slots.default({ vue, options, props: props2, context })
+        context.slots.default({ vue, options: options2, props: props2, context })
       ) : h("div", __spreadValues({
         style: {
           color: "red",
           textAlign: "center"
         }
       }, context.attrs), `${props2.modelName}: ${name}@${version}`);
-      return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, options, props: props2, context })) != null ? _c2 : vnode;
+      return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, options: options2, props: props2, context })) != null ? _c2 : vnode;
     };
     const isValid = ref(false);
     const sync = ref(false);
     const rendered = ref(false);
+    const component = ref((_a = getCurrentInstance()) == null ? void 0 : _a.proxy);
     const defaultData = props2.getDefaultData(
-      Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
+      Array.isArray(props2.state) ? (_b = props2.defaultData) != null ? _b : [] : (_c = props2.defaultData) != null ? _c : {}
     );
     const type = Array.isArray(defaultData) ? [] : {};
-    const state = reactive(DataManager.transform(props2.await ? type : (_c = props2.state) != null ? _c : type));
+    const state = reactive(DataManager.transform(props2.await ? type : (_d = props2.state) != null ? _d : type));
     const config = {
       defaultData,
       data: state,
@@ -197,22 +198,33 @@ var ReactiveView_default = {
       notifications: props2.notifications,
       subscriptions: props2.subscriptions
     };
-    return ($vue) => {
-      var _a2, _c2, _d;
-      const getState = new Proxy(props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new DataManager(config), {
-        get(target, property, receiver) {
-          var _a3, _b3;
-          const beforeSetData = (_b3 = (_a3 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a3.beforeSetData) != null ? _b3 : access($vue).beforeSetData;
-          if (["setData", "replaceData"].includes(property) && typeof beforeSetData === "function") {
-            return (...params) => {
-              const type2 = Array.isArray(defaultData) ? [] : {};
-              beforeSetData(ObjectManager.on(type2).set(...params).get(), target);
-            };
-          } else {
-            return Reflect.get(target, property, receiver);
-          }
+    const getState = new Proxy(props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new DataManager(config), {
+      get(target, property, receiver) {
+        if (["setData", "replaceData"].includes(property)) {
+          return (...params) => {
+            const type2 = Array.isArray(defaultData) ? [] : {};
+            nextTick(() => {
+              var _a2, _b2;
+              const beforeSetData = (_b2 = (_a2 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a2.beforeSetData) != null ? _b2 : access(component).beforeSetData;
+              if (typeof beforeSetData === "function") {
+                beforeSetData(ObjectManager.on(type2).set(...params).get(), target);
+              } else {
+                target[property](...params);
+              }
+            });
+          };
+        } else {
+          return Reflect.get(target, property, receiver);
         }
-      });
+      }
+    });
+    const options = {
+      parent: { self: component.value },
+      self: { template, getState, isValid }
+    };
+    const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
+    return ($vue) => {
+      var _a2, _b2;
       if (props2.await instanceof Promise) {
         nextTick(async () => {
           getState.replaceData(await props2.await);
@@ -226,15 +238,10 @@ var ReactiveView_default = {
       } else {
         rendered.value = true;
       }
-      const options = {
-        parent: { self: $vue },
-        self: { template, getState, isValid }
-      };
-      const _b2 = (_a2 = props2.setup(options)) != null ? _a2 : options, { parent = {}, self = {} } = _b2, rest = __objRest(_b2, ["parent", "self"]);
       if (context.attrs["onUpdate:modelState"]) {
         const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
           callback: context.attrs["onUpdate:modelState"]
-        } : (_c2 = context.attrs["onUpdate:modelState"]) != null ? _c2 : {};
+        } : (_a2 = context.attrs["onUpdate:modelState"]) != null ? _a2 : {};
         watch(() => ObjectManager.on(state).clone(), (after, before) => {
           var _a3;
           const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
@@ -249,7 +256,7 @@ var ReactiveView_default = {
       if (context.attrs["onUpdate:propsState"] || props2.sync) {
         const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? {
           callback: context.attrs["onUpdate:propsState"]
-        } : (_d = context.attrs["onUpdate:propsState"]) != null ? _d : {};
+        } : (_b2 = context.attrs["onUpdate:propsState"]) != null ? _b2 : {};
         watch(() => ObjectManager.on(props2.state).clone(), (after, before) => {
           const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
           if (props2.sync && typeof config2.callback !== "function") {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.0.14",
+    "version": "0.0.16",
     "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",