@apia/validations 3.0.1 → 3.0.6

package/dist/index.js

@@ -27,22 +27,22 @@ function validateByRules({
 
 function __variableDynamicImportRuntime2__(path) {
   switch (path) {
-    case './lang/da.ts': return import('./da.js');
-    case './lang/de.ts': return import('./de.js');
-    case './lang/en.ts': return import('./en.js');
-    case './lang/es.ts': return import('./es.js');
-    case './lang/fa.ts': return import('./fa.js');
-    case './lang/fr.ts': return import('./fr.js');
-    case './lang/gr.ts': return import('./gr.js');
-    case './lang/hr.ts': return import('./hr.js');
-    case './lang/hu.ts': return import('./hu.js');
-    case './lang/it.ts': return import('./it.js');
-    case './lang/ja.ts': return import('./ja.js');
-    case './lang/jp.ts': return import('./jp.js');
-    case './lang/nl.ts': return import('./nl.js');
-    case './lang/pl.ts': return import('./pl.js');
-    case './lang/pt.ts': return import('./pt.js');
-    case './lang/ro.ts': return import('./ro.js');
+    case './lang/da.ts': return import('./da-DqVKtoV2.js');
+    case './lang/de.ts': return import('./de-CcX9-Rq3.js');
+    case './lang/en.ts': return import('./en-DCSKN2q5.js');
+    case './lang/es.ts': return import('./es-C-AXrgsF.js');
+    case './lang/fa.ts': return import('./fa-CpOxXp-C.js');
+    case './lang/fr.ts': return import('./fr-cmPfrK5Y.js');
+    case './lang/gr.ts': return import('./gr-CmqXMJsZ.js');
+    case './lang/hr.ts': return import('./hr-DIdEoOl4.js');
+    case './lang/hu.ts': return import('./hu-VYwXwEzb.js');
+    case './lang/it.ts': return import('./it-CZNo0Ds3.js');
+    case './lang/ja.ts': return import('./ja-CK5iBGzP.js');
+    case './lang/jp.ts': return import('./jp-CK5iBGzP.js');
+    case './lang/nl.ts': return import('./nl-BSU5Z9PJ.js');
+    case './lang/pl.ts': return import('./pl-BSq2_6nm.js');
+    case './lang/pt.ts': return import('./pt-DJTrqO4_.js');
+    case './lang/ro.ts': return import('./ro-CAAZmoW6.js');
     default: return new Promise(function(resolve, reject) {
       (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
         reject.bind(null, new Error("Unknown variable dynamic import: " + path))
@@ -72,11 +72,14 @@ 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}`
   );
   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 +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;
@@ -535,6 +617,7 @@ const Form = ({
   initialValues,
   onUnmount,
   onValidate,
+  persistToSessionStorage,
   unregisterOnUnmount
 }) => {
   const actualName = React.useMemo(
@@ -575,7 +658,8 @@ const Form = ({
   useMount(() => {
     validationsStore.registerForm(actualName, {
       avoidFieldsOverride: avoidFieldsOverride ?? initialValues !== void 0,
-      initialValues
+      initialValues,
+      persistToSessionStorage
     });
     setHasRegistered(true);
   });
@@ -586,7 +670,7 @@ const Form = ({
     {
       as: "form",
       ...getVariant("layout.common.validations.form"),
-      className,
+      className: `validationsForm ${className}`,
       id: `ValidationForm-${actualName}`,
       ...{ name: actualName },
       onSubmit: handleSubmit,
@@ -1645,32 +1729,32 @@ 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);
 };
 var _emitter;
 class CollectorField extends EventEmitter {
-  constructor(_name, label, properties) {
+  constructor(name, label, properties) {
     super();
-    this._name = _name;
+    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) => {
@@ -1688,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, {}) });
     });
@@ -1696,12 +1780,6 @@ class CollectorField extends EventEmitter {
       this.properties = properties;
     }
   }
-  get name() {
-    return this._name;
-  }
-  set name(name) {
-    this._name = name;
-  }
 }
 _emitter = new WeakMap();
 
@@ -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 });
     });
   }
@@ -2025,10 +2074,14 @@ class Collector {
       textarea: CollectorTextarea
     });
     __publicField(this, "private__id", `Collector${maxId++}`);
+    __publicField(this, "modal", null);
     __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);
@@ -2039,33 +2092,44 @@ class Collector {
     }) => {
       const modal = useModalContext();
       let hasValidated = false;
-      return /* @__PURE__ */ jsx(Box, { ...getVariant("layout.util.collector.formContainer"), children: /* @__PURE__ */ jsxs(
-        Form,
+      return /* @__PURE__ */ jsx(
+        Box,
         {
-          name: this.private__id,
-          onValidate: (result) => {
-            if (hasSucceedFormValidation(result)) {
-              resolve(result.submitValues);
-              modal.close();
+          className: "formContainer",
+          ...getVariant("layout.util.collector.formContainer"),
+          children: /* @__PURE__ */ jsxs(
+            Form,
+            {
+              name: this.private__id,
+              onValidate: (result) => {
+                if (hasSucceedFormValidation(result)) {
+                  const res = resolve(result.submitValues);
+                  if (res) {
+                    modal.close();
+                  }
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx(Box, { className: "collector__fields", children: Object.values(__privateGet(this, _fields)).map((current) => {
+                  if (current instanceof ValidatedCollectorField)
+                    hasValidated = true;
+                  return /* @__PURE__ */ jsx(current.SuperComponent, {}, current.name);
+                }) }),
+                hasValidated && !hideConfirm && /* @__PURE__ */ jsx(Box, { className: "collector__buttons", children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: getLabel("btnCon").text }) })
+              ]
             }
-          },
-          children: [
-            Object.values(__privateGet(this, _fields)).map((current) => {
-              if (current instanceof ValidatedCollectorField)
-                hasValidated = true;
-              return /* @__PURE__ */ jsx(current.SuperComponent, {}, current.name);
-            }),
-            hasValidated && !hideConfirm && /* @__PURE__ */ jsx(Box, { className: "collector__buttons", children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: getLabel("btnCon").text }) })
-          ]
+          )
         }
-      ) });
+      );
     });
     __publicField(this, "show", (modalProps) => {
+      const { onConfirm, ...actualModalProps } = modalProps ?? {};
       return new Promise((resolve) => {
         const C = __privateGet(this, _Component);
-        ApiaUtil.instance.modals.open({
-          onExited() {
+        const modal = ApiaUtil.instance.modals.open({
+          onExited: () => {
             {
+              this.modal = null;
               resolve(null);
             }
           },
@@ -2074,7 +2138,14 @@ class Collector {
             {
               hideConfirm: modalProps?.hideConfirm,
               resolve: (values) => {
+                if (onConfirm) {
+                  const confirmResult = onConfirm(values);
+                  if (!confirmResult) {
+                    return false;
+                  }
+                }
                 resolve(values);
+                return true;
               }
             }
           ),
@@ -2084,8 +2155,9 @@ class Collector {
               "input,textarea,select,button:not(.modal__closeButton)"
             );
           },
-          ...modalProps
+          ...actualModalProps
         });
+        this.modal = modal;
       });
     });
   }