@razaman2/reactive-view 0.0.18 → 0.0.20

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { SetupContext, ComponentPublicInstance, WatchOptions, UnwrapRef } from 'vue';
+import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
 
 type SubscriptionItem = {
     name: string;
@@ -23,7 +23,22 @@ declare class Subscription {
     get(name: string): SubscriptionItem;
 }
 
+type Accessible = {
+    parent: {
+        self: Record<string | symbol, any>;
+    };
+    self: Record<string | symbol, any>;
+    access?: () => Accessible;
+    value?: Accessible;
+};
+type PropOptions = {
+    exclude: string | Array<string>;
+    include: Record<string, any>;
+};
+type PropExclusions = Array<string> | string;
+
 declare const setup: {
+    ReactiveView: boolean;
     setup: {
         type: FunctionConstructor;
         default: (param1?: {}, param2?: {}) => {};
@@ -53,6 +68,7 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
+        ReactiveView: boolean;
         setup: {
             type: FunctionConstructor;
             default: (param1?: {}, param2?: {}) => {};
@@ -61,25 +77,6 @@ declare const _default: {
     setup(props: Record<string, any>, context: SetupContext): ($vue: ComponentPublicInstance & any) => any;
 };
 
-type StateUpdate = {
-    callback: Function;
-    beforeStateUpdate?: Function;
-    options?: WatchOptions;
-};
-type Accessible = {
-    parent: {
-        self: Record<string | symbol, any>;
-    };
-    self: Record<string | symbol, any>;
-    access?: () => Accessible;
-    value?: Accessible;
-};
-type PropOptions = {
-    exclude: string | Array<string>;
-    include: Record<string, any>;
-};
-type PropExclusions = Array<string> | string;
-
 declare function safeRequest(request: {
     try: () => Promise<any> | any;
     catch?: ((error: any) => Promise<any> | any) | false;
@@ -106,7 +103,7 @@ declare function getDate(timestamp: {
     format?: string;
     timezone?: string;
 }): string;
-declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T | UnwrapRef<any>): Record<string | symbol, any>;
+declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T | UnwrapRef<any>, alternative?: any): Record<string | symbol, any>;
 declare function getSubscription(): {
     addSubscription(name: string, handler?: () => boolean, data?: any): void;
     replaceSubscription(name: string, handler?: () => boolean, data?: any): void;
@@ -116,5 +113,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 { StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { SetupContext, ComponentPublicInstance, WatchOptions, UnwrapRef } from 'vue';
+import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
 
 type SubscriptionItem = {
     name: string;
@@ -23,7 +23,22 @@ declare class Subscription {
     get(name: string): SubscriptionItem;
 }
 
+type Accessible = {
+    parent: {
+        self: Record<string | symbol, any>;
+    };
+    self: Record<string | symbol, any>;
+    access?: () => Accessible;
+    value?: Accessible;
+};
+type PropOptions = {
+    exclude: string | Array<string>;
+    include: Record<string, any>;
+};
+type PropExclusions = Array<string> | string;
+
 declare const setup: {
+    ReactiveView: boolean;
     setup: {
         type: FunctionConstructor;
         default: (param1?: {}, param2?: {}) => {};
@@ -53,6 +68,7 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
+        ReactiveView: boolean;
         setup: {
             type: FunctionConstructor;
             default: (param1?: {}, param2?: {}) => {};
@@ -61,25 +77,6 @@ declare const _default: {
     setup(props: Record<string, any>, context: SetupContext): ($vue: ComponentPublicInstance & any) => any;
 };
 
-type StateUpdate = {
-    callback: Function;
-    beforeStateUpdate?: Function;
-    options?: WatchOptions;
-};
-type Accessible = {
-    parent: {
-        self: Record<string | symbol, any>;
-    };
-    self: Record<string | symbol, any>;
-    access?: () => Accessible;
-    value?: Accessible;
-};
-type PropOptions = {
-    exclude: string | Array<string>;
-    include: Record<string, any>;
-};
-type PropExclusions = Array<string> | string;
-
 declare function safeRequest(request: {
     try: () => Promise<any> | any;
     catch?: ((error: any) => Promise<any> | any) | false;
@@ -106,7 +103,7 @@ declare function getDate(timestamp: {
     format?: string;
     timezone?: string;
 }): string;
-declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T | UnwrapRef<any>): Record<string | symbol, any>;
+declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T | UnwrapRef<any>, alternative?: any): Record<string | symbol, any>;
 declare function getSubscription(): {
     addSubscription(name: string, handler?: () => boolean, data?: any): void;
     replaceSubscription(name: string, handler?: () => boolean, data?: any): void;
@@ -116,5 +113,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 { StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };

package/dist/index.js

@@ -54,10 +54,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
+  StyleParser: () => StyleParser,
   access: () => access,
-  default: () => src_default,
+  default: () => index_default,
   getDate: () => getDate,
   getProps: () => getProps,
   getReactiveViewComponent: () => getReactiveViewComponent,
@@ -65,9 +66,8 @@ __export(src_exports, {
   safeRequest: () => safeRequest,
   setup: () => setup
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_date_fns_tz = require("date-fns-tz");
-var import_vue2 = require("vue");
 
 // src/Subscription.ts
 var Subscription = class _Subscription {
@@ -157,6 +157,9 @@ var _Subscriptions = class _Subscriptions extends Subscription {
 _Subscriptions.subscriptions = _Subscriptions.create();
 var Subscriptions = _Subscriptions;
 
+// src/index.ts
+var import_vue2 = require("vue");
+
 // src/ReactiveView.ts
 var import_object_manager = __toESM(require("@razaman2/object-manager"));
 var import_data_manager = __toESM(require("@razaman2/data-manager"));
@@ -164,7 +167,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.18";
+var version = "0.0.20";
 
 // src/ReactiveView.ts
 var props = {
@@ -194,6 +197,7 @@ var props = {
   }
 };
 var setup = {
+  ReactiveView: true,
   setup: {
     type: Function,
     default: (param1 = {}, param2 = {}) => {
@@ -241,16 +245,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 +262,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 +285,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 };
@@ -324,7 +334,7 @@ var ReactiveView_default = {
 };
 
 // src/index.ts
-var src_default = ReactiveView_default;
+var index_default = ReactiveView_default;
 function safeRequest(request) {
   return new Promise(async (resolve) => {
     var _a, _b, _c, _d;
@@ -396,32 +406,33 @@ function getDate(param1, param2) {
   };
   return (0, import_date_fns_tz.formatInTimeZone)(datetime(), options.timezone, options.format);
 }
-function access($vue = {}) {
+function access($vue = {}, alternative) {
   var _a, _b;
   const proxy = (target) => {
     return new Proxy(target, {
       get(target2, key) {
-        var _a2, _b2;
-        const component = { $vue: target2 };
+        const component2 = { $vue: target2 };
         do {
-          if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
-            return component.$vue[key];
-          } else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
-            return component.$vue.self[key];
+          if (key in component2.$vue) {
+            return component2.$vue[key];
+          } else if ("self" in component2.$vue && key in component2.$vue.self) {
+            return component2.$vue.self[key];
           } else {
-            component.$vue = component.$vue.parent;
+            component2.$vue = "parent" in component2.$vue && component2.$vue.parent;
           }
-        } while (component.$vue);
+        } while (component2.$vue);
+        return alternative;
       }
     });
   };
+  const component = typeof $vue === "function" ? $vue() : $vue;
   try {
-    return proxy($vue.access());
+    return proxy(component.access());
   } catch (e) {
     try {
-      return proxy($vue.value.access());
+      return proxy(component.value.access());
     } catch (e2) {
-      return proxy((_b = (_a = $vue.value) != null ? _a : $vue) != null ? _b : {});
+      return proxy(((_b = (_a = component.value) != null ? _a : component) != null ? _b : {}) || {});
     }
   }
 }
@@ -452,8 +463,21 @@ 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+/)) : Object.entries(styles).reduce((acc, [styles2, value]) => {
+    styles2.split(/\s+/).forEach((style) => {
+      acc[style] = value;
+    });
+    return acc;
+  }, {})) != null ? _a : {};
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  StyleParser,
   access,
   getDate,
   getProps,

package/dist/index.mjs

@@ -29,7 +29,6 @@ var __objRest = (source, exclude) => {
 
 // src/index.ts
 import { formatInTimeZone } from "date-fns-tz";
-import { createVNode } from "vue";
 
 // src/Subscription.ts
 var Subscription = class _Subscription {
@@ -119,14 +118,17 @@ var _Subscriptions = class _Subscriptions extends Subscription {
 _Subscriptions.subscriptions = _Subscriptions.create();
 var Subscriptions = _Subscriptions;
 
+// src/index.ts
+import { createVNode } from "vue";
+
 // 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.20";
 
 // src/ReactiveView.ts
 var props = {
@@ -156,6 +158,7 @@ var props = {
   }
 };
 var setup = {
+  ReactiveView: true,
   setup: {
     type: Function,
     default: (param1 = {}, param2 = {}) => {
@@ -203,16 +206,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 +223,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 +246,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 };
@@ -286,7 +295,7 @@ var ReactiveView_default = {
 };
 
 // src/index.ts
-var src_default = ReactiveView_default;
+var index_default = ReactiveView_default;
 function safeRequest(request) {
   return new Promise(async (resolve) => {
     var _a, _b, _c, _d;
@@ -358,32 +367,33 @@ function getDate(param1, param2) {
   };
   return formatInTimeZone(datetime(), options.timezone, options.format);
 }
-function access($vue = {}) {
+function access($vue = {}, alternative) {
   var _a, _b;
   const proxy = (target) => {
     return new Proxy(target, {
       get(target2, key) {
-        var _a2, _b2;
-        const component = { $vue: target2 };
+        const component2 = { $vue: target2 };
         do {
-          if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
-            return component.$vue[key];
-          } else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
-            return component.$vue.self[key];
+          if (key in component2.$vue) {
+            return component2.$vue[key];
+          } else if ("self" in component2.$vue && key in component2.$vue.self) {
+            return component2.$vue.self[key];
           } else {
-            component.$vue = component.$vue.parent;
+            component2.$vue = "parent" in component2.$vue && component2.$vue.parent;
           }
-        } while (component.$vue);
+        } while (component2.$vue);
+        return alternative;
       }
     });
   };
+  const component = typeof $vue === "function" ? $vue() : $vue;
   try {
-    return proxy($vue.access());
+    return proxy(component.access());
   } catch (e) {
     try {
-      return proxy($vue.value.access());
+      return proxy(component.value.access());
     } catch (e2) {
-      return proxy((_b = (_a = $vue.value) != null ? _a : $vue) != null ? _b : {});
+      return proxy(((_b = (_a = component.value) != null ? _a : component) != null ? _b : {}) || {});
     }
   }
 }
@@ -414,9 +424,22 @@ 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+/)) : Object.entries(styles).reduce((acc, [styles2, value]) => {
+    styles2.split(/\s+/).forEach((style) => {
+      acc[style] = value;
+    });
+    return acc;
+  }, {})) != null ? _a : {};
+}
 export {
+  StyleParser,
   access,
-  src_default as default,
+  index_default as default,
   getDate,
   getProps,
   getReactiveViewComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.0.18",
+    "version": "0.0.20",
     "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,17 +21,19 @@
     "license": "MIT",
     "dependencies": {
         "@razaman2/data-manager": "^3.2.11",
-        "@razaman2/object-manager": "^3.3.9",
+        "@razaman2/object-manager": "^3.4.2",
         "date-fns": "^4.1.0",
         "date-fns-tz": "^3.2.0",
-        "uuid": "^11.0.3",
+        "uuid": "^11.1.0"
+    },
+    "peerDependencies": {
         "vue": "^3.5.13"
     },
     "devDependencies": {
         "@types/uuid": "^10.0.0",
-        "tsup": "^8.3.5",
-        "typescript": "^5.7.2",
-        "vitest": "^2.1.5"
+        "tsup": "^8.4.0",
+        "typescript": "^5.8.2",
+        "vitest": "^3.0.8"
     },
     "publishConfig": {
         "access": "public"