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