@frollo/frollo-web-ui 9.0.1 → 9.0.2

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.
Files changed (96) hide show
  1. package/cjs/index.js +10733 -3060
  2. package/esm/{_rollupPluginBabelHelpers-DODWUb5N.js → _rollupPluginBabelHelpers-BKlDnZ7n.js} +1 -1
  3. package/esm/fw-accordion.js +15 -18
  4. package/esm/fw-alert.js +32 -25
  5. package/esm/fw-bar-chart.js +265 -93
  6. package/esm/fw-button-DZTHZLjk.js +318 -0
  7. package/esm/fw-button.js +2 -2
  8. package/esm/{fw-card-D45R4kN-.js → fw-card-XGtsK2bM.js} +7 -10
  9. package/esm/fw-card.js +2 -2
  10. package/esm/fw-checkbox.js +8 -11
  11. package/esm/fw-date-picker.js +85 -49
  12. package/esm/fw-drawer.js +8 -8
  13. package/esm/{fw-dropdown-58wyuzsW.js → fw-dropdown-CSmYTm5O.js} +11 -14
  14. package/esm/fw-dropdown.js +7 -6
  15. package/esm/fw-form.js +1 -1
  16. package/esm/fw-icons.js +11 -12
  17. package/esm/fw-image-A2lXYs0u.js +325 -0
  18. package/esm/fw-image.js +5 -4
  19. package/esm/{fw-input-C2-cZ-BY.js → fw-input-BiPWWfK3.js} +12 -19
  20. package/esm/fw-input.js +3 -3
  21. package/esm/fw-loading-bar-3x4tkF1B.js +37 -0
  22. package/esm/fw-loading.js +89 -40
  23. package/esm/fw-media-picker.js +10 -653
  24. package/esm/fw-modal.js +11 -10
  25. package/esm/fw-navigation-menu.js +36 -41
  26. package/esm/fw-popover-BZ-zqUme.js +330 -0
  27. package/esm/fw-popover.js +2 -3
  28. package/esm/fw-progress-bar.js +1 -1
  29. package/esm/fw-provider-list.js +109 -87
  30. package/esm/fw-sidebar-menu.js +58 -51
  31. package/esm/fw-slider.js +64 -61
  32. package/esm/fw-switch.js +76 -49
  33. package/esm/fw-table-row-D6FdCJMs.js +447 -0
  34. package/esm/fw-table.js +5 -6
  35. package/esm/fw-tabs.js +87 -35
  36. package/esm/fw-tag-BRxPc4zc.js +199 -0
  37. package/esm/fw-tag.js +4 -4
  38. package/esm/fw-toast.js +58 -76
  39. package/esm/fw-transactions-card.js +20 -20
  40. package/esm/{get-root-colours-DCjlYelc.js → get-root-colours-DCCAnRF4.js} +3 -1
  41. package/esm/index-C8z11jcJ.js +7583 -0
  42. package/esm/index-DHyRsKsZ.js +843 -0
  43. package/esm/index-eP2GMSdQ.js +755 -0
  44. package/esm/index.js +54 -61
  45. package/esm/{uniqueId-DZdGzBh8.js → uniqueId-DK6xzFd8.js} +1 -1
  46. package/esm/{vee-validate.esm-3ptvCDR1.js → vee-validate-0dtT5GSQ.js} +182 -305
  47. package/frollo-web-ui.esm.js +10790 -3115
  48. package/icons/circle-check.svg +4 -0
  49. package/index.d.ts +1522 -586
  50. package/package.json +11 -11
  51. package/types/components/fw-accordion/fw-accordion.vue.d.ts +9 -7
  52. package/types/components/fw-alert/fw-alert.vue.d.ts +11 -6
  53. package/types/components/fw-bar-chart/fw-bar-chart.vue.d.ts +15 -64
  54. package/types/components/fw-button/fw-button.vue.d.ts +11 -7
  55. package/types/components/fw-card/fw-card.vue.d.ts +6 -6
  56. package/types/components/fw-checkbox/fw-checkbox.vue.d.ts +365 -5
  57. package/types/components/fw-date-picker/fw-date-picker.vue.d.ts +3 -242
  58. package/types/components/fw-drawer/fw-drawer.vue.d.ts +11 -8
  59. package/types/components/fw-dropdown/fw-dropdown.vue.d.ts +20 -12
  60. package/types/components/fw-icons/fw-success-animation.vue.d.ts +1 -1
  61. package/types/components/fw-image/fw-image.vue.d.ts +33 -7
  62. package/types/components/fw-input/fw-input.vue.d.ts +368 -10
  63. package/types/components/fw-loading/fw-loading-bar.vue.d.ts +7 -5
  64. package/types/components/fw-loading/fw-loading-card.vue.d.ts +3 -1
  65. package/types/components/fw-loading/fw-loading-dots.vue.d.ts +8 -1
  66. package/types/components/fw-loading/fw-loading-table.vue.d.ts +11 -6
  67. package/types/components/fw-media-picker/fw-media-picker.vue.d.ts +27 -18
  68. package/types/components/fw-modal/fw-modal.vue.d.ts +11 -7
  69. package/types/components/fw-navigation-menu/fw-navigation-menu.vue.d.ts +12 -8
  70. package/types/components/fw-popover/fw-popover.vue.d.ts +16 -21
  71. package/types/components/fw-progress-bar/fw-progress-bar.vue.d.ts +6 -4
  72. package/types/components/fw-provider-list/fw-provider-list.vue.d.ts +20 -45
  73. package/types/components/fw-sidebar-menu/fw-sidebar-menu.vue.d.ts +13 -7
  74. package/types/components/fw-slider/fw-slider.vue.d.ts +11 -8
  75. package/types/components/fw-switch/fw-switch.vue.d.ts +383 -9
  76. package/types/components/fw-switch/index.types.d.ts +1 -0
  77. package/types/components/fw-table/fw-table-head.vue.d.ts +1 -1
  78. package/types/components/fw-table/fw-table-row.vue.d.ts +1 -1
  79. package/types/components/fw-table/fw-table.vue.d.ts +40 -19
  80. package/types/components/fw-table/index.types.d.ts +36 -2
  81. package/types/components/fw-tabs/fw-tab.vue.d.ts +4 -8
  82. package/types/components/fw-tabs/fw-tabs.vue.d.ts +11 -8
  83. package/types/components/fw-tabs/index.types.d.ts +14 -4
  84. package/types/components/fw-tag/fw-tag.vue.d.ts +14 -8
  85. package/types/components/fw-toast/fw-toast.vue.d.ts +17 -22
  86. package/types/components/fw-transactions-card/fw-transactions-card.vue.d.ts +6 -3
  87. package/types/directives/lazy-loader.d.ts +11 -2
  88. package/types/helpers/get-root-colours.d.ts +1 -0
  89. package/web-components/index.js +16793 -7700
  90. package/esm/fw-button-YMoW4x4c.js +0 -296
  91. package/esm/fw-image-D-OHafdw.js +0 -217
  92. package/esm/fw-loading-bar-DecYSBC_.js +0 -45
  93. package/esm/fw-popover-B4bsfuxm.js +0 -620
  94. package/esm/fw-table-row-Cgi8871h.js +0 -389
  95. package/esm/fw-tag-fDo50Nw7.js +0 -177
  96. package/esm/index-BsEH8YYr.js +0 -979
