@razaman2/reactive-view 0.0.16 → 0.0.19

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.d.mts

@@ -24,6 +24,7 @@ declare class Subscription {
 }
 
 declare const setup: {
+    ReactiveView: boolean;
     setup: {
         type: FunctionConstructor;
         default: (param1?: {}, param2?: {}) => {};
@@ -53,6 +54,7 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
+        ReactiveView: boolean;
         setup: {
             type: FunctionConstructor;
             default: (param1?: {}, param2?: {}) => {};
@@ -116,5 +118,6 @@ declare function getSubscription(): {
     subscriptions: any[];
     subscription: Subscription;
 };
+declare function StyleParser(styles: Array<string> | Record<string, any> | string): any;
 
-export { type StateUpdate, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };
+export { type StateUpdate, StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };

package/dist/index.d.ts

@@ -24,6 +24,7 @@ declare class Subscription {
 }
 
 declare const setup: {
+    ReactiveView: boolean;
     setup: {
         type: FunctionConstructor;
         default: (param1?: {}, param2?: {}) => {};
@@ -53,6 +54,7 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
+        ReactiveView: boolean;
         setup: {
             type: FunctionConstructor;
             default: (param1?: {}, param2?: {}) => {};
@@ -116,5 +118,6 @@ declare function getSubscription(): {
     subscriptions: any[];
     subscription: Subscription;
 };
+declare function StyleParser(styles: Array<string> | Record<string, any> | string): any;
 
-export { type StateUpdate, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };
+export { type StateUpdate, StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };

package/dist/index.js

@@ -56,6 +56,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  StyleParser: () => StyleParser,
   access: () => access,
   default: () => src_default,
   getDate: () => getDate,
@@ -164,7 +165,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.16";
+var version = "0.0.19";
 
 // src/ReactiveView.ts
 var props = {
@@ -194,6 +195,7 @@ var props = {
   }
 };
 var setup = {
+  ReactiveView: true,
   setup: {
     type: Function,
     default: (param1 = {}, param2 = {}) => {
@@ -204,7 +206,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 +229,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,
@@ -240,16 +243,15 @@ var ReactiveView_default = {
       get(target, property, receiver) {
         if (["setData", "replaceData"].includes(property)) {
           return (...params) => {
+            var _a2, _b2;
             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);
-              }
-            });
+            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);
+            }
+            return target;
           };
         } else {
           return Reflect.get(target, property, receiver);
@@ -258,53 +260,59 @@ var ReactiveView_default = {
     });
     const options = {
       parent: { self: component.value },
-      self: { template, getState, isValid }
+      self: { template, isValid, getState }
     };
     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);
-        });
-      }
-      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 : {};
+    if (typeof context.attrs.debug === "function") {
+      context.attrs.debug({ isValid, component, type, data, state, config, options, props: props2, context, setup: __spreadValues({ parent, self }, rest), defaultData, getState });
+    }
+    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.onMounted)(() => {
         (0, import_vue.watch)(() => import_object_manager.default.on(state).clone(), (after, before) => {
-          var _a3;
+          var _a2;
           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;
+          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"]
-        } : (_b2 = context.attrs["onUpdate:propsState"]) != null ? _b2 : {};
+      });
+    }
+    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.onMounted)(() => {
         (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") {
+          if (typeof config2.callback === "function") {
             config2.callback(diff, getState);
+          } else {
+            getState.replaceData(after);
           }
           sync.value = true;
         }, config2.options);
-      }
+      });
+    }
+    return ($vue) => {
       const setup2 = { $vue, options: parent };
       while (setup2.options) {
         Object.defineProperties(setup2.$vue, Object.assign({
@@ -401,15 +409,14 @@ function access($vue = {}) {
   const proxy = (target) => {
     return new Proxy(target, {
       get(target2, key) {
-        var _a2, _b2;
         const component = { $vue: target2 };
         do {
-          if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
+          if (key in component.$vue) {
             return component.$vue[key];
-          } else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
+          } else if ("self" in component.$vue && key in component.$vue.self) {
             return component.$vue.self[key];
           } else {
-            component.$vue = component.$vue.parent;
+            component.$vue = "parent" in component.$vue && component.$vue.parent;
           }
         } while (component.$vue);
       }
@@ -452,8 +459,16 @@ function getSubscription() {
     subscription
   };
 }
+function StyleParser(styles) {
+  var _a;
+  const object = (items) => items.reduce((object2, item) => {
+    return Object.assign(object2, { [item]: true });
+  }, {});
+  return (_a = Array.isArray(styles) ? object(styles) : typeof styles === "string" ? object(styles.split(/\s+/)) : styles) != null ? _a : {};
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  StyleParser,
   access,
   getDate,
   getProps,

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, getCurrentInstance } from "vue";
+import { h, ref, reactive, watch, nextTick, onMounted, getCurrentInstance } from "vue";
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.16";
+var version = "0.0.19";
 
 // src/ReactiveView.ts
 var props = {
@@ -156,6 +156,7 @@ var props = {
   }
 };
 var setup = {
+  ReactiveView: true,
   setup: {
     type: Function,
     default: (param1 = {}, param2 = {}) => {
@@ -166,7 +167,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 +190,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,
@@ -202,16 +204,15 @@ var ReactiveView_default = {
       get(target, property, receiver) {
         if (["setData", "replaceData"].includes(property)) {
           return (...params) => {
+            var _a2, _b2;
             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);
-              }
-            });
+            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);
+            }
+            return target;
           };
         } else {
           return Reflect.get(target, property, receiver);
@@ -220,53 +221,59 @@ var ReactiveView_default = {
     });
     const options = {
       parent: { self: component.value },
-      self: { template, getState, isValid }
+      self: { template, isValid, getState }
     };
     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);
-        });
-      }
-      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 : {};
+    if (typeof context.attrs.debug === "function") {
+      context.attrs.debug({ isValid, component, type, data, state, config, options, props: props2, context, setup: __spreadValues({ parent, self }, rest), defaultData, getState });
+    }
+    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 : {};
+      onMounted(() => {
         watch(() => ObjectManager.on(state).clone(), (after, before) => {
-          var _a3;
+          var _a2;
           const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
-          const beforeStateUpdate = (_a3 = config2.beforeStateUpdate) != null ? _a3 : access({ parent, self }).beforeStateUpdate;
+          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"]
-        } : (_b2 = context.attrs["onUpdate:propsState"]) != null ? _b2 : {};
+      });
+    }
+    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 : {};
+      onMounted(() => {
         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") {
+          if (typeof config2.callback === "function") {
             config2.callback(diff, getState);
+          } else {
+            getState.replaceData(after);
           }
           sync.value = true;
         }, config2.options);
-      }
+      });
+    }
+    return ($vue) => {
       const setup2 = { $vue, options: parent };
       while (setup2.options) {
         Object.defineProperties(setup2.$vue, Object.assign({
@@ -363,15 +370,14 @@ function access($vue = {}) {
   const proxy = (target) => {
     return new Proxy(target, {
       get(target2, key) {
-        var _a2, _b2;
         const component = { $vue: target2 };
         do {
-          if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
+          if (key in component.$vue) {
             return component.$vue[key];
-          } else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
+          } else if ("self" in component.$vue && key in component.$vue.self) {
             return component.$vue.self[key];
           } else {
-            component.$vue = component.$vue.parent;
+            component.$vue = "parent" in component.$vue && component.$vue.parent;
           }
         } while (component.$vue);
       }
@@ -414,7 +420,15 @@ function getSubscription() {
     subscription
   };
 }
+function StyleParser(styles) {
+  var _a;
+  const object = (items) => items.reduce((object2, item) => {
+    return Object.assign(object2, { [item]: true });
+  }, {});
+  return (_a = Array.isArray(styles) ? object(styles) : typeof styles === "string" ? object(styles.split(/\s+/)) : styles) != null ? _a : {};
+}
 export {
+  StyleParser,
   access,
   src_default as default,
   getDate,

package/package.json

@@ -1,42 +1,42 @@
-{
-    "name": "@razaman2/reactive-view",
-    "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",
-    "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.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",
+    "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.4.1",
+        "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.8"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist"
+    ]
+}