bhl-forms 0.0.14 → 0.0.17

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,22 @@ 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 rollbar(type, msg) {
+  if (window.Rollbar) {
+    try {
+      window.Rollbar[type](msg);
+    } catch (err) {
+      console.warn("error calling rollbar:", err);
+    }
+  }
+}
 function chooseVariant(exp) {
   let variant = null, active = {}, fromCache = false;
   active = C(EXPERIMENT_KEY) || {};
@@ -10633,14 +10659,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,65 +10698,94 @@ function prepData(formData) {
   };
   return data;
 }
+const fireStepEvent = (formNode) => (stepResult, stepHistory2, stepQueue2) => {
+  if (!stepResult) {
+    return;
+  }
+  if (formNode.id) {
+    const form2 = document.getElementById(formNode.id);
+    if (form2)
+      form2.scrollIntoView();
+  }
+  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) {
+      const msg = "failed to fire step event: " + err.toString();
+      console.warn(msg);
+      rollbar("warning", msg);
+    }
+  }
+};
 const textClassification = {
-  label: "block mb-1 font-bold text-sm formkit-invalid:text-red-500",
+  label: "t-block t-mb-1 t-font-bold t-text-sm formkit-invalid:t-text-red-500",
   inner: `
-    max-w-lg
-    border
-    border-gray-400
-    formkit-invalid:border-red-500
-    rounded-lg mb-1
-    overflow-hidden
-    focus-within:border-blue-500
+    t-max-w-lg
+    t-border
+    t-border-gray-400
+    formkit-invalid:t-border-red-500
+    t-rounded-lg t-mb-1
+    t-overflow-hidden
+    focus-within:t-border-blue-500
   `,
-  input: "w-full h-10 px-3 border-none text-base text-gray-700 placeholder-gray-400"
+  input: "t-w-full t-h-10 t-px-3 t-border-none t-text-base t-text-gray-700 t-placeholder-gray-400"
 };
 const boxClassification = {
-  fieldset: "max-w-md border border-gray-400 rounded-md px-2 pb-1",
-  legend: "font-bold text-sm",
-  wrapper: "flex items-center mb-1 cursor-pointer",
-  help: "mb-2",
-  input: "form-check-input appearance-none h-5 w-5 mr-2 border border-gray-500 rounded-sm bg-white checked:bg-blue-500 focus:outline-none focus:ring-0 transition duration-100",
-  label: "text-sm text-gray-700"
+  fieldset: "t-max-w-md t-border t-border-gray-400 t-rounded-md t-px-2 t-pb-1",
+  legend: "t-font-bold t-text-sm",
+  wrapper: "t-flex t-items-center t-mb-1 t-cursor-pointer",
+  help: "t-mb-2",
+  input: "t-form-check-input t-appearance-none t-h-5 t-w-5 t-mr-2 t-border t-border-gray-500 t-rounded-sm t-bg-white checked:t-bg-blue-500 focus:t-outline-none focus:t-ring-0 t-transition t-duration-100",
+  label: "t-text-sm t-text-gray-700"
 };
 const buttonClassification = {
-  wrapper: "mb-1",
-  input: "bg-red-500 hover:bg-blue-700 text-white text-lg font-normal py-4 px-10 rounded",
-  outer: "mb-0"
+  wrapper: "t-mb-1",
+  input: "t-bg-red-500 hover:t-bg-red-600 t-text-white t-text-lg t-font-normal t-py-4 t-px-7 sm:t-px-10 t-rounded",
+  outer: "t-mb-0"
 };
 var theme = {
   global: {
-    outer: "mb-5 formkit-disabled:opacity-50",
-    help: "text-xs text-gray-500",
-    messages: "list-none p-0 mt-1 mb-0",
-    message: "text-red-500 mb-1 text-xs"
+    outer: "t-mb-5 formkit-disabled:t-opacity-50",
+    help: "t-text-xs t-text-gray-500",
+    messages: "t-list-none t-p-0 t-mt-1 t-mb-0",
+    message: "t-text-red-500 t-mb-1 t-text-xs"
   },
   button: buttonClassification,
   color: {
-    label: "block mb-1 font-bold text-sm",
-    input: "w-16 h-8 appearance-none cursor-pointer border border-gray-300 rounded-md mb-2 p-1"
+    label: "t-block t-mb-1 t-font-bold t-text-sm",
+    input: "t-w-16 t-h-8 t-appearance-none t-cursor-pointer t-border t-border-gray-300 t-rounded-md t-mb-2 t-p-1"
   },
   date: textClassification,
   "datetime-local": textClassification,
   checkbox: boxClassification,
   email: textClassification,
   file: {
-    label: "block mb-1 font-bold text-sm",
-    inner: "max-w-md cursor-pointer",
-    input: "text-gray-600 text-sm mb-1 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:bg-blue-500 file:text-white hover:file:bg-blue-600",
-    noFiles: "block text-gray-800 text-sm mb-1",
-    fileItem: "block flex text-gray-800 text-sm mb-1",
-    removeFiles: "ml-auto text-blue-500 text-sm"
+    label: "t-block t-mb-1 t-font-bold t-text-sm",
+    inner: "t-max-w-md t-cursor-pointer",
+    input: "t-text-gray-600 t-text-sm t-mb-1 file:t-mr-4 file:t-py-2 file:t-px-4 file:t-rounded-full file:t-border-0 file:t-text-sm file:t-bg-blue-500 file:t-text-white hover:file:t-bg-blue-600",
+    noFiles: "t-block t-text-gray-800 t-text-sm t-mb-1",
+    fileItem: "t-block t-flex t-text-gray-800 t-text-sm mb-1",
+    removeFiles: "t-ml-auto t-text-blue-500 t-text-sm"
   },
   month: textClassification,
   number: textClassification,
   password: textClassification,
   radio: __spreadProps(__spreadValues({}, boxClassification), {
-    input: boxClassification.input.replace("rounded-sm", "rounded-full")
+    input: boxClassification.input.replace("t-rounded-sm", "t-rounded-full")
   }),
   range: {
-    inner: "max-w-md",
-    input: "form-range appearance-none w-full h-2 p-0 bg-gray-200 rounded-full focus:outline-none focus:ring-0 focus:shadow-none"
+    inner: "t-max-w-md",
+    input: "t-form-range t-appearance-none t-w-full t-h-2 t-p-0 t-bg-gray-200 t-rounded-full focus:t-outline-none focus:t-ring-0 focus:t-shadow-none"
   },
   search: textClassification,
   select: textClassification,
@@ -10738,44 +10793,61 @@ var theme = {
   tel: textClassification,
   text: textClassification,
   textarea: __spreadProps(__spreadValues({}, textClassification), {
-    input: "block w-full h-32 px-3 pt-1 border-none text-base text-gray-700 placeholder-gray-400 placeholder:text-sm focus:shadow-outline"
+    input: "t-block t-w-full t-h-32 t-px-3 t-pt-1 t-border-none t-text-base t-text-gray-700 t-placeholder-gray-400 placeholder:t-text-sm focus:t-shadow-outline"
   }),
   time: textClassification,
   url: textClassification,
   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 };