@teamnovu/nuxt-statamic-formbuilder 1.1.0 → 1.3.0

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "1.1.0",
+  "version": "1.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/app/components/StatamicFormBuilder.d.vue.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     serverUrl?: string;
     styleConfig?: FormBuilderStyleConfig;
     submitter?: FormBuilderSubmitter;
+    resetDelay?: number | false;
     /**
      * Override the FormBuilder component (defaults to globally registered `FormBuilder`
      * from a UI layer such as `@teamnovu/nuxt-statamic-formbuilder-nuxt-ui`).

package/dist/runtime/app/components/StatamicFormBuilder.vue

@@ -7,6 +7,7 @@
     :texts="texts"
     :style-config="styleConfig"
     :submitter="submitter"
+    :reset-delay="resetDelay"
   >
     <template
       v-for="(_, name) in $slots"
@@ -30,6 +31,7 @@ const props = defineProps({
   serverUrl: { type: String, required: false },
   styleConfig: { type: Object, required: false },
   submitter: { type: Function, required: false },
+  resetDelay: { type: [Number, Boolean], required: false },
   formComponent: { type: null, required: false }
 });
 const runtimeConfig = useRuntimeConfig();

package/dist/runtime/app/components/StatamicFormBuilder.vue.d.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     serverUrl?: string;
     styleConfig?: FormBuilderStyleConfig;
     submitter?: FormBuilderSubmitter;
+    resetDelay?: number | false;
     /**
      * Override the FormBuilder component (defaults to globally registered `FormBuilder`
      * from a UI layer such as `@teamnovu/nuxt-statamic-formbuilder-nuxt-ui`).

package/dist/runtime/app/composables/useFormBuilder.js

@@ -2,6 +2,7 @@ import { useRuntimeConfig } from "#imports";
 import { useI18n } from "vue-i18n";
 import { computed, ref, toValue } from "vue";
 import { isDisplayOrSpacerField, isMultiValueField } from "../../types.js";
+import { pushFormSubmissionDataLayer } from "../../utils/pushFormSubmissionDataLayer.js";
 import { submitStatamicForm } from "../../utils/submitStatamicForm.js";
 function flattenFields(form) {
   if ("fields" in form) {
@@ -18,6 +19,8 @@ function setInitialState(fields) {
       acc[field.handle] = isMultiValueField(field) ? [] : null;
     } else if (isMultiValueField(field)) {
       acc[field.handle] = [];
+    } else if (field.type === "input_switch") {
+      acc[field.handle] = field.config.default === true;
     } else {
       acc[field.handle] = void 0;
     }
@@ -50,6 +53,7 @@ export function useFormBuilder(formBuilderConfiguration, serverUrlOrOptions) {
         locale: locale.value
       });
       requestState.value = "success";
+      pushFormSubmissionDataLayer(formBuilderConfiguration);
       return result;
     } catch (error) {
       requestState.value = "error";

package/dist/runtime/app/composables/useFormValidation.js

@@ -19,6 +19,9 @@ export function useFormValidation(fieldsInput, formRules, _state) {
       if (name === "required") {
         return { ...parsedRules, required: true };
       }
+      if (name === "accepted") {
+        return { ...parsedRules, accepted: true };
+      }
       if (name === "min" && value) {
         return { ...parsedRules, min: Number(value) };
       }
@@ -60,7 +63,7 @@ export function useFormValidation(fieldsInput, formRules, _state) {
   const buildFieldSchema = (field) => {
     const rules = getRulesForField(field);
     const normalizedType = normalizeFieldType(field, rules);
-    const isRequired = rules.required === true;
+    const isRequired = rules.required === true || rules.accepted === true;
     const buildStringSchema = () => {
       let stringSchema2 = v.union([
         v.pipe(v.string()),
@@ -126,7 +129,7 @@ export function useFormValidation(fieldsInput, formRules, _state) {
       return arraySchema();
     }
     if (normalizedType === "boolean") {
-      const base = v.boolean();
+      const base = rules.accepted === true ? v.pipe(v.boolean(), v.check((value) => value === true, t("form.user_feedback.field_validation.required"))) : v.boolean();
       return isRequired ? base : v.optional(base);
     }
     if (normalizedType === "file" && field.type === "input_file_upload") {

package/dist/runtime/types.d.ts

@@ -71,6 +71,7 @@ export declare function isFileUploadField(field: FormBuilderField): field is Ext
 export declare function isMultiValueField(field: FormBuilderField): boolean;
 export type InputRules = {
     required?: boolean;
+    accepted?: boolean;
     min?: number;
     max?: number;
     maxlength?: number;
@@ -92,6 +93,8 @@ export type DefaultInputField = {
 export type defaultInputField = DefaultInputField;
 export type FormBuilderConfiguration = {
     handle: string;
+    /** CMS form title (Statamic GraphQL `title`). Used for analytics. */
+    title?: string | null;
     honeypot: string | null;
     rules: {
         [key: string]: string;

package/dist/runtime/utils/pushFormSubmissionDataLayer.d.ts

@@ -0,0 +1,11 @@
+import type { FormBuilderConfiguration } from '../types.js';
+export type FormSubmissionDataLayerEvent = {
+    event: 'form_submission';
+    form_id: string;
+    form_name: string;
+};
+/**
+ * Push a GTM-compatible form_submission event after a successful submit.
+ * No-op on the server and when `window` is unavailable.
+ */
+export declare function pushFormSubmissionDataLayer(form: FormBuilderConfiguration): void;

package/dist/runtime/utils/pushFormSubmissionDataLayer.js

@@ -0,0 +1,16 @@
+function getDataLayer() {
+  const win = window;
+  win.dataLayer ??= [];
+  return win.dataLayer;
+}
+export function pushFormSubmissionDataLayer(form) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const event = {
+    event: "form_submission",
+    form_id: form.handle,
+    form_name: form.title ?? ""
+  };
+  getDataLayer().push(event);
+}

package/dist/runtime/utils/submitStatamicForm.js

@@ -24,23 +24,25 @@ export async function submitStatamicForm(args) {
   }
   const formData = new FormData();
   formData.append("_site", locale);
+  const fields = flattenFields(form);
   Object.entries(state).forEach(([key, value]) => {
-    if (value?.[0]?.size || value?.[1]?.size) {
-      for (let x = 0; x < value.length; x++) {
-        formData.append(`${key}[${x}]`, value[x]);
+    if (Array.isArray(value)) {
+      const field = fields.find((candidate) => candidate.handle === key);
+      if (field?.type === "input_radio_buttons") {
+        if (value[0] != null) {
+          formData.append(key, value[0]);
+        }
+      } else {
+        for (let x = 0; x < value.length; x++) {
+          formData.append(`${key}[${x}]`, value[x]);
+        }
       }
+    } else if (typeof value === "boolean") {
+      formData.append(key, value ? "1" : "0");
     } else if (value != null) {
       formData.append(key, value);
     }
   });
-  flattenFields(form).filter((field) => ["checkboxes", "input_checkboxes"].includes(field.type)).forEach((field) => {
-    const copy = [...formData.entries().filter(([key]) => key?.startsWith("["))];
-    copy.forEach(([key, value]) => {
-      formData.delete(key);
-      const newKey = key.replace(`[${field.handle}]`, field.handle);
-      formData.append(newKey, value);
-    });
-  });
   const response = await fetch(
     `${serverUrl}/!/forms/${form.handle}`,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/nuxt-statamic-formbuilder",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Headless Nuxt form builder with Statamic submit adapter",
   "license": "MIT",
   "homepage": "https://github.com/teamnovu/nuxt-statamic-formbuilder#readme",