@razaman2/reactive-view 0.0.31 → 0.0.33

package/dist/index.d.mts

@@ -44,6 +44,7 @@ declare const _default: {
     props: {
         setup: {};
         ReactiveView: {
+            type: BooleanConstructor;
             default: boolean;
         };
         instance: {
@@ -115,5 +116,6 @@ declare function useSubscription(): {
 };
 declare function StyleParser(styles?: Array<string> | Record<string, boolean> | string): {};
 declare function MergeStyles(...params: any): any;
+declare const extendVnode: (component: Record<string, any>, element: any) => Record<string, (props?: Record<string, any>, slots?: Record<string, any> | ((slots: Record<string, any>) => Record<string, any>)) => any>;
 
-export { MergeStyles, StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, safeRequest, setup, useSubscription };
+export { MergeStyles, StyleParser, access, _default as default, extendVnode, getDate, getProps, getReactiveViewComponent, safeRequest, setup, useSubscription };

package/dist/index.d.ts

@@ -44,6 +44,7 @@ declare const _default: {
     props: {
         setup: {};
         ReactiveView: {
+            type: BooleanConstructor;
             default: boolean;
         };
         instance: {
@@ -115,5 +116,6 @@ declare function useSubscription(): {
 };
 declare function StyleParser(styles?: Array<string> | Record<string, boolean> | string): {};
 declare function MergeStyles(...params: any): any;
+declare const extendVnode: (component: Record<string, any>, element: any) => Record<string, (props?: Record<string, any>, slots?: Record<string, any> | ((slots: Record<string, any>) => Record<string, any>)) => any>;
 
-export { MergeStyles, StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, safeRequest, setup, useSubscription };
+export { MergeStyles, StyleParser, access, _default as default, extendVnode, getDate, getProps, getReactiveViewComponent, safeRequest, setup, useSubscription };

package/dist/index.js

@@ -19,6 +19,18 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name2 in all)
     __defProp(target, name2, { get: all[name2], enumerable: true });
@@ -48,6 +60,7 @@ __export(index_exports, {
   StyleParser: () => StyleParser,
   access: () => access,
   default: () => index_default,
+  extendVnode: () => extendVnode,
   getDate: () => getDate,
   getProps: () => getProps,
   getReactiveViewComponent: () => getReactiveViewComponent,
@@ -155,7 +168,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.31";
+var version = "0.0.33";
 
 // src/ReactiveView.ts
 var setup = {
@@ -167,6 +180,7 @@ var ReactiveView_default = {
   props: {
     setup: {},
     ReactiveView: {
+      type: Boolean,
       default: true
     },
     instance: {
@@ -207,7 +221,7 @@ var ReactiveView_default = {
         context.slots.default ? context.attrs : __spreadValues({
           style: { color: "red", textAlign: "center" }
         }, context.attrs),
-        context.slots.default ? context.slots.default({ vue: vue2, component: component2, props, context }) : `${props.modelName}: ${name}@${version}`
+        context.slots.default ? context.slots.default({ component: component2, vue: vue2, props, context }) : `${props.modelName}: ${name}@${version}`
       );
     };
     const isValid = (0, import_vue.ref)(false);
@@ -257,15 +271,23 @@ var ReactiveView_default = {
       }
     });
     const watchDataProp = (dataProp) => {
-      var _a2;
-      const config2 = typeof context.attrs["onUpdate:data"] === "function" ? {
-        callback: context.attrs["onUpdate:data"]
-      } : (_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {};
+      var _a2, _b2, _c2;
+      const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
+        callback: (_b2 = ((_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {}).callback) != null ? _b2 : context.attrs["data:callback"],
+        options: Object.assign({
+          immediate: context.attrs["data:immediate"],
+          deep: context.attrs["data:deep"],
+          once: context.attrs["data:once"]
+        }, ((_c2 = context.attrs["onUpdate:data"]) != null ? _c2 : {}).options)
+      };
+      if (context.attrs["data:log"]) {
+        console.log(`[data:prop]:`, config2);
+      }
       (0, import_vue.watch)(typeof dataProp === "function" || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
         var _a3;
         const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
         if (typeof config2.callback === "function") {
-          model.replaceData((_a3 = config2.callback(diff, model)) != null ? _a3 : after);
+          model.replaceData((_a3 = config2.callback(diff, { component })) != null ? _a3 : after);
         } else {
           model.replaceData(after);
         }
@@ -286,7 +308,7 @@ var ReactiveView_default = {
       } : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
       (0, import_vue.watch)(() => model.getData(), (after, before) => {
         const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
-        config2.callback(diff, model);
+        config2.callback(diff, { component });
       }, config2.options);
     }
     const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, isValid } });
@@ -488,11 +510,46 @@ function MergeStyles(...params) {
     }
   });
 }
+var extendVnode = (component, element) => {
+  return new Proxy(access(component), {
+    get: (target, key) => {
+      const getVnode = () => {
+        try {
+          return target[key]();
+        } catch (e) {
+          throw new Error(`${key} does not exist as vnode on component.`);
+        }
+      };
+      const vnode = getVnode();
+      return (props = {}, slots) => {
+        var _a;
+        const _b = getProps((_a = vnode.props) != null ? _a : {}, []), { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
+        const finalClasses = MergeStyles(classes, typeof props.class === "function" ? props.class(classes) : props.class);
+        const functionalProps = Object.entries(props).reduce((props2, [key2, value]) => {
+          if (![
+            "class"
+            /*, "style"*/
+          ].includes(key2) && typeof value === "function") {
+            props2[key2] = value(vnode.props[key2]);
+          }
+          return props2;
+        }, props);
+        const finalProps = Object.assign(rest, functionalProps, {
+          class: finalClasses
+          /*, style: finalStyles*/
+        });
+        const finalSlots = typeof slots === "function" ? slots(vnode.children) : vnode.children;
+        return (0, import_vue2.h)(["string", "undefined"].includes(typeof element) ? vnode : element, finalProps, finalSlots);
+      };
+    }
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MergeStyles,
   StyleParser,
   access,
+  extendVnode,
   getDate,
   getProps,
   getReactiveViewComponent,

package/dist/index.mjs

@@ -14,6 +14,18 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 
 // src/Subscription.ts
 var Subscription = class _Subscription {
@@ -113,7 +125,7 @@ import { ref, reactive, watch, isRef, isReactive, createVNode, getCurrentInstanc
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.31";
+var version = "0.0.33";
 
 // src/ReactiveView.ts
 var setup = {
@@ -125,6 +137,7 @@ var ReactiveView_default = {
   props: {
     setup: {},
     ReactiveView: {
+      type: Boolean,
       default: true
     },
     instance: {
@@ -165,7 +178,7 @@ var ReactiveView_default = {
         context.slots.default ? context.attrs : __spreadValues({
           style: { color: "red", textAlign: "center" }
         }, context.attrs),
-        context.slots.default ? context.slots.default({ vue: vue2, component: component2, props, context }) : `${props.modelName}: ${name}@${version}`
+        context.slots.default ? context.slots.default({ component: component2, vue: vue2, props, context }) : `${props.modelName}: ${name}@${version}`
       );
     };
     const isValid = ref(false);
@@ -215,15 +228,23 @@ var ReactiveView_default = {
       }
     });
     const watchDataProp = (dataProp) => {
-      var _a2;
-      const config2 = typeof context.attrs["onUpdate:data"] === "function" ? {
-        callback: context.attrs["onUpdate:data"]
-      } : (_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {};
+      var _a2, _b2, _c2;
+      const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
+        callback: (_b2 = ((_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {}).callback) != null ? _b2 : context.attrs["data:callback"],
+        options: Object.assign({
+          immediate: context.attrs["data:immediate"],
+          deep: context.attrs["data:deep"],
+          once: context.attrs["data:once"]
+        }, ((_c2 = context.attrs["onUpdate:data"]) != null ? _c2 : {}).options)
+      };
+      if (context.attrs["data:log"]) {
+        console.log(`[data:prop]:`, config2);
+      }
       watch(typeof dataProp === "function" || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
         var _a3;
         const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
         if (typeof config2.callback === "function") {
-          model.replaceData((_a3 = config2.callback(diff, model)) != null ? _a3 : after);
+          model.replaceData((_a3 = config2.callback(diff, { component })) != null ? _a3 : after);
         } else {
           model.replaceData(after);
         }
@@ -244,7 +265,7 @@ var ReactiveView_default = {
       } : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
       watch(() => model.getData(), (after, before) => {
         const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
-        config2.callback(diff, model);
+        config2.callback(diff, { component });
       }, config2.options);
     }
     const component = ref({ parent: { self: vue.proxy }, self: { template, model, isValid } });
@@ -277,7 +298,7 @@ var ReactiveView_default = {
 };
 
 // src/index.ts
-import { createVNode as createVNode2, isRef as isRef2 } from "vue";
+import { createVNode as createVNode2, isRef as isRef2, h } from "vue";
 import { formatInTimeZone } from "date-fns-tz";
 var index_default = ReactiveView_default;
 function safeRequest(request) {
@@ -446,11 +467,46 @@ function MergeStyles(...params) {
     }
   });
 }
+var extendVnode = (component, element) => {
+  return new Proxy(access(component), {
+    get: (target, key) => {
+      const getVnode = () => {
+        try {
+          return target[key]();
+        } catch (e) {
+          throw new Error(`${key} does not exist as vnode on component.`);
+        }
+      };
+      const vnode = getVnode();
+      return (props = {}, slots) => {
+        var _a;
+        const _b = getProps((_a = vnode.props) != null ? _a : {}, []), { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
+        const finalClasses = MergeStyles(classes, typeof props.class === "function" ? props.class(classes) : props.class);
+        const functionalProps = Object.entries(props).reduce((props2, [key2, value]) => {
+          if (![
+            "class"
+            /*, "style"*/
+          ].includes(key2) && typeof value === "function") {
+            props2[key2] = value(vnode.props[key2]);
+          }
+          return props2;
+        }, props);
+        const finalProps = Object.assign(rest, functionalProps, {
+          class: finalClasses
+          /*, style: finalStyles*/
+        });
+        const finalSlots = typeof slots === "function" ? slots(vnode.children) : vnode.children;
+        return h(["string", "undefined"].includes(typeof element) ? vnode : element, finalProps, finalSlots);
+      };
+    }
+  });
+};
 export {
   MergeStyles,
   StyleParser,
   access,
   index_default as default,
+  extendVnode,
   getDate,
   getProps,
   getReactiveViewComponent,

package/package.json

@@ -1,45 +1,46 @@
-{
-    "name": "@razaman2/reactive-view",
-    "version": "0.0.31",
-    "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",
-        "reactive-ui"
-    ],
-    "author": "razaman2",
-    "license": "MIT",
-    "dependencies": {
-        "@razaman2/data-manager": "^3.2.12",
-        "@razaman2/object-manager": "^3.4.2",
-        "date-fns": "^4.1.0",
-        "date-fns-tz": "^3.2.0",
-        "uuid": "^11.1.0"
-    },
-    "peerDependencies": {
-        "vue": "^3.5.16"
-    },
-    "devDependencies": {
-        "@types/uuid": "^10.0.0",
-        "tsup": "^8.5.0",
-        "typescript": "^5.8.3",
-        "vitest": "^3.2.3"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "files": [
-        "dist"
-    ]
-}
+{
+    "name": "@razaman2/reactive-view",
+    "version": "0.0.33",
+    "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",
+        "reactive-ui"
+    ],
+    "author": "razaman2",
+    "license": "MIT",
+    "dependencies": {
+        "@razaman2/data-manager": "^3.2.12",
+        "@razaman2/event-emitter": "^2.1.1",
+        "@razaman2/object-manager": "^3.4.2",
+        "date-fns": "^4.1.0",
+        "date-fns-tz": "^3.2.0",
+        "uuid": "^11.1.0"
+    },
+    "peerDependencies": {
+        "vue": "^3.5.16"
+    },
+    "devDependencies": {
+        "@types/uuid": "^10.0.0",
+        "tsup": "^8.5.0",
+        "typescript": "^5.8.3",
+        "vitest": "^3.2.3"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist"
+    ]
+}