@apia/validations 2.0.7 → 2.0.9

package/dist/index.js

@@ -76,7 +76,7 @@ async function focusOnField(formName, field) {
     `ValidationForm-${formName}`
   );
   const fieldElement = formElement?.querySelector(
-    `[name="${field.name}"], #${field.name}`
+    `[name="${CSS.escape(field.name)}"], #${CSS.escape(field.name)}`
   );
   if (fieldElement) {
     return new Promise((resolve) => {
@@ -273,14 +273,23 @@ const validationsStore = new class {
      * Inicializa el estado de un nuevo formulario
      */
     __publicField$9(this, "registerForm", (formName, props = { avoidFieldsOverride: false }) => {
+      props.persistToSessionStorage && this.loadFromSessionStorage(formName);
       if (this.activeForms.includes(formName)) {
-        this.updateFormStore(formName, {
-          avoidFieldsOverride: props.avoidFieldsOverride
-        });
+        this.updateFormStore(
+          formName,
+          {
+            avoidFieldsOverride: props.avoidFieldsOverride
+          },
+          true
+        );
         if (props.initialValues)
           Object.entries(props.initialValues).forEach(([fieldId, fieldProps]) => {
             if (fieldProps instanceof Object)
-              this.updateField(formName, { name: fieldId, ...fieldProps });
+              this.updateField(
+                formName,
+                { name: fieldId, ...fieldProps },
+                { avoidFieldsOverride: props.avoidFieldsOverride }
+              );
           });
         return;
       }
@@ -291,10 +300,18 @@ const validationsStore = new class {
         isTouched: false,
         isValid: false,
         name: formName,
-        validationResult: null
+        validationResult: null,
+        persistToSessionStorage: props.persistToSessionStorage
       });
       Object.entries(props.initialValues ?? {}).forEach(([name, value]) => {
-        this.updateField(formName, { name, value }, { markFormAsTouched: false });
+        this.updateField(
+          formName,
+          { name, value },
+          {
+            markFormAsTouched: false,
+            avoidFieldsOverride: props.avoidFieldsOverride
+          }
+        );
       });
     });
     /**
@@ -318,7 +335,7 @@ const validationsStore = new class {
         this.updateFormStore(formName, { isValid: false });
     });
     __publicField$9(this, "setFormIsTouched", (formName, isTouched = true) => {
-      this.updateFormStore(formName, { isTouched });
+      this.updateFormStore(formName, { isTouched }, true);
     });
     /**
      * Elimina un campo del registro de validación de un formulario. De esta
@@ -355,9 +372,11 @@ const validationsStore = new class {
     __publicField$9(this, "updateField", (formName, field, options) => {
       const previousValue = this.getFieldStore(formName, field.name)?.value;
       if (this.getFormStore(formName))
-        this.updateFormStore(formName, { isValid: false });
+        this.updateFormStore(formName, { isValid: false }, true);
       else
         this.registerForm(formName);
+      if (previousValue !== void 0 && options?.avoidFieldsOverride)
+        return;
       const isTouched = field.value !== void 0 && field.value !== previousValue && options?.markFormAsTouched !== false;
       if (!this.existsField(formName, field.name))
         this.registerField(formName, field, {
@@ -449,19 +468,76 @@ const validationsStore = new class {
           });
           console.error("Campos que fallaron la validaci\xF3n", fieldsWithError);
         }
-        this.updateFormStore(formName, {
-          isValid: false,
-          validationResult: validationErrors
-        });
+        this.updateFormStore(
+          formName,
+          {
+            isValid: false,
+            validationResult: validationErrors
+          },
+          true
+        );
         return validationErrors;
       }
-      this.updateFormStore(formName, {
-        isValid: true,
-        validationResult: validationValues
-      });
+      this.updateFormStore(
+        formName,
+        {
+          isValid: true,
+          validationResult: validationValues
+        },
+        true
+      );
       return validationValues;
     });
   }
+  loadFromSessionStorage(formName) {
+    const storageValue = sessionStorage.getItem(this.makeFormName(formName));
+    if (storageValue) {
+      try {
+        const parsedValue = JSON.parse(storageValue);
+        this.activeForms.push(formName);
+        this.updateFormStore(formName, parsedValue.formProps, true);
+        Object.entries(parsedValue.fields).forEach(([name, field]) => {
+          propsStore.updateField(
+            this.makeFieldName(formName, name),
+            {
+              ...this.getFieldStore(formName, name),
+              ...field
+            },
+            { noEmit: true }
+          );
+        });
+        return true;
+      } catch (e) {
+      }
+    }
+    return false;
+  }
+  persistFormToSessionStorage(formName) {
+    const { isTouched, isValid, validationResult, ...formProps } = this.getFormStore(formName);
+    const shouldPersist = formProps.persistToSessionStorage;
+    if (shouldPersist) {
+      const fields = formProps.fields.map((current) => {
+        const {
+          validationFunction,
+          isTouched: isTouched2,
+          error,
+          validationValueParser,
+          ...field
+        } = this.getFieldStore(formName, current);
+        return field;
+      }).reduce(
+        (o, c) => ({ ...o, [c.name]: c }),
+        {}
+      );
+      sessionStorage.setItem(
+        this.makeFormName(formName),
+        JSON.stringify({
+          formProps,
+          fields
+        })
+      );
+    }
+  }
   getFieldStore(formName, fieldName) {
     return propsStore.getFieldProps(
       this.makeFieldName(formName, fieldName)
@@ -479,9 +555,12 @@ const validationsStore = new class {
       },
       { noEmit }
     );
+    this.persistFormToSessionStorage(formName);
   }
-  updateFormStore(formName, newState) {
+  updateFormStore(formName, newState, avoidPersist = false) {
     propsStore.updateField(this.makeFormName(formName), newState);
+    if (!avoidPersist)
+      this.persistFormToSessionStorage(formName);
   }
   enableFormTouch(formName) {
     this.timeouts[formName] = true;
@@ -492,12 +571,6 @@ const validationsStore = new class {
   makeFormName(formName) {
     return `validation_${formName}`;
   }
-  resetForm(formName) {
-    const state = this.getFormStore(formName);
-    state.fields.forEach((field) => {
-      this.setFieldValue(formName, field, "");
-    });
-  }
 }();
 function useFormSelector(formName, selector, comparator) {
   return usePropsSelector(
@@ -541,6 +614,7 @@ const Form = ({
   initialValues,
   onUnmount,
   onValidate,
+  persistToSessionStorage,
   unregisterOnUnmount
 }) => {
   const actualName = React.useMemo(
@@ -581,7 +655,8 @@ const Form = ({
   useMount(() => {
     validationsStore.registerForm(actualName, {
       avoidFieldsOverride: avoidFieldsOverride ?? initialValues !== void 0,
-      initialValues
+      initialValues,
+      persistToSessionStorage
     });
     setHasRegistered(true);
   });
@@ -841,7 +916,7 @@ const FieldWrapper = ({
     ] });
   }
   return /* @__PURE__ */ jsxs(Box, { className: `fieldWrapper ${className ?? ""}`, ...props, as, children: [
-    /* @__PURE__ */ jsxs(Box, { as: "span", children: [
+    /* @__PURE__ */ jsxs(Box, { as: "span", className: "fieldWrapper__label", children: [
       window.SHOW_REQUIRED_POSITION !== "0" && label && /* @__PURE__ */ jsx(RequiredMark, { isRequired }),
       label,
       !avoidSemicolon && label && /* @__PURE__ */ jsx("abbr", { className: "semicolon", children: ": " }),
@@ -1732,7 +1807,7 @@ var __privateAdd$2 = (obj, member, value) => {
 };
 var __privateSet$1 = (obj, member, value, setter) => {
   __accessCheck$2(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  member.set(obj, value);
   return value;
 };
 var _rules, _validationFunction;
@@ -1868,7 +1943,7 @@ var __privateAdd$1 = (obj, member, value) => {
 };
 var __privateSet = (obj, member, value, setter) => {
   __accessCheck$1(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  member.set(obj, value);
   return value;
 };
 var _options, _useOptions;
@@ -1962,7 +2037,7 @@ const _CollectorLabel = class _CollectorLabel extends CollectorField {
     __publicField$2(this, "type", "label");
     __publicField$2(this, "Component", () => {
       if (this.kind === "label")
-        return /* @__PURE__ */ jsx(Box, { as: this.kind, children: /* @__PURE__ */ jsx("span", { children: this.label }) });
+        return /* @__PURE__ */ jsx(Box, { as: this.kind, children: this.label });
       return /* @__PURE__ */ jsx(Box, { as: this.kind, children: this.label });
     });
   }
@@ -2032,14 +2107,18 @@ class Collector {
     });
     __publicField(this, "private__id", `Collector${maxId++}`);
     __privateAdd(this, _fields, {});
-    __publicField(this, "add", (field) => {
-      __privateGet(this, _fields)[field.name] = field;
-      field.collector = this;
+    __publicField(this, "add", (...fields) => {
+      fields.forEach((field) => {
+        __privateGet(this, _fields)[field.name] = field;
+        field.collector = this;
+      });
+      return this;
     });
     __publicField(this, "forEach", (cb) => {
       Object.values(__privateGet(this, _fields)).forEach(cb);
     });
     __privateAdd(this, _Component, ({
+      hideConfirm,
       resolve
     }) => {
       const modal = useModalContext();
@@ -2060,7 +2139,7 @@ class Collector {
                 hasValidated = true;
               return /* @__PURE__ */ jsx(current.SuperComponent, {}, current.name);
             }),
-            hasValidated && /* @__PURE__ */ jsx(Box, { className: "collector__buttons", children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: getLabel("btnCon").text }) })
+            hasValidated && !hideConfirm && /* @__PURE__ */ jsx(Box, { className: "collector__buttons", children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: getLabel("btnCon").text }) })
           ]
         }
       ) });
@@ -2068,7 +2147,7 @@ class Collector {
     __publicField(this, "show", (modalProps) => {
       return new Promise((resolve) => {
         const C = __privateGet(this, _Component);
-        new ApiaUtil().modals.open({
+        ApiaUtil.instance.modals.open({
           onExited() {
             {
               resolve(null);
@@ -2077,6 +2156,7 @@ class Collector {
           children: /* @__PURE__ */ jsx(
             C,
             {
+              hideConfirm: modalProps?.hideConfirm,
               resolve: (values) => {
                 resolve(values);
               }