@myparcel-dev/vue-form-builder 1.0.0-beta.44

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.
@@ -0,0 +1,4 @@
1
+ export type { AnyElementConfiguration, AnyElementInstance, ComponentOrHtmlElement, ComponentProps, CreatedElement, CreatedField, CreatedForm, ElementName, FormConfiguration, FormInstance, InteractiveElementConfiguration, InteractiveElementInstance, ModularCreatedElement, ModularCreatedField, PlainElementConfiguration, PlainElementInstance, ResolvedElementConfiguration, Validator, } from '@myparcel-vfb/core';
2
+ export type { SelectOption } from '@myparcel-vfb/utils';
3
+ export { FormHook, MagicForm, createField, createForm, defineField, defineForm, useElement, useForm, useFormBuilder, } from '@myparcel-vfb/core';
4
+ export { MyParcelFormBuilderPlugin, createMyParcelFormBuilderPlugin } from '@myparcel-vfb/plugin';
package/dist/index.js ADDED
@@ -0,0 +1,619 @@
1
+ var le = Object.defineProperty;
2
+ var ue = (s, t, e) => t in s ? le(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
3
+ var n = (s, t, e) => (ue(s, typeof t != "symbol" ? t + "" : t, e), e);
4
+ import * as he from "vue";
5
+ import { inject as K, defineComponent as y, toRefs as q, computed as b, unref as v, openBlock as m, createBlock as w, resolveDynamicComponent as T, mergeProps as G, createSlots as fe, renderList as B, withCtx as k, renderSlot as O, normalizeProps as de, guardReactiveProps as ce, provide as J, h as g, Teleport as me, reactive as C, markRaw as F, ref as f, onMounted as Y, onUnmounted as pe, defineAsyncComponent as be, toValue as o, createElementBlock as A, Fragment as _, Suspense as Q, createCommentVNode as W, withModifiers as L, createVNode as ve, watchEffect as we, watch as H } from "vue";
6
+ import { isOfType as p, asyncEvery as ye } from "@myparcel/ts-utils";
7
+ import { useMemoize as ke, isDefined as Ee } from "@vueuse/core";
8
+ const ge = (s) => p(s, "then") ? s : Promise.resolve(s), z = (s) => s.charAt(0).toUpperCase() + s.slice(1), Ve = (s, t) => {
9
+ const e = [t];
10
+ if (t.startsWith("before")) {
11
+ const r = t.replace(/^before/, "").toLowerCase();
12
+ e.push(r), e.push(`after${z(r)}`);
13
+ }
14
+ if (t.startsWith("after")) {
15
+ const r = t.replace(/^after/, "").toLowerCase();
16
+ e.push(r), e.push(`before${z(r)}`);
17
+ }
18
+ return e.some((r) => s.includes(r));
19
+ };
20
+ class X {
21
+ constructor(t) {
22
+ n(this, "availableHooks");
23
+ n(this, "registeredHooks", []);
24
+ this.availableHooks = t.hookNames ?? [], Object.keys(t).filter((e) => Ve(this.availableHooks, e)).forEach((e) => {
25
+ this.register(e, t[e]);
26
+ });
27
+ }
28
+ getAvailableHooks() {
29
+ return this.availableHooks;
30
+ }
31
+ getRegisteredHooks() {
32
+ return this.registeredHooks;
33
+ }
34
+ async execute(t, ...e) {
35
+ const r = await Promise.all(
36
+ this.registeredHooks.filter((i) => i.name === t).map((i) => i.callback(...e))
37
+ );
38
+ return r[r.length - 1];
39
+ }
40
+ has(t, e) {
41
+ return this.registeredHooks.some((r) => r.name === t && (e == null ? void 0 : e(r)));
42
+ }
43
+ register(t, e) {
44
+ const r = () => this.unregister(t, e);
45
+ return this.has(t, (i) => this.callbackMatches(i, e)) || this.registeredHooks.push({ name: t, callback: e }), r;
46
+ }
47
+ unregister(t, e) {
48
+ const r = () => this.registeredHooks.findIndex((a) => a.name === t && (!e || this.callbackMatches(a, e)));
49
+ let i;
50
+ for (; (i = r()) > -1; )
51
+ this.registeredHooks.splice(i, 1);
52
+ }
53
+ // eslint-disable-next-line class-methods-use-this
54
+ callbackMatches(t, e) {
55
+ return t.callback.toString() === e.toString();
56
+ }
57
+ }
58
+ const Z = (s) => new X(s), Oe = () => ({
59
+ field: {
60
+ elementProp: !0
61
+ },
62
+ fieldDefaults: {
63
+ attributes: {},
64
+ wrapper: !0
65
+ },
66
+ fields: [],
67
+ form: {
68
+ attributes: {},
69
+ tag: "form"
70
+ }
71
+ });
72
+ var c = /* @__PURE__ */ ((s) => (s.BeforeValidate = "beforeValidate", s.AfterValidate = "afterValidate", s.BeforeSubmit = "beforeSubmit", s.AfterSubmit = "afterSubmit", s.BeforeReset = "beforeReset", s.AfterReset = "afterReset", s.ElementChange = "afterElementChange", s.BeforeAddElement = "beforeAddElement", s.AfterAddElement = "afterAddElement", s))(c || {});
73
+ const ee = Object.freeze(Object.values(c)), x = [
74
+ "onCreated",
75
+ "onActivated",
76
+ "onBeforeMount",
77
+ "onBeforeUnmount",
78
+ "onBeforeUpdate",
79
+ "onDeactivated",
80
+ "onMounted",
81
+ "onUnmounted",
82
+ "onUpdated"
83
+ ], te = ["blur", "click", "focus", ...x], Fe = [
84
+ "blur",
85
+ "focus",
86
+ "sanitize",
87
+ "update",
88
+ "validate",
89
+ ...te
90
+ ], P = "onCreated", se = () => ({
91
+ hooks: x,
92
+ register(s, ...t) {
93
+ s.has(P) && s.execute(P, ...t), s.getRegisteredHooks().filter(
94
+ (e) => x.includes(e.name) && e.name !== P
95
+ ).forEach((e) => {
96
+ he[e.name](async () => {
97
+ await s.execute(e.name, ...t);
98
+ });
99
+ });
100
+ }
101
+ }), De = (s) => {
102
+ se().register(s.hooks, s);
103
+ }, re = Symbol("form"), ie = Symbol("element"), Je = () => {
104
+ const s = K(ie);
105
+ if (!s)
106
+ throw new Error("No element found.");
107
+ return s;
108
+ }, M = () => {
109
+ const s = K(re);
110
+ if (!s)
111
+ throw new Error("No form found.");
112
+ return s;
113
+ }, Re = /* @__PURE__ */ y({
114
+ __name: "FormElement",
115
+ props: {
116
+ element: {}
117
+ },
118
+ setup(s) {
119
+ const t = s, e = q(t);
120
+ De(e.element.value);
121
+ const r = b(() => {
122
+ var h, l;
123
+ const a = (l = (h = t.element.form) == null ? void 0 : h.config.field) == null ? void 0 : l.elementProp, u = {
124
+ ...t.element.attributes
125
+ };
126
+ return typeof t.element.component != "string" && a !== !1 && (u.element = t.element), u;
127
+ }), i = b({
128
+ get() {
129
+ return v(t.element.ref);
130
+ },
131
+ set(a) {
132
+ t.element.ref = a;
133
+ }
134
+ });
135
+ return (a, u) => (m(), w(T(a.element.component), G({
136
+ modelValue: i.value,
137
+ "onUpdate:modelValue": u[0] || (u[0] = (h) => i.value = h)
138
+ }, r.value), fe({ _: 2 }, [
139
+ B(Object.keys(a.$slots), (h) => ({
140
+ name: h,
141
+ fn: k((l) => [
142
+ O(a.$slots, h, de(ce(l || {})))
143
+ ])
144
+ }))
145
+ ]), 1040, ["modelValue"]));
146
+ }
147
+ }), $e = (s) => {
148
+ const t = [];
149
+ let e = {};
150
+ return p(s, "children") && (Array.isArray(s.children) ? s.children.forEach((r) => {
151
+ t.push(typeof r == "function" ? r : () => r);
152
+ }) : p(s, "children") ? e = s.children : t.push(s.children)), { ...t, ...e };
153
+ }, N = y({
154
+ name: "FormElementWrapper",
155
+ props: {
156
+ form: {
157
+ type: Object,
158
+ required: !0
159
+ },
160
+ element: {
161
+ type: Object,
162
+ required: !0
163
+ }
164
+ },
165
+ setup(s) {
166
+ J(ie, s.element);
167
+ },
168
+ render() {
169
+ var i, a, u;
170
+ const s = $e(this.element.component);
171
+ let t = g(
172
+ Re,
173
+ {
174
+ ...this.$attrs,
175
+ ...ze(this.element),
176
+ element: this.element
177
+ },
178
+ {
179
+ ...s,
180
+ ...this.element.slots,
181
+ ...this.$slots
182
+ }
183
+ );
184
+ const e = typeof this.element.wrapper != "boolean";
185
+ if (this.element.wrapper === !0 && ((i = this.form.config.field) == null ? void 0 : i.wrapper) || e) {
186
+ const h = t;
187
+ t = g(
188
+ e ? this.element.wrapper : (a = this.form.config.field) == null ? void 0 : a.wrapper,
189
+ {
190
+ ...this.$attrs,
191
+ ...(u = this.form.config.fieldDefaults) == null ? void 0 : u.attributes,
192
+ element: this.element
193
+ },
194
+ { ...this.element.slots, default: () => h }
195
+ );
196
+ }
197
+ return this.element.teleportSelector ? g(me, { to: this.element.teleportSelector }, [t]) : t;
198
+ }
199
+ }), Ce = (s) => y({
200
+ setup() {
201
+ const t = M(), e = f();
202
+ return Y(async () => {
203
+ e.value = await t.addElement(s);
204
+ }), pe(() => {
205
+ e.value && (t.removeElement(e.value.name), e.value = void 0);
206
+ }), {
207
+ element: e,
208
+ form: t
209
+ };
210
+ },
211
+ render() {
212
+ return this.element && g(N, { ...this.$attrs, form: this.form, element: this.element }, this.$slots);
213
+ }
214
+ }), Me = (s) => y({
215
+ setup() {
216
+ const t = M();
217
+ return { element: b(() => s.name && t.getField(s.name)) };
218
+ },
219
+ render() {
220
+ return this.element && g("label", { for: this.element.attributes.id ?? this.element.name }, [this.element.label]);
221
+ }
222
+ }), Se = (s) => y({
223
+ setup() {
224
+ const t = M();
225
+ return { element: b(() => s.name ? t.getField(s.name) : void 0) };
226
+ },
227
+ render() {
228
+ var t, e, r;
229
+ return o((t = this.element) == null ? void 0 : t.errors) && ((r = (e = this.$slots).default) == null ? void 0 : r.call(e, { errors: o(this.element.errors) }));
230
+ }
231
+ }), j = (s) => F(be(() => Promise.resolve(s()))), Ye = (s) => C({
232
+ field: s,
233
+ Component: F(Ce(s)),
234
+ ...p(s, "ref") && {
235
+ ref: s.ref ?? f(),
236
+ Label: j(() => Me(s)),
237
+ Errors: j(() => Se(s))
238
+ }
239
+ }), Ae = /* @__PURE__ */ y({
240
+ __name: "RenderedFormContent",
241
+ setup(s) {
242
+ const t = f(!1), e = M();
243
+ if (!e)
244
+ throw new Error("Form not found");
245
+ const r = b(() => o(e.fields).filter((a) => !a.teleportSelector)), i = b(() => o(e.fields).filter((a) => !!a.teleportSelector));
246
+ return (a, u) => (m(), A(_, null, [
247
+ v(e) ? (m(), w(Q, {
248
+ key: 0,
249
+ onResolve: u[0] || (u[0] = (h) => t.value = !0)
250
+ }, {
251
+ default: k(() => [
252
+ (m(!0), A(_, null, B(r.value, (h, l) => (m(), w(v(N), {
253
+ key: `element--${h.name ?? "unnamed"}--${l}`,
254
+ element: h,
255
+ form: v(e)
256
+ }, null, 8, ["element", "form"]))), 128))
257
+ ]),
258
+ _: 1
259
+ })) : W("", !0),
260
+ v(e) && t.value ? (m(!0), A(_, { key: 1 }, B(i.value, (h, l) => (m(), w(v(N), {
261
+ key: `element--${h.name ?? "unnamed"}--${l}`,
262
+ element: h,
263
+ form: v(e)
264
+ }, null, 8, ["element", "form"]))), 128)) : W("", !0)
265
+ ], 64));
266
+ }
267
+ }), _e = y({
268
+ name: "Fragment",
269
+ props: {
270
+ component: {
271
+ type: [String, Object],
272
+ default: null
273
+ }
274
+ }
275
+ }), Pe = (s, t) => {
276
+ const e = s.__vccOpts || s;
277
+ for (const [r, i] of t)
278
+ e[r] = i;
279
+ return e;
280
+ };
281
+ function Be(s, t, e, r, i, a) {
282
+ return s.component ? (m(), w(T(s.component), { key: 0 }, {
283
+ default: k(() => [
284
+ O(s.$slots, "default")
285
+ ]),
286
+ _: 3
287
+ })) : O(s.$slots, "default", { key: 1 });
288
+ }
289
+ const He = /* @__PURE__ */ Pe(_e, [["render", Be]]), xe = /* @__PURE__ */ y({
290
+ __name: "MagicForm",
291
+ props: {
292
+ form: {}
293
+ },
294
+ setup(s, { emit: t }) {
295
+ const e = f(null), r = s, i = t, u = q(r).form.value;
296
+ return Y(() => {
297
+ const l = o(e);
298
+ l && (r.form.element = l);
299
+ }), J(re, u), ee.forEach((l) => {
300
+ r.form.on(l, (d) => {
301
+ i(l, d);
302
+ });
303
+ }), se().register(u.hooks, u), (l, d) => (m(), w(T(l.form.config.form.tag), G({
304
+ id: l.form.name,
305
+ ref_key: "formElement",
306
+ ref: e
307
+ }, l.form.config.form.attributes, {
308
+ onSubmit: d[0] || (d[0] = L(() => l.form.submit(), ["prevent"])),
309
+ onReset: d[1] || (d[1] = L(() => l.form.reset(), ["prevent"]))
310
+ }), {
311
+ default: k(() => [
312
+ ve(He, {
313
+ component: l.form.config.form.wrapper
314
+ }, {
315
+ default: k(() => [
316
+ l.$slots.default ? (m(), w(Q, { key: 0 }, {
317
+ default: k(() => [
318
+ O(l.$slots, "default")
319
+ ]),
320
+ fallback: k(() => [
321
+ O(l.$slots, "loader")
322
+ ]),
323
+ _: 3
324
+ })) : (m(), w(Ae, { key: 1 }))
325
+ ]),
326
+ _: 3
327
+ }, 8, ["component"])
328
+ ]),
329
+ _: 3
330
+ }, 16, ["id"]));
331
+ }
332
+ }), Ne = (s, t) => ne().register(s, t), Qe = (s, t) => {
333
+ const e = Ne(s, t);
334
+ return {
335
+ Component: F((r, i) => g(xe, { ...i.attrs, form: e }, i.slots)),
336
+ instance: e
337
+ };
338
+ }, Xe = (s) => s, E = (s) => {
339
+ if (typeof s == "string" || typeof s == "boolean")
340
+ return s;
341
+ if (s)
342
+ return F(s);
343
+ }, $ = (s, t) => {
344
+ s && we(() => {
345
+ ge(s()).then((e) => {
346
+ t.value = e;
347
+ });
348
+ });
349
+ };
350
+ class oe {
351
+ constructor(t, e) {
352
+ n(this, "errors", f([]));
353
+ n(this, "attributes");
354
+ n(this, "component");
355
+ n(this, "form");
356
+ n(this, "formattedErrors");
357
+ n(this, "isVisible", f(!0));
358
+ n(this, "name");
359
+ n(this, "props");
360
+ n(this, "wrapper");
361
+ n(this, "config");
362
+ this.hooks = Z({
363
+ ...e,
364
+ hookNames: [...te, ...e.hookNames ?? []]
365
+ });
366
+ const r = this.hooks.getAvailableHooks();
367
+ if (Object.keys(e).filter((i) => !r.includes(i)).forEach((i) => {
368
+ this[i] = e[i];
369
+ }), this.props = C(e.props ?? {}), this.attributes = C(e.attributes ?? {}), this.config = e, this.form = t, this.name = e.name, this.wrapper = e.wrapper ?? !0, this.setVisible(e.visible ?? !0), this.formattedErrors = b(() => o(this.errors).map((i) => typeof i == "function" ? i() : i)), "visibleWhen" in e && $(() => this.config.visibleWhen(this), this.isVisible), typeof e.component == "string") {
370
+ this.component = e.component;
371
+ return;
372
+ }
373
+ this.component = F(e.component);
374
+ }
375
+ setVisible(t) {
376
+ this.isVisible.value = t;
377
+ }
378
+ resetValidation() {
379
+ this.errors.value = [];
380
+ }
381
+ }
382
+ const Te = (s) => ({
383
+ validate: (t, e) => !(e == null || e === ""),
384
+ errorMessage: s
385
+ });
386
+ class Ie extends oe {
387
+ // eslint-disable-next-line max-lines-per-function
388
+ constructor(e, r) {
389
+ var i, a, u;
390
+ super(e, { ...r, hookNames: Fe });
391
+ n(this, "errorsTarget");
392
+ n(this, "isDirty", f(!1));
393
+ n(this, "isDisabled", f(!1));
394
+ n(this, "isOptional", f(!1));
395
+ n(this, "isReadOnly", f(!1));
396
+ n(this, "isSuspended", f(!1));
397
+ n(this, "isTouched", f(!1));
398
+ n(this, "isValid", f(!0));
399
+ n(this, "label");
400
+ n(this, "lazy", !1);
401
+ n(this, "ref");
402
+ n(this, "validators", f([]));
403
+ n(this, "initialValue");
404
+ n(this, "blur", async () => {
405
+ await this.hooks.execute("beforeBlur", this, o(this.ref)), this.isSuspended.value = !0, this.ref.value = await this.hooks.execute("sanitize", this, o(this.ref)) ?? o(this.ref), o(this.isDirty) && await this.validate(), this.isTouched.value = !0, this.isSuspended.value = !1, await this.hooks.execute("afterBlur", this, o(this.ref));
406
+ });
407
+ n(this, "focus", async (e, r) => {
408
+ await this.hooks.execute("beforeFocus", this, r), await this.hooks.execute("focus", this, r), await this.hooks.execute("afterFocus", this, r);
409
+ });
410
+ n(this, "reset", () => {
411
+ this.resetValidation(), this.isDirty.value = !1, this.isTouched.value = !1, this.ref.value = this.initialValue;
412
+ });
413
+ n(this, "validate", async () => {
414
+ var h;
415
+ if (this.resetValidation(), await this.hooks.execute("beforeValidate", this, o(this.ref)), o(this.isDisabled))
416
+ return this.isValid.value = !0, o(this.isValid);
417
+ const e = async (l) => {
418
+ var I;
419
+ const d = await l.validate(this, o(this.ref));
420
+ if (!d && l.errorMessage)
421
+ if (this.errorsTarget) {
422
+ const S = o(this.form.fields).find(
423
+ (ae) => ae.name === this.errorsTarget
424
+ );
425
+ (I = o(S == null ? void 0 : S.errors)) == null || I.push(l.errorMessage);
426
+ } else
427
+ o(this.errors).push(l.errorMessage);
428
+ return d;
429
+ }, r = o(this.validators).filter((l) => !l.precedence), i = o(this.validators).filter((l) => p(l, "precedence")).sort((l, d) => (l.precedence ?? 0) - (d.precedence ?? 0));
430
+ o(this.isOptional) || r.push(Te(((h = this.form.config.validationMessages) == null ? void 0 : h.required) ?? ""));
431
+ const a = (await Promise.all(r.map(e))).every(Boolean), u = await ye(i, e);
432
+ return this.isValid.value = a && u, await this.hooks.execute("afterValidate", this, o(this.ref), o(this.isValid)), o(this.isValid);
433
+ });
434
+ this.ref = r.ref, (i = e.config.initialValues) != null && i.hasOwnProperty(r.name) && (this.ref.value = e.config.initialValues[r.name]), this.initialValue = o(this.ref), this.lazy = r.lazy ?? !1, this.errorsTarget = r.errorsTarget, this.label = r.label ? ((u = (a = e.config).renderLabel) == null ? void 0 : u.call(a, r.label)) ?? r.label : void 0, this.isDisabled.value = r.disabled ?? !1, this.isOptional.value = r.optional ?? !1, this.isReadOnly.value = r.readOnly ?? !1, this.createValidators(r), H(this.ref, async (h, l) => {
435
+ await this.hooks.execute("beforeUpdate", this, h, l), this.isDirty.value = !0, await this.hooks.execute("afterUpdate", this, h, l);
436
+ }), H(e.stable, (h) => {
437
+ h && (r.disabledWhen && $(() => r.disabledWhen(this), this.isDisabled), r.optionalWhen && $(() => r.optionalWhen(this), this.isOptional), r.readOnlyWhen && $(() => r.readOnlyWhen(this), this.isReadOnly));
438
+ });
439
+ }
440
+ setDisabled(e) {
441
+ this.isDisabled.value = e;
442
+ }
443
+ setOptional(e) {
444
+ this.isOptional.value = e;
445
+ }
446
+ setReadOnly(e) {
447
+ this.isReadOnly.value = e;
448
+ }
449
+ createValidators(e) {
450
+ let r = [];
451
+ p(e, "validate") && (r = [
452
+ {
453
+ validate: e.validate,
454
+ errorMessage: e.errorMessage
455
+ }
456
+ ]), p(e, "validators") && (r = e.validators ?? []), this.validators.value = r;
457
+ }
458
+ }
459
+ class We {
460
+ constructor(t, e) {
461
+ n(this, "config");
462
+ n(this, "fields", f([]));
463
+ n(this, "hooks");
464
+ n(this, "interactiveFields");
465
+ n(this, "isDirty");
466
+ n(this, "isValid", f(!0));
467
+ n(this, "model", {});
468
+ n(this, "name");
469
+ n(this, "off");
470
+ n(this, "on");
471
+ n(this, "stable", f(!1));
472
+ n(this, "values");
473
+ n(this, "getFieldMemoized", ke((t) => o(this.fields).find((r) => r.name === t) ?? null));
474
+ const { fields: r, ...i } = e;
475
+ e.hookNames = [...ee, ...e.hookNames ?? []], this.hooks = Z(e), this.on = this.hooks.register.bind(this.hooks), this.off = this.hooks.unregister.bind(this.hooks), this.name = t, this.config = i, this.values = C({}), E(this.config.field.wrapper), E(this.config.fieldDefaults.wrapper), r.forEach((a) => {
476
+ const u = this.createFieldInstance(a, this);
477
+ o(this.fields).push(u);
478
+ }), this.interactiveFields = b(() => o(this.fields).filter((a) => p(a, "ref"))), this.isDirty = b(() => o(this.interactiveFields).some((a) => o(a.isDirty))), this.stable.value = !0;
479
+ }
480
+ async addElement(t, e, r = "after") {
481
+ await this.hooks.execute(c.BeforeAddElement, this, t);
482
+ const i = e ? o(this.fields).findIndex((h) => h.name === e) : o(this.fields).length;
483
+ if (e && i === -1) {
484
+ console.error(`Field ${e} not found in form ${this.name}`);
485
+ return;
486
+ }
487
+ const a = r === "after" ? i + 1 : i, u = this.createFieldInstance(t, this);
488
+ return o(this.fields).splice(a, 0, u), await this.hooks.execute(c.AfterAddElement, this, t), u;
489
+ }
490
+ getField(t) {
491
+ return this.getFieldMemoized(t);
492
+ }
493
+ getValue(t) {
494
+ const e = this.ensureGetField(t);
495
+ return o(e.ref);
496
+ }
497
+ getValues() {
498
+ return o(this.values);
499
+ }
500
+ removeElement(t) {
501
+ const e = o(this.fields).findIndex((r) => r.name === t);
502
+ o(this.fields).splice(e, 1), this.getFieldMemoized.delete(t);
503
+ }
504
+ async reset() {
505
+ await this.hooks.execute(c.BeforeReset, this), await Promise.all(o(this.interactiveFields).map((t) => t.reset())), await this.hooks.execute(c.AfterReset, this);
506
+ }
507
+ setValue(t, e) {
508
+ const r = this.getField(t);
509
+ r && (r.ref.value = e);
510
+ }
511
+ setValues(t) {
512
+ Object.entries(t).forEach(([e, r]) => this.setValue(e, r));
513
+ }
514
+ async submit() {
515
+ await this.hooks.execute(c.BeforeSubmit, this), await this.validate(), await this.hooks.execute(c.AfterSubmit, this);
516
+ }
517
+ async validate() {
518
+ await this.hooks.execute(c.BeforeValidate, this);
519
+ const t = await Promise.all(
520
+ o(this.fields).map((e) => p(e, "ref") ? e.validate() : (e.resetValidation(), !0))
521
+ );
522
+ return this.isValid.value = t.every(Boolean), await this.hooks.execute(c.AfterValidate, this), o(this.isValid);
523
+ }
524
+ ensureGetField(t) {
525
+ const e = this.getField(t);
526
+ if (!e)
527
+ throw new Error(`Field ${t} not found in form ${this.name}`);
528
+ return e;
529
+ }
530
+ createFieldInstance(t, e) {
531
+ var a;
532
+ const r = {
533
+ ...e.config.fieldDefaults,
534
+ ...t,
535
+ attributes: {
536
+ ...(a = e.config.fieldDefaults) == null ? void 0 : a.attributes,
537
+ ...t.attributes
538
+ }
539
+ };
540
+ if (E(r.component), E(r.wrapper), !p(r, "ref")) {
541
+ const u = new oe(e, r);
542
+ return this.registerElement(r.name, u);
543
+ }
544
+ const i = new Ie(e, r);
545
+ return H(i.ref, async (u) => {
546
+ await this.hooks.execute(c.ElementChange, this, i, u), o(i.isDisabled) || (this.values[r.name] = u);
547
+ }), o(i.isDisabled) || (this.values[r.name] = v(i.ref)), this.registerElement(r.name, i);
548
+ }
549
+ registerElement(t, e) {
550
+ return Ee(t) && (this.model[t] = e, this.getFieldMemoized.delete(t)), e;
551
+ }
552
+ }
553
+ let D, V, R;
554
+ const Le = "register", ne = () => (D ?? (D = f({})), V ?? (V = f(Oe())), R ?? (R = new X({
555
+ hookNames: [Le]
556
+ })), {
557
+ forms: D,
558
+ defaults: V,
559
+ on(s, t) {
560
+ R.register(s, t);
561
+ },
562
+ getForm(s) {
563
+ return o(D)[s];
564
+ },
565
+ // @ts-expect-error todo
566
+ register(s, t) {
567
+ R.execute("beforeRegister");
568
+ const e = new We(s, U(o(V), t));
569
+ return o(D)[s] = e, R.execute("afterRegister", e), e;
570
+ },
571
+ setDefaults(s) {
572
+ V.value = U(o(V), s);
573
+ }
574
+ }), U = (s, t) => {
575
+ var e, r, i, a, u, h;
576
+ return {
577
+ ...s,
578
+ ...t,
579
+ fields: [...s.fields ?? [], ...t.fields ?? []],
580
+ form: {
581
+ ...s.form,
582
+ ...t.form,
583
+ wrapper: E(((e = t.form) == null ? void 0 : e.wrapper) ?? ((r = s.form) == null ? void 0 : r.wrapper)),
584
+ attributes: {
585
+ ...s.form.attributes,
586
+ ...(i = t.form) == null ? void 0 : i.attributes
587
+ }
588
+ },
589
+ fieldDefaults: {
590
+ ...s.fieldDefaults,
591
+ ...t.fieldDefaults,
592
+ wrapper: E(((a = t.fieldDefaults) == null ? void 0 : a.wrapper) ?? ((u = s.fieldDefaults) == null ? void 0 : u.wrapper)),
593
+ attributes: {
594
+ ...s.fieldDefaults.attributes,
595
+ ...(h = t.fieldDefaults) == null ? void 0 : h.attributes
596
+ }
597
+ }
598
+ };
599
+ }, ze = (s) => ({}), je = {
600
+ install(s, t) {
601
+ const e = ne();
602
+ s._context.config.globalProperties.$formBuilder = e, t && e.setDefaults(t);
603
+ }
604
+ }, Ze = (s) => ({
605
+ install: (t) => je.install(t, s)
606
+ });
607
+ export {
608
+ c as FormHook,
609
+ xe as MagicForm,
610
+ je as MyParcelFormBuilderPlugin,
611
+ Ye as createField,
612
+ Qe as createForm,
613
+ Ze as createMyParcelFormBuilderPlugin,
614
+ Xe as defineField,
615
+ Ne as defineForm,
616
+ Je as useElement,
617
+ M as useForm,
618
+ ne as useFormBuilder
619
+ };
package/package.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "name": "@myparcel-dev/vue-form-builder",
3
+ "version": "1.0.0-beta.44",
4
+ "keywords": [
5
+ "vue",
6
+ "form-builder",
7
+ "form",
8
+ "vue3"
9
+ ],
10
+ "license": "MIT",
11
+ "type": "module",
12
+ "exports": "./dist/index.js",
13
+ "types": "./dist/index.d.ts",
14
+ "files": [
15
+ "./dist"
16
+ ],
17
+ "scripts": {
18
+ "build": "run ws:vite:build \"$(pwd)\"",
19
+ "build:dev": "run ws:vite:build:dev \"$(pwd)\"",
20
+ "clean": "run ws:clean \"$(pwd)\"",
21
+ "test": "run ws:test \"$(pwd)\"",
22
+ "test:coverage": "run ws:test:coverage \"$(pwd)\"",
23
+ "test:run": "run ws:test:run \"$(pwd)\"",
24
+ "test:update": "run ws:test:update \"$(pwd)\"",
25
+ "typecheck": "run ws:vite:typecheck \"$(pwd)\""
26
+ },
27
+ "dependencies": {
28
+ "@myparcel-dev/ts-utils": ">= 1.6.0",
29
+ "@myparcel-vfb/core": "^1.0.0-beta.40",
30
+ "@myparcel-vfb/hook-manager": "^1.0.0-beta.12",
31
+ "@myparcel-vfb/plugin": "^1.0.0-beta.40",
32
+ "@myparcel-vfb/utils": "^1.0.0-beta.7",
33
+ "@vueuse/core": ">= 10.1.0"
34
+ },
35
+ "devDependencies": {
36
+ "@vitejs/plugin-vue": "^4.0.0",
37
+ "@vitest/coverage-v8": "^1.0.0",
38
+ "typescript": "^5.0.0",
39
+ "vite": "^5.0.0",
40
+ "vite-plugin-custom-tsconfig": "^1.0.4",
41
+ "vite-plugin-dts": "^2.1.0",
42
+ "vitest": "^1.0.0",
43
+ "vue": "^3.2.47",
44
+ "vue-tsc": "^1.6.5"
45
+ },
46
+ "peerDependencies": {
47
+ "vue": "^3"
48
+ },
49
+ "publishConfig": {
50
+ "access": "public"
51
+ }
52
+ }