bhl-forms 0.3.3 → 0.4.1

package/dist/bhl-forms.es.js

@@ -4789,7 +4789,17 @@ const getRedirect = (formData, node) => {
   }
   return redirectUrl;
 };
+var clearErrorTimeout = 0;
+const setNodeError = (node, message2) => {
+  node.setErrors(message2);
+  clearErrorTimeout = setTimeout(() => {
+    node.store.filter((m3) => {
+      return m3.type !== "error";
+    });
+  }, 5e3);
+};
 const handleSubmitError = (err, node) => {
+  clearTimeout(clearErrorTimeout);
   if (err.response) {
     const code = err.response.status;
     if (node.props.attrs.errorCodes && code in node.props.attrs.errorCodes) {
@@ -4807,12 +4817,12 @@ const handleSubmitError = (err, node) => {
         }
       }
       if (message2) {
-        node.setErrors(message2);
+        setNodeError(node, message2);
       }
       return abort;
     }
   }
-  node.setErrors(err.toString());
+  setNodeError(node, err.toString());
   return true;
 };
 const getKey = (d3, path, def2) => {
@@ -5417,31 +5427,38 @@ function syncListNodes$1(node, context) {
       unused.delete(context.children[i2]);
     } else {
       newChildren.push(null);
-      placeholderValues.set(value, i2);
+      const indexes = placeholderValues.get(value) || [];
+      indexes.push(i2);
+      placeholderValues.set(value, indexes);
     }
   });
   if (unused.size && placeholderValues.size) {
     unused.forEach((child) => {
       if (placeholderValues.has(child._value)) {
-        newChildren[placeholderValues.get(child._value)] = child;
+        const indexes = placeholderValues.get(child._value);
+        const index2 = indexes.shift();
+        newChildren[index2] = child;
         unused.delete(child);
-        placeholderValues.delete(child._value);
+        if (!indexes.length)
+          placeholderValues.delete(child._value);
       }
     });
   }
