@antelopejs/dms 0.7.4 → 0.7.6

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

@@ -6,12 +6,17 @@ import CardGridSkeleton from "./CardGridSkeleton.vue";
 import type { TableViewColumn } from "../../../composables/table-view/types/column";
 import type {
   TableViewCardConfig,
+  TableViewCardReorder,
   TableViewDisplayContext,
 } from "../../../composables/table-view/types/display";
 import {
   buildCardProps,
   cardFieldColumns,
 } from "../../composables/table-view/utils/card";
+import {
+  REORDER_HANDLE_CLASS,
+  useReorderHandles,
+} from "../../composables/table-view/useReorderHandles";
 
 interface CardsDisplayProps {
   context: TableViewDisplayContext<T>;
@@ -85,6 +90,22 @@ const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
 };
 
 const openItem = (item: T) => props.context.actions.open(item);
+
+// A hand-ordered table (backend `reorder`): each card carries a move handle,
+// and is where another card dragged by its handle drops.
+const { draggedIndex, handleFor, drop, allowDrop } = useReorderHandles({
+  reorder: () => props.context.reorder,
+  count: () => props.context.items.length,
+});
+
+const cardReorder = (index: number): TableViewCardReorder | undefined =>
+  props.context.reorder
+    ? {
+        enabled: props.context.reorder.enabled,
+        dragging: draggedIndex.value === index,
+        handle: handleFor(index),
+      }
+    : undefined;
 </script>
 
 <template>
@@ -107,30 +128,49 @@ const openItem = (item: T) => props.context.actions.open(item);
       class="grid grid-cols-[repeat(auto-fill,minmax(min(230px,100%),1fr))] gap-3 px-[18px] pt-4 pb-[18px]"
     >
       <template v-if="cardComponent">
-        <component
-          :is="cardComponent"
-          v-for="item in props.context.items"
+        <!-- A wrapper out of the grid's layout, catching the drop on the
+             card whatever its root element. -->
+        <div
+          v-for="(item, index) in props.context.items"
           :key="rowId(item)"
-          v-bind="{
-            ...(card?.component?.options ?? {}),
-            ...buildCardProps(item, props.context),
-          }"
-        />
+          class="contents"
+          @dragover="allowDrop"
+          @drop="drop(index)"
+        >
+          <component
+            :is="cardComponent"
+            v-bind="{
+              ...(card?.component?.options ?? {}),
+              ...buildCardProps(item, props.context),
+              reorder: cardReorder(index),
+            }"
+          />
+        </div>
       </template>
       <template v-else>
         <article
-          v-for="item in props.context.items"
+          v-for="(item, index) in props.context.items"
           :key="rowId(item)"
           class="group border-default hover:border-primary/35 @container cursor-pointer rounded-[10px] border bg-(--ui-bg) p-3.5 text-[12.5px] transition-colors focus-visible:outline-2 focus-visible:outline-(--dms-accent-line)"
           :class="{
             'border-primary ring-primary ring-1':
               props.context.selection.isSelected(rowId(item)),
+            'opacity-50': draggedIndex === index,
           }"
           tabindex="0"
           @click="openItem(item)"
           @keydown.enter.self="openItem(item)"
+          @dragover="allowDrop"
+          @drop="drop(index)"
         >
           <header class="flex items-center gap-2.5">
+            <button
+              v-if="props.context.reorder"
+              v-bind="handleFor(index)"
+              :class="['-ms-1.5', REORDER_HANDLE_CLASS]"
+            >
+              <UIcon name="i-ph-dots-six-vertical" />
+            </button>
             <span
               class="bg-accented text-default grid size-7 shrink-0 place-items-center rounded-[7px] font-mono text-[10.5px] font-bold"
             >

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

@@ -96,6 +96,7 @@ const FieldValue = (fieldProps: { item: KeyValueItem }) =>
     aria-busy="true"
   >
     <USkeleton
+      :aria-label="t('dms.a11y.loading')"
       v-for="line in SKELETON_LINE_COUNT"
       :key="line"
       class="h-4 w-full max-w-md"

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/registerDefaults.ts

