bhl-forms 0.0.12 → 0.0.15

package/dist/bhl-forms.es.js

@@ -4489,7 +4489,7 @@ function cloneAny$1(obj) {
 function undefine$1(value) {
   return value !== void 0 && value !== "false" && value !== false ? true : void 0;
 }
-function init$1(obj) {
+function init$2(obj) {
   return !Object.isFrozen(obj) ? Object.defineProperty(obj, "__init", {
     enumerable: false,
     value: true
@@ -4728,7 +4728,7 @@ function reset$1(id, resetTo) {
     node.input(cloneAny$1(resetTo) || initial(node), false);
     node.walk((child) => child.input(initial(child), false));
     const finalInit = initial(node);
-    node.input(typeof finalInit === "object" ? cloneAny$1(resetTo) || init$1(finalInit) : finalInit, false);
+    node.input(typeof finalInit === "object" ? cloneAny$1(resetTo) || init$2(finalInit) : finalInit, false);
     node._e.play(node);
     clearState$1(node);
     node.emit("reset", node);
@@ -4798,9 +4798,9 @@ function trap$1(getter, setter, curryGetter = true) {
 }
 function createValue$1(options2) {
   if (options2.type === "group") {
-    return init$1(options2.value && typeof options2.value === "object" && !Array.isArray(options2.value) ? options2.value : {});
+    return init$2(options2.value && typeof options2.value === "object" && !Array.isArray(options2.value) ? options2.value : {});
   } else if (options2.type === "list") {
-    return init$1(Array.isArray(options2.value) ? options2.value : []);
+    return init$2(Array.isArray(options2.value) ? options2.value : []);
   }
   return options2.value === null ? "" : options2.value;
 }
@@ -4861,7 +4861,7 @@ function hydrate$1(node, context) {
     if (typeof _value !== "object")
       return;
     if (child.name in _value) {
-      const childValue = child.type !== "input" || _value[child.name] && typeof _value[child.name] === "object" ? init$1(_value[child.name]) : _value[child.name];
+      const childValue = child.type !== "input" || _value[child.name] && typeof _value[child.name] === "object" ? init$2(_value[child.name]) : _value[child.name];
       child.input(childValue, false);
     } else {
       if (node.type !== "list" || typeof child.name === "number") {
@@ -4948,7 +4948,7 @@ function addProps$1(node, context, props2) {
       }
     }
     const initial = cloneAny$1(context._value);
-    node.props.initial = node.type !== "input" ? init$1(initial) : initial;
+    node.props.initial = node.type !== "input" ? init$2(initial) : initial;
     node.props._emit = true;
     node.props.attrs = attrs;
     if (node.props.definition) {
@@ -5400,7 +5400,7 @@ function useSteps() {
         }));
       });
       if (!node.context.state.valid) {
-        return;
+        return false;
       }
     }
     if (node.props.attrs.nextStepMap) {
@@ -5414,12 +5414,21 @@ function useSteps() {
     } else {
       throw Error("Unexpected value for nextStep: " + nextStep);
     }
+    return true;
   };
-  const setNextStep2 = () => {
-    setStep2({ nextStep: 1 });
+  const setNextStep2 = (callback) => {
+    const res = setStep2({ nextStep: 1 });
+    if (callback) {
+      callback(res, stepHistory2, stepQueue2);
+    }
+    return res;
   };
-  const setPreviousStep2 = () => {
-    setStep2({ nextStep: -1, validate: false });
+  const setPreviousStep2 = (callback) => {
+    const res = setStep2({ nextStep: -1, validate: false });
+    if (callback) {
+      callback(res, stepHistory2, stepQueue2);
+    }
+    return res;
   };
   const stepPlugin2 = (node) => {
     if (node.props.type == "form") {
@@ -5459,7 +5468,7 @@ function useSteps() {
 }
 let { prepopPlugin } = usePrepop();
 let { stepPlugin, steps, stepHistory, stepQueue, enabledSteps, defaultOrder, activeStep, firstStep, lastStep, setStep, setNextStep, setPreviousStep } = useSteps();
-const urlParams = new URLSearchParams(window.location.search);
+const urlParams$1 = new URLSearchParams(window.location.search);
 const dataDefaults = {
   steps,
   activeStep,
@@ -5470,7 +5479,7 @@ const dataDefaults = {
     prepopPlugin
   ],
   urlParam: (name, backup = null) => {
-    return urlParams.get(name) || backup;
+    return urlParams$1.get(name) || backup;
   },
   firstStep: () => {
     return firstStep();
@@ -5478,14 +5487,14 @@ const dataDefaults = {
   lastStep: () => {
     return lastStep();
   },
-  setNextStep: (target) => () => {
-    setNextStep();
+  setNextStep: (callback) => () => {
+    return setNextStep(callback);
   },
-  setPreviousStep: (target) => () => {
-    setPreviousStep();
+  setPreviousStep: (callback) => () => {
+    return setPreviousStep(callback);
   },
   setStep: (nextStep, validate2) => () => {
-    setStep({ nextStep, validate: validate2 });
+    return setStep({ nextStep, validate: validate2 });
   },
   stepIsValid: (stepName) => {
     return steps[stepName].valid && steps[stepName].errorCount === 0;
@@ -5526,7 +5535,7 @@ const dataDefaults = {
       abort = handleSubmitError(err, node);
     }
     if (abort) {
-      return;
+      return false;
     }
     if (redirectUrl instanceof Function) {
       redirectUrl = redirectUrl(formData, node);
@@ -5537,6 +5546,7 @@ const dataDefaults = {
       }
       redirect(redirectUrl);
     }
+    return true;
   },
   stringify: (value) => JSON.stringify(value, null, 2)
 };
@@ -5846,7 +5856,7 @@ function getAt(obj, addr) {
 function undefine(value) {
   return value !== void 0 && value !== "false" && value !== false ? true : void 0;
 }
-function init(obj) {
+function init$1(obj) {
   return !Object.isFrozen(obj) ? Object.defineProperty(obj, "__init", {
     enumerable: false,
     value: true
@@ -6366,7 +6376,7 @@ function reset(id, resetTo) {
     node.input(cloneAny(resetTo) || initial(node), false);
     node.walk((child) => child.input(initial(child), false));
     const finalInit = initial(node);
-    node.input(typeof finalInit === "object" ? cloneAny(resetTo) || init(finalInit) : finalInit, false);
+    node.input(typeof finalInit === "object" ? cloneAny(resetTo) || init$1(finalInit) : finalInit, false);
     node._e.play(node);
     clearState(node);
     node.emit("reset", node);
@@ -6458,9 +6468,9 @@ function createName(options2) {
 }
 function createValue(options2) {
   if (options2.type === "group") {
-    return init(options2.value && typeof options2.value === "object" && !Array.isArray(options2.value) ? options2.value : {});
+    return init$1(options2.value && typeof options2.value === "object" && !Array.isArray(options2.value) ? options2.value : {});
   } else if (options2.type === "list") {
-    return init(Array.isArray(options2.value) ? options2.value : []);
+    return init$1(Array.isArray(options2.value) ? options2.value : []);
   }
   return options2.value === null ? "" : options2.value;
 }
@@ -6521,7 +6531,7 @@ function hydrate(node, context) {
     if (typeof _value !== "object")
       return;
     if (child.name in _value) {
-      const childValue = child.type !== "input" || _value[child.name] && typeof _value[child.name] === "object" ? init(_value[child.name]) : _value[child.name];
+      const childValue = child.type !== "input" || _value[child.name] && typeof _value[child.name] === "object" ? init$1(_value[child.name]) : _value[child.name];
       child.input(childValue, false);
     } else {
       if (node.type !== "list" || typeof child.name === "number") {
@@ -6608,7 +6618,7 @@ function addProps(node, context, props2) {
       }
     }
     const initial = cloneAny(context._value);
-    node.props.initial = node.type !== "input" ? init(initial) : initial;
+    node.props.initial = node.type !== "input" ? init$1(initial) : initial;
     node.props._emit = true;
     node.props.attrs = attrs;
     if (node.props.definition) {
@@ -10118,7 +10128,7 @@ const vueBindings = function vueBindings2(node) {
     return messages3;
   }, {}));
   const cachedClasses = reactive({});
-  const classes2 = new Proxy(cachedClasses, {
+  const classes = new Proxy(cachedClasses, {
     get(...args) {
       const [target, property] = args;
       let className = Reflect.get(...args);
@@ -10192,7 +10202,7 @@ const vueBindings = function vueBindings2(node) {
     type: node.props.type,
     ui,
     value,
-    classes: classes2
+    classes
   });
   node.on("created", () => {
     if (!eq(context.value, node.value)) {
@@ -10337,16 +10347,16 @@ var _default = _createPlugin.default;
 createPlugin$3.default = _default;
 let createPlugin = createPlugin$3;
 var plugin = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
-function generateClasses(classes2) {
+function generateClasses(classes) {
   const classesBySectionKey = {};
-  Object.keys(classes2).forEach((type) => {
-    Object.keys(classes2[type]).forEach((sectionKey) => {
+  Object.keys(classes).forEach((type) => {
+    Object.keys(classes[type]).forEach((sectionKey) => {
       if (!classesBySectionKey[sectionKey]) {
         classesBySectionKey[sectionKey] = {
-          [type]: classes2[type][sectionKey]
+          [type]: classes[type][sectionKey]
         };
       } else {
-        classesBySectionKey[sectionKey][type] = classes2[type][sectionKey];
+        classesBySectionKey[sectionKey][type] = classes[type][sectionKey];
       }
     });
   });
@@ -10621,6 +10631,13 @@ function F(t2, o2, e2) {
   return { location: t2, current: o2, previous: e2 };
 }
 const EXPERIMENT_KEY = "__form_experiments";
+const urlParams = new URLSearchParams(window.location.search);
+const DEBUG = urlParams.get("fdbg");
+function dbg() {
+  if (DEBUG != 1)
+    return;
+  console.debug(...arguments);
+}
 function chooseVariant(exp) {
   let variant = null, active = {}, fromCache = false;
   active = C(EXPERIMENT_KEY) || {};
@@ -10633,14 +10650,14 @@ function chooseVariant(exp) {
     active[exp.name] = variant;
     L(EXPERIMENT_KEY, active);
   }
-  console.debug("Chose variant:", variant, "fromCache:", fromCache);
+  dbg("Chose variant:", variant, "fromCache:", fromCache);
   return { variant, fromCache };
 }
 async function schemaFromUrl(url3) {
-  console.debug("Fetching:", url3);
+  dbg("Fetching:", url3);
   const res = await fetch(url3);
   const schemaObj = await res.json();
-  console.debug("Got schema:", schemaObj);
+  dbg("Got schema:", schemaObj);
   return schemaObj;
 }
 const flattenObj = (obj) => {
@@ -10672,6 +10689,28 @@ function prepData(formData) {
   };
   return data;
 }
+const fireStepEvent = (formNode) => (stepResult, stepHistory2, stepQueue2) => {
+  if (!stepResult) {
+    return;
+  }
+  const form_id = formNode.attrs.formId || window.location.hostname + "-" + formNode.id;
+  if (typeof window._analytics !== "undefined") {
+    try {
+      window._analytics.track("form-step", {
+        "form_source": "formkit",
+        "form_id": form_id,
+        "step_name": stepHistory2[stepHistory2.length - 1],
+        "step_count": stepHistory2.length
+      }, {
+        plugins: {
+          "google-tag-manager": false
+        }
+      });
+    } catch (err) {
+      console.warn("failed to fire step event:", err);
+    }
+  }
+};
 const textClassification = {
   label: "block mb-1 font-bold text-sm formkit-invalid:text-red-500",
   inner: `
@@ -10745,37 +10784,54 @@ var theme = {
   week: textClassification
 };
 var index = "";
-const classes = generateClasses(theme);
-const forms = window.bhlFormDefs || [];
 const apps = {};
-forms.forEach(async function(form2) {
-  console.debug("Mounting form:", form2);
-  if (form2.schema && form2.experiment) {
-    throw Error("Only one of schema and experiment allowed");
-  }
-  let schema;
-  if (form2.schema) {
-    schema = form2.schema;
-  } else if (form2.experiment) {
-    const res = chooseVariant(form2.experiment);
-    schema = res.variant.schema;
-    if (form2.experimentCallback) {
-      experimentCallback(form2, res.variant, res.fromCache);
-    }
-  }
-  let schemaObj = schema;
-  if (typeof schema === "string") {
-    schemaObj = await schemaFromUrl(schema);
-  }
-  const data = form2.data || {};
-  data.prepData = data.prepData || prepData;
-  const app = createApp(_sfc_main, { schema: schemaObj, data }).use(plugin$1, defaultConfig({
-    config: {
-      classes
-    }
-  }));
-  app.mount("#" + form2.target);
-  apps[form2.target] = app;
-});
-console.debug("Apps:", apps);
-export { apps as bhlForms };
+const init = () => {
+  const classes = generateClasses(theme);
+  const forms = window.bhlFormDefs || [];
+  forms.forEach(async function(form2) {
+    dbg("Mounting form:", form2);
+    if (form2.schema && form2.experiment) {
+      throw Error("Only one of schema and experiment allowed");
+    }
+    let schema;
+    if (form2.schema) {
+      schema = form2.schema;
+    } else if (form2.experiment) {
+      const res = chooseVariant(form2.experiment);
+      schema = res.variant.schema;
+      if (form2.experimentCallback) {
+        experimentCallback(form2, res.variant, res.fromCache);
+      }
+    }
+    let schemaObj = schema;
+    if (typeof schema === "string") {
+      schemaObj = await schemaFromUrl(schema);
+    }
+    const data = form2.data || {};
+    data.prepData = data.prepData || prepData;
+    data.fireStepEvent = data.fireStepEvent || fireStepEvent;
+    const app = createApp(_sfc_main, { schema: schemaObj, data }).use(plugin$1, defaultConfig({
+      config: {
+        classes
+      }
+    }));
+    app.mount("#" + form2.target);
+    apps[form2.target] = app;
+  });
+  dbg("Apps:", apps);
+};
+const initStrategy = window.bhlFormsInitStrategy || "immediate";
+if (!initStrategy || initStrategy === "immediate") {
+  dbg("immediate bhlForms init()");
+  init();
+} else if (initStrategy === "DOMContentLoaded") {
+  window.addEventListener("DOMContentLoaded", function(event) {
+    dbg("DOMContentLoaded bhlForms init()");
+    init();
+  });
+} else if (initStrategy === "manual") {
+  dbg("manual bhlForms init()");
+} else {
+  throw Error("Invalid bhlFormsInitStrategy: " + initStrategy);
+}
+export { apps as bhlForms, init as bhlFormsInit };