-  while (unused.size && placeholderValues.size) {
+  const emptyIndexes = [];
+  placeholderValues.forEach((indexes) => {
+    emptyIndexes.push(...indexes);
+  });
+  while (unused.size && emptyIndexes.length) {
     const child = unused.values().next().value;
-    const placeholders = placeholderValues[Symbol.iterator]();
-    const [value, index2] = placeholders.next().value;
+    const index2 = emptyIndexes.shift();
+    if (index2 === void 0)
+      break;
     newChildren[index2] = child;
     unused.delete(child);
-    placeholderValues.delete(value);
-  }
-  if (placeholderValues.size) {
-    placeholderValues.forEach((index2, value) => {
-      newChildren[index2] = createPlaceholder$1({ value });
-    });
   }
+  emptyIndexes.forEach((index2, value) => {
+    newChildren[index2] = createPlaceholder$1({ value });
+  });
   if (unused.size) {
     unused.forEach((child) => {
       if (!("__FKP" in child)) {
@@ -5967,6 +5984,9 @@ function useSteps() {
   const setStepQueue = (value) => {
     stepQueue2.value = [...value];
   };
+  const stepEnabled2 = (stepName) => {
+    return enabledSteps2().indexOf(stepName) > -1;
+  };
   const queueStep = (stepName, next = false) => {
     if (next == true) {
       stepQueue2.value.unshift(stepName);
@@ -6026,16 +6046,18 @@ function useSteps() {
       throw Error("Unexpected value for nextStep: " + nextStep);
     }
     if (autoFocus) {
-      const newNode = steps2[activeStep2.value].node;
-      const firstInput = findFirstInput(newNode);
-      if (firstInput && autoFocusTypes.indexOf(firstInput.context.type) > -1) {
-        const elem = document.getElementById(firstInput.context.id);
+      setTimeout(function() {
         try {
-          focusAndOpenKeyboard(elem);
+          const newNode = steps2[activeStep2.value].node;
+          const firstInput = findFirstInput(newNode);
+          if (firstInput && autoFocusTypes.indexOf(firstInput.context.type) > -1) {
+            const elem = document.getElementById(firstInput.context.id);
+            focusAndOpenKeyboard(elem);
+          }
         } catch (e2) {
           console.warn("Failed to autoFocus:", e2);
         }
-      }
+      }, 50);
     }
     return true;
   };
@@ -6058,39 +6080,40 @@ function useSteps() {
       if (node.props.attrs.defaultOrder) {
         defaultOrder2.push(...node.props.attrs.defaultOrder);
       }
-      return true;
-    }
-    if (node.props.type == "group") {
-      if (defaultOrder2.length > 0) {
-        if (Object.keys(steps2).length === 0) {
-          setStepQueue(defaultOrder2);
-        }
-      } else {
-        if (!(node.name in steps2)) {
-          queueStep(node.name);
+      node.on("child", ({ payload: childNode }) => {
+        if (childNode.type === "group") {
+          if (defaultOrder2.length > 0) {
+            if (Object.keys(steps2).length === 0) {
+              setStepQueue(defaultOrder2);
+            }
+          } else {
+            if (!stepEnabled2(childNode.name)) {
+              queueStep(childNode.name);
+            }
+          }
+          steps2[childNode.name] = {};
+          steps2[childNode.name].node = childNode;
+          childNode.on("created", () => {
+            steps2[childNode.name].valid = toRef(childNode.context.state, "valid");
+          });
+          childNode.on("count:errors", ({ payload: count2 }) => {
+            steps2[childNode.name].errorCount = count2;
+          });
+          childNode.on("count:blocking", ({ payload: count2 }) => {
+            steps2[childNode.name].blockingCount = count2;
+          });
+          if (activeStep2.value === "") {
+            activeStep2.value = childNode.name;
+          }
         }
-      }
-      steps2[node.name] = steps2[node.name] || {};
-      steps2[node.name].node = node;
-      node.on("created", () => {
-        steps2[node.name].valid = toRef(node.context.state, "valid");
-      });
-      node.on("count:errors", ({ payload: count2 }) => {
-        steps2[node.name].errorCount = count2;
-      });
-      node.on("count:blocking", ({ payload: count2 }) => {
-        steps2[node.name].blockingCount = count2;
       });
-      if (activeStep2.value === "") {
-        activeStep2.value = node.name;
-      }
-      return false;
+      return true;
     }
   };
-  return { stepPlugin: stepPlugin2, steps: steps2, stepHistory: stepHistory2, stepQueue: stepQueue2, enabledSteps: enabledSteps2, defaultOrder: defaultOrder2, activeStep: activeStep2, firstStep: firstStep2, lastStep: lastStep2, setStep: setStep2, setStepQueue, setNextStep: setNextStep2, setPreviousStep: setPreviousStep2 };
+  return { stepPlugin: stepPlugin2, steps: steps2, stepHistory: stepHistory2, stepQueue: stepQueue2, enabledSteps: enabledSteps2, stepEnabled: stepEnabled2, defaultOrder: defaultOrder2, activeStep: activeStep2, firstStep: firstStep2, lastStep: lastStep2, setStep: setStep2, setStepQueue, setNextStep: setNextStep2, setPreviousStep: setPreviousStep2 };
 }
 let { prepopPlugin } = usePrepop();
-let { stepPlugin, steps: steps$1, stepHistory, stepQueue, enabledSteps, defaultOrder, activeStep, firstStep, lastStep, setStep, setNextStep, setPreviousStep } = useSteps();
+let { stepPlugin, steps: steps$1, stepHistory, stepQueue, enabledSteps, stepEnabled, defaultOrder, activeStep, firstStep, lastStep, setStep, setNextStep, setPreviousStep } = useSteps();
 const urlParams$2 = new URLSearchParams(window.location.search);
 const dataDefaults = {
   steps: steps$1,
@@ -6104,6 +6127,9 @@ const dataDefaults = {
   urlParam: (name, backup = null) => {
     return urlParams$2.get(name) || backup;
   },
+  stepKeys: () => {
+    return Object.keys(steps$1);
+  },
   firstStep: () => {
     return firstStep();
   },
@@ -6119,19 +6145,19 @@ const dataDefaults = {
   setStep: (nextStep, validate2, autoFocus, preStep) => () => {
     return setStep({ nextStep, validate: validate2, autoFocus, preStep });
   },
-  stepIsValid: (stepName) => {
+  stepValid: (stepName) => {
     return steps$1[stepName].valid && steps$1[stepName].errorCount === 0;
   },
-  stepIsEnabled: (stepName) => {
+  stepEnabled: (stepName) => {
     if (!enabledSteps().length) {
       return true;
     }
-    return enabledSteps().indexOf(stepName) > -1;
+    return stepEnabled(stepName);
   },
   getKey: (d3, k2, def2) => {
     return getKey(d3, k2, def2);
   },
-  inputIsEnabled: (node, key, inputName) => {
+  inputEnabled: (node, key, inputName) => {
     if (!node || !key || !node.attrs.inputMap) {
       return true;
     }
@@ -7252,31 +7278,38 @@ function syncListNodes(node, context) {
       unused.delete(context.children[i2]);
     } else {
       newChildren.push(null);
-      placeholderValues.set(value, i2);
+      const indexes = placeholderValues.get(value) || [];
+      indexes.push(i2);
+      placeholderValues.set(value, indexes);
     }
   });
   if (unused.size && placeholderValues.size) {
     unused.forEach((child) => {
       if (placeholderValues.has(child._value)) {
-        newChildren[placeholderValues.get(child._value)] = child;
+        const indexes = placeholderValues.get(child._value);
+        const index2 = indexes.shift();
+        newChildren[index2] = child;
         unused.delete(child);
-        placeholderValues.delete(child._value);
+        if (!indexes.length)
+          placeholderValues.delete(child._value);
       }
     });
   }
-  while (unused.size && placeholderValues.size) {
+  const emptyIndexes = [];
+  placeholderValues.forEach((indexes) => {
+    emptyIndexes.push(...indexes);
+  });
+  while (unused.size && emptyIndexes.length) {
     const child = unused.values().next().value;
-    const placeholders = placeholderValues[Symbol.iterator]();
-    const [value, index2] = placeholders.next().value;
+    const index2 = emptyIndexes.shift();
+    if (index2 === void 0)
+      break;
     newChildren[index2] = child;
     unused.delete(child);
-    placeholderValues.delete(value);
-  }
-  if (placeholderValues.size) {
-    placeholderValues.forEach((index2, value) => {
-      newChildren[index2] = createPlaceholder({ value });
-    });
   }
+  emptyIndexes.forEach((index2, value) => {
+    newChildren[index2] = createPlaceholder({ value });
+  });
   if (unused.size) {
     unused.forEach((child) => {
       if (!("__FKP" in child)) {
@@ -8228,7 +8261,7 @@ function clearErrors(id, clearChildren = true) {
     warn(652, id);
   }
 }
-const FORMKIT_VERSION = "0.17.0";
+const FORMKIT_VERSION = "0.17.2";
 function createLibraryPlugin(...libraries) {
   const library = libraries.reduce((merged, lib) => extend$1(merged, lib), {});
   const plugin2 = () => {
@@ -11229,7 +11262,7 @@ function useInput(props2, context, options2 = {}) {
     }
     if (isVModeled && node.context) {
       clonedValueBeforeVmodel = cloneAny(node.value);
-      context.emit("update:modelValue", node.value);
+      context.emit("update:modelValue", shallowClone(node.value));
     }
   });
   if (isVModeled) {
@@ -11269,6 +11302,9 @@ function createInput(schemaOrComponent, definitionOptions = {}) {
     schema = createSection("input", () => cloneAny(schemaOrComponent));
   }
   definition2.schema = useSchema(schema || "Schema undefined");
+  if (!definition2.schemaMemoKey) {
+    definition2.schemaMemoKey = `${Math.random()}`;
+  }
   return definition2;
 }
 const messages = createSection("messages", () => ({
@@ -11539,8 +11575,12 @@ const vueBindings = function vueBindings2(node) {
     }
   });
   node.on("commitRaw", ({ payload }) => {
-    value.value = _value.value = payload;
-    triggerRef(value);
+    if (node.type !== "input" && !isRef(payload) && !isReactive(payload)) {
+      value.value = _value.value = shallowClone(payload);
+    } else {
+      value.value = _value.value = payload;
+      triggerRef(value);
+    }
     node.emit("modelUpdated");
   });
   node.on("commit", () => {
@@ -12190,39 +12230,99 @@ const multiStepOuter = createSection("multiStepOuter", () => ({
   ],
   features: [localize$2("next"), localize$2("prev")]
 });
-function createLocalStoragePlugin(LocalStorageOptions) {
+function createLocalStoragePlugin(localStorageOptions) {
   const localStoragePlugin = (node) => {
-    if (node.props.type !== "form")
+    if (node.type !== "group")
       return;
-    node.addProps(["useLocalStorage"]);
-    node.on("created", () => {
-      var _a, _b;
-      const useLocalStorage = undefine(node.props.useLocalStorage);
-      if (!useLocalStorage)
-        return;
-      const prefix2 = (_a = LocalStorageOptions === null || LocalStorageOptions === void 0 ? void 0 : LocalStorageOptions.prefix) !== null && _a !== void 0 ? _a : "formkit";
-      const maxAge = (_b = LocalStorageOptions === null || LocalStorageOptions === void 0 ? void 0 : LocalStorageOptions.maxAge) !== null && _b !== void 0 ? _b : 36e5;
-      const key = `${prefix2}-${node.name}`;
-      const value = localStorage.getItem(key);
-      if (value) {
-        const localStorageValue = JSON.parse(value);
-        if (localStorageValue.maxAge > Date.now()) {
-          node.input(localStorageValue.data);
-        } else {
-          localStorage.removeItem(key);
+    const shouldUseLocalStorage = (controlNode) => {
+      let controlFieldValue = true;
+      if (controlNode) {
+        controlFieldValue = controlNode.value === true;
+      }
+      return undefine(node.props.useLocalStorage) && controlFieldValue;
+    };
+    node.on("created", () => __async(this, null, function* () {
+      var _a, _b, _c;
+      node.addProps(["useLocalStorage"]);
+      yield node.settled;
+      const controlField = (_a = localStorageOptions === null || localStorageOptions === void 0 ? void 0 : localStorageOptions.control) !== null && _a !== void 0 ? _a : void 0;
+      let controlNode;
+      if (typeof controlField === "string") {
+        const controlNode2 = node.at(controlField);
+        if (controlNode2) {
+          controlNode2.on("commit", () => {
+            useLocalStorage = shouldUseLocalStorage(controlNode2);
+            if (!useLocalStorage) {
+              localStorage.removeItem(storageKey);
+            }
+          });
         }
       }
-      node.on("commit", ({ payload }) => {
-        localStorage.setItem(key, JSON.stringify({
+      let useLocalStorage = shouldUseLocalStorage(controlNode);
+      let saveTimeout = 0;
+      const debounce = typeof (localStorageOptions === null || localStorageOptions === void 0 ? void 0 : localStorageOptions.debounce) === "number" ? localStorageOptions.debounce : 200;
+      const prefix2 = (_b = localStorageOptions === null || localStorageOptions === void 0 ? void 0 : localStorageOptions.prefix) !== null && _b !== void 0 ? _b : "formkit";
+      const maxAge = (_c = localStorageOptions === null || localStorageOptions === void 0 ? void 0 : localStorageOptions.maxAge) !== null && _c !== void 0 ? _c : 36e5;
+      const key = (localStorageOptions === null || localStorageOptions === void 0 ? void 0 : localStorageOptions.key) ? `-${localStorageOptions.key}` : "";
+      const storageKey = `${prefix2}${key}-${node.name}`;
+      const loadValue = () => __async(this, null, function* () {
+        const value = localStorage.getItem(storageKey);
+        if (!value)
+          return;
+        const loadValue2 = JSON.parse(value);
+        if (typeof (localStorageOptions === null || localStorageOptions === void 0 ? void 0 : localStorageOptions.beforeLoad) === "function") {
+          node.props.disabled = true;
+          try {
+            loadValue2.data = yield localStorageOptions.beforeLoad(loadValue2.data);
+          } catch (error2) {
+            console.error(error2);
+          }
+          node.props.disabled = false;
+        }
+        if (!loadValue2 || typeof loadValue2.data !== "object")
+          return;
+        if (loadValue2.maxAge > Date.now()) {
+          node.input(loadValue2.data, false);
+        } else {
+          localStorage.removeItem(storageKey);
+        }
+      });
+      const saveValue = (payload) => __async(this, null, function* () {
+        let savePayload = payload;
+        if (typeof (localStorageOptions === null || localStorageOptions === void 0 ? void 0 : localStorageOptions.beforeSave) === "function") {
+          try {
+            savePayload = yield localStorageOptions.beforeSave(payload);
+          } catch (error2) {
+            console.error(error2);
+          }
+        }
+        if (!savePayload)
+          return;
+        localStorage.setItem(storageKey, JSON.stringify({
           maxAge: Date.now() + maxAge,
-          data: payload
+          data: savePayload
         }));
       });
+      node.on("commit", ({ payload }) => {
+        if (!useLocalStorage)
+          return;
+        clearTimeout(saveTimeout);
+        saveTimeout = setTimeout(() => __async(this, null, function* () {
+          saveValue(payload);
+        }), debounce);
+      });
+      node.on("prop:useLocalStorage", () => {
+        useLocalStorage = shouldUseLocalStorage(controlNode);
+        if (!useLocalStorage) {
+          localStorage.removeItem(storageKey);
+        }
+      });
       node.hook.submit((payload, next) => {
-        localStorage.removeItem(key);
+        localStorage.removeItem(storageKey);
         return next(payload);
       });
-    });
+      yield loadValue();
+    }));
   };
   return localStoragePlugin;
 }