@razaman2/reactive-view 0.0.30 → 0.0.31

package/dist/index.d.mts

@@ -1,11 +1,23 @@
 import * as vue from 'vue';
 import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
 
+type ComponentExtension = {
+    parent?: ComponentExtension;
+    self?: Record<string | symbol, any>;
+    access?: () => ComponentExtension;
+    value?: ComponentExtension;
+};
+type PropOptions = {
+    exclude: string | Array<string>;
+    include: Record<string, any>;
+};
 type SubscriptionItem = {
     name: string;
     handler: Function;
     data?: any;
 };
+type PropExclusions = Array<string> | string;
+
 declare class Subscription {
     private subscriptions;
     private data;
@@ -23,18 +35,6 @@ declare class Subscription {
     get(name: string): SubscriptionItem;
 }
 
-type ComponentExtension = {
-    parent?: ComponentExtension;
-    self?: Record<string | symbol, any>;
-    access?: () => ComponentExtension;
-    value?: ComponentExtension;
-};
-type PropOptions = {
-    exclude: string | Array<string>;
-    include: Record<string, any>;
-};
-type PropExclusions = Array<string> | string;
-
 declare const setup: {
     type: FunctionConstructor;
     default: (parent?: {}, self?: {}) => {};
@@ -65,7 +65,6 @@ declare const _default: {
         logging: {
             validator: (logging: boolean) => boolean;
         };
-        loading: {};
         modelName: {
             type: StringConstructor;
             default: string;

package/dist/index.d.ts

@@ -1,11 +1,23 @@
 import * as vue from 'vue';
 import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
 
+type ComponentExtension = {
+    parent?: ComponentExtension;
+    self?: Record<string | symbol, any>;
+    access?: () => ComponentExtension;
+    value?: ComponentExtension;
+};
+type PropOptions = {
+    exclude: string | Array<string>;
+    include: Record<string, any>;
+};
 type SubscriptionItem = {
     name: string;
     handler: Function;
     data?: any;
 };
+type PropExclusions = Array<string> | string;
+
 declare class Subscription {
     private subscriptions;
     private data;
@@ -23,18 +35,6 @@ declare class Subscription {
     get(name: string): SubscriptionItem;
 }
 
-type ComponentExtension = {
-    parent?: ComponentExtension;
-    self?: Record<string | symbol, any>;
-    access?: () => ComponentExtension;
-    value?: ComponentExtension;
-};
-type PropOptions = {
-    exclude: string | Array<string>;
-    include: Record<string, any>;
-};
-type PropExclusions = Array<string> | string;
-
 declare const setup: {
     type: FunctionConstructor;
     default: (parent?: {}, self?: {}) => {};
@@ -65,7 +65,6 @@ declare const _default: {
         logging: {
             validator: (logging: boolean) => boolean;
         };
-        loading: {};
         modelName: {
             type: StringConstructor;
             default: string;

package/dist/index.js

@@ -56,7 +56,6 @@ __export(index_exports, {
   useSubscription: () => useSubscription
 });
 module.exports = __toCommonJS(index_exports);
-var import_date_fns_tz = require("date-fns-tz");
 
 // src/Subscription.ts
 var Subscription = class _Subscription {
@@ -81,23 +80,26 @@ var Subscription = class _Subscription {
     this.unsubscribe(name2);
     return this.subscribe(name2, handler, data);
   }
-  unsubscribe(subscriptions) {
-    if (!Array.isArray(subscriptions)) {
-      subscriptions = subscriptions ? [subscriptions] : [];
+  unsubscribe(param1) {
+    if (!Array.isArray(param1)) {
+      param1 = param1 ? [param1] : [];
     }
-    if (subscriptions.length) {
-      subscriptions.forEach((name2) => {
+    const log = (name2) => {
+      return console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
+    };
+    if (param1.length) {
+      param1.forEach((name2) => {
         const subscription = this.find(name2);
         if (subscription) {
           subscription.handler();
           this.remove(subscription);
-          console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
+          log(name2);
         }
       });
     } else {
       this.subscriptions.forEach((subscription) => {
         subscription.handler();
-        console.log(`%cUnsubscribed From Subscription (${subscription.name})`, "background-color: yellow; color: red; font-weight: bold; padding: 3px;");
+        log(subscription.name);
       });
       this.subscriptions = [];
     }
@@ -146,9 +148,6 @@ 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"));
@@ -156,7 +155,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.30";
+var version = "0.0.31";
 
 // src/ReactiveView.ts
 var setup = {
@@ -191,7 +190,6 @@ var ReactiveView_default = {
         return ["Boolean"].includes(logging.constructor.name);
       }
     },
-    loading: {},
     modelName: {
       type: String,
       default: "ReactiveView"
@@ -204,16 +202,13 @@ var ReactiveView_default = {
   setup(props, context) {
     var _a, _b, _c, _d, _e, _f, _g;
     const template = (component2, vue2) => {
-      return context.slots.default ? (0, import_vue.createVNode)(
+      return (0, import_vue.createVNode)(
         "div",
-        context.attrs,
-        context.slots.default({ vue: vue2, component: component2, props, context })
-      ) : (0, import_vue.createVNode)("div", __spreadValues({
-        style: {
-          color: "red",
-          textAlign: "center"
-        }
-      }, context.attrs), `${props.modelName}: ${name}@${version}`);
+        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}`
+      );
     };
     const isValid = (0, import_vue.ref)(false);
     const ready = (0, import_vue.ref)(false);
@@ -227,9 +222,6 @@ var ReactiveView_default = {
     if (async && !((_a = vue.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
       console.error("[ReactiveView]: defaultData is required for async data.");
     }
-    if (props.loading && !props.defer) {
-      console.warn("[ReactiveView]: loading prop should be used with defer prop.");
-    }
     const defaultData = props.getDefaultData(
       ((_b = vue.vnode.props) == null ? void 0 : _b.hasOwnProperty("defaultData")) ? vue.vnode.props.defaultData : typeof ((_c = vue.vnode.props) == null ? void 0 : _c.data) === "object" ? Array.isArray(vue.vnode.props.data) ? [] : {} : ((_d = vue.vnode.props) == null ? void 0 : _d.hasOwnProperty("data")) ? (_e = vue.vnode.props) == null ? void 0 : _e.data : {}
     );
@@ -280,7 +272,9 @@ var ReactiveView_default = {
       }, config2.options);
     };
     setTimeout(async () => {
-      watchDataProp(await data);
+      var _a2;
+      const [dataProp] = await Promise.all([data, (_a2 = defer.value) != null ? _a2 : true]);
+      watchDataProp(dataProp);
     });
     setTimeout(async () => {
       var _a2;
@@ -314,16 +308,19 @@ var ReactiveView_default = {
     }, component.value);
     props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
     return (vue2) => {
+      var _a2, _b2;
       if (ready.value) {
         return access(component).template(component, vue2);
       } else {
-        return props.loading;
+        return (_b2 = (_a2 = context.slots).loading) == null ? void 0 : _b2.call(_a2, { component });
       }
     };
   }
 };
 
 // src/index.ts
+var import_vue2 = require("vue");
+var import_date_fns_tz = require("date-fns-tz");
 var index_default = ReactiveView_default;
 function safeRequest(request) {
   return new Promise(async (resolve) => {
@@ -478,10 +475,13 @@ function MergeStyles(...params) {
     return __spreadValues(__spreadValues({}, StyleParser(typeof item === "function" ? item(items.slice(0, index - 1)) : item)), styles);
   }, {}), {
     get: (target, key, receiver) => {
+      const styles = Object.entries(target).reduce((styles2, [key2, val]) => {
+        return val ? styles2.concat(key2) : styles2;
+      }, []);
       if (key === "string") {
-        return Object.entries(target).reduce((styles, [key2, val]) => {
-          return val ? styles.concat(key2) : styles;
-        }, []).join(" ");
+        return styles.join(" ");
+      } else if (key === "array") {
+        return styles;
       } else {
         return Reflect.get(target, key, receiver);
       }

package/dist/index.mjs

@@ -15,9 +15,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 
-// src/index.ts
-import { formatInTimeZone } from "date-fns-tz";
-
 // src/Subscription.ts
 var Subscription = class _Subscription {
   constructor() {
@@ -41,23 +38,26 @@ var Subscription = class _Subscription {
     this.unsubscribe(name2);
     return this.subscribe(name2, handler, data);
   }
-  unsubscribe(subscriptions) {
-    if (!Array.isArray(subscriptions)) {
-      subscriptions = subscriptions ? [subscriptions] : [];
+  unsubscribe(param1) {
+    if (!Array.isArray(param1)) {
+      param1 = param1 ? [param1] : [];
     }
-    if (subscriptions.length) {
-      subscriptions.forEach((name2) => {
+    const log = (name2) => {
+      return console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
+    };
+    if (param1.length) {
+      param1.forEach((name2) => {
         const subscription = this.find(name2);
         if (subscription) {
           subscription.handler();
           this.remove(subscription);
-          console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
+          log(name2);
         }
       });
     } else {
       this.subscriptions.forEach((subscription) => {
         subscription.handler();
-        console.log(`%cUnsubscribed From Subscription (${subscription.name})`, "background-color: yellow; color: red; font-weight: bold; padding: 3px;");
+        log(subscription.name);
       });
       this.subscriptions = [];
     }
@@ -106,9 +106,6 @@ var _Subscriptions = class _Subscriptions extends Subscription {
 _Subscriptions.subscriptions = _Subscriptions.create();
 var Subscriptions = _Subscriptions;
 
-// src/index.ts
-import { createVNode as createVNode2, isRef as isRef2 } from "vue";
-
 // src/ReactiveView.ts
 import ObjectManager from "@razaman2/object-manager";
 import DataManager from "@razaman2/data-manager";
@@ -116,7 +113,7 @@ import { ref, reactive, watch, isRef, isReactive, createVNode, getCurrentInstanc
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.30";
+var version = "0.0.31";
 
 // src/ReactiveView.ts
 var setup = {
@@ -151,7 +148,6 @@ var ReactiveView_default = {
         return ["Boolean"].includes(logging.constructor.name);
       }
     },
-    loading: {},
     modelName: {
       type: String,
       default: "ReactiveView"
@@ -164,16 +160,13 @@ var ReactiveView_default = {
   setup(props, context) {
     var _a, _b, _c, _d, _e, _f, _g;
     const template = (component2, vue2) => {
-      return context.slots.default ? createVNode(
+      return createVNode(
         "div",
-        context.attrs,
-        context.slots.default({ vue: vue2, component: component2, props, context })
-      ) : createVNode("div", __spreadValues({
-        style: {
-          color: "red",
-          textAlign: "center"
-        }
-      }, context.attrs), `${props.modelName}: ${name}@${version}`);
+        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}`
+      );
     };
     const isValid = ref(false);
     const ready = ref(false);
@@ -187,9 +180,6 @@ var ReactiveView_default = {
     if (async && !((_a = vue.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
       console.error("[ReactiveView]: defaultData is required for async data.");
     }
-    if (props.loading && !props.defer) {
-      console.warn("[ReactiveView]: loading prop should be used with defer prop.");
-    }
     const defaultData = props.getDefaultData(
       ((_b = vue.vnode.props) == null ? void 0 : _b.hasOwnProperty("defaultData")) ? vue.vnode.props.defaultData : typeof ((_c = vue.vnode.props) == null ? void 0 : _c.data) === "object" ? Array.isArray(vue.vnode.props.data) ? [] : {} : ((_d = vue.vnode.props) == null ? void 0 : _d.hasOwnProperty("data")) ? (_e = vue.vnode.props) == null ? void 0 : _e.data : {}
     );
@@ -240,7 +230,9 @@ var ReactiveView_default = {
       }, config2.options);
     };
     setTimeout(async () => {
-      watchDataProp(await data);
+      var _a2;
+      const [dataProp] = await Promise.all([data, (_a2 = defer.value) != null ? _a2 : true]);
+      watchDataProp(dataProp);
     });
     setTimeout(async () => {
       var _a2;
@@ -274,16 +266,19 @@ var ReactiveView_default = {
     }, component.value);
     props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
     return (vue2) => {
+      var _a2, _b2;
       if (ready.value) {
         return access(component).template(component, vue2);
       } else {
-        return props.loading;
+        return (_b2 = (_a2 = context.slots).loading) == null ? void 0 : _b2.call(_a2, { component });
       }
     };
   }
 };
 
 // src/index.ts
+import { createVNode as createVNode2, isRef as isRef2 } from "vue";
+import { formatInTimeZone } from "date-fns-tz";
 var index_default = ReactiveView_default;
 function safeRequest(request) {
   return new Promise(async (resolve) => {
@@ -438,10 +433,13 @@ function MergeStyles(...params) {
     return __spreadValues(__spreadValues({}, StyleParser(typeof item === "function" ? item(items.slice(0, index - 1)) : item)), styles);
   }, {}), {
     get: (target, key, receiver) => {
+      const styles = Object.entries(target).reduce((styles2, [key2, val]) => {
+        return val ? styles2.concat(key2) : styles2;
+      }, []);
       if (key === "string") {
-        return Object.entries(target).reduce((styles, [key2, val]) => {
-          return val ? styles.concat(key2) : styles;
-        }, []).join(" ");
+        return styles.join(" ");
+      } else if (key === "array") {
+        return styles;
       } else {
         return Reflect.get(target, key, receiver);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.0.30",
+    "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",
@@ -21,20 +21,20 @@
     "author": "razaman2",
     "license": "MIT",
     "dependencies": {
-        "@razaman2/data-manager": "^3.2.11",
+        "@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.13"
+        "vue": "^3.5.16"
     },
     "devDependencies": {
         "@types/uuid": "^10.0.0",
-        "tsup": "^8.4.0",
+        "tsup": "^8.5.0",
         "typescript": "^5.8.3",
-        "vitest": "^3.1.1"
+        "vitest": "^3.2.3"
     },
     "publishConfig": {
         "access": "public"