nuxt-ui-tools 1.7.0 → 1.8.0

package/dist/runtime/file-preview/utils/renderers.js

@@ -0,0 +1,247 @@
+import { defineAsyncComponent } from "vue";
+import { resolveFilePreviewText } from "./format.js";
+export function defineFilePreviewRenderer(renderer) {
+  return renderer;
+}
+export function matchFilePreview(rule) {
+  return (file) => {
+    const { mime, extension } = file;
+    if (mime && rule.mimes?.some((entry) => entry.endsWith("/") ? mime.startsWith(entry) : mime === entry))
+      return true;
+    return Boolean(extension && rule.extensions?.includes(extension));
+  };
+}
+const MEDIA_MODE = "fullscreen md:modal";
+const DOCUMENT_MODE = "fullscreen md:drawer";
+export const fallbackFilePreviewRenderer = defineFilePreviewRenderer({
+  compact: true,
+  component: () => import("../components/renderers/fallback-renderer.vue"),
+  icon: "i-lucide-file",
+  kind: "other",
+  mode: MEDIA_MODE
+});
+export const builtInFilePreviewRenderers = [
+  defineFilePreviewRenderer({
+    component: () => import("../components/renderers/pdf-renderer.vue"),
+    icon: "i-lucide-file-text",
+    kind: "pdf",
+    match: matchFilePreview({ extensions: ["pdf"], mimes: ["application/pdf"] }),
+    mode: DOCUMENT_MODE
+  }),
+  defineFilePreviewRenderer({
+    component: () => import("../components/renderers/image-renderer.vue"),
+    icon: "i-lucide-file-image",
+    kind: "image",
+    match: matchFilePreview({
+      extensions: [
+        "apng",
+        "avif",
+        "bmp",
+        "gif",
+        "heic",
+        "heif",
+        "ico",
+        "jpeg",
+        "jpg",
+        "png",
+        "svg",
+        "webp"
+      ],
+      mimes: ["image/"]
+    }),
+    mode: MEDIA_MODE
+  }),
+  defineFilePreviewRenderer({
+    component: () => import("../components/renderers/video-renderer.vue"),
+    icon: "i-lucide-file-video",
+    kind: "video",
+    match: matchFilePreview({
+      extensions: ["m4v", "mov", "mp4", "ogv", "webm"],
+      mimes: ["video/"]
+    }),
+    mode: MEDIA_MODE
+  }),
+  defineFilePreviewRenderer({
+    compact: true,
+    component: () => import("../components/renderers/audio-renderer.vue"),
+    icon: "i-lucide-file-audio",
+    kind: "audio",
+    match: matchFilePreview({
+      extensions: ["aac", "flac", "m4a", "mp3", "oga", "ogg", "opus", "wav", "weba"],
+      mimes: ["audio/"]
+    }),
+    mode: MEDIA_MODE
+  }),
+  defineFilePreviewRenderer({
+    component: () => import("../components/renderers/csv-renderer.vue"),
+    icon: "i-lucide-file-spreadsheet",
+    kind: "csv",
+    match: matchFilePreview({
+      extensions: ["csv", "tsv"],
+      mimes: ["text/csv", "text/tab-separated-values"]
+    }),
+    mode: DOCUMENT_MODE
+  }),
+  defineFilePreviewRenderer({
+    component: () => import("../components/renderers/markdown-renderer.vue"),
+    icon: "i-lucide-file-text",
+    kind: "markdown",
+    match: matchFilePreview({
+      extensions: ["markdown", "md", "mdx"],
+      mimes: ["text/markdown", "text/x-markdown"]
+    }),
+    mode: DOCUMENT_MODE
+  }),
+  defineFilePreviewRenderer({
+    component: () => import("../components/renderers/text-renderer.vue"),
+    icon: "i-lucide-file-code",
+    kind: "text",
+    match: matchFilePreview({
+      extensions: [
+        "c",
+        "cjs",
+        "conf",
+        "cpp",
+        "cs",
+        "css",
+        "env",
+        "go",
+        "graphql",
+        "h",
+        "htm",
+        "html",
+        "ini",
+        "java",
+        "js",
+        "json",
+        "jsonc",
+        "jsx",
+        "kt",
+        "log",
+        "mjs",
+        "php",
+        "py",
+        "rb",
+        "rs",
+        "scss",
+        "sh",
+        "sql",
+        "srt",
+        "swift",
+        "toml",
+        "ts",
+        "tsx",
+        "txt",
+        "vtt",
+        "vue",
+        "xml",
+        "yaml",
+        "yml"
+      ],
+      mimes: [
+        "text/",
+        "application/json",
+        "application/ld+json",
+        "application/xml",
+        "application/javascript",
+        "application/x-yaml",
+        "application/yaml",
+        "application/sql"
+      ]
+    }),
+    mode: DOCUMENT_MODE
+  }),
+  defineFilePreviewRenderer({
+    compact: true,
+    component: () => import("../components/renderers/fallback-renderer.vue"),
+    icon: "i-lucide-file-type",
+    kind: "office",
+    match: matchFilePreview({
+      extensions: [
+        "doc",
+        "docx",
+        "key",
+        "numbers",
+        "odp",
+        "ods",
+        "odt",
+        "pages",
+        "ppt",
+        "pptx",
+        "rtf",
+        "xls",
+        "xlsx"
+      ],
+      mimes: [
+        "application/msword",
+        "application/rtf",
+        "application/vnd.ms-excel",
+        "application/vnd.ms-powerpoint",
+        "application/vnd.oasis.opendocument.presentation",
+        "application/vnd.oasis.opendocument.spreadsheet",
+        "application/vnd.oasis.opendocument.text",
+        "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+      ]
+    }),
+    mode: MEDIA_MODE
+  }),
+  defineFilePreviewRenderer({
+    compact: true,
+    component: () => import("../components/renderers/fallback-renderer.vue"),
+    icon: "i-lucide-file-archive",
+    kind: "archive",
+    match: matchFilePreview({
+      extensions: ["7z", "bz2", "gz", "rar", "tar", "tgz", "xz", "zip"],
+      mimes: [
+        "application/gzip",
+        "application/x-7z-compressed",
+        "application/x-bzip2",
+        "application/x-rar-compressed",
+        "application/x-tar",
+        "application/zip"
+      ]
+    }),
+    mode: MEDIA_MODE
+  }),
+  fallbackFilePreviewRenderer
+];
+export function mergeFilePreviewRenderers(custom) {
+  const replaced = new Set(custom.map((renderer) => renderer.kind));
+  return [
+    ...custom,
+    ...builtInFilePreviewRenderers.filter((renderer) => !replaced.has(renderer.kind))
+  ];
+}
+export function detectFilePreviewKind(file, renderers) {
+  if (file.kind) return file.kind;
+  return renderers.find((renderer) => renderer.match?.(file))?.kind ?? "other";
+}
+export function findFilePreviewRenderer(kind, renderers) {
+  return renderers.find((renderer) => renderer.kind === kind) ?? renderers.find((renderer) => renderer.kind === "other") ?? fallbackFilePreviewRenderer;
+}
+const components = /* @__PURE__ */ new WeakMap();
+export function filePreviewRendererComponent(renderer) {
+  const known = components.get(renderer);
+  if (known) return known;
+  const component = defineAsyncComponent(renderer.component);
+  components.set(renderer, component);
+  return component;
+}
+const BUILT_IN_KINDS = /* @__PURE__ */ new Set([
+  "archive",
+  "audio",
+  "csv",
+  "image",
+  "markdown",
+  "office",
+  "other",
+  "pdf",
+  "text",
+  "video"
+]);
+export function filePreviewKindLabel(renderer, t) {
+  if (renderer.label) return resolveFilePreviewText(renderer.label);
+  return BUILT_IN_KINDS.has(renderer.kind) ? t(`filePreview.kinds.${renderer.kind}`) : renderer.kind;
+}

package/dist/runtime/form/components/page/form-page-header.d.vue.ts

@@ -1,7 +1,9 @@
 /**
  * Header of a form page: the schema `header` (eyebrow, title, description), an unsaved-changes
  * badge while a form with `controls.dirtyCheck` is modified, and the page actions. It stays
- * pinned while the page scrolls on wide layouts, and sections scroll to just below it.
+ * pinned while the page scrolls on wide layouts, and sections scroll to just below it. The badge
+ * keeps its place while the form is unmodified, hidden, and does not grow its line, so the first
+ * edit neither shifts the page nor resizes the pinned header.
  */
 type __VLS_Slots = {
     /** Before the heading, e.g. an avatar of the record. */

package/dist/runtime/form/components/page/form-page-header.vue

@@ -70,7 +70,7 @@ function headerText(config, key) {
           <slot name="title">{{ title }}</slot>
         </h1>
         <div
-          v-if="description || unsaved || $slots.description"
+          v-if="description || page.dirtyCheck.value || $slots.description"
           :class="
   mergeFormUiClass(
     'flex flex-wrap items-center gap-2.5 text-[13.5px] text-muted',
@@ -82,12 +82,12 @@ function headerText(config, key) {
             <span v-if="description">{{ description }}</span>
           </slot>
           <UBadge
-            v-if="unsaved"
+            v-if="page.dirtyCheck.value"
             color="warning"
             variant="soft"
             :label="t('form.page.unsavedChanges')"
-            :class="pageUi?.unsaved"
-            data-form-page-unsaved
+            :class="mergeFormUiClass(unsaved ? '-my-1' : '-my-1 invisible', pageUi?.unsaved)"
+            :data-form-page-unsaved="unsaved ? '' : void 0"
           />
         </div>
       </div>

package/dist/runtime/form/components/page/form-page-header.vue.d.ts

@@ -1,7 +1,9 @@
 /**
  * Header of a form page: the schema `header` (eyebrow, title, description), an unsaved-changes
  * badge while a form with `controls.dirtyCheck` is modified, and the page actions. It stays
- * pinned while the page scrolls on wide layouts, and sections scroll to just below it.
+ * pinned while the page scrolls on wide layouts, and sections scroll to just below it. The badge
+ * keeps its place while the form is unmodified, hidden, and does not grow its line, so the first
+ * edit neither shifts the page nor resizes the pinned header.
  */
 type __VLS_Slots = {
     /** Before the heading, e.g. an avatar of the record. */

package/dist/runtime/form/components/page/form-page-navigation.vue

@@ -75,6 +75,7 @@ function select(event, key) {
   <nav
     :aria-labelledby="page.navigationTitle.value || $slots.title ? titleId : void 0"
     :aria-label="page.navigationTitle.value || $slots.title ? void 0 : t('form.page.navigation')"
+    :style="{ '--nut-form-page-header': `${page.stickyOffset.value}px` }"
     :class="
   mergeFormUiClass(
     'flex min-w-0 flex-col gap-3.5 @3xl/form-page:sticky @3xl/form-page:top-[calc(var(--nut-form-page-header,0px)+var(--nut-form-page-gap,24px))]',
@@ -126,7 +127,7 @@ function select(event, key) {
               :data-dirty="dirtyShown(section) || void 0"
               :class="
   mergeFormUiClass(
-    'group flex h-8 min-w-0 items-center gap-2 rounded-md border border-default bg-default px-2.5 text-[12.5px] font-medium text-muted no-underline transition-colors hover:text-highlighted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary data-[active]:border-primary data-[active]:bg-primary/10 data-[active]:text-highlighted @3xl/form-page:h-9 @3xl/form-page:gap-2.5 @3xl/form-page:rounded-[7px] @3xl/form-page:border-transparent @3xl/form-page:bg-transparent @3xl/form-page:text-[13.5px] @3xl/form-page:hover:bg-elevated @3xl/form-page:data-[active]:border-transparent @3xl/form-page:data-[active]:bg-default @3xl/form-page:data-[active]:font-semibold @3xl/form-page:data-[active]:shadow-[inset_2px_0_0_var(--ui-primary)]',
+    'group relative flex h-8 min-w-0 items-center gap-2 rounded-md border border-default bg-default px-2.5 text-[12.5px] font-medium text-muted no-underline transition-colors hover:text-highlighted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary data-[active]:border-primary data-[active]:bg-primary/10 data-[active]:text-highlighted @3xl/form-page:h-9 @3xl/form-page:gap-2.5 @3xl/form-page:rounded-[7px] @3xl/form-page:border-transparent @3xl/form-page:bg-transparent @3xl/form-page:text-[13.5px] @3xl/form-page:hover:bg-elevated @3xl/form-page:data-[active]:border-transparent @3xl/form-page:data-[active]:bg-default @3xl/form-page:data-[active]:font-semibold @3xl/form-page:data-[active]:shadow-[inset_2px_0_0_var(--ui-primary)]',
     pageUi?.navigationItem
   )
 "

package/dist/runtime/form/components/page/form-page-section.vue

@@ -45,9 +45,12 @@ onBeforeUnmount(() => unregister?.());
     :data-form-page-section="section.key"
     :data-state="section.status"
     :data-dirty="dirty || void 0"
+    :style="{
+  scrollMarginTop: `calc(${page.stickyOffset.value}px + var(--nut-form-page-gap, 24px))`
+}"
     :class="
   mergeFormUiClass(
-    'flex min-w-0 scroll-mt-[calc(var(--nut-form-page-header,0px)+var(--nut-form-page-gap,24px))] flex-col gap-[18px] rounded-xl border border-default bg-default px-5 pt-5 pb-6 transition-[border-color,box-shadow] duration-200 @3xl/form-page:px-6 @3xl/form-page:pt-[22px] data-[dirty]:border-primary data-[dirty]:ring-4 data-[dirty]:ring-primary/20',
+    'flex min-w-0 flex-col gap-[18px] rounded-xl border border-default bg-default px-5 pt-5 pb-6 transition-[border-color,box-shadow] duration-200 @3xl/form-page:px-6 @3xl/form-page:pt-[22px] data-[dirty]:border-primary data-[dirty]:ring-4 data-[dirty]:ring-primary/20 data-[dirty]:ring-inset',
     pageUi?.section
   )
 "
@@ -72,7 +75,12 @@ onBeforeUnmount(() => unregister?.());
       </h2>
       <p
         v-if="section.description"
-        :class="mergeFormUiClass('m-0 text-[13px] text-muted', pageUi?.sectionDescription)"
+        :class="
+  mergeFormUiClass(
+    'order-last m-0 basis-full text-[13px] text-muted @3xl/form-page:order-none @3xl/form-page:basis-auto',
+    pageUi?.sectionDescription
+  )
+"
       >
         {{ section.description }}
       </p>
@@ -84,20 +92,20 @@ onBeforeUnmount(() => unregister?.());
         :class="mergeFormUiClass('capitalize', pageUi?.sectionOptional)"
       />
       <div
-        v-if="dirty || $slots.actions"
-        :class="mergeFormUiClass('ms-auto flex items-center gap-2', pageUi?.sectionActions)"
+        v-if="page.dirtyCheck.value || $slots.actions"
+        :class="mergeFormUiClass('ms-auto -my-1.5 flex items-center gap-2', pageUi?.sectionActions)"
       >
         <slot name="actions" :section />
         <UButton
-          v-if="dirty"
+          v-if="page.dirtyCheck.value"
           type="button"
           color="neutral"
           variant="ghost"
           size="sm"
           icon="i-lucide-rotate-ccw"
           :label="t('form.page.resetSection')"
-          :class="pageUi?.sectionReset"
-          data-form-page-reset
+          :class="mergeFormUiClass(dirty ? void 0 : 'invisible', pageUi?.sectionReset)"
+          :data-form-page-reset="dirty ? '' : void 0"
           @click="page.resetSection(section.key)"
         />
       </div>

package/dist/runtime/form/components/page/form-page.vue

@@ -39,7 +39,6 @@ const pageUi = computed(() => root.formUi.ui.value.page?.ui);
     :class="
   mergeFormUiClass('@container/form-page h-full min-w-0 overflow-y-auto bg-muted', pageUi?.root)
 "
-    :style="{ '--nut-form-page-header': `${page.stickyOffset.value}px` }"
     data-form-page
     @submit.prevent="root.submit"
   >

package/dist/runtime/form/components/utils/form-file-preview.vue

@@ -3,6 +3,7 @@ import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed, onScopeDispose, watch } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { fileExtensionLabel, fileIconName, formatFileSize } from "../../../shared/utils/file";
 const props = defineProps({
   file: { type: null, required: true },
   index: { type: Number, required: true },
@@ -23,8 +24,10 @@ const preview = computed(() => {
   previewUrl = URL.createObjectURL(props.file);
   return previewUrl;
 });
-const icon = computed(() => fileIcon(props.file.type));
-const meta = computed(() => `${extension(props.file)} \xB7 ${formatSize(props.file.size)}`);
+const icon = computed(() => fileIconName(props.file.type));
+const meta = computed(
+  () => `${fileExtensionLabel(props.file)} \xB7 ${formatFileSize(props.file.size, code.value)}`
+);
 watch(
   () => props.file,
   () => {
@@ -39,42 +42,6 @@ onScopeDispose(() => {
     URL.revokeObjectURL(previewUrl);
   }
 });
-function fileIcon(type) {
-  if (type === "application/pdf") {
-    return "i-lucide-file-text";
-  }
-  if (type.includes("spreadsheet") || type.includes("excel") || type === "text/csv") {
-    return "i-lucide-file-spreadsheet";
-  }
-  if (type.includes("word") || type.includes("document")) {
-    return "i-lucide-file-type";
-  }
-  if (type.includes("zip") || type.includes("compressed")) {
-    return "i-lucide-file-archive";
-  }
-  return "i-lucide-file";
-}
-function extension(file) {
-  const dot = file.name.lastIndexOf(".");
-  return dot === -1 ? file.type || "\u2014" : file.name.slice(dot + 1).toUpperCase();
-}
-function formatSize(bytes) {
-  const units = ["o", "Ko", "Mo", "Go"];
-  let size = bytes;
-  let unit = 0;
-  while (size >= 1024 && unit < units.length - 1) {
-    size /= 1024;
-    unit += 1;
-  }
-  let digits = 0;
-  if (unit > 0 && size < 10) {
-    digits = 1;
-  }
-  const formatted = new Intl.NumberFormat(code.value, { maximumFractionDigits: digits }).format(
-    size
-  );
-  return `${formatted} ${units[unit]}`;
-}
 </script>
 
 <template>

package/dist/runtime/form/composables/use-field-control.d.ts

@@ -54,7 +54,7 @@ export declare function useFieldControl<TField extends FormField>(field: () => T
         selectedItems: import("vue").ComputedRef<readonly import("../utils/options.js").ResolvedFormOption[]>;
         setSearch: (term: string) => void;
     };
-    params: import("vue").ComputedRef<import("../types/index.js").FormFieldCallbackParams<{}, {}, unknown, unknown>>;
+    params: import("vue").ComputedRef<import("../types/index.js").FormFieldCallbackParams<{}, Readonly<import("../../shared/index.js").GenericObject>, unknown, unknown>>;
     placeholder: import("vue").ComputedRef<string>;
     validationPending: import("vue").ComputedRef<boolean>;
 };

package/dist/runtime/form/composables/use-form-page.js

@@ -37,7 +37,9 @@ export function useFormPage(params) {
   const dirtyCheck = computed(() => getSchemaDirtyCheck(root.schema.value));
   const navigationTitle = computed(() => getFormPageNavigationTitle(root.schema.value));
   const remaining = computed(
-    () => sections.value.filter((section) => !section.optional && section.status !== "complete").length
+    () => sections.value.filter(
+      (section) => section.optional ? section.missing > 0 || section.status === "invalid" : section.status !== "complete"
+    ).length
   );
   const modified = computed(() => sections.value.filter((section) => section.dirty).length);
   const stickyOffset = ref(0);

package/dist/runtime/form/composables/use-form-runtime.js

@@ -147,6 +147,9 @@ export function useFormRuntime(params) {
     validate
   });
   async function submitHandler(externalSubmitHandler) {
+    await uploadRegistry.settle();
+    for (const path of uploadRegistry.pendingPaths())
+      validation.setError(path, t("form.fields.upload.pending"), { blocking: true });
     const result = await submission.submitHandler(externalSubmitHandler);
     if (result.success) {
       state.rebaseline();

package/dist/runtime/form/composables/use-form-upload-registry.d.ts

@@ -1,5 +1,7 @@
 import type { FormUploadRuntimeState } from '../types/index.js';
 export declare function useFormUploadRegistry(): {
     get: (path: readonly string[]) => FormUploadRuntimeState;
+    pendingPaths: () => (readonly string[])[];
     register: (path: readonly string[], state: FormUploadRuntimeState) => () => void;
+    settle: () => Promise<void>;
 };

package/dist/runtime/form/composables/use-form-upload-registry.js

@@ -3,15 +3,20 @@ export function useFormUploadRegistry() {
   const states = shallowReactive({});
   function register(path, state) {
     const key = path.join(".");
-    states[key] = state;
+    const entry = { path, state };
+    states[key] = entry;
     return () => {
-      if (states[key] === state) {
-        delete states[key];
-      }
+      if (states[key] === entry) delete states[key];
     };
   }
   function get(path) {
-    return states[path.join(".")];
+    return states[path.join(".")]?.state;
   }
-  return { get, register };
+  async function settle() {
+    await Promise.all(Object.values(states).map((entry) => entry.state.settle()));
+  }
+  function pendingPaths() {
+    return Object.values(states).filter((entry) => entry.state.pending()).map((entry) => entry.path);
+  }
+  return { get, pendingPaths, register, settle };
 }

package/dist/runtime/form/composables/use-form-validation.js

@@ -527,7 +527,11 @@ function isAsyncValidator(rule) {
 }
 function resolveRegleStatusErrors(status) {
   const errors = readReactiveProperty(status, "$errors");
-  return Array.isArray(errors) ? errors.map(String) : [];
+  if (Array.isArray(errors)) {
+    return errors.map(String);
+  }
+  const own = isRecord(errors) ? errors.$self : void 0;
+  return Array.isArray(own) ? own.map(String) : [];
 }
 function toReglePath(path, state) {
   const reglePath = [];

package/dist/runtime/form/fields/array-list/use-array-items.d.ts

@@ -7,7 +7,7 @@ export declare function isArrayActionConfig(action: FormArrayAction | undefined)
 export declare function useFormArrayItems(field: () => FormArrayItemsField, path: () => readonly string[]): {
     actionParams: (index: number) => {
         ctx: {};
-        deps: {};
+        deps: Readonly<import("../../../shared/index.js").GenericObject>;
         getOptions: (key: string) => readonly unknown[];
         getValue: (key: string) => unknown;
         index: number;

package/dist/runtime/form/fields/array-table/array-table-cell.d.vue.ts

@@ -0,0 +1,15 @@
+import type { FormField } from '../../types/index.js';
+/**
+ * One editable cell of an array table. An invalid cell highlights its control through the Nuxt UI
+ * form field context and shows its message in a tooltip on hover, kept open while the cell has
+ * focus, instead of pushing text under the control. Only invalid cells mount a tooltip, so large
+ * tables stay cheap to render. The cell positions the visually hidden message, which would
+ * otherwise escape the table's scroll containers and stretch the document.
+ */
+type __VLS_Props = {
+    field: FormField;
+    itemPath: 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/array-table/array-table-cell.vue

@@ -0,0 +1,58 @@
+<script setup>
+import UFormField from "@nuxt/ui/components/FormField.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UTooltip from "@nuxt/ui/components/Tooltip.vue";
+import { useElementHover, useFocusWithin } from "@vueuse/core";
+import { computed, useTemplateRef } from "vue";
+import FormFieldRenderer from "../../components/renderer/form-field-renderer.vue";
+import { useFormRuntimeContext } from "../../composables/use-form-runtime";
+import { useFormUi } from "../../composables/use-form-ui";
+import { mergeFormUiClass } from "../../utils/ui";
+const props = defineProps({
+  field: { type: null, required: true },
+  itemPath: { type: Array, required: true }
+});
+const form = useFormRuntimeContext();
+const formUi = useFormUi();
+const ui = computed(() => formUi.ui.value.arrayTable?.ui);
+const control = useTemplateRef("control");
+const hovered = useElementHover(control);
+const { focused } = useFocusWithin(control);
+const path = computed(() => [...props.itemPath, props.field.key]);
+const error = computed(() => form.getFieldError(path.value));
+</script>
+
+<template>
+  <div
+    ref="control"
+    :class="mergeFormUiClass('relative flex w-full items-center [&>*]:w-full', ui?.control)"
+    :data-form-cell-invalid="error ? path.join('.') : void 0"
+  >
+    <UFormField
+      :name="path.join('.')"
+      :error="error"
+      :ui="{ root: 'w-full', container: 'mt-0', error: 'sr-only' }"
+    >
+      <FormFieldRenderer :field="field" :parent-path="itemPath" bare />
+    </UFormField>
+  </div>
+  <UTooltip
+    v-if="error"
+    :reference="control ?? void 0"
+    :open="hovered || focused"
+    :content="{ align: 'start', side: 'top', sideOffset: 6 }"
+    :ui="{
+  content: mergeFormUiClass(
+    'h-auto max-w-80 items-start gap-1.5 bg-error px-2.5 py-1.5 text-xs text-inverted ring-error',
+    ui?.error
+  ),
+  arrow: 'fill-error'
+}"
+    arrow
+  >
+    <template #content>
+      <UIcon name="i-lucide-circle-alert" class="mt-px size-3.5 shrink-0" aria-hidden="true" />
+      <span data-form-cell-error="">{{ error }}</span>
+    </template>
+  </UTooltip>
+</template>

package/dist/runtime/form/fields/array-table/array-table-cell.vue.d.ts

@@ -0,0 +1,15 @@
+import type { FormField } from '../../types/index.js';
+/**
+ * One editable cell of an array table. An invalid cell highlights its control through the Nuxt UI
+ * form field context and shows its message in a tooltip on hover, kept open while the cell has
+ * focus, instead of pushing text under the control. Only invalid cells mount a tooltip, so large
+ * tables stay cheap to render. The cell positions the visually hidden message, which would
+ * otherwise escape the table's scroll containers and stretch the document.
+ */
+type __VLS_Props = {
+    field: FormField;
+    itemPath: 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;