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

package/dist/runtime/components/fields/FormFieldEmail.vue.d.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/FormFieldFileUpload.d.vue.ts

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputFileUploadFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputFileUploadFieldConfig;
+    styleConfig: FormBuilderStyleConfig;
+    input: DefaultInputField;
+};
+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/FormFieldFileUpload.vue

@@ -0,0 +1,34 @@
+<template>
+  <FormField
+    no-help
+    :config="config"
+    :style-config="styleConfig"
+    :input="input"
+  >
+    <UFileUpload
+      v-bind="{ ...input, ...{ ...styleConfig, variant: 'area' } }"
+      v-model="state[input?.name]"
+      icon="i-lucide-image"
+      :multiple="config?.max_files ? config.max_files > 1 : false"
+      :description="fileDescription"
+      :accept="accept"
+    />
+  </FormField>
+</template>
+
+<script setup>
+import { useTranslatableInput } from "@teamnovu/nuxt-statamic-formbuilder/runtime/composables/useTranslatableInput";
+import { computed, inject } from "vue";
+import { formBuilderStateKey } from "../../reexports";
+const props = defineProps({
+  config: { type: Object, required: false },
+  styleConfig: { type: Object, required: true },
+  input: { type: Object, required: true }
+});
+const state = inject(formBuilderStateKey);
+const translateInput = useTranslatableInput();
+const fileDescription = computed(() => translateInput(props.config?.icon_label) ?? void 0);
+const accept = computed(() => {
+  return Object.values(props.config?.allowed_mimes ?? {}).join(",");
+});
+</script>

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

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputFileUploadFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputFileUploadFieldConfig;
+    styleConfig: FormBuilderStyleConfig;
+    input: DefaultInputField;
+};
+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/FormFieldNumber.d.vue.ts

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputNumberFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputNumberFieldConfig;
+    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/FormFieldNumber.vue

@@ -0,0 +1,31 @@
+<template>
+  <FormField
+    :config="config"
+    :style-config="styleConfig"
+    :input="input"
+  >
+    <UInputNumber
+      v-bind="{ ...input, ...styleConfig }"
+      :model-value="state[props.input?.name] ?? config?.default ?? 0"
+      @update:model-value="state[props.input?.name] = $event"
+      :min="config?.min ?? 0"
+      :max="config?.max ?? 100"
+      :step="config?.step ?? 1"
+      :ui="{
+  root: 'w-full',
+  base: 'peer'
+}"
+    />
+  </FormField>
+</template>
+
+<script setup>
+import { 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 }
+});
+</script>

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

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputNumberFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputNumberFieldConfig;
+    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/FormFieldPhone.d.vue.ts

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputPhoneFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputPhoneFieldConfig;
+    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/FormFieldPhone.vue

