nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/form/fields/switch-group/component.vue

@@ -1,14 +1,15 @@
 <script setup>
 import USwitch from "@nuxt/ui/components/Switch.vue";
 import { computed, useId } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { formOptionKey } from "../../utils/options";
+import { isBoolean, isNumber, isString } from "../../utils/predicate";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
-const { form, controlProps, disabled, handleBlur, options } = useFieldControl(
+const { fieldProps, form, controlProps, disabled, handleBlur, options } = useFieldControl(
   () => props.field,
   () => props.path
 );
@@ -30,7 +31,7 @@ function toggleOption(value, checked) {
   model.value = current.filter((item) => item !== value);
 }
 function isOptionValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || isNumber(value) || isBoolean(value);
 }
 </script>
 
@@ -39,7 +40,7 @@ function isOptionValue(value) {
     <div
       role="group"
       class="grid gap-3"
-      :class="field.orientation === 'horizontal' ? 'sm:flex sm:flex-wrap' : ''"
+      :class="fieldProps.orientation === 'horizontal' ? 'sm:flex sm:flex-wrap' : ''"
     >
       <USwitch
         v-for="item in items"
@@ -51,8 +52,8 @@ function isOptionValue(value) {
         :aria-label="item.label"
         :description="item.description"
         :disabled="disabled || item.disabled"
-        :checked-icon="field.checkedIcon"
-        :unchecked-icon="field.uncheckedIcon"
+        :checked-icon="fieldProps.checkedIcon"
+        :unchecked-icon="fieldProps.uncheckedIcon"
         @update:model-value="toggleOption(item.value, $event === true)"
         @blur="handleBlur"
       />

package/dist/runtime/form/fields/switch-group/config.d.ts

@@ -1,17 +1,17 @@
 export declare const switchGroupFieldKind: {
-    readonly type: "switch-group";
-    readonly state: "stateful";
-    readonly ui: {
-        readonly label: true;
-        readonly description: true;
-        readonly hint: true;
-    };
     readonly layout: {
         readonly item: true;
     };
     readonly options: {
         readonly enabled: true;
     };
-    readonly validation: true;
+    readonly state: "stateful";
     readonly transform: true;
+    readonly type: "switch-group";
+    readonly ui: {
+        readonly description: true;
+        readonly hint: true;
+        readonly label: true;
+    };
+    readonly validation: true;
 };

package/dist/runtime/form/fields/switch-group/config.js

@@ -1,10 +1,10 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const switchGroupFieldKind = defineFormFieldKind({
-  type: "switch-group",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
   options: { enabled: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "switch-group",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/switch-group/types.d.ts

@@ -1,10 +1,12 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { FieldOptionValue, NullableValue } from '../../types/field-output-utils.js';
 import type { FormOptionConfig, FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
-export interface FormSwitchGroupField<TContext = {}, TDeps = {}, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'switch-group', readonly TValue[] | null, TContext, TDeps> {
-    options: FormOptionConfig<TOption, TContext, TDeps, readonly TValue[] | null> | FormOptionsSource<TOption, TContext, TDeps, readonly TValue[] | null>;
+export interface FormSwitchGroupProps {
     orientation?: 'horizontal' | 'vertical';
     checkedIcon?: string;
     uncheckedIcon?: string;
 }
+export interface FormSwitchGroupField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'switch-group', readonly TValue[] | null, TContext, TDeps, FormSwitchGroupProps> {
+    options: FormOptionConfig<TOption, TContext, TDeps, readonly TValue[] | null> | FormOptionsSource<TOption, TContext, TDeps, readonly TValue[] | null>;
+}
 export type SwitchGroupFieldOutput<TField> = readonly FieldOptionValue<TField>[] | NullableValue;

package/dist/runtime/form/fields/tabs/component.d.vue.ts

@@ -0,0 +1,9 @@
+import type { FormTabsField } from './types.js';
+type __VLS_Props = {
+    field: FormTabsField;
+    path: readonly string[];
+    parentPath: readonly 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/form/fields/tabs/component.vue

@@ -0,0 +1,116 @@
+<script setup>
+import UTabs from "@nuxt/ui/components/Tabs.vue";
+import { computed, ref, watch } from "vue";
+import FormFieldRenderer from "../../components/renderer/form-field-renderer.vue";
+import { useResolvedFieldProps } from "../../composables/use-field-control";
+import { useFormContainerLayout } from "../../composables/use-form-layout";
+import { fieldPath, useFormRuntimeContext } from "../../composables/use-form-runtime";
+import { useFormUi } from "../../composables/use-form-ui";
+import { resolveFormText } from "../../utils/text";
+import { mergeFormUiClass } from "../../utils/ui";
+const props = defineProps({
+  field: { type: Object, required: true },
+  path: { type: Array, required: true },
+  parentPath: { type: Array, required: true }
+});
+const fieldProps = useResolvedFieldProps(
+  () => props.field,
+  () => props.path
+);
+const form = useFormRuntimeContext();
+const formUi = useFormUi();
+const ui = computed(() => formUi.ui.value.tabs?.ui);
+const containerLayout = useFormContainerLayout({
+  formLayout: form.currentLayout,
+  layout: () => props.field.layout
+});
+const visibleTabs = computed(
+  () => props.field.tabs.filter((tab) => {
+    if (!tab.condition) {
+      return true;
+    }
+    return tab.condition(form.getFieldCallbackParams(props.path, props.field));
+  })
+);
+const items = computed(
+  () => visibleTabs.value.map((tab) => ({
+    icon: tab.icon,
+    label: resolveFormText(tab.label) ?? tab.key,
+    value: tab.key
+  }))
+);
+const active = ref(props.field.defaultTab ?? props.field.tabs[0]?.key ?? "");
+const activeTab = computed(() => visibleTabs.value.find((tab) => tab.key === active.value));
+watch(visibleTabs, (tabs) => {
+  if (!tabs.some((tab) => tab.key === active.value)) {
+    active.value = tabs[0]?.key ?? "";
+  }
+});
+watch(
+  () => form.errors.value.map((error) => error.path),
+  (paths) => {
+    if (!paths.length || tabHasError(activeTab.value)) {
+      return;
+    }
+    const invalid = visibleTabs.value.find((tab) => tabHasErrorPaths(tab, paths));
+    if (invalid) {
+      active.value = invalid.key;
+    }
+  }
+);
+function tabHasErrorPaths(tab, paths) {
+  return tab.fields.some((child) => {
+    const childPath = fieldPath(props.parentPath, child).join(".");
+    return paths.some((path) => path === childPath || path.startsWith(`${childPath}.`));
+  });
+}
+function tabHasError(tab) {
+  return tab ? tabHasErrorPaths(
+    tab,
+    form.errors.value.map((error) => error.path)
+  ) : false;
+}
+function tabDescription(tab) {
+  return resolveFormText(tab?.description);
+}
+</script>
+
+<template>
+  <div :class="mergeFormUiClass('grid gap-4', ui?.root)" data-form-tabs="">
+    <UTabs
+      v-model="active"
+      :items="items"
+      :variant="fieldProps.variant ?? 'link'"
+      color="primary"
+      :content="false"
+      :ui="{ list: ui?.list, trigger: ui?.trigger }"
+    >
+      <template #default="{ item }">
+        <span
+          :class="
+  tabHasError(visibleTabs.find((tab2) => tab2.key === item.value)) ? 'text-error' : ''
+"
+        >
+          {{ item.label }}
+        </span>
+      </template>
+    </UTabs>
+    <template v-for="tab in visibleTabs" :key="tab.key">
+      <div
+        v-if="tab.key === active"
+        :class="mergeFormUiClass('grid gap-4', ui?.content)"
+        :data-form-tab="tab.key"
+      >
+        <p v-if="tabDescription(tab)" class="text-sm text-muted">{{ tabDescription(tab) }}</p>
+        <div :class="mergeFormUiClass('grid', ui?.fields)" :style="containerLayout.style.value">
+          <FormFieldRenderer
+            v-for="child in tab.fields"
+            :key="child.key"
+            :field="child"
+            :parent-path="parentPath"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

package/dist/runtime/form/fields/tabs/component.vue.d.ts

@@ -0,0 +1,9 @@
+import type { FormTabsField } from './types.js';
+type __VLS_Props = {
+    field: FormTabsField;
+    path: readonly string[];
+    parentPath: readonly 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/form/fields/tabs/config.d.ts

@@ -0,0 +1,8 @@
+export declare const tabsFieldKind: {
+    readonly layout: {
+        readonly container: true;
+        readonly item: true;
+    };
+    readonly state: "passthrough";
+    readonly type: "tabs";
+};

package/dist/runtime/form/fields/tabs/config.js

@@ -0,0 +1,6 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const tabsFieldKind = defineFormFieldKind({
+  layout: { container: true, item: true },
+  state: "passthrough",
+  type: "tabs"
+});

package/dist/runtime/form/fields/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { tabsFieldKind } from './config.js';
+export type * from './types';

package/dist/runtime/form/fields/tabs/index.js

@@ -0,0 +1 @@
+export { tabsFieldKind } from "./config.js";

package/dist/runtime/form/fields/tabs/types.d.ts

@@ -0,0 +1,21 @@
+import type { FormFieldCallback } from '../../types/callbacks.js';
+import type { FormField } from '../../types/field.js';
+import type { FormStatelessFieldBase } from '../../types/field-base.js';
+import type { FormContainerLayout } from '../../types/layout.js';
+import type { FormText } from '../../types/utils.js';
+export interface FormTab<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> {
+    key: string;
+    label: FormText;
+    icon?: string;
+    description?: FormText;
+    fields: readonly FormField<TContext, TDeps>[];
+    condition?: FormFieldCallback<boolean, TContext, TDeps>;
+}
+export interface FormTabsProps {
+    variant?: 'pill' | 'link';
+}
+export interface FormTabsField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends Omit<FormStatelessFieldBase<'tabs', TContext, TDeps, FormTabsProps>, 'layout'> {
+    tabs: readonly FormTab<TContext, TDeps>[];
+    defaultTab?: string;
+    layout?: FormContainerLayout;
+}

package/dist/runtime/form/fields/tag/component.vue

@@ -1,8 +1,9 @@
 <script setup>
 import UInputTags from "@nuxt/ui/components/InputTags.vue";
 import { computed } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { isString } from "../../utils/predicate";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -14,7 +15,7 @@ const { form, controlProps, disabled, handleBlur, placeholder } = useFieldContro
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    return Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
+    return Array.isArray(value) ? value.filter((item) => isString(item)) : [];
   },
   set: (value) => form.setValue(props.path, value)
 });

package/dist/runtime/form/fields/tag/config.d.ts

@@ -1,14 +1,14 @@
 export declare const tagFieldKind: {
-    readonly type: "tag";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "tag";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
         readonly hint: true;
-    };
-    readonly layout: {
-        readonly item: true;
+        readonly label: true;
     };
     readonly validation: true;
-    readonly transform: true;
 };

package/dist/runtime/form/fields/tag/config.js

@@ -1,9 +1,9 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const tagFieldKind = defineFormFieldKind({
-  type: "tag",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "tag",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/tag/types.d.ts

@@ -1,4 +1,4 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
-export interface FormTagField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'tag', readonly string[], TContext, TDeps> {
+export interface FormTagField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatefulFieldBase<'tag', readonly string[], TContext, TDeps> {
 }
 export type TagFieldOutput = readonly string[];

package/dist/runtime/form/fields/text/component.vue

@@ -1,46 +1,135 @@
 <script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
+import { vMaska } from "maska/vue";
 import { computed } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { applyTextMask, maskDirectiveOptions, stripTextMask } from "../../utils/mask";
+import { isString } from "../../utils/predicate";
+import { resolveFormText } from "../../utils/text";
+import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
-  field: { type: Object, required: true },
+  field: { type: null, required: true },
   path: { type: Array, required: true },
   bare: { type: Boolean, required: false }
 });
-const { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
+const { t } = useUiToolsLocale();
+const { fieldProps, form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  { omit: ["inputType", "prefix", "suffix", "mono", "clearable", "mask", "maskOutput"] }
 );
 const model = computed({
-  get: () => {
-    const value = form.getValue(props.path);
-    return typeof value === "string" ? value : void 0;
-  },
-  set: (value) => form.setValue(props.path, value ?? null)
+  get: () => displayValue(form.getValue(props.path)),
+  set: (value) => form.setValue(props.path, normalize(value))
 });
+const maskOptions = computed(() => maskDirectiveOptions(fieldProps.value.mask));
+const prefix = computed(() => resolveFormText(fieldProps.value.prefix));
+const suffix = computed(() => resolveFormText(fieldProps.value.suffix));
+const showClear = computed(
+  () => fieldProps.value.clearable === true && !disabled.value && Boolean(model.value)
+);
+const hasLeading = computed(() => Boolean(prefix.value) || Boolean(fieldProps.value.icon));
+const hasTrailing = computed(
+  () => Boolean(suffix.value) || Boolean(fieldProps.value.trailingIcon) || showClear.value
+);
+const controlClass = computed(
+  () => mergeFormUiClass(
+    mergeFormUiClass("w-full", fieldProps.value.mono ? "font-mono tabular-nums" : void 0),
+    controlProps.value.class
+  )
+);
+function displayValue(value) {
+  if (!isString(value)) {
+    return;
+  }
+  return fieldProps.value.mask ? applyTextMask(value, fieldProps.value.mask) : value;
+}
+function normalize(value) {
+  if (value === void 0 || value === "") {
+    return null;
+  }
+  if (!fieldProps.value.mask) {
+    return value;
+  }
+  const masked = applyTextMask(value, fieldProps.value.mask);
+  return fieldProps.value.maskOutput === "raw" ? stripTextMask(masked, fieldProps.value.mask) : masked;
+}
+function clear() {
+  form.setValue(props.path, null);
+}
 </script>
 
 <template>
   <UInput
     v-if="bare"
     v-model="model"
+    v-maska="maskOptions"
     v-bind="controlProps"
-    class="w-full"
-    :type="field.inputType ?? 'text'"
+    :class="controlClass"
+    :type="fieldProps.inputType ?? 'text'"
     :placeholder="placeholder"
     :disabled="disabled"
+    :maxlength="fieldProps.maxlength"
+    :icon="fieldProps.icon"
+    :trailing-icon="fieldProps.trailingIcon"
+    :leading="hasLeading"
+    :trailing="hasTrailing"
     @blur="handleBlur"
-  />
+  >
+    <template v-if="prefix" #leading>
+      <span class="text-sm text-muted" data-form-prefix="">{{ prefix }}</span>
+    </template>
+    <template v-if="hasTrailing" #trailing>
+      <span v-if="suffix" class="text-sm text-muted" data-form-suffix="">{{ suffix }}</span>
+      <UButton
+        v-if="showClear"
+        icon="i-lucide-x"
+        color="neutral"
+        variant="link"
+        size="xs"
+        class="p-0"
+        :aria-label="t('form.fields.text.clear')"
+        data-form-clear=""
+        @click="clear"
+      />
+    </template>
+  </UInput>
   <FormFieldShell v-else :field="field" :path="path">
     <UInput
       v-model="model"
+      v-maska="maskOptions"
       v-bind="controlProps"
-      class="w-full"
-      :type="field.inputType ?? 'text'"
+      :class="controlClass"
+      :type="fieldProps.inputType ?? 'text'"
       :placeholder="placeholder"
       :disabled="disabled"
+      :maxlength="fieldProps.maxlength"
+      :icon="fieldProps.icon"
+      :trailing-icon="fieldProps.trailingIcon"
+      :leading="hasLeading"
+      :trailing="hasTrailing"
       @blur="handleBlur"
-    />
+    >
+      <template v-if="prefix" #leading>
+        <span class="text-sm text-muted" data-form-prefix="">{{ prefix }}</span>
+      </template>
+      <template v-if="hasTrailing" #trailing>
+        <span v-if="suffix" class="text-sm text-muted" data-form-suffix="">{{ suffix }}</span>
+        <UButton
+          v-if="showClear"
+          icon="i-lucide-x"
+          color="neutral"
+          variant="link"
+          size="xs"
+          class="p-0"
+          :aria-label="t('form.fields.text.clear')"
+          data-form-clear=""
+          @click="clear"
+        />
+      </template>
+    </UInput>
   </FormFieldShell>
 </template>

package/dist/runtime/form/fields/text/config.d.ts

@@ -1,14 +1,14 @@
 export declare const textFieldKind: {
-    readonly type: "text";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "text";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
         readonly hint: true;
-    };
-    readonly layout: {
-        readonly item: true;
+        readonly label: true;
     };
     readonly validation: true;
-    readonly transform: true;
 };

package/dist/runtime/form/fields/text/config.js

@@ -1,9 +1,9 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const textFieldKind = defineFormFieldKind({
-  type: "text",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "text",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/text/types.d.ts

@@ -1,6 +1,18 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { NullableValue } from '../../types/field-output-utils.js';
-export interface FormTextField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'text', string | null, TContext, TDeps> {
+import type { FormText } from '../../types/utils.js';
+import type { FormTextMask } from '../../utils/mask.js';
+export interface FormTextProps {
     inputType?: 'text' | 'email' | 'url' | 'tel' | 'search';
+    prefix?: FormText;
+    suffix?: FormText;
+    icon?: string;
+    trailingIcon?: string;
+    mono?: boolean;
+    clearable?: boolean;
+    maxlength?: number;
+    mask?: FormTextMask;
+    maskOutput?: 'masked' | 'raw';
 }
+export type FormTextField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'text', string | null, TContext, TDeps, FormTextProps>;
 export type TextFieldOutput = string | NullableValue;

package/dist/runtime/form/fields/textarea/component.vue

@@ -1,20 +1,21 @@
 <script setup>
 import UTextarea from "@nuxt/ui/components/Textarea.vue";
 import { computed } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { isString } from "../../utils/predicate";
 const props = defineProps({
-  field: { type: Object, required: true },
+  field: { type: null, required: true },
   path: { type: Array, required: true }
 });
-const { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
+const { fieldProps, form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
   () => props.field,
   () => props.path
 );
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    return typeof value === "string" ? value : void 0;
+    return isString(value) ? value : void 0;
   },
   set: (value) => form.setValue(props.path, value ?? null)
 });
@@ -28,6 +29,10 @@ const model = computed({
       class="w-full"
       :placeholder="placeholder"
       :disabled="disabled"
+      :autoresize="fieldProps.autoresize"
+      :rows="fieldProps.rows"
+      :maxrows="fieldProps.maxrows"
+      :maxlength="fieldProps.maxlength"
       @blur="handleBlur"
     />
   </FormFieldShell>

package/dist/runtime/form/fields/textarea/config.d.ts

@@ -1,14 +1,14 @@
 export declare const textareaFieldKind: {
-    readonly type: "textarea";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "textarea";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
         readonly hint: true;
-    };
-    readonly layout: {
-        readonly item: true;
+        readonly label: true;
     };
     readonly validation: true;
-    readonly transform: true;
 };

package/dist/runtime/form/fields/textarea/config.js

@@ -1,9 +1,9 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const textareaFieldKind = defineFormFieldKind({
-  type: "textarea",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "textarea",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/textarea/types.d.ts

@@ -1,5 +1,10 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { NullableValue } from '../../types/field-output-utils.js';
-export interface FormTextareaField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'textarea', string | null, TContext, TDeps> {
+export interface FormTextareaProps {
+    autoresize?: boolean;
+    rows?: number;
+    maxrows?: number;
+    maxlength?: number;
 }
+export type FormTextareaField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'textarea', string | null, TContext, TDeps, FormTextareaProps>;
 export type TextareaFieldOutput = string | NullableValue;