@antelopejs/dms 0.7.11 → 0.7.13

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

@@ -1,16 +1,55 @@
 <script setup lang="ts">
+import { computed } from "vue";
+import type { TableLiveHoldReason } from "../../composables/table-view/useTableLiveHold";
+import type { ConfirmTranslate } from "../../composables/confirm/confirmDialogTexts";
+import { missedRowsText, showLiveNote } from "../../composables/live/liveNotes";
+import type { PageLiveNote } from "../../../types/live";
+
 /**
- * The strip a `liveHold` table shows while its page is paused and events came
- * in: "N new · Show". Show reads the rows once; the page stays paused.
+ * The strip of a `liveHold` table: "N new · Show" once events came in while
+ * it holds, led by why it holds when it does so by itself, its page staying
+ * live ("Table on hold · search active · 3 new · Show"), and followed, while
+ * the page is paused, by the breakdown a component gave the page ("12 new
+ * requests · 2 in 5xx · Show"). Show reads the rows once; the hold stays.
  */
-defineProps<{
-  /** Events the table received since its rows were held or last shown. */
-  count: number;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /** Events the table received since its rows were held or last shown. */
+    count: number;
+    /** Why the table holds by itself, `null` while its page is paused. */
+    reason?: TableLiveHoldReason | null;
+    /** What the new rows are called, given `{count}`; "N new" without. */
+    missedLabel?: string;
+    /** The breakdown of what the paused page missed. */
+    detail?: PageLiveNote | null;
+  }>(),
+  { reason: null, missedLabel: undefined, detail: null },
+);
 
 const emit = defineEmits<{ show: [] }>();
 
 const { t } = useI18n();
+const translate = t as ConfirmTranslate;
+
+const REASON_KEYS: Record<TableLiveHoldReason, string> = {
+  rowOpen: "dms.live.held_row_open",
+  searching: "dms.live.held_searching",
+  sorted: "dms.live.held_sorted",
+  scrolled: "dms.live.held_scrolled",
+};
+
+const reasonText = computed(() =>
+  props.reason
+    ? `${t("dms.live.table_held")} · ${t(REASON_KEYS[props.reason])}`
+    : "",
+);
+
+const countText = computed(() =>
+  missedRowsText(props.count, props.missedLabel, translate),
+);
+const detailNote = computed(() =>
+  props.detail ? showLiveNote(props.detail, translate) : null,
+);
 </script>
 
 <template>
@@ -19,17 +58,30 @@ const { t } = useI18n();
     class="dms-live-hold-banner text-highlighted flex items-center gap-2.5 border-b border-(--dms-info-line) bg-(--dms-info-tint) py-[7px] ps-[18px] pe-3.5 text-[13px]"
   >
     <UIcon name="i-ph-pause-circle" class="text-info size-4 shrink-0" />
-    <span class="min-w-0">
-      {{ t("dms.live.new_rows", { count }, count) }}
+    <span v-if="reasonText" class="dms-live-hold-banner__reason min-w-0">
+      {{ reasonText }}
     </span>
-    <span aria-hidden="true" class="text-muted">·</span>
-    <UButton
-      :label="t('dms.live.show_new')"
-      color="neutral"
-      variant="link"
-      size="xs"
-      class="p-0 font-medium"
-      @click="emit('show')"
-    />
+    <template v-if="count > 0">
+      <span v-if="reasonText" aria-hidden="true" class="text-muted">·</span>
+      <span class="min-w-0">{{ countText }}</span>
+      <template v-if="detailNote">
+        <span aria-hidden="true" class="text-muted">·</span>
+        <span
+          class="dms-live-hold-banner__detail min-w-0"
+          :class="detailNote.toneClass"
+        >
+          {{ detailNote.text }}
+        </span>
+      </template>
+      <span aria-hidden="true" class="text-muted">·</span>
+      <UButton
+        :label="t('dms.live.show_new')"
+        color="neutral"
+        variant="link"
+        size="xs"
+        class="p-0 font-medium"
+        @click="emit('show')"
+      />
+    </template>
   </div>
 </template>

package/frontend-vue/layers/dms-ui/app/build/composables/chart/apexTheme.ts