@@ -386,6 +386,8 @@ interface IdentityBadgeOption {
 interface IdentityOptions {
   avatarField?: string;
   icon?: string;
+  /** Row field holding the tile's icon; `icon` when it is empty. */
+  iconField?: string;
   subtitleField?: string;
   subtitleTone?: string;
   selfField?: string;
@@ -431,7 +433,7 @@ function renderIdentity(value: unknown, options: unknown, row: Row) {
       | { key: string }
       | string
       | null,
-    icon: opts.icon,
+    icon: stringOf(readRowField(row, opts.iconField)) ?? opts.icon,
     selfId: stringOf(readRowField(row, opts.selfField)),
     selfLabel: opts.selfLabel ? processI18n(opts.selfLabel) : undefined,
     badges,

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

@@ -51,8 +51,9 @@ export interface SaveBarState {
   /** The submit shows but waits for a change. */
   isSubmitHeld: boolean;
   /**
-   * Nothing to offer: the bar keeps its place, invisible, so its showing up
-   * never moves the content around it.
+   * Nothing to offer: the bar hides. The floating bar takes no space then
+   * (it overlays the form), a band keeps its place; either way its showing
+   * up never moves the content above it.
    */
   isHidden: boolean;
 }

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

@@ -21,6 +21,31 @@ export interface FormSectionsLayout {
   sections: FormSectionLayout[];
 }
 
+/** A run of the side navigation's entries under one heading, or none. */
+export interface FormSectionNavGroup {
+  label?: string;
+  sections: FormSectionLayout[];
+}
+
+/**
+ * The side navigation's entries, in order, cut wherever the heading changes:
+ * consecutive sections naming the same `navGroup` share one heading.
+ */
+export function groupSectionsForNav(
+  sections: readonly FormSectionLayout[],
+): FormSectionNavGroup[] {
+  const groups: FormSectionNavGroup[] = [];
+  for (const section of sections) {
+    const current = groups.at(-1);
+    if (current && current.label === section.navGroup) {
+      current.sections.push(section);
+    } else {
+      groups.push({ label: section.navGroup, sections: [section] });
+    }
+  }
+  return groups;
+}
+
 /** An error of the form, as UForm lists them: the name it went under. */
 export interface FormErrorRef {
   name?: string;

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

@@ -0,0 +1,93 @@
+import { nextTick, ref } from "vue";
+import type {
+  TableViewDisplayReorder,
+  TableViewReorderHandle,
+} from "../../../composables/table-view/types/display";
+
+// One place back or forward: a row of the grid steps up and down, a card of
+// the cards grid also left and right.
+const STEP_BY_KEY: Record<string, number> = {
+  ArrowUp: -1,
+  ArrowLeft: -1,
+  ArrowDown: 1,
+  ArrowRight: 1,
+};
+
+const DRAG_EFFECT = "move";
+
+/** The look of a move handle, on a grid row and on a card. */
+export const REORDER_HANDLE_CLASS =
+  "inline-flex size-6 shrink-0 cursor-grab items-center justify-center rounded text-dimmed hover:text-highlighted focus-visible:outline-2 focus-visible:outline-(--dms-accent-line) disabled:cursor-not-allowed disabled:opacity-40 [&>svg]:size-4";
+
+export interface ReorderHandlesOptions {
+  reorder: () => TableViewDisplayReorder | undefined;
+  /** How many rows the display draws: a step past either end does nothing. */
+  count: () => number;
+}
+
+/**
+ * The move handles of a hand-ordered display, the grid's and the cards'
+ * alike: the row dragged by its handle is dropped on another row, and the
+ * arrow keys on a handle move its row by one, keeping the focus on it.
+ */
+export function useReorderHandles(options: ReorderHandlesOptions) {
+  const { t } = useI18n();
+  const draggedIndex = ref<number | undefined>();
+
+  const isEnabled = () => !!options.reorder()?.enabled;
+
+  const drop = (index: number) => {
+    const from = draggedIndex.value;
+    draggedIndex.value = undefined;
+    if (from !== undefined && isEnabled()) options.reorder()!.move(from, index);
+  };
+
+  const allowDrop = (event: DragEvent) => {
+    if (isEnabled()) event.preventDefault();
+  };
+
+  const step = (index: number, delta: number) => {
+    const target = index + delta;
+    if (!isEnabled() || target < 0 || target >= options.count()) return false;
+    options.reorder()!.move(index, target);
+    return true;
+  };
+
+  const startDrag = (index: number, event: DragEvent) => {
+    draggedIndex.value = index;
+    // Firefox starts a drag only once it carries data.
+    event.dataTransfer?.setData("text/plain", String(index));
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = DRAG_EFFECT;
+  };
+
+  // The handle moves with its row (rows are keyed by id), and the browser
+  // drops the focus of an element it moves: give it back.
+  const stepByKey = (index: number, event: KeyboardEvent) => {
+    const delta = STEP_BY_KEY[event.key];
+    if (delta === undefined) return;
+    event.preventDefault();
+    const handle = event.currentTarget as HTMLElement | null;
+    if (step(index, delta)) void nextTick(() => handle?.focus());
+  };
+
+  const handleFor = (index: number): TableViewReorderHandle => {
+    const enabled = isEnabled();
+    return {
+      type: "button",
+      draggable: enabled,
+      disabled: !enabled,
+      "aria-label": t("dms.table.reorder.move"),
+      title: enabled
+        ? t("dms.table.reorder.move")
+        : t("dms.table.reorder.disabled"),
+      onClick: (event) => event.stopPropagation(),
+      onDragstart: (event) => startDrag(index, event),
+      onDragend: () => {
+        draggedIndex.value = undefined;
+      },
+      onKeydown: (event) => stepByKey(index, event),
+    };
+  };
+
+  return { draggedIndex, handleFor, drop, allowDrop };
+}

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

@@ -1,10 +1,10 @@
 import { get } from "@nuxt/ui/runtime/utils/index.js";
 import type { ComputedRef, Ref } from "vue";
 import type {
+  TableViewDisplayReorder,
   TableViewListResponse,
   TableViewReorderConfig,
 } from "../../../composables/table-view/types";
-import type { TableReorder } from "../../components/table/Table.vue";
 import { moveRow, reorderEdits } from "./utils/reorder";
 
 export interface TableReorderOptions<T> {
@@ -18,8 +18,8 @@ export interface TableReorderOptions<T> {
   canEdit: ComputedRef<boolean>;
   /** A search, a filter or a tab narrows the rows. */
   isNarrowed: ComputedRef<boolean>;
-  /** The grid is the display shown. */
-  isGrid: ComputedRef<boolean>;
+  /** The display shown draws the rows in their order: the grid, the cards. */
+  isOrderedDisplay: ComputedRef<boolean>;
   /** Lists the rows again, after a move failed. */
   refresh: () => Promise<void> | void;
   onError: (error: unknown) => void;
@@ -28,8 +28,9 @@ export interface TableReorderOptions<T> {
 /**
  * Rows ordered by hand: a move updates the page at once and saves, by a
  * partial edit, only the rows whose position changed. Moving is off while
- * the rows are narrowed (the handle says how to turn it back on); outside
- * the grid, or for a caller who may not edit, there is no handle at all.
+ * the rows are narrowed (the handle says how to turn it back on); on a
+ * display that does not draw the rows in their order (the board, the
+ * groups), or for a caller who may not edit, there is no handle at all.
  */
 export function useTableReorder<T>(options: TableReorderOptions<T>) {
   const { reorder, data, rowIdKey } = options;
@@ -66,8 +67,8 @@ export function useTableReorder<T>(options: TableReorderOptions<T>) {
     }
   };
 
-  const state = computed<TableReorder | undefined>(() => {
-    if (!reorder || !options.isGrid.value || !options.canEdit.value) {
+  const state = computed<TableViewDisplayReorder | undefined>(() => {
+    if (!reorder || !options.isOrderedDisplay.value || !options.canEdit.value) {
       return undefined;
     }
     return { enabled: !options.isNarrowed.value, move };

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

@@ -652,6 +652,25 @@ export const useTableRowActions = <T extends Data>(
     };
   };
 
+  const findShownRow = (id: string | undefined): Data | undefined =>
+    config.rowNavigation
+      ?.rows()
+      .find(
+        (row) =>
+          String(getItemId(row, config.rowIdKey ?? DEFAULT_ROW_ID_KEY)) === id,
+      );
+
+  /**
+   * What a fixed dialog words: the rows' count, and for one row shown in the
+   * table its own fields too (`{name}`). The count wins a clash, it is what
+   * every bulk dialog may name.
+   */
+  const confirmRowFields = (ids: string[]): Data => {
+    const count = { count: ids.length };
+    const row = ids.length === 1 ? findShownRow(ids[0]) : undefined;
+    return row ? { ...row, ...count } : count;
+  };
+
   /** Asks the declared confirmation of a bulk action, running it inside. */
   const askDeclaredBulkConfirm = (
     declared: ActionConfirm,
@@ -664,8 +683,7 @@ export const useTableRowActions = <T extends Data>(
         id: ids[0],
         [config.rowIdKey ?? DEFAULT_ROW_ID_KEY]: ids[0],
       },
-      // A fixed dialog names the rows it reaches.
-      row: { count: ids.length },
+      row: confirmRowFields(ids),
       fallback,
       run,
     });

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

@@ -0,0 +1,8 @@
+/**
+ * The counter a text field shows under `showCount`: the characters typed,
+ * out of `maxLength` when the field has one ("4 / 60").
+ */
+export function characterCountText(value: unknown, maxLength?: number): string {
+  const count = typeof value === "string" ? [...value].length : 0;
+  return maxLength === undefined ? String(count) : `${count} / ${maxLength}`;
+}

package/frontend-vue/layers/dms-ui/app/components/activity-feed/ActivityFeed.vue

@@ -213,7 +213,10 @@ const wrapperProps = computed(() =>
             v-if="props.groupByDay"
             class="flex items-center gap-2.5 px-[18px] pt-3.5 pb-1.5 after:h-px after:flex-1 after:bg-(--ui-border-muted)"
           >
-            <USkeleton class="my-[1.5px] h-2.5 w-24" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="my-[1.5px] h-2.5 w-24"
+            />
           </div>
           <div class="divide-y divide-(--ui-border-muted)">
             <DmsRowSkeleton

package/frontend-vue/layers/dms-ui/app/components/blocks/CodeBlock.vue

@@ -67,6 +67,8 @@ const showSkeleton = computed(() => isLoading.value && !data.value);
 const hasError = computed(
   () => !isLoading.value && !data.value && Boolean(error.value),
 );
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -77,6 +79,7 @@ const hasError = computed(
     aria-busy="true"
   >
     <USkeleton
+      :aria-label="t('dms.a11y.loading')"
       v-for="width in SKELETON_LINE_WIDTHS"
       :key="width"
       class="h-3"

package/frontend-vue/layers/dms-ui/app/components/blocks/NavCardGridBlock.vue

@@ -146,6 +146,8 @@ const hasStates = computed(() => cards.value.some((card) => !!card.state));
 const isLeftOut = computed(
   () => !!props.categoryId && !props.empty && cards.value.length === 0,
 );
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -180,14 +182,20 @@ const isLeftOut = computed(
           class="dms-card flex flex-col gap-2.5 p-[18px]"
         >
           <div class="flex items-center gap-3">
-            <USkeleton class="size-9 rounded-[10px]" />
-            <USkeleton class="h-3.5 w-28" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="size-9 rounded-[10px]"
+            />
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3.5 w-28" />
           </div>
           <div class="grid h-[39px] content-center gap-[7.5px]">
-            <USkeleton class="h-3 w-4/5" />
-            <USkeleton class="h-3 w-3/5" />
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-4/5" />
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-3/5" />
           </div>
-          <USkeleton class="my-[2.5px] h-3 w-28" />
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            class="my-[2.5px] h-3 w-28"
+          />
         </div>
       </template>
       <template v-else>

package/frontend-vue/layers/dms-ui/app/components/card/NavCard.vue

@@ -61,7 +61,10 @@ const attrs = useAttrs();
 const theme = tv({
   slots: {
     root: "dms-card dms-card--interactive group flex flex-col gap-3 p-[18px] text-start",
-    title: "text-highlighted min-w-0 truncate text-sm font-[650]",
+    // Two lines before the ellipsis: a title cut on its first line no longer
+    // says where the card leads, and the card already grows with its text.
+    title:
+      "text-highlighted line-clamp-2 min-w-0 text-sm font-[650] [overflow-wrap:anywhere]",
     tag: `${MONO_TAG_CLASS} bg-elevated shrink-0 text-dimmed`,
     badge: "shrink-0",
     arrow:
@@ -78,6 +81,8 @@ const passthrough = computed(() => {
   const { class: _class, ...rest } = attrs;
   return rest;
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -110,6 +115,7 @@ const passthrough = computed(() => {
     </div>
 
     <USkeleton
+      :aria-label="t('dms.a11y.loading')"
       v-if="props.statePending && !props.state"
       aria-hidden="true"
       class="mt-auto h-[18px] w-28 self-start"

package/frontend-vue/layers/dms-ui/app/components/chart/ChartCard.vue

@@ -178,7 +178,11 @@ const hasMeta = computed(
         <div
           class="text-highlighted mt-2 text-[30px] leading-[1.1] font-[650] tracking-[-0.035em] tabular-nums"
         >
-          <USkeleton v-if="isFirstLoad" class="h-[33px] w-36" />
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            v-if="isFirstLoad"
+            class="h-[33px] w-36"
+          />
           <span
             v-else
             class="transition-opacity"
@@ -193,8 +197,11 @@ const hasMeta = computed(
           class="mt-1.5 flex h-5 items-center gap-2"
           aria-hidden="true"
         >
-          <USkeleton class="h-4 w-14 rounded-full" />
-          <USkeleton class="h-3 w-20" />
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            class="h-4 w-14 rounded-full"
+          />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-20" />
         </div>
         <div
           v-else-if="hasMeta"

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

@@ -3,6 +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 {
   ConfirmActionError,
   type ConfirmBodyRender,
@@ -174,6 +175,12 @@ const headerIcon = computed(() =>
     : (props.icon ?? DEFAULT_ICONS[props.color] ?? FALLBACK_ICON),
 );
 
+// A field marked required says what its mark means, as a form does under
+// its fields.
+const hasRequiredFields = computed(() =>
+  props.fields.some((field) => field.required),
+);
+
 const hasBody = computed(
   () =>
     props.impact.length > 0 ||
@@ -398,6 +405,7 @@ function handleCancel() {
             </template>
           </template>
         </UFormField>
+        <DmsFormRequiredLegend v-if="hasRequiredFields" />
 
         <component
           :is="bodyComponent"

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

@@ -954,8 +954,9 @@ onUnmounted(async () => {
       </div>
 
       <!-- One bar for every form (see `saveBarState`): the v2 floating bar
-        on a page, the footer band of a card, a drawer or a modal. It holds
-        its place while hidden, so its showing up never moves anything. -->
+        on a page, the footer band of a card, a drawer or a modal. The
+        floating bar overlays the form and takes no space while hidden; the
+        band holds its place. Neither moves anything when it shows. -->
       <DmsSaveBar
         v-if="canSave && !isInstant && !loadFailure"
         :variant="usesSaveBar ? 'floating' : 'band'"
@@ -967,7 +968,7 @@ onUnmounted(async () => {
         :save-label="usesSaveBar ? props.submitLabel : submitButtonLabel"
         :cancellable="canCancel"
         :resettable="hasChangeableFields"
-        :class="usesSaveBar ? 'mx-3 mb-3' : surfaceClasses.foot"
+        :class="usesSaveBar ? 'mx-3' : surfaceClasses.foot"
         @discard="discardChanges"
         @cancel="cancelForm"
       />

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

@@ -402,7 +402,12 @@ function nodeClasses(node: CascaderNode, isHighlighted: boolean): string[] {
             class="w-52 space-y-2 p-2"
             aria-busy="true"
           >
-            <USkeleton v-for="i in 5" :key="i" class="h-6 w-full" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              v-for="i in 5"
+              :key="i"
+              class="h-6 w-full"
+            />
           </div>
 
           <div

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

@@ -40,7 +40,11 @@ const isVNodeValue = computed(() => isVNode(formattedValue.value));
 </script>
 
 <template>
-  <USkeleton v-if="loading" class="h-9 w-full" />
+  <USkeleton
+    :aria-label="t('dms.a11y.loading')"
+    v-if="loading"
+    class="h-9 w-full"
+  />
 
   <Component
     :is="dedicatedComponent"

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

@@ -4,16 +4,27 @@ import type {
   InputNumberEmits,
   InputNumberSlots,
 } from "@nuxt/ui/components/InputNumber.vue";
+import { computed } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
 import { useControlError } from "../../../build/composables/form/useControlError";
 
 defineOptions({ inheritAttrs: false });
 
-const props = defineProps<InputNumberProps>();
+interface InputNumberFieldProps extends InputNumberProps {
+  /** Unit after the field ("days"): an i18n key with `$`, or a literal. */
+  suffix?: string;
+}
+
+const props = defineProps<InputNumberFieldProps>();
 const emits = defineEmits<InputNumberEmits>();
 defineSlots<InputNumberSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+const inputProps = computed(() => {
+  const { suffix: _suffix, ...rest } = forwarded.value;
+  return rest;
+});
+const { processI18n } = useTranslation();
 
 // v2 number fields keep the value left-aligned with a compact caret stepper.
 const DEFAULT_ORIENTATION = "vertical";
@@ -33,12 +44,25 @@ function onIncomingText(event: InputEvent): void {
 </script>
 
 <template>
-  <div class="contents" @beforeinput.capture="onIncomingText">
+  <!-- The unit sits after the field rather than inside it, where the
+    stepper already takes the end of the box. -->
+  <div
+    :class="props.suffix ? 'flex items-center gap-2' : 'contents'"
+    @beforeinput.capture="onIncomingText"
+  >
     <UInputNumber
-      v-bind="{ ...forwarded, ...$attrs }"
+      v-bind="{ ...inputProps, ...$attrs }"
+      :class="props.suffix && 'min-w-0 flex-1'"
       :orientation="props.orientation ?? DEFAULT_ORIENTATION"
       :increment="{ color: 'neutral' }"
       :decrement="{ color: 'neutral' }"
     />
+    <span
+      v-if="props.suffix"
+      class="text-muted shrink-0 text-[13px]"
+      data-field-suffix
+    >
+      {{ processI18n(props.suffix) }}
+    </span>
   </div>
 </template>

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

@@ -4,15 +4,37 @@ import type {
   InputEmits,
   InputSlots,
 } from "@nuxt/ui/components/Input.vue";
+import { computed } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
+import { characterCountText } from "../../../build/utils/characterCount";
 
-const props = defineProps<InputProps>();
+interface InputTextProps extends InputProps {
+  /** Longest value accepted; the counter reads against it. */
+  maxLength?: number;
+  /** Shows the characters typed at the end of the field ("4 / 60"). */
+  showCount?: boolean;
+}
+
+const props = defineProps<InputTextProps>();
 const emits = defineEmits<InputEmits>();
 defineSlots<InputSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+const inputProps = computed(() => {
+  const { showCount: _showCount, ...rest } = forwarded.value;
+  return rest;
+});
+const countText = computed(() =>
+  characterCountText(props.modelValue, props.maxLength),
+);
 </script>
 
 <template>
-  <UInput v-bind="forwarded" />
+  <UInput v-bind="inputProps">
+    <template v-if="props.showCount" #trailing>
+      <span class="text-dimmed text-xs tabular-nums" data-character-count>
+        {{ countText }}
+      </span>
+    </template>
+  </UInput>
 </template>