@razaman2/reactive-view 0.0.7 → 0.0.9
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.d.mts +5 -36
- package/dist/index.d.ts +5 -36
- package/dist/index.js +72 -90
- package/dist/index.mjs +72 -85
- package/package.json +46 -46
package/dist/index.d.mts
CHANGED
|
@@ -35,6 +35,7 @@ declare const _default: {
|
|
|
35
35
|
defaultData: {};
|
|
36
36
|
model: {};
|
|
37
37
|
state: {};
|
|
38
|
+
await: {};
|
|
38
39
|
getDefaultData: {
|
|
39
40
|
type: FunctionConstructor;
|
|
40
41
|
default: (data?: {}) => {};
|
|
@@ -58,45 +59,13 @@ declare const _default: {
|
|
|
58
59
|
setup(props: Record<string, any>, context: SetupContext): ($vue: ComponentPublicInstance & any) => any;
|
|
59
60
|
};
|
|
60
61
|
|
|
61
|
-
/**
|
|
62
|
-
* uppercase the first character of each word in the input string.
|
|
63
|
-
* @deprecated
|
|
64
|
-
* @description
|
|
65
|
-
* (test -> Test), (TEST -> Test), (test test -> Test Test)
|
|
66
|
-
*/
|
|
67
|
-
declare function ucf(string: string): string;
|
|
68
|
-
/**
|
|
69
|
-
* uppercase the first character of each word that follows a specified token
|
|
70
|
-
* @deprecated
|
|
71
|
-
* @description
|
|
72
|
-
* (test-test -> test-Test), (TEST-TEST -> TEST-Test), (test/test -> test/Test)
|
|
73
|
-
*/
|
|
74
|
-
declare function ucfat(string: string, tokens: Array<string>): string;
|
|
75
|
-
/**
|
|
76
|
-
* @deprecated
|
|
77
|
-
*/
|
|
78
|
-
declare function getRoot(vue: ComponentPublicInstance): any;
|
|
79
|
-
/**
|
|
80
|
-
* @deprecated
|
|
81
|
-
*/
|
|
82
|
-
declare function getRef(component: ComponentPublicInstance, ref: UnwrapRef<any>): ComponentPublicInstance;
|
|
83
|
-
/**
|
|
84
|
-
* @deprecated
|
|
85
|
-
*/
|
|
86
|
-
declare function expose(vue: any, props: Record<string, any>): Record<string, any>;
|
|
87
62
|
type Accessible = {
|
|
88
63
|
parent: {
|
|
89
64
|
self: Record<string | symbol, any>;
|
|
90
65
|
};
|
|
91
66
|
self: Record<string | symbol, any>;
|
|
92
|
-
access?:
|
|
93
|
-
value?:
|
|
94
|
-
parent: {
|
|
95
|
-
self: Record<string | symbol, any>;
|
|
96
|
-
};
|
|
97
|
-
self: Record<string | symbol, any>;
|
|
98
|
-
access?: Function;
|
|
99
|
-
};
|
|
67
|
+
access?: () => Accessible;
|
|
68
|
+
value?: Accessible;
|
|
100
69
|
};
|
|
101
70
|
type PropOptions = {
|
|
102
71
|
exclude: string | Array<string>;
|
|
@@ -126,6 +95,7 @@ declare function getDate(timestamp: {
|
|
|
126
95
|
format?: string;
|
|
127
96
|
timezone?: string;
|
|
128
97
|
}): string;
|
|
98
|
+
declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T | UnwrapRef<any>): Record<string | symbol, any>;
|
|
129
99
|
declare function getSubscription(): {
|
|
130
100
|
addSubscription(name: string, handler?: () => boolean, data?: any): void;
|
|
131
101
|
replaceSubscription(name: string, handler?: () => boolean, data?: any): void;
|
|
@@ -135,6 +105,5 @@ declare function getSubscription(): {
|
|
|
135
105
|
subscriptions: any[];
|
|
136
106
|
subscription: Subscription;
|
|
137
107
|
};
|
|
138
|
-
declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T | UnwrapRef<any>): any;
|
|
139
108
|
|
|
140
|
-
export { access, _default as default,
|
|
109
|
+
export { access, _default as default, getDate, getProps, getSubscription, safeRequest, setup };
|
package/dist/index.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ declare const _default: {
|
|
|
35
35
|
defaultData: {};
|
|
36
36
|
model: {};
|
|
37
37
|
state: {};
|
|
38
|
+
await: {};
|
|
38
39
|
getDefaultData: {
|
|
39
40
|
type: FunctionConstructor;
|
|
40
41
|
default: (data?: {}) => {};
|
|
@@ -58,45 +59,13 @@ declare const _default: {
|
|
|
58
59
|
setup(props: Record<string, any>, context: SetupContext): ($vue: ComponentPublicInstance & any) => any;
|
|
59
60
|
};
|
|
60
61
|
|
|
61
|
-
/**
|
|
62
|
-
* uppercase the first character of each word in the input string.
|
|
63
|
-
* @deprecated
|
|
64
|
-
* @description
|
|
65
|
-
* (test -> Test), (TEST -> Test), (test test -> Test Test)
|
|
66
|
-
*/
|
|
67
|
-
declare function ucf(string: string): string;
|
|
68
|
-
/**
|
|
69
|
-
* uppercase the first character of each word that follows a specified token
|
|
70
|
-
* @deprecated
|
|
71
|
-
* @description
|
|
72
|
-
* (test-test -> test-Test), (TEST-TEST -> TEST-Test), (test/test -> test/Test)
|
|
73
|
-
*/
|
|
74
|
-
declare function ucfat(string: string, tokens: Array<string>): string;
|
|
75
|
-
/**
|
|
76
|
-
* @deprecated
|
|
77
|
-
*/
|
|
78
|
-
declare function getRoot(vue: ComponentPublicInstance): any;
|
|
79
|
-
/**
|
|
80
|
-
* @deprecated
|
|
81
|
-
*/
|
|
82
|
-
declare function getRef(component: ComponentPublicInstance, ref: UnwrapRef<any>): ComponentPublicInstance;
|
|
83
|
-
/**
|
|
84
|
-
* @deprecated
|
|
85
|
-
*/
|
|
86
|
-
declare function expose(vue: any, props: Record<string, any>): Record<string, any>;
|
|
87
62
|
type Accessible = {
|
|
88
63
|
parent: {
|
|
89
64
|
self: Record<string | symbol, any>;
|
|
90
65
|
};
|
|
91
66
|
self: Record<string | symbol, any>;
|
|
92
|
-
access?:
|
|
93
|
-
value?:
|
|
94
|
-
parent: {
|
|
95
|
-
self: Record<string | symbol, any>;
|
|
96
|
-
};
|
|
97
|
-
self: Record<string | symbol, any>;
|
|
98
|
-
access?: Function;
|
|
99
|
-
};
|
|
67
|
+
access?: () => Accessible;
|
|
68
|
+
value?: Accessible;
|
|
100
69
|
};
|
|
101
70
|
type PropOptions = {
|
|
102
71
|
exclude: string | Array<string>;
|
|
@@ -126,6 +95,7 @@ declare function getDate(timestamp: {
|
|
|
126
95
|
format?: string;
|
|
127
96
|
timezone?: string;
|
|
128
97
|
}): string;
|
|
98
|
+
declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T | UnwrapRef<any>): Record<string | symbol, any>;
|
|
129
99
|
declare function getSubscription(): {
|
|
130
100
|
addSubscription(name: string, handler?: () => boolean, data?: any): void;
|
|
131
101
|
replaceSubscription(name: string, handler?: () => boolean, data?: any): void;
|
|
@@ -135,6 +105,5 @@ declare function getSubscription(): {
|
|
|
135
105
|
subscriptions: any[];
|
|
136
106
|
subscription: Subscription;
|
|
137
107
|
};
|
|
138
|
-
declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T | UnwrapRef<any>): any;
|
|
139
108
|
|
|
140
|
-
export { access, _default as default,
|
|
109
|
+
export { access, _default as default, getDate, getProps, getSubscription, safeRequest, setup };
|
package/dist/index.js
CHANGED
|
@@ -58,16 +58,11 @@ var src_exports = {};
|
|
|
58
58
|
__export(src_exports, {
|
|
59
59
|
access: () => access,
|
|
60
60
|
default: () => src_default,
|
|
61
|
-
expose: () => expose,
|
|
62
61
|
getDate: () => getDate,
|
|
63
62
|
getProps: () => getProps,
|
|
64
|
-
getRef: () => getRef,
|
|
65
|
-
getRoot: () => getRoot,
|
|
66
63
|
getSubscription: () => getSubscription,
|
|
67
64
|
safeRequest: () => safeRequest,
|
|
68
|
-
setup: () => setup
|
|
69
|
-
ucf: () => ucf,
|
|
70
|
-
ucfat: () => ucfat
|
|
65
|
+
setup: () => setup
|
|
71
66
|
});
|
|
72
67
|
module.exports = __toCommonJS(src_exports);
|
|
73
68
|
var import_date_fns_tz = require("date-fns-tz");
|
|
@@ -166,7 +161,7 @@ var import_data_manager = __toESM(require("@razaman2/data-manager"));
|
|
|
166
161
|
|
|
167
162
|
// package.json
|
|
168
163
|
var name = "@razaman2/reactive-view";
|
|
169
|
-
var version = "0.0.
|
|
164
|
+
var version = "0.0.9";
|
|
170
165
|
|
|
171
166
|
// src/ReactiveView.ts
|
|
172
167
|
var import_vue = require("vue");
|
|
@@ -176,6 +171,7 @@ var props = {
|
|
|
176
171
|
defaultData: {},
|
|
177
172
|
model: {},
|
|
178
173
|
state: {},
|
|
174
|
+
await: {},
|
|
179
175
|
getDefaultData: {
|
|
180
176
|
type: Function,
|
|
181
177
|
default: (data = {}) => data
|
|
@@ -205,7 +201,7 @@ var setup = {
|
|
|
205
201
|
var ReactiveView_default = {
|
|
206
202
|
props: __spreadValues(__spreadValues({}, setup), props),
|
|
207
203
|
setup(props2, context) {
|
|
208
|
-
var _a, _b, _c, _d,
|
|
204
|
+
var _a, _b, _c, _d, _f;
|
|
209
205
|
const template = (vue, options2) => {
|
|
210
206
|
var _a2, _b2, _c2;
|
|
211
207
|
const vnode = context.slots.default ? (0, import_vue.h)(
|
|
@@ -218,57 +214,64 @@ var ReactiveView_default = {
|
|
|
218
214
|
textAlign: "center"
|
|
219
215
|
}
|
|
220
216
|
}, context.attrs), `${props2.modelName}: ${name}@${version}`);
|
|
221
|
-
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, vnode })) != null ? _c2 : vnode;
|
|
217
|
+
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { $vue: vue, vnode })) != null ? _c2 : vnode;
|
|
222
218
|
};
|
|
223
219
|
const isValid = (0, import_vue.ref)(false);
|
|
224
220
|
const defaultData = props2.getDefaultData(
|
|
225
221
|
Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
|
|
226
222
|
);
|
|
227
223
|
const defaultType = Array.isArray(defaultData) ? [] : {};
|
|
228
|
-
const state = (0, import_vue.reactive)(import_data_manager.default.transform((_c = props2.state) != null ? _c : defaultType));
|
|
224
|
+
const state = (0, import_vue.reactive)(import_data_manager.default.transform(props2.await ? defaultType : (_c = props2.state) != null ? _c : defaultType));
|
|
229
225
|
const config = {
|
|
230
226
|
defaultData,
|
|
231
227
|
data: state,
|
|
232
228
|
name: props2.modelName,
|
|
233
229
|
logging: props2.logging,
|
|
234
|
-
notifications: props2.notifications
|
|
230
|
+
notifications: props2.notifications,
|
|
231
|
+
subscriptions: props2.subscriptions
|
|
235
232
|
};
|
|
236
233
|
const getState = props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new import_data_manager.default(config);
|
|
237
234
|
const sync = (0, import_vue.ref)(false);
|
|
235
|
+
const options = {
|
|
236
|
+
parent: { self: (0, import_vue.getCurrentInstance)().proxy },
|
|
237
|
+
self: { template, isValid, getState }
|
|
238
|
+
};
|
|
239
|
+
const _e = (_d = props2.setup(options)) != null ? _d : options, { parent = {}, self = {} } = _e, rest = __objRest(_e, ["parent", "self"]);
|
|
240
|
+
if (props2.await instanceof Promise) {
|
|
241
|
+
(0, import_vue.nextTick)(async () => {
|
|
242
|
+
getState.replaceData(await props2.await);
|
|
243
|
+
});
|
|
244
|
+
}
|
|
238
245
|
if (context.attrs["onUpdate:modelState"]) {
|
|
239
246
|
const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? { callback: context.attrs["onUpdate:modelState"] } : context.attrs["onUpdate:modelState"];
|
|
240
|
-
(0, import_vue.
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
before: (before
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
}, config2.options);
|
|
247
|
+
(0, import_vue.onMounted)(() => {
|
|
248
|
+
(0, import_vue.watch)(() => import_object_manager.default.on(state).clone(), (after, before) => {
|
|
249
|
+
var _a2;
|
|
250
|
+
const beforeStateUpdate = (_a2 = config2.beforeStateUpdate) != null ? _a2 : access({ parent, self }).beforeStateUpdate;
|
|
251
|
+
const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
|
|
252
|
+
if (sync.value) {
|
|
253
|
+
sync.value = false;
|
|
254
|
+
} else {
|
|
255
|
+
config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
|
|
256
|
+
}
|
|
257
|
+
}, config2.options);
|
|
258
|
+
});
|
|
253
259
|
}
|
|
254
260
|
if (context.attrs["onUpdate:propsState"] || props2.sync) {
|
|
255
|
-
const config2 = (
|
|
256
|
-
(0, import_vue.
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
config2.callback
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
261
|
+
const config2 = (_f = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _f : {};
|
|
262
|
+
(0, import_vue.onMounted)(() => {
|
|
263
|
+
(0, import_vue.watch)(() => props2.state, (after, before) => {
|
|
264
|
+
if (props2.sync && typeof config2.callback !== "function") {
|
|
265
|
+
getState.replaceData(after);
|
|
266
|
+
} else if (typeof config2.callback === "function") {
|
|
267
|
+
config2.callback({ before, after }, getState);
|
|
268
|
+
}
|
|
269
|
+
sync.value = true;
|
|
270
|
+
}, config2.options);
|
|
271
|
+
});
|
|
264
272
|
}
|
|
265
|
-
const options = {
|
|
266
|
-
parent: {},
|
|
267
|
-
self: { template, isValid, getState }
|
|
268
|
-
};
|
|
269
|
-
const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = options.parent, self = options.self } = _f, rest = __objRest(_f, ["parent", "self"]);
|
|
270
273
|
return ($vue) => {
|
|
271
|
-
const setup2 = { $vue, options:
|
|
274
|
+
const setup2 = { $vue, options: parent };
|
|
272
275
|
while (setup2.options) {
|
|
273
276
|
Object.defineProperties(setup2.$vue, Object.assign({
|
|
274
277
|
access: {
|
|
@@ -286,32 +289,6 @@ var ReactiveView_default = {
|
|
|
286
289
|
|
|
287
290
|
// src/index.ts
|
|
288
291
|
var src_default = ReactiveView_default;
|
|
289
|
-
function ucf(string) {
|
|
290
|
-
return string.split(/\s+/).map((string2) => {
|
|
291
|
-
return string2.toLowerCase().replace(/^(\w)/, ($1) => $1.toUpperCase());
|
|
292
|
-
}).join(" ");
|
|
293
|
-
}
|
|
294
|
-
function ucfat(string, tokens) {
|
|
295
|
-
const pattern = RegExp(`(?<=(?:${tokens.join("|")}))(\\w)(\\w*)`, "g");
|
|
296
|
-
return string.replace(pattern, ($1, $2, $3) => `${$2.toUpperCase()}${$3.toLowerCase()}`);
|
|
297
|
-
}
|
|
298
|
-
function getRoot(vue) {
|
|
299
|
-
var _a, _b, _c;
|
|
300
|
-
return (_c = (_a = typeof vue.$attrs.root === "function" ? vue.$attrs.root() : vue.$attrs.root) != null ? _a : vue.$root) != null ? _c : (_b = vue.$parent) == null ? void 0 : _b.$root;
|
|
301
|
-
}
|
|
302
|
-
function getRef(component, ref2) {
|
|
303
|
-
safeRequest({
|
|
304
|
-
try: async () => component.$props.ref.value = component,
|
|
305
|
-
alternative: false
|
|
306
|
-
});
|
|
307
|
-
return ref2.value = component;
|
|
308
|
-
}
|
|
309
|
-
function expose(vue, props2) {
|
|
310
|
-
Object.entries(Object.getOwnPropertyDescriptors(props2)).forEach(([key, val]) => {
|
|
311
|
-
Object.defineProperty(vue, key, val);
|
|
312
|
-
});
|
|
313
|
-
return props2;
|
|
314
|
-
}
|
|
315
292
|
function safeRequest(request) {
|
|
316
293
|
return new Promise(async (resolve) => {
|
|
317
294
|
var _a, _b, _c, _d;
|
|
@@ -369,6 +346,35 @@ function getDate(param1, param2) {
|
|
|
369
346
|
};
|
|
370
347
|
return (0, import_date_fns_tz.formatInTimeZone)(datetime(), options.timezone, options.format);
|
|
371
348
|
}
|
|
349
|
+
function access($vue = {}) {
|
|
350
|
+
var _a, _b;
|
|
351
|
+
const proxy = (target) => {
|
|
352
|
+
return new Proxy(target, {
|
|
353
|
+
get(target2, key) {
|
|
354
|
+
var _a2, _b2;
|
|
355
|
+
const component = { $vue: target2 };
|
|
356
|
+
do {
|
|
357
|
+
if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
|
|
358
|
+
return component.$vue[key];
|
|
359
|
+
} else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
|
|
360
|
+
return component.$vue.self[key];
|
|
361
|
+
} else {
|
|
362
|
+
component.$vue = component.$vue.parent;
|
|
363
|
+
}
|
|
364
|
+
} while (component.$vue);
|
|
365
|
+
}
|
|
366
|
+
});
|
|
367
|
+
};
|
|
368
|
+
try {
|
|
369
|
+
return proxy($vue.access());
|
|
370
|
+
} catch (e) {
|
|
371
|
+
try {
|
|
372
|
+
return proxy($vue.value.access());
|
|
373
|
+
} catch (e2) {
|
|
374
|
+
return proxy((_b = (_a = $vue.value) != null ? _a : $vue) != null ? _b : {});
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
}
|
|
372
378
|
function getSubscription() {
|
|
373
379
|
const subscriptions = [];
|
|
374
380
|
const subscription = Subscriptions.get();
|
|
@@ -396,36 +402,12 @@ function getSubscription() {
|
|
|
396
402
|
subscription
|
|
397
403
|
};
|
|
398
404
|
}
|
|
399
|
-
function access($vue = {}) {
|
|
400
|
-
var _a, _b, _c;
|
|
401
|
-
const target = typeof ($vue == null ? void 0 : $vue.access) === "function" ? $vue.access() : (_c = (_b = ($vue == null ? void 0 : $vue.value) && typeof ((_a = $vue.value) == null ? void 0 : _a.access) === "function" ? $vue.value.access() : $vue == null ? void 0 : $vue.value) != null ? _b : $vue) != null ? _c : {};
|
|
402
|
-
return new Proxy(target, {
|
|
403
|
-
get(target2, key) {
|
|
404
|
-
var _a2, _b2;
|
|
405
|
-
const component = { $vue: target2 };
|
|
406
|
-
do {
|
|
407
|
-
if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
|
|
408
|
-
return component.$vue[key];
|
|
409
|
-
} else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
|
|
410
|
-
return component.$vue.self[key];
|
|
411
|
-
} else {
|
|
412
|
-
component.$vue = component.$vue.parent;
|
|
413
|
-
}
|
|
414
|
-
} while (component.$vue);
|
|
415
|
-
}
|
|
416
|
-
});
|
|
417
|
-
}
|
|
418
405
|
// Annotate the CommonJS export names for ESM import in node:
|
|
419
406
|
0 && (module.exports = {
|
|
420
407
|
access,
|
|
421
|
-
expose,
|
|
422
408
|
getDate,
|
|
423
409
|
getProps,
|
|
424
|
-
getRef,
|
|
425
|
-
getRoot,
|
|
426
410
|
getSubscription,
|
|
427
411
|
safeRequest,
|
|
428
|
-
setup
|
|
429
|
-
ucf,
|
|
430
|
-
ucfat
|
|
412
|
+
setup
|
|
431
413
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -124,16 +124,17 @@ import DataManager from "@razaman2/data-manager";
|
|
|
124
124
|
|
|
125
125
|
// package.json
|
|
126
126
|
var name = "@razaman2/reactive-view";
|
|
127
|
-
var version = "0.0.
|
|
127
|
+
var version = "0.0.9";
|
|
128
128
|
|
|
129
129
|
// src/ReactiveView.ts
|
|
130
|
-
import { h, ref, reactive, watch } from "vue";
|
|
130
|
+
import { h, ref, reactive, watch, nextTick, getCurrentInstance, onMounted } from "vue";
|
|
131
131
|
var props = {
|
|
132
132
|
notifications: Object,
|
|
133
133
|
subscriptions: Object,
|
|
134
134
|
defaultData: {},
|
|
135
135
|
model: {},
|
|
136
136
|
state: {},
|
|
137
|
+
await: {},
|
|
137
138
|
getDefaultData: {
|
|
138
139
|
type: Function,
|
|
139
140
|
default: (data = {}) => data
|
|
@@ -163,7 +164,7 @@ var setup = {
|
|
|
163
164
|
var ReactiveView_default = {
|
|
164
165
|
props: __spreadValues(__spreadValues({}, setup), props),
|
|
165
166
|
setup(props2, context) {
|
|
166
|
-
var _a, _b, _c, _d,
|
|
167
|
+
var _a, _b, _c, _d, _f;
|
|
167
168
|
const template = (vue, options2) => {
|
|
168
169
|
var _a2, _b2, _c2;
|
|
169
170
|
const vnode = context.slots.default ? h(
|
|
@@ -176,57 +177,64 @@ var ReactiveView_default = {
|
|
|
176
177
|
textAlign: "center"
|
|
177
178
|
}
|
|
178
179
|
}, context.attrs), `${props2.modelName}: ${name}@${version}`);
|
|
179
|
-
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, vnode })) != null ? _c2 : vnode;
|
|
180
|
+
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { $vue: vue, vnode })) != null ? _c2 : vnode;
|
|
180
181
|
};
|
|
181
182
|
const isValid = ref(false);
|
|
182
183
|
const defaultData = props2.getDefaultData(
|
|
183
184
|
Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
|
|
184
185
|
);
|
|
185
186
|
const defaultType = Array.isArray(defaultData) ? [] : {};
|
|
186
|
-
const state = reactive(DataManager.transform((_c = props2.state) != null ? _c : defaultType));
|
|
187
|
+
const state = reactive(DataManager.transform(props2.await ? defaultType : (_c = props2.state) != null ? _c : defaultType));
|
|
187
188
|
const config = {
|
|
188
189
|
defaultData,
|
|
189
190
|
data: state,
|
|
190
191
|
name: props2.modelName,
|
|
191
192
|
logging: props2.logging,
|
|
192
|
-
notifications: props2.notifications
|
|
193
|
+
notifications: props2.notifications,
|
|
194
|
+
subscriptions: props2.subscriptions
|
|
193
195
|
};
|
|
194
196
|
const getState = props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new DataManager(config);
|
|
195
197
|
const sync = ref(false);
|
|
198
|
+
const options = {
|
|
199
|
+
parent: { self: getCurrentInstance().proxy },
|
|
200
|
+
self: { template, isValid, getState }
|
|
201
|
+
};
|
|
202
|
+
const _e = (_d = props2.setup(options)) != null ? _d : options, { parent = {}, self = {} } = _e, rest = __objRest(_e, ["parent", "self"]);
|
|
203
|
+
if (props2.await instanceof Promise) {
|
|
204
|
+
nextTick(async () => {
|
|
205
|
+
getState.replaceData(await props2.await);
|
|
206
|
+
});
|
|
207
|
+
}
|
|
196
208
|
if (context.attrs["onUpdate:modelState"]) {
|
|
197
209
|
const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? { callback: context.attrs["onUpdate:modelState"] } : context.attrs["onUpdate:modelState"];
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
before: (before
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
}, config2.options);
|
|
210
|
+
onMounted(() => {
|
|
211
|
+
watch(() => ObjectManager.on(state).clone(), (after, before) => {
|
|
212
|
+
var _a2;
|
|
213
|
+
const beforeStateUpdate = (_a2 = config2.beforeStateUpdate) != null ? _a2 : access({ parent, self }).beforeStateUpdate;
|
|
214
|
+
const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
|
|
215
|
+
if (sync.value) {
|
|
216
|
+
sync.value = false;
|
|
217
|
+
} else {
|
|
218
|
+
config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
|
|
219
|
+
}
|
|
220
|
+
}, config2.options);
|
|
221
|
+
});
|
|
211
222
|
}
|
|
212
223
|
if (context.attrs["onUpdate:propsState"] || props2.sync) {
|
|
213
|
-
const config2 = (
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
config2.callback
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
224
|
+
const config2 = (_f = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _f : {};
|
|
225
|
+
onMounted(() => {
|
|
226
|
+
watch(() => props2.state, (after, before) => {
|
|
227
|
+
if (props2.sync && typeof config2.callback !== "function") {
|
|
228
|
+
getState.replaceData(after);
|
|
229
|
+
} else if (typeof config2.callback === "function") {
|
|
230
|
+
config2.callback({ before, after }, getState);
|
|
231
|
+
}
|
|
232
|
+
sync.value = true;
|
|
233
|
+
}, config2.options);
|
|
234
|
+
});
|
|
222
235
|
}
|
|
223
|
-
const options = {
|
|
224
|
-
parent: {},
|
|
225
|
-
self: { template, isValid, getState }
|
|
226
|
-
};
|
|
227
|
-
const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = options.parent, self = options.self } = _f, rest = __objRest(_f, ["parent", "self"]);
|
|
228
236
|
return ($vue) => {
|
|
229
|
-
const setup2 = { $vue, options:
|
|
237
|
+
const setup2 = { $vue, options: parent };
|
|
230
238
|
while (setup2.options) {
|
|
231
239
|
Object.defineProperties(setup2.$vue, Object.assign({
|
|
232
240
|
access: {
|
|
@@ -244,32 +252,6 @@ var ReactiveView_default = {
|
|
|
244
252
|
|
|
245
253
|
// src/index.ts
|
|
246
254
|
var src_default = ReactiveView_default;
|
|
247
|
-
function ucf(string) {
|
|
248
|
-
return string.split(/\s+/).map((string2) => {
|
|
249
|
-
return string2.toLowerCase().replace(/^(\w)/, ($1) => $1.toUpperCase());
|
|
250
|
-
}).join(" ");
|
|
251
|
-
}
|
|
252
|
-
function ucfat(string, tokens) {
|
|
253
|
-
const pattern = RegExp(`(?<=(?:${tokens.join("|")}))(\\w)(\\w*)`, "g");
|
|
254
|
-
return string.replace(pattern, ($1, $2, $3) => `${$2.toUpperCase()}${$3.toLowerCase()}`);
|
|
255
|
-
}
|
|
256
|
-
function getRoot(vue) {
|
|
257
|
-
var _a, _b, _c;
|
|
258
|
-
return (_c = (_a = typeof vue.$attrs.root === "function" ? vue.$attrs.root() : vue.$attrs.root) != null ? _a : vue.$root) != null ? _c : (_b = vue.$parent) == null ? void 0 : _b.$root;
|
|
259
|
-
}
|
|
260
|
-
function getRef(component, ref2) {
|
|
261
|
-
safeRequest({
|
|
262
|
-
try: async () => component.$props.ref.value = component,
|
|
263
|
-
alternative: false
|
|
264
|
-
});
|
|
265
|
-
return ref2.value = component;
|
|
266
|
-
}
|
|
267
|
-
function expose(vue, props2) {
|
|
268
|
-
Object.entries(Object.getOwnPropertyDescriptors(props2)).forEach(([key, val]) => {
|
|
269
|
-
Object.defineProperty(vue, key, val);
|
|
270
|
-
});
|
|
271
|
-
return props2;
|
|
272
|
-
}
|
|
273
255
|
function safeRequest(request) {
|
|
274
256
|
return new Promise(async (resolve) => {
|
|
275
257
|
var _a, _b, _c, _d;
|
|
@@ -327,6 +309,35 @@ function getDate(param1, param2) {
|
|
|
327
309
|
};
|
|
328
310
|
return formatInTimeZone(datetime(), options.timezone, options.format);
|
|
329
311
|
}
|
|
312
|
+
function access($vue = {}) {
|
|
313
|
+
var _a, _b;
|
|
314
|
+
const proxy = (target) => {
|
|
315
|
+
return new Proxy(target, {
|
|
316
|
+
get(target2, key) {
|
|
317
|
+
var _a2, _b2;
|
|
318
|
+
const component = { $vue: target2 };
|
|
319
|
+
do {
|
|
320
|
+
if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
|
|
321
|
+
return component.$vue[key];
|
|
322
|
+
} else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
|
|
323
|
+
return component.$vue.self[key];
|
|
324
|
+
} else {
|
|
325
|
+
component.$vue = component.$vue.parent;
|
|
326
|
+
}
|
|
327
|
+
} while (component.$vue);
|
|
328
|
+
}
|
|
329
|
+
});
|
|
330
|
+
};
|
|
331
|
+
try {
|
|
332
|
+
return proxy($vue.access());
|
|
333
|
+
} catch (e) {
|
|
334
|
+
try {
|
|
335
|
+
return proxy($vue.value.access());
|
|
336
|
+
} catch (e2) {
|
|
337
|
+
return proxy((_b = (_a = $vue.value) != null ? _a : $vue) != null ? _b : {});
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
}
|
|
330
341
|
function getSubscription() {
|
|
331
342
|
const subscriptions = [];
|
|
332
343
|
const subscription = Subscriptions.get();
|
|
@@ -354,36 +365,12 @@ function getSubscription() {
|
|
|
354
365
|
subscription
|
|
355
366
|
};
|
|
356
367
|
}
|
|
357
|
-
function access($vue = {}) {
|
|
358
|
-
var _a, _b, _c;
|
|
359
|
-
const target = typeof ($vue == null ? void 0 : $vue.access) === "function" ? $vue.access() : (_c = (_b = ($vue == null ? void 0 : $vue.value) && typeof ((_a = $vue.value) == null ? void 0 : _a.access) === "function" ? $vue.value.access() : $vue == null ? void 0 : $vue.value) != null ? _b : $vue) != null ? _c : {};
|
|
360
|
-
return new Proxy(target, {
|
|
361
|
-
get(target2, key) {
|
|
362
|
-
var _a2, _b2;
|
|
363
|
-
const component = { $vue: target2 };
|
|
364
|
-
do {
|
|
365
|
-
if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
|
|
366
|
-
return component.$vue[key];
|
|
367
|
-
} else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
|
|
368
|
-
return component.$vue.self[key];
|
|
369
|
-
} else {
|
|
370
|
-
component.$vue = component.$vue.parent;
|
|
371
|
-
}
|
|
372
|
-
} while (component.$vue);
|
|
373
|
-
}
|
|
374
|
-
});
|
|
375
|
-
}
|
|
376
368
|
export {
|
|
377
369
|
access,
|
|
378
370
|
src_default as default,
|
|
379
|
-
expose,
|
|
380
371
|
getDate,
|
|
381
372
|
getProps,
|
|
382
|
-
getRef,
|
|
383
|
-
getRoot,
|
|
384
373
|
getSubscription,
|
|
385
374
|
safeRequest,
|
|
386
|
-
setup
|
|
387
|
-
ucf,
|
|
388
|
-
ucfat
|
|
375
|
+
setup
|
|
389
376
|
};
|
package/package.json
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@razaman2/reactive-view",
|
|
3
|
-
"version": "0.0.
|
|
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
|
-
},
|
|
13
|
-
"keywords": [
|
|
14
|
-
"vue",
|
|
15
|
-
"vue-helper",
|
|
16
|
-
"reactive-view",
|
|
17
|
-
"vue-class-component"
|
|
18
|
-
],
|
|
19
|
-
"author": "razaman2",
|
|
20
|
-
"license": "MIT",
|
|
21
|
-
"dependencies": {
|
|
22
|
-
"@razaman2/
|
|
23
|
-
"@razaman2/
|
|
24
|
-
"@razaman2/object-manager": "^3.3.
|
|
25
|
-
"date-fns": "^
|
|
26
|
-
"date-fns-tz": "^
|
|
27
|
-
"uuid": "^9.0.1",
|
|
28
|
-
"vue": "^3.
|
|
29
|
-
},
|
|
30
|
-
"devDependencies": {
|
|
31
|
-
"@types/uuid": "^9.0.
|
|
32
|
-
"tsup": "^8.0.
|
|
33
|
-
"typescript": "^5.
|
|
34
|
-
"vitest": "^1.
|
|
35
|
-
},
|
|
36
|
-
"publishConfig": {
|
|
37
|
-
"access": "public"
|
|
38
|
-
},
|
|
39
|
-
"files": [
|
|
40
|
-
"dist"
|
|
41
|
-
],
|
|
42
|
-
"repository": {
|
|
43
|
-
"type": "git",
|
|
44
|
-
"url": "https://github.com/razaman2/reactive-view.git"
|
|
45
|
-
}
|
|
46
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@razaman2/reactive-view",
|
|
3
|
+
"version": "0.0.9",
|
|
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
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"vue",
|
|
15
|
+
"vue-helper",
|
|
16
|
+
"reactive-view",
|
|
17
|
+
"vue-class-component"
|
|
18
|
+
],
|
|
19
|
+
"author": "razaman2",
|
|
20
|
+
"license": "MIT",
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"@razaman2/collection-proxy": "^0.0.11",
|
|
23
|
+
"@razaman2/data-manager": "^3.2.8",
|
|
24
|
+
"@razaman2/object-manager": "^3.3.9",
|
|
25
|
+
"date-fns": "^3.6.0",
|
|
26
|
+
"date-fns-tz": "^3.1.3",
|
|
27
|
+
"uuid": "^9.0.1",
|
|
28
|
+
"vue": "^3.4.27"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@types/uuid": "^9.0.8",
|
|
32
|
+
"tsup": "^8.0.2",
|
|
33
|
+
"typescript": "^5.4.5",
|
|
34
|
+
"vitest": "^1.6.0"
|
|
35
|
+
},
|
|
36
|
+
"publishConfig": {
|
|
37
|
+
"access": "public"
|
|
38
|
+
},
|
|
39
|
+
"files": [
|
|
40
|
+
"dist"
|
|
41
|
+
],
|
|
42
|
+
"repository": {
|
|
43
|
+
"type": "git",
|
|
44
|
+
"url": "https://github.com/razaman2/reactive-view.git"
|
|
45
|
+
}
|
|
46
|
+
}
|