@razaman2/reactive-view 0.0.20 → 0.0.21
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 +29 -30
- package/dist/index.d.ts +29 -30
- package/dist/index.js +134 -168
- package/dist/index.mjs +136 -170
- package/package.json +4 -3
package/dist/index.d.mts
CHANGED
|
@@ -23,13 +23,11 @@ declare class Subscription {
|
|
|
23
23
|
get(name: string): SubscriptionItem;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
type
|
|
27
|
-
parent
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
access?: () => Accessible;
|
|
32
|
-
value?: Accessible;
|
|
26
|
+
type ComponentExtension = {
|
|
27
|
+
parent?: ComponentExtension;
|
|
28
|
+
self?: Record<string | symbol, any>;
|
|
29
|
+
access?: () => ComponentExtension;
|
|
30
|
+
value?: ComponentExtension;
|
|
33
31
|
};
|
|
34
32
|
type PropOptions = {
|
|
35
33
|
exclude: string | Array<string>;
|
|
@@ -38,43 +36,44 @@ type PropOptions = {
|
|
|
38
36
|
type PropExclusions = Array<string> | string;
|
|
39
37
|
|
|
40
38
|
declare const setup: {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
type: FunctionConstructor;
|
|
44
|
-
default: (param1?: {}, param2?: {}) => {};
|
|
45
|
-
};
|
|
39
|
+
type: FunctionConstructor;
|
|
40
|
+
default: (parent?: {}) => {};
|
|
46
41
|
};
|
|
47
42
|
declare const _default: {
|
|
48
43
|
props: {
|
|
44
|
+
setup: {
|
|
45
|
+
type: FunctionConstructor;
|
|
46
|
+
default: (parent?: {}) => {};
|
|
47
|
+
};
|
|
48
|
+
ReactiveView: {
|
|
49
|
+
default: boolean;
|
|
50
|
+
};
|
|
51
|
+
instance: {
|
|
52
|
+
default: vue.Ref<any, any>;
|
|
53
|
+
};
|
|
49
54
|
notifications: ObjectConstructor;
|
|
50
55
|
subscriptions: ObjectConstructor;
|
|
56
|
+
beforeSetData: FunctionConstructor;
|
|
57
|
+
data: {
|
|
58
|
+
default: {};
|
|
59
|
+
};
|
|
51
60
|
defaultData: {};
|
|
52
|
-
model: {};
|
|
53
|
-
state: {};
|
|
54
|
-
await: {};
|
|
55
|
-
defer: {};
|
|
56
61
|
getDefaultData: {
|
|
57
62
|
type: FunctionConstructor;
|
|
58
|
-
default: (data
|
|
63
|
+
default: (data: any) => any;
|
|
59
64
|
};
|
|
65
|
+
model: {};
|
|
66
|
+
defer: {};
|
|
60
67
|
logging: {
|
|
61
|
-
validator: (logging:
|
|
68
|
+
validator: (logging: boolean) => boolean;
|
|
62
69
|
};
|
|
70
|
+
loading: {};
|
|
63
71
|
modelName: {
|
|
64
72
|
type: StringConstructor;
|
|
65
73
|
default: string;
|
|
66
74
|
};
|
|
67
|
-
sync: {
|
|
68
|
-
type: BooleanConstructor;
|
|
69
|
-
default: boolean;
|
|
70
|
-
};
|
|
71
|
-
ReactiveView: boolean;
|
|
72
|
-
setup: {
|
|
73
|
-
type: FunctionConstructor;
|
|
74
|
-
default: (param1?: {}, param2?: {}) => {};
|
|
75
|
-
};
|
|
76
75
|
};
|
|
77
|
-
setup(props: Record<string, any>, context: SetupContext): (
|
|
76
|
+
setup(props: Record<string, any>, context: SetupContext): (vue: ComponentPublicInstance) => any;
|
|
78
77
|
};
|
|
79
78
|
|
|
80
79
|
declare function safeRequest(request: {
|
|
@@ -103,7 +102,7 @@ declare function getDate(timestamp: {
|
|
|
103
102
|
format?: string;
|
|
104
103
|
timezone?: string;
|
|
105
104
|
}): string;
|
|
106
|
-
declare function access
|
|
105
|
+
declare function access(view?: ComponentExtension | UnwrapRef<any> | (() => ComponentExtension), alternative?: any): any;
|
|
107
106
|
declare function getSubscription(): {
|
|
108
107
|
addSubscription(name: string, handler?: () => boolean, data?: any): void;
|
|
109
108
|
replaceSubscription(name: string, handler?: () => boolean, data?: any): void;
|
|
@@ -113,6 +112,6 @@ declare function getSubscription(): {
|
|
|
113
112
|
subscriptions: any[];
|
|
114
113
|
subscription: Subscription;
|
|
115
114
|
};
|
|
116
|
-
declare function StyleParser(styles
|
|
115
|
+
declare function StyleParser(styles?: Array<string> | Record<string, any> | string): any;
|
|
117
116
|
|
|
118
117
|
export { StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };
|
package/dist/index.d.ts
CHANGED
|
@@ -23,13 +23,11 @@ declare class Subscription {
|
|
|
23
23
|
get(name: string): SubscriptionItem;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
type
|
|
27
|
-
parent
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
access?: () => Accessible;
|
|
32
|
-
value?: Accessible;
|
|
26
|
+
type ComponentExtension = {
|
|
27
|
+
parent?: ComponentExtension;
|
|
28
|
+
self?: Record<string | symbol, any>;
|
|
29
|
+
access?: () => ComponentExtension;
|
|
30
|
+
value?: ComponentExtension;
|
|
33
31
|
};
|
|
34
32
|
type PropOptions = {
|
|
35
33
|
exclude: string | Array<string>;
|
|
@@ -38,43 +36,44 @@ type PropOptions = {
|
|
|
38
36
|
type PropExclusions = Array<string> | string;
|
|
39
37
|
|
|
40
38
|
declare const setup: {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
type: FunctionConstructor;
|
|
44
|
-
default: (param1?: {}, param2?: {}) => {};
|
|
45
|
-
};
|
|
39
|
+
type: FunctionConstructor;
|
|
40
|
+
default: (parent?: {}) => {};
|
|
46
41
|
};
|
|
47
42
|
declare const _default: {
|
|
48
43
|
props: {
|
|
44
|
+
setup: {
|
|
45
|
+
type: FunctionConstructor;
|
|
46
|
+
default: (parent?: {}) => {};
|
|
47
|
+
};
|
|
48
|
+
ReactiveView: {
|
|
49
|
+
default: boolean;
|
|
50
|
+
};
|
|
51
|
+
instance: {
|
|
52
|
+
default: vue.Ref<any, any>;
|
|
53
|
+
};
|
|
49
54
|
notifications: ObjectConstructor;
|
|
50
55
|
subscriptions: ObjectConstructor;
|
|
56
|
+
beforeSetData: FunctionConstructor;
|
|
57
|
+
data: {
|
|
58
|
+
default: {};
|
|
59
|
+
};
|
|
51
60
|
defaultData: {};
|
|
52
|
-
model: {};
|
|
53
|
-
state: {};
|
|
54
|
-
await: {};
|
|
55
|
-
defer: {};
|
|
56
61
|
getDefaultData: {
|
|
57
62
|
type: FunctionConstructor;
|
|
58
|
-
default: (data
|
|
63
|
+
default: (data: any) => any;
|
|
59
64
|
};
|
|
65
|
+
model: {};
|
|
66
|
+
defer: {};
|
|
60
67
|
logging: {
|
|
61
|
-
validator: (logging:
|
|
68
|
+
validator: (logging: boolean) => boolean;
|
|
62
69
|
};
|
|
70
|
+
loading: {};
|
|
63
71
|
modelName: {
|
|
64
72
|
type: StringConstructor;
|
|
65
73
|
default: string;
|
|
66
74
|
};
|
|
67
|
-
sync: {
|
|
68
|
-
type: BooleanConstructor;
|
|
69
|
-
default: boolean;
|
|
70
|
-
};
|
|
71
|
-
ReactiveView: boolean;
|
|
72
|
-
setup: {
|
|
73
|
-
type: FunctionConstructor;
|
|
74
|
-
default: (param1?: {}, param2?: {}) => {};
|
|
75
|
-
};
|
|
76
75
|
};
|
|
77
|
-
setup(props: Record<string, any>, context: SetupContext): (
|
|
76
|
+
setup(props: Record<string, any>, context: SetupContext): (vue: ComponentPublicInstance) => any;
|
|
78
77
|
};
|
|
79
78
|
|
|
80
79
|
declare function safeRequest(request: {
|
|
@@ -103,7 +102,7 @@ declare function getDate(timestamp: {
|
|
|
103
102
|
format?: string;
|
|
104
103
|
timezone?: string;
|
|
105
104
|
}): string;
|
|
106
|
-
declare function access
|
|
105
|
+
declare function access(view?: ComponentExtension | UnwrapRef<any> | (() => ComponentExtension), alternative?: any): any;
|
|
107
106
|
declare function getSubscription(): {
|
|
108
107
|
addSubscription(name: string, handler?: () => boolean, data?: any): void;
|
|
109
108
|
replaceSubscription(name: string, handler?: () => boolean, data?: any): void;
|
|
@@ -113,6 +112,6 @@ declare function getSubscription(): {
|
|
|
113
112
|
subscriptions: any[];
|
|
114
113
|
subscription: Subscription;
|
|
115
114
|
};
|
|
116
|
-
declare function StyleParser(styles
|
|
115
|
+
declare function StyleParser(styles?: Array<string> | Record<string, any> | string): any;
|
|
117
116
|
|
|
118
117
|
export { StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };
|
package/dist/index.js
CHANGED
|
@@ -19,18 +19,6 @@ var __spreadValues = (a, b) => {
|
|
|
19
19
|
}
|
|
20
20
|
return a;
|
|
21
21
|
};
|
|
22
|
-
var __objRest = (source, exclude) => {
|
|
23
|
-
var target = {};
|
|
24
|
-
for (var prop in source)
|
|
25
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
26
|
-
target[prop] = source[prop];
|
|
27
|
-
if (source != null && __getOwnPropSymbols)
|
|
28
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
29
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
30
|
-
target[prop] = source[prop];
|
|
31
|
-
}
|
|
32
|
-
return target;
|
|
33
|
-
};
|
|
34
22
|
var __export = (target, all) => {
|
|
35
23
|
for (var name2 in all)
|
|
36
24
|
__defProp(target, name2, { get: all[name2], enumerable: true });
|
|
@@ -167,167 +155,149 @@ var import_vue = require("vue");
|
|
|
167
155
|
|
|
168
156
|
// package.json
|
|
169
157
|
var name = "@razaman2/reactive-view";
|
|
170
|
-
var version = "0.0.
|
|
158
|
+
var version = "0.0.21";
|
|
171
159
|
|
|
172
160
|
// src/ReactiveView.ts
|
|
173
|
-
var props = {
|
|
174
|
-
notifications: Object,
|
|
175
|
-
subscriptions: Object,
|
|
176
|
-
defaultData: {},
|
|
177
|
-
model: {},
|
|
178
|
-
state: {},
|
|
179
|
-
await: {},
|
|
180
|
-
defer: {},
|
|
181
|
-
getDefaultData: {
|
|
182
|
-
type: Function,
|
|
183
|
-
default: (data = {}) => data
|
|
184
|
-
},
|
|
185
|
-
logging: {
|
|
186
|
-
validator: (logging) => {
|
|
187
|
-
return logging.constructor.name === "Boolean";
|
|
188
|
-
}
|
|
189
|
-
},
|
|
190
|
-
modelName: {
|
|
191
|
-
type: String,
|
|
192
|
-
default: "ReactiveView"
|
|
193
|
-
},
|
|
194
|
-
sync: {
|
|
195
|
-
type: Boolean,
|
|
196
|
-
default: true
|
|
197
|
-
}
|
|
198
|
-
};
|
|
199
161
|
var setup = {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
type: Function,
|
|
203
|
-
default: (param1 = {}, param2 = {}) => {
|
|
204
|
-
return Object.assign(param1, param2);
|
|
205
|
-
}
|
|
206
|
-
}
|
|
162
|
+
type: Function,
|
|
163
|
+
default: (parent = {}) => parent
|
|
207
164
|
};
|
|
208
165
|
var ReactiveView_default = {
|
|
209
|
-
props:
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
166
|
+
props: {
|
|
167
|
+
setup,
|
|
168
|
+
ReactiveView: {
|
|
169
|
+
default: true
|
|
170
|
+
},
|
|
171
|
+
instance: {
|
|
172
|
+
default: (0, import_vue.ref)()
|
|
173
|
+
},
|
|
174
|
+
notifications: Object,
|
|
175
|
+
subscriptions: Object,
|
|
176
|
+
beforeSetData: Function,
|
|
177
|
+
data: {
|
|
178
|
+
default: {}
|
|
179
|
+
},
|
|
180
|
+
defaultData: {},
|
|
181
|
+
getDefaultData: {
|
|
182
|
+
type: Function,
|
|
183
|
+
default: (data) => data
|
|
184
|
+
},
|
|
185
|
+
model: {},
|
|
186
|
+
defer: {},
|
|
187
|
+
logging: {
|
|
188
|
+
validator: (logging) => {
|
|
189
|
+
return ["Boolean"].includes(logging.constructor.name);
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
loading: {},
|
|
193
|
+
modelName: {
|
|
194
|
+
type: String,
|
|
195
|
+
default: "ReactiveView"
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
setup(props, context) {
|
|
199
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
200
|
+
const template = (vue, component2) => {
|
|
213
201
|
var _a2, _b2, _c2;
|
|
214
|
-
const
|
|
202
|
+
const params = { vue, component: component2, props, context };
|
|
203
|
+
const vnode = context.slots.default ? (0, import_vue.createVNode)(
|
|
215
204
|
"div",
|
|
216
205
|
context.attrs,
|
|
217
|
-
context.slots.default(
|
|
218
|
-
) : (0, import_vue.
|
|
206
|
+
context.slots.default(params)
|
|
207
|
+
) : (0, import_vue.createVNode)("div", __spreadValues({
|
|
219
208
|
style: {
|
|
220
209
|
color: "red",
|
|
221
210
|
textAlign: "center"
|
|
222
211
|
}
|
|
223
|
-
}, context.attrs), `${
|
|
224
|
-
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2,
|
|
212
|
+
}, context.attrs), `${props.modelName}: ${name}@${version}`);
|
|
213
|
+
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, params)) != null ? _c2 : vnode;
|
|
225
214
|
};
|
|
226
215
|
const isValid = (0, import_vue.ref)(false);
|
|
227
|
-
const
|
|
228
|
-
const
|
|
229
|
-
const
|
|
230
|
-
const
|
|
231
|
-
|
|
216
|
+
const ready = (0, import_vue.ref)(false);
|
|
217
|
+
const instance = (0, import_vue.getCurrentInstance)();
|
|
218
|
+
const deferred = (0, import_vue.ref)(typeof props.defer === "function" ? props.defer() : props.defer);
|
|
219
|
+
const state = typeof props.data === "function" ? props.data() : props.data;
|
|
220
|
+
const isAsyncData = state instanceof Promise;
|
|
221
|
+
if (isAsyncData && !((_a = instance.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
|
|
222
|
+
throw new Error("[ReactiveView]: defaultData is required for async data.");
|
|
223
|
+
}
|
|
224
|
+
if (props.loading && !props.defer) {
|
|
225
|
+
console.warn("[ReactiveView]: loading prop should be used with defer prop.");
|
|
226
|
+
}
|
|
227
|
+
const defaultData = props.getDefaultData(
|
|
228
|
+
((_b = instance.vnode.props) == null ? void 0 : _b.hasOwnProperty("defaultData")) ? instance.vnode.props.defaultData : typeof ((_c = instance.vnode.props) == null ? void 0 : _c.data) === "object" ? Array.isArray(instance.vnode.props.data) ? [] : {} : ((_d = instance.vnode.props) == null ? void 0 : _d.hasOwnProperty("data")) ? (_e = instance.vnode.props) == null ? void 0 : _e.data : {}
|
|
232
229
|
);
|
|
233
|
-
const
|
|
234
|
-
const data =
|
|
235
|
-
const state = (0, import_vue.reactive)(import_data_manager.default.transform(props2.await ? type : data));
|
|
230
|
+
const datatype = Array.isArray(defaultData) ? [] : {};
|
|
231
|
+
const data = isAsyncData ? datatype : ((_f = instance.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? state : datatype;
|
|
236
232
|
const config = {
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
233
|
+
name: props.modelName,
|
|
234
|
+
defaultData: import_object_manager.default.on(defaultData).clone(),
|
|
235
|
+
data: (0, import_vue.reactive)(import_object_manager.default.on(data).clone()),
|
|
236
|
+
notifications: props.notifications,
|
|
237
|
+
subscriptions: props.subscriptions,
|
|
238
|
+
logging: props.logging
|
|
243
239
|
};
|
|
244
|
-
const
|
|
245
|
-
get(target,
|
|
246
|
-
if (
|
|
240
|
+
const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new import_data_manager.default(config), {
|
|
241
|
+
get(target, key, receiver) {
|
|
242
|
+
if (key === "setData" || key === "replaceData") {
|
|
247
243
|
return (...params) => {
|
|
248
|
-
var _a2
|
|
249
|
-
const
|
|
250
|
-
const beforeSetData = (_b2 = (_a2 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a2.beforeSetData) != null ? _b2 : access(component).beforeSetData;
|
|
244
|
+
var _a2;
|
|
245
|
+
const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
|
|
251
246
|
if (typeof beforeSetData === "function") {
|
|
252
|
-
beforeSetData(import_object_manager.default.on(
|
|
247
|
+
beforeSetData(import_object_manager.default.on(datatype).set(...params).get(), target);
|
|
253
248
|
} else {
|
|
254
|
-
target[
|
|
249
|
+
target[key](...params);
|
|
255
250
|
}
|
|
256
251
|
return target;
|
|
257
252
|
};
|
|
258
253
|
} else {
|
|
259
|
-
return Reflect.get(target,
|
|
254
|
+
return Reflect.get(target, key, receiver);
|
|
260
255
|
}
|
|
261
256
|
}
|
|
262
257
|
});
|
|
263
|
-
|
|
264
|
-
parent: { self: component.value },
|
|
265
|
-
self: { template, isValid, getState }
|
|
266
|
-
};
|
|
267
|
-
const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
|
|
268
|
-
if (typeof context.attrs.debug === "function") {
|
|
269
|
-
context.attrs.debug({ isValid, component, type, data, state, config, options, props: props2, context, setup: __spreadValues({ parent, self }, rest), defaultData, getState });
|
|
270
|
-
}
|
|
271
|
-
if (props2.await instanceof Promise) {
|
|
258
|
+
if (isAsyncData) {
|
|
272
259
|
(0, import_vue.nextTick)(async () => {
|
|
273
|
-
|
|
260
|
+
model.replaceData(await state);
|
|
274
261
|
});
|
|
275
262
|
}
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
263
|
+
(0, import_vue.nextTick)(async () => {
|
|
264
|
+
var _a2;
|
|
265
|
+
ready.value = (_a2 = await deferred.value) != null ? _a2 : true;
|
|
266
|
+
});
|
|
267
|
+
if (context.attrs["onUpdate:model"]) {
|
|
268
|
+
const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
|
|
269
|
+
callback: context.attrs["onUpdate:model"]
|
|
270
|
+
} : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
|
|
271
|
+
(0, import_vue.watch)(() => model.getData(), (after, before) => {
|
|
272
|
+
const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
|
|
273
|
+
config2.callback(diff, model);
|
|
274
|
+
}, config2.options);
|
|
283
275
|
}
|
|
284
|
-
if (context.attrs["onUpdate:
|
|
285
|
-
const config2 = typeof context.attrs["onUpdate:
|
|
286
|
-
callback: context.attrs["onUpdate:
|
|
287
|
-
} : (
|
|
288
|
-
(0, import_vue.
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
|
|
297
|
-
}
|
|
298
|
-
}, config2.options);
|
|
299
|
-
});
|
|
276
|
+
if ((_h = context.attrs["onUpdate:data"]) != null ? _h : true) {
|
|
277
|
+
const config2 = typeof context.attrs["onUpdate:data"] === "function" ? {
|
|
278
|
+
callback: context.attrs["onUpdate:data"]
|
|
279
|
+
} : (_i = context.attrs["onUpdate:data"]) != null ? _i : {};
|
|
280
|
+
(0, import_vue.watch)(async () => typeof props.data === "function" ? await props.data() : await props.data, async (after, before) => {
|
|
281
|
+
const diff = { before: import_object_manager.default.on(await before).get(), after: import_object_manager.default.on(await after).get() };
|
|
282
|
+
if (typeof config2.callback === "function") {
|
|
283
|
+
config2.callback(diff, model);
|
|
284
|
+
} else {
|
|
285
|
+
model.replaceData(await after);
|
|
286
|
+
}
|
|
287
|
+
}, config2.options);
|
|
300
288
|
}
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
} : (_h = context.attrs["onUpdate:propsState"]) != null ? _h : {};
|
|
305
|
-
(0, import_vue.onMounted)(() => {
|
|
306
|
-
(0, import_vue.watch)(() => import_object_manager.default.on(props2.state).clone(), (after, before) => {
|
|
307
|
-
const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
|
|
308
|
-
if (typeof config2.callback === "function") {
|
|
309
|
-
config2.callback(diff, getState);
|
|
310
|
-
} else {
|
|
311
|
-
getState.replaceData(after);
|
|
312
|
-
}
|
|
313
|
-
sync.value = true;
|
|
314
|
-
}, config2.options);
|
|
315
|
-
});
|
|
289
|
+
const component = (0, import_vue.ref)({ parent: { self: instance.proxy }, self: { template, model, isValid } });
|
|
290
|
+
if (typeof props.setup === "function") {
|
|
291
|
+
component.value = props.setup(component.value, component);
|
|
316
292
|
}
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
}, rest));
|
|
326
|
-
setup2.options = setup2.options.parent;
|
|
327
|
-
setup2.$vue = setup2.$vue.$parent;
|
|
328
|
-
}
|
|
329
|
-
if (rendered.value) {
|
|
330
|
-
return access($vue).template($vue, { parent, self });
|
|
293
|
+
if (props.instance) {
|
|
294
|
+
props.instance.value = component.value;
|
|
295
|
+
}
|
|
296
|
+
return (vue) => {
|
|
297
|
+
if (ready.value) {
|
|
298
|
+
return access(component).template(vue, component);
|
|
299
|
+
} else {
|
|
300
|
+
return props.loading;
|
|
331
301
|
}
|
|
332
302
|
};
|
|
333
303
|
}
|
|
@@ -363,19 +333,19 @@ function safeRequest(request) {
|
|
|
363
333
|
}
|
|
364
334
|
});
|
|
365
335
|
}
|
|
366
|
-
function getProps(
|
|
336
|
+
function getProps(props, param2) {
|
|
367
337
|
var _a;
|
|
368
338
|
const exclude = Array.isArray(param2) || typeof param2 === "string" ? param2 : param2.exclude;
|
|
369
339
|
const exclusions = (Array.isArray(exclude) ? exclude : [exclude]).join("|");
|
|
370
340
|
const include = (_a = param2.include) != null ? _a : {};
|
|
371
|
-
return Object.entries(include).reduce((
|
|
372
|
-
|
|
373
|
-
return
|
|
374
|
-
}, Object.entries(
|
|
341
|
+
return Object.entries(include).reduce((props2, [key, val]) => {
|
|
342
|
+
props2[key] = val;
|
|
343
|
+
return props2;
|
|
344
|
+
}, Object.entries(props).reduce((props2, [key, val]) => {
|
|
375
345
|
if (!RegExp(`(^|\\|)${key}($|\\|)`, "i").test(exclusions)) {
|
|
376
|
-
|
|
346
|
+
props2[key] = val;
|
|
377
347
|
}
|
|
378
|
-
return
|
|
348
|
+
return props2;
|
|
379
349
|
}, {}));
|
|
380
350
|
}
|
|
381
351
|
function getReactiveViewComponent(component, options = {}) {
|
|
@@ -386,11 +356,11 @@ function getReactiveViewComponent(component, options = {}) {
|
|
|
386
356
|
return false;
|
|
387
357
|
}
|
|
388
358
|
};
|
|
389
|
-
const
|
|
359
|
+
const props = getProps(options, "setup");
|
|
390
360
|
const slots = typeof component === "function" ? component : () => {
|
|
391
|
-
return (component.type || component).setup ? (0, import_vue2.createVNode)(component, component.setup ? {} :
|
|
361
|
+
return (component.type || component).setup ? (0, import_vue2.createVNode)(component, component.setup ? {} : props) : component;
|
|
392
362
|
};
|
|
393
|
-
return model(component) ? (0, import_vue2.createVNode)(component,
|
|
363
|
+
return model(component) ? (0, import_vue2.createVNode)(component, props) : (0, import_vue2.createVNode)(ReactiveView_default, props, slots);
|
|
394
364
|
}
|
|
395
365
|
function getDate(param1, param2) {
|
|
396
366
|
var _a, _b;
|
|
@@ -406,34 +376,30 @@ function getDate(param1, param2) {
|
|
|
406
376
|
};
|
|
407
377
|
return (0, import_date_fns_tz.formatInTimeZone)(datetime(), options.timezone, options.format);
|
|
408
378
|
}
|
|
409
|
-
function access(
|
|
410
|
-
|
|
411
|
-
const proxy = (target) => {
|
|
379
|
+
function access(view = {}, alternative) {
|
|
380
|
+
const resolve = (target) => {
|
|
412
381
|
return new Proxy(target, {
|
|
413
382
|
get(target2, key) {
|
|
414
|
-
const
|
|
383
|
+
const component = { tree: target2 };
|
|
415
384
|
do {
|
|
416
|
-
if (key in
|
|
417
|
-
return
|
|
418
|
-
} else if ("self" in
|
|
419
|
-
return
|
|
385
|
+
if (key in component.tree) {
|
|
386
|
+
return component.tree[key];
|
|
387
|
+
} else if ("self" in component.tree && key in component.tree.self) {
|
|
388
|
+
return component.tree.self[key];
|
|
420
389
|
} else {
|
|
421
|
-
|
|
390
|
+
component.tree = "parent" in component.tree && component.tree.parent;
|
|
422
391
|
}
|
|
423
|
-
} while (
|
|
392
|
+
} while (component.tree);
|
|
424
393
|
return alternative;
|
|
425
394
|
}
|
|
426
395
|
});
|
|
427
396
|
};
|
|
428
|
-
const component = typeof $vue === "function" ? $vue() : $vue;
|
|
429
397
|
try {
|
|
430
|
-
|
|
398
|
+
const component = typeof view === "function" ? view() : view;
|
|
399
|
+
const ref2 = (0, import_vue2.isRef)(component) ? component.value : component;
|
|
400
|
+
return resolve(ref2.ReactiveView ? access(ref2.instance) : ref2);
|
|
431
401
|
} catch (e) {
|
|
432
|
-
|
|
433
|
-
return proxy(component.value.access());
|
|
434
|
-
} catch (e2) {
|
|
435
|
-
return proxy(((_b = (_a = component.value) != null ? _a : component) != null ? _b : {}) || {});
|
|
436
|
-
}
|
|
402
|
+
return resolve(view);
|
|
437
403
|
}
|
|
438
404
|
}
|
|
439
405
|
function getSubscription() {
|
|
@@ -463,7 +429,7 @@ function getSubscription() {
|
|
|
463
429
|
subscription
|
|
464
430
|
};
|
|
465
431
|
}
|
|
466
|
-
function StyleParser(styles) {
|
|
432
|
+
function StyleParser(styles = {}) {
|
|
467
433
|
var _a;
|
|
468
434
|
const object = (items) => items.reduce((object2, item) => {
|
|
469
435
|
return Object.assign(object2, { [item]: true });
|
package/dist/index.mjs
CHANGED
|
@@ -14,18 +14,6 @@ var __spreadValues = (a, b) => {
|
|
|
14
14
|
}
|
|
15
15
|
return a;
|
|
16
16
|
};
|
|
17
|
-
var __objRest = (source, exclude) => {
|
|
18
|
-
var target = {};
|
|
19
|
-
for (var prop in source)
|
|
20
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
21
|
-
target[prop] = source[prop];
|
|
22
|
-
if (source != null && __getOwnPropSymbols)
|
|
23
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
24
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
}
|
|
27
|
-
return target;
|
|
28
|
-
};
|
|
29
17
|
|
|
30
18
|
// src/index.ts
|
|
31
19
|
import { formatInTimeZone } from "date-fns-tz";
|
|
@@ -119,176 +107,158 @@ _Subscriptions.subscriptions = _Subscriptions.create();
|
|
|
119
107
|
var Subscriptions = _Subscriptions;
|
|
120
108
|
|
|
121
109
|
// src/index.ts
|
|
122
|
-
import { createVNode } from "vue";
|
|
110
|
+
import { createVNode as createVNode2, isRef } from "vue";
|
|
123
111
|
|
|
124
112
|
// src/ReactiveView.ts
|
|
125
113
|
import ObjectManager from "@razaman2/object-manager";
|
|
126
114
|
import DataManager from "@razaman2/data-manager";
|
|
127
|
-
import {
|
|
115
|
+
import { ref, reactive, watch, nextTick, createVNode, getCurrentInstance } from "vue";
|
|
128
116
|
|
|
129
117
|
// package.json
|
|
130
118
|
var name = "@razaman2/reactive-view";
|
|
131
|
-
var version = "0.0.
|
|
119
|
+
var version = "0.0.21";
|
|
132
120
|
|
|
133
121
|
// src/ReactiveView.ts
|
|
134
|
-
var props = {
|
|
135
|
-
notifications: Object,
|
|
136
|
-
subscriptions: Object,
|
|
137
|
-
defaultData: {},
|
|
138
|
-
model: {},
|
|
139
|
-
state: {},
|
|
140
|
-
await: {},
|
|
141
|
-
defer: {},
|
|
142
|
-
getDefaultData: {
|
|
143
|
-
type: Function,
|
|
144
|
-
default: (data = {}) => data
|
|
145
|
-
},
|
|
146
|
-
logging: {
|
|
147
|
-
validator: (logging) => {
|
|
148
|
-
return logging.constructor.name === "Boolean";
|
|
149
|
-
}
|
|
150
|
-
},
|
|
151
|
-
modelName: {
|
|
152
|
-
type: String,
|
|
153
|
-
default: "ReactiveView"
|
|
154
|
-
},
|
|
155
|
-
sync: {
|
|
156
|
-
type: Boolean,
|
|
157
|
-
default: true
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
122
|
var setup = {
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
type: Function,
|
|
164
|
-
default: (param1 = {}, param2 = {}) => {
|
|
165
|
-
return Object.assign(param1, param2);
|
|
166
|
-
}
|
|
167
|
-
}
|
|
123
|
+
type: Function,
|
|
124
|
+
default: (parent = {}) => parent
|
|
168
125
|
};
|
|
169
126
|
var ReactiveView_default = {
|
|
170
|
-
props:
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
127
|
+
props: {
|
|
128
|
+
setup,
|
|
129
|
+
ReactiveView: {
|
|
130
|
+
default: true
|
|
131
|
+
},
|
|
132
|
+
instance: {
|
|
133
|
+
default: ref()
|
|
134
|
+
},
|
|
135
|
+
notifications: Object,
|
|
136
|
+
subscriptions: Object,
|
|
137
|
+
beforeSetData: Function,
|
|
138
|
+
data: {
|
|
139
|
+
default: {}
|
|
140
|
+
},
|
|
141
|
+
defaultData: {},
|
|
142
|
+
getDefaultData: {
|
|
143
|
+
type: Function,
|
|
144
|
+
default: (data) => data
|
|
145
|
+
},
|
|
146
|
+
model: {},
|
|
147
|
+
defer: {},
|
|
148
|
+
logging: {
|
|
149
|
+
validator: (logging) => {
|
|
150
|
+
return ["Boolean"].includes(logging.constructor.name);
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
loading: {},
|
|
154
|
+
modelName: {
|
|
155
|
+
type: String,
|
|
156
|
+
default: "ReactiveView"
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
setup(props, context) {
|
|
160
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
161
|
+
const template = (vue, component2) => {
|
|
174
162
|
var _a2, _b2, _c2;
|
|
175
|
-
const
|
|
163
|
+
const params = { vue, component: component2, props, context };
|
|
164
|
+
const vnode = context.slots.default ? createVNode(
|
|
176
165
|
"div",
|
|
177
166
|
context.attrs,
|
|
178
|
-
context.slots.default(
|
|
179
|
-
) :
|
|
167
|
+
context.slots.default(params)
|
|
168
|
+
) : createVNode("div", __spreadValues({
|
|
180
169
|
style: {
|
|
181
170
|
color: "red",
|
|
182
171
|
textAlign: "center"
|
|
183
172
|
}
|
|
184
|
-
}, context.attrs), `${
|
|
185
|
-
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2,
|
|
173
|
+
}, context.attrs), `${props.modelName}: ${name}@${version}`);
|
|
174
|
+
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, params)) != null ? _c2 : vnode;
|
|
186
175
|
};
|
|
187
176
|
const isValid = ref(false);
|
|
188
|
-
const
|
|
189
|
-
const
|
|
190
|
-
const
|
|
191
|
-
const
|
|
192
|
-
|
|
177
|
+
const ready = ref(false);
|
|
178
|
+
const instance = getCurrentInstance();
|
|
179
|
+
const deferred = ref(typeof props.defer === "function" ? props.defer() : props.defer);
|
|
180
|
+
const state = typeof props.data === "function" ? props.data() : props.data;
|
|
181
|
+
const isAsyncData = state instanceof Promise;
|
|
182
|
+
if (isAsyncData && !((_a = instance.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
|
|
183
|
+
throw new Error("[ReactiveView]: defaultData is required for async data.");
|
|
184
|
+
}
|
|
185
|
+
if (props.loading && !props.defer) {
|
|
186
|
+
console.warn("[ReactiveView]: loading prop should be used with defer prop.");
|
|
187
|
+
}
|
|
188
|
+
const defaultData = props.getDefaultData(
|
|
189
|
+
((_b = instance.vnode.props) == null ? void 0 : _b.hasOwnProperty("defaultData")) ? instance.vnode.props.defaultData : typeof ((_c = instance.vnode.props) == null ? void 0 : _c.data) === "object" ? Array.isArray(instance.vnode.props.data) ? [] : {} : ((_d = instance.vnode.props) == null ? void 0 : _d.hasOwnProperty("data")) ? (_e = instance.vnode.props) == null ? void 0 : _e.data : {}
|
|
193
190
|
);
|
|
194
|
-
const
|
|
195
|
-
const data =
|
|
196
|
-
const state = reactive(DataManager.transform(props2.await ? type : data));
|
|
191
|
+
const datatype = Array.isArray(defaultData) ? [] : {};
|
|
192
|
+
const data = isAsyncData ? datatype : ((_f = instance.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? state : datatype;
|
|
197
193
|
const config = {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
194
|
+
name: props.modelName,
|
|
195
|
+
defaultData: ObjectManager.on(defaultData).clone(),
|
|
196
|
+
data: reactive(ObjectManager.on(data).clone()),
|
|
197
|
+
notifications: props.notifications,
|
|
198
|
+
subscriptions: props.subscriptions,
|
|
199
|
+
logging: props.logging
|
|
204
200
|
};
|
|
205
|
-
const
|
|
206
|
-
get(target,
|
|
207
|
-
if (
|
|
201
|
+
const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new DataManager(config), {
|
|
202
|
+
get(target, key, receiver) {
|
|
203
|
+
if (key === "setData" || key === "replaceData") {
|
|
208
204
|
return (...params) => {
|
|
209
|
-
var _a2
|
|
210
|
-
const
|
|
211
|
-
const beforeSetData = (_b2 = (_a2 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a2.beforeSetData) != null ? _b2 : access(component).beforeSetData;
|
|
205
|
+
var _a2;
|
|
206
|
+
const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
|
|
212
207
|
if (typeof beforeSetData === "function") {
|
|
213
|
-
beforeSetData(ObjectManager.on(
|
|
208
|
+
beforeSetData(ObjectManager.on(datatype).set(...params).get(), target);
|
|
214
209
|
} else {
|
|
215
|
-
target[
|
|
210
|
+
target[key](...params);
|
|
216
211
|
}
|
|
217
212
|
return target;
|
|
218
213
|
};
|
|
219
214
|
} else {
|
|
220
|
-
return Reflect.get(target,
|
|
215
|
+
return Reflect.get(target, key, receiver);
|
|
221
216
|
}
|
|
222
217
|
}
|
|
223
218
|
});
|
|
224
|
-
|
|
225
|
-
parent: { self: component.value },
|
|
226
|
-
self: { template, isValid, getState }
|
|
227
|
-
};
|
|
228
|
-
const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
|
|
229
|
-
if (typeof context.attrs.debug === "function") {
|
|
230
|
-
context.attrs.debug({ isValid, component, type, data, state, config, options, props: props2, context, setup: __spreadValues({ parent, self }, rest), defaultData, getState });
|
|
231
|
-
}
|
|
232
|
-
if (props2.await instanceof Promise) {
|
|
219
|
+
if (isAsyncData) {
|
|
233
220
|
nextTick(async () => {
|
|
234
|
-
|
|
221
|
+
model.replaceData(await state);
|
|
235
222
|
});
|
|
236
223
|
}
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
224
|
+
nextTick(async () => {
|
|
225
|
+
var _a2;
|
|
226
|
+
ready.value = (_a2 = await deferred.value) != null ? _a2 : true;
|
|
227
|
+
});
|
|
228
|
+
if (context.attrs["onUpdate:model"]) {
|
|
229
|
+
const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
|
|
230
|
+
callback: context.attrs["onUpdate:model"]
|
|
231
|
+
} : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
|
|
232
|
+
watch(() => model.getData(), (after, before) => {
|
|
233
|
+
const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
|
|
234
|
+
config2.callback(diff, model);
|
|
235
|
+
}, config2.options);
|
|
244
236
|
}
|
|
245
|
-
if (context.attrs["onUpdate:
|
|
246
|
-
const config2 = typeof context.attrs["onUpdate:
|
|
247
|
-
callback: context.attrs["onUpdate:
|
|
248
|
-
} : (
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
|
|
258
|
-
}
|
|
259
|
-
}, config2.options);
|
|
260
|
-
});
|
|
237
|
+
if ((_h = context.attrs["onUpdate:data"]) != null ? _h : true) {
|
|
238
|
+
const config2 = typeof context.attrs["onUpdate:data"] === "function" ? {
|
|
239
|
+
callback: context.attrs["onUpdate:data"]
|
|
240
|
+
} : (_i = context.attrs["onUpdate:data"]) != null ? _i : {};
|
|
241
|
+
watch(async () => typeof props.data === "function" ? await props.data() : await props.data, async (after, before) => {
|
|
242
|
+
const diff = { before: ObjectManager.on(await before).get(), after: ObjectManager.on(await after).get() };
|
|
243
|
+
if (typeof config2.callback === "function") {
|
|
244
|
+
config2.callback(diff, model);
|
|
245
|
+
} else {
|
|
246
|
+
model.replaceData(await after);
|
|
247
|
+
}
|
|
248
|
+
}, config2.options);
|
|
261
249
|
}
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
} : (_h = context.attrs["onUpdate:propsState"]) != null ? _h : {};
|
|
266
|
-
onMounted(() => {
|
|
267
|
-
watch(() => ObjectManager.on(props2.state).clone(), (after, before) => {
|
|
268
|
-
const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
|
|
269
|
-
if (typeof config2.callback === "function") {
|
|
270
|
-
config2.callback(diff, getState);
|
|
271
|
-
} else {
|
|
272
|
-
getState.replaceData(after);
|
|
273
|
-
}
|
|
274
|
-
sync.value = true;
|
|
275
|
-
}, config2.options);
|
|
276
|
-
});
|
|
250
|
+
const component = ref({ parent: { self: instance.proxy }, self: { template, model, isValid } });
|
|
251
|
+
if (typeof props.setup === "function") {
|
|
252
|
+
component.value = props.setup(component.value, component);
|
|
277
253
|
}
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
}, rest));
|
|
287
|
-
setup2.options = setup2.options.parent;
|
|
288
|
-
setup2.$vue = setup2.$vue.$parent;
|
|
289
|
-
}
|
|
290
|
-
if (rendered.value) {
|
|
291
|
-
return access($vue).template($vue, { parent, self });
|
|
254
|
+
if (props.instance) {
|
|
255
|
+
props.instance.value = component.value;
|
|
256
|
+
}
|
|
257
|
+
return (vue) => {
|
|
258
|
+
if (ready.value) {
|
|
259
|
+
return access(component).template(vue, component);
|
|
260
|
+
} else {
|
|
261
|
+
return props.loading;
|
|
292
262
|
}
|
|
293
263
|
};
|
|
294
264
|
}
|
|
@@ -324,19 +294,19 @@ function safeRequest(request) {
|
|
|
324
294
|
}
|
|
325
295
|
});
|
|
326
296
|
}
|
|
327
|
-
function getProps(
|
|
297
|
+
function getProps(props, param2) {
|
|
328
298
|
var _a;
|
|
329
299
|
const exclude = Array.isArray(param2) || typeof param2 === "string" ? param2 : param2.exclude;
|
|
330
300
|
const exclusions = (Array.isArray(exclude) ? exclude : [exclude]).join("|");
|
|
331
301
|
const include = (_a = param2.include) != null ? _a : {};
|
|
332
|
-
return Object.entries(include).reduce((
|
|
333
|
-
|
|
334
|
-
return
|
|
335
|
-
}, Object.entries(
|
|
302
|
+
return Object.entries(include).reduce((props2, [key, val]) => {
|
|
303
|
+
props2[key] = val;
|
|
304
|
+
return props2;
|
|
305
|
+
}, Object.entries(props).reduce((props2, [key, val]) => {
|
|
336
306
|
if (!RegExp(`(^|\\|)${key}($|\\|)`, "i").test(exclusions)) {
|
|
337
|
-
|
|
307
|
+
props2[key] = val;
|
|
338
308
|
}
|
|
339
|
-
return
|
|
309
|
+
return props2;
|
|
340
310
|
}, {}));
|
|
341
311
|
}
|
|
342
312
|
function getReactiveViewComponent(component, options = {}) {
|
|
@@ -347,11 +317,11 @@ function getReactiveViewComponent(component, options = {}) {
|
|
|
347
317
|
return false;
|
|
348
318
|
}
|
|
349
319
|
};
|
|
350
|
-
const
|
|
320
|
+
const props = getProps(options, "setup");
|
|
351
321
|
const slots = typeof component === "function" ? component : () => {
|
|
352
|
-
return (component.type || component).setup ?
|
|
322
|
+
return (component.type || component).setup ? createVNode2(component, component.setup ? {} : props) : component;
|
|
353
323
|
};
|
|
354
|
-
return model(component) ?
|
|
324
|
+
return model(component) ? createVNode2(component, props) : createVNode2(ReactiveView_default, props, slots);
|
|
355
325
|
}
|
|
356
326
|
function getDate(param1, param2) {
|
|
357
327
|
var _a, _b;
|
|
@@ -367,34 +337,30 @@ function getDate(param1, param2) {
|
|
|
367
337
|
};
|
|
368
338
|
return formatInTimeZone(datetime(), options.timezone, options.format);
|
|
369
339
|
}
|
|
370
|
-
function access(
|
|
371
|
-
|
|
372
|
-
const proxy = (target) => {
|
|
340
|
+
function access(view = {}, alternative) {
|
|
341
|
+
const resolve = (target) => {
|
|
373
342
|
return new Proxy(target, {
|
|
374
343
|
get(target2, key) {
|
|
375
|
-
const
|
|
344
|
+
const component = { tree: target2 };
|
|
376
345
|
do {
|
|
377
|
-
if (key in
|
|
378
|
-
return
|
|
379
|
-
} else if ("self" in
|
|
380
|
-
return
|
|
346
|
+
if (key in component.tree) {
|
|
347
|
+
return component.tree[key];
|
|
348
|
+
} else if ("self" in component.tree && key in component.tree.self) {
|
|
349
|
+
return component.tree.self[key];
|
|
381
350
|
} else {
|
|
382
|
-
|
|
351
|
+
component.tree = "parent" in component.tree && component.tree.parent;
|
|
383
352
|
}
|
|
384
|
-
} while (
|
|
353
|
+
} while (component.tree);
|
|
385
354
|
return alternative;
|
|
386
355
|
}
|
|
387
356
|
});
|
|
388
357
|
};
|
|
389
|
-
const component = typeof $vue === "function" ? $vue() : $vue;
|
|
390
358
|
try {
|
|
391
|
-
|
|
359
|
+
const component = typeof view === "function" ? view() : view;
|
|
360
|
+
const ref2 = isRef(component) ? component.value : component;
|
|
361
|
+
return resolve(ref2.ReactiveView ? access(ref2.instance) : ref2);
|
|
392
362
|
} catch (e) {
|
|
393
|
-
|
|
394
|
-
return proxy(component.value.access());
|
|
395
|
-
} catch (e2) {
|
|
396
|
-
return proxy(((_b = (_a = component.value) != null ? _a : component) != null ? _b : {}) || {});
|
|
397
|
-
}
|
|
363
|
+
return resolve(view);
|
|
398
364
|
}
|
|
399
365
|
}
|
|
400
366
|
function getSubscription() {
|
|
@@ -424,7 +390,7 @@ function getSubscription() {
|
|
|
424
390
|
subscription
|
|
425
391
|
};
|
|
426
392
|
}
|
|
427
|
-
function StyleParser(styles) {
|
|
393
|
+
function StyleParser(styles = {}) {
|
|
428
394
|
var _a;
|
|
429
395
|
const object = (items) => items.reduce((object2, item) => {
|
|
430
396
|
return Object.assign(object2, { [item]: true });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@razaman2/reactive-view",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
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",
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
"vue",
|
|
16
16
|
"vue-helper",
|
|
17
17
|
"reactive-view",
|
|
18
|
-
"vue-class-component"
|
|
18
|
+
"vue-class-component",
|
|
19
|
+
"reactive-ui"
|
|
19
20
|
],
|
|
20
21
|
"author": "razaman2",
|
|
21
22
|
"license": "MIT",
|
|
@@ -33,7 +34,7 @@
|
|
|
33
34
|
"@types/uuid": "^10.0.0",
|
|
34
35
|
"tsup": "^8.4.0",
|
|
35
36
|
"typescript": "^5.8.2",
|
|
36
|
-
"vitest": "^3.
|
|
37
|
+
"vitest": "^3.1.1"
|
|
37
38
|
},
|
|
38
39
|
"publishConfig": {
|
|
39
40
|
"access": "public"
|