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

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

@@ -0,0 +1,41 @@
+<template>
+  <FormField
+    :config="config"
+    :style-config="styleConfig"
+    :input="input"
+  >
+    <UTextarea
+      v-bind="{ ...input, ...styleConfig }"
+      v-model="state[input?.name]"
+      type="text"
+      :placeholder="config?.floating_label ? '' : translateInput(config?.placeholder)"
+      :maxlength="config?.character_limit"
+      :ui="{
+  base: 'peer field-sizing-content min-h-[4.5rem]',
+  root: 'w-full'
+}"
+    />
+
+    <!-- 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 },
+  input: { type: Object, required: true },
+  styleConfig: { type: Object, required: true }
+});
+</script>

package/dist/runtime/components/fields/FormFieldTextarea.vue.d.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;

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,31 @@
+import { defineNuxtPlugin } from "#imports";
+import { registerFormField } from "#imports";
+import FormFieldText from "./components/fields/FormFieldText.vue";
+import FormFieldTextarea from "./components/fields/FormFieldTextarea.vue";
+import FormFieldEmail from "./components/fields/FormFieldEmail.vue";
+import FormFieldPhone from "./components/fields/FormFieldPhone.vue";
+import FormFieldNumber from "./components/fields/FormFieldNumber.vue";
+import FormFieldSelect from "./components/fields/FormFieldSelect.vue";
+import FormFieldDate from "./components/fields/FormFieldDate.vue";
+import FormFieldSlider from "./components/fields/FormFieldSlider.vue";
+import FormFieldCheckboxes from "./components/fields/FormFieldCheckboxes.vue";
+import FormFieldRadioButtons from "./components/fields/FormFieldRadioButtons.vue";
+import FormFieldSwitch from "./components/fields/FormFieldSwitch.vue";
+import FormFieldFileUpload from "./components/fields/FormFieldFileUpload.vue";
+import FormFieldDisplayText from "./components/fields/FormFieldDisplayText.vue";
+export default defineNuxtPlugin(() => {
+  registerFormField("input_text", FormFieldText);
+  registerFormField("input_textarea", FormFieldTextarea);
+  registerFormField("input_email", FormFieldEmail);
+  registerFormField("input_phone", FormFieldPhone);
+  registerFormField("input_number", FormFieldNumber);
+  registerFormField("input_select", FormFieldSelect);
+  registerFormField("input_date", FormFieldDate);
+  registerFormField("input_daterange", FormFieldDate);
+  registerFormField("input_slider", FormFieldSlider);
+  registerFormField("input_checkboxes", FormFieldCheckboxes);
+  registerFormField("input_radio_buttons", FormFieldRadioButtons);
+  registerFormField("input_switch", FormFieldSwitch);
+  registerFormField("input_file_upload", FormFieldFileUpload);
+  registerFormField("display_text", FormFieldDisplayText);
+});

package/dist/runtime/reexports.d.ts

@@ -0,0 +1,3 @@
+export type { ValidationTrigger, TranslatableInput, BaseFieldConfig, FormFieldOption, InputTextFieldConfig, InputTextareaFieldConfig, InputEmailFieldConfig, InputPhoneFieldConfig, InputNumberFieldConfig, InputSelectFieldConfig, InputDateFieldConfig, InputSliderFieldConfig, InputCheckboxesFieldConfig, InputRadioButtonsFieldConfig, InputSwitchFieldConfig, InputFileUploadFieldConfig, DisplayTextFieldConfig, FormBuilderFieldBase, FormBuilderField, FormBuilderFieldType, InputFormBuilderField, InputRules, DefaultInputField, defaultInputField, FormBuilderConfiguration, FormBuilderTexts, FormBuilderRequestState, FormBuilderSubmitter, UseFormBuilderOptions, } from '@teamnovu/nuxt-statamic-formbuilder/runtime/types';
+export { isDisplayOrSpacerField, isInputField, isFileUploadField, isMultiValueField, formBuilderStateKey, } from '@teamnovu/nuxt-statamic-formbuilder/runtime/types';
+export type { FormBuilderStyleConfig } from './types.js';

package/dist/runtime/reexports.js

@@ -0,0 +1,7 @@
+export {
+  isDisplayOrSpacerField,
+  isInputField,
+  isFileUploadField,
+  isMultiValueField,
+  formBuilderStateKey
+} from "@teamnovu/nuxt-statamic-formbuilder/runtime/types";

package/dist/runtime/styles/form-builder.css

@@ -0,0 +1 @@
+@import "@teamnovu/nuxt-statamic-formbuilder/style.css";@source "../components/**/*.{vue,js,ts}";

package/dist/runtime/types.d.ts

@@ -0,0 +1,9 @@
+export type FormBuilderStyleConfig = {
+    /** Nuxt UI color token (e.g. `neutral`, `primary`) */
+    color?: string;
+    /** Nuxt UI variant (e.g. `outline`, `soft`) */
+    variant?: string;
+    /** Nuxt UI size (e.g. `md`, `lg`) */
+    size?: string;
+    highlight?: boolean;
+};

package/dist/types.d.mts

@@ -0,0 +1,5 @@
+export { type FormBuilderStyleConfig } from '../dist/runtime/types.js'
+
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@teamnovu/nuxt-statamic-formbuilder-nuxt-ui",
+  "version": "0.1.0",
+  "description": "Nuxt UI field renderer for @teamnovu/nuxt-statamic-formbuilder",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    },
+    "./style.css": "./dist/runtime/styles/form-builder.css"
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.12.2",
+    "@nuxt/kit": "^4.3.1",
+    "maska": "^3.2.0"
+  },
+  "peerDependencies": {
+    "@nuxt/ui": ">=4",
+    "@teamnovu/nuxt-statamic-formbuilder": ">=0.1.0",
+    "nuxt": ">=3.16",
+    "vue-i18n": ">=9"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.3.1",
+    "@nuxt/ui": "^4.2.1",
+    "@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",
+    "@teamnovu/nuxt-statamic-formbuilder": "0.1.0"
+  },
+  "scripts": {
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare",
+    "lint": "eslint ."
+  }
+}