@@ -1,176 +1,8 @@
1
1
  import { getCurrentInstance, inject, warn as warn$1, ref, watch, computed, toValue, nextTick, unref, isRef, reactive, onUnmounted, onMounted, provide, onBeforeUnmount, defineComponent, toRef, resolveDynamicComponent, h, shallowRef, readonly, watchEffect } from 'vue';
2
2
 
3
- function getDevtoolsGlobalHook() {
4
- return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
5
- }
6
- function getTarget() {
7
- // @ts-expect-error navigator and windows are not available in all environments
8
- return (typeof navigator !== 'undefined' && typeof window !== 'undefined')
9
- ? window
10
- : typeof globalThis !== 'undefined'
11
- ? globalThis
12
- : {};
13
- }
14
- const isProxyAvailable = typeof Proxy === 'function';
15
-
16
- const HOOK_SETUP = 'devtools-plugin:setup';
17
- const HOOK_PLUGIN_SETTINGS_SET = 'plugin:settings:set';
18
-
19
- let supported;
20
- let perf;
21
- function isPerformanceSupported() {
22
- var _a;
23
- if (supported !== undefined) {
24
- return supported;
25
- }
26
- if (typeof window !== 'undefined' && window.performance) {
27
- supported = true;
28
- perf = window.performance;
29
- }
30
- else if (typeof globalThis !== 'undefined' && ((_a = globalThis.perf_hooks) === null || _a === void 0 ? void 0 : _a.performance)) {
31
- supported = true;
32
- perf = globalThis.perf_hooks.performance;
33
- }
34
- else {
35
- supported = false;
36
- }
37
- return supported;
38
- }
39
- function now() {
40
- return isPerformanceSupported() ? perf.now() : Date.now();
41
- }
42
-
43
- class ApiProxy {
44
- constructor(plugin, hook) {
45
- this.target = null;
46
- this.targetQueue = [];
47
- this.onQueue = [];
48
- this.plugin = plugin;
49
- this.hook = hook;
50
- const defaultSettings = {};
51
- if (plugin.settings) {
52
- for (const id in plugin.settings) {
53
- const item = plugin.settings[id];
54
- defaultSettings[id] = item.defaultValue;
55
- }
56
- }
57
- const localSettingsSaveId = `__vue-devtools-plugin-settings__${plugin.id}`;
58
- let currentSettings = Object.assign({}, defaultSettings);
59
- try {
60
- const raw = localStorage.getItem(localSettingsSaveId);
61
- const data = JSON.parse(raw);
62
- Object.assign(currentSettings, data);
63
- }
64
- catch (e) {
65
- // noop
66
- }
67
- this.fallbacks = {
68
- getSettings() {
69
- return currentSettings;
70
- },
71
- setSettings(value) {
72
- try {
73
- localStorage.setItem(localSettingsSaveId, JSON.stringify(value));
74
- }
75
- catch (e) {
76
- // noop
77
- }
78
- currentSettings = value;
79
- },
80
- now() {
81
- return now();
82
- },
83
- };
84
- if (hook) {
85
- hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
86
- if (pluginId === this.plugin.id) {
87
- this.fallbacks.setSettings(value);
88
- }
89
- });
90
- }
91
- this.proxiedOn = new Proxy({}, {
92
- get: (_target, prop) => {
93
- if (this.target) {
94
- return this.target.on[prop];
95
- }
96
- else {
97
- return (...args) => {
98
- this.onQueue.push({
99
- method: prop,
100
- args,
101
- });
102
- };
103
- }
104
- },
105
- });
106
- this.proxiedTarget = new Proxy({}, {
107
- get: (_target, prop) => {
108
- if (this.target) {
109
- return this.target[prop];
110
- }
111
- else if (prop === 'on') {
112
- return this.proxiedOn;
113
- }
114
- else if (Object.keys(this.fallbacks).includes(prop)) {
115
- return (...args) => {
116
- this.targetQueue.push({
117
- method: prop,
118
- args,
119
- resolve: () => { },
120
- });
121
- return this.fallbacks[prop](...args);
122
- };
123
- }
124
- else {
125
- return (...args) => {
126
- return new Promise((resolve) => {
127
- this.targetQueue.push({
128
- method: prop,
129
- args,
130
- resolve,
131
- });
132
- });
133
- };
134
- }
135
- },
136
- });
137
- }
138
- async setRealTarget(target) {
139
- this.target = target;
140
- for (const item of this.onQueue) {
141
- this.target.on[item.method](...item.args);
142
- }
143
- for (const item of this.targetQueue) {
144
- item.resolve(await this.target[item.method](...item.args));
145
- }
146
- }
147
- }
148
-
149
- function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
150
- const descriptor = pluginDescriptor;
151
- const target = getTarget();
152
- const hook = getDevtoolsGlobalHook();
153
- const enableProxy = isProxyAvailable && descriptor.enableEarlyProxy;
154
- if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !enableProxy)) {
155
- hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
156
- }
157
- else {
158
- const proxy = enableProxy ? new ApiProxy(descriptor, hook) : null;
159
- const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
160
- list.push({
161
- pluginDescriptor: descriptor,
162
- setupFn,
163
- proxy,
164
- });
165
- if (proxy) {
166
- setupFn(proxy.proxiedTarget);
167
- }
168
- }
169
- }
170
-
171
3
  /**
172
- * vee-validate v4.13.1
173
- * (c) 2024 Abdelrahman Awad
4
+ * vee-validate v4.15.1
5
+ * (c) 2025 Abdelrahman Awad
174
6
  * @license MIT
175
7
  */
