@teamnovu/nuxt-statamic-formbuilder-nuxt-ui 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+# @teamnovu/nuxt-statamic-formbuilder-nuxt-ui
+
+Nuxt UI field layer for `@teamnovu/nuxt-statamic-formbuilder`. Registers all `input_*` / `display_text` field components and exports `FormBuilder` (UForm shell).
+
+See the [monorepo README](../../README.md) for install and usage.

package/dist/module.d.mts

@@ -0,0 +1,9 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export { FormBuilderStyleConfig } from '../dist/runtime/types.js';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@teamnovu/nuxt-statamic-formbuilder-nuxt-ui",
+  "configKey": "formBuilderNuxtUi",
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,45 @@
+import { defineNuxtModule, createResolver, installModule, addComponent, addPlugin } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@teamnovu/nuxt-statamic-formbuilder-nuxt-ui",
+    configKey: "formBuilderNuxtUi"
+  },
+  defaults: {},
+  async setup(_options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    await installModule("@teamnovu/nuxt-statamic-formbuilder");
+    addComponent({
+      name: "FormBuilder",
+      filePath: resolver.resolve("./runtime/components/FormBuilder.vue")
+    });
+    addComponent({
+      name: "FormField",
+      filePath: resolver.resolve("./runtime/components/FormField.vue")
+    });
+    const fields = [
+      "FormFieldText",
+      "FormFieldTextarea",
+      "FormFieldEmail",
+      "FormFieldPhone",
+      "FormFieldNumber",
+      "FormFieldSelect",
+      "FormFieldDate",
+      "FormFieldSlider",
+      "FormFieldCheckboxes",
+      "FormFieldRadioButtons",
+      "FormFieldSwitch",
+      "FormFieldFileUpload",
+      "FormFieldDisplayText"
+    ];
+    for (const name of fields) {
+      addComponent({
+        name,
+        filePath: resolver.resolve(`./runtime/components/fields/${name}.vue`)
+      });
+    }
+    addPlugin(resolver.resolve("./runtime/plugin"));
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/FormBuilder.d.vue.ts

@@ -0,0 +1,33 @@
+import { type FormBuilderConfiguration, type FormBuilderTexts, type FormBuilderSubmitter } from '../reexports.js';
+import type { FormBuilderStyleConfig } from '../types.js';
+type __VLS_Props = {
+    serverUrl?: string;
+    form: FormBuilderConfiguration;
+    texts?: Partial<FormBuilderTexts>;
+    styleConfig?: FormBuilderStyleConfig;
+    submitter?: FormBuilderSubmitter;
+};
+declare var __VLS_33: {}, __VLS_41: {}, __VLS_43: {}, __VLS_45: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_33) => any;
+} & {
+    loading?: (props: typeof __VLS_41) => any;
+} & {
+    success?: (props: typeof __VLS_43) => any;
+} & {
+    error?: (props: typeof __VLS_45) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    serverUrl: string;
+    texts: Partial<FormBuilderTexts>;
+    styleConfig: FormBuilderStyleConfig;
+    submitter: FormBuilderSubmitter;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FormBuilder.vue

@@ -0,0 +1,164 @@
+<template>
+  <UForm
+    novalidate
+    :schema="schema"
+    :state="state"
+    :validate-on="['input', 'blur']"
+    class="
+      @container -mb-8 grid grid-cols-12 gap-x-4
+      *:pb-8
+    "
+    :class="{ 'reset-form': requestState === 'success' }"
+    @error="onError"
+    @submit.prevent.stop="onSubmit"
+  >
+    <template v-if="'fields' in form">
+      <FormBuilderFields
+        :style-config="resolvedStyleConfig"
+        :form="form"
+        :fields="form.fields"
+      />
+    </template>
+    <template v-else>
+      <FormBuilderFields
+        v-for="section in form.sections"
+        :key="section.display ?? void 0"
+        :style-config="resolvedStyleConfig"
+        :form="form"
+        :fields="section.fields"
+      />
+    </template>
+
+    <input
+      v-if="form.honeypot"
+      :name="form.honeypot"
+      aria-hidden
+      class="hidden"
+    >
+
+    <ClientOnly>
+      <Transition
+        name="fade"
+        mode="out-in"
+      >
+        <slot
+          v-if="requestState === 'not_submitted' || requestState === 'error'"
+          name="default"
+        >
+          <div class="col-span-12 mt-4">
+            <UButton type="submit">
+              {{ props.texts?.send_button_text }}
+            </UButton>
+          </div>
+        </slot>
+        <slot
+          v-else-if="requestState === 'loading'"
+          name="loading"
+        >
+          <p class="col-span-12">
+            {{ props.texts?.message_loading }}
+          </p>
+        </slot>
+        <slot
+          v-else-if="requestState === 'success'"
+          name="success"
+        >
+          <div
+            class="col-span-12"
+            v-html="props.texts?.message_success"
+          />
+        </slot>
+      </Transition>
+      <slot
+        v-if="requestState === 'error'"
+        name="error"
+      >
+        <p class="col-span-12">
+          {{ props.texts?.message_error }}
+        </p>
+      </slot>
+    </ClientOnly>
+  </UForm>
+</template>
+
+<script setup>
+import { useToast } from "@nuxt/ui/composables";
+import { useFormBuilder } from "@teamnovu/nuxt-statamic-formbuilder/runtime/composables/useFormBuilder";
+import { useFormValidation } from "@teamnovu/nuxt-statamic-formbuilder/runtime/composables/useFormValidation";
+import { useI18n } from "vue-i18n";
+import { computed, provide, ref, watch } from "vue";
+import { formBuilderStateKey } from "../reexports";
+const { t } = useI18n();
+const props = defineProps({
+  serverUrl: { type: String, required: false, default: void 0 },
+  form: { type: Object, required: true },
+  texts: { type: Object, required: false, default: void 0 },
+  styleConfig: { type: Object, required: false, default: void 0 },
+  submitter: { type: Function, required: false, default: void 0 }
+});
+const resolvedStyleConfig = computed(() => ({
+  color: "neutral",
+  variant: "outline",
+  size: "md",
+  highlight: false,
+  ...props.styleConfig
+}));
+const {
+  submit,
+  reset,
+  requestState,
+  state
+} = useFormBuilder(props.form, {
+  serverUrl: props.serverUrl,
+  submitter: props.submitter
+});
+const fields = computed(() => {
+  return [
+    ..."fields" in props.form ? props.form.fields : props.form.sections.flatMap((section) => section.fields)
+  ];
+});
+const { schema } = useFormValidation(fields, props.form.rules, state);
+provide(formBuilderStateKey, state);
+const result = ref(null);
+async function onSubmit(event) {
+  result.value = await submit(event, state);
+}
+const toast = useToast();
+watch(requestState, (newState) => {
+  if (newState === "success") {
+    toast.add({
+      title: t("form.user_feedback.success.title"),
+      icon: "i-lucide-circle-check",
+      description: props.texts?.message_success,
+      color: "success"
+    });
+    setTimeout(() => {
+      reset();
+      result.value = null;
+    }, 1e3);
+  }
+  if (newState === "error") {
+    toast.add({
+      title: t("form.user_feedback.error.title"),
+      icon: "i-lucide-circle-alert",
+      description: props.texts?.message_error,
+      color: "error"
+    });
+  }
+});
+function onError(event) {
+  const fieldLabels = event.errors.map((error) => {
+    const field = fields.value.find((f) => f.handle === error.name);
+    return field?.display ?? error.name;
+  });
+  toast.add({
+    title: t("form.user_feedback.error.title"),
+    icon: "i-lucide-circle-alert",
+    description: t("form.user_feedback.field_invalid", {
+      count: fieldLabels.length,
+      fields: fieldLabels.join(", ")
+    }),
+    color: "error"
+  });
+}
+</script>

package/dist/runtime/components/FormBuilder.vue.d.ts

@@ -0,0 +1,33 @@
+import { type FormBuilderConfiguration, type FormBuilderTexts, type FormBuilderSubmitter } from '../reexports.js';
+import type { FormBuilderStyleConfig } from '../types.js';
+type __VLS_Props = {
+    serverUrl?: string;
+    form: FormBuilderConfiguration;
+    texts?: Partial<FormBuilderTexts>;
+    styleConfig?: FormBuilderStyleConfig;
+    submitter?: FormBuilderSubmitter;
+};
+declare var __VLS_33: {}, __VLS_41: {}, __VLS_43: {}, __VLS_45: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_33) => any;
+} & {
+    loading?: (props: typeof __VLS_41) => any;
+} & {
+    success?: (props: typeof __VLS_43) => any;
+} & {
+    error?: (props: typeof __VLS_45) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    serverUrl: string;
+    texts: Partial<FormBuilderTexts>;
+    styleConfig: FormBuilderStyleConfig;
+    submitter: FormBuilderSubmitter;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FormField.d.vue.ts

@@ -0,0 +1,20 @@
+import type { BaseFieldConfig, DefaultInputField } from '../reexports.js';
+import type { FormBuilderStyleConfig } from '../types.js';
+type __VLS_Props = {
+    input: DefaultInputField;
+    styleConfig: FormBuilderStyleConfig;
+    config?: BaseFieldConfig;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FormField.vue

@@ -0,0 +1,42 @@
+<template>
+  <UFormField
+    v-bind="{ ...styleConfig }"
+    :hint="hint"
+    :help="help"
+    :required="input?.rules?.required ?? false"
+    :name="input?.name"
+    :label="label"
+    class="group/form-field relative isolate"
+    :class="{ 'has-floating-label': config?.floating_label }"
+    :ui="{
+  root: 'w-full',
+  labelWrapper: 'justify-between group-[.has-floating-label]/form-field:justify-end',
+  label: 'z-50 transition-all after:text-(--required-indicator)',
+  error: 'text-(--ui-text-error) block'
+}"
+  >
+    <template #default>
+      <slot />
+    </template>
+  </UFormField>
+</template>
+
+<script setup>
+import { useTranslatableInput } from "@teamnovu/nuxt-statamic-formbuilder/runtime/composables/useTranslatableInput";
+import { computed } from "vue";
+const props = defineProps({
+  input: { type: Object, required: true },
+  styleConfig: { type: Object, required: true },
+  config: { type: Object, required: false }
+});
+const translateInput = useTranslatableInput();
+const hint = computed(() => translateInput(props.config?.hint));
+const help = computed(() => translateInput(props.config?.help));
+const label = computed(
+  () => translateInput(props.config?.label) ?? props.input?.ariaLabel
+);
+</script>
+
+<style>
+.group\/form-field.has-floating-label{--label-resting-top:1.875rem;--label-floated-top:0rem}.group\/form-field.has-floating-label:not(:has([data-slot=hint])){--label-resting-top:0.625rem;--label-floated-top:-1.25rem}.group\/form-field.has-floating-label label{background:transparent;left:.5rem;position:absolute;right:0}.group\/form-field.has-floating-label:has(input:-moz-placeholder,textarea:-moz-placeholder,[data-placeholder]) label{pointer-events:none;top:var(--label-resting-top)}.group\/form-field.has-floating-label:has(input:placeholder-shown,textarea:placeholder-shown,[data-placeholder]) label{pointer-events:none;top:var(--label-resting-top)}.group\/form-field.has-floating-label:has(input,textarea,button) label{top:var(--label-floated-top)}.group\/form-field.has-floating-label:has(input:focus,textarea:focus,button:focus,button[data-state=open]) label{top:var(--label-floated-top)}
+</style>

package/dist/runtime/components/FormField.vue.d.ts

@@ -0,0 +1,20 @@
+import type { BaseFieldConfig, DefaultInputField } from '../reexports.js';
+import type { FormBuilderStyleConfig } from '../types.js';
+type __VLS_Props = {
+    input: DefaultInputField;
+    styleConfig: FormBuilderStyleConfig;
+    config?: BaseFieldConfig;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/fields/FormFieldCheckboxes.d.vue.ts

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputCheckboxesFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputCheckboxesFieldConfig;
+    input: DefaultInputField;
+    styleConfig: FormBuilderStyleConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/FormFieldCheckboxes.vue

@@ -0,0 +1,46 @@
+<template>
+  <FormField
+    :config="config"
+    :input="input"
+    :style-config="styleConfig"
+  >
+    <UCheckboxGroup
+      v-bind="input"
+      :model-value="state[props.input?.name] ?? []"
+      @update:model-value="state[props.input?.name] = $event"
+      :orientation="config?.orientation"
+      :variant="config?.variant"
+      :indicator="config?.indicator"
+      :color="styleConfig?.color"
+      :size="styleConfig?.size"
+      :items="selectOptions ?? []"
+      :ui="{
+  fieldset: 'flex-wrap'
+}"
+    >
+      <template #label="{ item }">
+        <span v-html="removePTags(item?.label) ?? ''" />
+      </template>
+    </UCheckboxGroup>
+  </FormField>
+</template>
+
+<script setup>
+import { useTranslatableInput } from "@teamnovu/nuxt-statamic-formbuilder/runtime/composables/useTranslatableInput";
+import { removePTags } from "@teamnovu/nuxt-statamic-formbuilder/runtime/utils/removePTags";
+import { computed, inject } from "vue";
+import { formBuilderStateKey } from "../../reexports";
+const state = inject(formBuilderStateKey);
+const props = defineProps({
+  config: { type: Object, required: false },
+  input: { type: Object, required: true },
+  styleConfig: { type: Object, required: true }
+});
+const translateInput = useTranslatableInput();
+const selectOptions = computed(() => {
+  return props.config?.options?.map((option) => ({
+    label: translateInput(option.text) ?? option.key,
+    value: option.key
+  })) ?? [];
+});
+</script>

package/dist/runtime/components/fields/FormFieldCheckboxes.vue.d.ts

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputCheckboxesFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputCheckboxesFieldConfig;
+    input: DefaultInputField;
+    styleConfig: FormBuilderStyleConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/FormFieldDate.d.vue.ts

@@ -0,0 +1,13 @@
+import { type DefaultInputField, type InputDateFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputDateFieldConfig;
+    input: DefaultInputField;
+    isRange?: boolean;
+    styleConfig: FormBuilderStyleConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    isRange: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/FormFieldDate.vue

@@ -0,0 +1,86 @@
+<template>
+  <FormField
+    :config="config"
+    :style-config="styleConfig"
+    :input="input"
+  >
+    <UInputDate
+      v-bind="{ ...input, ...styleConfig }"
+      ref="inputDateRef"
+      v-model="modelValue"
+      :min-value="minDate"
+      :max-value="maxDate"
+      :range="isRange"
+      :ui="{
+  trailing: 'p-0'
+}"
+    >
+      <template #trailing>
+        <UPopover :reference="inputDateRef?.inputsRef[0]?.$el">
+          <UButton
+            v-bind="{ ...styleConfig, variant: 'ghost' }"
+            icon="i-lucide-calendar"
+            :aria-label="isRange ? 'Select a date range' : 'Select a date'"
+          />
+
+          <template #content>
+            <UCalendar
+            v-bind="{ ...styleConfig, variant: styleConfig?.variant !== 'ghost' && styleConfig?.variant !== 'none' ? styleConfig?.variant : void 0 }"
+              v-model="modelValue"
+              :number-of-months="2"
+              :range="isRange"
+            />
+          </template>
+        </UPopover>
+      </template>
+    </UInputDate>
+  </FormField>
+</template>
+
+<script setup>
+import { CalendarDate, parseDate } from "@internationalized/date";
+import { computed, inject, shallowRef, useTemplateRef, watch } from "vue";
+import { formBuilderStateKey } from "../../reexports";
+const props = defineProps({
+  config: { type: Object, required: false },
+  input: { type: Object, required: true },
+  isRange: { type: Boolean, required: false, default: false },
+  styleConfig: { type: Object, required: true }
+});
+const inputDateRef = useTemplateRef("inputDateRef");
+const state = inject(formBuilderStateKey);
+const minDate = computed(() => {
+  if (props.config?.earliest_date) {
+    return parseDate(props.config?.earliest_date);
+  }
+  return void 0;
+});
+const maxDate = computed(() => {
+  if (props.config?.latest_date) {
+    return parseDate(props.config?.latest_date);
+  }
+  return void 0;
+});
+const modelValue = shallowRef(void 0);
+const convertedValue = computed(() => {
+  if (props.isRange) {
+    const rangeValue = modelValue.value;
+    const start = rangeValue?.start;
+    const end = rangeValue?.end;
+    if (!start || !end) {
+      return "";
+    }
+    return `${start.toString()} - ${end.toString()}`;
+  }
+  const singleValue = modelValue.value;
+  return singleValue?.toString() ?? "";
+});
+watch(convertedValue, (newVal) => {
+  state.value[props.input.name] = newVal;
+});
+watch(() => state.value[props.input.name], (newVal) => {
+  if (newVal === void 0 || newVal === "") {
+    modelValue.value = void 0;
+  }
+});
+</script>

package/dist/runtime/components/fields/FormFieldDate.vue.d.ts

@@ -0,0 +1,13 @@
+import { type DefaultInputField, type InputDateFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputDateFieldConfig;
+    input: DefaultInputField;
+    isRange?: boolean;
+    styleConfig: FormBuilderStyleConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    isRange: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/FormFieldDisplayText.d.vue.ts

@@ -0,0 +1,7 @@
+import type { DisplayTextFieldConfig } from '../../reexports.js';
+type __VLS_Props = {
+    config?: DisplayTextFieldConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/FormFieldDisplayText.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="col-span-12 flex flex-col gap-1">
+    <h3
+      v-if="resolvedTitle"
+      class="font-medium"
+    >
+      {{ resolvedTitle }}
+    </h3>
+    <div
+      v-if="resolvedText"
+      v-html="resolvedText"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useTranslatableInput } from "@teamnovu/nuxt-statamic-formbuilder/runtime/composables/useTranslatableInput";
+import { computed } from "vue";
+const props = defineProps({
+  config: { type: Object, required: false }
+});
+const translateInput = useTranslatableInput();
+const resolvedTitle = computed(() => translateInput(props.config?.title));
+const resolvedText = computed(() => translateInput(props.config?.text));
+</script>

package/dist/runtime/components/fields/FormFieldDisplayText.vue.d.ts

@@ -0,0 +1,7 @@
+import type { DisplayTextFieldConfig } from '../../reexports.js';
+type __VLS_Props = {
+    config?: DisplayTextFieldConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/FormFieldEmail.d.vue.ts

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputEmailFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputEmailFieldConfig;
+    input: DefaultInputField;
+    styleConfig: FormBuilderStyleConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/FormFieldEmail.vue

@@ -0,0 +1,32 @@
+<template>
+  <FormField
+    :config="config"
+    :style-config="styleConfig"
+    :input="input"
+  >
+    <UInput
+      type="email"
+      v-bind="{ ...input, ...styleConfig }"
+      v-model="state[input.name]"
+      :placeholder="config?.floating_label ? '' : translateInput(config?.placeholder)"
+      :ui="{
+  base: 'peer',
+  root: 'w-full'
+}"
+
+    />
+  </FormField>
+</template>
+
+<script setup>
+import { useTranslatableInput } from "@teamnovu/nuxt-statamic-formbuilder/runtime/composables/useTranslatableInput";
+import { inject } from "vue";
+import { formBuilderStateKey } from "../../reexports";
+const state = inject(formBuilderStateKey);
+const translateInput = useTranslatableInput();
+defineProps({
+  config: { type: Object, required: false },
+  input: { type: Object, required: true },
+  styleConfig: { type: Object, required: true }
+});
+</script>