nuxt-ui-tools 1.25.1 → 1.26.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

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

@@ -42,6 +42,7 @@ export function useFormRoot(params) {
   onBeforeUnmount(() => runtime.bindCancel(null));
   const confirm = useFormConfirm();
   let leaveConfirmed = false;
+  let pendingLeave = null;
   watch(
     () => runtime.dirtyPaths.value,
     () => {
@@ -139,24 +140,35 @@ export function useFormRoot(params) {
       });
   }
   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)) {
@@ -197,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[]>;

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

@@ -23,6 +23,7 @@ import {
 import { resolveFormBoundaryText, resolveFormText } from "../utils/text.js";
 export function useFormValidation(params) {
   const customErrors = ref([]);
+  const inputErrors = ref(/* @__PURE__ */ new Map());
   const touchedPaths = ref([]);
   const pendingPaths = ref(/* @__PURE__ */ new Map());
   const validatedMessages = ref(/* @__PURE__ */ new Map());
@@ -34,6 +35,7 @@ export function useFormValidation(params) {
       context: params.context,
       getDateMaxMessage: params.getDateMaxMessage,
       getDateMinMessage: params.getDateMinMessage,
+      getNumberBoundMessage: params.getNumberBoundMessage,
       getRequiredMessage: params.getRequiredMessage,
       getUniqueMessage: params.getUniqueMessage,
       includeAsync: true,
@@ -50,6 +52,7 @@ export function useFormValidation(params) {
       context: params.context,
       getDateMaxMessage: params.getDateMaxMessage,
       getDateMinMessage: params.getDateMinMessage,
+      getNumberBoundMessage: params.getNumberBoundMessage,
       getRequiredMessage: params.getRequiredMessage,
       getUniqueMessage: params.getUniqueMessage,
       includeAsync: false,
@@ -67,6 +70,7 @@ export function useFormValidation(params) {
       context: params.context,
       getDateMaxMessage: params.getDateMaxMessage,
       getDateMinMessage: params.getDateMinMessage,
+      getNumberBoundMessage: params.getNumberBoundMessage,
       getRequiredMessage: params.getRequiredMessage,
       getUniqueMessage: params.getUniqueMessage,
       includeAsync: true,
@@ -83,6 +87,7 @@ export function useFormValidation(params) {
       context: params.context,
       getDateMaxMessage: params.getDateMaxMessage,
       getDateMinMessage: params.getDateMinMessage,
+      getNumberBoundMessage: params.getNumberBoundMessage,
       getRequiredMessage: params.getRequiredMessage,
       getUniqueMessage: params.getUniqueMessage,
       includeAsync: false,
@@ -185,7 +190,7 @@ export function useFormValidation(params) {
       if (validationRuns.get("$form") !== run) {
         return asyncValid;
       }
-      return syncResult.valid && asyncValid && !hasBlockingErrors(paths);
+      return syncResult.valid && asyncValid && !hasBlockingErrors(paths) && !hasInputErrors(paths);
     } finally {
       removePendingPaths(pendingPaths, potentialAsyncPaths, pendingToken);
     }
@@ -236,7 +241,7 @@ export function useFormValidation(params) {
           (error) => paths.some((path) => isScopedPath(error.path, path))
         );
       }
-      return syncResult.valid && asyncValid && !hasBlockingErrors(paths);
+      return syncResult.valid && asyncValid && !hasBlockingErrors(paths) && !hasInputErrors(paths);
     } finally {
       removePendingPaths(pendingPaths, potentialAsyncPaths, pendingToken);
     }
@@ -259,6 +264,21 @@ export function useFormValidation(params) {
       { blocking: options?.blocking === true, message, path: key }
     ];
   }
+  function setInputError(path, message) {
+    const key = path.join(".");
+    if ((inputErrors.value.get(key) ?? null) === message) {
+      return;
+    }
+    const next = new Map(inputErrors.value);
+    if (message === null) next.delete(key);
+    else next.set(key, message);
+    inputErrors.value = next;
+  }
+  function hasInputErrors(paths) {
+    return [...inputErrors.value.keys()].some(
+      (key) => paths.some((path) => isScopedPath(key, path))
+    );
+  }
   function hasBlockingErrors(paths) {
     return customErrors.value.some(
       (error) => error.blocking === true && paths.some((path) => isScopedPath(error.path, path))
@@ -307,7 +327,8 @@ export function useFormValidation(params) {
     validatedMessages.value = next;
   }
   function resolveFieldErrors(path) {
-    return validatedMessages.value.get(path) ?? [];
+    const inputError = inputErrors.value.get(path);
+    return inputError ? [inputError] : validatedMessages.value.get(path) ?? [];
   }
   function markTouched(path) {
     touchPaths([path.join(".")]);
@@ -338,6 +359,7 @@ export function useFormValidation(params) {
     isTouched,
     markTouched,
     setError,
+    setInputError,
     validate,
     validateFields,
     validationErrors
@@ -488,6 +510,7 @@ function buildLeafRules(params) {
     return output;
   }
   applyDateBoundsRules(output, params);
+  applyNumberBoundsRules(output, params);
   applyPasswordRequirementRules(output, params);
   const authoredValidators = "validators" in params.field ? params.field.validators : void 0;
   let validators;
@@ -522,6 +545,29 @@ function applyPasswordRequirementRules(output, params) {
     );
   }
 }
+function applyNumberBoundsRules(output, params) {
+  if (params.field.type !== "number") {
+    return;
+  }
+  const authoredProps = Object.getOwnPropertyDescriptor(params.field, "props")?.value;
+  const resolvedProps = isFunction(authoredProps) ? authoredProps(params.callbackParams) : authoredProps;
+  if (!isObject(resolvedProps)) {
+    return;
+  }
+  const { max, min } = resolvedProps;
+  if (isNumber(min)) {
+    output.numberMin = withMessage(
+      (value) => !isNumber(value) || value >= min,
+      params.getNumberBoundMessage?.("min", min) ?? `Must be at least ${min}`
+    );
+  }
+  if (isNumber(max)) {
+    output.numberMax = withMessage(
+      (value) => !isNumber(value) || value <= max,
+      params.getNumberBoundMessage?.("max", max) ?? `Must be at most ${max}`
+    );
+  }
+}
 function isValidatorMap(value) {
   return isObject(value);
 }
@@ -779,13 +825,13 @@ function applyDateBoundsRules(output, params) {
   if (bounds.min !== void 0) {
     output.dateMin = withMessage(
       (value) => isWithinDateMin(value, bounds.min, dateField.type),
-      params.getDateMinMessage?.(bounds.minLabel ?? "") ?? `Must be on or after ${bounds.minLabel}`
+      params.getDateMinMessage?.(bounds.minLabel ?? "", dateField.type) ?? `Must be on or after ${bounds.minLabel}`
     );
   }
   if (bounds.max !== void 0) {
     output.dateMax = withMessage(
       (value) => isWithinDateMax(value, bounds.max, dateField.type),
-      params.getDateMaxMessage?.(bounds.maxLabel ?? "") ?? `Must be on or before ${bounds.maxLabel}`
+      params.getDateMaxMessage?.(bounds.maxLabel ?? "", dateField.type) ?? `Must be on or before ${bounds.maxLabel}`
     );
   }
 }

package/dist/runtime/form/fields/custom-component/component.vue

@@ -14,8 +14,7 @@ const model = computed({
   get: () => form.getValue(props.path),
   set: (value) => form.setValue(props.path, value)
 });
-const rendered = computed(() => props.field.render?.(params.value));
-const Rendered = () => rendered.value;
+const Rendered = () => props.field.render?.(params.value);
 </script>
 
 <template>
@@ -28,6 +27,6 @@ const Rendered = () => rendered.value;
       :disabled="disabled"
       @blur="handleBlur"
     />
-    <Rendered v-else-if="rendered" />
+    <Rendered v-else-if="field.render" />
   </FormFieldShell>
 </template>

package/dist/runtime/form/fields/date-family/component.vue

@@ -11,6 +11,7 @@ import { isNullish } from "../../../shared/utils/predicate";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { isNumber, isString } from "../../utils/predicate";
+import { resolveFieldText } from "../../utils/text";
 import {
   applyDateManualMask,
   calendarRangeFromCanonical,
@@ -43,6 +44,7 @@ const {
   disabled,
   handleBlur,
   interactionOwnerClass,
+  params,
   placeholder: fieldPlaceholder
 } = useFieldControl(
   () => props.field,
@@ -155,6 +157,9 @@ const minuteStep = computed(() => {
 });
 const timeStep = computed(() => ({ minute: minuteStep.value }));
 const calendarUi = computed(() => ({ heading: "min-w-0", root: "p-2" }));
+const calendarLabel = computed(
+  () => resolveFieldText(Object.getOwnPropertyDescriptor(props.field, "label")?.value, params.value) ?? t("form.fields.date.calendar")
+);
 watch(
   selectedValues,
   () => {
@@ -272,15 +277,9 @@ function commitManualInput(raw) {
     return false;
   }
   if (!isString(parsed)) {
-    if (!isWithinBounds(parsed[0]) || !isWithinBounds(parsed[1])) {
-      return false;
-    }
     setStoredRange(parsed[0], parsed[1]);
     return true;
   }
-  if (!isWithinBounds(parsed)) {
-    return false;
-  }
   setStoredPart(0, parsed);
   return true;
 }
@@ -453,6 +452,7 @@ function isCalendarRangeValue(candidate) {
               :week-numbers="fieldProps.calendar?.weekNumbers ?? false"
               :number-of-months="fieldProps.calendar?.numberOfMonths"
               :view-control="{ trailingIcon: 'i-lucide-chevron-down', class: 'font-medium' }"
+              :calendar-label="calendarLabel"
               :ui="calendarUi"
               @update:model-value="updateRangeCalendar"
             />
@@ -468,6 +468,7 @@ function isCalendarRangeValue(candidate) {
               :week-numbers="fieldProps.calendar?.weekNumbers ?? false"
               :number-of-months="fieldProps.calendar?.numberOfMonths"
               :view-control="{ trailingIcon: 'i-lucide-chevron-down', class: 'font-medium' }"
+              :calendar-label="calendarLabel"
               :ui="calendarUi"
               @update:model-value="updateSingleCalendar"
             />

package/dist/runtime/form/fields/date-family/utils.d.ts

@@ -37,4 +37,9 @@ export type FormDateSeedValue = Date | string | number | null | undefined;
 export declare function canonicalDateFromValue(value: FormDateSeedValue): string;
 export declare function canonicalDateToJsDate(value: string): Date | undefined;
 export declare function calendarSeedFromValue(value: FormDateSeedValue, type: FormDateFamilyType): string;
+/**
+ * Writes a canonical bound (`2026`, `2026-10`, `2026-10-24`, `2026-10-24T09:30`) the way the
+ * locale reads it, such as « 24 oct. 2026 » or « octobre 2026 ».
+ */
+export declare function formatDateFamilyBound(value: string, locale: string): string;
 export declare function calendarDateToJsDate(value: DateValue): Date;

package/dist/runtime/form/fields/date-family/utils.js

@@ -193,6 +193,19 @@ export function calendarSeedFromValue(value, type) {
   }
   return "";
 }
+export function formatDateFamilyBound(value, locale) {
+  const date = /^\d{4}$/u.test(value) ? void 0 : canonicalDateToJsDate(value);
+  if (!date) {
+    return value;
+  }
+  if (/^\d{4}-\d{2}$/u.test(value)) {
+    return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date);
+  }
+  return new Intl.DateTimeFormat(
+    locale,
+    value.includes("T") ? { dateStyle: "medium", timeStyle: "short" } : { dateStyle: "medium" }
+  ).format(date);
+}
 export function calendarDateToJsDate(value) {
   return value.toDate(getLocalTimeZone());
 }

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

@@ -16,7 +16,7 @@ const { code } = useUiToolsLocale();
 const { fieldProps, form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
   () => props.field,
   () => props.path,
-  { omit: ["prefix", "suffix", "format", "controls", "mono"] }
+  { omit: ["prefix", "suffix", "format", "controls", "mono", "min", "max"] }
 );
 const model = computed({
   get: () => {
@@ -25,6 +25,12 @@ const model = computed({
   },
   set: (value) => form.setValue(props.path, value ?? null)
 });
+const atMax = computed(
+  () => isNumber(model.value) && isNumber(fieldProps.value.max) && model.value >= fieldProps.value.max
+);
+const atMin = computed(
+  () => isNumber(model.value) && isNumber(fieldProps.value.min) && model.value <= fieldProps.value.min
+);
 const prefix = computed(() => resolveFormText(fieldProps.value.prefix));
 const suffix = computed(() => resolveFormText(fieldProps.value.suffix));
 const controls = computed(() => fieldProps.value.controls !== false);
@@ -76,13 +82,13 @@ const affixStyle = computed(() => ({
       :ui="controlUi"
       :placeholder="placeholder"
       :disabled="disabled"
-      :min="fieldProps.min"
-      :max="fieldProps.max"
       :step="fieldProps.step"
       :locale="code"
       :format-options="fieldProps.format"
       :increment="controls"
       :decrement="controls"
+      :increment-disabled="atMax"
+      :decrement-disabled="atMin"
       @blur="handleBlur"
     />
     <span
@@ -121,13 +127,13 @@ const affixStyle = computed(() => ({
         :ui="controlUi"
         :placeholder="placeholder"
         :disabled="disabled"
-        :min="fieldProps.min"
-        :max="fieldProps.max"
         :step="fieldProps.step"
         :locale="code"
         :format-options="fieldProps.format"
         :increment="controls"
         :decrement="controls"
+        :increment-disabled="atMax"
+        :decrement-disabled="atMin"
         @blur="handleBlur"
       />
       <span

package/dist/runtime/form/fields/phone-number/component.vue

@@ -4,7 +4,12 @@ import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
 import USelectMenu from "@nuxt/ui/components/SelectMenu.vue";
-import { getCountries, getCountryCallingCode, parsePhoneNumberFromString } from "libphonenumber-js";
+import {
+  getCountries,
+  getCountryCallingCode,
+  parsePhoneNumberFromString,
+  validatePhoneNumberLength
+} from "libphonenumber-js";
 import { computed, onMounted, ref, useId, watch } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
@@ -47,6 +52,20 @@ const processedValue = computed(() => {
   }
   return { valid: true, value: formatPhoneNumber(parsed) };
 });
+const inputError = computed(() => {
+  if (!phoneValue.value || !countryCode.value || processedValue.value.valid) {
+    return null;
+  }
+  return validatePhoneNumberLength(phoneValue.value, countryCode.value) === "TOO_SHORT" ? t("form.validation.phoneIncomplete") : t("form.validation.phoneInvalid");
+});
+watch(
+  [() => props.path, inputError],
+  ([path, message], _previous, onCleanup) => {
+    form.setInputError(path, message);
+    onCleanup(() => form.setInputError(path, null));
+  },
+  { immediate: true }
+);
 onMounted(() => {
   syncFromExternalValue(form.getValue(props.path));
   if (!countryCode.value) {

package/dist/runtime/form/types/api.d.ts

@@ -61,8 +61,8 @@ export interface FormFieldFormApi {
     submit: () => Promise<boolean>;
     /**
      * Closes the form the way its Cancel action does: asks to discard unsaved changes when the
-     * schema asks for it, then cancels (an overlay closes). Does nothing for a form rendered without
-     * a cancel handler.
+     * schema asks for it (an overlay form does by default), then cancels (an overlay closes). Does
+     * nothing for a form rendered without a cancel handler.
      */
     close: () => Promise<void>;
     /** Advances to the next step on stepped forms. */
@@ -206,6 +206,13 @@ export interface FormApi<TOutput = FormObject> {
     submit: () => Promise<void>;
     /** Resets the form and waits for dependency effects triggered by the reset. */
     reset: () => Promise<void>;
+    /**
+     * Closes the form the way its Cancel action does: asks to discard unsaved changes when the
+     * schema asks for it (an overlay form does by default), then cancels, so an overlay closes and
+     * its `createForm` promise resolves with `isCompleted: false`. Does nothing for a form rendered
+     * without a cancel handler.
+     */
+    close: () => Promise<void>;
 }
 export type FormSubmitAction = 'next' | 'previous' | 'submit' | 'reset';
 export type FormSubmitResult<TSubmitData = FormValue> = boolean | void | {

package/dist/runtime/form/types/options.d.ts

@@ -257,7 +257,10 @@ export interface FormRemoteOptionConfig<TOption, TContext = NonNullable<unknown>
     create?: FormCreateOption<TOption, TContext, TDeps, TValue>;
     /** Enables the field-level refresh affordance. */
     allowOptionsRefresh?: boolean;
-    /** Disable the field while its option source has no usable data yet. */
+    /**
+     * Ignored: remote options load once the menu opens and the menu shows the loading state, so the
+     * field and its search input stay usable while a page loads.
+     */
     disableOnLoading?: boolean;
 }
 /** Reuses one remote loader while keeping field-specific refresh and creation behavior local. */

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

@@ -80,6 +80,11 @@ export interface FormRuntime {
     validate: (options?: FormValidationOptions) => Promise<boolean>;
     validateCurrentStep: (options?: FormValidationOptions) => Promise<boolean>;
     setError: (path: string | readonly string[], message: string, options?: FormErrorOptions) => void;
+    /**
+     * Reports input a control holds but cannot store as a value, such as an incomplete phone number,
+     * or clears it with `null`. It shows like a rule error once the field is touched and blocks submit.
+     */
+    setInputError: (path: string | readonly string[], message: string | null) => void;
     clearError: (path?: string | readonly string[]) => void;
     focusRequest: Ref<FormFocusRequest | null>;
     registerFieldElement: (path: string | readonly string[], element: HTMLElement) => () => void;
@@ -94,4 +99,9 @@ export interface FormRuntime {
     goToStep: (index: number) => Promise<boolean>;
     /** Cancels the rendered form, as its Cancel action does. Set by the form root that renders it. */
     bindCancel: (cancel: (() => Promise<void>) | null) => void;
+    /**
+     * Closes the form the way its Cancel action does, asking first when it holds unsaved changes the
+     * schema protects. Resolves at once when no form root renders the runtime.
+     */
+    close: () => Promise<void>;
 }

package/dist/runtime/form/types/schema.d.ts

@@ -18,7 +18,11 @@ export interface FormControlsConfig {
     ignoreDirtyPaths?: readonly string[];
     /** Focuses the first field after mount, or a specific raw field path. */
     autoFocus?: boolean | string;
-    /** Warns before an inline dirty form is closed or navigated away from. */
+    /**
+     * Asks before a modified form is cancelled, closed, or left for another page. A form opened as a
+     * modal, drawer, or fullscreen overlay asks before closing (Escape, outside click, close button,
+     * Cancel, `api.close()`) unless this is `false`; leaving the page asks only when it is set.
+     */
     confirmNavOnDirty?: boolean | FormDirtyNavigationConfig;
     /** Keeps external input changes synchronized after the initial mount. */
     syncInput?: boolean | readonly string[];

package/dist/runtime/form/utils/api.js

@@ -2,6 +2,7 @@ import { pathSegments } from "./path.js";
 export function createPublicFormApi(runtime) {
   return {
     clearError: (path) => runtime.clearError(path ? pathSegments(path) : void 0),
+    close: runtime.close,
     focus: runtime.focusField,
     get: runtime.getValue,
     initial: runtime.getInitialValue,

package/dist/runtime/i18n/locales/en.js

@@ -269,6 +269,7 @@ export default defineUiToolsLocale({
           open: "Open color picker"
         },
         date: {
+          calendar: "Calendar",
           clear: "Clear value",
           confirm: "Confirm",
           end: "End",
@@ -355,9 +356,17 @@ export default defineUiToolsLocale({
         fallback: "Step {number}"
       },
       validation: {
-        dateMax: "The date must be on or before {max}",
-        dateMin: "The date must be on or after {min}",
-        required: "This field is required"
+        dateMax: "Date after {max}",
+        dateMin: "Date before {min}",
+        monthMax: "Month after {max}",
+        monthMin: "Month before {min}",
+        numberMax: "Maximum value: {bound}",
+        numberMin: "Minimum value: {bound}",
+        phoneIncomplete: "Incomplete phone number",
+        phoneInvalid: "Invalid phone number",
+        required: "This field is required",
+        yearMax: "Year after {max}",
+        yearMin: "Year before {min}"
       }
     },
     spreadsheet: {

package/dist/runtime/i18n/locales/fr.js

@@ -269,6 +269,7 @@ export default defineUiToolsLocale({
           open: "Ouvrir le s\xE9lecteur de couleur"
         },
         date: {
+          calendar: "Calendrier",
           clear: "Effacer la valeur",
           confirm: "Confirmer",
           end: "Fin",
@@ -355,9 +356,17 @@ export default defineUiToolsLocale({
         fallback: "\xC9tape {number}"
       },
       validation: {
-        dateMax: "La date doit \xEAtre au plus tard le {max}",
-        dateMin: "La date doit \xEAtre au plus t\xF4t le {min}",
-        required: "Ce champ est requis"
+        dateMax: "Date post\xE9rieure au {max}",
+        dateMin: "Date ant\xE9rieure au {min}",
+        monthMax: "Mois post\xE9rieur \xE0 {max}",
+        monthMin: "Mois ant\xE9rieur \xE0 {min}",
+        numberMax: "Valeur maximale : {bound}",
+        numberMin: "Valeur minimale : {bound}",
+        phoneIncomplete: "Num\xE9ro de t\xE9l\xE9phone incomplet",
+        phoneInvalid: "Num\xE9ro de t\xE9l\xE9phone invalide",
+        required: "Ce champ est requis",
+        yearMax: "Ann\xE9e post\xE9rieure \xE0 {max}",
+        yearMin: "Ann\xE9e ant\xE9rieure \xE0 {min}"
       }
     },
     spreadsheet: {

package/dist/runtime/i18n/types.d.ts

@@ -504,8 +504,22 @@ export interface UiToolsFormMessages {
     };
     validation: {
         required: string;
+        /** A date before the field's `min`: "Date before {min}". */
         dateMin: string;
+        /** A date after the field's `max`: "Date after {max}". */
         dateMax: string;
+        monthMin: string;
+        monthMax: string;
+        yearMin: string;
+        yearMax: string;
+        /** A number below the field's `min`: "Minimum value: {bound}". */
+        numberMin: string;
+        /** A number above the field's `max`: "Maximum value: {bound}". */
+        numberMax: string;
+        /** A phone number too short for its country. */
+        phoneIncomplete: string;
+        /** A phone number that is not valid for its country or allowed types. */
+        phoneInvalid: string;
     };
     fields: {
         text: {
@@ -562,6 +576,8 @@ export interface UiToolsFormMessages {
             end: string;
             clear: string;
             confirm: string;
+            /** Accessible name of the calendar when the field has no label, read before the month. */
+            calendar: string;
             tokens: {
                 day: string;
                 month: string;

package/dist/runtime/table/components/filters/tags/date-filter-tag.vue

@@ -464,6 +464,9 @@ function areSameCalendarDay(left, right) {
                 <UCalendar
                   :model-value="calendarRange"
                   :size="size"
+                  :calendar-label="
+  internals.filters.getFilterLabelText({ label: definition.label })
+"
                   range
                   :number-of-months="rangeCalendarPanels"
                   :paged-navigation="
@@ -602,6 +605,7 @@ function areSameCalendarDay(left, right) {
 "
               :model-value="localDate"
               :size="size"
+              :calendar-label="internals.filters.getFilterLabelText({ label: definition.label })"
               :fixed-weeks="filterUi.scalar.calendar.fixedWeeks"
               :ui="{
   root: mergeDataListUiClass(

package/dist/runtime/table/types/filters.d.ts

@@ -647,6 +647,23 @@ export interface TableOptionFilterDefinition<TRow extends GenericObject = Generi
          */
         remote?: TableFilterRemoteOptions<TValue, TPresentation>;
         facet?: TableFilterFacetSpec<TRow, TContext, TKey>;
+        /**
+         * Labels the values a facet lists when `options` is not set, such as provider statuses stored
+         * as `Approved` or `Security compromised`. The facet still decides which values show, with their
+         * counts; a value it returns `undefined` for shows as stored. Tags and previews of a committed
+         * value read the same label.
+         *
+         * @example
+         * ```ts
+         * source: {
+         *   facet: true,
+         *   label: (value) => ({ Approved: 'Validé', Done: 'Terminé' })[String(value)],
+         * }
+         * ```
+         */
+        label?: {
+            bivarianceHack(value: TValue): TableTextValue | undefined;
+        }['bivarianceHack'];
         sort?: 'alpha' | 'count';
     };
     editor?: TableOptionFilterEditorConfig<TPresentation>;

package/dist/runtime/table/utils/filters/options.js

@@ -21,9 +21,10 @@ export function resolveFilterOptionEntries(options) {
     return [];
   }
   const configuredOptions = options.options ?? options.definition.source?.options ?? [];
+  const facetLabel = options.definition.source?.label;
   const sourceOptions = configuredOptions.length || options.authoritative ? configuredOptions : (options.facetCounts ?? []).map((entry) => ({
     count: entry.count,
-    label: String(entry.value),
+    label: facetLabel?.(entry.value) ?? String(entry.value),
     value: entry.value
   }));
   const countByValue = new Map(

package/dist/runtime/table/utils/filters/preview/option-preview.js

@@ -1,3 +1,5 @@
+import { isBoolean, isNullish, isNumber, isString } from "../../../../shared/utils/predicate.js";
+import { getFilterLabelText } from "../common.js";
 import { resolveBooleanFilterUi, resolveOptionFilterUi } from "../ui.js";
 export function buildOptionFilterPreview(options) {
   const values = Array.isArray(options.rule.value) ? options.rule.value : [options.rule.value];
@@ -48,7 +50,8 @@ function resolveOptionPreviewLabel(options) {
     );
     return options.value ? filterUi.labels.true : filterUi.labels.false;
   }
-  return String(options.value ?? "");
+  const label = isString(options.value) || isNumber(options.value) || isBoolean(options.value) ? options.definition.source?.label?.(options.value) : void 0;
+  return isNullish(label) ? String(options.value ?? "") : getFilterLabelText({ label });
 }
 function resolveOptionPreview(options) {
   if (options.definition.kind === "boolean") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",