@apia/validations 2.0.11 → 3.0.2

package/dist/index.js

@@ -72,6 +72,9 @@ function hasSucceedFormValidation(result) {
   return !("errors" in result);
 }
 async function focusOnField(formName, field) {
+  if (field.focus) {
+    return await field.focus() || true;
+  }
   const formElement = document.getElementById(
     `ValidationForm-${formName}`
   );
@@ -273,14 +276,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 +303,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 +338,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 +375,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 +471,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 +558,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 +574,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 +617,7 @@ const Form = ({
   initialValues,
   onUnmount,
   onValidate,
+  persistToSessionStorage,
   unregisterOnUnmount
 }) => {
   const actualName = React.useMemo(
@@ -581,7 +658,8 @@ const Form = ({
   useMount(() => {
     validationsStore.registerForm(actualName, {
       avoidFieldsOverride: avoidFieldsOverride ?? initialValues !== void 0,
-      initialValues
+      initialValues,
+      persistToSessionStorage
     });
     setHasRegistered(true);
   });
@@ -592,7 +670,7 @@ const Form = ({
     {
       as: "form",
       ...getVariant("layout.common.validations.form"),
-      className,
+      className: `validationsForm ${className}`,
       id: `ValidationForm-${actualName}`,
       ...{ name: actualName },
       onSubmit: handleSubmit,
@@ -841,7 +919,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: ": " }),
@@ -1651,15 +1729,15 @@ var __publicField$8 = (obj, key, value) => {
   __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$3 = (obj, member, msg) => {
+var __accessCheck$2 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$3 = (obj, member, getter) => {
-  __accessCheck$3(obj, member, "read from private field");
+var __privateGet$2 = (obj, member, getter) => {
+  __accessCheck$2(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$3 = (obj, member, value) => {
+var __privateAdd$2 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
@@ -1670,13 +1748,13 @@ class CollectorField extends EventEmitter {
     super();
     this.name = name;
     this.label = label;
-    __privateAdd$3(this, _emitter, new StatefulEmitter({
+    __privateAdd$2(this, _emitter, new StatefulEmitter({
       isHidden: false
     }));
     __publicField$8(this, "collector", {});
-    __publicField$8(this, "isHidden", () => __privateGet$3(this, _emitter).getState("isHidden"));
+    __publicField$8(this, "isHidden", () => __privateGet$2(this, _emitter).getState("isHidden"));
     __publicField$8(this, "setIsHidden", (isHidden) => {
-      __privateGet$3(this, _emitter).emit("isHidden", isHidden);
+      __privateGet$2(this, _emitter).emit("isHidden", isHidden);
     });
     __publicField$8(this, "properties", {});
     __publicField$8(this, "setProperties", (newProps) => {
@@ -1694,7 +1772,7 @@ class CollectorField extends EventEmitter {
      * campos.
      */
     __publicField$8(this, "SuperComponent", () => {
-      if (__privateGet$3(this, _emitter).useState("isHidden"))
+      if (__privateGet$2(this, _emitter).useState("isHidden"))
         return null;
       return /* @__PURE__ */ jsx(Box, { className: `collector__field ${this.type}`, children: /* @__PURE__ */ jsx(this.Component, {}) });
     });
@@ -1711,50 +1789,29 @@ var __publicField$7 = (obj, key, value) => {
   __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$2 = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet$2 = (obj, member, getter) => {
-  __accessCheck$2(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd$2 = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, 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);
-  return value;
-};
-var _rules, _validationFunction;
 class ValidatedCollectorField extends CollectorField {
-  constructor(_name, label, config) {
-    super(_name, label, config?.properties);
-    this._name = _name;
+  constructor(name, label, config = {}) {
+    super(name, label, config?.properties);
+    this.name = name;
     this.label = label;
-    __publicField$7(this, "initialValue");
-    __privateAdd$2(this, _rules, {});
-    __privateAdd$2(this, _validationFunction, () => true);
+    this.config = config;
     __publicField$7(this, "setInitialValue", (newValue) => {
-      this.initialValue = newValue;
+      this.config.initialValue = newValue;
     });
     __publicField$7(this, "setValidationFunction", (newFunction) => {
-      __privateSet$1(this, _validationFunction, newFunction);
-      this.emit("functionUpdate", __privateGet$2(this, _validationFunction));
+      this.config.validationFunction = newFunction;
+      this.emit("functionUpdate", this.config.validationFunction);
     });
     __publicField$7(this, "setValidationRules", (newRules) => {
-      __privateSet$1(this, _rules, newRules);
-      this.emit("rulesUpdate", { ...__privateGet$2(this, _rules) });
+      this.config.validationRules = newRules;
+      this.emit("rulesUpdate", { ...this.config.validationRules });
     });
     __publicField$7(this, "setValue", (newValue) => {
       validationsStore.setFieldValue(this.collector.id, this.name, newValue);
     });
     __publicField$7(this, "useValidationFunction", () => {
       return useSubscription({
-        getInitialState: () => () => __privateGet$2(this, _validationFunction),
+        getInitialState: () => () => this.config.validationFunction,
         makeSubscription: (setValidationFunction) => {
           return this.on("functionUpdate", setValidationFunction);
         }
@@ -1762,25 +1819,17 @@ class ValidatedCollectorField extends CollectorField {
     });
     __publicField$7(this, "useValidationRules", () => {
       return useSubscription({
-        getInitialState: () => __privateGet$2(this, _rules),
+        getInitialState: () => this.config.validationRules,
         makeSubscription: (setValidationRules) => {
           return this.on("rulesUpdate", setValidationRules);
         }
       });
     });
-    if (config?.initialValue) {
-      this.initialValue = config.initialValue;
-    }
-    if (config?.validationFunction) {
-      __privateSet$1(this, _validationFunction, config.validationFunction);
-    }
-    if (config?.validationRules) {
-      __privateSet$1(this, _rules, config.validationRules);
-    }
+  }
+  get initialValue() {
+    return this.config.initialValue;
   }
 }
-_rules = new WeakMap();
-_validationFunction = new WeakMap();
 
 var __defProp$6 = Object.defineProperty;
 var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -1800,7 +1849,7 @@ class CollectorCheckbox extends ValidatedCollectorField {
         Checkbox,
         {
           ...props,
-          initialValue: this.initialValue,
+          initialValue: this.config.initialValue,
           validationFunction,
           name: this.name,
           label: this.label,
@@ -1830,7 +1879,7 @@ class CollectorInput extends ValidatedCollectorField {
         Input,
         {
           ...props,
-          initialValue: this.initialValue,
+          initialValue: this.config.initialValue,
           validationFunction,
           name: this.name,
           label: this.label,
@@ -1897,7 +1946,7 @@ class CollectorSelect extends ValidatedCollectorField {
         Select,
         {
           ...props,
-          initialValue: this.initialValue,
+          initialValue: this.config.initialValue,
           validationFunction,
           name: this.name,
           label: this.label,
@@ -1932,7 +1981,7 @@ class CollectorTextarea extends ValidatedCollectorField {
         Textarea,
         {
           ...props,
-          initialValue: this.initialValue,
+          initialValue: this.config.initialValue,
           name: this.name,
           validationFunction,
           validationRules: rules,
@@ -1956,7 +2005,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 });
     });
   }