@razaman2/reactive-view 0.0.18 → 0.0.19

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.18";
+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 = {}) => {
@@ -241,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);
@@ -259,9 +260,12 @@ 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"]);
+    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);
@@ -279,30 +283,34 @@ var ReactiveView_default = {
       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);
+      (0, import_vue.onMounted)(() => {
+        (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);
+      (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 (typeof config2.callback === "function") {
+            config2.callback(diff, getState);
+          } else {
+            getState.replaceData(after);
+          }
+          sync.value = true;
+        }, config2.options);
+      });
     }
     return ($vue) => {
       const setup2 = { $vue, options: parent };
@@ -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.18";
+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 = {}) => {
@@ -203,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);
@@ -221,9 +221,12 @@ 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"]);
+    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);
@@ -241,30 +244,34 @@ var ReactiveView_default = {
       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);
+      onMounted(() => {
+        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);
+      onMounted(() => {
+        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) => {
       const setup2 = { $vue, options: parent };
@@ -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,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.0.18",
+    "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",
@@ -21,7 +21,7 @@
     "license": "MIT",
     "dependencies": {
         "@razaman2/data-manager": "^3.2.11",
-        "@razaman2/object-manager": "^3.3.9",
+        "@razaman2/object-manager": "^3.4.1",
         "date-fns": "^4.1.0",
         "date-fns-tz": "^3.2.0",
         "uuid": "^11.0.3",
@@ -31,7 +31,7 @@
         "@types/uuid": "^10.0.0",
         "tsup": "^8.3.5",
         "typescript": "^5.7.2",
-        "vitest": "^2.1.5"
+        "vitest": "^2.1.8"
     },
     "publishConfig": {
         "access": "public"