nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/form/components/layout/{ModalLayout.vue → modal-layout.vue}

@@ -1,6 +1,7 @@
 <script setup>
 import UModal from "@nuxt/ui/components/Modal.vue";
 import { computed } from "vue";
+import { isNumber } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
   config: { type: Object, required: false },
@@ -11,16 +12,17 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 defineEmits(["update:open", "after-close"]);
+const MODAL_SIZES = { lg: 760, md: 600, xl: 920 };
 const contentStyle = computed(() => ({
-  maxWidth: cssSize(props.config?.maxWidth),
-  maxHeight: cssSize(props.config?.maxHeight)
+  maxHeight: cssSize(props.config?.maxHeight) ?? "calc(100dvh - 48px)",
+  maxWidth: cssSize(props.config?.maxWidth) ?? `${MODAL_SIZES[props.config?.size ?? "md"]}px`
 }));
 const contentProps = computed(() => ({
   disableOutsidePointerEvents: void 0,
   style: contentStyle.value
 }));
 function cssSize(value) {
-  return typeof value === "number" ? `${value}px` : value;
+  return isNumber(value) ? `${value}px` : value;
 }
 </script>
 
@@ -32,9 +34,9 @@ function cssSize(value) {
     :dismissible="dismissible && config?.allowOutsideClick !== false"
     :content="contentProps"
     :ui="{
-  overlay: ui?.overlay,
+  overlay: mergeFormUiClass('bg-(--nut-form-veil) backdrop-blur-[2px]', ui?.overlay),
   content: mergeFormUiClass(
-    'flex max-h-[85dvh] min-h-0 overflow-hidden border border-default p-0 sm:max-w-4xl',
+    'flex min-h-0 w-[calc(100%-40px)] overflow-hidden rounded-[14px] border border-default p-0 shadow-[0_30px_80px_-30px_rgba(31,29,26,0.45),0_2px_6px_rgba(31,29,26,0.06)] sm:max-w-none',
     ui?.content
   )
 }"

package/dist/runtime/form/components/provider/{FormOverlayHost.vue → form-overlay-host.vue}

@@ -10,10 +10,10 @@ import {
 } from "../../utils/overlay";
 import { isRecord } from "../../utils/path";
 import { mergeFormUi, resolveAppFormUi } from "../../utils/ui";
-import DrawerLayout from "../layout/DrawerLayout.vue";
-import FullscreenLayout from "../layout/FullscreenLayout.vue";
-import ModalLayout from "../layout/ModalLayout.vue";
-import FormRoot from "../root/Form.vue";
+import DrawerLayout from "../layout/drawer-layout.vue";
+import FullscreenLayout from "../layout/fullscreen-layout.vue";
+import ModalLayout from "../layout/modal-layout.vue";
+import FormRoot from "../root/form.vue";
 const props = defineProps({
   instance: { type: Object, required: true }
 });
@@ -27,7 +27,9 @@ const drawerConfig = getFormDrawerConfig(props.instance.schema);
 const fullscreenConfig = getFormFullscreenConfig(props.instance.schema);
 const modalConfig = getFormModalConfig(props.instance.schema);
 function resolveSchemaUi(schema) {
-  if (!isRecord(schema)) return void 0;
+  if (!isRecord(schema)) {
+    return;
+  }
   const value = Object.getOwnPropertyDescriptor(schema, "ui")?.value;
   return isRecord(value) ? value : void 0;
 }

package/dist/runtime/form/components/provider/{FormProvider.vue → form-provider.vue}

@@ -1,8 +1,8 @@
 <script setup>
 import { provideFormApi } from "../../composables/use-form-api";
-import FormOverlayHost from "./FormOverlayHost.vue";
+import FormOverlayHost from "./form-overlay-host.vue";
 const formApi = provideFormApi();
-const formInstances = formApi.formInstances;
+const { formInstances } = formApi;
 </script>
 
 <template>

package/dist/runtime/form/components/renderer/{FormCompositeControl.vue → form-composite-control.vue}

@@ -3,7 +3,7 @@ import { useFormField } from "@nuxt/ui/composables/useFormField";
 import { computed } from "vue";
 const { id, ariaAttrs } = useFormField();
 const attrs = computed(() => ({
-  ...ariaAttrs.value ?? {},
+  ...ariaAttrs.value,
   id: id.value
 }));
 </script>