@@ -63,7 +63,7 @@ export function buildLegend(
 ): Record<string, unknown> {
   return {
     show: input.showLegend ?? true,
-    position: isCircular ? "bottom" : "top",
+    position: input.legendPosition ?? (isCircular ? "bottom" : "top"),
     horizontalAlign: "right",
     fontSize: LEGEND_FONT_SIZE,
     labels: { colors: theme.muted },

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

@@ -0,0 +1,38 @@
+import type { InjectionKey } from "vue";
+import type { RegisterValidator } from "../../../composables/form/types/validation";
+
+/**
+ * What a `Form` offers the fields it draws (see `useEnclosingForm`).
+ *
+ * @internal
+ */
+export interface FormHandle {
+  /** Submits as the save button does: validation, validators, then the request. */
+  submit: () => Promise<void>;
+  registerValidator: RegisterValidator;
+  /** Brings a field of the form into view and focuses its control. */
+  revealField: (fieldId: string) => Promise<void>;
+}
+
+/** @internal */
+export const FORM_HANDLE_KEY: InjectionKey<FormHandle> = Symbol("form-handle");
+
+/**
+ * The field of `fieldIds` a URL fragment names (`#requestLogMaxBodyKb`, the
+ * id its control carries), `undefined` when it names none.
+ *
+ * @internal
+ */
+export function linkedFieldId(
+  hash: string,
+  fieldIds: readonly string[],
+): string | undefined {
+  if (!hash.startsWith("#")) return undefined;
+  let id: string;
+  try {
+    id = decodeURIComponent(hash.slice(1));
+  } catch {
+    return undefined;
+  }
+  return fieldIds.includes(id) ? id : undefined;
+}

package/frontend-vue/layers/dms-ui/app/build/composables/global/searchShortcuts.ts

@@ -1,3 +1,10 @@
+// The page search keys are public (`composables/global/searchShortcuts`):
+// re-exported for the layer's own callers.
+export {
+  buildPageSearchShortcuts,
+  PAGE_SEARCH_SHORTCUTS,
+} from "../../../composables/global/searchShortcuts";
+
 const GLOBAL_COMPONENT = "$dms.components.global";
 
 /**
@@ -6,15 +13,6 @@ const GLOBAL_COMPONENT = "$dms.components.global";
  */
 export const NAV_SEARCH_SHORTCUT = "/";
 
-/**
- * Focuses a page's own search (⌘ / on macOS, Ctrl / elsewhere), so it never
- * competes with "/" for the navigation search. `meta` is read as Ctrl off
- * macOS by `defineShortcuts`. The shifted variant is the same physical keys
- * on layouts where "/" needs Shift (AZERTY: Shift + :), which
- * `defineShortcuts` would otherwise reject as an extra modifier.
- */
-export const PAGE_SEARCH_SHORTCUTS = ["meta_/", "meta_shift_/"] as const;
-
 /**
  * The page search keys as hint chips, by `defineShortcuts` key name: print
  * them with `keyboardKeyLabel` ("⌘" "/" on macOS, "Ctrl" "/" elsewhere).
@@ -33,13 +31,6 @@ export function buildNavSearchShortcuts(
   return { [NAV_SEARCH_SHORTCUT]: focus };
 }
 
-/** `defineShortcuts` map focusing a page's own search on ⌘ / or Ctrl /. */
-export function buildPageSearchShortcuts(
-  focus: () => void,
-): Record<string, () => void> {
-  return Object.fromEntries(PAGE_SEARCH_SHORTCUTS.map((key) => [key, focus]));
-}
-
 /** "/" focuses the navigation search (listed on the shortcuts page). */
 export const GLOBAL_SLASH_METADATA: ShortcutMetadata = {
   key: [NAV_SEARCH_SHORTCUT],

package/frontend-vue/layers/dms-ui/app/build/composables/live/liveNotes.ts

@@ -0,0 +1,54 @@
+import type { PageLiveNote, PageLiveNoteTone } from "../../../types/live";
+import {
+  resolveConfirmText,
+  type ConfirmTranslate,
+} from "../confirm/confirmDialogTexts";
+
+/**
+ * How a live note is coloured: a breakdown in 5xx reads as an error.
+ *
+ * @internal
+ */
+export const LIVE_NOTE_TONE_CLASSES: Record<PageLiveNoteTone, string> = {
+  neutral: "",
+  warning: "text-warning",
+  error: "text-error",
+};
+
+/** A live note as shown, and its colour. @internal */
+export interface ShownLiveNote {
+  text: string;
+  toneClass: string;
+}
+
+/**
+ * A live note as the toggle and a held table's strip show it: its `$` key
+ * translated with its params, or its text.
+ *
+ * @internal
+ */
+export function showLiveNote(
+  note: PageLiveNote,
+  t: ConfirmTranslate,
+): ShownLiveNote {
+  return {
+    text: resolveConfirmText(note.text, note.params ?? {}, t),
+    toneClass: LIVE_NOTE_TONE_CLASSES[note.tone ?? "neutral"],
+  };
+}
+
+/**
+ * How many new rows came in: a module's own wording given `{count}`
+ * (`missedLabel`), or "N new".
+ *
+ * @internal
+ */
+export function missedRowsText(
+  count: number,
+  missedLabel: string | undefined,
+  t: ConfirmTranslate,
+): string {
+  return missedLabel
+    ? resolveConfirmText(missedLabel, { count }, t)
+    : t("dms.live.new_rows", { count }, count);
+}

package/frontend-vue/layers/dms-ui/app/build/composables/page/blockAnchors.ts

@@ -0,0 +1,50 @@
+import type { ComponentPublicInstance, VNode } from "vue";
+
+// The blocks a page draws, by their anchor: the key path `RecursiveComponent`
+// renders them under (`summary`, `tabs.statistics`). Registered from a
+// template ref, which only runs in the browser, so a server render never
+// fills it.
+const blocks = new Map<string, ComponentPublicInstance>();
+
+/**
+ * Records the block drawn under `anchor`, or forgets it once unmounted
+ * (`instance` is `null`). A block drawn again under the same anchor (a
+ * drawer showing the same page) takes it over until it unmounts.
+ *
+ * @internal
+ */
+export function registerBlockAnchor(
+  anchor: string | undefined,
+  instance: ComponentPublicInstance | null,
+  previous?: ComponentPublicInstance | null,
+): void {
+  if (!anchor) return;
+  if (instance) {
+    blocks.set(anchor, instance);
+    return;
+  }
+  if (!previous || blocks.get(anchor) === previous) blocks.delete(anchor);
+}
+
+function firstElementOf(vnode: VNode | null | undefined): Element | null {
+  if (!vnode) return null;
+  if (vnode.el instanceof Element) return vnode.el;
+  if (vnode.component) return firstElementOf(vnode.component.subTree);
+  if (!Array.isArray(vnode.children)) return null;
+  for (const child of vnode.children) {
+    const element = firstElementOf(child as VNode);
+    if (element) return element;
+  }
+  return null;
+}
+
+/**
+ * The first element the block drawn under `anchor` renders, `null` when no
+ * such block is on screen (an unknown key, a closed tab, a hidden block).
+ *
+ * @internal
+ */
+export function blockAnchorElement(anchor: string): Element | null {
+  const instance = blocks.get(anchor);
+  return instance ? firstElementOf(instance.$.subTree) : null;
+}

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

@@ -1,6 +1,9 @@
 import { computed, ref, watch, type ComputedRef } from "vue";
 import { usePageLive } from "../../../composables/live/usePageLive";
-import type { TableViewLiveHoldOptions } from "../../../types/live";
+import type {
+  PageLiveNote,
+  TableViewLiveHoldOptions,
+} from "../../../types/live";
 import type { LiveGate } from "../live/currentPageLive";
 import { useScrolledPastTop } from "./useScrolledPastTop";
 import { LIVE_HELD_AT_QUERY_KEY } from "./useTableRows";
@@ -11,10 +14,21 @@ type Query = Record<string, unknown>;
 export interface TableLiveHoldSignals {
   /** One of its rows is open in the side panel. */
   isRowOpen?: () => boolean;
+  /** The user's search narrows the rows. */
+  isSearching?: () => boolean;
+  /** The rows are sorted otherwise than by the table's default. */
+  isSorted?: () => boolean;
   /** The table's element, whose first row `whileScrolled` follows. */
   tableElement?: () => unknown;
 }
 
+/** Why a table holds its rows by itself, its page staying live. */
+export type TableLiveHoldReason =
+  | "rowOpen"
+  | "searching"
+  | "sorted"
+  | "scrolled";
+
 export interface TableLiveHoldOptions {
   /** The table's `liveHold`: `true` or an object enables it. */
   liveHold: boolean | TableViewLiveHoldOptions | undefined;
@@ -33,6 +47,18 @@ export interface TableLiveHold {
   isHolding: ComputedRef<boolean>;
   /** Events the table received since its rows were held or last shown. */
   newCount: ComputedRef<number>;
+  /**
+   * Why the table holds by itself while its page is live, `null` otherwise:
+   * a paused page says why on its toggle.
+   */
+  reason: ComputedRef<TableLiveHoldReason | null>;
+  /** What the new rows are called, given `{count}` (`liveHold.missedLabel`). */
+  missedLabel: string | undefined;
+  /**
+   * The breakdown of what the paused page missed (`setMissedDetail`), `null`
+   * while the page is live or nothing came in.
+   */
+  missedDetail: ComputedRef<PageLiveNote | null>;
   /** Reads the rows once, staying held, and holds them from now. */
   showNew: () => void;
   /** The bound a source route receives with each request while held. */
@@ -51,54 +77,53 @@ function holdOptionsOf(
 }
 
 // The table alone holds while the page is live: the user reads a row in the
-// side panel, or reads further down than the rows that would move.
+// side panel, narrows or reorders the rows, or reads further down than the
+// rows that would move. The first reason in this order is the one shown.
 function useLocalHold(
   holdOptions: TableViewLiveHoldOptions | null,
   signals: TableLiveHoldSignals,
-): ComputedRef<boolean> {
-  const isRowOpen = signals.isRowOpen ?? NEVER;
+): ComputedRef<TableLiveHoldReason | null> {
   const tableElement = signals.tableElement ?? NO_ELEMENT;
   const isScrolled = useScrolledPastTop(() => {
     const element = tableElement();
     return element instanceof HTMLElement ? element : null;
   }, !!holdOptions?.whileScrolled);
+  const reasons: Array<[TableLiveHoldReason, boolean, () => boolean]> = [
+    ["rowOpen", !!holdOptions?.whileRowOpen, signals.isRowOpen ?? NEVER],
+    ["searching", !!holdOptions?.whileSearching, signals.isSearching ?? NEVER],
+    ["sorted", !!holdOptions?.whileSorted, signals.isSorted ?? NEVER],
+    ["scrolled", !!holdOptions?.whileScrolled, () => isScrolled.value],
+  ];
   return computed(
     () =>
-      (!!holdOptions?.whileRowOpen && isRowOpen()) ||
-      (!!holdOptions?.whileScrolled && isScrolled.value),
+      reasons.find(([, isEnabled, isActive]) => isEnabled && isActive())?.[0] ??
+      null,
   );
 }
 
 /**
  * The `liveHold` of a table view: while its live page is paused — or, with
- * `whileRowOpen` / `whileScrolled`, while the user reads a row or scrolled
- * down — the table keeps its rows: the gate requests nothing on its events
- * and counts them, and a source route is told the moment they were frozen, so
- * the user's own search, sort and pagination list the rows as they stood.
+ * `whileRowOpen` / `whileSearching` / `whileSorted` / `whileScrolled`, while
+ * the user reads a row, searches, sorts or scrolled down — the table keeps
+ * its rows: the gate requests nothing on its events and counts them, and a
+ * source route is told the moment they were frozen, so the user's own
+ * search, sort and pagination list the rows as they stood.
  * Show reads them once more without leaving the hold; the end of a hold of
  * the table's own reads them if it missed any.
  *
  * @internal
  */
 export function useTableLiveHold(options: TableLiveHoldOptions): TableLiveHold {
-  const { isEnabled, isPaused } = usePageLive();
+  const { isEnabled, isPaused, missedDetail } = usePageLive();
   const holdOptions = holdOptionsOf(options.liveHold);
-  const isLocallyHeld = useLocalHold(holdOptions, options.signals ?? {});
-  const pausedAt = ref<number | null>(null);
+  const localReason = useLocalHold(holdOptions, options.signals ?? {});
+  const isLocallyHeld = computed(() => localReason.value !== null);
   const isHolding = computed(
     () =>
       !!holdOptions &&
       isEnabled.value &&
       (isPaused.value || isLocallyHeld.value),
   );
-
-  watch(
-    isHolding,
-    (holding) => {
-      pausedAt.value = holding ? Date.now() : null;
-    },
-    { immediate: true },
-  );
   // Again on a new controller: the gate binds to the page on screen.
   watch(
     [isLocallyHeld, isEnabled],
@@ -107,25 +132,43 @@ export function useTableLiveHold(options: TableLiveHoldOptions): TableLiveHold {
     },
     { flush: "sync" },
   );
-
-  // The rows are as fresh as the hold, or as the last read the user asked
-  // for since (Show, an action of theirs).
-  const heldAt = () =>
-    pausedAt.value === null
-      ? null
-      : Math.max(pausedAt.value, options.gate().lastReadAt.value);
+  const newCount = computed(() =>
+    isHolding.value ? options.gate().missed.value : 0,
+  );
 
   return {
     isHolding,
-    newCount: computed(() =>
-      isHolding.value ? options.gate().missed.value : 0,
+    newCount,
+    reason: computed(() =>
+      isHolding.value && !isPaused.value ? localReason.value : null,
+    ),
+    missedLabel: holdOptions?.missedLabel,
+    missedDetail: computed(() =>
+      isPaused.value && newCount.value > 0 ? missedDetail.value : null,
     ),
     showNew: () => options.gate().catchUp(),
-    heldQuery: () => {
-      const at = heldAt();
-      return options.isSource && at !== null
-        ? { [LIVE_HELD_AT_QUERY_KEY]: new Date(at).toISOString() }
-        : NO_QUERY;
+    heldQuery: useHeldQuery(isHolding, options),
+  };
+}
+
+// The bound a source route receives while the rows are held: they are as
+// fresh as the hold, or as the last read the user asked for since (Show, an
+// action of theirs).
+function useHeldQuery(
+  isHolding: ComputedRef<boolean>,
+  options: TableLiveHoldOptions,
+): () => Query {
+  const pausedAt = ref<number | null>(null);
+  watch(
+    isHolding,
+    (holding) => {
+      pausedAt.value = holding ? Date.now() : null;
     },
+    { immediate: true },
+  );
+  return () => {
+    if (!options.isSource || pausedAt.value === null) return NO_QUERY;
+    const at = Math.max(pausedAt.value, options.gate().lastReadAt.value);
+    return { [LIVE_HELD_AT_QUERY_KEY]: new Date(at).toISOString() };
   };
 }

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

@@ -0,0 +1,60 @@
+import type {
+  InputNumberAdjustment,
+  InputNumberAdjustmentReason,
+} from "../../types/input-number";
+
+/** The bounds a number field keeps its value within. */
+export interface NumberFieldBounds {
+  min?: number;
+  max?: number;
+}
+
+// 11111.1 writes both the group and the decimal separator in every locale.
+const SEPARATOR_SAMPLE = 11111.1;
+const WHITESPACE = /\s/g;
+const NOT_NUMERIC = /[^\d.+-]/g;
+
+function separatorsOf(locale: string): { group?: string; decimal: string } {
+  const parts = new Intl.NumberFormat(locale).formatToParts(SEPARATOR_SAMPLE);
+  return {
+    group: parts.find((part) => part.type === "group")?.value,
+    decimal: parts.find((part) => part.type === "decimal")?.value ?? ".",
+  };
+}
+
+/**
+ * A number as typed in a field written in `locale` ("1,020", "1 020,5"):
+ * `null` when nothing is typed or it does not read as a number.
+ */
+export function parseTypedNumber(text: string, locale: string): number | null {
+  const { group, decimal } = separatorsOf(locale);
+  let digits = text.replace(WHITESPACE, "");
+  if (group && group.trim()) digits = digits.split(group).join("");
+  digits = digits.split(decimal).join(".").replace(NOT_NUMERIC, "");
+  if (!digits) return null;
+  const value = Number(digits);
+  return Number.isFinite(value) ? value : null;
+}
+
+function reasonOf(
+  typed: number,
+  bounds: NumberFieldBounds,
+): InputNumberAdjustmentReason {
+  if (bounds.max !== undefined && typed > bounds.max) return "max";
+  if (bounds.min !== undefined && typed < bounds.min) return "min";
+  return "step";
+}
+
+/**
+ * How a number field changed what was typed into the value it keeps: kept
+ * within its bounds, or put on its steps. `null` when it keeps what was typed.
+ */
+export function numberAdjustment(
+  typed: number | null,
+  value: number | null | undefined,
+  bounds: NumberFieldBounds,
+): InputNumberAdjustment | null {
+  if (typed === null || typeof value !== "number" || value === typed)
+    return null;
+  return { typed, value, reason: reasonOf(typed, bounds) };
+}

package/frontend-vue/layers/dms-ui/app/components/RecursiveComponent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ComponentPublicInstance } from "vue";
 import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
 import { childLayoutPath } from "#dms-core/app/build/utils/permission-preview";
 import { childComponentId } from "../utils/componentId";
@@ -7,6 +8,7 @@ import {
   type GridDeclaredColumns,
 } from "./grid/constants";
 import DmsPermissionVeil from "../build/components/permission/PermissionVeil.vue";
+import { registerBlockAnchor } from "../build/composables/page/blockAnchors";
 
 interface Props {
   component: ResolvedComponentInfo;
@@ -22,6 +24,14 @@ interface Props {
 
 const props = defineProps<Props>();
 
+// The block's anchor is its layout path: `scrollToBlock(key)` finds it there.
+let anchored: ComponentPublicInstance | null = null;
+function anchorBlock(instance: unknown): void {
+  const block = (instance as ComponentPublicInstance | null) ?? null;
+  registerBlockAnchor(props.layoutPath, block, anchored);
+  anchored = block;
+}
+
 const { t } = useI18n();
 const preview = usePermissionPreview();
 const previewBlock = computed(() => preview.blockFor(props.layoutPath));
@@ -97,6 +107,7 @@ provide<GridDeclaredColumns>(GRID_DECLARED_COLUMNS, {
   >
     <Component
       :is="component.component"
+      :ref="anchorBlock"
       v-bind="JSON.parse(JSON.stringify(component.options || {})) || {}"
       :page-id="pageId"
       :component-id="componentId"

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

@@ -26,6 +26,12 @@ interface Props {
   to?: string;
   /** Hover band; on by default. */
   interactive?: boolean;
+  /**
+   * The title, details and detail line wrap over as many lines as they
+   * need, a long path or query breaking anywhere, instead of one line each
+   * cut with an ellipsis.
+   */
+  wrap?: boolean;
 }
 
 interface Slots {
@@ -45,6 +51,7 @@ const props = withDefaults(defineProps<Props>(), {
   unread: false,
   to: undefined,
   interactive: true,
+  wrap: false,
 });
 const slots = defineSlots<Slots>();
 
@@ -57,7 +64,8 @@ const hasTitle = computed(() => !!props.title || !!slots.default);
     size="sm"
     icon-size="xs"
     marker="trailing"
-    truncate
+    :truncate="!props.wrap"
+    :class="props.wrap && '[overflow-wrap:anywhere]'"
     :icon="props.icon"
     :tone="props.iconColor"
     :meta="meta"
@@ -71,15 +79,15 @@ const hasTitle = computed(() => !!props.title || !!slots.default);
     <template v-if="hasTitle" #default>
       <!-- One line on wide screens (the full text shows on hover); on a
            phone a sentence wraps rather than losing its end, while a mono
-           path or query keeps its line. -->
+           path or query keeps its line. `wrap` keeps every word. -->
       <span
-        class="min-w-0 truncate"
-        :class="
-          props.mono
-            ? 'text-toned font-mono text-[12.5px]'
-            : 'max-sm:whitespace-normal'
-        "
-        :title="props.title"
+        class="min-w-0"
+        :class="[
+          props.mono && 'text-toned font-mono text-[12.5px]',
+          !props.wrap && 'truncate',
+          !props.wrap && !props.mono && 'max-sm:whitespace-normal',
+        ]"
+        :title="props.wrap ? undefined : props.title"
       >
         <slot>{{ props.title }}</slot>
       </span>