@razaman2/reactive-view 0.0.14 → 0.0.15
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.js +30 -29
- package/dist/index.mjs +34 -33
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -164,7 +164,7 @@ var import_vue = require("vue");
|
|
|
164
164
|
|
|
165
165
|
// package.json
|
|
166
166
|
var name = "@razaman2/reactive-view";
|
|
167
|
-
var version = "0.0.
|
|
167
|
+
var version = "0.0.15";
|
|
168
168
|
|
|
169
169
|
// src/ReactiveView.ts
|
|
170
170
|
var props = {
|
|
@@ -204,29 +204,30 @@ var setup = {
|
|
|
204
204
|
var ReactiveView_default = {
|
|
205
205
|
props: __spreadValues(__spreadValues({}, setup), props),
|
|
206
206
|
setup(props2, context) {
|
|
207
|
-
var _a, _b, _c;
|
|
208
|
-
const template = (vue,
|
|
207
|
+
var _a, _b, _c, _d, _e;
|
|
208
|
+
const template = (vue, options2) => {
|
|
209
209
|
var _a2, _b2, _c2;
|
|
210
210
|
const vnode = context.slots.default ? (0, import_vue.h)(
|
|
211
211
|
"div",
|
|
212
212
|
context.attrs,
|
|
213
|
-
context.slots.default({ vue, options, props: props2, context })
|
|
213
|
+
context.slots.default({ vue, options: options2, props: props2, context })
|
|
214
214
|
) : (0, import_vue.h)("div", __spreadValues({
|
|
215
215
|
style: {
|
|
216
216
|
color: "red",
|
|
217
217
|
textAlign: "center"
|
|
218
218
|
}
|
|
219
219
|
}, context.attrs), `${props2.modelName}: ${name}@${version}`);
|
|
220
|
-
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, options, props: props2, context })) != null ? _c2 : vnode;
|
|
220
|
+
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, options: options2, props: props2, context })) != null ? _c2 : vnode;
|
|
221
221
|
};
|
|
222
222
|
const isValid = (0, import_vue.ref)(false);
|
|
223
223
|
const sync = (0, import_vue.ref)(false);
|
|
224
224
|
const rendered = (0, import_vue.ref)(false);
|
|
225
|
+
const component = (0, import_vue.ref)((_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.proxy);
|
|
225
226
|
const defaultData = props2.getDefaultData(
|
|
226
|
-
Array.isArray(props2.state) ? (
|
|
227
|
+
Array.isArray(props2.state) ? (_b = props2.defaultData) != null ? _b : [] : (_c = props2.defaultData) != null ? _c : {}
|
|
227
228
|
);
|
|
228
229
|
const type = Array.isArray(defaultData) ? [] : {};
|
|
229
|
-
const state = (0, import_vue.reactive)(import_data_manager.default.transform(props2.await ? type : (
|
|
230
|
+
const state = (0, import_vue.reactive)(import_data_manager.default.transform(props2.await ? type : (_d = props2.state) != null ? _d : type));
|
|
230
231
|
const config = {
|
|
231
232
|
defaultData,
|
|
232
233
|
data: state,
|
|
@@ -235,22 +236,27 @@ var ReactiveView_default = {
|
|
|
235
236
|
notifications: props2.notifications,
|
|
236
237
|
subscriptions: props2.subscriptions
|
|
237
238
|
};
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
} else {
|
|
250
|
-
return Reflect.get(target, property, receiver);
|
|
251
|
-
}
|
|
239
|
+
const getState = new Proxy(props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new import_data_manager.default(config), {
|
|
240
|
+
get(target, property, receiver) {
|
|
241
|
+
var _a2, _b2;
|
|
242
|
+
const beforeSetData = (_b2 = (_a2 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a2.beforeSetData) != null ? _b2 : access(component).beforeSetData;
|
|
243
|
+
if (["setData", "replaceData"].includes(property) && typeof beforeSetData === "function") {
|
|
244
|
+
return (...params) => {
|
|
245
|
+
const type2 = Array.isArray(defaultData) ? [] : {};
|
|
246
|
+
beforeSetData(import_object_manager.default.on(type2).set(...params).get(), target);
|
|
247
|
+
};
|
|
248
|
+
} else {
|
|
249
|
+
return Reflect.get(target, property, receiver);
|
|
252
250
|
}
|
|
253
|
-
}
|
|
251
|
+
}
|
|
252
|
+
});
|
|
253
|
+
const options = {
|
|
254
|
+
parent: { self: component },
|
|
255
|
+
self: { template, getState, isValid }
|
|
256
|
+
};
|
|
257
|
+
const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
|
|
258
|
+
return ($vue) => {
|
|
259
|
+
var _a2, _b2;
|
|
254
260
|
if (props2.await instanceof Promise) {
|
|
255
261
|
(0, import_vue.nextTick)(async () => {
|
|
256
262
|
getState.replaceData(await props2.await);
|
|
@@ -264,15 +270,10 @@ var ReactiveView_default = {
|
|
|
264
270
|
} else {
|
|
265
271
|
rendered.value = true;
|
|
266
272
|
}
|
|
267
|
-
const options = {
|
|
268
|
-
parent: { self: $vue },
|
|
269
|
-
self: { template, getState, isValid }
|
|
270
|
-
};
|
|
271
|
-
const _b2 = (_a2 = props2.setup(options)) != null ? _a2 : options, { parent = {}, self = {} } = _b2, rest = __objRest(_b2, ["parent", "self"]);
|
|
272
273
|
if (context.attrs["onUpdate:modelState"]) {
|
|
273
274
|
const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
|
|
274
275
|
callback: context.attrs["onUpdate:modelState"]
|
|
275
|
-
} : (
|
|
276
|
+
} : (_a2 = context.attrs["onUpdate:modelState"]) != null ? _a2 : {};
|
|
276
277
|
(0, import_vue.watch)(() => import_object_manager.default.on(state).clone(), (after, before) => {
|
|
277
278
|
var _a3;
|
|
278
279
|
const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
|
|
@@ -287,7 +288,7 @@ var ReactiveView_default = {
|
|
|
287
288
|
if (context.attrs["onUpdate:propsState"] || props2.sync) {
|
|
288
289
|
const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? {
|
|
289
290
|
callback: context.attrs["onUpdate:propsState"]
|
|
290
|
-
} : (
|
|
291
|
+
} : (_b2 = context.attrs["onUpdate:propsState"]) != null ? _b2 : {};
|
|
291
292
|
(0, import_vue.watch)(() => import_object_manager.default.on(props2.state).clone(), (after, before) => {
|
|
292
293
|
const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
|
|
293
294
|
if (props2.sync && typeof config2.callback !== "function") {
|
package/dist/index.mjs
CHANGED
|
@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
|
|
|
29
29
|
|
|
30
30
|
// src/index.ts
|
|
31
31
|
import { formatInTimeZone } from "date-fns-tz";
|
|
32
|
-
import { createVNode } from "vue";
|
|
32
|
+
import { createVNode as createVNode2 } from "vue";
|
|
33
33
|
|
|
34
34
|
// src/Subscription.ts
|
|
35
35
|
var Subscription = class _Subscription {
|
|
@@ -122,11 +122,11 @@ var Subscriptions = _Subscriptions;
|
|
|
122
122
|
// src/ReactiveView.ts
|
|
123
123
|
import ObjectManager from "@razaman2/object-manager";
|
|
124
124
|
import DataManager from "@razaman2/data-manager";
|
|
125
|
-
import { h, ref, reactive, watch, nextTick } from "vue";
|
|
125
|
+
import { h, ref, reactive, watch, nextTick, getCurrentInstance } from "vue";
|
|
126
126
|
|
|
127
127
|
// package.json
|
|
128
128
|
var name = "@razaman2/reactive-view";
|
|
129
|
-
var version = "0.0.
|
|
129
|
+
var version = "0.0.15";
|
|
130
130
|
|
|
131
131
|
// src/ReactiveView.ts
|
|
132
132
|
var props = {
|
|
@@ -166,29 +166,30 @@ var setup = {
|
|
|
166
166
|
var ReactiveView_default = {
|
|
167
167
|
props: __spreadValues(__spreadValues({}, setup), props),
|
|
168
168
|
setup(props2, context) {
|
|
169
|
-
var _a, _b, _c;
|
|
170
|
-
const template = (vue,
|
|
169
|
+
var _a, _b, _c, _d, _e;
|
|
170
|
+
const template = (vue, options2) => {
|
|
171
171
|
var _a2, _b2, _c2;
|
|
172
172
|
const vnode = context.slots.default ? h(
|
|
173
173
|
"div",
|
|
174
174
|
context.attrs,
|
|
175
|
-
context.slots.default({ vue, options, props: props2, context })
|
|
175
|
+
context.slots.default({ vue, options: options2, props: props2, context })
|
|
176
176
|
) : h("div", __spreadValues({
|
|
177
177
|
style: {
|
|
178
178
|
color: "red",
|
|
179
179
|
textAlign: "center"
|
|
180
180
|
}
|
|
181
181
|
}, context.attrs), `${props2.modelName}: ${name}@${version}`);
|
|
182
|
-
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, options, props: props2, context })) != null ? _c2 : vnode;
|
|
182
|
+
return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, options: options2, props: props2, context })) != null ? _c2 : vnode;
|
|
183
183
|
};
|
|
184
184
|
const isValid = ref(false);
|
|
185
185
|
const sync = ref(false);
|
|
186
186
|
const rendered = ref(false);
|
|
187
|
+
const component = ref((_a = getCurrentInstance()) == null ? void 0 : _a.proxy);
|
|
187
188
|
const defaultData = props2.getDefaultData(
|
|
188
|
-
Array.isArray(props2.state) ? (
|
|
189
|
+
Array.isArray(props2.state) ? (_b = props2.defaultData) != null ? _b : [] : (_c = props2.defaultData) != null ? _c : {}
|
|
189
190
|
);
|
|
190
191
|
const type = Array.isArray(defaultData) ? [] : {};
|
|
191
|
-
const state = reactive(DataManager.transform(props2.await ? type : (
|
|
192
|
+
const state = reactive(DataManager.transform(props2.await ? type : (_d = props2.state) != null ? _d : type));
|
|
192
193
|
const config = {
|
|
193
194
|
defaultData,
|
|
194
195
|
data: state,
|
|
@@ -197,22 +198,27 @@ var ReactiveView_default = {
|
|
|
197
198
|
notifications: props2.notifications,
|
|
198
199
|
subscriptions: props2.subscriptions
|
|
199
200
|
};
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
} else {
|
|
212
|
-
return Reflect.get(target, property, receiver);
|
|
213
|
-
}
|
|
201
|
+
const getState = new Proxy(props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new DataManager(config), {
|
|
202
|
+
get(target, property, receiver) {
|
|
203
|
+
var _a2, _b2;
|
|
204
|
+
const beforeSetData = (_b2 = (_a2 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a2.beforeSetData) != null ? _b2 : access(component).beforeSetData;
|
|
205
|
+
if (["setData", "replaceData"].includes(property) && typeof beforeSetData === "function") {
|
|
206
|
+
return (...params) => {
|
|
207
|
+
const type2 = Array.isArray(defaultData) ? [] : {};
|
|
208
|
+
beforeSetData(ObjectManager.on(type2).set(...params).get(), target);
|
|
209
|
+
};
|
|
210
|
+
} else {
|
|
211
|
+
return Reflect.get(target, property, receiver);
|
|
214
212
|
}
|
|
215
|
-
}
|
|
213
|
+
}
|
|
214
|
+
});
|
|
215
|
+
const options = {
|
|
216
|
+
parent: { self: component },
|
|
217
|
+
self: { template, getState, isValid }
|
|
218
|
+
};
|
|
219
|
+
const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
|
|
220
|
+
return ($vue) => {
|
|
221
|
+
var _a2, _b2;
|
|
216
222
|
if (props2.await instanceof Promise) {
|
|
217
223
|
nextTick(async () => {
|
|
218
224
|
getState.replaceData(await props2.await);
|
|
@@ -226,15 +232,10 @@ var ReactiveView_default = {
|
|
|
226
232
|
} else {
|
|
227
233
|
rendered.value = true;
|
|
228
234
|
}
|
|
229
|
-
const options = {
|
|
230
|
-
parent: { self: $vue },
|
|
231
|
-
self: { template, getState, isValid }
|
|
232
|
-
};
|
|
233
|
-
const _b2 = (_a2 = props2.setup(options)) != null ? _a2 : options, { parent = {}, self = {} } = _b2, rest = __objRest(_b2, ["parent", "self"]);
|
|
234
235
|
if (context.attrs["onUpdate:modelState"]) {
|
|
235
236
|
const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
|
|
236
237
|
callback: context.attrs["onUpdate:modelState"]
|
|
237
|
-
} : (
|
|
238
|
+
} : (_a2 = context.attrs["onUpdate:modelState"]) != null ? _a2 : {};
|
|
238
239
|
watch(() => ObjectManager.on(state).clone(), (after, before) => {
|
|
239
240
|
var _a3;
|
|
240
241
|
const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
|
|
@@ -249,7 +250,7 @@ var ReactiveView_default = {
|
|
|
249
250
|
if (context.attrs["onUpdate:propsState"] || props2.sync) {
|
|
250
251
|
const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? {
|
|
251
252
|
callback: context.attrs["onUpdate:propsState"]
|
|
252
|
-
} : (
|
|
253
|
+
} : (_b2 = context.attrs["onUpdate:propsState"]) != null ? _b2 : {};
|
|
253
254
|
watch(() => ObjectManager.on(props2.state).clone(), (after, before) => {
|
|
254
255
|
const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
|
|
255
256
|
if (props2.sync && typeof config2.callback !== "function") {
|
|
@@ -333,9 +334,9 @@ function getReactiveViewComponent(component, options = {}) {
|
|
|
333
334
|
};
|
|
334
335
|
const props2 = getProps(options, "setup");
|
|
335
336
|
const slots = typeof component === "function" ? component : () => {
|
|
336
|
-
return (component.type || component).setup ?
|
|
337
|
+
return (component.type || component).setup ? createVNode2(component, component.setup ? {} : props2) : component;
|
|
337
338
|
};
|
|
338
|
-
return model(component) ?
|
|
339
|
+
return model(component) ? createVNode2(component, props2) : createVNode2(ReactiveView_default, props2, slots);
|
|
339
340
|
}
|
|
340
341
|
function getDate(param1, param2) {
|
|
341
342
|
var _a, _b;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@razaman2/reactive-view",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
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",
|