@@ -0,0 +1,130 @@
+<template>
+  <FormField
+    :config="config"
+    :style-config="styleConfig"
+    :input="input"
+  >
+    <UFieldGroup class="w-full">
+      <USelectMenu
+        v-if="config?.show_country_code_selector"
+        v-bind="{ ...styleConfig }"
+        v-model="countryCodeValue"
+        :placeholder="translateInput(config?.placeholder) ?? void 0"
+        :items="countrySelectItems ?? []"
+        value-key="value"
+        :icon="icon"
+        :search-input="config?.show_search ? {
+  placeholder: 'Filter...',
+  icon: 'i-lucide-search'
+} : false"
+        arrow
+        class="w-30"
+        :ui="{
+  base: 'justify-center'
+}"
+      />
+
+      <UInput
+        type="text"
+        v-bind="{ ...input, ...styleConfig }"
+        v-model="value"
+        :placeholder="config?.floating_label ? '' : translateInput(config?.placeholder)"
+        v-maska="mask"
+        :ui="{
+  base: 'peer',
+  root: 'w-full'
+}"
+
+      />
+    </UFieldGroup>
+  </FormField>
+</template>
+
+<script setup>
+import { useTranslatableInput } from "@teamnovu/nuxt-statamic-formbuilder/runtime/composables/useTranslatableInput";
+import { vMaska } from "maska/vue";
+import { computed, inject, ref, watch } from "vue";
+import { formBuilderStateKey } from "../../reexports";
+const props = defineProps({
+  config: { type: Object, required: false },
+  input: { type: Object, required: true },
+  styleConfig: { type: Object, required: true }
+});
+const translateInput = useTranslatableInput();
+const countrySelectItems = ref(Object.entries(props.config?.country_codes ?? {}).map(([key, value2]) => ({
+  label: `${key.toUpperCase()}`,
+  value: value2,
+  icon: "circle-flags:" + key.toLowerCase()
+})) ?? []);
+const countryCodeValue = ref(props.config?.default_country_code ?? countrySelectItems.value[0]?.value);
+const value = computed({
+  get: () => state.value[props.input?.name] ?? `${countryCodeValue.value} `,
+  set: (v) => {
+    state.value[props.input?.name] = v;
+  }
+});
+const icon = computed(() => countrySelectItems.value.find((item) => item.value === countryCodeValue.value)?.icon);
+watch(countryCodeValue, (newVal, oldVal) => {
+  if (value.value.startsWith(`${oldVal ?? ""} `)) {
+    value.value = value.value.replace(`${oldVal ?? ""} `, `${newVal ?? ""} `);
+  }
+  if (value.value.length === 0) {
+    value.value = `${newVal ?? ""} `;
+  }
+});
+const maskMap = {
+  "+41": "+41 ## ### ## ##",
+  // CH
+  "+49": "+49 ### #######",
+  // DE
+  "+33": "+33 # ## ## ## ##",
+  // FR
+  "+39": "+39 ### #######",
+  // IT
+  "+1": "+1 ### ### ####",
+  // US
+  "+44": "+44 #### ######",
+  // GB
+  "+34": "+34 ### ### ###",
+  // ES
+  "+31": "+31 ## ### ####",
+  // NL
+  "+32": "+32 ### ## ## ##",
+  // BE
+  "+46": "+46 ## ### ## ##",
+  // SE
+  "+47": "+47 ## ## ## ##",
+  // NO
+  "+45": "+45 ## ## ## ##",
+  // DK
+  "+358": "+358 ## ### ####",
+  // FI
+  "+372": "+372 #### ####",
+  // EE
+  "+371": "+371 ## ### ###",
+  // LV
+  "+370": "+370 ### ## ###",
+  // LT
+  "+48": "+48 ### ### ###",
+  // PL
+  "+420": "+420 ### ### ###",
+  // CZ
+  "+421": "+421 ### ### ###",
+  // SK
+  "+36": "+36 ## ### ####",
+  // HU
+  "+40": "+40 ### ### ###",
+  // RO
+  "+359": "+359 ## ### ####"
+  // BG
+};
+const mask = computed(() => {
+  return (countryCodeValue.value ? maskMap[countryCodeValue.value] : void 0) ?? `${countryCodeValue.value} #############`;
+});
+const state = inject(formBuilderStateKey);
+watch(() => state.value[props.input?.name], (newVal) => {
+  if (!newVal) {
+    countryCodeValue.value = props.config?.default_country_code ?? countrySelectItems.value[0]?.value;
+  }
+});
+</script>

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

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputPhoneFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputPhoneFieldConfig;
+    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/FormFieldRadioButtons.d.vue.ts

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputRadioButtonsFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputRadioButtonsFieldConfig;
+    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/FormFieldRadioButtons.vue

@@ -0,0 +1,54 @@
+<template>
+  <FormField
+    :config="config"
+    :input="input"
+    :style-config="styleConfig"
+  >
+    <URadioGroup
+      v-bind="input"
+      :model-value="state[props.input?.name]?.[0] ?? void 0"
+      @update:model-value="state[props.input?.name] = toArray($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>
+    </URadioGroup>
+  </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
+  })) ?? [];
+});
+const toArray = (value) => {
+  if (!value || value.length === 0) {
+    return [];
+  }
+  if (typeof value === "string") {
+    return [value];
+  }
+};
+</script>

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

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputRadioButtonsFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputRadioButtonsFieldConfig;
+    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/FormFieldSelect.d.vue.ts

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputSelectFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputSelectFieldConfig;
+    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/FormFieldSelect.vue

@@ -0,0 +1,65 @@
+<template>
+  <FormField
+    :config="config"
+    :style-config="styleConfig"
+    :input="input"
+  >
+
+    <div :data-placeholder="isEmpty ? '' : void 0" class="w-full">
+      <USelectMenu
+        v-bind="{ ...input, ...styleConfig }"
+        :model-value="state[props.input?.name] ?? (config?.multiple ? [] : '')"
+        value-key="value"
+        :multiple="!!config?.multiple"
+        :search-input="config?.show_search == true ? {
+  placeholder: 'Filter...',
+  icon: 'i-lucide-search'
+} : false"
+        arrow
+        :items="selectOptions ?? []"
+        @update:model-value="state[props.input?.name] = config?.multiple ? toArray($event) : toSingle($event)"
+        :placeholder="config?.floating_label ? '\xA0' : translateInput(config?.placeholder)"
+        class="w-full"
+      />
+    </div>
+  </FormField>
+</template>
+
+<script setup>
+import { useTranslatableInput } from "@teamnovu/nuxt-statamic-formbuilder/runtime/composables/useTranslatableInput";
+import { computed, inject } from "vue";
+import { formBuilderStateKey } from "../../reexports";
+const state = inject(formBuilderStateKey);
+const translateInput = useTranslatableInput();
+const props = defineProps({
+  config: { type: Object, required: false },
+  input: { type: Object, required: true },
+  styleConfig: { type: Object, required: true }
+});
+const selectOptions = computed(() => {
+  return props.config?.options?.map((option) => ({
+    label: translateInput(option.text) ?? option.key,
+    value: option.key
+  })) ?? [];
+});
+const isEmpty = computed(() => {
+  const value = state.value[props.input?.name];
+  if (Array.isArray(value)) return value.length === 0;
+  return !value;
+});
+const toArray = (inputValue) => {
+  if (Array.isArray(inputValue)) {
+    return inputValue;
+  }
+  if (typeof inputValue === "string" && inputValue.length > 0) {
+    return [inputValue];
+  }
+  return [];
+};
+const toSingle = (inputValue) => {
+  if (Array.isArray(inputValue)) {
+    return inputValue[0] ?? "";
+  }
+  return inputValue ?? "";
+};
+</script>

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

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputSelectFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputSelectFieldConfig;
+    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/FormFieldSlider.d.vue.ts

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputSliderFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputSliderFieldConfig;
+    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/FormFieldSlider.vue

