nuxt-ui-tools 1.25.0 → 1.26.0

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.0",
+  "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",