@razaman2/reactive-view 0.0.34-beta.25 → 0.0.34-beta.27
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.
- package/dist/index.js +41 -27
- package/dist/index.mjs +45 -31
- package/package.json +48 -48
package/dist/index.js
CHANGED
|
@@ -174,7 +174,7 @@ var import_vue = require("vue");
|
|
|
174
174
|
|
|
175
175
|
// package.json
|
|
176
176
|
var name = "@razaman2/reactive-view";
|
|
177
|
-
var version = "0.0.34-beta.
|
|
177
|
+
var version = "0.0.34-beta.27";
|
|
178
178
|
|
|
179
179
|
// src/ReactiveView.ts
|
|
180
180
|
var setup = {
|
|
@@ -260,32 +260,23 @@ var ReactiveView_default = {
|
|
|
260
260
|
const datatype = Array.isArray(defaultData) ? [] : {};
|
|
261
261
|
const normalize = (data) => {
|
|
262
262
|
if (props.debug) {
|
|
263
|
-
console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData });
|
|
263
|
+
console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData, ref: (0, import_vue.isRef)(data), reactive: (0, import_vue.isReactive)(data) });
|
|
264
264
|
}
|
|
265
|
-
if ((0, import_vue.isReactive)(data)) {
|
|
265
|
+
if ((0, import_vue.isRef)(data) || (0, import_vue.isReactive)(data)) {
|
|
266
266
|
return data;
|
|
267
|
-
} else if ((0, import_vue.isRef)(data)) {
|
|
268
|
-
try {
|
|
269
|
-
if (["Array", "Object"].includes((0, import_vue.unref)(data).constructor.name)) {
|
|
270
|
-
return (0, import_vue.unref)(data);
|
|
271
|
-
} else {
|
|
272
|
-
return (0, import_vue.reactive)({ "": (0, import_vue.unref)(data) });
|
|
273
|
-
}
|
|
274
|
-
} catch (e) {
|
|
275
|
-
return (0, import_vue.reactive)({ "": (0, import_vue.unref)(data) });
|
|
276
|
-
}
|
|
277
267
|
} else {
|
|
278
268
|
if (isFunctionData || isPromiseData) {
|
|
279
269
|
return (0, import_vue.reactive)(datatype);
|
|
280
270
|
} else {
|
|
271
|
+
const props2 = "data" in vue.vnode.props;
|
|
281
272
|
try {
|
|
282
273
|
if (["Array", "Object"].includes(data.constructor.name)) {
|
|
283
|
-
return (0, import_vue.reactive)(
|
|
274
|
+
return (0, import_vue.reactive)(props2 ? data : datatype);
|
|
284
275
|
} else {
|
|
285
|
-
return (0, import_vue.reactive)(
|
|
276
|
+
return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
|
|
286
277
|
}
|
|
287
278
|
} catch (e) {
|
|
288
|
-
return (0, import_vue.reactive)(
|
|
279
|
+
return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
|
|
289
280
|
}
|
|
290
281
|
}
|
|
291
282
|
}
|
|
@@ -297,17 +288,17 @@ var ReactiveView_default = {
|
|
|
297
288
|
defaultData: import_object_manager.default.on(defaultData).clone(),
|
|
298
289
|
notifications: props.notifications,
|
|
299
290
|
subscriptions: props.subscriptions,
|
|
300
|
-
|
|
301
|
-
|
|
291
|
+
name: props.modelName,
|
|
292
|
+
logging: props.logging
|
|
302
293
|
};
|
|
303
294
|
const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new import_data_manager.default(config), {
|
|
304
295
|
get(target, key, receiver) {
|
|
305
|
-
if (
|
|
296
|
+
if (["setData", "replaceData"].includes(key.toString())) {
|
|
306
297
|
return (...params) => {
|
|
307
298
|
var _a2;
|
|
308
299
|
const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
|
|
309
300
|
if (typeof beforeSetData === "function") {
|
|
310
|
-
const before = import_object_manager.default.on(target.getData())
|
|
301
|
+
const before = import_object_manager.default.on(target.getData());
|
|
311
302
|
const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
|
|
312
303
|
if (beforeSetData(access(component).diff(before, after), target)) {
|
|
313
304
|
target[key](...params);
|
|
@@ -360,16 +351,38 @@ var ReactiveView_default = {
|
|
|
360
351
|
config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component });
|
|
361
352
|
}, config2.options);
|
|
362
353
|
}
|
|
363
|
-
if (
|
|
354
|
+
if (props.beta) {
|
|
355
|
+
if (isFunctionData || isPromiseData) {
|
|
356
|
+
setTimeout(async () => {
|
|
357
|
+
var _a2, _b2;
|
|
358
|
+
const [data] = isPromiseData ? await Promise.all([
|
|
359
|
+
isAsyncFunctionData ? props.data() : props.data,
|
|
360
|
+
(_a2 = defer.value) != null ? _a2 : true
|
|
361
|
+
]) : [props.data];
|
|
362
|
+
(0, import_vue.watch)(isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
|
|
363
|
+
var _a3;
|
|
364
|
+
const callback = context.attrs["data:callback"];
|
|
365
|
+
if (typeof callback === "function") {
|
|
366
|
+
model.replaceData((_a3 = callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component })) != null ? _a3 : after);
|
|
367
|
+
} else {
|
|
368
|
+
model.replaceData(after);
|
|
369
|
+
}
|
|
370
|
+
}, {
|
|
371
|
+
immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
|
|
372
|
+
deep: context.attrs["data:deep"],
|
|
373
|
+
once: context.attrs["data:once"]
|
|
374
|
+
});
|
|
375
|
+
});
|
|
376
|
+
}
|
|
377
|
+
} else {
|
|
364
378
|
setTimeout(async () => {
|
|
365
379
|
var _a2;
|
|
366
|
-
const [data] = await Promise.all([
|
|
380
|
+
const [data] = await Promise.all([
|
|
381
|
+
isAsyncFunctionData ? props.data() : props.data,
|
|
382
|
+
(_a2 = defer.value) != null ? _a2 : true
|
|
383
|
+
]);
|
|
367
384
|
watchDataProp(data);
|
|
368
385
|
});
|
|
369
|
-
} else if (props.beta && (isFunctionData || isPromiseData)) {
|
|
370
|
-
(0, import_vue.watch)(props.data, (data) => {
|
|
371
|
-
model.replaceData(data);
|
|
372
|
-
});
|
|
373
386
|
}
|
|
374
387
|
setTimeout(async () => {
|
|
375
388
|
var _a2;
|
|
@@ -481,6 +494,7 @@ function getDate(param1, param2) {
|
|
|
481
494
|
return (0, import_date_fns_tz.formatInTimeZone)(datetime(), options.timezone, options.format);
|
|
482
495
|
}
|
|
483
496
|
function access(view = {}, alternative) {
|
|
497
|
+
var _a;
|
|
484
498
|
const resolve = (target) => {
|
|
485
499
|
return new Proxy((0, import_vue2.toRaw)(target), {
|
|
486
500
|
get(target2, key) {
|
|
@@ -503,7 +517,7 @@ function access(view = {}, alternative) {
|
|
|
503
517
|
});
|
|
504
518
|
};
|
|
505
519
|
try {
|
|
506
|
-
const component = (0, import_vue2.unref)(typeof view === "function" ? view() : view);
|
|
520
|
+
const component = (_a = (0, import_vue2.unref)(typeof view === "function" ? view() : view)) != null ? _a : {};
|
|
507
521
|
return resolve("instance" in component ? component.instance : component);
|
|
508
522
|
} catch (e) {
|
|
509
523
|
return resolve(view);
|
package/dist/index.mjs
CHANGED
|
@@ -124,11 +124,11 @@ var Subscriptions = _Subscriptions;
|
|
|
124
124
|
// src/ReactiveView.ts
|
|
125
125
|
import ObjectManager from "@razaman2/object-manager";
|
|
126
126
|
import DataManager from "@razaman2/data-manager";
|
|
127
|
-
import { ref, reactive, watch,
|
|
127
|
+
import { ref, reactive, watch, isRef, isReactive, createVNode, getCurrentInstance } from "vue";
|
|
128
128
|
|
|
129
129
|
// package.json
|
|
130
130
|
var name = "@razaman2/reactive-view";
|
|
131
|
-
var version = "0.0.34-beta.
|
|
131
|
+
var version = "0.0.34-beta.27";
|
|
132
132
|
|
|
133
133
|
// src/ReactiveView.ts
|
|
134
134
|
var setup = {
|
|
@@ -214,32 +214,23 @@ var ReactiveView_default = {
|
|
|
214
214
|
const datatype = Array.isArray(defaultData) ? [] : {};
|
|
215
215
|
const normalize = (data) => {
|
|
216
216
|
if (props.debug) {
|
|
217
|
-
console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData });
|
|
217
|
+
console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData, ref: isRef(data), reactive: isReactive(data) });
|
|
218
218
|
}
|
|
219
|
-
if (isReactive(data)) {
|
|
219
|
+
if (isRef(data) || isReactive(data)) {
|
|
220
220
|
return data;
|
|
221
|
-
} else if (isRef(data)) {
|
|
222
|
-
try {
|
|
223
|
-
if (["Array", "Object"].includes(unref(data).constructor.name)) {
|
|
224
|
-
return unref(data);
|
|
225
|
-
} else {
|
|
226
|
-
return reactive({ "": unref(data) });
|
|
227
|
-
}
|
|
228
|
-
} catch (e) {
|
|
229
|
-
return reactive({ "": unref(data) });
|
|
230
|
-
}
|
|
231
221
|
} else {
|
|
232
222
|
if (isFunctionData || isPromiseData) {
|
|
233
223
|
return reactive(datatype);
|
|
234
224
|
} else {
|
|
225
|
+
const props2 = "data" in vue.vnode.props;
|
|
235
226
|
try {
|
|
236
227
|
if (["Array", "Object"].includes(data.constructor.name)) {
|
|
237
|
-
return reactive(
|
|
228
|
+
return reactive(props2 ? data : datatype);
|
|
238
229
|
} else {
|
|
239
|
-
return reactive(
|
|
230
|
+
return reactive(props2 ? { "": data } : datatype);
|
|
240
231
|
}
|
|
241
232
|
} catch (e) {
|
|
242
|
-
return reactive(
|
|
233
|
+
return reactive(props2 ? { "": data } : datatype);
|
|
243
234
|
}
|
|
244
235
|
}
|
|
245
236
|
}
|
|
@@ -251,17 +242,17 @@ var ReactiveView_default = {
|
|
|
251
242
|
defaultData: ObjectManager.on(defaultData).clone(),
|
|
252
243
|
notifications: props.notifications,
|
|
253
244
|
subscriptions: props.subscriptions,
|
|
254
|
-
|
|
255
|
-
|
|
245
|
+
name: props.modelName,
|
|
246
|
+
logging: props.logging
|
|
256
247
|
};
|
|
257
248
|
const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new DataManager(config), {
|
|
258
249
|
get(target, key, receiver) {
|
|
259
|
-
if (
|
|
250
|
+
if (["setData", "replaceData"].includes(key.toString())) {
|
|
260
251
|
return (...params) => {
|
|
261
252
|
var _a2;
|
|
262
253
|
const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
|
|
263
254
|
if (typeof beforeSetData === "function") {
|
|
264
|
-
const before = ObjectManager.on(target.getData())
|
|
255
|
+
const before = ObjectManager.on(target.getData());
|
|
265
256
|
const after = params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData);
|
|
266
257
|
if (beforeSetData(access(component).diff(before, after), target)) {
|
|
267
258
|
target[key](...params);
|
|
@@ -314,16 +305,38 @@ var ReactiveView_default = {
|
|
|
314
305
|
config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component });
|
|
315
306
|
}, config2.options);
|
|
316
307
|
}
|
|
317
|
-
if (
|
|
308
|
+
if (props.beta) {
|
|
309
|
+
if (isFunctionData || isPromiseData) {
|
|
310
|
+
setTimeout(async () => {
|
|
311
|
+
var _a2, _b2;
|
|
312
|
+
const [data] = isPromiseData ? await Promise.all([
|
|
313
|
+
isAsyncFunctionData ? props.data() : props.data,
|
|
314
|
+
(_a2 = defer.value) != null ? _a2 : true
|
|
315
|
+
]) : [props.data];
|
|
316
|
+
watch(isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
|
|
317
|
+
var _a3;
|
|
318
|
+
const callback = context.attrs["data:callback"];
|
|
319
|
+
if (typeof callback === "function") {
|
|
320
|
+
model.replaceData((_a3 = callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component })) != null ? _a3 : after);
|
|
321
|
+
} else {
|
|
322
|
+
model.replaceData(after);
|
|
323
|
+
}
|
|
324
|
+
}, {
|
|
325
|
+
immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
|
|
326
|
+
deep: context.attrs["data:deep"],
|
|
327
|
+
once: context.attrs["data:once"]
|
|
328
|
+
});
|
|
329
|
+
});
|
|
330
|
+
}
|
|
331
|
+
} else {
|
|
318
332
|
setTimeout(async () => {
|
|
319
333
|
var _a2;
|
|
320
|
-
const [data] = await Promise.all([
|
|
334
|
+
const [data] = await Promise.all([
|
|
335
|
+
isAsyncFunctionData ? props.data() : props.data,
|
|
336
|
+
(_a2 = defer.value) != null ? _a2 : true
|
|
337
|
+
]);
|
|
321
338
|
watchDataProp(data);
|
|
322
339
|
});
|
|
323
|
-
} else if (props.beta && (isFunctionData || isPromiseData)) {
|
|
324
|
-
watch(props.data, (data) => {
|
|
325
|
-
model.replaceData(data);
|
|
326
|
-
});
|
|
327
340
|
}
|
|
328
341
|
setTimeout(async () => {
|
|
329
342
|
var _a2;
|
|
@@ -358,7 +371,7 @@ var ReactiveView_default = {
|
|
|
358
371
|
};
|
|
359
372
|
|
|
360
373
|
// src/index.ts
|
|
361
|
-
import { h, unref
|
|
374
|
+
import { h, unref, toRaw, createApp, createVNode as createVNode2, defineComponent } from "vue";
|
|
362
375
|
import { formatInTimeZone } from "date-fns-tz";
|
|
363
376
|
import { twMerge } from "tailwind-merge";
|
|
364
377
|
console.log(`%c[ReactiveView]: ${version}`, "background-color: red; color: yellow;");
|
|
@@ -435,8 +448,9 @@ function getDate(param1, param2) {
|
|
|
435
448
|
return formatInTimeZone(datetime(), options.timezone, options.format);
|
|
436
449
|
}
|
|
437
450
|
function access(view = {}, alternative) {
|
|
451
|
+
var _a;
|
|
438
452
|
const resolve = (target) => {
|
|
439
|
-
return new Proxy(
|
|
453
|
+
return new Proxy(toRaw(target), {
|
|
440
454
|
get(target2, key) {
|
|
441
455
|
const component = { tree: target2 };
|
|
442
456
|
do {
|
|
@@ -457,7 +471,7 @@ function access(view = {}, alternative) {
|
|
|
457
471
|
});
|
|
458
472
|
};
|
|
459
473
|
try {
|
|
460
|
-
const component =
|
|
474
|
+
const component = (_a = unref(typeof view === "function" ? view() : view)) != null ? _a : {};
|
|
461
475
|
return resolve("instance" in component ? component.instance : component);
|
|
462
476
|
} catch (e) {
|
|
463
477
|
return resolve(view);
|
|
@@ -631,7 +645,7 @@ var setData = (component, data, path) => {
|
|
|
631
645
|
return "state" in vue ? diff : vue.$emit("update:state", diff);
|
|
632
646
|
};
|
|
633
647
|
var componentState = (component) => {
|
|
634
|
-
return
|
|
648
|
+
return unref("state" in component ? component.state : component.$attrs.state);
|
|
635
649
|
};
|
|
636
650
|
var dataPath = (component, path) => {
|
|
637
651
|
return typeof component.$attrs["data:path"] === "function" ? component.$attrs["data:path"](path) : path;
|
package/package.json
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@razaman2/reactive-view",
|
|
3
|
-
"version": "0.0.34-beta.
|
|
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
|
-
"main": "dist/index.js",
|
|
6
|
-
"module": "dist/index.mjs",
|
|
7
|
-
"types": "dist/index.d.ts",
|
|
8
|
-
"scripts": {
|
|
9
|
-
"prepublishOnly": "npm run build",
|
|
10
|
-
"build": "tsup src/index.ts --format cjs,esm --dts",
|
|
11
|
-
"lint": "tsc",
|
|
12
|
-
"test": "cd tests/vue-ts && npm run dev",
|
|
13
|
-
"pr": "sh pr.sh"
|
|
14
|
-
},
|
|
15
|
-
"keywords": [
|
|
16
|
-
"vue",
|
|
17
|
-
"vue-helper",
|
|
18
|
-
"reactive-view",
|
|
19
|
-
"vue-class-component",
|
|
20
|
-
"reactive-ui"
|
|
21
|
-
],
|
|
22
|
-
"author": "razaman2",
|
|
23
|
-
"license": "MIT",
|
|
24
|
-
"dependencies": {
|
|
25
|
-
"@razaman2/data-manager": "^3.2.12",
|
|
26
|
-
"@razaman2/event-emitter": "^2.1.1",
|
|
27
|
-
"@razaman2/object-manager": "^3.4.
|
|
28
|
-
"date-fns": "^4.1.0",
|
|
29
|
-
"date-fns-tz": "^3.2.0",
|
|
30
|
-
"tailwind-merge": "^3.3.1",
|
|
31
|
-
"uuid": "^
|
|
32
|
-
},
|
|
33
|
-
"peerDependencies": {
|
|
34
|
-
"vue": "
|
|
35
|
-
},
|
|
36
|
-
"devDependencies": {
|
|
37
|
-
"@types/uuid": "^
|
|
38
|
-
"tsup": "^8.5.0",
|
|
39
|
-
"typescript": "^5.9.
|
|
40
|
-
"vitest": "^
|
|
41
|
-
},
|
|
42
|
-
"publishConfig": {
|
|
43
|
-
"access": "public"
|
|
44
|
-
},
|
|
45
|
-
"files": [
|
|
46
|
-
"dist"
|
|
47
|
-
]
|
|
48
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@razaman2/reactive-view",
|
|
3
|
+
"version": "0.0.34-beta.27",
|
|
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
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"prepublishOnly": "npm run build",
|
|
10
|
+
"build": "tsup src/index.ts --format cjs,esm --dts",
|
|
11
|
+
"lint": "tsc",
|
|
12
|
+
"test": "cd tests/vue-ts && npm run dev",
|
|
13
|
+
"pr": "sh pr.sh"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [
|
|
16
|
+
"vue",
|
|
17
|
+
"vue-helper",
|
|
18
|
+
"reactive-view",
|
|
19
|
+
"vue-class-component",
|
|
20
|
+
"reactive-ui"
|
|
21
|
+
],
|
|
22
|
+
"author": "razaman2",
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@razaman2/data-manager": "^3.2.12",
|
|
26
|
+
"@razaman2/event-emitter": "^2.1.1",
|
|
27
|
+
"@razaman2/object-manager": "^3.4.7",
|
|
28
|
+
"date-fns": "^4.1.0",
|
|
29
|
+
"date-fns-tz": "^3.2.0",
|
|
30
|
+
"tailwind-merge": "^3.3.1",
|
|
31
|
+
"uuid": "^13.0.0"
|
|
32
|
+
},
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"vue": ">=3.0.0"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@types/uuid": "^11.0.0",
|
|
38
|
+
"tsup": "^8.5.0",
|
|
39
|
+
"typescript": "^5.9.3",
|
|
40
|
+
"vitest": "^4.0.5"
|
|
41
|
+
},
|
|
42
|
+
"publishConfig": {
|
|
43
|
+
"access": "public"
|
|
44
|
+
},
|
|
45
|
+
"files": [
|
|
46
|
+
"dist"
|
|
47
|
+
]
|
|
48
|
+
}
|