@antelopejs/dms 0.7.13 → 0.7.15

package/frontend-vue/layers/dms-ui/app/build/components/table/FiltersRow.vue

@@ -9,6 +9,7 @@ import type {
   TableColumn,
   TableFilter,
   TableSharedData,
+  TableUrlFilter,
 } from "./Table.vue";
 import TableMenuFilter from "./MenuFilter.vue";
 import { formatFilterValue } from "../../composables/table/utils/formatFilterValue";
@@ -126,6 +127,17 @@ const deleteFilter = (index: number) => {
   tableSharedData?.value?.deleteFilter(index);
 };
 
+const urlFilters = computed(() => tableSharedData?.value?.urlFilters ?? []);
+
+const urlFilterLabel = (filter: TableUrlFilter): string =>
+  (filter.label && processI18n(filter.label)) ||
+  getColumn(filter.accessorKey)?.label ||
+  filter.param;
+
+const removeUrlFilter = (filter: TableUrlFilter) => {
+  tableSharedData?.value?.emits("removeUrlFilter", filter.param);
+};
+
 // The "clear all" action: offered while something narrows the rows, named
 // after what it clears (filters, search or both).
 const clearable = computed(
@@ -171,9 +183,9 @@ const displayValue = (filter: TableFilter): string => {
 };
 
 // The whole filter in words, for a chip shrunk to an ellipsis.
-const chipTitle = (filter: TableFilter): string =>
+const chipTitle = (filter: TableFilter, label?: string): string =>
   [
-    getColumn(filter.accessorKey)?.label,
+    label ?? getColumn(filter.accessorKey)?.label,
     t(`dms.table.compare_mode.${filter.mode}`),
     displayValue(filter),
   ]
@@ -184,6 +196,31 @@ const chipTitle = (filter: TableFilter): string =>
 <template>
   <div :class="ui.root()">
     <ul :class="ui.list()">
+      <li
+        v-for="filter in urlFilters"
+        :key="`url-${filter.param}`"
+        :class="ui.item()"
+        data-dms-url-filter
+      >
+        <span
+          :class="ui.chip()"
+          :title="chipTitle(filter, urlFilterLabel(filter))"
+        >
+          <span :class="ui.label()">{{ urlFilterLabel(filter) }}</span>
+          <span :class="ui.mode()">
+            {{ t(`dms.table.compare_mode.${filter.mode}`) }}
+          </span>
+          <span :class="ui.value()">{{ displayValue(filter) }}</span>
+        </span>
+        <button
+          type="button"
+          :class="ui.remove()"
+          :aria-label="t('dms.button.delete')"
+          @click="removeUrlFilter(filter)"
+        >
+          <UIcon :name="appConfig.ui.icons.close" />
+        </button>
+      </li>
       <li
         v-for="(filter, index) in filters"
         :key="`${filter.accessorKey}-${index}`"

package/frontend-vue/layers/dms-ui/app/build/components/table/Table.vue

@@ -247,6 +247,11 @@ export interface TableProps<T> {
    * says no row matches rather than that there are none yet.
    */
   hiddenFiltersApply?: boolean;
+  /**
+   * The page URL's filters declared `visible`: drawn as chips of the filters
+   * row, each removable (`removeUrlFilter`).
+   */
+  urlFilters?: TableUrlFilter[];
 
   data?: T[] | null;
   columns?: TableColumn<T>[];
@@ -307,6 +312,7 @@ export interface TableEmits<T> {
   (e: "details" | "edit", item: T): void;
   (e: "delete" | "archive" | "restore" | "export", itemIds: string[]): void;
   (e: "duplicate", itemId: string): void;
+  (e: "removeUrlFilter", param: string): void;
 }
 
 export interface TableFilter {
@@ -317,6 +323,14 @@ export interface TableFilter {
   initialValue?: unknown | unknown[];
 }
 
+/** A filter the page URL applies and shows (see `TableProps.urlFilters`). */
+export interface TableUrlFilter extends TableFilter {
+  /** The query parameter carrying it, removed with the chip. */
+  param: string;
+  /** The chip's name, before the column's label. */
+  label?: string;
+}
+
 export interface TableSharedData<T> {
   table: Table<T>;
   emits: TableEmits<T>;
@@ -343,6 +357,8 @@ export interface TableSharedData<T> {
   resetSorting: () => void;
   hasCustomColumns: ComputedRef<boolean>;
   deleteFilter: (index: number) => void;
+  /** The URL filters shown as chips (see `TableProps.urlFilters`). */
+  urlFilters: TableUrlFilter[];
   /**
    * Clears everything that narrows the rows — filter chips (quick filters
    * included) and the toolbar search — and goes back to the first page.
@@ -1183,6 +1199,7 @@ watchEffect(() => {
     resetSorting,
     hasCustomColumns,
     deleteFilter,
+    urlFilters: props.urlFilters ?? [],
     resetFilters,
     clearSearch,
     clearFilters,
@@ -1348,7 +1365,7 @@ defineShortcuts({
 
       <TableFiltersRow
         v-if="
-          filtersRowOpen &&
+          (filtersRowOpen || !!urlFilters?.length) &&
           resolvedCapabilities.filters &&
           resolvedChrome.filters
         "

package/frontend-vue/layers/dms-ui/app/build/composables/actions/useActionTargets.ts

@@ -48,10 +48,36 @@ import {
   dispatchQuickActionTarget,
   findServedQuickAction,
 } from "../../utils/dispatchQuickActionTarget";
+import {
+  hasUrlVariables,
+  resolveLinkVariables,
+} from "../../utils/urlVariables";
 
 /** Runs a confirmed action from inside its dialog (see `onConfirm`). */
 type ConfirmedRun = NonNullable<ConfirmOptions["onConfirm"]>;
 
+/**
+ * A link target's URL with the page's `{{params.X}}` / `{{query.X}}` filled
+ * (a query pair without a value left out), then the row's `{field}`: a row
+ * action keeps the page's context (`?website={{query.website}}`) as a page
+ * header button does. Read when the link is followed, so it carries the URL
+ * as it is then.
+ */
+function linkTargetUrl(url: string, rowData?: Data): string {
+  const withPageValues = hasUrlVariables(url)
+    ? resolveLinkVariables(url, currentPageUrlValues())
+    : url;
+  return rowData ? interpolateUrl(withPageValues, rowData) : withPageValues;
+}
+
+function currentPageUrlValues() {
+  const route = useDmsRoute();
+  return {
+    routeParams: useSiteLayout().findMatchingRoute(route.path)?.params,
+    routeQuery: route.query as Record<string, unknown>,
+  };
+}
+
 /** Where the buttons run: the requests they send, what they refresh. */
 export interface ActionTargetsConfig {
   api: ReturnType<typeof $fetch.create>;
@@ -410,16 +436,11 @@ export function useActionTargets(config: ActionTargetsConfig) {
   const targetHandlers: Record<string, TargetHandler> = {
     page: (target, _label, rowData) => {
       const pageTarget = target as ActionTarget & { type: "page" };
-      const url = rowData
-        ? interpolateUrl(pageTarget.url, rowData)
-        : pageTarget.url;
-      navigateDms(url);
+      navigateDms(linkTargetUrl(pageTarget.url, rowData));
     },
     external: (target, _label, rowData) => {
       const externalTarget = target as ActionTarget & { type: "external" };
-      const url = rowData
-        ? interpolateUrl(externalTarget.url, rowData)
-        : externalTarget.url;
+      const url = linkTargetUrl(externalTarget.url, rowData);
       if (typeof window === "undefined" || !url) return;
       if (externalTarget.newTab) {
         window.open(url, "_blank", "noopener,noreferrer");

package/frontend-vue/layers/dms-ui/app/build/composables/confirm/confirmTextMatch.ts

@@ -0,0 +1,16 @@
+/**
+ * Whether what the user typed confirms a type-to-confirm dialog: the text,
+ * trimmed, equal to `confirmText` — ignoring case when asked, in the
+ * reader's locale rules (`acme` matches `ACME`).
+ */
+export function isConfirmTextMatch(
+  typed: string,
+  confirmText: string,
+  isCaseInsensitive = false,
+): boolean {
+  const text = typed.trim();
+  if (!isCaseInsensitive) return text === confirmText;
+  return (
+    text.localeCompare(confirmText, undefined, { sensitivity: "accent" }) === 0
+  );
+}

package/frontend-vue/layers/dms-ui/app/build/composables/form/formControlErrors.ts

@@ -0,0 +1,10 @@
+import type { InjectionKey } from "vue";
+
+/** Where a form collects the errors its controls report, by field id. */
+export interface FormControlErrors {
+  report: (fieldId: string, message: string | undefined) => void;
+}
+
+export const FORM_CONTROL_ERRORS_KEY: InjectionKey<FormControlErrors> = Symbol(
+  "dms-form-control-errors",
+);

package/frontend-vue/layers/dms-ui/app/build/composables/form/numberRange.ts

@@ -0,0 +1,53 @@
+/** The bounds a number field takes. */
+export interface NumberBounds {
+  min?: number;
+  max?: number;
+}
+
+/** Whether a number field's steppers can still move its value. */
+export interface NumberStepperState {
+  incrementDisabled: boolean;
+  decrementDisabled: boolean;
+}
+
+export const BELOW_MIN_MESSAGE = "$dms.field_errors.too_small";
+export const ABOVE_MAX_MESSAGE = "$dms.field_errors.too_large";
+
+function isNumberValue(value: unknown): value is number {
+  return typeof value === "number" && !Number.isNaN(value);
+}
+
+/**
+ * The error of a value outside its bounds, for a field that keeps what was
+ * typed instead of clamping it; `undefined` when it is in range or empty.
+ */
+export function numberRangeError(
+  value: unknown,
+  bounds: NumberBounds,
+): string | undefined {
+  if (!isNumberValue(value)) return undefined;
+  if (bounds.min !== undefined && value < bounds.min) return BELOW_MIN_MESSAGE;
+  if (bounds.max !== undefined && value > bounds.max) return ABOVE_MAX_MESSAGE;
+  return undefined;
+}
+
+/**
+ * The steppers of a field that does not hand its bounds to the input: they
+ * stop at the bounds the input no longer knows of.
+ */
+export function numberStepperState(
+  value: unknown,
+  bounds: NumberBounds,
+): NumberStepperState {
+  const current = isNumberValue(value) ? value : undefined;
+  return {
+    incrementDisabled:
+      current !== undefined &&
+      bounds.max !== undefined &&
+      current >= bounds.max,
+    decrementDisabled:
+      current !== undefined &&
+      bounds.min !== undefined &&
+      current <= bounds.min,
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/form/useControlError.ts

@@ -1,34 +1,10 @@
-import { formFieldInjectionKey } from "@nuxt/ui/composables/useFormField";
-import { type InjectionKey, inject, onBeforeUnmount, ref } from "vue";
-
-/** Where a form collects the errors its controls report, by field id. */
-export interface FormControlErrors {
-  report: (fieldId: string, message: string | undefined) => void;
-}
-
-export const FORM_CONTROL_ERRORS_KEY: InjectionKey<FormControlErrors> = Symbol(
-  "dms-form-control-errors",
-);
-
 /**
- * Lets a control refuse what was typed into it (a duration or JSON it cannot
- * read): inside a form, the message becomes the field's error, which blocks
- * the submit and joins the form's summary like any other. `message` holds it
- * for a control used outside a form.
+ * Former home of `useControlError`, kept importable for the modules that
+ * reached it here.
+ *
+ * @deprecated Import `useControlError` from
+ * `#dms-ui/app/composables/form/useControlError` (or rely on its auto-import).
+ * This path is removed in the next breaking release.
  */
-export function useControlError() {
-  const field = inject(formFieldInjectionKey, undefined);
-  const errors = inject(FORM_CONTROL_ERRORS_KEY, null);
-  const message = ref<string>();
-
-  function report(next: string | undefined): void {
-    if (message.value === next) return;
-    message.value = next;
-    const name = field?.value?.name;
-    if (name) errors?.report(name, next);
-  }
-
-  onBeforeUnmount(() => report(undefined));
-
-  return { message, report };
-}
+export * from "../../../composables/form/useControlError";
+export * from "./formControlErrors";

package/frontend-vue/layers/dms-ui/app/build/composables/period/periodQuery.ts

@@ -7,6 +7,12 @@ import {
   type PeriodPreset,
   type PeriodRange,
 } from "#dms-core/app/composables/period/types";
+import type { PeriodQueryKeys } from "#dms-core/app/composables/period/periodLink";
+
+export {
+  type PeriodQueryKeys,
+  periodQueryKeys,
+} from "#dms-core/app/composables/period/periodLink";
 
 /** The range half of a selector's choice: a preset, or a custom range. */
 export interface PeriodRangeChoice {
@@ -34,16 +40,6 @@ export interface PeriodChoices {
 /** A page URL query, or a selection kept in the preferences. */
 export type PeriodQuery = Record<string, unknown>;
 
-/** The keys one selector reads and writes. */
-export interface PeriodQueryKeys {
-  period: string;
-  compare: string;
-  from: string;
-  to: string;
-  compareFrom: string;
-  compareTo: string;
-}
-
 /** A source the halves of a selection are read from, in order. */
 export interface PeriodSource {
   query: PeriodQuery;
@@ -57,31 +53,12 @@ export interface PeriodSource {
 
 const CUSTOM_PRESET: PeriodPreset = "custom";
 const CUSTOM_COMPARISON: PeriodComparison = "custom";
-const KEY_NAMES: Array<keyof PeriodQueryKeys> = [
-  "period",
-  "compare",
-  "from",
-  "to",
-  "compareFrom",
-  "compareTo",
-];
 const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
 const ISO_DATE_TIME = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
 const MONTH_OFFSET = 1;
 const DATE_PART_LENGTH = 2;
 const YEAR_PART_LENGTH = 4;
 
-/**
- * The keys of selector `id` in the page URL (`<id>.period`), or the bare keys
- * (`period`) of a selection kept on its own.
- */
-export function periodQueryKeys(id?: string): PeriodQueryKeys {
-  const prefix = id ? `${id}.` : "";
-  return Object.fromEntries(
-    KEY_NAMES.map((name) => [name, `${prefix}${name}`]),
-  ) as unknown as PeriodQueryKeys;
-}
-
 function readText(query: PeriodQuery, key: string): string | undefined {
   const raw = query[key];
   const value = Array.isArray(raw) ? raw[0] : raw;

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/utils/recordLink.ts

@@ -82,12 +82,18 @@ export interface DeepLinkedRow<T> {
   row?: T;
   /** The route answered 404: the row the link names no longer exists. */
   isMissing: boolean;
+  /**
+   * The read failed for another reason (a refusal, the network, a server
+   * error): the row may still exist, the link just could not be followed.
+   */
+  isFailed?: boolean;
 }
 
 /**
  * The row a deep link names: the listed one, else the one read by id — a row
- * beyond the first page. A route answering 404 marks it missing; any other
- * failure (a refusal, the network) or no route at all finds nothing.
+ * beyond the first page. A route answering 404 marks it missing, any other
+ * failure (a refusal, the network) marks it failed, and no route at all finds
+ * nothing.
  */
 export async function resolveDeepLinkedRow<T>(
   id: string,
@@ -99,6 +105,31 @@ export async function resolveDeepLinkedRow<T>(
     const row = await source.getRow(id);
     return { row: row ?? undefined, isMissing: false };
   } catch (error: unknown) {
-    return { isMissing: readFetchNotFound(error) !== null };
+    if (readFetchNotFound(error) !== null) return { isMissing: true };
+    return { isMissing: false, isFailed: true };
   }
 }
+
+/**
+ * What a table does with the row a deep link resolved to: open it, let a side
+ * panel show its own "no longer available" state, tell the user the link led
+ * nowhere (a drawer or a modal has no such state, and a table with no route to
+ * read one row finds nothing either), or tell them the row could not be read
+ * (a refusal, the network) without claiming it is gone.
+ */
+export type DeepLinkOutcome =
+  | "open"
+  | "missingPanel"
+  | "notify"
+  | "notifyFailed";
+
+export function deepLinkOutcome(
+  found: DeepLinkedRow<unknown>,
+  action: CustomRowAction,
+): DeepLinkOutcome {
+  if (found.row) return "open";
+  if (found.isFailed) return "notifyFailed";
+  if (found.isMissing && action.target.type === "sidePanel")
+    return "missingPanel";
+  return "notify";
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/utils/urlFilters.ts

@@ -0,0 +1,29 @@
+import type { TableUrlFilter } from "../../../components/table/Table.vue";
+import type { QueryParamFilters } from "../../../../composables/table-view/types/config";
+
+const DEFAULT_FILTER_MODE = "is";
+
+/** The `queryParamFilters` declared `visible` that the URL applies now. */
+export function visibleUrlFilters(
+  filters: QueryParamFilters | undefined,
+  query: Record<string, unknown>,
+): TableUrlFilter[] {
+  return Object.entries(filters ?? {})
+    .filter(([param, config]) => config.visible && query[param] !== undefined)
+    .map(([param, config]) => ({
+      param,
+      label: config.label,
+      accessorKey: config.field,
+      mode: config.mode || DEFAULT_FILTER_MODE,
+      value: query[param],
+    }));
+}
+
+/** The URL query without `param`, for a chip the user removed. */
+export function withoutQueryParam<Query extends Record<string, unknown>>(
+  query: Query,
+  param: string,
+): Query {
+  const { [param]: _removed, ...rest } = query;
+  return rest as Query;
+}

package/frontend-vue/layers/dms-ui/app/build/utils/urlVariables.ts

@@ -120,9 +120,12 @@ export function resolveTextVariables(
   return hasUrlVariables(resolved) ? undefined : resolved;
 }
 
-// A route token left without a value: `{{params.id}}`, `{{query.workspace}}`.
-const UNRESOLVED_ROUTE_TOKEN = /\{\{(?:params|query)\.\w+(?::\d+)?\}\}/g;
-const UNRESOLVED_ROUTE_VALUE = /^\{\{(?:params|query)\.\w+(?::\d+)?\}\}$/;
+// A route token left without a value: `{{params.id}}`, `{{query.workspace}}`,
+// `{{query.sales.period}}` (a query key may carry dots and dashes, as above).
+const UNRESOLVED_ROUTE_TOKEN =
+  /\{\{(?:params\.\w+(?::\d+)?|query\.[\w.-]+)\}\}/g;
+const UNRESOLVED_ROUTE_VALUE =
+  /^\{\{(?:params\.\w+(?::\d+)?|query\.[\w.-]+)\}\}$/;
 const QUERY_SEPARATOR = "?";
 const FRAGMENT_SEPARATOR = "#";
 const PAIR_SEPARATOR = "&";

package/frontend-vue/layers/dms-ui/app/components/confirm/ConfirmModal.vue

@@ -3,7 +3,7 @@ import { nextTick, useTemplateRef, watch, type FunctionalComponent } from "vue";
 import { DialogDescription, DialogTitle } from "reka-ui";
 import DmsIconWell from "../icon-well/IconWell.vue";
 import DmsModalEscHint from "../../build/components/modal/ModalEscHint.vue";
-import DmsFormRequiredLegend from "../../build/components/form/FormRequiredLegend.vue";
+import DmsFormRequiredLegend from "../form/FormRequiredLegend.vue";
 import {
   ConfirmActionError,
   type ConfirmBodyRender,
@@ -17,6 +17,7 @@ import {
   type ConfirmValues,
 } from "../../composables/confirm/types";
 import { resolveActionError } from "../../build/composables/confirm/actionError";
+import { isConfirmTextMatch } from "../../build/composables/confirm/confirmTextMatch";
 import type { ConfirmDialogField } from "#dms-core/app/types/confirm-dialog";
 import { resolveFieldErrors } from "#dms-core/app/composables/useFieldErrors";
 
@@ -46,6 +47,8 @@ interface ConfirmModalProps {
    * empty or different flags it under the field instead.
    */
   confirmText?: string;
+  /** Compares the typed text with `confirmText` ignoring case. */
+  confirmTextCaseInsensitive?: boolean;
   /**
    * Fields filled in before confirming (labels resolved); their values reach
    * `onConfirm`, and a field error it rejects with shows under its field.
@@ -92,6 +95,7 @@ const props = withDefaults(defineProps<ConfirmModalProps>(), {
   impact: () => [],
   body: undefined,
   confirmText: undefined,
+  confirmTextCaseInsensitive: false,
   fields: () => [],
   component: undefined,
   secondaryAction: undefined,
@@ -225,7 +229,13 @@ const modalContent = computed(() =>
 );
 
 const isTypedMatch = computed(
-  () => !props.confirmText || typedText.value.trim() === props.confirmText,
+  () =>
+    !props.confirmText ||
+    isConfirmTextMatch(
+      typedText.value,
+      props.confirmText,
+      props.confirmTextCaseInsensitive,
+    ),
 );
 
 function close(value: boolean) {

package/frontend-vue/layers/dms-ui/app/components/form/Form.vue

@@ -56,7 +56,7 @@ import {
   resolveSectionNav,
   sectionState,
 } from "../../build/composables/form/formSections";
-import { FORM_CONTROL_ERRORS_KEY } from "../../build/composables/form/useControlError";
+import { FORM_CONTROL_ERRORS_KEY } from "../../build/composables/form/formControlErrors";
 import { useInstantForm } from "../../build/composables/form/useInstantForm";
 import { useInstantSaveHeader } from "#dms-layout/app/composables/layout/useInstantSaveHeader";
 import DmsFormEntries from "../../build/components/form/FormEntries.vue";
@@ -66,7 +66,7 @@ import {
   type FormRecordLoad,
   trackFormRecordLoad,
 } from "../../build/composables/form/formRecordLoad";
-import DmsFormRequiredLegend from "../../build/components/form/FormRequiredLegend.vue";
+import DmsFormRequiredLegend from "./FormRequiredLegend.vue";
 import DmsFormSections from "../../build/components/form/FormSections.vue";
 
 const REALTIME_PRESENCE_FLAG = "_presence=1";

package/frontend-vue/layers/dms-ui/app/components/form/components/DatePicker.vue

@@ -14,7 +14,7 @@ import {
 } from "@internationalized/date";
 import { reactivePick } from "@vueuse/core";
 import { useFormField } from "@nuxt/ui/composables/useFormField";
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
 import {
   FIELD_TRIGGER_CLASS,
   FIELD_TRIGGER_INVALID_CLASS,

package/frontend-vue/layers/dms-ui/app/components/form/components/InputCode.vue

@@ -2,7 +2,7 @@
 import { getCurrentInstance, h, render } from "vue";
 import { useFormField } from "@nuxt/ui/composables/useFormField";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
 import { codeLanguageLabel } from "../../../build/utils/codeLanguages";
 import type {
   CodeEditor,

package/frontend-vue/layers/dms-ui/app/components/form/components/InputNumber.vue

@@ -4,9 +4,14 @@ import type {
   InputNumberEmits,
   InputNumberSlots,
 } from "@nuxt/ui/components/InputNumber.vue";
-import { computed, nextTick } from "vue";
+import { computed, nextTick, watch } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
+import {
+  BELOW_MIN_MESSAGE,
+  numberRangeError,
+  numberStepperState,
+} from "../../../build/composables/form/numberRange";
 import {
   numberAdjustment,
   parseTypedNumber,
@@ -18,6 +23,11 @@ defineOptions({ inheritAttrs: false });
 interface InputNumberFieldProps extends InputNumberProps {
   /** Unit after the field ("days"): an i18n key with `$`, or a literal. */
   suffix?: string;
+  /**
+   * `false` keeps a value typed outside `min` / `max` as typed and reports
+   * it as the field's error, instead of clamping it into range on blur.
+   */
+  clamp?: boolean;
 }
 
 interface InputNumberAdjustEmits {
@@ -30,14 +40,29 @@ interface InputNumberAdjustEmits {
 
 type InputNumberFieldEmits = InputNumberEmits & InputNumberAdjustEmits;
 
-const props = defineProps<InputNumberFieldProps>();
+const props = withDefaults(defineProps<InputNumberFieldProps>(), {
+  clamp: true,
+});
 const emits = defineEmits<InputNumberFieldEmits>();
 defineSlots<InputNumberSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+const bounds = computed(() => ({ min: props.min, max: props.max }));
+// Unclamped, the input is not told the bounds (it would clamp to them on
+// blur): its steppers stop there instead, and the range is checked here.
 const inputProps = computed(() => {
-  const { suffix: _suffix, onAdjust: _onAdjust, ...rest } = forwarded.value;
-  return rest;
+  const {
+    suffix: _suffix,
+    clamp: _clamp,
+    onAdjust: _onAdjust,
+    ...rest
+  } = forwarded.value;
+  if (props.clamp) return rest;
+  const { min: _min, max: _max, ...unbounded } = rest;
+  return {
+    ...unbounded,
+    ...numberStepperState(props.modelValue, bounds.value),
+  };
 });
 const { processI18n } = useTranslation();
 const { locale } = useI18n();
@@ -48,16 +73,25 @@ const DEFAULT_ORIENTATION = "vertical";
 // A minus typed or pasted where no negative number is allowed is refused
 // by the field before it shows: it says why, rather than leaving an emptied
 // field to read as never filled.
-const BELOW_MIN = "$dms.field_errors.too_small";
 const { report } = useControlError();
 
 function onIncomingText(event: InputEvent): void {
+  if (!props.clamp) return;
   const text = event.data ?? event.dataTransfer?.getData("text/plain") ?? "";
   if (!text) return;
   const refusesNegative = props.min !== undefined && props.min >= 0;
-  report(refusesNegative && text.includes("-") ? BELOW_MIN : undefined);
+  report(refusesNegative && text.includes("-") ? BELOW_MIN_MESSAGE : undefined);
 }
 
+watch(
+  () =>
+    props.clamp ? undefined : numberRangeError(props.modelValue, bounds.value),
+  (message) => {
+    if (!props.clamp) report(message);
+  },
+  { immediate: true },
+);
+
 // What was typed since the field last settled, and the value it settled on.
 let typedText: string | null = null;
 let settledValue: number | null | undefined;
@@ -87,7 +121,12 @@ async function settle(event: Event): Promise<void> {
   await nextTick();
   const typed = parseTypedNumber(text, props.locale ?? locale.value);
   const kept = settledValue === undefined ? props.modelValue : settledValue;
-  const adjustment = numberAdjustment(typed, kept, props);
+  const adjustment = numberAdjustment(
+    typed,
+    kept,
+    // Unclamped, only the step changes what was typed.
+    props.clamp ? bounds.value : {},
+  );
   if (!adjustment) return;
   emits("adjust", adjustment);
   redraw(input);