@@ -0,0 +1,31 @@
+<template>
+  <FormField
+    :config="config"
+    :style-config="styleConfig"
+    :input="input"
+  >
+    <USlider
+      v-bind="{ ...input, ...styleConfig }"
+      :model-value="state[props.input?.name] ?? config?.default ?? 0"
+      class="py-1"
+      :min="config?.min ?? 0"
+      :max="config?.max ?? 100"
+      :step="config?.step ?? 1"
+      @update:model-value="state[props.input?.name] = $event"
+    />
+    <div class="absolute right-0 bottom-0">
+      {{ state[props.input?.name] }}
+    </div>
+  </FormField>
+</template>
+
+<script setup>
+import { inject } from "vue";
+import { formBuilderStateKey } from "../../reexports";
+const props = defineProps({
+  config: { type: Object, required: false },
+  input: { type: Object, required: true },
+  styleConfig: { type: Object, required: true }
+});
+const state = inject(formBuilderStateKey);
+</script>

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

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputSliderFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputSliderFieldConfig;
+    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/FormFieldSwitch.d.vue.ts

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputSwitchFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputSwitchFieldConfig;
+    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/FormFieldSwitch.vue

@@ -0,0 +1,33 @@
+<template>
+  <FormField
+    no-label
+    :config="config"
+    :style-config="styleConfig"
+    :input="input"
+  >
+    <USwitch
+      v-bind="{ ...input, ...styleConfig }"
+      :model-value="state[props.input?.name] ?? config?.default ?? false"
+      unchecked-icon="i-lucide-x"
+      checked-icon="i-lucide-check"
+      :label="switchLabel"
+      @update:model-value="state[props.input?.name] = $event"
+    />
+  </FormField>
+</template>
+
+<script setup>
+import { useTranslatableInput } from "@teamnovu/nuxt-statamic-formbuilder/runtime/composables/useTranslatableInput";
+import { computed, inject } from "vue";
+import { formBuilderStateKey } from "../../reexports";
+const props = defineProps({
+  config: { type: Object, required: false },
+  input: { type: Object, required: true },
+  styleConfig: { type: Object, required: true }
+});
+const state = inject(formBuilderStateKey);
+const translateInput = useTranslatableInput();
+const switchLabel = computed(() => {
+  return state.value[props.input?.name] ? translateInput(props.config?.label_activated) : translateInput(props.config?.label_deactivated) ?? "";
+});
+</script>

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

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputSwitchFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputSwitchFieldConfig;
+    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/FormFieldText.d.vue.ts

@@ -0,0 +1,11 @@
+import { type DefaultInputField, type InputTextFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputTextFieldConfig;
+    styleConfig: FormBuilderStyleConfig;
+    input: DefaultInputField;
+    error?: string;
+};
+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/FormFieldText.vue

@@ -0,0 +1,42 @@
+<template>
+  <FormField
+    :config="config"
+    :style-config="styleConfig"
+    :input="input"
+  >
+    <UInput
+      v-bind="{ ...input, ...styleConfig }"
+      v-model="state[input.name]"
+      type="text"
+      :placeholder="config?.floating_label ? '' : translateInput(config?.placeholder)"
+      :maxlength="config?.character_limit"
+      :ui="{
+  root: 'w-full',
+  base: 'peer'
+}"
+    />
+
+    <!-- Character count for textarea if character_limit is set -->
+    <div
+      v-if="config?.character_limit"
+      class="absolute right-0 bottom-1 text-dimmed"
+      :class="{ 'text-(--ui-text-error)/70!': state[input?.name]?.length >= (config?.character_limit ?? 0) }"
+    >
+      {{ state[input?.name]?.length ?? 0 }} / {{ config?.character_limit }}
+    </div>
+  </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 },
+  styleConfig: { type: Object, required: true },
+  input: { type: Object, required: true },
+  error: { type: String, required: false }
+});
+</script>

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

@@ -0,0 +1,11 @@
+import { type DefaultInputField, type InputTextFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputTextFieldConfig;
+    styleConfig: FormBuilderStyleConfig;
+    input: DefaultInputField;
+    error?: string;
+};
+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/FormFieldTextarea.d.vue.ts

@@ -0,0 +1,10 @@
+import { type DefaultInputField, type InputTextareaFieldConfig } from '../../reexports.js';
+import type { FormBuilderStyleConfig } from '../../types.js';
+type __VLS_Props = {
+    config?: InputTextareaFieldConfig;
+    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;