@teamnovu/nuxt-statamic-formbuilder 0.1.0

package/dist/runtime/utils/graphqlFragment.js

@@ -0,0 +1,37 @@
+export const COMPONENT_FORM_BUILDER_FRAGMENT = (
+  /* GraphQL */
+  `
+  fragment ComponentFormBuilder on Fieldset_ComponentFormBuilder {
+    __typename
+    id
+    type
+    send_button_text
+    form {
+      __typename
+      handle
+      honeypot
+      rules
+      title
+      sections {
+        __typename
+        display
+        instructions
+        fields {
+          __typename
+          config
+          display
+          handle
+          instructions
+          type
+          width
+          if
+          unless
+        }
+      }
+    }
+    message_loading
+    message_success
+    message_error
+  }
+`
+);

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

@@ -0,0 +1 @@
+export declare function removePTags(html?: string): string | null;

package/dist/runtime/utils/removePTags.js

@@ -0,0 +1,4 @@
+export function removePTags(html) {
+  if (!html) return null;
+  return html.replace(/<p>|<\/p>/g, "");
+}

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

@@ -0,0 +1,7 @@
+import type { FormBuilderConfiguration } from '../types.js';
+export declare function submitStatamicForm(args: {
+    form: FormBuilderConfiguration;
+    state: Record<string, unknown>;
+    serverUrl: string;
+    locale: string;
+}): Promise<unknown>;

package/dist/runtime/utils/submitStatamicForm.js

@@ -0,0 +1,64 @@
+const getCookie = (name) => {
+  const match = document.cookie.match(
+    new RegExp(`(^|;\\s*)(${name})=([^;]*)`)
+  );
+  return match ? decodeURIComponent(match[3] ?? "") : null;
+};
+function flattenFields(form) {
+  if ("fields" in form) {
+    return form.fields;
+  }
+  return form.sections.flatMap((section) => section.fields);
+}
+export async function submitStatamicForm(args) {
+  const { form, state, serverUrl, locale } = args;
+  if (!serverUrl) {
+    throw new Error("[nuxt-statamic-formbuilder] No serverUrl configured for Statamic submit");
+  }
+  await fetch(`${serverUrl}/sanctum/csrf-cookie`, {
+    credentials: "include"
+  });
+  const token = getCookie("XSRF-TOKEN");
+  if (!token) {
+    throw new Error("No CSRF token found");
+  }
+  const formData = new FormData();
+  formData.append("_site", locale);
+  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]);
+      }
+    } 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}`,
+    {
+      method: "POST",
+      credentials: "include",
+      headers: {
+        "Accept": "application/json",
+        "X-Requested-With": "XMLHttpRequest",
+        "X-XSRF-TOKEN": token
+      },
+      body: formData
+    }
+  );
+  if (!response.ok) {
+    const body = await response.json().catch(() => void 0);
+    const error = new Error(`HTTP error! status: ${response.status}`);
+    error.body = body;
+    throw error;
+  }
+  return await response.json().catch(() => void 0);
+}

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

@@ -0,0 +1,7 @@
+import type { FormBuilderConfiguration } from '../types.js';
+/**
+ * Cast a GraphQL Form payload into FormBuilderConfiguration.
+ * Statamic exposes `config` / `rules` as Array scalars — callers typically
+ * already receive the right shape after codegen.
+ */
+export declare function toFormBuilderConfiguration(form: unknown): FormBuilderConfiguration | undefined;

package/dist/runtime/utils/toFormBuilderConfiguration.js

@@ -0,0 +1,37 @@
+function normalizeField(field) {
+  const config = field.config;
+  const normalizedConfig = Array.isArray(config) || config == null ? {} : config;
+  return {
+    ...field,
+    config: {
+      ...normalizedConfig,
+      // Editors often only set Statamic `display`; fieldtype `label` may be empty.
+      label: normalizedConfig.label ?? field.display ?? void 0
+    }
+  };
+}
+export function toFormBuilderConfiguration(form) {
+  if (!form || typeof form !== "object") {
+    return void 0;
+  }
+  const candidate = form;
+  if (!candidate.handle) {
+    return void 0;
+  }
+  if ("fields" in candidate && Array.isArray(candidate.fields)) {
+    return {
+      ...form,
+      fields: candidate.fields.map(normalizeField)
+    };
+  }
+  if ("sections" in candidate && Array.isArray(candidate.sections)) {
+    return {
+      ...form,
+      sections: candidate.sections.map((section) => ({
+        ...section,
+        fields: (section.fields ?? []).map(normalizeField)
+      }))
+    };
+  }
+  return form;
+}

package/dist/types.d.mts

@@ -0,0 +1,5 @@
+export { type BaseFieldConfig, type DefaultInputField, type DisplayTextFieldConfig, type FormBuilderConfiguration, type FormBuilderField, type FormBuilderFieldBase, type FormBuilderFieldType, type FormBuilderRequestState, type FormBuilderSubmitter, type FormBuilderTexts, type FormFieldOption, type InputCheckboxesFieldConfig, type InputDateFieldConfig, type InputEmailFieldConfig, type InputFileUploadFieldConfig, type InputFormBuilderField, type InputNumberFieldConfig, type InputPhoneFieldConfig, type InputRadioButtonsFieldConfig, type InputRules, type InputSelectFieldConfig, type InputSliderFieldConfig, type InputSwitchFieldConfig, type InputTextFieldConfig, type InputTextareaFieldConfig, type TranslatableInput, type UseFormBuilderOptions, type ValidationTrigger, type defaultInputField, type formBuilderStateKey, type isDisplayOrSpacerField, type isFileUploadField, type isInputField, type isMultiValueField } from '../dist/runtime/types.js'
+
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@teamnovu/nuxt-statamic-formbuilder",
+  "version": "0.1.0",
+  "description": "Headless Nuxt form builder with Statamic submit adapter",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    },
+    "./style.css": "./dist/runtime/styles/form-builder.css",
+    "./runtime/*": {
+      "types": "./dist/runtime/*.d.ts",
+      "import": "./dist/runtime/*"
+    },
+    "./runtime/types": {
+      "types": "./dist/runtime/types.d.ts",
+      "import": "./dist/runtime/types.js"
+    },
+    "./runtime/composables/*": {
+      "types": "./dist/runtime/composables/*.d.ts",
+      "import": "./dist/runtime/composables/*"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.3.1",
+    "valibot": "^1.2.0"
+  },
+  "peerDependencies": {
+    "@nuxtjs/i18n": ">=9",
+    "nuxt": ">=3.16",
+    "vue-i18n": ">=9"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.3.1",
+    "@nuxtjs/i18n": "^10.2.3",
+    "@types/node": "^24.11.0",
+    "eslint": "^10.0.2",
+    "nuxt": "^4.3.1",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.4.6",
+    "vue-tsc": "^3.3.7"
+  },
+  "scripts": {
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare",
+    "lint": "eslint ."
+  }
+}