@razaman2/reactive-view 0.0.29 → 0.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +15 -15
  2. package/dist/index.d.ts +15 -15
  3. package/dist/index.js +65 -47
  4. package/dist/index.mjs +63 -47
  5. package/package.json +5 -5
package/dist/index.d.mts CHANGED
@@ -1,11 +1,23 @@
1
1
  import * as vue from 'vue';
2
2
  import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
3
3
 
4
+ type ComponentExtension = {
5
+ parent?: ComponentExtension;
6
+ self?: Record<string | symbol, any>;
7
+ access?: () => ComponentExtension;
8
+ value?: ComponentExtension;
9
+ };
10
+ type PropOptions = {
11
+ exclude: string | Array<string>;
12
+ include: Record<string, any>;
13
+ };
4
14
  type SubscriptionItem = {
5
15
  name: string;
6
16
  handler: Function;
7
17
  data?: any;
8
18
  };
19
+ type PropExclusions = Array<string> | string;
20
+
9
21
  declare class Subscription {
10
22
  private subscriptions;
11
23
  private data;
@@ -23,21 +35,10 @@ declare class Subscription {
23
35
  get(name: string): SubscriptionItem;
24
36
  }
25
37
 
26
- type ComponentExtension = {
27
- parent?: ComponentExtension;
28
- self?: Record<string | symbol, any>;
29
- access?: () => ComponentExtension;
30
- value?: ComponentExtension;
31
- };
32
- type PropOptions = {
33
- exclude: string | Array<string>;
34
- include: Record<string, any>;
35
- };
36
- type PropExclusions = Array<string> | string;
37
-
38
38
  declare const setup: {
39
39
  type: FunctionConstructor;
40
40
  default: (parent?: {}, self?: {}) => {};
41
+ ReactiveView: boolean;
41
42
  };
42
43
  declare const _default: {
43
44
  props: {
@@ -64,7 +65,6 @@ declare const _default: {
64
65
  logging: {
65
66
  validator: (logging: boolean) => boolean;
66
67
  };
67
- loading: {};
68
68
  modelName: {
69
69
  type: StringConstructor;
70
70
  default: string;
@@ -104,7 +104,7 @@ declare function getDate(timestamp: {
104
104
  timezone?: string;
105
105
  }): string;
106
106
  declare function access(view?: ComponentExtension | UnwrapRef<any> | (() => ComponentExtension), alternative?: any): any;
107
- declare function getSubscription(): {
107
+ declare function useSubscription(): {
108
108
  addSubscription(name: string, handler?: () => boolean, data?: any): void;
109
109
  replaceSubscription(name: string, handler?: () => boolean, data?: any): void;
110
110
  removeSubscriptions(): void;
@@ -116,4 +116,4 @@ declare function getSubscription(): {
116
116
  declare function StyleParser(styles?: Array<string> | Record<string, boolean> | string): {};
117
117
  declare function MergeStyles(...params: any): any;
118
118
 
119
- export { MergeStyles, StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };
119
+ export { MergeStyles, StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, safeRequest, setup, useSubscription };
package/dist/index.d.ts CHANGED
@@ -1,11 +1,23 @@
1
1
  import * as vue from 'vue';
2
2
  import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
3
3
 
4
+ type ComponentExtension = {
5
+ parent?: ComponentExtension;
6
+ self?: Record<string | symbol, any>;
7
+ access?: () => ComponentExtension;
8
+ value?: ComponentExtension;
9
+ };
10
+ type PropOptions = {
11
+ exclude: string | Array<string>;
12
+ include: Record<string, any>;
13
+ };
4
14
  type SubscriptionItem = {
5
15
  name: string;
6
16
  handler: Function;
7
17
  data?: any;
8
18
  };
19
+ type PropExclusions = Array<string> | string;
20
+
9
21
  declare class Subscription {
10
22
  private subscriptions;
11
23
  private data;
@@ -23,21 +35,10 @@ declare class Subscription {
23
35
  get(name: string): SubscriptionItem;
24
36
  }
25
37
 
26
- type ComponentExtension = {
27
- parent?: ComponentExtension;
28
- self?: Record<string | symbol, any>;
29
- access?: () => ComponentExtension;
30
- value?: ComponentExtension;
31
- };
32
- type PropOptions = {
33
- exclude: string | Array<string>;
34
- include: Record<string, any>;
35
- };
36
- type PropExclusions = Array<string> | string;
37
-
38
38
  declare const setup: {
39
39
  type: FunctionConstructor;
40
40
  default: (parent?: {}, self?: {}) => {};
41
+ ReactiveView: boolean;
41
42
  };
42
43
  declare const _default: {
43
44
  props: {
@@ -64,7 +65,6 @@ declare const _default: {
64
65
  logging: {
65
66
  validator: (logging: boolean) => boolean;
66
67
  };
67
- loading: {};
68
68
  modelName: {
69
69
  type: StringConstructor;
70
70
  default: string;
@@ -104,7 +104,7 @@ declare function getDate(timestamp: {
104
104
  timezone?: string;
105
105
  }): string;
106
106
  declare function access(view?: ComponentExtension | UnwrapRef<any> | (() => ComponentExtension), alternative?: any): any;
107
- declare function getSubscription(): {
107
+ declare function useSubscription(): {
108
108
  addSubscription(name: string, handler?: () => boolean, data?: any): void;
109
109
  replaceSubscription(name: string, handler?: () => boolean, data?: any): void;
110
110
  removeSubscriptions(): void;
@@ -116,4 +116,4 @@ declare function getSubscription(): {
116
116
  declare function StyleParser(styles?: Array<string> | Record<string, boolean> | string): {};
117
117
  declare function MergeStyles(...params: any): any;
118
118
 
119
- export { MergeStyles, StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };
119
+ export { MergeStyles, StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, safeRequest, setup, useSubscription };
package/dist/index.js CHANGED
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
2
  var __create = Object.create;
3
3
  var __defProp = Object.defineProperty;
4
- var __defProps = Object.defineProperties;
5
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
8
6
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
7
  var __getProtoOf = Object.getPrototypeOf;
@@ -21,7 +19,6 @@ var __spreadValues = (a, b) => {
21
19
  }
22
20
  return a;
23
21
  };
24
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
22
  var __export = (target, all) => {
26
23
  for (var name2 in all)
27
24
  __defProp(target, name2, { get: all[name2], enumerable: true });
@@ -54,12 +51,11 @@ __export(index_exports, {
54
51
  getDate: () => getDate,
55
52
  getProps: () => getProps,
56
53
  getReactiveViewComponent: () => getReactiveViewComponent,
57
- getSubscription: () => getSubscription,
58
54
  safeRequest: () => safeRequest,
59
- setup: () => setup
55
+ setup: () => setup,
56
+ useSubscription: () => useSubscription
60
57
  });
61
58
  module.exports = __toCommonJS(index_exports);
62
- var import_date_fns_tz = require("date-fns-tz");
63
59
 
64
60
  // src/Subscription.ts
65
61
  var Subscription = class _Subscription {
@@ -84,23 +80,26 @@ var Subscription = class _Subscription {
84
80
  this.unsubscribe(name2);
85
81
  return this.subscribe(name2, handler, data);
86
82
  }
87
- unsubscribe(subscriptions) {
88
- if (!Array.isArray(subscriptions)) {
89
- subscriptions = subscriptions ? [subscriptions] : [];
83
+ unsubscribe(param1) {
84
+ if (!Array.isArray(param1)) {
85
+ param1 = param1 ? [param1] : [];
90
86
  }
91
- if (subscriptions.length) {
92
- subscriptions.forEach((name2) => {
87
+ const log = (name2) => {
88
+ return console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
89
+ };
90
+ if (param1.length) {
91
+ param1.forEach((name2) => {
93
92
  const subscription = this.find(name2);
94
93
  if (subscription) {
95
94
  subscription.handler();
96
95
  this.remove(subscription);
97
- console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
96
+ log(name2);
98
97
  }
99
98
  });
100
99
  } else {
101
100
  this.subscriptions.forEach((subscription) => {
102
101
  subscription.handler();
103
- console.log(`%cUnsubscribed From Subscription (${subscription.name})`, "background-color: yellow; color: red; font-weight: bold; padding: 3px;");
102
+ log(subscription.name);
104
103
  });
105
104
  this.subscriptions = [];
106
105
  }
@@ -149,9 +148,6 @@ var _Subscriptions = class _Subscriptions extends Subscription {
149
148
  _Subscriptions.subscriptions = _Subscriptions.create();
150
149
  var Subscriptions = _Subscriptions;
151
150
 
152
- // src/index.ts
153
- var import_vue2 = require("vue");
154
-
155
151
  // src/ReactiveView.ts
156
152
  var import_object_manager = __toESM(require("@razaman2/object-manager"));
157
153
  var import_data_manager = __toESM(require("@razaman2/data-manager"));
@@ -159,12 +155,13 @@ var import_vue = require("vue");
159
155
 
160
156
  // package.json
161
157
  var name = "@razaman2/reactive-view";
162
- var version = "0.0.29";
158
+ var version = "0.0.31";
163
159
 
164
160
  // src/ReactiveView.ts
165
161
  var setup = {
166
162
  type: Function,
167
- default: (parent = {}, self = {}) => self
163
+ default: (parent = {}, self = {}) => self,
164
+ ReactiveView: true
168
165
  };
169
166
  var ReactiveView_default = {
170
167
  props: {
@@ -193,7 +190,6 @@ var ReactiveView_default = {
193
190
  return ["Boolean"].includes(logging.constructor.name);
194
191
  }
195
192
  },
196
- loading: {},
197
193
  modelName: {
198
194
  type: String,
199
195
  default: "ReactiveView"
@@ -206,16 +202,13 @@ var ReactiveView_default = {
206
202
  setup(props, context) {
207
203
  var _a, _b, _c, _d, _e, _f, _g;
208
204
  const template = (component2, vue2) => {
209
- return context.slots.default ? (0, import_vue.createVNode)(
205
+ return (0, import_vue.createVNode)(
210
206
  "div",
211
- context.attrs,
212
- context.slots.default({ vue: vue2, component: component2, props, context })
213
- ) : (0, import_vue.createVNode)("div", __spreadValues({
214
- style: {
215
- color: "red",
216
- textAlign: "center"
217
- }
218
- }, context.attrs), `${props.modelName}: ${name}@${version}`);
207
+ context.slots.default ? context.attrs : __spreadValues({
208
+ style: { color: "red", textAlign: "center" }
209
+ }, context.attrs),
210
+ context.slots.default ? context.slots.default({ vue: vue2, component: component2, props, context }) : `${props.modelName}: ${name}@${version}`
211
+ );
219
212
  };
220
213
  const isValid = (0, import_vue.ref)(false);
221
214
  const ready = (0, import_vue.ref)(false);
@@ -229,16 +222,13 @@ var ReactiveView_default = {
229
222
  if (async && !((_a = vue.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
230
223
  console.error("[ReactiveView]: defaultData is required for async data.");
231
224
  }
232
- if (props.loading && !props.defer) {
233
- console.warn("[ReactiveView]: loading prop should be used with defer prop.");
234
- }
235
225
  const defaultData = props.getDefaultData(
236
226
  ((_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 : {}
237
227
  );
238
228
  const datatype = Array.isArray(defaultData) ? [] : {};
239
229
  const config = {
240
230
  data: (0, import_vue.reactive)(
241
- import_object_manager.default.on(async ? datatype : ((_f = vue.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? data : datatype).clone()
231
+ import_object_manager.default.on(async ? datatype : ((_f = vue.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? typeof data === "function" ? datatype : data : datatype).clone()
242
232
  ),
243
233
  defaultData: import_object_manager.default.on(defaultData).clone(),
244
234
  notifications: props.notifications,
@@ -253,7 +243,7 @@ var ReactiveView_default = {
253
243
  var _a2;
254
244
  const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
255
245
  if (typeof beforeSetData === "function") {
256
- const after = import_object_manager.default.on(datatype).set(...params).get();
246
+ const after = import_object_manager.default.on(datatype).set(...params.length ? params : [defaultData]).get();
257
247
  const before = target.getData();
258
248
  beforeSetData({ before, after }, target);
259
249
  } else {
@@ -282,7 +272,9 @@ var ReactiveView_default = {
282
272
  }, config2.options);
283
273
  };
284
274
  setTimeout(async () => {
285
- watchDataProp(await data);
275
+ var _a2;
276
+ const [dataProp] = await Promise.all([data, (_a2 = defer.value) != null ? _a2 : true]);
277
+ watchDataProp(dataProp);
286
278
  });
287
279
  setTimeout(async () => {
288
280
  var _a2;
@@ -314,18 +306,21 @@ var ReactiveView_default = {
314
306
  }
315
307
  return options;
316
308
  }, component.value);
317
- props.instance.value = component.value;
309
+ props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
318
310
  return (vue2) => {
311
+ var _a2, _b2;
319
312
  if (ready.value) {
320
313
  return access(component).template(component, vue2);
321
314
  } else {
322
- return props.loading;
315
+ return (_b2 = (_a2 = context.slots).loading) == null ? void 0 : _b2.call(_a2, { component });
323
316
  }
324
317
  };
325
318
  }
326
319
  };
327
320
 
328
321
  // src/index.ts
322
+ var import_vue2 = require("vue");
323
+ var import_date_fns_tz = require("date-fns-tz");
329
324
  var index_default = ReactiveView_default;
330
325
  function safeRequest(request) {
331
326
  return new Promise(async (resolve) => {
@@ -428,7 +423,7 @@ function access(view = {}, alternative) {
428
423
  return resolve(view);
429
424
  }
430
425
  }
431
- function getSubscription() {
426
+ function useSubscription() {
432
427
  const subscriptions = [];
433
428
  const subscription = Subscriptions.get();
434
429
  return {
@@ -456,19 +451,42 @@ function getSubscription() {
456
451
  };
457
452
  }
458
453
  function StyleParser(styles = {}) {
459
- const transform = (style, status = true) => style.split(/\s+/).reduce((object, style2) => {
460
- return __spreadProps(__spreadValues({}, object), {
461
- [style2]: status
462
- });
463
- }, {});
454
+ const transform = (style, status = true) => {
455
+ const remove = style.split(/(-{[^}]+})/);
456
+ return remove.reduce((object, style2) => {
457
+ var _a;
458
+ const remove2 = /-{(.+?)}/.exec(style2);
459
+ (remove2 ? (_a = remove2[1]) != null ? _a : style2 : style2).split(/\s+/).forEach((item) => {
460
+ if (item) {
461
+ Object.assign(object, { [item]: remove2 ? false : status });
462
+ }
463
+ });
464
+ return object;
465
+ }, {});
466
+ };
464
467
  return Array.isArray(styles) ? styles.reduce((styles2, style) => Object.assign(transform(style), styles2), {}) : typeof styles === "string" ? transform(styles) : Object.entries(styles).reduce((acc, [styles2, value]) => {
465
468
  return __spreadValues(__spreadValues({}, acc), transform(styles2, value));
466
469
  }, {});
467
470
  }
468
471
  function MergeStyles(...params) {
469
- return params.reduce((styles, style, index, array) => {
470
- return __spreadValues(__spreadValues({}, StyleParser(array[array.length - index - 1])), styles);
471
- }, {});
472
+ return new Proxy(params.reduce((styles, style, index, items) => {
473
+ var _a;
474
+ const item = (_a = items[items.length - index - 1]) != null ? _a : {};
475
+ return __spreadValues(__spreadValues({}, StyleParser(typeof item === "function" ? item(items.slice(0, index - 1)) : item)), styles);
476
+ }, {}), {
477
+ get: (target, key, receiver) => {
478
+ const styles = Object.entries(target).reduce((styles2, [key2, val]) => {
479
+ return val ? styles2.concat(key2) : styles2;
480
+ }, []);
481
+ if (key === "string") {
482
+ return styles.join(" ");
483
+ } else if (key === "array") {
484
+ return styles;
485
+ } else {
486
+ return Reflect.get(target, key, receiver);
487
+ }
488
+ }
489
+ });
472
490
  }
473
491
  // Annotate the CommonJS export names for ESM import in node:
474
492
  0 && (module.exports = {
@@ -478,7 +496,7 @@ function MergeStyles(...params) {
478
496
  getDate,
479
497
  getProps,
480
498
  getReactiveViewComponent,
481
- getSubscription,
482
499
  safeRequest,
483
- setup
500
+ setup,
501
+ useSubscription
484
502
  });
package/dist/index.mjs CHANGED
@@ -1,6 +1,4 @@
1
1
  var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
2
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
3
  var __hasOwnProp = Object.prototype.hasOwnProperty;
6
4
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,10 +14,6 @@ var __spreadValues = (a, b) => {
16
14
  }
17
15
  return a;
18
16
  };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
-
21
- // src/index.ts
22
- import { formatInTimeZone } from "date-fns-tz";
23
17
 
24
18
  // src/Subscription.ts
25
19
  var Subscription = class _Subscription {
@@ -44,23 +38,26 @@ var Subscription = class _Subscription {
44
38
  this.unsubscribe(name2);
45
39
  return this.subscribe(name2, handler, data);
46
40
  }
47
- unsubscribe(subscriptions) {
48
- if (!Array.isArray(subscriptions)) {
49
- subscriptions = subscriptions ? [subscriptions] : [];
41
+ unsubscribe(param1) {
42
+ if (!Array.isArray(param1)) {
43
+ param1 = param1 ? [param1] : [];
50
44
  }
51
- if (subscriptions.length) {
52
- subscriptions.forEach((name2) => {
45
+ const log = (name2) => {
46
+ return console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
47
+ };
48
+ if (param1.length) {
49
+ param1.forEach((name2) => {
53
50
  const subscription = this.find(name2);
54
51
  if (subscription) {
55
52
  subscription.handler();
56
53
  this.remove(subscription);
57
- console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
54
+ log(name2);
58
55
  }
59
56
  });
60
57
  } else {
61
58
  this.subscriptions.forEach((subscription) => {
62
59
  subscription.handler();
63
- console.log(`%cUnsubscribed From Subscription (${subscription.name})`, "background-color: yellow; color: red; font-weight: bold; padding: 3px;");
60
+ log(subscription.name);
64
61
  });
65
62
  this.subscriptions = [];
66
63
  }
@@ -109,9 +106,6 @@ var _Subscriptions = class _Subscriptions extends Subscription {
109
106
  _Subscriptions.subscriptions = _Subscriptions.create();
110
107
  var Subscriptions = _Subscriptions;
111
108
 
112
- // src/index.ts
113
- import { createVNode as createVNode2, isRef as isRef2 } from "vue";
114
-
115
109
  // src/ReactiveView.ts
116
110
  import ObjectManager from "@razaman2/object-manager";
117
111
  import DataManager from "@razaman2/data-manager";
@@ -119,12 +113,13 @@ import { ref, reactive, watch, isRef, isReactive, createVNode, getCurrentInstanc
119
113
 
120
114
  // package.json
121
115
  var name = "@razaman2/reactive-view";
122
- var version = "0.0.29";
116
+ var version = "0.0.31";
123
117
 
124
118
  // src/ReactiveView.ts
125
119
  var setup = {
126
120
  type: Function,
127
- default: (parent = {}, self = {}) => self
121
+ default: (parent = {}, self = {}) => self,
122
+ ReactiveView: true
128
123
  };
129
124
  var ReactiveView_default = {
130
125
  props: {
@@ -153,7 +148,6 @@ var ReactiveView_default = {
153
148
  return ["Boolean"].includes(logging.constructor.name);
154
149
  }
155
150
  },
156
- loading: {},
157
151
  modelName: {
158
152
  type: String,
159
153
  default: "ReactiveView"
@@ -166,16 +160,13 @@ var ReactiveView_default = {
166
160
  setup(props, context) {
167
161
  var _a, _b, _c, _d, _e, _f, _g;
168
162
  const template = (component2, vue2) => {
169
- return context.slots.default ? createVNode(
163
+ return createVNode(
170
164
  "div",
171
- context.attrs,
172
- context.slots.default({ vue: vue2, component: component2, props, context })
173
- ) : createVNode("div", __spreadValues({
174
- style: {
175
- color: "red",
176
- textAlign: "center"
177
- }
178
- }, context.attrs), `${props.modelName}: ${name}@${version}`);
165
+ context.slots.default ? context.attrs : __spreadValues({
166
+ style: { color: "red", textAlign: "center" }
167
+ }, context.attrs),
168
+ context.slots.default ? context.slots.default({ vue: vue2, component: component2, props, context }) : `${props.modelName}: ${name}@${version}`
169
+ );
179
170
  };
180
171
  const isValid = ref(false);
181
172
  const ready = ref(false);
@@ -189,16 +180,13 @@ var ReactiveView_default = {
189
180
  if (async && !((_a = vue.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
190
181
  console.error("[ReactiveView]: defaultData is required for async data.");
191
182
  }
192
- if (props.loading && !props.defer) {
193
- console.warn("[ReactiveView]: loading prop should be used with defer prop.");
194
- }
195
183
  const defaultData = props.getDefaultData(
196
184
  ((_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 : {}
197
185
  );
198
186
  const datatype = Array.isArray(defaultData) ? [] : {};
199
187
  const config = {
200
188
  data: reactive(
201
- ObjectManager.on(async ? datatype : ((_f = vue.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? data : datatype).clone()
189
+ ObjectManager.on(async ? datatype : ((_f = vue.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? typeof data === "function" ? datatype : data : datatype).clone()
202
190
  ),
203
191
  defaultData: ObjectManager.on(defaultData).clone(),
204
192
  notifications: props.notifications,
@@ -213,7 +201,7 @@ var ReactiveView_default = {
213
201
  var _a2;
214
202
  const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
215
203
  if (typeof beforeSetData === "function") {
216
- const after = ObjectManager.on(datatype).set(...params).get();
204
+ const after = ObjectManager.on(datatype).set(...params.length ? params : [defaultData]).get();
217
205
  const before = target.getData();
218
206
  beforeSetData({ before, after }, target);
219
207
  } else {
@@ -242,7 +230,9 @@ var ReactiveView_default = {
242
230
  }, config2.options);
243
231
  };
244
232
  setTimeout(async () => {
245
- watchDataProp(await data);
233
+ var _a2;
234
+ const [dataProp] = await Promise.all([data, (_a2 = defer.value) != null ? _a2 : true]);
235
+ watchDataProp(dataProp);
246
236
  });
247
237
  setTimeout(async () => {
248
238
  var _a2;
@@ -274,18 +264,21 @@ var ReactiveView_default = {
274
264
  }
275
265
  return options;
276
266
  }, component.value);
277
- props.instance.value = component.value;
267
+ props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
278
268
  return (vue2) => {
269
+ var _a2, _b2;
279
270
  if (ready.value) {
280
271
  return access(component).template(component, vue2);
281
272
  } else {
282
- return props.loading;
273
+ return (_b2 = (_a2 = context.slots).loading) == null ? void 0 : _b2.call(_a2, { component });
283
274
  }
284
275
  };
285
276
  }
286
277
  };
287
278
 
288
279
  // src/index.ts
280
+ import { createVNode as createVNode2, isRef as isRef2 } from "vue";
281
+ import { formatInTimeZone } from "date-fns-tz";
289
282
  var index_default = ReactiveView_default;
290
283
  function safeRequest(request) {
291
284
  return new Promise(async (resolve) => {
@@ -388,7 +381,7 @@ function access(view = {}, alternative) {
388
381
  return resolve(view);
389
382
  }
390
383
  }
391
- function getSubscription() {
384
+ function useSubscription() {
392
385
  const subscriptions = [];
393
386
  const subscription = Subscriptions.get();
394
387
  return {
@@ -416,19 +409,42 @@ function getSubscription() {
416
409
  };
417
410
  }
418
411
  function StyleParser(styles = {}) {
419
- const transform = (style, status = true) => style.split(/\s+/).reduce((object, style2) => {
420
- return __spreadProps(__spreadValues({}, object), {
421
- [style2]: status
422
- });
423
- }, {});
412
+ const transform = (style, status = true) => {
413
+ const remove = style.split(/(-{[^}]+})/);
414
+ return remove.reduce((object, style2) => {
415
+ var _a;
416
+ const remove2 = /-{(.+?)}/.exec(style2);
417
+ (remove2 ? (_a = remove2[1]) != null ? _a : style2 : style2).split(/\s+/).forEach((item) => {
418
+ if (item) {
419
+ Object.assign(object, { [item]: remove2 ? false : status });
420
+ }
421
+ });
422
+ return object;
423
+ }, {});
424
+ };
424
425
  return Array.isArray(styles) ? styles.reduce((styles2, style) => Object.assign(transform(style), styles2), {}) : typeof styles === "string" ? transform(styles) : Object.entries(styles).reduce((acc, [styles2, value]) => {
425
426
  return __spreadValues(__spreadValues({}, acc), transform(styles2, value));
426
427
  }, {});
427
428
  }
428
429
  function MergeStyles(...params) {
429
- return params.reduce((styles, style, index, array) => {
430
- return __spreadValues(__spreadValues({}, StyleParser(array[array.length - index - 1])), styles);
431
- }, {});
430
+ return new Proxy(params.reduce((styles, style, index, items) => {
431
+ var _a;
432
+ const item = (_a = items[items.length - index - 1]) != null ? _a : {};
433
+ return __spreadValues(__spreadValues({}, StyleParser(typeof item === "function" ? item(items.slice(0, index - 1)) : item)), styles);
434
+ }, {}), {
435
+ get: (target, key, receiver) => {
436
+ const styles = Object.entries(target).reduce((styles2, [key2, val]) => {
437
+ return val ? styles2.concat(key2) : styles2;
438
+ }, []);
439
+ if (key === "string") {
440
+ return styles.join(" ");
441
+ } else if (key === "array") {
442
+ return styles;
443
+ } else {
444
+ return Reflect.get(target, key, receiver);
445
+ }
446
+ }
447
+ });
432
448
  }
433
449
  export {
434
450
  MergeStyles,
@@ -438,7 +454,7 @@ export {
438
454
  getDate,
439
455
  getProps,
440
456
  getReactiveViewComponent,
441
- getSubscription,
442
457
  safeRequest,
443
- setup
458
+ setup,
459
+ useSubscription
444
460
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@razaman2/reactive-view",
3
- "version": "0.0.29",
3
+ "version": "0.0.31",
4
4
  "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.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -21,20 +21,20 @@
21
21
  "author": "razaman2",
22
22
  "license": "MIT",
23
23
  "dependencies": {
24
- "@razaman2/data-manager": "^3.2.11",
24
+ "@razaman2/data-manager": "^3.2.12",
25
25
  "@razaman2/object-manager": "^3.4.2",
26
26
  "date-fns": "^4.1.0",
27
27
  "date-fns-tz": "^3.2.0",
28
28
  "uuid": "^11.1.0"
29
29
  },
30
30
  "peerDependencies": {
31
- "vue": "^3.5.13"
31
+ "vue": "^3.5.16"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@types/uuid": "^10.0.0",
35
- "tsup": "^8.4.0",
35
+ "tsup": "^8.5.0",
36
36
  "typescript": "^5.8.3",
37
- "vitest": "^3.1.1"
37
+ "vitest": "^3.2.3"
38
38
  },
39
39
  "publishConfig": {
40
40
  "access": "public"