vee-validate 4.14.1 → 4.14.2

package/dist/vee-validate.esm.js

@@ -1,5 +1,5 @@
 /**
-  * vee-validate v4.14.1
+  * vee-validate v4.14.2
   * (c) 2024 Abdelrahman Awad
   * @license MIT
   */
@@ -1172,6 +1172,25 @@ function createFieldErrors() {
     };
 }
 
+const DEVTOOLS_FORMS = {};
+const DEVTOOLS_FIELDS = {};
+const INSPECTOR_ID = 'vee-validate-inspector';
+const COLORS = {
+    error: 0xbd4b4b,
+    success: 0x06d77b,
+    unknown: 0x54436b,
+    white: 0xffffff,
+    black: 0x000000,
+    blue: 0x035397,
+    purple: 0xb980f0,
+    orange: 0xf5a962,
+    gray: 0xbbbfca,
+};
+let SELECTED_NODE = null;
+/**
+ * Plugin API
+ */
+let API;
 function installDevtoolsPlugin(app) {
     if ((process.env.NODE_ENV !== 'production')) {
         setupDevtoolsPlugin({
@@ -1181,12 +1200,105 @@ function installDevtoolsPlugin(app) {
             homepage: 'https://vee-validate.logaretm.com/v4',
             app,
             logo: 'https://vee-validate.logaretm.com/v4/logo.png',
-        }, setupApiHooks);
+        }, api => {
+            console.log('api', api);
+            API = api;
+            api.addInspector({
+                id: INSPECTOR_ID,
+                icon: 'rule',
+                label: 'vee-validate',
+                noSelectionText: 'Select a vee-validate node to inspect',
+                actions: [
+                    {
+                        icon: 'done_outline',
+                        tooltip: 'Validate selected item',
+                        action: async () => {
+                            if (!SELECTED_NODE) {
+                                console.error('There is not a valid selected vee-validate node or component');
+                                return;
+                            }
+                            if (SELECTED_NODE.type === 'field') {
+                                await SELECTED_NODE.field.validate();
+                                return;
+                            }
+                            if (SELECTED_NODE.type === 'form') {
+                                await SELECTED_NODE.form.validate();
+                                return;
+                            }
+                            if (SELECTED_NODE.type === 'pathState') {
+                                await SELECTED_NODE.form.validateField(SELECTED_NODE.state.path);
+                            }
+                        },
+                    },
+                    {
+                        icon: 'delete_sweep',
+                        tooltip: 'Clear validation state of the selected item',
+                        action: () => {
+                            if (!SELECTED_NODE) {
+                                console.error('There is not a valid selected vee-validate node or component');
+                                return;
+                            }
+                            if (SELECTED_NODE.type === 'field') {
+                                SELECTED_NODE.field.resetField();
+                                return;
+                            }
+                            if (SELECTED_NODE.type === 'form') {
+                                SELECTED_NODE.form.resetForm();
+                            }
+                            if (SELECTED_NODE.type === 'pathState') {
+                                SELECTED_NODE.form.resetField(SELECTED_NODE.state.path);
+                            }
+                        },
+                    },
+                ],
+            });
+            api.on.getInspectorTree(payload => {
+                if (payload.inspectorId !== INSPECTOR_ID) {
+                    return;
+                }
+                const forms = Object.values(DEVTOOLS_FORMS);
+                const fields = Object.values(DEVTOOLS_FIELDS);
+                payload.rootNodes = [
+                    ...forms.map(mapFormForDevtoolsInspector),
+                    ...fields.map(field => mapFieldForDevtoolsInspector(field)),
+                ];
+            });
+            api.on.getInspectorState(payload => {
+                if (payload.inspectorId !== INSPECTOR_ID) {
+                    return;
+                }
+                const { form, field, state, type } = decodeNodeId(payload.nodeId);
+                api.unhighlightElement();
+                if (form && type === 'form') {
+                    payload.state = buildFormState(form);
+                    SELECTED_NODE = { type: 'form', form };
+                    api.highlightElement(form._vm);
+                    return;
+                }
+                if (state && type === 'pathState' && form) {
+                    payload.state = buildFieldState(state);
+                    SELECTED_NODE = { type: 'pathState', state, form };
+                    return;
+                }
+                if (field && type === 'field') {
+                    payload.state = buildFieldState({
+                        errors: field.errors.value,
+                        dirty: field.meta.dirty,
+                        valid: field.meta.valid,
+                        touched: field.meta.touched,
+                        value: field.value.value,
+                        initialValue: field.meta.initialValue,
+                    });
+                    SELECTED_NODE = { field, type: 'field' };
+                    api.highlightElement(field._vm);
+                    return;
+                }
+                SELECTED_NODE = null;
+                api.unhighlightElement();
+            });
+        });
     }
 }
