@razaman2/reactive-view 0.1.0-beta.15 → 0.1.0-beta.16
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/LICENSE +21 -21
- package/README.md +1 -1
- package/dist/index.js +132 -166
- package/dist/index.mjs +130 -167
- package/package.json +64 -48
package/dist/index.js
CHANGED
|
@@ -1,39 +1,10 @@
|
|
|
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
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
-
var __objRest = (source, exclude) => {
|
|
26
|
-
var target = {};
|
|
27
|
-
for (var prop in source)
|
|
28
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
if (source != null && __getOwnPropSymbols)
|
|
31
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
-
target[prop] = source[prop];
|
|
34
|
-
}
|
|
35
|
-
return target;
|
|
36
|
-
};
|
|
37
8
|
var __export = (target, all) => {
|
|
38
9
|
for (var name in all)
|
|
39
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -82,10 +53,8 @@ var import_object_manager2 = __toESM(require("@razaman2/object-manager"));
|
|
|
82
53
|
|
|
83
54
|
// src/Subscription.ts
|
|
84
55
|
var Subscription = class _Subscription {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
this.data = {};
|
|
88
|
-
}
|
|
56
|
+
subscriptions = [];
|
|
57
|
+
data = {};
|
|
89
58
|
static create() {
|
|
90
59
|
return new _Subscription();
|
|
91
60
|
}
|
|
@@ -163,13 +132,12 @@ var Subscription = class _Subscription {
|
|
|
163
132
|
};
|
|
164
133
|
|
|
165
134
|
// src/Subscriptions.ts
|
|
166
|
-
var
|
|
135
|
+
var Subscriptions = class _Subscriptions extends Subscription {
|
|
136
|
+
static subscriptions = _Subscriptions.create();
|
|
167
137
|
static get() {
|
|
168
138
|
return this.subscriptions;
|
|
169
139
|
}
|
|
170
140
|
};
|
|
171
|
-
_Subscriptions.subscriptions = _Subscriptions.create();
|
|
172
|
-
var Subscriptions = _Subscriptions;
|
|
173
141
|
|
|
174
142
|
// src/ReactiveView.ts
|
|
175
143
|
var import_object_manager = __toESM(require("@razaman2/object-manager"));
|
|
@@ -177,19 +145,26 @@ var import_data_manager = __toESM(require("@razaman2/data-manager"));
|
|
|
177
145
|
var import_vue = require("vue");
|
|
178
146
|
|
|
179
147
|
// package.json
|
|
180
|
-
var version = "0.1.0-beta.15";
|
|
181
148
|
var package_default = {
|
|
182
149
|
name: "@razaman2/reactive-view",
|
|
183
|
-
version,
|
|
150
|
+
version: "0.1.0-beta.16",
|
|
184
151
|
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.",
|
|
185
152
|
main: "dist/index.js",
|
|
186
153
|
module: "dist/index.mjs",
|
|
187
154
|
types: "dist/index.d.ts",
|
|
155
|
+
exports: {
|
|
156
|
+
".": {
|
|
157
|
+
types: "./dist/index.d.ts",
|
|
158
|
+
require: "./dist/index.js",
|
|
159
|
+
import: "./dist/index.mjs"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
188
162
|
scripts: {
|
|
189
163
|
prepublishOnly: "npm run build",
|
|
190
164
|
build: "tsup src/index.ts --format cjs,esm --dts",
|
|
191
165
|
lint: "tsc",
|
|
192
|
-
test: "
|
|
166
|
+
test: "vitest run",
|
|
167
|
+
"test:watch": "vitest",
|
|
193
168
|
pr: "sh pr.sh"
|
|
194
169
|
},
|
|
195
170
|
keywords: [
|
|
@@ -199,10 +174,18 @@ var package_default = {
|
|
|
199
174
|
"vue-class-component",
|
|
200
175
|
"reactive-ui"
|
|
201
176
|
],
|
|
177
|
+
repository: {
|
|
178
|
+
type: "git",
|
|
179
|
+
url: "git+https://github.com/razaman2/reactive-view.git"
|
|
180
|
+
},
|
|
181
|
+
bugs: {
|
|
182
|
+
url: "https://github.com/razaman2/reactive-view/issues"
|
|
183
|
+
},
|
|
184
|
+
homepage: "https://github.com/razaman2/reactive-view#readme",
|
|
202
185
|
author: "razaman2",
|
|
203
186
|
license: "MIT",
|
|
204
187
|
dependencies: {
|
|
205
|
-
"@razaman2/data-manager": "^3.3.
|
|
188
|
+
"@razaman2/data-manager": "^3.3.12",
|
|
206
189
|
"@razaman2/event-emitter": "^2.1.1",
|
|
207
190
|
"@razaman2/object-manager": "^3.4.7",
|
|
208
191
|
"date-fns": "^4.1.0",
|
|
@@ -269,7 +252,6 @@ var ReactiveView_default = {
|
|
|
269
252
|
state: { default: (0, import_vue.reactive)({}) }
|
|
270
253
|
},
|
|
271
254
|
setup(props, context) {
|
|
272
|
-
var _a, _b, _c;
|
|
273
255
|
const subscriptions = [];
|
|
274
256
|
(0, import_vue.onBeforeUnmount)(() => subscriptions.forEach((subscription) => subscription()));
|
|
275
257
|
const diff = (before, after) => {
|
|
@@ -285,30 +267,27 @@ var ReactiveView_default = {
|
|
|
285
267
|
return { before: before.get(), after: after.get(), changes: changes.get(), changed: changed.value };
|
|
286
268
|
};
|
|
287
269
|
const dataPath2 = (path) => {
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
} catch (e) {
|
|
291
|
-
return path;
|
|
292
|
-
}
|
|
270
|
+
const handler = context.attrs["data:path"];
|
|
271
|
+
return typeof handler === "function" ? handler(path) : path;
|
|
293
272
|
};
|
|
294
273
|
const template = (component, vue2) => {
|
|
295
|
-
return (0, import_vue.createVNode)("div", context.slots.default ? context.attrs :
|
|
296
|
-
style: { color: "red", textAlign: "center" }
|
|
297
|
-
|
|
274
|
+
return (0, import_vue.createVNode)("div", context.slots.default ? context.attrs : {
|
|
275
|
+
style: { color: "red", textAlign: "center" },
|
|
276
|
+
...context.attrs
|
|
277
|
+
}, context.slots.default ? context.slots.default({ component, vue: vue2, props, context }) : `${props.modelName}: ${package_default.name}@${package_default.version}`);
|
|
298
278
|
};
|
|
299
279
|
const isValid = (0, import_vue.ref)(false);
|
|
300
280
|
const isReady = (0, import_vue.ref)(false);
|
|
301
281
|
const defer = (0, import_vue.ref)(typeof props.defer === "function" ? props.defer() : props.defer);
|
|
302
|
-
const isFunctionData = ["Function"].includes(
|
|
303
|
-
const isAsyncFunctionData = ["AsyncFunction"].includes(
|
|
304
|
-
const isAsyncData = ["Promise"].includes(
|
|
282
|
+
const isFunctionData = ["Function"].includes(props.data?.constructor.name);
|
|
283
|
+
const isAsyncFunctionData = ["AsyncFunction"].includes(props.data?.constructor.name);
|
|
284
|
+
const isAsyncData = ["Promise"].includes(props.data?.constructor.name) || isAsyncFunctionData;
|
|
305
285
|
const vue = (0, import_vue.getCurrentInstance)();
|
|
306
286
|
const defaultData = props.getDefaultData(
|
|
307
287
|
"defaultData" in vue.vnode.props ? vue.vnode.props.defaultData : "data" in vue.vnode.props ? Array.isArray((0, import_vue.unref)(vue.vnode.props.data)) ? [] : {} : {}
|
|
308
288
|
);
|
|
309
289
|
const datatype = Array.isArray(defaultData) ? [] : {};
|
|
310
290
|
const beta = () => {
|
|
311
|
-
var _a2;
|
|
312
291
|
const emit = (after, before) => {
|
|
313
292
|
if (vue && vue.vnode.el) {
|
|
314
293
|
const event = new CustomEvent("data:emit", {
|
|
@@ -328,8 +307,7 @@ var ReactiveView_default = {
|
|
|
328
307
|
get(target, key, receiver) {
|
|
329
308
|
if (["setData", "replaceData"].includes(key.toString())) {
|
|
330
309
|
return (...params) => {
|
|
331
|
-
|
|
332
|
-
const beforeSetData = (_a3 = access(component).beforeSetData) != null ? _a3 : props.beforeSetData;
|
|
310
|
+
const beforeSetData = access(component).beforeSetData ?? props.beforeSetData;
|
|
333
311
|
if (typeof beforeSetData === "function") {
|
|
334
312
|
const before = import_object_manager.default.on(target.getData());
|
|
335
313
|
const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
|
|
@@ -356,18 +334,18 @@ var ReactiveView_default = {
|
|
|
356
334
|
} else {
|
|
357
335
|
const props2 = "data" in vue.vnode.props;
|
|
358
336
|
try {
|
|
359
|
-
if (["Array", "Object"].includes(data
|
|
337
|
+
if (["Array", "Object"].includes(data?.constructor?.name)) {
|
|
360
338
|
return (0, import_vue.ref)(data);
|
|
361
339
|
} else {
|
|
362
340
|
return (0, import_vue.ref)(props2 ? { "": data } : datatype);
|
|
363
341
|
}
|
|
364
|
-
} catch
|
|
342
|
+
} catch {
|
|
365
343
|
return (0, import_vue.ref)(props2 ? { "": data } : datatype);
|
|
366
344
|
}
|
|
367
345
|
}
|
|
368
346
|
};
|
|
369
347
|
const config = {
|
|
370
|
-
data: normalize(
|
|
348
|
+
data: normalize(vue.vnode.props?.data),
|
|
371
349
|
defaultData: import_object_manager.default.on(defaultData).clone(),
|
|
372
350
|
notifications: props.notifications,
|
|
373
351
|
subscriptions: props.subscriptions,
|
|
@@ -396,48 +374,41 @@ var ReactiveView_default = {
|
|
|
396
374
|
}
|
|
397
375
|
}, config2.options));
|
|
398
376
|
}
|
|
399
|
-
const track = (source, options = {}) => {
|
|
400
|
-
var _a3, _b2, _c2, _d, _e;
|
|
401
|
-
subscriptions.push((0, import_vue.watch)(source, async (after, before) => {
|
|
402
|
-
const diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
|
|
403
|
-
const callback = context.attrs["data:callback"];
|
|
404
|
-
if (typeof callback === "function") {
|
|
405
|
-
callback(diff2, { component });
|
|
406
|
-
} else {
|
|
407
|
-
model.replaceData(after);
|
|
408
|
-
}
|
|
409
|
-
}, {
|
|
410
|
-
immediate: (_b2 = (_a3 = context.attrs["data:immediate"]) != null ? _a3 : options.immediate) != null ? _b2 : true,
|
|
411
|
-
deep: (_d = (_c2 = context.attrs["data:deep"]) != null ? _c2 : options.deep) != null ? _d : true,
|
|
412
|
-
once: (_e = context.attrs["data:once"]) != null ? _e : options.once
|
|
413
|
-
}));
|
|
414
|
-
};
|
|
415
377
|
setTimeout(async () => {
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
if (!("defaultData" in vue.vnode.props)) {
|
|
420
|
-
console.warn(`${props.modelName}: defaultData is required for promise or function data.`, props.data);
|
|
421
|
-
}
|
|
422
|
-
const [data] = isAsyncData ? await Promise.all([
|
|
423
|
-
isAsyncFunctionData ? props.data() : props.data,
|
|
424
|
-
(_a3 = defer.value) != null ? _a3 : true
|
|
425
|
-
]) : [props.data];
|
|
426
|
-
track(typeof data === "function" ? data : (() => data));
|
|
427
|
-
} else {
|
|
428
|
-
track((0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? props.data : () => props.data, { immediate: false, deep: false });
|
|
378
|
+
if (props.model !== false && (isFunctionData || isAsyncData)) {
|
|
379
|
+
if (!("defaultData" in vue.vnode.props)) {
|
|
380
|
+
console.warn(`${props.modelName}: defaultData is required for promise or function data.`, props.data);
|
|
429
381
|
}
|
|
382
|
+
const [data] = isAsyncData ? await Promise.all([
|
|
383
|
+
isAsyncFunctionData ? props.data() : props.data,
|
|
384
|
+
defer.value ?? true
|
|
385
|
+
]) : [props.data];
|
|
386
|
+
const source = typeof data === "function" ? data : (() => data);
|
|
387
|
+
subscriptions.push((0, import_vue.watch)(source, async (after, before) => {
|
|
388
|
+
const diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
|
|
389
|
+
const callback = context.attrs["data:callback"];
|
|
390
|
+
if (props.debug) {
|
|
391
|
+
console.warn(`[${props.modelName}]:data`, { diff: diff2, data, callback, before, after, props, context, component });
|
|
392
|
+
}
|
|
393
|
+
if (typeof callback === "function") {
|
|
394
|
+
callback(diff2, { component });
|
|
395
|
+
} else {
|
|
396
|
+
model.replaceData(after);
|
|
397
|
+
}
|
|
398
|
+
}, {
|
|
399
|
+
immediate: context.attrs["data:immediate"] ?? true,
|
|
400
|
+
deep: context.attrs["data:deep"],
|
|
401
|
+
once: context.attrs["data:once"]
|
|
402
|
+
}));
|
|
430
403
|
}
|
|
431
404
|
});
|
|
432
405
|
setTimeout(async () => {
|
|
433
|
-
|
|
434
|
-
isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
|
|
406
|
+
isReady.value = await defer.value ?? true;
|
|
435
407
|
});
|
|
436
408
|
component.value = [access(component)].reduce((options, parent) => {
|
|
437
|
-
var _a3;
|
|
438
409
|
while (parent) {
|
|
439
410
|
if (typeof parent.setup === "function") {
|
|
440
|
-
options = { parent: options, self:
|
|
411
|
+
options = { parent: options, self: parent.setup(component, options) ?? {} };
|
|
441
412
|
if (access(parent.$parent).ReactiveView) {
|
|
442
413
|
break;
|
|
443
414
|
} else {
|
|
@@ -451,16 +422,14 @@ var ReactiveView_default = {
|
|
|
451
422
|
}, component.value);
|
|
452
423
|
props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
|
|
453
424
|
return (vue2) => {
|
|
454
|
-
var _a3, _b2;
|
|
455
425
|
if (isReady.value) {
|
|
456
426
|
return access(component).template(component, vue2);
|
|
457
427
|
} else {
|
|
458
|
-
return
|
|
428
|
+
return context.slots.loading?.({ component });
|
|
459
429
|
}
|
|
460
430
|
};
|
|
461
431
|
};
|
|
462
432
|
const current = () => {
|
|
463
|
-
var _a2, _b2, _c2, _d;
|
|
464
433
|
const emit = (after, before) => {
|
|
465
434
|
if (vue && vue.vnode.el) {
|
|
466
435
|
const event = new CustomEvent("data:emit", {
|
|
@@ -486,19 +455,19 @@ var ReactiveView_default = {
|
|
|
486
455
|
} else {
|
|
487
456
|
const props2 = "data" in vue.vnode.props;
|
|
488
457
|
try {
|
|
489
|
-
if (["Array", "Object"].includes(data
|
|
458
|
+
if (["Array", "Object"].includes(data?.constructor?.name)) {
|
|
490
459
|
return (0, import_vue.reactive)(props2 ? data : datatype);
|
|
491
460
|
} else {
|
|
492
461
|
return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
|
|
493
462
|
}
|
|
494
|
-
} catch
|
|
463
|
+
} catch {
|
|
495
464
|
return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
|
|
496
465
|
}
|
|
497
466
|
}
|
|
498
467
|
}
|
|
499
468
|
};
|
|
500
469
|
const config = {
|
|
501
|
-
data: props.beta ? normalize(
|
|
470
|
+
data: props.beta ? normalize(vue.vnode.props?.data) : (0, import_vue.reactive)(import_object_manager.default.on(
|
|
502
471
|
isAsyncData || isFunctionData || (0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
|
|
503
472
|
).clone()),
|
|
504
473
|
defaultData: import_object_manager.default.on(defaultData).clone(),
|
|
@@ -511,8 +480,7 @@ var ReactiveView_default = {
|
|
|
511
480
|
get(target, key, receiver) {
|
|
512
481
|
if (["setData", "replaceData"].includes(key.toString())) {
|
|
513
482
|
return (...params) => {
|
|
514
|
-
|
|
515
|
-
const beforeSetData = (_a3 = access(component).beforeSetData) != null ? _a3 : props.beforeSetData;
|
|
483
|
+
const beforeSetData = access(component).beforeSetData ?? props.beforeSetData;
|
|
516
484
|
if (typeof beforeSetData === "function") {
|
|
517
485
|
const before = import_object_manager.default.on(target.getData());
|
|
518
486
|
const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
|
|
@@ -534,20 +502,20 @@ var ReactiveView_default = {
|
|
|
534
502
|
console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isAsyncData });
|
|
535
503
|
}
|
|
536
504
|
const watchDataProp = (dataProp) => {
|
|
537
|
-
var _a3, _b3, _c3, _d2;
|
|
538
505
|
const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
|
|
539
|
-
callback: (
|
|
540
|
-
options: Object.assign(
|
|
541
|
-
deep:
|
|
542
|
-
|
|
506
|
+
callback: (context.attrs["onUpdate:data"] ?? {}).callback ?? context.attrs["data:callback"],
|
|
507
|
+
options: Object.assign({
|
|
508
|
+
deep: context.attrs["data:deep"] ?? true,
|
|
509
|
+
...context.attrs["data:immediate"] ? { immediate: context.attrs["data:immediate"] } : {},
|
|
510
|
+
...context.attrs["data:once"] ? { once: context.attrs["data:once"] } : {}
|
|
511
|
+
}, (context.attrs["onUpdate:data"] ?? {}).options)
|
|
543
512
|
};
|
|
544
513
|
if (context.attrs["data:log"]) {
|
|
545
514
|
console.warn(`[ReactiveView]:data`, { config: config2, dataProp });
|
|
546
515
|
}
|
|
547
516
|
subscriptions.push((0, import_vue.watch)(isFunctionData || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
|
|
548
|
-
var _a4;
|
|
549
517
|
if (typeof config2.callback === "function") {
|
|
550
|
-
model.replaceData(
|
|
518
|
+
model.replaceData(config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component }) ?? after);
|
|
551
519
|
} else {
|
|
552
520
|
model.replaceData(after);
|
|
553
521
|
}
|
|
@@ -556,10 +524,12 @@ var ReactiveView_default = {
|
|
|
556
524
|
if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
|
|
557
525
|
const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
|
|
558
526
|
callback: context.attrs["onUpdate:model"],
|
|
559
|
-
options: Object.assign(
|
|
560
|
-
deep:
|
|
561
|
-
|
|
562
|
-
|
|
527
|
+
options: Object.assign({
|
|
528
|
+
deep: context.attrs["model:deep"] ?? true,
|
|
529
|
+
...context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {},
|
|
530
|
+
...context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}
|
|
531
|
+
}, (context.attrs["onUpdate:model"] ?? {}).options)
|
|
532
|
+
} : context.attrs["onUpdate:model"] ?? {};
|
|
563
533
|
if (context.attrs["model:log"]) {
|
|
564
534
|
console.warn(`[ReactiveView]:model`, { config: config2 });
|
|
565
535
|
}
|
|
@@ -571,48 +541,43 @@ var ReactiveView_default = {
|
|
|
571
541
|
const isRefData = (0, import_vue.isRef)(props.data);
|
|
572
542
|
if (isRefData || isFunctionData || isAsyncData) {
|
|
573
543
|
setTimeout(async () => {
|
|
574
|
-
var _a3, _b3, _c3;
|
|
575
544
|
const [data] = isAsyncData ? await Promise.all([
|
|
576
545
|
isAsyncFunctionData ? props.data() : props.data,
|
|
577
|
-
|
|
546
|
+
defer.value ?? true
|
|
578
547
|
]) : [props.data];
|
|
579
548
|
subscriptions.push((0, import_vue.watch)(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
|
|
580
|
-
var _a4;
|
|
581
549
|
if (before !== void 0 || after !== void 0) {
|
|
582
550
|
const callback = context.attrs["data:callback"];
|
|
583
551
|
if (typeof callback === "function") {
|
|
584
552
|
const diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
|
|
585
|
-
model.replaceData(
|
|
553
|
+
model.replaceData(callback(diff2, { component }) ?? after);
|
|
586
554
|
} else {
|
|
587
555
|
model.replaceData(after);
|
|
588
556
|
}
|
|
589
557
|
}
|
|
590
558
|
}, {
|
|
591
|
-
immediate:
|
|
592
|
-
deep:
|
|
559
|
+
immediate: context.attrs["data:immediate"] ?? true,
|
|
560
|
+
deep: context.attrs["data:deep"] ?? true,
|
|
593
561
|
once: context.attrs["data:once"]
|
|
594
562
|
}));
|
|
595
563
|
});
|
|
596
564
|
}
|
|
597
565
|
} else {
|
|
598
566
|
setTimeout(async () => {
|
|
599
|
-
var _a3;
|
|
600
567
|
const [data] = await Promise.all([
|
|
601
568
|
isAsyncFunctionData ? props.data() : props.data,
|
|
602
|
-
|
|
569
|
+
defer.value ?? true
|
|
603
570
|
]);
|
|
604
571
|
watchDataProp(data);
|
|
605
572
|
});
|
|
606
573
|
}
|
|
607
574
|
setTimeout(async () => {
|
|
608
|
-
|
|
609
|
-
isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
|
|
575
|
+
isReady.value = await defer.value ?? true;
|
|
610
576
|
});
|
|
611
577
|
component.value = [access(component)].reduce((options, parent) => {
|
|
612
|
-
var _a3;
|
|
613
578
|
while (parent) {
|
|
614
579
|
if (typeof parent.setup === "function") {
|
|
615
|
-
options = { parent: options, self:
|
|
580
|
+
options = { parent: options, self: parent.setup(component, options) ?? {} };
|
|
616
581
|
if (access(parent.$parent).ReactiveView) {
|
|
617
582
|
break;
|
|
618
583
|
} else {
|
|
@@ -626,11 +591,10 @@ var ReactiveView_default = {
|
|
|
626
591
|
}, component.value);
|
|
627
592
|
props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
|
|
628
593
|
return (vue2) => {
|
|
629
|
-
var _a3, _b3;
|
|
630
594
|
if (isReady.value) {
|
|
631
595
|
return access(component).template(component, vue2);
|
|
632
596
|
} else {
|
|
633
|
-
return
|
|
597
|
+
return context.slots.loading?.({ component });
|
|
634
598
|
}
|
|
635
599
|
};
|
|
636
600
|
};
|
|
@@ -642,12 +606,13 @@ var ReactiveView_default = {
|
|
|
642
606
|
var import_vue2 = require("vue");
|
|
643
607
|
var import_date_fns_tz = require("date-fns-tz");
|
|
644
608
|
var import_tailwind_merge = require("tailwind-merge");
|
|
609
|
+
var ObjectManager2 = import_object_manager2.default.default || import_object_manager2.default;
|
|
610
|
+
var { version } = package_default;
|
|
645
611
|
console.log(`%c[ReactiveView]: ${version}`, "background-color: red; color: yellow;");
|
|
646
612
|
var index_default = ReactiveView_default;
|
|
647
613
|
function safeRequest(request) {
|
|
648
614
|
return new Promise(async (resolve) => {
|
|
649
|
-
|
|
650
|
-
const { message } = (_a = request.loading) != null ? _a : {};
|
|
615
|
+
const { message } = request.loading ?? {};
|
|
651
616
|
if (request.loading) {
|
|
652
617
|
request.loading.status = true;
|
|
653
618
|
if (request.message) {
|
|
@@ -657,26 +622,25 @@ function safeRequest(request) {
|
|
|
657
622
|
try {
|
|
658
623
|
resolve(await request.try());
|
|
659
624
|
} catch (e) {
|
|
660
|
-
if (
|
|
625
|
+
if (request.alternative ?? true) {
|
|
661
626
|
resolve(request.catch ? await request.catch(e) : console.log(e));
|
|
662
627
|
}
|
|
663
628
|
} finally {
|
|
664
|
-
await
|
|
629
|
+
await request.finally?.();
|
|
665
630
|
if (request.loading) {
|
|
666
631
|
request.loading.status = false;
|
|
667
632
|
}
|
|
668
633
|
if (request.loading && message) {
|
|
669
634
|
request.loading.message = message;
|
|
670
635
|
}
|
|
671
|
-
await
|
|
636
|
+
await request.complete?.();
|
|
672
637
|
}
|
|
673
638
|
});
|
|
674
639
|
}
|
|
675
640
|
function getProps(props = {}, param2) {
|
|
676
|
-
var _a;
|
|
677
641
|
const exclude = Array.isArray(param2) || typeof param2 === "string" ? param2 : param2.exclude;
|
|
678
642
|
const exclusions = (Array.isArray(exclude) ? exclude : [exclude]).join("|");
|
|
679
|
-
const include =
|
|
643
|
+
const include = param2.include ?? {};
|
|
680
644
|
return Object.entries(include).reduce((props2, [key, val]) => {
|
|
681
645
|
props2[key] = val;
|
|
682
646
|
return props2;
|
|
@@ -691,7 +655,7 @@ function getReactiveViewComponent(component, options = {}) {
|
|
|
691
655
|
const model = (component2) => {
|
|
692
656
|
try {
|
|
693
657
|
return (component2.type || component2).props.hasOwnProperty("model");
|
|
694
|
-
} catch
|
|
658
|
+
} catch {
|
|
695
659
|
return false;
|
|
696
660
|
}
|
|
697
661
|
};
|
|
@@ -702,10 +666,9 @@ function getReactiveViewComponent(component, options = {}) {
|
|
|
702
666
|
return model(component) ? (0, import_vue2.createVNode)(component, props) : (0, import_vue2.createVNode)(ReactiveView_default, props, slots);
|
|
703
667
|
}
|
|
704
668
|
function getDate(param1, param2) {
|
|
705
|
-
var _a, _b;
|
|
706
669
|
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
707
670
|
const format = "MM/dd/yyyy h:mm a";
|
|
708
|
-
const options = typeof param2 === "string" ? { format: param2, timezone } : { format:
|
|
671
|
+
const options = typeof param2 === "string" ? { format: param2, timezone } : { format: param2?.format ?? format, timezone: param2?.timezone ?? timezone };
|
|
709
672
|
const datetime = () => {
|
|
710
673
|
try {
|
|
711
674
|
return param1 instanceof Date ? param1 : param1.toDate();
|
|
@@ -716,7 +679,6 @@ function getDate(param1, param2) {
|
|
|
716
679
|
return (0, import_date_fns_tz.formatInTimeZone)(datetime(), options.timezone, options.format);
|
|
717
680
|
}
|
|
718
681
|
function access(view = {}, alternative) {
|
|
719
|
-
var _a;
|
|
720
682
|
const resolve = (target) => {
|
|
721
683
|
return new Proxy((0, import_vue2.toRaw)(target), {
|
|
722
684
|
get(target2, key) {
|
|
@@ -732,16 +694,16 @@ function access(view = {}, alternative) {
|
|
|
732
694
|
} while (component.tree);
|
|
733
695
|
try {
|
|
734
696
|
return new alternative();
|
|
735
|
-
} catch
|
|
697
|
+
} catch {
|
|
736
698
|
return alternative;
|
|
737
699
|
}
|
|
738
700
|
}
|
|
739
701
|
});
|
|
740
702
|
};
|
|
741
703
|
try {
|
|
742
|
-
const component = (
|
|
704
|
+
const component = (0, import_vue2.unref)(typeof view === "function" ? view() : view) ?? {};
|
|
743
705
|
return resolve("instance" in component ? component.instance : component);
|
|
744
|
-
} catch
|
|
706
|
+
} catch {
|
|
745
707
|
return resolve(view);
|
|
746
708
|
}
|
|
747
709
|
}
|
|
@@ -773,28 +735,28 @@ function useSubscription() {
|
|
|
773
735
|
};
|
|
774
736
|
}
|
|
775
737
|
var Prop = ({ default: value, type, validator, required } = {}) => {
|
|
776
|
-
const types1 = Array.isArray(type) ? type : [type
|
|
738
|
+
const types1 = Array.isArray(type) ? type : [type ?? Array];
|
|
777
739
|
const types2 = types1.includes(Object) ? types1 : types1.concat(Object);
|
|
778
|
-
return
|
|
740
|
+
return {
|
|
741
|
+
...value ? { default: (0, import_vue2.isRef)(value) || (0, import_vue2.isReactive)(value) ? value : (0, import_vue2.ref)(value) } : {},
|
|
779
742
|
required,
|
|
780
743
|
validator: (value2) => {
|
|
781
744
|
try {
|
|
782
745
|
return validator ? validator((0, import_vue2.unref)(value2)) : Array.from(new Set(types2.map((type2) => {
|
|
783
746
|
return typeof type2 === "function" ? type2().constructor.name : type2;
|
|
784
747
|
}))).includes((0, import_vue2.unref)(value2).constructor.name);
|
|
785
|
-
} catch
|
|
748
|
+
} catch {
|
|
786
749
|
return !required;
|
|
787
750
|
}
|
|
788
751
|
}
|
|
789
|
-
}
|
|
752
|
+
};
|
|
790
753
|
};
|
|
791
754
|
function StyleParser(styles = {}) {
|
|
792
755
|
const transform = (style, status = true) => {
|
|
793
756
|
const remove = style.split(/(-{[^}]+})/);
|
|
794
757
|
return remove.reduce((object, style2) => {
|
|
795
|
-
var _a;
|
|
796
758
|
const remove2 = /-{(.+?)}/.exec(style2);
|
|
797
|
-
(remove2 ?
|
|
759
|
+
(remove2 ? remove2[1] ?? style2 : style2).split(/\s+/).forEach((item) => {
|
|
798
760
|
if (item) {
|
|
799
761
|
Object.assign(object, { [item]: remove2 ? false : status });
|
|
800
762
|
}
|
|
@@ -803,14 +765,19 @@ function StyleParser(styles = {}) {
|
|
|
803
765
|
}, {});
|
|
804
766
|
};
|
|
805
767
|
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]) => {
|
|
806
|
-
return
|
|
768
|
+
return {
|
|
769
|
+
...acc,
|
|
770
|
+
...transform(styles2, value)
|
|
771
|
+
};
|
|
807
772
|
}, {});
|
|
808
773
|
}
|
|
809
774
|
function MergeStyles(...params) {
|
|
810
775
|
return new Proxy(params.reduce((styles, style, index, items) => {
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
776
|
+
const item = items[items.length - index - 1] ?? {};
|
|
777
|
+
return {
|
|
778
|
+
...StyleParser(typeof item === "function" ? item(items.slice(0, index - 1)) : item),
|
|
779
|
+
...styles
|
|
780
|
+
};
|
|
814
781
|
}, {}), {
|
|
815
782
|
get: (target, key, receiver) => {
|
|
816
783
|
const styles = Object.entries(target).reduce((styles2, [key2, val]) => {
|
|
@@ -832,22 +799,20 @@ var extendVnode = (component, element) => {
|
|
|
832
799
|
const getVnode = () => {
|
|
833
800
|
try {
|
|
834
801
|
return target[key]();
|
|
835
|
-
} catch
|
|
802
|
+
} catch {
|
|
836
803
|
throw new Error(`${key} does not exist as vnode on component.`);
|
|
837
804
|
}
|
|
838
805
|
};
|
|
839
806
|
const vnode = getVnode();
|
|
840
807
|
return (props = {}, slots) => {
|
|
841
|
-
var _a;
|
|
842
808
|
const isFunctionClass = typeof props.class === "function";
|
|
843
809
|
const isFunctionStyle = typeof props.style === "function";
|
|
844
|
-
const
|
|
810
|
+
const { class: classes, style: styles, ...rest } = vnode.props ?? {};
|
|
845
811
|
const finalClasses = (0, import_tailwind_merge.twMerge)(isFunctionClass ? "" : classes, MergeStyles(isFunctionClass ? props.class(classes) : props.class).string);
|
|
846
812
|
const finalStyles = MergeStyles(styles, isFunctionStyle ? props.style(styles) : props.style);
|
|
847
813
|
const functionalProps = Object.entries(props).reduce((props2, [key2, value]) => {
|
|
848
|
-
var _a2;
|
|
849
814
|
if (!["class", "style", "setup"].includes(key2) && typeof value === "function") {
|
|
850
|
-
props2[key2] = value(
|
|
815
|
+
props2[key2] = value(vnode.props?.[key2]);
|
|
851
816
|
}
|
|
852
817
|
return props2;
|
|
853
818
|
}, props);
|
|
@@ -862,26 +827,27 @@ var extendVnode = (component, element) => {
|
|
|
862
827
|
function defineReactiveView(param1, param2) {
|
|
863
828
|
const instance = (0, import_vue2.ref)();
|
|
864
829
|
return (0, import_vue2.defineComponent)({
|
|
865
|
-
name: param1
|
|
866
|
-
props:
|
|
830
|
+
name: param1?.modelName,
|
|
831
|
+
props: { setup, ...param1 ? param1.props : {} },
|
|
867
832
|
setup() {
|
|
868
|
-
const
|
|
833
|
+
const { setup: setup2, props, ...rest } = param1 ?? {};
|
|
869
834
|
return (component) => {
|
|
870
835
|
const props2 = Object.entries(rest).reduce((props3, [key, val]) => {
|
|
871
836
|
return Object.assign(props3, { [key]: typeof val === "function" ? val(component, instance) : val });
|
|
872
837
|
}, {});
|
|
873
|
-
const slots = typeof
|
|
874
|
-
return (0, import_vue2.createVNode)(param2
|
|
875
|
-
|
|
876
|
-
|
|
838
|
+
const slots = typeof param1?.slots === "function" ? param1.slots(component) : Array.isArray(param1?.slots) ? () => param1.slots : param1?.slots;
|
|
839
|
+
return (0, import_vue2.createVNode)(param2 ?? ReactiveView_default, {
|
|
840
|
+
...props2,
|
|
841
|
+
...Object.assign({}, props2, typeof setup2 === "function" ? {
|
|
842
|
+
setup: (self, parent) => setup2(self, parent, component)
|
|
843
|
+
} : {}),
|
|
877
844
|
instance
|
|
878
|
-
}
|
|
845
|
+
}, slots);
|
|
879
846
|
};
|
|
880
847
|
}
|
|
881
848
|
});
|
|
882
849
|
}
|
|
883
850
|
function showComponent(component, options = {}) {
|
|
884
|
-
var _a;
|
|
885
851
|
if (options.router) {
|
|
886
852
|
console.warn("[ReactiveView]: Deprecated {router} option used with {showComponent()}. \nUse {plugins} option instead.");
|
|
887
853
|
}
|
|
@@ -893,7 +859,7 @@ function showComponent(component, options = {}) {
|
|
|
893
859
|
document.body.appendChild(dialogs);
|
|
894
860
|
}
|
|
895
861
|
const dialog = document.createElement("div");
|
|
896
|
-
const id =
|
|
862
|
+
const id = options.key ?? `dialog_${dialogs.children.length + 1}`;
|
|
897
863
|
dialog.setAttribute("id", id);
|
|
898
864
|
dialogs.appendChild(dialog);
|
|
899
865
|
const app = (0, import_vue2.createApp)(
|
|
@@ -922,7 +888,7 @@ function showComponent(component, options = {}) {
|
|
|
922
888
|
}
|
|
923
889
|
var getData = (component, path, alternative) => {
|
|
924
890
|
const vue = access(component);
|
|
925
|
-
const data =
|
|
891
|
+
const data = ObjectManager2.on(componentState(vue));
|
|
926
892
|
if (path) {
|
|
927
893
|
return data.get(dataPath(vue, path), alternative);
|
|
928
894
|
} else {
|
|
@@ -932,8 +898,8 @@ var getData = (component, path, alternative) => {
|
|
|
932
898
|
var setData = (component, data, path) => {
|
|
933
899
|
const vue = access(component);
|
|
934
900
|
const diff = {
|
|
935
|
-
before:
|
|
936
|
-
after: path ?
|
|
901
|
+
before: ObjectManager2.on(componentState(vue)).clone(),
|
|
902
|
+
after: path ? ObjectManager2.on(componentState(vue)).set(dataPath(vue, path), data).get() : ObjectManager2.on(componentState(vue)).set(data).get()
|
|
937
903
|
};
|
|
938
904
|
return "state" in vue ? diff : vue.$emit("update:state", diff);
|
|
939
905
|
};
|