@razaman2/reactive-view 0.0.15 → 0.0.18

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2021 razamvmt
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2021 razamvmt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1 +1 @@
-# reactive-view
+# reactive-view

package/dist/index.js

@@ -164,7 +164,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.15";
+var version = "0.0.18";
 
 // src/ReactiveView.ts
 var props = {
@@ -204,7 +204,7 @@ var setup = {
 var ReactiveView_default = {
   props: __spreadValues(__spreadValues({}, setup), props),
   setup(props2, context) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _g, _h;
     const template = (vue, options2) => {
       var _a2, _b2, _c2;
       const vnode = context.slots.default ? (0, import_vue.h)(
@@ -227,7 +227,8 @@ var ReactiveView_default = {
       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 : (_d = props2.state) != null ? _d : type));
+    const data = import_object_manager.default.on((_d = props2.state) != null ? _d : type).clone();
+    const state = (0, import_vue.reactive)(import_data_manager.default.transform(props2.await ? type : data));
     const config = {
       defaultData,
       data: state,
@@ -238,12 +239,18 @@ var ReactiveView_default = {
     };
     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 _a2, _b2;
-        const beforeSetData = (_b2 = (_a2 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a2.beforeSetData) != null ? _b2 : access(component).beforeSetData;
-        if (["setData", "replaceData"].includes(property) && typeof beforeSetData === "function") {
+        if (["setData", "replaceData"].includes(property)) {
           return (...params) => {
             const type2 = Array.isArray(defaultData) ? [] : {};
-            beforeSetData(import_object_manager.default.on(type2).set(...params).get(), target);
+            (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);
@@ -251,54 +258,53 @@ var ReactiveView_default = {
       }
     });
     const options = {
-      parent: { self: component },
+      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"]);
+    if (props2.await instanceof Promise) {
+      (0, import_vue.nextTick)(async () => {
+        getState.replaceData(await props2.await);
+      });
+    }
+    if (props2.defer instanceof Promise) {
+      (0, import_vue.nextTick)(async () => {
+        var _a2;
+        rendered.value = (_a2 = await props2.defer) != null ? _a2 : true;
+      });
+    } else {
+      rendered.value = true;
+    }
+    if (context.attrs["onUpdate:modelState"]) {
+      const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
+        callback: context.attrs["onUpdate:modelState"]
+      } : (_g = context.attrs["onUpdate:modelState"]) != null ? _g : {};
+      (0, import_vue.watch)(() => import_object_manager.default.on(state).clone(), (after, before) => {
+        var _a2;
+        const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
+        const beforeStateUpdate = (_a2 = config2.beforeStateUpdate) != null ? _a2 : access(component).beforeStateUpdate;
+        if (sync.value) {
+          sync.value = false;
+        } else if (typeof config2.callback === "function") {
+          config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
+        }
+      }, config2.options);
+    }
+    if (context.attrs["onUpdate:propsState"] || props2.sync) {
+      const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? {
+        callback: context.attrs["onUpdate:propsState"]
+      } : (_h = context.attrs["onUpdate:propsState"]) != null ? _h : {};
+      (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 (typeof config2.callback === "function") {
+          config2.callback(diff, getState);
+        } else {
+          getState.replaceData(after);
+        }
+        sync.value = true;
+      }, config2.options);
+    }
     return ($vue) => {
-      var _a2, _b2;
-      if (props2.await instanceof Promise) {
-        (0, import_vue.nextTick)(async () => {
-          getState.replaceData(await props2.await);
-        });
-      }
-      if (props2.defer instanceof Promise) {
-        (0, import_vue.nextTick)(async () => {
-          var _a3;
-          rendered.value = (_a3 = await props2.defer) != null ? _a3 : true;
-        });
-      } else {
-        rendered.value = true;
-      }
-      if (context.attrs["onUpdate:modelState"]) {
-        const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
-          callback: context.attrs["onUpdate:modelState"]
-        } : (_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() };
-          const beforeStateUpdate = (_a3 = config2.beforeStateUpdate) != null ? _a3 : access({ parent, self }).beforeStateUpdate;
-          if (sync.value) {
-            sync.value = false;
-          } else if (typeof config2.callback === "function") {
-            config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
-          }
-        }, config2.options);
-      }
-      if (context.attrs["onUpdate:propsState"] || props2.sync) {
-        const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? {
-          callback: context.attrs["onUpdate:propsState"]
-        } : (_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") {
-            getState.replaceData(after);
-          } else if (typeof config2.callback === "function") {
-            config2.callback(diff, getState);
-          }
-          sync.value = true;
-        }, config2.options);
-      }
       const setup2 = { $vue, options: parent };
       while (setup2.options) {
         Object.defineProperties(setup2.$vue, Object.assign({

package/dist/index.mjs

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
 
 // src/index.ts
 import { formatInTimeZone } from "date-fns-tz";
-import { createVNode as createVNode2 } from "vue";
+import { createVNode } from "vue";
 
 // src/Subscription.ts
 var Subscription = class _Subscription {
@@ -126,7 +126,7 @@ import { h, ref, reactive, watch, nextTick, getCurrentInstance } from "vue";
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.15";
+var version = "0.0.18";
 
 // src/ReactiveView.ts
 var props = {
@@ -166,7 +166,7 @@ var setup = {
 var ReactiveView_default = {
   props: __spreadValues(__spreadValues({}, setup), props),
   setup(props2, context) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _g, _h;
     const template = (vue, options2) => {
       var _a2, _b2, _c2;
       const vnode = context.slots.default ? h(
@@ -189,7 +189,8 @@ var ReactiveView_default = {
       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 : (_d = props2.state) != null ? _d : type));
+    const data = ObjectManager.on((_d = props2.state) != null ? _d : type).clone();
+    const state = reactive(DataManager.transform(props2.await ? type : data));
     const config = {
       defaultData,
       data: state,
@@ -200,12 +201,18 @@ var ReactiveView_default = {
     };
     const getState = new Proxy(props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new DataManager(config), {
       get(target, property, receiver) {
-        var _a2, _b2;
-        const beforeSetData = (_b2 = (_a2 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a2.beforeSetData) != null ? _b2 : access(component).beforeSetData;
-        if (["setData", "replaceData"].includes(property) && typeof beforeSetData === "function") {
+        if (["setData", "replaceData"].includes(property)) {
           return (...params) => {
             const type2 = Array.isArray(defaultData) ? [] : {};
-            beforeSetData(ObjectManager.on(type2).set(...params).get(), target);
+            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);
@@ -213,54 +220,53 @@ var ReactiveView_default = {
       }
     });
     const options = {
-      parent: { self: component },
+      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"]);
+    if (props2.await instanceof Promise) {
+      nextTick(async () => {
+        getState.replaceData(await props2.await);
+      });
+    }
+    if (props2.defer instanceof Promise) {
+      nextTick(async () => {
+        var _a2;
+        rendered.value = (_a2 = await props2.defer) != null ? _a2 : true;
+      });
+    } else {
+      rendered.value = true;
+    }
+    if (context.attrs["onUpdate:modelState"]) {
+      const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
+        callback: context.attrs["onUpdate:modelState"]
+      } : (_g = context.attrs["onUpdate:modelState"]) != null ? _g : {};
+      watch(() => ObjectManager.on(state).clone(), (after, before) => {
+        var _a2;
+        const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
+        const beforeStateUpdate = (_a2 = config2.beforeStateUpdate) != null ? _a2 : access(component).beforeStateUpdate;
+        if (sync.value) {
+          sync.value = false;
+        } else if (typeof config2.callback === "function") {
+          config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
+        }
+      }, config2.options);
+    }
+    if (context.attrs["onUpdate:propsState"] || props2.sync) {
+      const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? {
+        callback: context.attrs["onUpdate:propsState"]
+      } : (_h = context.attrs["onUpdate:propsState"]) != null ? _h : {};
+      watch(() => ObjectManager.on(props2.state).clone(), (after, before) => {
+        const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
+        if (typeof config2.callback === "function") {
+          config2.callback(diff, getState);
+        } else {
+          getState.replaceData(after);
+        }
+        sync.value = true;
+      }, config2.options);
+    }
     return ($vue) => {
-      var _a2, _b2;
-      if (props2.await instanceof Promise) {
-        nextTick(async () => {
-          getState.replaceData(await props2.await);
-        });
-      }
-      if (props2.defer instanceof Promise) {
-        nextTick(async () => {
-          var _a3;
-          rendered.value = (_a3 = await props2.defer) != null ? _a3 : true;
-        });
-      } else {
-        rendered.value = true;
-      }
-      if (context.attrs["onUpdate:modelState"]) {
-        const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
-          callback: context.attrs["onUpdate:modelState"]
-        } : (_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() };
-          const beforeStateUpdate = (_a3 = config2.beforeStateUpdate) != null ? _a3 : access({ parent, self }).beforeStateUpdate;
-          if (sync.value) {
-            sync.value = false;
-          } else if (typeof config2.callback === "function") {
-            config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
-          }
-        }, config2.options);
-      }
-      if (context.attrs["onUpdate:propsState"] || props2.sync) {
-        const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? {
-          callback: context.attrs["onUpdate:propsState"]
-        } : (_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") {
-            getState.replaceData(after);
-          } else if (typeof config2.callback === "function") {
-            config2.callback(diff, getState);
-          }
-          sync.value = true;
-        }, config2.options);
-      }
       const setup2 = { $vue, options: parent };
       while (setup2.options) {
         Object.defineProperties(setup2.$vue, Object.assign({
@@ -334,9 +340,9 @@ function getReactiveViewComponent(component, options = {}) {
   };
   const props2 = getProps(options, "setup");
   const slots = typeof component === "function" ? component : () => {
-    return (component.type || component).setup ? createVNode2(component, component.setup ? {} : props2) : component;
+    return (component.type || component).setup ? createVNode(component, component.setup ? {} : props2) : component;
   };
-  return model(component) ? createVNode2(component, props2) : createVNode2(ReactiveView_default, props2, slots);
+  return model(component) ? createVNode(component, props2) : createVNode(ReactiveView_default, props2, slots);
 }
 function getDate(param1, param2) {
   var _a, _b;

package/package.json

@@ -1,42 +1,42 @@
-{
-    "name": "@razaman2/reactive-view",
-    "version": "0.0.15",
-    "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"
-    ],
-    "author": "razaman2",
-    "license": "MIT",
-    "dependencies": {
-        "@razaman2/data-manager": "^3.2.11",
-        "@razaman2/object-manager": "^3.3.9",
-        "date-fns": "^4.1.0",
-        "date-fns-tz": "^3.2.0",
-        "uuid": "^11.0.2",
-        "vue": "^3.5.12"
-    },
-    "devDependencies": {
-        "@types/uuid": "^10.0.0",
-        "tsup": "^8.3.5",
-        "typescript": "^5.6.3",
-        "vitest": "^2.1.4"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "files": [
-        "dist"
-    ]
-}
+{
+    "name": "@razaman2/reactive-view",
+    "version": "0.0.18",
+    "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"
+    ],
+    "author": "razaman2",
+    "license": "MIT",
+    "dependencies": {
+        "@razaman2/data-manager": "^3.2.11",
+        "@razaman2/object-manager": "^3.3.9",
+        "date-fns": "^4.1.0",
+        "date-fns-tz": "^3.2.0",
+        "uuid": "^11.0.3",
+        "vue": "^3.5.13"
+    },
+    "devDependencies": {
+        "@types/uuid": "^10.0.0",
+        "tsup": "^8.3.5",
+        "typescript": "^5.7.2",
+        "vitest": "^2.1.5"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist"
+    ]
+}