@razaman2/reactive-view 0.0.20 → 0.0.22
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 +31 -31
- package/dist/index.d.ts +31 -31
- package/dist/index.js +151 -177
- package/dist/index.mjs +152 -179
- 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,7 @@ 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, boolean> | string): {};
|
|
116
|
+
declare function MergeStyles(...params: any): any;
|
|
117
117
|
|
|
118
|
-
export { StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };
|
|
118
|
+
export { MergeStyles, 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,7 @@ 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, boolean> | string): {};
|
|
116
|
+
declare function MergeStyles(...params: any): any;
|
|
117
117
|
|
|
118
|
-
export { StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };
|
|
118
|
+
export { MergeStyles, StyleParser, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
7
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
8
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
7
9
|
var __getProtoOf = Object.getPrototypeOf;
|
|
@@ -19,18 +21,7 @@ var __spreadValues = (a, b) => {
|
|
|
19
21
|
}
|
|
20
22
|
return a;
|
|
21
23
|
};
|
|
22
|
-
var
|
|
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
|
-
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
34
25
|
var __export = (target, all) => {
|
|
35
26
|
for (var name2 in all)
|
|
36
27
|
__defProp(target, name2, { get: all[name2], enumerable: true });
|
|
@@ -56,6 +47,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
56
47
|
// src/index.ts
|
|
57
48
|
var index_exports = {};
|
|
58
49
|
__export(index_exports, {
|
|
50
|
+
MergeStyles: () => MergeStyles,
|
|
59
51
|
StyleParser: () => StyleParser,
|
|
60
52
|
access: () => access,
|
|
61
53
|
default: () => index_default,
|
|
@@ -167,167 +159,149 @@ var import_vue = require("vue");
|
|
|
167
159
|
|
|
168
160
|
// package.json
|
|
169
161
|
var name = "@razaman2/reactive-view";
|
|
170
|
-
var version = "0.0.
|
|
162
|
+
var version = "0.0.22";
|
|
171
163
|
|
|
172
164
|
// 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
165
|
var setup = {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
type: Function,
|
|
203
|
-
default: (param1 = {}, param2 = {}) => {
|
|
204
|
-
return Object.assign(param1, param2);
|
|
205
|
-
}
|
|
206
|
-
}
|
|
166
|
+
type: Function,
|
|
167
|
+
default: (parent = {}) => parent
|
|
207
168
|
};
|
|
208
169
|
var ReactiveView_default = {
|
|
209
|
-
props:
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
170
|
+
props: {
|
|
171
|
+
setup,
|
|
172
|
+
ReactiveView: {
|
|
173
|
+
default: true
|
|
174
|
+
},
|
|
175
|
+
instance: {
|
|
176
|
+
default: (0, import_vue.ref)()
|
|
177
|
+
},
|
|
178
|
+
notifications: Object,
|
|
179
|
+
subscriptions: Object,
|
|
180
|
+
beforeSetData: Function,
|
|
181
|
+
data: {
|
|
182
|
+
default: {}
|
|
183
|
+
},
|
|
184
|
+
defaultData: {},
|
|
185
|
+
getDefaultData: {
|
|
186
|
+
type: Function,
|
|
187
|
+
default: (data) => data
|
|
188
|
+
},
|
|
189
|
+
model: {},
|
|
190
|
+
defer: {},
|
|
191
|
+
logging: {
|
|
192
|
+
validator: (logging) => {
|
|
193
|
+
return ["Boolean"].includes(logging.constructor.name);
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
loading: {},
|
|
197
|
+
modelName: {
|
|
198
|
+
type: String,
|
|
199
|
+
default: "ReactiveView"
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
setup(props, context) {
|
|
203
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
204
|
+
const template = (vue, component2) => {
|
|
213
205
|
var _a2, _b2, _c2;
|
|
214
|
-
const
|
|
206
|
+
const params = { vue, component: component2, props, context };
|
|
207
|
+
const vnode = context.slots.default ? (0, import_vue.createVNode)(
|
|
215
208
|
"div",
|
|
216
209
|
context.attrs,
|
|
217
|
-
context.slots.default(
|
|
218
|
-
) : (0, import_vue.
|
|
210
|
+
context.slots.default(params)
|
|
211
|
+
) : (0, import_vue.createVNode)("div", __spreadValues({
|
|
219
212
|
style: {
|
|
220
213
|
color: "red",
|
|
221
214
|
textAlign: "center"
|
|
222
215
|
}
|
|
223
|
-
}, context.attrs), `${
|
|
224
|
-
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2,
|
|
216
|
+
}, context.attrs), `${props.modelName}: ${name}@${version}`);
|
|
217
|
+
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, params)) != null ? _c2 : vnode;
|
|
225
218
|
};
|
|
226
219
|
const isValid = (0, import_vue.ref)(false);
|
|
227
|
-
const
|
|
228
|
-
const
|
|
229
|
-
const
|
|
230
|
-
const
|
|
231
|
-
|
|
220
|
+
const ready = (0, import_vue.ref)(false);
|
|
221
|
+
const instance = (0, import_vue.getCurrentInstance)();
|
|
222
|
+
const deferred = (0, import_vue.ref)(typeof props.defer === "function" ? props.defer() : props.defer);
|
|
223
|
+
const state = typeof props.data === "function" ? props.data() : props.data;
|
|
224
|
+
const isAsyncData = state instanceof Promise;
|
|
225
|
+
if (isAsyncData && !((_a = instance.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
|
|
226
|
+
throw new Error("[ReactiveView]: defaultData is required for async data.");
|
|
227
|
+
}
|
|
228
|
+
if (props.loading && !props.defer) {
|
|
229
|
+
console.warn("[ReactiveView]: loading prop should be used with defer prop.");
|
|
230
|
+
}
|
|
231
|
+
const defaultData = props.getDefaultData(
|
|
232
|
+
((_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
233
|
);
|
|
233
|
-
const
|
|
234
|
-
const data =
|
|
235
|
-
const state = (0, import_vue.reactive)(import_data_manager.default.transform(props2.await ? type : data));
|
|
234
|
+
const datatype = Array.isArray(defaultData) ? [] : {};
|
|
235
|
+
const data = isAsyncData ? datatype : ((_f = instance.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? state : datatype;
|
|
236
236
|
const config = {
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
237
|
+
name: props.modelName,
|
|
238
|
+
defaultData: import_object_manager.default.on(defaultData).clone(),
|
|
239
|
+
data: (0, import_vue.reactive)(import_object_manager.default.on(data).clone()),
|
|
240
|
+
notifications: props.notifications,
|
|
241
|
+
subscriptions: props.subscriptions,
|
|
242
|
+
logging: props.logging
|
|
243
243
|
};
|
|
244
|
-
const
|
|
245
|
-
get(target,
|
|
246
|
-
if (
|
|
244
|
+
const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new import_data_manager.default(config), {
|
|
245
|
+
get(target, key, receiver) {
|
|
246
|
+
if (key === "setData" || key === "replaceData") {
|
|
247
247
|
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;
|
|
248
|
+
var _a2;
|
|
249
|
+
const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
|
|
251
250
|
if (typeof beforeSetData === "function") {
|
|
252
|
-
beforeSetData(import_object_manager.default.on(
|
|
251
|
+
beforeSetData(import_object_manager.default.on(datatype).set(...params).get(), target);
|
|
253
252
|
} else {
|
|
254
|
-
target[
|
|
253
|
+
target[key](...params);
|
|
255
254
|
}
|
|
256
255
|
return target;
|
|
257
256
|
};
|
|
258
257
|
} else {
|
|
259
|
-
return Reflect.get(target,
|
|
258
|
+
return Reflect.get(target, key, receiver);
|
|
260
259
|
}
|
|
261
260
|
}
|
|
262
261
|
});
|
|
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) {
|
|
262
|
+
if (isAsyncData) {
|
|
272
263
|
(0, import_vue.nextTick)(async () => {
|
|
273
|
-
|
|
264
|
+
model.replaceData(await state);
|
|
274
265
|
});
|
|
275
266
|
}
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
267
|
+
(0, import_vue.nextTick)(async () => {
|
|
268
|
+
var _a2;
|
|
269
|
+
ready.value = (_a2 = await deferred.value) != null ? _a2 : true;
|
|
270
|
+
});
|
|
271
|
+
if (context.attrs["onUpdate:model"]) {
|
|
272
|
+
const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
|
|
273
|
+
callback: context.attrs["onUpdate:model"]
|
|
274
|
+
} : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
|
|
275
|
+
(0, import_vue.watch)(() => model.getData(), (after, before) => {
|
|
276
|
+
const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
|
|
277
|
+
config2.callback(diff, model);
|
|
278
|
+
}, config2.options);
|
|
283
279
|
}
|
|
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
|
-
});
|
|
280
|
+
if ((_h = context.attrs["onUpdate:data"]) != null ? _h : true) {
|
|
281
|
+
const config2 = typeof context.attrs["onUpdate:data"] === "function" ? {
|
|
282
|
+
callback: context.attrs["onUpdate:data"]
|
|
283
|
+
} : (_i = context.attrs["onUpdate:data"]) != null ? _i : {};
|
|
284
|
+
(0, import_vue.watch)(async () => typeof props.data === "function" ? await props.data() : await props.data, async (after, before) => {
|
|
285
|
+
const diff = { before: import_object_manager.default.on(await before).get(), after: import_object_manager.default.on(await after).get() };
|
|
286
|
+
if (typeof config2.callback === "function") {
|
|
287
|
+
config2.callback(diff, model);
|
|
288
|
+
} else {
|
|
289
|
+
model.replaceData(await after);
|
|
290
|
+
}
|
|
291
|
+
}, config2.options);
|
|
300
292
|
}
|
|
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
|
-
});
|
|
293
|
+
const component = (0, import_vue.ref)({ parent: { self: instance.proxy }, self: { template, model, isValid } });
|
|
294
|
+
if (typeof props.setup === "function") {
|
|
295
|
+
component.value = props.setup(component.value, component);
|
|
316
296
|
}
|
|
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 });
|
|
297
|
+
if (props.instance) {
|
|
298
|
+
props.instance.value = component.value;
|
|
299
|
+
}
|
|
300
|
+
return (vue) => {
|
|
301
|
+
if (ready.value) {
|
|
302
|
+
return access(component).template(vue, component);
|
|
303
|
+
} else {
|
|
304
|
+
return props.loading;
|
|
331
305
|
}
|
|
332
306
|
};
|
|
333
307
|
}
|
|
@@ -363,19 +337,19 @@ function safeRequest(request) {
|
|
|
363
337
|
}
|
|
364
338
|
});
|
|
365
339
|
}
|
|
366
|
-
function getProps(
|
|
340
|
+
function getProps(props, param2) {
|
|
367
341
|
var _a;
|
|
368
342
|
const exclude = Array.isArray(param2) || typeof param2 === "string" ? param2 : param2.exclude;
|
|
369
343
|
const exclusions = (Array.isArray(exclude) ? exclude : [exclude]).join("|");
|
|
370
344
|
const include = (_a = param2.include) != null ? _a : {};
|
|
371
|
-
return Object.entries(include).reduce((
|
|
372
|
-
|
|
373
|
-
return
|
|
374
|
-
}, Object.entries(
|
|
345
|
+
return Object.entries(include).reduce((props2, [key, val]) => {
|
|
346
|
+
props2[key] = val;
|
|
347
|
+
return props2;
|
|
348
|
+
}, Object.entries(props).reduce((props2, [key, val]) => {
|
|
375
349
|
if (!RegExp(`(^|\\|)${key}($|\\|)`, "i").test(exclusions)) {
|
|
376
|
-
|
|
350
|
+
props2[key] = val;
|
|
377
351
|
}
|
|
378
|
-
return
|
|
352
|
+
return props2;
|
|
379
353
|
}, {}));
|
|
380
354
|
}
|
|
381
355
|
function getReactiveViewComponent(component, options = {}) {
|
|
@@ -386,11 +360,11 @@ function getReactiveViewComponent(component, options = {}) {
|
|
|
386
360
|
return false;
|
|
387
361
|
}
|
|
388
362
|
};
|
|
389
|
-
const
|
|
363
|
+
const props = getProps(options, "setup");
|
|
390
364
|
const slots = typeof component === "function" ? component : () => {
|
|
391
|
-
return (component.type || component).setup ? (0, import_vue2.createVNode)(component, component.setup ? {} :
|
|
365
|
+
return (component.type || component).setup ? (0, import_vue2.createVNode)(component, component.setup ? {} : props) : component;
|
|
392
366
|
};
|
|
393
|
-
return model(component) ? (0, import_vue2.createVNode)(component,
|
|
367
|
+
return model(component) ? (0, import_vue2.createVNode)(component, props) : (0, import_vue2.createVNode)(ReactiveView_default, props, slots);
|
|
394
368
|
}
|
|
395
369
|
function getDate(param1, param2) {
|
|
396
370
|
var _a, _b;
|
|
@@ -406,34 +380,30 @@ function getDate(param1, param2) {
|
|
|
406
380
|
};
|
|
407
381
|
return (0, import_date_fns_tz.formatInTimeZone)(datetime(), options.timezone, options.format);
|
|
408
382
|
}
|
|
409
|
-
function access(
|
|
410
|
-
|
|
411
|
-
const proxy = (target) => {
|
|
383
|
+
function access(view = {}, alternative) {
|
|
384
|
+
const resolve = (target) => {
|
|
412
385
|
return new Proxy(target, {
|
|
413
386
|
get(target2, key) {
|
|
414
|
-
const
|
|
387
|
+
const component = { tree: target2 };
|
|
415
388
|
do {
|
|
416
|
-
if (key in
|
|
417
|
-
return
|
|
418
|
-
} else if ("self" in
|
|
419
|
-
return
|
|
389
|
+
if (key in component.tree) {
|
|
390
|
+
return component.tree[key];
|
|
391
|
+
} else if ("self" in component.tree && key in component.tree.self) {
|
|
392
|
+
return component.tree.self[key];
|
|
420
393
|
} else {
|
|
421
|
-
|
|
394
|
+
component.tree = "parent" in component.tree && component.tree.parent;
|
|
422
395
|
}
|
|
423
|
-
} while (
|
|
396
|
+
} while (component.tree);
|
|
424
397
|
return alternative;
|
|
425
398
|
}
|
|
426
399
|
});
|
|
427
400
|
};
|
|
428
|
-
const component = typeof $vue === "function" ? $vue() : $vue;
|
|
429
401
|
try {
|
|
430
|
-
|
|
402
|
+
const component = typeof view === "function" ? view() : view;
|
|
403
|
+
const ref2 = (0, import_vue2.isRef)(component) ? component.value : component;
|
|
404
|
+
return resolve(ref2.ReactiveView ? access(ref2.instance) : ref2);
|
|
431
405
|
} 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
|
-
}
|
|
406
|
+
return resolve(view);
|
|
437
407
|
}
|
|
438
408
|
}
|
|
439
409
|
function getSubscription() {
|
|
@@ -463,20 +433,24 @@ function getSubscription() {
|
|
|
463
433
|
subscription
|
|
464
434
|
};
|
|
465
435
|
}
|
|
466
|
-
function StyleParser(styles) {
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
}, {});
|
|
471
|
-
return (_a = Array.isArray(styles) ? object(styles) : typeof styles === "string" ? object(styles.split(/\s+/)) : Object.entries(styles).reduce((acc, [styles2, value]) => {
|
|
472
|
-
styles2.split(/\s+/).forEach((style) => {
|
|
473
|
-
acc[style] = value;
|
|
436
|
+
function StyleParser(styles = {}) {
|
|
437
|
+
const transform = (style, status = true) => style.split(/\s+/).reduce((object, style2) => {
|
|
438
|
+
return __spreadProps(__spreadValues({}, object), {
|
|
439
|
+
[style2]: status
|
|
474
440
|
});
|
|
475
|
-
|
|
476
|
-
|
|
441
|
+
}, {});
|
|
442
|
+
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]) => {
|
|
443
|
+
return __spreadValues(__spreadValues({}, acc), transform(styles2, value));
|
|
444
|
+
}, {});
|
|
445
|
+
}
|
|
446
|
+
function MergeStyles(...params) {
|
|
447
|
+
return params.reduce((styles, style, index, array) => {
|
|
448
|
+
return __spreadValues(__spreadValues({}, StyleParser(array[array.length - index - 1])), styles);
|
|
449
|
+
}, {});
|
|
477
450
|
}
|
|
478
451
|
// Annotate the CommonJS export names for ESM import in node:
|
|
479
452
|
0 && (module.exports = {
|
|
453
|
+
MergeStyles,
|
|
480
454
|
StyleParser,
|
|
481
455
|
access,
|
|
482
456
|
getDate,
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
2
4
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
6
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
@@ -14,18 +16,7 @@ var __spreadValues = (a, b) => {
|
|
|
14
16
|
}
|
|
15
17
|
return a;
|
|
16
18
|
};
|
|
17
|
-
var
|
|
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
|
-
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
29
20
|
|
|
30
21
|
// src/index.ts
|
|
31
22
|
import { formatInTimeZone } from "date-fns-tz";
|
|
@@ -119,176 +110,158 @@ _Subscriptions.subscriptions = _Subscriptions.create();
|
|
|
119
110
|
var Subscriptions = _Subscriptions;
|
|
120
111
|
|
|
121
112
|
// src/index.ts
|
|
122
|
-
import { createVNode } from "vue";
|
|
113
|
+
import { createVNode as createVNode2, isRef } from "vue";
|
|
123
114
|
|
|
124
115
|
// src/ReactiveView.ts
|
|
125
116
|
import ObjectManager from "@razaman2/object-manager";
|
|
126
117
|
import DataManager from "@razaman2/data-manager";
|
|
127
|
-
import {
|
|
118
|
+
import { ref, reactive, watch, nextTick, createVNode, getCurrentInstance } from "vue";
|
|
128
119
|
|
|
129
120
|
// package.json
|
|
130
121
|
var name = "@razaman2/reactive-view";
|
|
131
|
-
var version = "0.0.
|
|
122
|
+
var version = "0.0.22";
|
|
132
123
|
|
|
133
124
|
// 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
125
|
var setup = {
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
type: Function,
|
|
164
|
-
default: (param1 = {}, param2 = {}) => {
|
|
165
|
-
return Object.assign(param1, param2);
|
|
166
|
-
}
|
|
167
|
-
}
|
|
126
|
+
type: Function,
|
|
127
|
+
default: (parent = {}) => parent
|
|
168
128
|
};
|
|
169
129
|
var ReactiveView_default = {
|
|
170
|
-
props:
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
130
|
+
props: {
|
|
131
|
+
setup,
|
|
132
|
+
ReactiveView: {
|
|
133
|
+
default: true
|
|
134
|
+
},
|
|
135
|
+
instance: {
|
|
136
|
+
default: ref()
|
|
137
|
+
},
|
|
138
|
+
notifications: Object,
|
|
139
|
+
subscriptions: Object,
|
|
140
|
+
beforeSetData: Function,
|
|
141
|
+
data: {
|
|
142
|
+
default: {}
|
|
143
|
+
},
|
|
144
|
+
defaultData: {},
|
|
145
|
+
getDefaultData: {
|
|
146
|
+
type: Function,
|
|
147
|
+
default: (data) => data
|
|
148
|
+
},
|
|
149
|
+
model: {},
|
|
150
|
+
defer: {},
|
|
151
|
+
logging: {
|
|
152
|
+
validator: (logging) => {
|
|
153
|
+
return ["Boolean"].includes(logging.constructor.name);
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
loading: {},
|
|
157
|
+
modelName: {
|
|
158
|
+
type: String,
|
|
159
|
+
default: "ReactiveView"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
setup(props, context) {
|
|
163
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
164
|
+
const template = (vue, component2) => {
|
|
174
165
|
var _a2, _b2, _c2;
|
|
175
|
-
const
|
|
166
|
+
const params = { vue, component: component2, props, context };
|
|
167
|
+
const vnode = context.slots.default ? createVNode(
|
|
176
168
|
"div",
|
|
177
169
|
context.attrs,
|
|
178
|
-
context.slots.default(
|
|
179
|
-
) :
|
|
170
|
+
context.slots.default(params)
|
|
171
|
+
) : createVNode("div", __spreadValues({
|
|
180
172
|
style: {
|
|
181
173
|
color: "red",
|
|
182
174
|
textAlign: "center"
|
|
183
175
|
}
|
|
184
|
-
}, context.attrs), `${
|
|
185
|
-
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2,
|
|
176
|
+
}, context.attrs), `${props.modelName}: ${name}@${version}`);
|
|
177
|
+
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, params)) != null ? _c2 : vnode;
|
|
186
178
|
};
|
|
187
179
|
const isValid = ref(false);
|
|
188
|
-
const
|
|
189
|
-
const
|
|
190
|
-
const
|
|
191
|
-
const
|
|
192
|
-
|
|
180
|
+
const ready = ref(false);
|
|
181
|
+
const instance = getCurrentInstance();
|
|
182
|
+
const deferred = ref(typeof props.defer === "function" ? props.defer() : props.defer);
|
|
183
|
+
const state = typeof props.data === "function" ? props.data() : props.data;
|
|
184
|
+
const isAsyncData = state instanceof Promise;
|
|
185
|
+
if (isAsyncData && !((_a = instance.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
|
|
186
|
+
throw new Error("[ReactiveView]: defaultData is required for async data.");
|
|
187
|
+
}
|
|
188
|
+
if (props.loading && !props.defer) {
|
|
189
|
+
console.warn("[ReactiveView]: loading prop should be used with defer prop.");
|
|
190
|
+
}
|
|
191
|
+
const defaultData = props.getDefaultData(
|
|
192
|
+
((_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
193
|
);
|
|
194
|
-
const
|
|
195
|
-
const data =
|
|
196
|
-
const state = reactive(DataManager.transform(props2.await ? type : data));
|
|
194
|
+
const datatype = Array.isArray(defaultData) ? [] : {};
|
|
195
|
+
const data = isAsyncData ? datatype : ((_f = instance.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? state : datatype;
|
|
197
196
|
const config = {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
197
|
+
name: props.modelName,
|
|
198
|
+
defaultData: ObjectManager.on(defaultData).clone(),
|
|
199
|
+
data: reactive(ObjectManager.on(data).clone()),
|
|
200
|
+
notifications: props.notifications,
|
|
201
|
+
subscriptions: props.subscriptions,
|
|
202
|
+
logging: props.logging
|
|
204
203
|
};
|
|
205
|
-
const
|
|
206
|
-
get(target,
|
|
207
|
-
if (
|
|
204
|
+
const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new DataManager(config), {
|
|
205
|
+
get(target, key, receiver) {
|
|
206
|
+
if (key === "setData" || key === "replaceData") {
|
|
208
207
|
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;
|
|
208
|
+
var _a2;
|
|
209
|
+
const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
|
|
212
210
|
if (typeof beforeSetData === "function") {
|
|
213
|
-
beforeSetData(ObjectManager.on(
|
|
211
|
+
beforeSetData(ObjectManager.on(datatype).set(...params).get(), target);
|
|
214
212
|
} else {
|
|
215
|
-
target[
|
|
213
|
+
target[key](...params);
|
|
216
214
|
}
|
|
217
215
|
return target;
|
|
218
216
|
};
|
|
219
217
|
} else {
|
|
220
|
-
return Reflect.get(target,
|
|
218
|
+
return Reflect.get(target, key, receiver);
|
|
221
219
|
}
|
|
222
220
|
}
|
|
223
221
|
});
|
|
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) {
|
|
222
|
+
if (isAsyncData) {
|
|
233
223
|
nextTick(async () => {
|
|
234
|
-
|
|
224
|
+
model.replaceData(await state);
|
|
235
225
|
});
|
|
236
226
|
}
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
227
|
+
nextTick(async () => {
|
|
228
|
+
var _a2;
|
|
229
|
+
ready.value = (_a2 = await deferred.value) != null ? _a2 : true;
|
|
230
|
+
});
|
|
231
|
+
if (context.attrs["onUpdate:model"]) {
|
|
232
|
+
const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
|
|
233
|
+
callback: context.attrs["onUpdate:model"]
|
|
234
|
+
} : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
|
|
235
|
+
watch(() => model.getData(), (after, before) => {
|
|
236
|
+
const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
|
|
237
|
+
config2.callback(diff, model);
|
|
238
|
+
}, config2.options);
|
|
244
239
|
}
|
|
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
|
-
});
|
|
240
|
+
if ((_h = context.attrs["onUpdate:data"]) != null ? _h : true) {
|
|
241
|
+
const config2 = typeof context.attrs["onUpdate:data"] === "function" ? {
|
|
242
|
+
callback: context.attrs["onUpdate:data"]
|
|
243
|
+
} : (_i = context.attrs["onUpdate:data"]) != null ? _i : {};
|
|
244
|
+
watch(async () => typeof props.data === "function" ? await props.data() : await props.data, async (after, before) => {
|
|
245
|
+
const diff = { before: ObjectManager.on(await before).get(), after: ObjectManager.on(await after).get() };
|
|
246
|
+
if (typeof config2.callback === "function") {
|
|
247
|
+
config2.callback(diff, model);
|
|
248
|
+
} else {
|
|
249
|
+
model.replaceData(await after);
|
|
250
|
+
}
|
|
251
|
+
}, config2.options);
|
|
261
252
|
}
|
|
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
|
-
});
|
|
253
|
+
const component = ref({ parent: { self: instance.proxy }, self: { template, model, isValid } });
|
|
254
|
+
if (typeof props.setup === "function") {
|
|
255
|
+
component.value = props.setup(component.value, component);
|
|
277
256
|
}
|
|
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 });
|
|
257
|
+
if (props.instance) {
|
|
258
|
+
props.instance.value = component.value;
|
|
259
|
+
}
|
|
260
|
+
return (vue) => {
|
|
261
|
+
if (ready.value) {
|
|
262
|
+
return access(component).template(vue, component);
|
|
263
|
+
} else {
|
|
264
|
+
return props.loading;
|
|
292
265
|
}
|
|
293
266
|
};
|
|
294
267
|
}
|
|
@@ -324,19 +297,19 @@ function safeRequest(request) {
|
|
|
324
297
|
}
|
|
325
298
|
});
|
|
326
299
|
}
|
|
327
|
-
function getProps(
|
|
300
|
+
function getProps(props, param2) {
|
|
328
301
|
var _a;
|
|
329
302
|
const exclude = Array.isArray(param2) || typeof param2 === "string" ? param2 : param2.exclude;
|
|
330
303
|
const exclusions = (Array.isArray(exclude) ? exclude : [exclude]).join("|");
|
|
331
304
|
const include = (_a = param2.include) != null ? _a : {};
|
|
332
|
-
return Object.entries(include).reduce((
|
|
333
|
-
|
|
334
|
-
return
|
|
335
|
-
}, Object.entries(
|
|
305
|
+
return Object.entries(include).reduce((props2, [key, val]) => {
|
|
306
|
+
props2[key] = val;
|
|
307
|
+
return props2;
|
|
308
|
+
}, Object.entries(props).reduce((props2, [key, val]) => {
|
|
336
309
|
if (!RegExp(`(^|\\|)${key}($|\\|)`, "i").test(exclusions)) {
|
|
337
|
-
|
|
310
|
+
props2[key] = val;
|
|
338
311
|
}
|
|
339
|
-
return
|
|
312
|
+
return props2;
|
|
340
313
|
}, {}));
|
|
341
314
|
}
|
|
342
315
|
function getReactiveViewComponent(component, options = {}) {
|
|
@@ -347,11 +320,11 @@ function getReactiveViewComponent(component, options = {}) {
|
|
|
347
320
|
return false;
|
|
348
321
|
}
|
|
349
322
|
};
|
|
350
|
-
const
|
|
323
|
+
const props = getProps(options, "setup");
|
|
351
324
|
const slots = typeof component === "function" ? component : () => {
|
|
352
|
-
return (component.type || component).setup ?
|
|
325
|
+
return (component.type || component).setup ? createVNode2(component, component.setup ? {} : props) : component;
|
|
353
326
|
};
|
|
354
|
-
return model(component) ?
|
|
327
|
+
return model(component) ? createVNode2(component, props) : createVNode2(ReactiveView_default, props, slots);
|
|
355
328
|
}
|
|
356
329
|
function getDate(param1, param2) {
|
|
357
330
|
var _a, _b;
|
|
@@ -367,34 +340,30 @@ function getDate(param1, param2) {
|
|
|
367
340
|
};
|
|
368
341
|
return formatInTimeZone(datetime(), options.timezone, options.format);
|
|
369
342
|
}
|
|
370
|
-
function access(
|
|
371
|
-
|
|
372
|
-
const proxy = (target) => {
|
|
343
|
+
function access(view = {}, alternative) {
|
|
344
|
+
const resolve = (target) => {
|
|
373
345
|
return new Proxy(target, {
|
|
374
346
|
get(target2, key) {
|
|
375
|
-
const
|
|
347
|
+
const component = { tree: target2 };
|
|
376
348
|
do {
|
|
377
|
-
if (key in
|
|
378
|
-
return
|
|
379
|
-
} else if ("self" in
|
|
380
|
-
return
|
|
349
|
+
if (key in component.tree) {
|
|
350
|
+
return component.tree[key];
|
|
351
|
+
} else if ("self" in component.tree && key in component.tree.self) {
|
|
352
|
+
return component.tree.self[key];
|
|
381
353
|
} else {
|
|
382
|
-
|
|
354
|
+
component.tree = "parent" in component.tree && component.tree.parent;
|
|
383
355
|
}
|
|
384
|
-
} while (
|
|
356
|
+
} while (component.tree);
|
|
385
357
|
return alternative;
|
|
386
358
|
}
|
|
387
359
|
});
|
|
388
360
|
};
|
|
389
|
-
const component = typeof $vue === "function" ? $vue() : $vue;
|
|
390
361
|
try {
|
|
391
|
-
|
|
362
|
+
const component = typeof view === "function" ? view() : view;
|
|
363
|
+
const ref2 = isRef(component) ? component.value : component;
|
|
364
|
+
return resolve(ref2.ReactiveView ? access(ref2.instance) : ref2);
|
|
392
365
|
} 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
|
-
}
|
|
366
|
+
return resolve(view);
|
|
398
367
|
}
|
|
399
368
|
}
|
|
400
369
|
function getSubscription() {
|
|
@@ -424,19 +393,23 @@ function getSubscription() {
|
|
|
424
393
|
subscription
|
|
425
394
|
};
|
|
426
395
|
}
|
|
427
|
-
function StyleParser(styles) {
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
}, {});
|
|
432
|
-
return (_a = Array.isArray(styles) ? object(styles) : typeof styles === "string" ? object(styles.split(/\s+/)) : Object.entries(styles).reduce((acc, [styles2, value]) => {
|
|
433
|
-
styles2.split(/\s+/).forEach((style) => {
|
|
434
|
-
acc[style] = value;
|
|
396
|
+
function StyleParser(styles = {}) {
|
|
397
|
+
const transform = (style, status = true) => style.split(/\s+/).reduce((object, style2) => {
|
|
398
|
+
return __spreadProps(__spreadValues({}, object), {
|
|
399
|
+
[style2]: status
|
|
435
400
|
});
|
|
436
|
-
|
|
437
|
-
|
|
401
|
+
}, {});
|
|
402
|
+
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]) => {
|
|
403
|
+
return __spreadValues(__spreadValues({}, acc), transform(styles2, value));
|
|
404
|
+
}, {});
|
|
405
|
+
}
|
|
406
|
+
function MergeStyles(...params) {
|
|
407
|
+
return params.reduce((styles, style, index, array) => {
|
|
408
|
+
return __spreadValues(__spreadValues({}, StyleParser(array[array.length - index - 1])), styles);
|
|
409
|
+
}, {});
|
|
438
410
|
}
|
|
439
411
|
export {
|
|
412
|
+
MergeStyles,
|
|
440
413
|
StyleParser,
|
|
441
414
|
access,
|
|
442
415
|
index_default as default,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@razaman2/reactive-view",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.22",
|
|
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"
|