-const DEVTOOLS_FORMS = {};
-const DEVTOOLS_FIELDS = {};
-let API;
 const refreshInspector = throttle(() => {
     setTimeout(async () => {
         await nextTick();
@@ -1228,111 +1340,6 @@ function registerSingleFieldWithDevtools(field) {
     });
     refreshInspector();
 }
-const INSPECTOR_ID = 'vee-validate-inspector';
-const COLORS = {
-    error: 0xbd4b4b,
-    success: 0x06d77b,
-    unknown: 0x54436b,
-    white: 0xffffff,
-    black: 0x000000,
-    blue: 0x035397,
-    purple: 0xb980f0,
-    orange: 0xf5a962,
-    gray: 0xbbbfca,
-};
-let SELECTED_NODE = null;
-function setupApiHooks(api) {
-    API = api;
-    api.addInspector({
-        id: INSPECTOR_ID,
-        icon: 'rule',
-        label: 'vee-validate',
-        noSelectionText: 'Select a vee-validate node to inspect',
-        actions: [
-            {
-                icon: 'done_outline',
-                tooltip: 'Validate selected item',
-                action: async () => {
-                    if (!SELECTED_NODE) {
-                        console.error('There is not a valid selected vee-validate node or component');
-                        return;
-                    }
-                    if (SELECTED_NODE.type === 'field') {
-                        await SELECTED_NODE.field.validate();
-                        return;
-                    }
-                    if (SELECTED_NODE.type === 'form') {
-                        await SELECTED_NODE.form.validate();
-                        return;
-                    }
-                    if (SELECTED_NODE.type === 'pathState') {
-                        await SELECTED_NODE.form.validateField(SELECTED_NODE.state.path);
-                    }
-                },
-            },
-            {
-                icon: 'delete_sweep',
-                tooltip: 'Clear validation state of the selected item',
-                action: () => {
-                    if (!SELECTED_NODE) {
-                        console.error('There is not a valid selected vee-validate node or component');
-                        return;
-                    }
-                    if (SELECTED_NODE.type === 'field') {
-                        SELECTED_NODE.field.resetField();
-                        return;
-                    }
-                    if (SELECTED_NODE.type === 'form') {
-                        SELECTED_NODE.form.resetForm();
-                    }
-                    if (SELECTED_NODE.type === 'pathState') {
-                        SELECTED_NODE.form.resetField(SELECTED_NODE.state.path);
-                    }
-                },
-            },
-        ],
-    });
-    api.on.getInspectorTree(payload => {
-        if (payload.inspectorId !== INSPECTOR_ID) {
-            return;
-        }
-        const forms = Object.values(DEVTOOLS_FORMS);
-        const fields = Object.values(DEVTOOLS_FIELDS);
-        payload.rootNodes = [
-            ...forms.map(mapFormForDevtoolsInspector),
-            ...fields.map(field => mapFieldForDevtoolsInspector(field)),
-        ];
-    });
-    api.on.getInspectorState((payload, ctx) => {
-        if (payload.inspectorId !== INSPECTOR_ID || ctx.currentTab !== `custom-inspector:${INSPECTOR_ID}`) {
-            return;
-        }
-        const { form, field, state, type } = decodeNodeId(payload.nodeId);
-        if (form && type === 'form') {
-            payload.state = buildFormState(form);
-            SELECTED_NODE = { type: 'form', form };
-            return;
-        }
-        if (state && type === 'pathState' && form) {
-            payload.state = buildFieldState(state);
-            SELECTED_NODE = { type: 'pathState', state, form };
-            return;
-        }
-        if (field && type === 'field') {
-            payload.state = buildFieldState({
-                errors: field.errors.value,
-                dirty: field.meta.dirty,
-                valid: field.meta.valid,
-                touched: field.meta.touched,
-                value: field.value.value,
-                initialValue: field.meta.initialValue,
-            });
-            SELECTED_NODE = { field, type: 'field' };
-            return;
-        }
-        SELECTED_NODE = null;
-    });
-}
 function mapFormForDevtoolsInspector(form) {
     const { textColor, bgColor } = getValidityColors(form.meta.value.valid);
     const formTreeNodes = {};