package/dist/runtime/{spreadsheet/components/shared/SpreadsheetObjectPreviewTable.d.vue.ts → form/components/renderer/form-field-error.d.vue.ts}

@@ -1,5 +1,6 @@
 type __VLS_Props = {
-    rows: readonly Record<string, unknown>[];
+    path: readonly string[];
+    class?: 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;

package/dist/runtime/form/components/renderer/form-field-error.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { computed } from "vue";
+import { useFormRuntimeContext } from "../../composables/use-form-runtime";
+const props = defineProps({
+  path: { type: Array, required: true },
+  class: { type: String, required: false }
+});
+const form = useFormRuntimeContext();
+const message = computed(() => form.getFieldError(props.path));
+</script>
+
+<template>
+  <p v-if="message" :class="props.class" :data-form-cell-error="path.join('.')">
+    {{ message }}
+  </p>
+</template>

package/dist/runtime/{spreadsheet/components/shared/SpreadsheetObjectPreviewTable.vue.d.ts → form/components/renderer/form-field-error.vue.d.ts}

@@ -1,5 +1,6 @@
 type __VLS_Props = {
-    rows: readonly Record<string, unknown>[];
+    path: readonly string[];
+    class?: 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;

package/dist/runtime/form/components/renderer/{FormFieldRenderer.d.vue.ts → form-field-renderer.d.vue.ts}

@@ -1,9 +1,10 @@
-import type { FormField } from '../../types/index.js';
+import type { FormField, FormObject } from '../../types/index.js';
 type __VLS_Props = {
     field: FormField;
     parentPath: readonly string[];
     bare?: boolean;
     controlLabelledby?: string;
+    controlAttrs?: FormObject;
 };
 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;

package/dist/runtime/form/components/renderer/{FormFieldRenderer.vue → form-field-renderer.vue}

@@ -1,6 +1,7 @@
 <script setup>
 import UAlert from "@nuxt/ui/components/Alert.vue";
 import { computed, ref, useId, watchEffect } from "vue";
+import { useFieldEffects } from "../../composables/use-field-effects";
 import {
   provideFormFieldBare,
   provideFormFieldControlAttrs
@@ -11,7 +12,9 @@ import {
   fieldPath,
   useFormRuntimeContext
 } from "../../composables/use-form-runtime";
+import ArrayCollapseField from "../../fields/array-collapse/component.vue";
 import ArrayListField from "../../fields/array-list/component.vue";
+import ArrayPrimitiveField from "../../fields/array-primitive/component.vue";
 import ArrayTableField from "../../fields/array-table/component.vue";
 import AutoCompleteField from "../../fields/auto-complete/component.vue";
 import ButtonField from "../../fields/button/component.vue";
@@ -40,10 +43,12 @@ import PhoneNumberField from "../../fields/phone-number/component.vue";
 import RadioCardField from "../../fields/radio-card/component.vue";
 import RadioField from "../../fields/radio/component.vue";
 import RatingField from "../../fields/rating/component.vue";
+import SectionField from "../../fields/section/component.vue";
 import SelectField from "../../fields/select/component.vue";
 import SliderField from "../../fields/slider/component.vue";
 import SwitchGroupField from "../../fields/switch-group/component.vue";
 import SwitchField from "../../fields/switch/component.vue";
+import TabsField from "../../fields/tabs/component.vue";
 import TagField from "../../fields/tag/component.vue";
 import TextField from "../../fields/text/component.vue";
 import TextareaField from "../../fields/textarea/component.vue";
@@ -51,21 +56,32 @@ import TimeField from "../../fields/time/component.vue";
 import UploadField from "../../fields/upload/component.vue";
 import { createFormFieldInstance } from "../../utils/field-instance";
 import { focusFormFieldElement } from "../../utils/focus";
+import { isObject } from "../../utils/predicate";
+import { isArrayField } from "../../utils/state";
 import { resolveFormText } from "../../utils/text";
 const props = defineProps({
   field: { type: null, required: true },
   parentPath: { type: Array, required: true },
   bare: { type: Boolean, required: false },
-  controlLabelledby: { type: String, required: false }
+  controlLabelledby: { type: String, required: false },
+  controlAttrs: { type: null, required: false }
 });
 const form = useFormRuntimeContext();
 const element = ref(null);
 const bare = computed(() => props.bare === true);
 const controlId = useId();
 const controlAttrs = computed(() => {
-  if (!bare.value) return {};
-  if (props.controlLabelledby) return { id: controlId, "aria-labelledby": props.controlLabelledby };
-  return { id: controlId, "aria-label": resolveControlLabel(props.field) };
+  if (!bare.value) {
+    return {};
+  }
+  const attrs = {
+    ...props.controlAttrs,
+    "data-form-field": fieldPath(props.parentPath, props.field).join(".")
+  };
+  if (props.controlLabelledby) {
+    return { ...attrs, "aria-labelledby": props.controlLabelledby, id: controlId };
+  }
+  return { ...attrs, "aria-label": resolveControlLabel(props.field), id: controlId };
 });
 provideFormFieldBare(bare);
 provideFormFieldControlAttrs(controlAttrs);
@@ -73,30 +89,39 @@ const field = computed(() => createFormFieldInstance(props.field));
 const path = computed(() => fieldPath(props.parentPath, props.field));
 const childPath = computed(() => childParentPath(props.parentPath, props.field));
 const visible = computed(() => form.shouldRender(props.field, path.value));
+useFieldEffects(
+  () => props.field,
+  () => path.value
+);
 const renderer = computed(() => fieldRenderers.get(field.value.type.value) ?? null);
 const rendererProps = computed(() => {
   const baseProps = {
     field: props.field,
     path: path.value
   };
-  if (!field.value.type.isAny(["input-group", "group", "object", "card", "column"]))
+  if (!field.value.type.isAny(["input-group", "tabs", "group", "object", "card", "column"])) {
     return baseProps;
+  }
   return {
     ...baseProps,
     parentPath: childPath.value
   };
 });
 const itemLayout = useFormItemLayout({
-  layout: resolveFieldLayout,
-  formLayout: form.currentLayout
+  formLayout: form.currentLayout,
+  layout: resolveFieldLayout
 });
 watchEffect((onCleanup) => {
-  if (!element.value) return;
+  if (!element.value) {
+    return;
+  }
   onCleanup(form.registerFieldElement(path.value, element.value));
 });
 watchEffect(async () => {
   const request = form.focusRequest.value;
-  if (!request || request.path !== path.value.join(".") || !element.value) return;
+  if (!request || request.path !== path.value.join(".") || !element.value) {
+    return;
+  }
   await focusFormFieldElement(element.value);
 });
 const fieldRenderers = /* @__PURE__ */ new Map([
@@ -128,7 +153,9 @@ const fieldRenderers = /* @__PURE__ */ new Map([
   ["hidden", HiddenField],
   ["info", InfoField],
   ["divider", DividerField],
+  ["section", SectionField],
   ["input-group", InputGroupField],
+  ["tabs", TabsField],
   ["group", GroupField],
   ["object", ObjectField],
   ["matrix", MatrixField],
@@ -139,6 +166,8 @@ const fieldRenderers = /* @__PURE__ */ new Map([
   ["array-table", ArrayTableField],
   ["array-tabs", ArrayListField],
   ["array-variant", ArrayListField],
+  ["array-collapse", ArrayCollapseField],
+  ["array-primitive", ArrayPrimitiveField],
   ["slider", SliderField],
   ["color-picker", ColorPickerField],
   ["one-time-code", OneTimeCodeField],
@@ -149,25 +178,45 @@ const fieldRenderers = /* @__PURE__ */ new Map([
   ["column", ColumnField]
 ]);
 function resolveFieldLayout() {
-  if (!field.value.capability.has("itemLayout")) return void 0;
+  if (!field.value.capability.has("itemLayout")) {
+    return void 0;
+  }
   const layout = Object.getOwnPropertyDescriptor(props.field, "layout")?.value;
-  return isLayout(layout) ? layout : void 0;
+  const fullByDefault = field.value.state.is("stateless") || field.value.type.is("tabs") || isArrayField(props.field);
+  if (isLayout(layout)) {
+    return fullByDefault ? { span: "full", ...layout } : layout;
+  }
+  return fullByDefault ? { span: "full" } : void 0;
 }
 function isLayout(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+  return isObject(value) && value !== null && !Array.isArray(value);
 }
 function resolveControlLabel(controlField) {
-  if ("label" in controlField) return resolveFormText(controlField.label) ?? controlField.key;
+  if ("label" in controlField) {
+    return resolveFormText(controlField.label) ?? controlField.key;
+  }
   return controlField.key;
 }
 </script>
 
 <template>
+  <template v-if="visible && bare">
+    <component :is="renderer" v-if="renderer" v-bind="rendererProps" />
+    <UAlert
+      v-else
+      color="neutral"
+      variant="soft"
+      icon="i-lucide-construction"
+      title="Unsupported field"
+      :description="`The ${field.type.value} field renderer is not implemented in this slice.`"
+    />
+  </template>
+
   <div
-    v-if="visible"
+    v-else-if="visible"
     ref="element"
     :data-form-field="path.join('.')"
-    :style="bare ? { display: 'contents' } : itemLayout.style.value"
+    :style="itemLayout.style.value"
   >
     <component :is="renderer" v-if="renderer" v-bind="rendererProps" />
     <UAlert

package/dist/runtime/form/components/renderer/{FormFieldRenderer.vue.d.ts → form-field-renderer.vue.d.ts}

@@ -1,9 +1,10 @@
-import type { FormField } from '../../types/index.js';
+import type { FormField, FormObject } from '../../types/index.js';
 type __VLS_Props = {
     field: FormField;
     parentPath: readonly string[];
     bare?: boolean;
     controlLabelledby?: string;
+    controlAttrs?: FormObject;
 };
 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;

package/dist/runtime/form/components/renderer/{FormFieldShell.d.vue.ts → form-field-shell.d.vue.ts}

@@ -8,24 +8,24 @@ declare var __VLS_1: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
-    required: boolean;
-}, __VLS_29: {
+    required: any;
+}, __VLS_61: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
-    required: boolean;
-}, __VLS_38: {
+    required: any;
+}, __VLS_75: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
-    required: boolean;
+    required: any;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_29) => any;
+    default?: (props: typeof __VLS_61) => any;
 } & {
-    default?: (props: typeof __VLS_38) => any;
+    default?: (props: typeof __VLS_75) => 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>;

package/dist/runtime/form/components/renderer/{FormFieldShell.vue → form-field-shell.vue}

@@ -2,13 +2,19 @@
 import UButton from "@nuxt/ui/components/Button.vue";
 import UCollapsible from "@nuxt/ui/components/Collapsible.vue";
 import UFormField from "@nuxt/ui/components/FormField.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UModal from "@nuxt/ui/components/Modal.vue";
+import UTooltip from "@nuxt/ui/components/Tooltip.vue";
 import { computed, ref } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
 import { useFormFieldBare } from "../../composables/use-form-field-chrome";
 import { useFormRuntimeContext } from "../../composables/use-form-runtime";
 import { useFormUi } from "../../composables/use-form-ui";
 import { createFormFieldInstance } from "../../utils/field-instance";
 import { isRecord } from "../../utils/path";
-import { resolveFormText } from "../../utils/text";
+import { isFunction, isNumber, isString } from "../../utils/predicate";
+import { resolveRequired } from "../../utils/state";
+import { resolveFieldDescription, resolveFormText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
   field: { type: null, required: true },
@@ -22,53 +28,91 @@ const field = computed(() => createFormFieldInstance(props.field));
 const label = computed(
   () => field.value.capability.has("label") && "label" in props.field ? resolveFormText(props.field.label) : void 0
 );
+const { t } = useUiToolsLocale();
+const descriptionConfig = computed(
+  () => field.value.capability.has("description") && "description" in props.field ? resolveFieldDescription(props.field.description) : void 0
+);
 const description = computed(
-  () => field.value.capability.has("description") && "description" in props.field ? resolveFormText(props.field.description) : void 0
+  () => descriptionConfig.value?.display === "inline" ? descriptionConfig.value.text : void 0
+);
+const descriptionTooltip = computed(
+  () => descriptionConfig.value?.display === "tooltip" ? descriptionConfig.value : void 0
+);
+const descriptionModal = computed(
+  () => descriptionConfig.value?.display === "modal" ? descriptionConfig.value : void 0
+);
+const descriptionModalOpen = ref(false);
+const labelPosition = computed(() => {
+  const layout = "layout" in props.field ? props.field.layout : void 0;
+  return layout?.labelPosition ?? form.currentLayout.value.labelPosition ?? "top";
+});
+const labelWidth = computed(() => {
+  const layout = "layout" in props.field ? props.field.layout : void 0;
+  const width = layout?.labelWidth ?? form.currentLayout.value.labelWidth;
+  if (isNumber(width)) {
+    return `${width}px`;
+  }
+  return isString(width) ? width : void 0;
+});
+const orientation = computed(() => labelPosition.value === "left" ? "horizontal" : "vertical");
+const shellStyle = computed(
+  () => orientation.value === "horizontal" && labelWidth.value ? { "--nut-form-label-width": labelWidth.value } : void 0
 );
 const hint = computed(
   () => field.value.capability.has("hint") && "hint" in props.field ? resolveFormText(props.field.hint) : void 0
 );
 const labelExtra = computed(() => {
-  if (!field.value.capability.has("hint") || !("labelExtra" in props.field)) return void 0;
+  if (!field.value.capability.has("hint") || !("labelExtra" in props.field)) {
+    return void 0;
+  }
   const value = props.field.labelExtra;
-  return typeof value === "function" ? value() : value;
+  return isFunction(value) ? value() : value;
 });
 const shellLabel = computed(() => props.inlineLabel ? void 0 : label.value);
 const shellDescription = computed(() => props.inlineLabel ? void 0 : description.value);
 const shellHint = computed(() => props.inlineLabel ? void 0 : hint.value);
 const shellLabelExtra = computed(() => props.inlineLabel ? void 0 : labelExtra.value);
 const error = computed(() => form.getFieldError(props.path));
+const pending = computed(() => form.getFieldApi(props.path, props.field).validation.pending());
 const required = computed(() => {
-  if (!field.value.capability.has("validation")) return false;
-  const validation = Object.getOwnPropertyDescriptor(props.field, "validation")?.value;
-  if (typeof validation !== "object" || validation === null || Array.isArray(validation))
+  if (!field.value.capability.has("validation")) {
     return false;
-  const value = Object.getOwnPropertyDescriptor(validation, "required")?.value;
-  if (typeof value === "function")
-    return value(form.getFieldCallbackParams(props.path, props.field)) === true;
-  return typeof value === "boolean" ? value : false;
+  }
+  return resolveRequired(props.field, form.getFieldCallbackParams(props.path, props.field));
 });
+const help = computed(
+  () => field.value.capability.has("hint") && "help" in props.field ? resolveFormText(props.field.help) : void 0
+);
+const shellHelp = computed(() => props.inlineLabel ? void 0 : help.value);
 const dirty = computed(
   () => "dirtyCheck" in props.field && (props.field.dirtyCheck === true || schemaDirtyCheck()) && form.dirtyPaths.value.includes(props.path.join("."))
 );
 function schemaDirtyCheck() {
   const schema = form.schema.value;
-  if (!isRecord(schema) || !isRecord(schema.controls)) return false;
+  if (!isRecord(schema) || !isRecord(schema.controls)) {
+    return false;
+  }
   return schema.controls.dirtyCheck === true;
 }
 const open = ref(!("collapsed" in props.field && props.field.collapsed === true));
 const collapsible = computed(() => "collapsible" in props.field && props.field.collapsible === true);
 const fieldUi = computed(() => formUi.ui.value.field?.ui);
 const nuxtFieldUi = computed(() => ({
-  root: fieldUi.value?.root,
-  wrapper: fieldUi.value?.wrapper,
-  labelWrapper: fieldUi.value?.labelWrapper,
-  label: fieldUi.value?.label,
-  container: fieldUi.value?.container,
+  container: mergeFormUiClass(
+    orientation.value === "horizontal" ? "min-w-0 flex-1" : void 0,
+    fieldUi.value?.container
+  ),
   description: fieldUi.value?.description,
   error: fieldUi.value?.error,
+  help: fieldUi.value?.help,
   hint: fieldUi.value?.hint,
-  help: fieldUi.value?.help
+  label: fieldUi.value?.label,
+  labelWrapper: mergeFormUiClass(
+    orientation.value === "horizontal" && labelWidth.value ? "w-(--nut-form-label-width) shrink-0" : void 0,
+    fieldUi.value?.labelWrapper
+  ),
+  root: fieldUi.value?.root,
+  wrapper: fieldUi.value?.wrapper
 }));
 function resetField() {
   form.getFieldApi(props.path, props.field).value.reset();
@@ -89,10 +133,54 @@ function renderLabelExtra() {
     :description="shellDescription"
     :hint="shellLabelExtra === void 0 || shellLabelExtra === null ? shellHint : void 0"
     :error="error"
+    :help="shellHelp"
     :required="required"
     :size="formUi.controlSize.value"
+    :orientation="orientation"
+    :style="shellStyle"
     :ui="nuxtFieldUi"
   >
+    <template v-if="shellLabel && (descriptionTooltip || descriptionModal)" #label>
+      <span class="inline-flex items-center gap-1.5">
+        <span>{{ shellLabel }}</span>
+        <UTooltip v-if="descriptionTooltip" :text="descriptionTooltip.text">
+          <UIcon
+            name="i-lucide-circle-help"
+            class="size-3.5 text-dimmed"
+            tabindex="0"
+            role="img"
+            :aria-label="descriptionTooltip.text"
+            data-form-description-tooltip=""
+          />
+        </UTooltip>
+        <UModal
+          v-if="descriptionModal"
+          v-model:open="descriptionModalOpen"
+          :title="descriptionModal.title ?? shellLabel"
+          :ui="{ footer: 'justify-end' }"
+        >
+          <button
+            type="button"
+            class="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+            data-form-description-modal=""
+          >
+            <UIcon name="i-lucide-info" class="size-3.5" aria-hidden="true" />
+            {{ t("form.fields.description.more") }}
+          </button>
+          <template #body>
+            <p class="text-sm text-default">{{ descriptionModal.text }}</p>
+          </template>
+          <template #footer>
+            <UButton
+              color="neutral"
+              variant="outline"
+              :label="t('form.fields.description.close')"
+              @click="descriptionModalOpen = false"
+            />
+          </template>
+        </UModal>
+      </span>
+    </template>
     <template v-if="shellLabelExtra !== void 0 && shellLabelExtra !== null" #hint>
       <span :class="fieldUi?.labelExtra">
         <component :is="renderLabelExtra" />
@@ -117,6 +205,14 @@ function renderLabelExtra() {
           <div :class="mergeFormUiClass('min-w-0 flex-1', fieldUi?.content)">
             <slot :label="label" :description="description" :hint="hint" :required="required" />
           </div>
+          <UIcon
+            v-if="pending"
+            name="i-lucide-loader-circle"
+            aria-hidden="true"
+            :class="
+  mergeFormUiClass('mt-2 size-4 shrink-0 animate-spin text-muted', fieldUi?.pending)
+"
+          />
           <UButton
             v-if="dirty"
             icon="i-lucide-rotate-ccw"
@@ -134,6 +230,12 @@ function renderLabelExtra() {
       <div :class="mergeFormUiClass('min-w-0 flex-1', fieldUi?.content)">
         <slot :label="label" :description="description" :hint="hint" :required="required" />
       </div>
+      <UIcon
+        v-if="pending"
+        name="i-lucide-loader-circle"
+        aria-hidden="true"
+        :class="mergeFormUiClass('mt-2 size-4 shrink-0 animate-spin text-muted', fieldUi?.pending)"
+      />
       <UButton
         v-if="dirty"
         icon="i-lucide-rotate-ccw"

package/dist/runtime/form/components/renderer/{FormFieldShell.vue.d.ts → form-field-shell.vue.d.ts}

@@ -8,24 +8,24 @@ declare var __VLS_1: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
-    required: boolean;
-}, __VLS_29: {
+    required: any;
+}, __VLS_61: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
-    required: boolean;
-}, __VLS_38: {
+    required: any;
+}, __VLS_75: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
-    required: boolean;
+    required: any;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_29) => any;
+    default?: (props: typeof __VLS_61) => any;
 } & {
-    default?: (props: typeof __VLS_38) => any;
+    default?: (props: typeof __VLS_75) => 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>;

package/dist/runtime/form/components/renderer/form-field-status.d.vue.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    path: readonly string[];
+};
+declare var __VLS_1: {
+    invalid: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    invalid: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInvalid?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};