nuxt-ui-tools 1.25.1 → 1.27.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.27.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;