176
8
 
@@ -323,6 +155,7 @@ function klona(x) {
323
155
  }
324
156
 
325
157
  const FormContextKey = Symbol('vee-validate-form');
158
+ const PublicFormContextKey = Symbol('vee-validate-form-context');
326
159
  const FieldContextKey = Symbol('vee-validate-field-instance');
327
160
  const IS_ABSENT = Symbol('Default empty value');
328
161
 
@@ -411,6 +244,8 @@ function isPropPresent(obj, prop) {
411
244
  * Compares if two values are the same borrowed from:
412
245
  * https://github.com/epoberezkin/fast-deep-equal
413
246
  * We added a case for file matching since `Object.keys` doesn't work with Files.
247
+ *
248
+ * NB: keys with the value undefined are ignored in the evaluation and considered equal to missing keys.
414
249
  * */
415
250
  function isEqual(a, b) {
416
251
  if (a === b)
@@ -476,8 +311,16 @@ function isEqual(a, b) {
476
311
  return a.valueOf() === b.valueOf();
477
312
  if (a.toString !== Object.prototype.toString)
478
313
  return a.toString() === b.toString();
314
+ // Remove undefined values before object comparison
315
+ a = normalizeObject(a);
316
+ b = normalizeObject(b);
479
317
  keys = Object.keys(a);
480
318
  length = keys.length;
319
+ if (length !== Object.keys(b).length)
320
+ return false;
321
+ for (i = length; i-- !== 0;)
322
+ if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
323
+ return false;
481
324
  for (i = length; i-- !== 0;) {
482
325
  // eslint-disable-next-line no-var
483
326
  var key = keys[i];
@@ -489,6 +332,14 @@ function isEqual(a, b) {
489
332
  // true if both NaN, false otherwise
490
333
  return a !== a && b !== b;
491
334
  }
335
+ /**
336
+ * Returns a new object where keys with an `undefined` value are removed.
337
+ *
338
+ * @param a object to normalize
339
+ */
340
+ function normalizeObject(a) {
341
+ return Object.fromEntries(Object.entries(a).filter(([, value]) => value !== undefined));
342
+ }
492
343
  function isFile(a) {
493
344
  if (!isClient) {
494
345
  return false;
@@ -891,7 +742,8 @@ const parseRule = (rule) => {
891
742
  };
892
743
  function createLocator(value) {
893
744
  const locator = (crossTable) => {
894
- const val = getFromPath(crossTable, value) || crossTable[value];
745
+ var _a;
746
+ const val = (_a = getFromPath(crossTable, value)) !== null && _a !== void 0 ? _a : crossTable[value];
895
747
  return val;
896
748
  };
897
749
  locator.__locatorRef = value;
@@ -1113,7 +965,7 @@ function fillTargetValues(params, crossTable) {
1113
965
  }
1114
966
  async function validateTypedSchema(schema, values) {
1115
967
  const typedSchema = isTypedSchema(schema) ? schema : yupToTypedSchema(schema);
1116
- const validationResult = await typedSchema.parse(klona(values));
968
+ const validationResult = await typedSchema.parse(klona(values), { formData: klona(values) });
1117
969
  const results = {};
1118
970
  const errors = {};
1119
971
  for (const error of validationResult.errors) {
@@ -1338,21 +1190,138 @@ function createFieldErrors() {
1338
1190
  };
1339
1191
  }
1340
1192
 
1341
- function installDevtoolsPlugin(app) {
1193
+ const DEVTOOLS_FORMS = {};
1194
+ const DEVTOOLS_FIELDS = {};
1195
+ const INSPECTOR_ID = 'vee-validate-inspector';
1196
+ const COLORS = {
1197
+ error: 0xbd4b4b,
1198
+ success: 0x06d77b,
1199
+ unknown: 0x54436b,
1200
+ white: 0xffffff,
1201
+ black: 0x000000,
1202
+ blue: 0x035397,
1203
+ purple: 0xb980f0,
1204
+ orange: 0xf5a962,
1205
+ gray: 0xbbbfca,
1206
+ };
1207
+ let SELECTED_NODE = null;
1208
+ /**
1209
+ * Plugin API
1210
+ */
1211
+ let API;
1212
+ async function installDevtoolsPlugin(app) {
1342
1213
  if (("production" !== 'production')) {
1343
- setupDevtoolsPlugin({
1214
+ if (!isClient) {
1215
+ return;
1216
+ }
1217
+ const devtools = await import('./index-C8z11jcJ.js');
1218
+ devtools.setupDevtoolsPlugin({
1344
1219
  id: 'vee-validate-devtools-plugin',
1345
1220
  label: 'VeeValidate Plugin',
1346
1221
  packageName: 'vee-validate',
1347
1222
  homepage: 'https://vee-validate.logaretm.com/v4',
1348
1223
  app,
1349
1224
  logo: 'https://vee-validate.logaretm.com/v4/logo.png',
1350
- }, setupApiHooks);
1225
+ }, api => {
1226
+ API = api;
1227
+ api.addInspector({
1228
+ id: INSPECTOR_ID,
1229
+ icon: 'rule',
1230
+ label: 'vee-validate',
1231
+ noSelectionText: 'Select a vee-validate node to inspect',
1232
+ actions: [
1233
+ {
1234
+ icon: 'done_outline',
1235
+ tooltip: 'Validate selected item',
1236
+ action: async () => {
1237
+ if (!SELECTED_NODE) {
1238
+ // eslint-disable-next-line no-console
1239
+ console.error('There is not a valid selected vee-validate node or component');
1240
+ return;
1241
+ }
1242
+ if (SELECTED_NODE.type === 'field') {
1243
+ await SELECTED_NODE.field.validate();
1244
+ return;
1245
+ }
1246
+ if (SELECTED_NODE.type === 'form') {
1247
+ await SELECTED_NODE.form.validate();
1248
+ return;
1249
+ }
1250
+ if (SELECTED_NODE.type === 'pathState') {
1251
+ await SELECTED_NODE.form.validateField(SELECTED_NODE.state.path);
1252
+ }
1253
+ },
1254
+ },
1255
+ {
1256
+ icon: 'delete_sweep',
1257
+ tooltip: 'Clear validation state of the selected item',
1258
+ action: () => {
1259
+ if (!SELECTED_NODE) {
1260
+ // eslint-disable-next-line no-console
1261
+ console.error('There is not a valid selected vee-validate node or component');
1262
+ return;
1263
+ }
1264
+ if (SELECTED_NODE.type === 'field') {
1265
+ SELECTED_NODE.field.resetField();
1266
+ return;
1267
+ }
1268
+ if (SELECTED_NODE.type === 'form') {
1269
+ SELECTED_NODE.form.resetForm();
1270
+ }
1271
+ if (SELECTED_NODE.type === 'pathState') {
1272
+ SELECTED_NODE.form.resetField(SELECTED_NODE.state.path);
1273
+ }
1274
+ },
1275
+ },
1276
+ ],
1277
+ });
1278
+ api.on.getInspectorTree(payload => {
1279
+ if (payload.inspectorId !== INSPECTOR_ID) {
1280
+ return;
1281
+ }
1282
+ const forms = Object.values(DEVTOOLS_FORMS);
1283
+ const fields = Object.values(DEVTOOLS_FIELDS);
1284
+ payload.rootNodes = [
1285
+ ...forms.map(mapFormForDevtoolsInspector),
1286
+ ...fields.map(field => mapFieldForDevtoolsInspector(field)),
1287
+ ];
1288
+ });
1289
+ api.on.getInspectorState(payload => {
1290
+ if (payload.inspectorId !== INSPECTOR_ID) {
1291
+ return;
1292
+ }
1293
+ const { form, field, state, type } = decodeNodeId(payload.nodeId);
1294
+ api.unhighlightElement();
1295
+ if (form && type === 'form') {
1296
+ payload.state = buildFormState(form);
1297
+ SELECTED_NODE = { type: 'form', form };
1298
+ api.highlightElement(form._vm);
1299
+ return;
1300
+ }
1301
+ if (state && type === 'pathState' && form) {
1302
+ payload.state = buildFieldState(state);
1303
+ SELECTED_NODE = { type: 'pathState', state, form };
1304
+ return;
1305
+ }
1306
+ if (field && type === 'field') {
1307
+ payload.state = buildFieldState({
1308
+ errors: field.errors.value,
1309
+ dirty: field.meta.dirty,
1310
+ valid: field.meta.valid,
1311
+ touched: field.meta.touched,
1312
+ value: field.value.value,
1313
+ initialValue: field.meta.initialValue,
1314
+ });
1315
+ SELECTED_NODE = { field, type: 'field' };
1316
+ api.highlightElement(field._vm);
1317
+ return;
1318
+ }
1319
+ SELECTED_NODE = null;
1320
+ api.unhighlightElement();
1321
+ });
1322
+ });
1351
1323
  }
1352
1324
  }
1353
- const DEVTOOLS_FORMS = {};
1354
- const DEVTOOLS_FIELDS = {};
1355
- let API;
1356
1325
  const refreshInspector = throttle(() => {
1357
1326
  setTimeout(async () => {
1358
1327
  await nextTick();
@@ -1394,116 +1363,11 @@ function registerSingleFieldWithDevtools(field) {
1394
1363
  });
1395
1364
  refreshInspector();
1396
1365
  }
1397
- const INSPECTOR_ID = 'vee-validate-inspector';
1398
- const COLORS = {
1399
- error: 0xbd4b4b,
1400
- success: 0x06d77b,
1401
- unknown: 0x54436b,
1402
- white: 0xffffff,
1403
- black: 0x000000,
1404
- blue: 0x035397,
1405
- purple: 0xb980f0,
1406
- orange: 0xf5a962,
1407
- gray: 0xbbbfca,
1408
- };
1409
- let SELECTED_NODE = null;
1410
- function setupApiHooks(api) {
1411
- API = api;
1412
- api.addInspector({
1413
- id: INSPECTOR_ID,
1414
- icon: 'rule',
1415
- label: 'vee-validate',
1416
- noSelectionText: 'Select a vee-validate node to inspect',
1417
- actions: [
1418
- {
1419
- icon: 'done_outline',
1420
- tooltip: 'Validate selected item',
1421
- action: async () => {
1422
- if (!SELECTED_NODE) {
1423
- console.error('There is not a valid selected vee-validate node or component');
1424
- return;
1425
- }
1426
- if (SELECTED_NODE.type === 'field') {
1427
- await SELECTED_NODE.field.validate();
1428
- return;
1429
- }
1430
- if (SELECTED_NODE.type === 'form') {
1431
- await SELECTED_NODE.form.validate();
1432
- return;
1433
- }
1434
- if (SELECTED_NODE.type === 'pathState') {
1435
- await SELECTED_NODE.form.validateField(SELECTED_NODE.state.path);
1436
- }
1437
- },
1438
- },
1439
- {
1440
- icon: 'delete_sweep',
1441
- tooltip: 'Clear validation state of the selected item',
1442
- action: () => {
1443
- if (!SELECTED_NODE) {
1444
- console.error('There is not a valid selected vee-validate node or component');
1445
- return;
1446
- }
1447
- if (SELECTED_NODE.type === 'field') {
1448
- SELECTED_NODE.field.resetField();
1449
- return;
1450
- }
1451
- if (SELECTED_NODE.type === 'form') {
1452
- SELECTED_NODE.form.resetForm();
1453
- }
1454
- if (SELECTED_NODE.type === 'pathState') {
1455
- SELECTED_NODE.form.resetField(SELECTED_NODE.state.path);
1456
- }
1457
- },
1458
- },
1459
- ],
1460
- });
1461
- api.on.getInspectorTree(payload => {
1462
- if (payload.inspectorId !== INSPECTOR_ID) {
1463
- return;
1464
- }
1465
- const forms = Object.values(DEVTOOLS_FORMS);
1466
- const fields = Object.values(DEVTOOLS_FIELDS);
1467
- payload.rootNodes = [
1468
- ...forms.map(mapFormForDevtoolsInspector),
1469
- ...fields.map(field => mapFieldForDevtoolsInspector(field)),
1470
- ];
1471
- });
1472
- api.on.getInspectorState((payload, ctx) => {
1473
- if (payload.inspectorId !== INSPECTOR_ID || ctx.currentTab !== `custom-inspector:${INSPECTOR_ID}`) {
1474
- return;
1475
- }
1476
- const { form, field, state, type } = decodeNodeId(payload.nodeId);
1477
- if (form && type === 'form') {
1478
- payload.state = buildFormState(form);
1479
- SELECTED_NODE = { type: 'form', form };
1480
- return;
1481
- }
1482
- if (state && type === 'pathState' && form) {
1483
- payload.state = buildFieldState(state);
1484
- SELECTED_NODE = { type: 'pathState', state, form };
1485
- return;
1486
- }
1487
- if (field && type === 'field') {
1488
- payload.state = buildFieldState({
1489
- errors: field.errors.value,
1490
- dirty: field.meta.dirty,
1491
- valid: field.meta.valid,
1492
- touched: field.meta.touched,
1493
- value: field.value.value,
1494
- initialValue: field.meta.initialValue,
1495
- });
1496
- SELECTED_NODE = { field, type: 'field' };
1497
- return;
1498
- }
1499
- SELECTED_NODE = null;
1500
- });
1501
- }
1502
1366
  function mapFormForDevtoolsInspector(form) {
1503
1367
  const { textColor, bgColor } = getValidityColors(form.meta.value.valid);
1504
1368
  const formTreeNodes = {};
1505
1369
  Object.values(form.getAllPathStates()).forEach(state => {
1506
- setInPath(formTreeNodes, unref(state.path), mapPathForDevtoolsInspector(state, form));
1370
+ setInPath(formTreeNodes, toValue(state.path), mapPathForDevtoolsInspector(state, form));
1507
1371
  });
1508
1372
  function buildFormTree(tree, path = []) {
1509
1373
  const key = [...path].pop();
@@ -1529,7 +1393,7 @@ function mapFormForDevtoolsInspector(form) {
1529
1393
  const { children } = buildFormTree(formTreeNodes);
1530
1394
  return {
1531
1395
  id: encodeNodeId(form),
1532
- label: 'Form',
1396
+ label: form.name,
1533
1397
  children,
1534
1398
  tags: [
1535
1399
  {
@@ -1548,7 +1412,7 @@ function mapFormForDevtoolsInspector(form) {
1548
1412
  function mapPathForDevtoolsInspector(state, form) {
1549
1413
  return {
1550
1414
  id: encodeNodeId(form, state),
1551
- label: unref(state.path),
1415
+ label: toValue(state.path),
1552
1416
  tags: getFieldNodeTags(state.multiple, state.fieldsCount, state.type, state.valid, form),
1553
1417
  };
1554
1418
  }
@@ -1601,8 +1465,8 @@ function getFieldNodeTags(multiple, fieldsCount, type, valid, form) {
1601
1465
  }
1602
1466
  function encodeNodeId(form, stateOrField) {
1603
1467
  const type = stateOrField ? ('path' in stateOrField ? 'pathState' : 'field') : 'form';
1604
- const fieldPath = stateOrField ? ('path' in stateOrField ? stateOrField === null || stateOrField === void 0 ? void 0 : stateOrField.path : unref(stateOrField === null || stateOrField === void 0 ? void 0 : stateOrField.name)) : '';
1605
- const idObject = { f: form === null || form === void 0 ? void 0 : form.formId, ff: fieldPath, type };
1468
+ const fieldPath = stateOrField ? ('path' in stateOrField ? stateOrField === null || stateOrField === void 0 ? void 0 : stateOrField.path : toValue(stateOrField === null || stateOrField === void 0 ? void 0 : stateOrField.name)) : '';
1469
+ const idObject = { f: form === null || form === void 0 ? void 0 : form.formId, ff: (stateOrField === null || stateOrField === void 0 ? void 0 : stateOrField.id) || fieldPath, type };
1606
1470
  return btoa(encodeURIComponent(JSON.stringify(idObject)));
1607
1471
  }
1608
1472
  function decodeNodeId(nodeId) {
@@ -2058,6 +1922,7 @@ function useVModel({ prop, value, handleChange, shouldValidate }) {
2058
1922
  /* istanbul ignore next */
2059
1923
  if (!vm || !prop) {
2060
1924
  if (("production" !== 'production')) {
1925
+ // eslint-disable-next-line no-console
2061
1926
  console.warn('Failed to setup model events because `useField` was not called in setup.');
2062
1927
  }
2063
1928
  return;
@@ -2310,6 +2175,7 @@ function resolveInitialValues(opts) {
2310
2175
  function useForm(opts) {
2311
2176
  var _a;
2312
2177
  const formId = FORM_COUNTER++;
2178
+ const name = (opts === null || opts === void 0 ? void 0 : opts.name) || 'Form';
2313
2179
  // Prevents fields from double resetting their values, which causes checkboxes to toggle their initial value
2314
2180
  let FIELD_ID_COUNTER = 0;
2315
2181
  // If the form is currently submitting
@@ -2366,7 +2232,7 @@ function useForm(opts) {
2366
2232
  const errorBag = computed(() => {
2367
2233
  const pathErrors = pathStates.value.reduce((acc, state) => {
2368
2234
  if (state.errors.length) {
2369
- acc[state.path] = state.errors;
2235
+ acc[toValue(state.path)] = state.errors;
2370
2236
  }
2371
2237
  return acc;
2372
2238
  }, {});
@@ -2387,14 +2253,14 @@ function useForm(opts) {
2387
2253
  */
2388
2254
  const fieldNames = computed(() => {
2389
2255
  return pathStates.value.reduce((names, state) => {
2390
- names[state.path] = { name: state.path || '', label: state.label || '' };
2256
+ names[toValue(state.path)] = { name: toValue(state.path) || '', label: state.label || '' };
2391
2257
  return names;
2392
2258
  }, {});
2393
2259
  });
2394
2260
  const fieldBailsMap = computed(() => {
2395
2261
  return pathStates.value.reduce((map, state) => {
2396
2262
  var _a;
2397
- map[state.path] = (_a = state.bails) !== null && _a !== void 0 ? _a : true;
2263
+ map[toValue(state.path)] = (_a = state.bails) !== null && _a !== void 0 ? _a : true;
2398
2264
  return map;
2399
2265
  }, {});
2400
2266
  });
@@ -2408,8 +2274,8 @@ function useForm(opts) {
2408
2274
  const meta = useFormMeta(pathStates, formValues, originalInitialValues, errors);
2409
2275
  const controlledValues = computed(() => {
2410
2276
  return pathStates.value.reduce((acc, state) => {
2411
- const value = getFromPath(formValues, state.path);
2412
- setInPath(acc, state.path, value);
2277
+ const value = getFromPath(formValues, toValue(state.path));
2278
+ setInPath(acc, toValue(state.path), value);
2413
2279
  return acc;
2414
2280
  }, {});
2415
2281
  });
@@ -2586,7 +2452,7 @@ function useForm(opts) {
2586
2452
  return pathState;
2587
2453
  }
2588
2454
  function findHoistedPath(path) {
2589
- const candidates = pathStates.value.filter(state => path.startsWith(state.path));
2455
+ const candidates = pathStates.value.filter(state => path.startsWith(toValue(state.path)));
2590
2456
  return candidates.reduce((bestCandidate, candidate) => {
2591
2457
  if (!bestCandidate) {
2592
2458
  return candidate;
@@ -2709,6 +2575,7 @@ function useForm(opts) {
2709
2575
  });
2710
2576
  }
2711
2577
  const formCtx = {
2578
+ name,
2712
2579
  formId,
2713
2580
  values: formValues,
2714
2581
  controlledValues,
@@ -2877,9 +2744,9 @@ function useForm(opts) {
2877
2744
  var _a;
2878
2745
  state.__flags.pendingReset = true;
2879
2746
  state.validated = false;
2880
- state.touched = ((_a = resetState === null || resetState === void 0 ? void 0 : resetState.touched) === null || _a === void 0 ? void 0 : _a[state.path]) || false;
2881
- setFieldValue(state.path, getFromPath(newValues, state.path), false);
2882
- setFieldError(state.path, undefined);
2747
+ state.touched = ((_a = resetState === null || resetState === void 0 ? void 0 : resetState.touched) === null || _a === void 0 ? void 0 : _a[toValue(state.path)]) || false;
2748
+ setFieldValue(toValue(state.path), getFromPath(newValues, toValue(state.path)), false);
2749
+ setFieldError(toValue(state.path), undefined);
2883
2750
  });
2884
2751
  (opts === null || opts === void 0 ? void 0 : opts.force) ? forceSetValues(newValues, false) : setValues(newValues, false);
2885
2752
  setErrors((resetState === null || resetState === void 0 ? void 0 : resetState.errors) || {});
@@ -2904,7 +2771,7 @@ function useForm(opts) {
2904
2771
  const validations = await Promise.all(pathStates.value.map(state => {
2905
2772
  if (!state.validate) {
2906
2773
  return Promise.resolve({
2907
- key: state.path,
2774
+ key: toValue(state.path),
2908
2775
  valid: true,
2909
2776
  errors: [],
2910
2777
  value: undefined,
@@ -2912,7 +2779,7 @@ function useForm(opts) {
2912
2779
  }
2913
2780
  return state.validate(opts).then(result => {
2914
2781
  return {
2915
- key: state.path,
2782
+ key: toValue(state.path),
2916
2783
  valid: result.valid,
2917
2784
  errors: result.errors,
2918
2785
  value: result.value,
@@ -3045,7 +2912,7 @@ function useForm(opts) {
3045
2912
  pathState.touched = true;
3046
2913
  const validateOnBlur = (_a = evalConfig().validateOnBlur) !== null && _a !== void 0 ? _a : getConfig().validateOnBlur;
3047
2914
  if (validateOnBlur) {
3048
- validateField(pathState.path);
2915
+ validateField(toValue(pathState.path));
3049
2916
  }
3050
2917
  }
3051
2918
  function onInput() {
@@ -3053,7 +2920,7 @@ function useForm(opts) {
3053
2920
  const validateOnInput = (_a = evalConfig().validateOnInput) !== null && _a !== void 0 ? _a : getConfig().validateOnInput;
3054
2921
  if (validateOnInput) {
3055
2922
  nextTick(() => {
3056
- validateField(pathState.path);
2923
+ validateField(toValue(pathState.path));
3057
2924
  });
3058
2925
  }
3059
2926
  }
@@ -3062,7 +2929,7 @@ function useForm(opts) {
3062
2929
  const validateOnChange = (_a = evalConfig().validateOnChange) !== null && _a !== void 0 ? _a : getConfig().validateOnChange;
3063
2930
  if (validateOnChange) {
3064
2931
  nextTick(() => {
3065
- validateField(pathState.path);
2932
+ validateField(toValue(pathState.path));
3066
2933
  });
3067
2934
  }
3068
2935
  }
@@ -3127,7 +2994,9 @@ function useForm(opts) {
3127
2994
  return Object.assign({ [conf.model || 'modelValue']: model.value, [`onUpdate:${conf.model || 'modelValue'}`]: onUpdateModelValue }, props.value);
3128
2995
  });
3129
2996
  }
3130
- return Object.assign(Object.assign({}, formCtx), { values: readonly(formValues), handleReset: () => resetForm(), submitForm });
2997
+ const ctx = Object.assign(Object.assign({}, formCtx), { values: readonly(formValues), handleReset: () => resetForm(), submitForm });
2998
+ provide(PublicFormContextKey, ctx);
2999
+ return ctx;
3131
3000
  }
3132
3001
  /**
3133
3002
  * Manages form meta aggregation
@@ -3194,8 +3063,8 @@ function useFormInitialValues(pathsState, formValues, opts) {
3194
3063
  if (wasTouched) {
3195
3064
  return;
3196
3065
  }
3197
- const newValue = getFromPath(initialValues.value, state.path);
3198
- setInPath(formValues, state.path, klona(newValue));
3066
+ const newValue = getFromPath(initialValues.value, toValue(state.path));
3067
+ setInPath(formValues, toValue(state.path), klona(newValue));
3199
3068
  });
3200
3069
  }
3201
3070
  return {
@@ -3213,6 +3082,9 @@ function mergeValidationResults(a, b) {
3213
3082
  errors: [...a.errors, ...b.errors],
3214
3083
  };
3215
3084
  }
3085
+ function useFormContext() {
3086
+ return inject(PublicFormContextKey);
3087
+ }
3216
3088
 
3217
3089
  const FormImpl = /** #__PURE__ */ defineComponent({
3218
3090
  name: 'Form',
@@ -3254,6 +3126,10 @@ const FormImpl = /** #__PURE__ */ defineComponent({
3254
3126
  type: Boolean,
3255
3127
  default: false,
3256
3128
  },
3129
+ name: {
3130
+ type: String,
3131
+ default: 'Form',
3132
+ },
3257
3133
  },
3258
3134
  setup(props, ctx) {
3259
3135
  const validationSchema = toRef(props, 'validationSchema');
@@ -3265,6 +3141,7 @@ const FormImpl = /** #__PURE__ */ defineComponent({
3265
3141
  initialTouched: props.initialTouched,
3266
3142
  validateOnMount: props.validateOnMount,
3267
3143
  keepValuesOnUnmount: keepValues,
3144
+ name: props.name,
3268
3145
  });
3269
3146
  const submitForm = handleSubmit((_, { evt }) => {
3270
3147
  if (isFormSubmitEvent(evt)) {