nuxt-ui-tools 1.25.0 → 1.26.0

package/dist/runtime/display/types/blocks/facts.d.ts

@@ -1,4 +1,4 @@
-import type { DisplayAction, DisplayBlockBase, DisplayChip, DisplayContent, DisplaySurface, DisplayTone } from '../shared.js';
+import type { DisplayAction, DisplayBlockBase, DisplayChip, DisplayContent, DisplayLinkTarget, DisplaySurface, DisplayTone } from '../shared.js';
 export type DisplayFactsLayout = 'ledger' | 'grid' | 'inline' | 'columns' | 'tiles';
 export type DisplayFactsSlot = 'root' | 'group' | 'groupHeader' | 'groupTitle' | 'groupAside' | 'item' | 'label' | 'hint' | 'value' | 'empty' | 'actions';
 export interface DisplayFact {
@@ -19,6 +19,8 @@ export interface DisplayFact {
     icon?: string;
     /** Makes the value a link. */
     to?: string;
+    /** Where `to` opens. Absolute http(s) links open in a new tab by default. */
+    target?: DisplayLinkTarget | null;
     /** Draws a placeholder bar instead of the value, such as one figure still loading. */
     loading?: boolean;
 }

package/dist/runtime/display/types/blocks/person.d.ts

@@ -1,4 +1,4 @@
-import type { DisplayAvatar, DisplayBlockBase, DisplayChip, DisplayContent, DisplaySize, DisplayText, DisplayTone } from '../shared.js';
+import type { DisplayAvatar, DisplayBlockBase, DisplayChip, DisplayContent, DisplayLinkTarget, DisplaySize, DisplayText, DisplayTone } from '../shared.js';
 export type DisplayPersonSlot = 'root' | 'avatar' | 'body' | 'name' | 'description' | 'chip' | 'group' | 'label' | 'contacts' | 'contact' | 'contactIcon' | 'contactValue';
 export interface DisplayPerson {
     name: DisplayText;
@@ -14,6 +14,8 @@ export interface DisplayPersonContact {
     value: string;
     /** Makes the value a link, such as `mailto:` or `tel:`. */
     href?: string;
+    /** Where `href` opens. Absolute http(s) links open in a new tab by default. */
+    target?: DisplayLinkTarget | null;
     /** Adds a copy button. Defaults to `true`. */
     copy?: boolean;
 }

package/dist/runtime/display/types/blocks/record.d.ts

@@ -1,5 +1,5 @@
-import type { DisplayAvatar, DisplayBlockBase, DisplayChip, DisplayContent, DisplayRevealable, DisplaySurface, DisplayTone } from '../shared.js';
-export type DisplayRecordSlot = 'root' | 'media' | 'icon' | 'body' | 'reference' | 'title' | 'meta' | 'description' | 'badges' | 'trailing' | 'trailingValue' | 'trailingCaption' | 'header' | 'list' | 'item' | 'more' | 'empty';
+import type { DisplayAvatar, DisplayBlockBase, DisplayChip, DisplayContent, DisplayLinkTarget, DisplayRevealable, DisplaySurface, DisplayTone } from '../shared.js';
+export type DisplayRecordSlot = 'root' | 'media' | 'avatar' | 'icon' | 'body' | 'reference' | 'title' | 'meta' | 'description' | 'badges' | 'trailing' | 'trailingValue' | 'trailingCaption' | 'header' | 'list' | 'item' | 'more' | 'empty';
 export interface DisplayRecordItem {
     /** Small reference over the title, such as an identifier. */
     reference?: DisplayContent;
@@ -25,6 +25,8 @@ export interface DisplayRecordItem {
     chip?: DisplayChip;
     /** Makes the record a link. */
     to?: string;
+    /** Where `to` opens. Absolute http(s) links open in a new tab by default. */
+    target?: DisplayLinkTarget | null;
     onClick?: () => void;
 }
 export interface DisplayRecordProps extends DisplayBlockBase<DisplayRecordSlot>, Partial<DisplayRecordItem>, DisplayRevealable {

package/dist/runtime/display/types/config.d.ts

@@ -1,5 +1,5 @@
 import type { DisplayKind, DisplayPropsMap, DisplayUiMap } from './registry.js';
-import type { DisplayBuiltinTone, DisplayToneRegistry } from './shared.js';
+import type { DisplayBuiltinTone, DisplayChipUi, DisplayToneRegistry } from './shared.js';
 /**
  * Colors of a tone, as CSS colors. Only `color` is needed for a new tone: the ink defaults to it,
  * the soft background and the line mix it into the page background.
@@ -49,5 +49,12 @@ export interface DisplayUiConfig {
     presets?: DisplayPresets;
     /** Extra tones, and color changes to the built-in ones. Register new names in `DisplayToneRegistry`. */
     tones?: Partial<DisplayToneDefinitions>;
-    ui?: Partial<DisplayUiMap>;
+    /**
+     * Slot classes per kind, plus `chip`: the `UBadge` slots of every chip the blocks draw (facts
+     * chips, record badges, list chips…), so chips match the app's badge style. Tones still color
+     * them: leave colors out of these classes.
+     */
+    ui?: Partial<DisplayUiMap> & {
+        chip?: DisplayChipUi;
+    };
 }

package/dist/runtime/display/types/shared.d.ts

@@ -38,6 +38,11 @@ export type DisplayContent = LazyRenderableValue;
  * when the link is used (opened, previewed or downloaded), with the button showing its progress.
  */
 export type DisplayUrl = string | (() => MaybePromise<string>);
+/**
+ * Where a block link opens. Absolute http(s) links default to `_blank`, others to the same tab;
+ * `null` keeps an absolute link in the same tab.
+ */
+export type DisplayLinkTarget = '_blank' | '_self' | '_parent' | '_top' | (string & {});
 /** Date accepted by date-aware blocks: a `Date`, an ISO string, or epoch milliseconds. */
 export type DisplayDate = Date | string | number;
 /** Button rendered by a block, with every `UButton` prop. */
@@ -49,6 +54,10 @@ export interface DisplayChip extends Omit<BadgeProps, 'label'> {
     label: DisplayText;
     tone?: DisplayTone;
 }
+/** The `UBadge` slots of a chip. */
+export type DisplayChipSlot = 'base' | 'label' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'trailingIcon';
+/** Classes per `UBadge` slot of every chip, from `appConfig.nuxtUiTools.display.ui.chip`. */
+export type DisplayChipUi = DisplayUiSlots<DisplayChipSlot>;
 /** Avatar with every `UAvatar` prop. Without `src`, the initials of `alt` show. */
 export type DisplayAvatar = AvatarProps;
 /** Slot classes of a block: every key is optional and merged over the defaults. */

package/dist/runtime/display/utils/config.d.ts

@@ -1,6 +1,11 @@
 import type { AppConfig } from 'nuxt/schema';
-import type { DisplayKind, DisplayPropsMap, DisplayUiConfig } from '../types/index.js';
+import type { DisplayKind, DisplayPropsMap, DisplayUiConfig, DisplayUiSlots } from '../types/index.js';
 /** `appConfig.nuxtUiTools.display`, or an empty config. */
 export declare function resolveAppDisplayConfig(config: Pick<AppConfig, 'nuxtUiTools'>): DisplayUiConfig;
-/** The props of a block over the defaults of its preset; an unknown preset changes nothing. */
+/**
+ * The props of a block over the defaults of its preset; an unknown preset changes nothing. Slot
+ * classes merge per slot, the block's over the preset's, like the other props.
+ */
 export declare function applyDisplayPreset<TKind extends DisplayKind>(kind: TKind, props: DisplayPropsMap[TKind], preset: string | undefined, config: DisplayUiConfig): DisplayPropsMap[TKind];
+/** Two slot class maps merged per slot with tailwind-merge, `over` winning conflicts. */
+export declare function mergeDisplaySlots(base: DisplayUiSlots<string> | undefined, over: DisplayUiSlots<string> | undefined): DisplayUiSlots<string> | undefined;

package/dist/runtime/display/utils/config.js

@@ -1,7 +1,17 @@
+import { twMerge } from "tailwind-merge";
 export function resolveAppDisplayConfig(config) {
   return config.nuxtUiTools?.display ?? {};
 }
 export function applyDisplayPreset(kind, props, preset, config) {
   const defaults = preset === void 0 ? void 0 : config.presets?.[kind]?.[preset];
-  return defaults ? { ...defaults, ...props } : props;
+  if (!defaults) return props;
+  const merged = { ...defaults, ...props };
+  const ui = mergeDisplaySlots(defaults.ui, props.ui);
+  return ui ? { ...merged, ui } : merged;
+}
+export function mergeDisplaySlots(base, over) {
+  if (!base || !over) return base ?? over;
+  const merged = { ...base };
+  for (const [slot, classes] of Object.entries(over)) merged[slot] = twMerge(base[slot], classes);
+  return merged;
 }

package/dist/runtime/display/utils/links.d.ts

@@ -0,0 +1,12 @@
+import type { DisplayLinkTarget } from '../types/index.js';
+/** Whether a link leaves the app: an absolute http(s) address (route objects never do). */
+export declare function isExternalLink<TTo>(to: TTo): to is TTo & string;
+/**
+ * Attributes of a block link: an absolute http(s) address opens in a new tab unless `target` says
+ * otherwise, and a new tab never gets access to the app (`noopener noreferrer`).
+ */
+export declare function displayLinkAttrs(to: string, target?: DisplayLinkTarget | null): {
+    rel: string | undefined;
+    target: DisplayLinkTarget | undefined;
+    to: string;
+};

package/dist/runtime/display/utils/links.js

@@ -0,0 +1,9 @@
+import { isString } from "../../shared/utils/predicate.js";
+const ABSOLUTE = /^https?:\/\//iu;
+export function isExternalLink(to) {
+  return isString(to) && ABSOLUTE.test(to);
+}
+export function displayLinkAttrs(to, target) {
+  const resolved = target === void 0 ? isExternalLink(to) ? "_blank" : void 0 : target ?? void 0;
+  return { rel: resolved === "_blank" ? "noopener noreferrer" : void 0, target: resolved, to };
+}

package/dist/runtime/file-preview/components/shell/file-preview-header.d.vue.ts

@@ -10,6 +10,8 @@ type __VLS_Props = {
     canExpand: boolean;
     expanded: boolean;
     details: boolean;
+    /** The file failed to load: its download and open-in-tab actions are hidden. */
+    unavailable: boolean;
 };
 declare var __VLS_20: {};
 type __VLS_Slots = {} & {

package/dist/runtime/file-preview/components/shell/file-preview-header.vue

@@ -16,12 +16,13 @@ const props = defineProps({
   narrow: { type: Boolean, required: true },
   canExpand: { type: Boolean, required: true },
   expanded: { type: Boolean, required: true },
-  details: { type: Boolean, required: true }
+  details: { type: Boolean, required: true },
+  unavailable: { type: Boolean, required: true }
 });
 const emit = defineEmits(["previous", "next", "close", "expand", "details", "download", "open", "action"]);
 const { t } = useUiToolsLocale();
 const name = computed(() => splitFilePreviewName(props.item.name || t("filePreview.untitled")));
-const downloadable = computed(() => props.item.file.download !== false);
+const downloadable = computed(() => !props.unavailable && props.item.file.download !== false);
 const actions = computed(() => props.item.file.actions ?? []);
 const menu = computed(() => [
   [
@@ -33,11 +34,13 @@ const menu = computed(() => [
         onSelect: () => emit("download")
       }
     ] : [],
-    {
-      icon: "i-lucide-external-link",
-      label: t("filePreview.openInNewTab"),
-      onSelect: () => emit("open")
-    }
+    ...props.unavailable ? [] : [
+      {
+        icon: "i-lucide-external-link",
+        label: t("filePreview.openInNewTab"),
+        onSelect: () => emit("open")
+      }
+    ]
   ],
   actions.value.map((action) => ({
     icon: action.icon,
@@ -124,11 +127,14 @@ const menu = computed(() => [
         v-if="downloadable"
         icon="i-lucide-download"
         :label="t('filePreview.download')"
+        data-file-preview-header-download=""
         @click="emit('download')"
       />
       <FilePreviewButton
+        v-if="!unavailable"
         icon="i-lucide-external-link"
         :label="t('filePreview.openInNewTab')"
+        data-file-preview-open-tab=""
         @click="emit('open')"
       />
       <span class="mx-1 h-5 w-px shrink-0 bg-(--ui-border)" aria-hidden="true" />

package/dist/runtime/file-preview/components/shell/file-preview-header.vue.d.ts

@@ -10,6 +10,8 @@ type __VLS_Props = {
     canExpand: boolean;
     expanded: boolean;
     details: boolean;
+    /** The file failed to load: its download and open-in-tab actions are hidden. */
+    unavailable: boolean;
 };
 declare var __VLS_20: {};
 type __VLS_Slots = {} & {

package/dist/runtime/file-preview/components/shell/file-preview-shell.vue

@@ -46,6 +46,7 @@ const stage = useTemplateRef("stage");
 const strip = useTemplateRef("strip");
 const showDetails = ref(false);
 const reported = shallowRef([]);
+const failure = shallowRef(null);
 const files = computed(() => props.instance.files.value);
 const index = computed(() => props.instance.index.value);
 const loop = computed(() => props.instance.options.loop === true);
@@ -59,6 +60,9 @@ const itemRenderer = computed(
 );
 const kindLabel = computed(() => filePreviewKindLabel(itemRenderer.value, t));
 const source = useFilePreviewSource(() => display.value);
+const unavailable = computed(
+  () => source.status.value === "error" || failure.value?.reason === "source"
+);
 const many = computed(() => files.value.length > 1);
 const hasPrevious = computed(() => loop.value || index.value > 0);
 const hasNext = computed(() => loop.value || index.value < files.value.length - 1);
@@ -194,6 +198,7 @@ async function runAction(action) {
       :can-expand="canExpand"
       :expanded="expanded"
       :details="showDetails"
+      :unavailable="unavailable"
       @previous="instance.handle.previous"
       @next="instance.handle.next"
       @close="emit('close')"
@@ -227,6 +232,7 @@ async function runAction(action) {
         :kind-label="kindLabel"
         :arrows="arrows"
         @ready="reported = $event"
+        @failure="failure = $event"
         @previous="instance.handle.previous"
         @next="instance.handle.next"
         @download="download"

package/dist/runtime/file-preview/components/shell/file-preview-stage.d.vue.ts

@@ -1,5 +1,5 @@
 import type { useFilePreviewSource } from '../../composables/use-file-preview-source.js';
-import type { FilePreviewContainer, FilePreviewDetail, FilePreviewItem, FilePreviewRendererDefinition } from '../../types/index.js';
+import type { FilePreviewContainer, FilePreviewDetail, FilePreviewItem, FilePreviewRendererDefinition, FilePreviewRendererError } from '../../types/index.js';
 type __VLS_Props = {
     item: FilePreviewItem;
     display: FilePreviewItem;
@@ -12,20 +12,22 @@ type __VLS_Props = {
         next: boolean;
     } | null;
 };
-declare var __VLS_64: {};
+declare var __VLS_57: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_64) => any;
+    default?: (props: typeof __VLS_57) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     previous: () => any;
     ready: (details: readonly FilePreviewDetail[]) => any;
     download: () => any;
     next: () => any;
+    failure: (error: FilePreviewRendererError | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onPrevious?: (() => any) | undefined;
     onReady?: ((details: readonly FilePreviewDetail[]) => any) | undefined;
     onDownload?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
+    onFailure?: ((error: FilePreviewRendererError | null) => 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;

package/dist/runtime/file-preview/components/shell/file-preview-stage.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   kindLabel: { type: String, required: true },
   arrows: { type: [Object, null], required: true }
 });
-const emit = defineEmits(["ready", "previous", "next", "download"]);
+const emit = defineEmits(["ready", "failure", "previous", "next", "download"]);
 const { t } = useUiToolsLocale();
 const failure = shallowRef(null);
 const ready = ref(false);
@@ -28,6 +28,7 @@ const downloadable = computed(() => props.item.file.download !== false);
 const extension = computed(() => (props.display.extension ?? props.kindLabel).toUpperCase());
 function restart() {
   failure.value = null;
+  emit("failure", null);
   ready.value = false;
   slow.value = false;
   delay.start();
@@ -41,6 +42,7 @@ function handleReady(details) {
 function handleError(error) {
   failure.value = error;
   delay.stop();
+  emit("failure", error);
 }
 function retry() {
   attempt.value += 1;
@@ -101,14 +103,6 @@ function retry() {
           data-file-preview-retry=""
           @click="retry"
         />
-        <UButton
-          v-if="downloadable"
-          icon="i-lucide-download"
-          :label="t('filePreview.download')"
-          color="neutral"
-          variant="outline"
-          @click="emit('download')"
-        />
       </FilePreviewMessage>
 
       <FilePreviewMessage
@@ -121,7 +115,7 @@ function retry() {
         :detail="failure.message"
       >
         <UButton
-          v-if="downloadable"
+          v-if="downloadable && failure.reason !== 'source'"
           icon="i-lucide-download"
           :label="t('filePreview.download')"
           @click="emit('download')"

package/dist/runtime/file-preview/components/shell/file-preview-stage.vue.d.ts

@@ -1,5 +1,5 @@
 import type { useFilePreviewSource } from '../../composables/use-file-preview-source.js';
-import type { FilePreviewContainer, FilePreviewDetail, FilePreviewItem, FilePreviewRendererDefinition } from '../../types/index.js';
+import type { FilePreviewContainer, FilePreviewDetail, FilePreviewItem, FilePreviewRendererDefinition, FilePreviewRendererError } from '../../types/index.js';
 type __VLS_Props = {
     item: FilePreviewItem;
     display: FilePreviewItem;
@@ -12,20 +12,22 @@ type __VLS_Props = {
         next: boolean;
     } | null;
 };
-declare var __VLS_64: {};
+declare var __VLS_57: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_64) => any;
+    default?: (props: typeof __VLS_57) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     previous: () => any;
     ready: (details: readonly FilePreviewDetail[]) => any;
     download: () => any;
     next: () => any;
+    failure: (error: FilePreviewRendererError | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onPrevious?: (() => any) | undefined;
     onReady?: ((details: readonly FilePreviewDetail[]) => any) | undefined;
     onDownload?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
+    onFailure?: ((error: FilePreviewRendererError | null) => 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;

package/dist/runtime/form/components/root/form.vue

@@ -49,6 +49,7 @@ const {
   onCancelled: (value) => emit("cancel", value),
   onSubmitted: (value, result) => emit("submit", value, result),
   schema: () => props.schema,
+  shell: () => props.shell,
   syncInput: () => props.syncInput,
   ui: () => props.ui,
   validate: () => props.validate

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

@@ -198,7 +198,9 @@ export function useFieldOptions(params) {
   const createLabel = computed(
     () => resolveFormText(optionConfig.value?.create?.label)
   );
-  const disableOnLoading = computed(() => optionConfig.value?.disableOnLoading !== false);
+  const disableOnLoading = computed(
+    () => !remoteConfig.value && optionConfig.value?.disableOnLoading !== false
+  );
   const selectCreatedOption = computed(
     () => optionConfig.value?.create?.selectOnCreation !== false
   );

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

@@ -55,7 +55,7 @@ export function useFormOverlayController(instance) {
       open.value = true;
       return;
     }
-    requestCancel();
+    void runtime.close();
   }
   function requestComplete(formData, submitData) {
     closeWithResolution({ formData, submitData, type: "complete" });

package/dist/runtime/form/composables/use-form-root.d.ts

@@ -1,4 +1,4 @@
-import type { FormObject, FormRendererController, FormRuntime, FormSubmitHandlerResult, FormUiConfig, FormValidationMode, FormValue } from '../types/index.js';
+import type { FormObject, FormRenderShell, FormRendererController, FormRuntime, FormSubmitHandlerResult, FormUiConfig, FormValidationMode, FormValue } from '../types/index.js';
 export interface UseFormRootParams {
     /** Controller from `useForm`. Its schema, input, and policies win over the direct ones. */
     form: () => FormRendererController | undefined;
@@ -9,6 +9,8 @@ export interface UseFormRootParams {
     syncInput: () => boolean | readonly string[] | undefined;
     validate: () => FormValidationMode | undefined;
     ui: () => FormUiConfig | undefined;
+    /** Shell the form renders in. Overlay shells ask before closing a modified form by default. */
+    shell?: () => FormRenderShell | undefined;
     onSubmitted: (value: FormObject, result: FormSubmitHandlerResult<FormValue>) => void;
     onCancelled: (value: FormObject) => void;
 }

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

@@ -1,5 +1,5 @@
 import { useAppConfig } from "nuxt/app";
-import { computed, nextTick, onBeforeUnmount, onMounted, watch } from "vue";
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useUiToolsLocale } from "../../i18n/use-locale.js";
 import {
@@ -19,6 +19,7 @@ import { provideFormRuntime, useFormRuntime } from "./use-form-runtime.js";
 import { provideFormUi } from "./use-form-ui.js";
 export function useFormRoot(params) {
   const router = useRouter();
+  const appContext = getCurrentInstance()?.appContext;
   const { t } = useUiToolsLocale();
   const appConfig = useAppConfig();
   const schema = computed(() => params.form()?.schema.value ?? params.schema() ?? {});
@@ -41,6 +42,7 @@ export function useFormRoot(params) {
   onBeforeUnmount(() => runtime.bindCancel(null));
   const confirm = useFormConfirm();
   let leaveConfirmed = false;
+  let pendingLeave = null;
   watch(
     () => runtime.dirtyPaths.value,
     () => {
@@ -122,30 +124,51 @@ export function useFormRoot(params) {
   }
   async function submit() {
     const controller = params.form();
-    const result = controller ? await controller.submitHandler() : await runtime.submitHandler();
-    if (result.success) {
-      params.onSubmitted(runtime.output.value, result);
+    try {
+      const result = controller ? await controller.submitHandler() : await runtime.submitHandler();
+      if (result.success) params.onSubmitted(runtime.output.value, result);
+    } catch (error) {
+      reportSubmitError(error);
     }
   }
+  function reportSubmitError(error) {
+    const handler = appContext?.config.errorHandler;
+    if (handler) handler(error, null, "nuxt-ui-tools form submit");
+    else
+      queueMicrotask(() => {
+        throw error;
+      });
+  }
   async function cancel() {
-    if (!leaveConfirmed && shouldConfirmDirtyNavigation() && !await confirmLeave()) {
+    if (!leaveConfirmed && shouldConfirmDirtyClose() && !await confirmLeave()) {
       return;
     }
     params.onCancelled(runtime.output.value);
   }
-  async function confirmLeave() {
-    leaveConfirmed = await confirm({
-      kind: "unsaved-changes",
-      message: getDirtyNavigationMessage()
-    });
-    return leaveConfirmed;
+  function confirmLeave() {
+    pendingLeave ??= askLeave();
+    return pendingLeave;
   }
-  function shouldConfirmDirtyNavigation() {
-    if (!runtime.isDirty.value) {
-      return false;
+  async function askLeave() {
+    try {
+      leaveConfirmed = await confirm({
+        kind: "unsaved-changes",
+        message: getDirtyNavigationMessage()
+      });
+      return leaveConfirmed;
+    } finally {
+      pendingLeave = null;
     }
+  }
+  function shouldConfirmDirtyNavigation() {
+    return confirmsDirtyChanges(getSchemaDirtyNavigation(schema.value));
+  }
+  function shouldConfirmDirtyClose() {
     const config = getSchemaDirtyNavigation(schema.value);
-    if (!config) {
+    return confirmsDirtyChanges(isUndefined(config) ? isOverlayShell(params.shell?.()) : config);
+  }
+  function confirmsDirtyChanges(config) {
+    if (!runtime.isDirty.value || !config) {
       return false;
     }
     if (!isRecord(config)) {
@@ -186,6 +209,9 @@ export function useFormRoot(params) {
     validationMode
   };
 }
+function isOverlayShell(shell) {
+  return shell === "modal" || shell === "drawer" || shell === "fullscreen";
+}
 function isSameDocument(to, from) {
   return to.fullPath.split("#")[0] === from.fullPath.split("#")[0];
 }

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

@@ -1,5 +1,6 @@
 import { computed, inject, nextTick, provide, ref, shallowRef, watch } from "vue";
 import { useUiToolsLocale } from "../../i18n/use-locale.js";
+import { dateFamilyCalendarType, formatDateFamilyBound } from "../fields/date-family/utils.js";
 import { createPublicFormApi } from "../utils/api.js";
 import { resolveFieldDependencies } from "../utils/dependencies.js";
 import { resolveFormLayoutConfig } from "../utils/layout.js";
@@ -45,7 +46,7 @@ export function useFormRuntime(params) {
   const navigationActionPending = ref(null);
   const effects = createEffectLifecycle();
   const cancelHandler = shallowRef(null);
-  const { t } = useUiToolsLocale();
+  const { code, t } = useUiToolsLocale();
   setContext(getSchemaContext(params.schema.value));
   function createFormNamespace(path, read) {
     const parentPath = path.slice(0, -1);
@@ -66,7 +67,7 @@ export function useFormRuntime(params) {
       state: () => read.state(),
       submit: () => runtime.submit(),
       validate: () => runtime.validate(),
-      close: () => cancelHandler.value?.() ?? Promise.resolve()
+      close: () => runtime.close()
     };
   }
   function createApiFactory(read) {
@@ -111,8 +112,15 @@ export function useFormRuntime(params) {
   const validation = useFormValidation({
     apiFactory,
     context,
-    getDateMaxMessage: (max) => t("form.validation.dateMax", { max }),
-    getDateMinMessage: (min) => t("form.validation.dateMin", { min }),
+    getDateMaxMessage: (max, type) => t(`form.validation.${dateFamilyCalendarType(type)}Max`, {
+      max: formatDateFamilyBound(max, code.value)
+    }),
+    getDateMinMessage: (min, type) => t(`form.validation.${dateFamilyCalendarType(type)}Min`, {
+      min: formatDateFamilyBound(min, code.value)
+    }),
+    getNumberBoundMessage: (edge, bound) => t(`form.validation.number${edge === "min" ? "Min" : "Max"}`, {
+      bound: new Intl.NumberFormat(code.value).format(bound)
+    }),
     getRequiredMessage: () => t("form.validation.required"),
     getUniqueMessage: () => t("form.fields.array.unique"),
     getValidationMode: () => params.validationMode?.value ?? true,
@@ -432,6 +440,7 @@ export function useFormRuntime(params) {
     },
     schema: params.schema,
     setError: (path, message, options) => validation.setError(pathSegments(path), message, options),
+    setInputError: (path, message) => validation.setInputError(pathSegments(path), message),
     setValue: state.setValue,
     settleEffects: settleEffectRounds,
     shouldRender: (field, path) => shouldRenderField(
@@ -454,6 +463,7 @@ export function useFormRuntime(params) {
     bindCancel: (cancel) => {
       cancelHandler.value = cancel;
     },
+    close: () => cancelHandler.value?.() ?? Promise.resolve(),
     trackEffect: effects.track,
     validate,
     validateCurrentStep

package/dist/runtime/form/composables/use-form-validation.d.ts

@@ -1,3 +1,4 @@
+import type { FormDateFamilyType } from '../fields/date-family/utils.js';
 import type { FormValue, FormErrorOptions, FormField, FormObject, FormRuntimeContext, FormValidationError, FormValidationMode } from '../types/index.js';
 import type { FormFieldApiFactory } from './use-form-state.js';
 /**
@@ -14,8 +15,9 @@ export declare function useFormValidation(params: {
     getValidationMode: () => FormValidationMode;
     getRequiredMessage?: () => string;
     getUniqueMessage?: () => string;
-    getDateMinMessage?: (bound: string) => string;
-    getDateMaxMessage?: (bound: string) => string;
+    getDateMinMessage?: (bound: string, type: FormDateFamilyType) => string;
+    getDateMaxMessage?: (bound: string, type: FormDateFamilyType) => string;
+    getNumberBoundMessage?: (edge: 'min' | 'max', bound: number) => string;
 }): {
     clearError: (path?: readonly string[]) => void;
     clearValidationState: () => void;
@@ -25,6 +27,7 @@ export declare function useFormValidation(params: {
     isTouched: (path: readonly string[]) => boolean;
     markTouched: (path: readonly string[]) => void;
     setError: (path: readonly string[], message: string, options?: FormErrorOptions) => void;
+    setInputError: (path: readonly string[], message: string | null) => void;
     validate: () => Promise<boolean>;
     validateFields: (fields: readonly FormField[], parentPath: readonly string[]) => Promise<boolean>;
     validationErrors: import("vue").ComputedRef<readonly FormValidationError[]>;