vectis-ui 0.11.0 → 0.12.0

package/dist/components/VDataTable/VDataTable.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VDataTable.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDataTable/VDataTable.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"Row extends Record<string, unknown>\">\n// @core\n/**\n * Native table semantics remain intact. JavaScript adds sorting, paging, selection and\n * debounced search; browser measurements stay in browser tests.\n */\n\nimport { computed, ref, useId, useSlots, watch, watchEffect } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VCheckbox from '../VCheckbox/VCheckbox.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { arrow_downward as arrowDownwardIcon } from '../VIcon/icons/arrow_downward'\nimport { arrow_drop_down as arrowDropDownIcon } from '../VIcon/icons/arrow_drop_down'\nimport { arrow_upward as arrowUpwardIcon } from '../VIcon/icons/arrow_upward'\nimport { search as searchIcon } from '../VIcon/icons/search'\nimport { swap_vert as swapVertIcon } from '../VIcon/icons/swap_vert'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport VMenu from '../VMenu/VMenu.vue'\nimport VMenuItem from '../VMenu/VMenuItem.vue'\nimport VPagination from '../VPagination/VPagination.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { toggleValue } from '../../utils/array'\nimport { cssSize } from '../../utils/css'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useTimer } from '../../composables/useTimer'\nimport { useLocale, useMessages } from '../../i18n/state'\n\n/** How a column's content is aligned. */\nexport type DataTableColumnAlign = 'start' | 'center' | 'end'\n\n/** One column of the table. */\nexport interface DataTableColumn {\n  /** Which field of a row it shows, and the name its slots are addressed by. */\n  key: string\n  /** Its heading. */\n  label: string\n  /** Lets the reader sort by this column. */\n  sortable?: boolean\n  /** How its content is aligned. Numbers usually belong at the end. */\n  align?: DataTableColumnAlign\n}\n\n/** Which way a column is sorted: A to Z, or Z to A. */\nexport type DataTableSortDirection = 'asc' | 'desc'\n\n/** Which column the table is sorted by, and in which direction. */\nexport interface DataTableSort {\n  /** The `key` of the column the rows are ordered by. */\n  key: string\n  /** Which way they are ordered. */\n  direction: DataTableSortDirection\n}\n\n/** How a row is identified: by the field named in `rowKey`, or failing that by its position. */\nexport type DataTableRowId = string | number\n\n/**\n * Everything the table is currently being asked for, reported whenever it changes so a\n * server can answer it. What is not set is `null` rather than left out, so the object keeps\n * the same keys once serialized into a request.\n */\nexport interface DataTableParams {\n  /** The page asked for, from 1. */\n  page: number\n  /** How many rows a page holds, `null` when the table is not paginated. */\n  perPage: number | null\n  /** The `key` of the sorted column, `null` when the rows are not sorted. */\n  sortKey: string | null\n  /** Which way they are sorted, `null` when they are not. */\n  sortDirection: DataTableSortDirection | null\n  /** The committed search, empty when nothing is searched for. */\n  search: string\n}\n\n/** What the `cell-<key>` slots receive. */\nexport interface DataTableCellSlotProps<Row extends Record<string, unknown>> {\n  /** The row the cell belongs to. */\n  row: Row\n  /** The value of the column's field in that row. */\n  value: unknown\n  /** The column the cell belongs to. */\n  column: DataTableColumn\n}\n\n/** What the `head-<key>` slots receive. */\nexport interface DataTableHeadSlotProps {\n  /** The column the heading belongs to. */\n  column: DataTableColumn\n}\n\n/** What the `#empty` slot receives. */\nexport interface DataTableEmptySlotProps {\n  /** The search that produced the empty result, empty when nothing was searched for. */\n  search: string\n}\n\n/** The rows on show, as `rangeText` receives them, counted from 1. */\nexport interface DataTableRange {\n  /** The position of the first row on show. */\n  start: number\n  /** The position of the last row on show. */\n  end: number\n  /** How many rows there are in all. */\n  total: number\n}\n\n/** How much decoration the table carries. */\nexport type DataTableVariant = 'flat' | 'outlined'\n\n/** What a narrow container does to the rows. */\nexport type DataTableResponsive = 'scroll' | 'stack'\n\n// This interface is exported rather than kept local, and it is generic rather than referring to\n// the component's own type parameter. A component typed over its rows inlines the whole\n// signature of its props into the declarations it emits, so a name that is not exported cannot\n// be written there and the build of the type declarations fails.\nexport interface DataTableProps<Row extends Record<string, unknown>> {\n  /** The columns to show, in order. */\n  columns: DataTableColumn[]\n  /** The rows to show. */\n  rows: Row[]\n  /** Which field identifies a row. */\n  rowKey?: string\n  /**\n   * A sentence describing what the table holds. It is announced before the table itself,\n   * and is what tells a screen reader user whether it is worth exploring.\n   */\n  caption?: string\n  /**\n   * How the table is framed: nothing at all, or a card with a raised background, a border\n   * and rounded corners.\n   */\n  variant?: DataTableVariant\n  /**\n   * What happens when the component is too narrow: the table scrolls sideways, or each\n   * row becomes a card with its column headings repeated inside it.\n   */\n  responsive?: DataTableResponsive\n  /** Shows that the rows are being loaded. */\n  loading?: boolean\n  /**\n   * What is written beside the spinner while the rows are loading. It falls back to the design\n   * system dictionary.\n   */\n  loadingText?: string\n  /** What is said when there is no row to show. It falls back to the design system dictionary. */\n  emptyText?: string\n  /** A title above the table, on the left of its toolbar. */\n  title?: string\n  /** Adds a search field to the toolbar. */\n  searchable?: boolean\n  /** What that field says while empty. It falls back to the design system dictionary. */\n  searchPlaceholder?: string\n  /**\n   * What screen readers announce for the search field. It falls back to the design\n   * system dictionary.\n   */\n  searchLabel?: string\n  /**\n   * When a server does the searching, how long to wait after a keystroke before asking\n   * it, in milliseconds. Zero asks at once.\n   */\n  searchDebounce?: number\n  /** Tints every other row, which helps the eye follow a long line across the table. */\n  striped?: boolean\n  /**\n   * Keeps the column headings in place while the rows scroll under them. It needs a\n   * bounded scrolling area to work: either the `height` prop, or a parent with a height\n   * of its own.\n   */\n  stickyHeader?: boolean\n  /** Tightens the cells by one step, and everything the table renders with them. */\n  compact?: boolean\n  /**\n   * The height of the whole component, toolbar and pagination included: a number is read as\n   * pixels, anything else as a CSS length. Left out, the table takes its parent's height\n   * whenever the parent has one.\n   */\n  height?: number | string\n  /** The heading icon of a column that can be sorted but currently is not. */\n  sortIcon?: IconSource\n  /**\n   * The icon of an ascending sort. It points DOWN by default, the spreadsheet\n   * convention: sorting A to Z reads downwards.\n   */\n  sortAscIcon?: IconSource\n  /** The icon of a descending sort. */\n  sortDescIcon?: IconSource\n  /** The choices offered for how many rows a page holds. */\n  perPageOptions?: number[]\n  /** What that choice is called. It falls back to the design system dictionary. */\n  perPageText?: string\n  /**\n   * How many rows there are in all on the server. It is what lets the pagination and the\n   * range be right when the table only ever holds one page.\n   */\n  total?: number\n  /** Shows which rows are being looked at (\"1–10 of 42\") in the footer. */\n  showRange?: boolean\n  /** Rephrases that range. It falls back to the design system dictionary. */\n  rangeText?: (range: DataTableRange) => string\n  /** Adds a checkbox to every row, and one in the heading to take the whole page. */\n  selectable?: boolean\n  /**\n   * What the heading checkbox is announced as. It falls back to the design system\n   * dictionary.\n   */\n  selectAllLabel?: string\n  /**\n   * How the selection is summed up in the footer. It says nothing at all when nothing is\n   * selected, and falls back to the design system dictionary.\n   */\n  selectionText?: (count: number) => string\n  /**\n   * What a row's checkbox is announced as. \"Select row\" tells a screen reader user nothing\n   * about WHICH row, so this is worth supplying with something from the row itself. It falls\n   * back to the design system dictionary, which numbers the rows from 1.\n   */\n  selectRowLabel?: (row: Row, index: number) => string\n  /**\n   * Hands the searching, the sorting and the paging over to a server: the rows are shown\n   * exactly as they arrive, and every change of what is being asked for is reported so\n   * the server can answer it.\n   */\n  serverSide?: boolean\n}\n\nconst props = withDefaults(defineProps<DataTableProps<Row>>(), {\n  rowKey: undefined,\n  caption: undefined,\n  variant: 'flat',\n  responsive: 'scroll',\n  loading: false,\n  loadingText: undefined,\n  emptyText: undefined,\n  title: undefined,\n  searchable: false,\n  searchPlaceholder: undefined,\n  searchLabel: undefined,\n  searchDebounce: 250,\n  striped: false,\n  stickyHeader: false,\n  compact: false,\n  height: undefined,\n  sortIcon: () => swapVertIcon,\n  sortAscIcon: () => arrowDownwardIcon,\n  sortDescIcon: () => arrowUpwardIcon,\n  perPageOptions: undefined,\n  perPageText: undefined,\n  total: undefined,\n  showRange: false,\n  rangeText: undefined,\n  selectable: false,\n  selectAllLabel: undefined,\n  selectionText: undefined,\n  selectRowLabel: undefined,\n  serverSide: false,\n})\n\nconst m = useMessages()\nconst vectisLocale = useLocale()\nconst resolvedEmptyText = computed(() => props.emptyText ?? m.value.dataTable.empty)\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.dataTable.loading)\nconst resolvedSearchPlaceholder = computed(\n  () => props.searchPlaceholder ?? m.value.dataTable.searchPlaceholder,\n)\nconst resolvedSearchLabel = computed(() => props.searchLabel ?? m.value.dataTable.searchLabel)\nconst resolvedPerPageText = computed(() => props.perPageText ?? m.value.dataTable.perPage)\nconst resolvedSelectAllLabel = computed(() => props.selectAllLabel ?? m.value.dataTable.selectAll)\n\n/** Which column the rows are sorted by, and in which direction. */\nconst sort = defineModel<DataTableSort | null>('sort', { default: null })\n/** The page being shown, counted from 1. */\nconst page = defineModel<number>('page', { default: 1 })\n/**\n * How many rows a page holds. Any value above zero turns the pagination on, so passing\n * one down without binding it is enough to enable it.\n */\nconst perPage = defineModel<number | undefined>('perPage', { default: undefined })\n/*\n * `sort` is `null` because the TABLE writes that state itself, a third click on a heading\n * clearing the order, and a model the component writes needs a value a consumer can store and\n * compare. `perPage` is `undefined` because nothing here ever clears it: it is simply a model\n * that was not given.\n */\n/** The selected rows, as the identities `rowKey` gives them, never the row objects themselves. */\nconst selected = defineModel<DataTableRowId[]>('selected', { default: () => [] })\n/**\n * What is typed in the search field, empty to begin with. Only the declared columns are\n * searched, accent- and case-insensitively; in `serverSide` mode nothing is filtered here\n * and the term is reported through `update:params` instead.\n */\nconst search = defineModel<string>('search', { default: '' })\n\nconst emit = defineEmits<{\n  /**\n   * What the table is now being asked for, when a server is answering: the page, the page size,\n   * the sort or the search has changed, the last one after its delay.\n   */\n  'update:params': [params: DataTableParams]\n}>()\n\ndefineSlots<{\n  /** What a cell of a given column shows: a slot named after that column's key. */\n  [name: `cell-${string}`]: (scope: DataTableCellSlotProps<Row>) => unknown\n  /** What a column's heading shows: a slot named after that column's key. */\n  [name: `head-${string}`]: (scope: DataTableHeadSlotProps) => unknown\n  /** The left side of the toolbar, replacing the `title` prop. */\n  title?(): unknown\n  /** What the table shows while its rows are loading, replacing the spinner and its text. */\n  loading?(): unknown\n  /**\n   * What the table shows when there is no row to show, replacing `emptyText`. It receives the\n   * search that produced the empty result, empty when nothing was searched for.\n   */\n  empty?(scope: DataTableEmptySlotProps): unknown\n}>()\n\n// `class` and `style` stay on the wrapper, where a consumer expects to place the component;\n// everything else; an id, the aria-*; goes to the `<table>` itself, the only element they\n// validly describe.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst slots = useSlots()\n\n// A template ref on the component reaches the wrapper, a layout box; the `<table>` is where\n// the consumer's attributes land and what they describe.\nconst tableEl = ref<HTMLTableElement | null>(null)\ndefineExpose({\n  /** The `<table>` element, where the consumer's attributes land. */\n  el: tableEl,\n})\n\n// @a11y\n/*\n * A caption already does, and so does a consumer's own `aria-label` or `aria-labelledby`, which\n * a reference to the title would override. Bound before the forwarded attributes, like every\n * state the component owns.\n */\nconst titleId = useId()\nconst tableLabelledBy = computed(() =>\n  props.caption ||\n  !(props.title || slots.title) ||\n  attrs['aria-label'] !== undefined ||\n  attrs['aria-labelledby'] !== undefined\n    ? undefined\n    : titleId,\n)\n\n// @devwarn\nif (isDev) {\n  if (props.selectable && !props.rowKey)\n    console.warn(\n      '[VDataTable] `selectable` without `rowKey` — index-based identities are corrupted by sorting, filtering and pagination.',\n    )\n  /*\n   * A key that is missing, or not a string or a number, turns into the same text on every\n   * row (\"undefined\"), and two rows sharing a key share an identity: ticking one ticks them\n   * all, and the rows' own `:key`s collide. Once per instance and per kind.\n   */\n  const warned = new Set<string>()\n  watchEffect(() => {\n    const key = props.rowKey\n    if (!key) return\n    const seen = new Set<unknown>()\n    for (const row of props.rows) {\n      const value = row[key]\n      if (typeof value !== 'string' && typeof value !== 'number') {\n        if (!warned.has('type')) {\n          warned.add('type')\n          console.warn(\n            `[VDataTable] \\`rowKey\\` \"${key}\" is missing or is not a string or a number on some rows: those rows share one identity.`,\n          )\n        }\n      } else if (seen.has(value)) {\n        if (!warned.has('duplicate')) {\n          warned.add('duplicate')\n          console.warn(\n            `[VDataTable] \\`rowKey\\` \"${key}\" holds the value \"${value}\" twice: rows are told apart by it, so it must be unique.`,\n          )\n        }\n      } else seen.add(value)\n    }\n  })\n}\n\n/*\n * A key that is already a string or a number is returned AS IT IS. The selection holds these\n * identities and is looked up with a Set, which tells the number 7 from the string \"7\": turned\n * into text, a table keyed by numeric ids never found a selected row again, so every checkbox\n * stayed unticked.\n */\nfunction rowIdentity(row: Row, index: number): DataTableRowId {\n  if (!props.rowKey) return index\n  const key = row[props.rowKey]\n  return typeof key === 'string' || typeof key === 'number' ? key : String(key)\n}\n\n// Searching fields the reader cannot see would return rows for reasons nothing on screen\n// explains.\n/*\n * The filter below re-reads the whole table on every keystroke: ten thousand rows across five\n * columns is fifty thousand normalizations per character typed without it.\n */\nconst normalizedOf = createNormalizedCache<Row>()\nconst normalizedCell = (row: Row, key: string) => normalizedOf(row, String(row[key] ?? ''), key)\n\nconst filteredRows = computed(() => {\n  if (props.serverSide || !props.searchable) return props.rows\n  const needle = normalizeText((search.value ?? '').trim())\n  if (!needle) return props.rows\n  return props.rows.filter((row) =>\n    props.columns.some((column) => normalizedCell(row, column.key).includes(needle)),\n  )\n})\n\n/*\n * The locale must nonetheless stay EXPLICIT: an `undefined` one resolves differently in Node\n * and in the browser, so the row order would diverge across hydration.\n */\nconst collator = computed(() => new Intl.Collator(vectisLocale.value, { numeric: true }))\n\n/*\n * What a cell is compared by. A `Date` by its instant: as text it collates on `toString()`,\n * which opens with the WEEKDAY, so Monday the 5th sorted before Saturday the 3rd.\n */\nconst NUMERIC_TEXT = /^\\s*[+-]?(\\d+\\.?\\d*|\\.\\d+)(e[+-]?\\d+)?\\s*$/i\nfunction sortKey(value: unknown): unknown {\n  if (value instanceof Date) return value.getTime()\n  if (typeof value === 'string' && NUMERIC_TEXT.test(value)) return Number(value)\n  return value\n}\n\nconst sortedRows = computed(() => {\n  const current = sort.value\n  if (!current || props.serverSide) return filteredRows.value\n  const factor = current.direction === 'asc' ? 1 : -1\n  const compare = collator.value.compare\n  return [...filteredRows.value].sort((a, b) => {\n    const av = sortKey(a[current.key])\n    const bv = sortKey(b[current.key])\n    if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * factor\n    return compare(String(av ?? ''), String(bv ?? '')) * factor\n  })\n})\n\nconst paginated = computed(() => (perPage.value ?? 0) > 0)\nconst totalCount = computed(() =>\n  props.serverSide ? (props.total ?? props.rows.length) : filteredRows.value.length,\n)\nconst pageCount = computed(() =>\n  paginated.value ? Math.max(1, Math.ceil(totalCount.value / (perPage.value ?? 1))) : 1,\n)\n// The page actually shown is CLAMPED by derivation and the model is never rewritten: a\n// search that leaves fewer pages simply falls back to the last one, and typing a\n// character that would have emptied the table does not silently move the consumer's own\n// page number.\nconst currentPage = computed(() => clamp(page.value, 1, pageCount.value))\n\nconst displayedRows = computed(() => {\n  // With a server answering, the rows received ARE the current page: cutting them again\n  // would show a tenth of a page.\n  if (props.serverSide || !paginated.value) return sortedRows.value\n  const start = (currentPage.value - 1) * (perPage.value ?? 0)\n  return sortedRows.value.slice(start, start + (perPage.value ?? 0))\n})\n\nfunction toggleSort(key: string) {\n  const current = sort.value\n  if (!current || current.key !== key) sort.value = { key, direction: 'asc' }\n  else if (current.direction === 'asc') sort.value = { key, direction: 'desc' }\n  else sort.value = null\n}\n\n// @a11y\n// Only the column actually sorted carries the attribute. Setting it on every heading would have a screen reader announce \"not sorted\" on each one in turn, drowning\n// the single piece of information that matters: which column the order comes from.\nfunction ariaSort(column: DataTableColumn): 'ascending' | 'descending' | undefined {\n  if (sort.value?.key !== column.key) return undefined\n  return sort.value.direction === 'asc' ? 'ascending' : 'descending'\n}\n\n/**\n * Which icon a column's heading shows: a neutral one on any sortable column, and the\n * arrow of the current direction on the one being sorted by.\n *\n * It is deliberately named differently from the prop it falls back to: written the same,\n * the function would shadow the prop inside the template and the icons would never be\n * overridable.\n */\nfunction sortIconFor(column: DataTableColumn): IconSource {\n  if (sort.value?.key !== column.key) return props.sortIcon\n  return sort.value.direction === 'asc' ? props.sortAscIcon : props.sortDescIcon\n}\n\n// And when a server answers, nothing native waits before asking it, so that has to be written.\n// The waiting is delegated to `useTimer`; a delay of zero running at once, cancellation when\n// the component goes away; and the term that was actually committed is what the parameters\n// below report.\nconst committedSearch = ref(search.value)\nconst searchTimer = useTimer()\n\nfunction commitSearch() {\n  // A term typed and erased inside the debounce is no new search: going back to page 1\n  // and asking the server again would be a request for what is already on screen.\n  if (search.value === committedSearch.value) return\n  committedSearch.value = search.value\n  page.value = 1\n}\n\nwatch(search, () => {\n  if (!props.serverSide) {\n    page.value = 1\n    return\n  }\n  searchTimer.start(commitSearch, props.searchDebounce)\n})\n\nconst emptySearch = computed(() => (props.serverSide ? committedSearch.value : search.value))\n\n/*\n * `page` is the model, never the clamped `currentPage`. The clamp reads `total`, which is the\n * server's own answer: read here, a response that changed the total would move the parameters\n * and ask for the page again, and a consumer clearing `total` while it loads would send the\n * reader back to page 1.\n */\n// Committing a search and going back to the first page happen one after the other, but both\n// land in the same flush, so this runs once on the final values; never two requests for what\n// the reader experienced as a single action. Compared by value: a parent handing down an equal\n// `sort` object is no new request.\nwatch(\n  [\n    page,\n    () => perPage.value ?? null,\n    () => sort.value?.key ?? null,\n    () => sort.value?.direction ?? null,\n    committedSearch,\n  ],\n  ([page, perPage, sortKey, sortDirection, search]) => {\n    if (props.serverSide) emit('update:params', { page, perPage, sortKey, sortDirection, search })\n  },\n)\n\n// The selection. The heading checkbox covers the rows currently VISIBLE and not the whole\n// table: a box that silently selected forty thousand rows would be a trap.\nconst selectedSet = computed(() => new Set<DataTableRowId>(selected.value))\nconst visibleIds = computed(() => displayedRows.value.map((row, index) => rowIdentity(row, index)))\nconst allVisibleSelected = computed(\n  () => visibleIds.value.length > 0 && visibleIds.value.every((id) => selectedSet.value.has(id)),\n)\nconst masterIndeterminate = computed(\n  () => !allVisibleSelected.value && visibleIds.value.some((id) => selectedSet.value.has(id)),\n)\n\n/*\n * A row is asked about by the identity `visibleIds` already holds for it: the template reads\n * `visibleIds[index]` for the key, the tint and the checkbox alike, rather than deriving it\n * again three or four times per row per render.\n */\nconst isSelected = (id: DataTableRowId) => selectedSet.value.has(id)\n\nfunction toggleRow(id: DataTableRowId) {\n  selected.value = toggleValue(selected.value, id)\n}\n\n// It only ever touches the rows on screen, so what was selected on the other pages\n// survives moving between them.\n// Refused with no row on screen, or while the rows on screen are the PREVIOUS ones behind\n// the loading state: ticked there, it stayed ticked with nothing selected, or selected rows\n// the reader could not see.\nconst masterDisabled = computed(() => visibleIds.value.length === 0 || props.loading)\n\nfunction toggleMaster() {\n  if (masterDisabled.value) return\n  const ids = visibleIds.value\n  if (allVisibleSelected.value) {\n    const visible = new Set(ids)\n    selected.value = selected.value.filter((id) => !visible.has(id))\n  } else {\n    const current = selectedSet.value\n    selected.value = [...selected.value, ...ids.filter((id) => !current.has(id))]\n  }\n}\n\n// @a11y\n// Without this every checkbox in the column would be announced identically, and a screen\n// reader user would have no way of knowing which row they were about to select.\nfunction rowSelectLabel(row: Row, index: number): string {\n  // The position in the whole table, or every page would have its own \"Select row 1\". The\n  // dictionary counts from one as a human does, the prop from zero as code does.\n  const position = (paginated.value ? (currentPage.value - 1) * (perPage.value ?? 0) : 0) + index\n  return props.selectRowLabel?.(row, position) ?? m.value.dataTable.selectRow(position + 1)\n}\n\nwatch(perPage, () => {\n  page.value = 1\n})\n\nconst colCount = computed(() => props.columns.length + (props.selectable ? 1 : 0))\n\n// @a11y\n/**\n * It is rendered, empty, as soon as rows can be selected at all. A region meant to announce its\n * own changes must already exist before the first change: inserted into the page at the same\n * moment as its text, it announces nothing, and the first row selected would pass in silence.\n */\nconst selectionSummary = computed(() => {\n  const count = selected.value.length\n  if (count === 0) return ''\n  if (props.selectionText) return props.selectionText(count)\n  return m.value.dataTable.selection(count)\n})\n\nconst rangeSummary = computed(() => {\n  const per = perPage.value ?? 0\n  const total = totalCount.value\n  const start = total === 0 ? 0 : (currentPage.value - 1) * per + 1\n  const end = Math.min(currentPage.value * per, total)\n  return props.rangeText?.({ start, end, total }) ?? m.value.dataTable.range({ start, end, total })\n})\n\n// The height is applied to the whole component and not as a ceiling on the scrolling area. A\n// soft ceiling remains available to the consumer through a maximum height of their own: the\n// component is a column whose scrolling area can be compressed.\nconst heightStyle = computed<StyleValue | undefined>(() =>\n  props.height !== undefined ? { blockSize: cssSize(props.height) } : undefined,\n)\n</script>\n\n<template>\n  <div\n    class=\"v-data-table\"\n    :class=\"rootClass\"\n    :style=\"[heightStyle, rootStyle]\"\n    :data-variant=\"variant\"\n    :data-responsive=\"responsive\"\n    :data-striped=\"striped ? '' : undefined\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-sticky-header=\"stickyHeader ? '' : undefined\"\n    :data-selectable=\"selectable ? '' : undefined\"\n  >\n    <div v-if=\"title || $slots.title || searchable\" class=\"v-data-table-toolbar\">\n      <VTypography :id=\"titleId\" as=\"div\" variant=\"heading-4\" class=\"v-data-table-title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </VTypography>\n      <VInput\n        v-if=\"searchable\"\n        v-model=\"search\"\n        class=\"v-data-table-search\"\n        type=\"search\"\n        size=\"sm\"\n        :compact=\"compact\"\n        :icon-start=\"searchIcon\"\n        clearable\n        :placeholder=\"resolvedSearchPlaceholder\"\n        :aria-label=\"resolvedSearchLabel\"\n      />\n    </div>\n\n    <div class=\"v-data-table-scroller\">\n      <table\n        ref=\"tableEl\"\n        class=\"v-data-table-table\"\n        :aria-labelledby=\"tableLabelledBy\"\n        v-bind=\"forwardedAttrs\"\n      >\n        <caption v-if=\"caption\" class=\"v-data-table-caption\">\n          {{\n            caption\n          }}\n        </caption>\n        <thead class=\"v-data-table-head\">\n          <tr>\n            <th v-if=\"selectable\" scope=\"col\" class=\"v-data-table-select\">\n              <VCheckbox\n                :model-value=\"allVisibleSelected\"\n                :indeterminate=\"masterIndeterminate\"\n                :disabled=\"masterDisabled\"\n                :aria-label=\"resolvedSelectAllLabel\"\n                @update:model-value=\"toggleMaster\"\n              />\n              <!--\n                Its hidden box would leave the heading empty in the stacked layout (axe\n                empty-table-header), so it keeps its name as text there.\n              -->\n              <span class=\"v-data-table-stack-label\">{{ resolvedSelectAllLabel }}</span>\n            </th>\n            <th\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              scope=\"col\"\n              :data-align=\"column.align\"\n              :aria-sort=\"ariaSort(column)\"\n            >\n              <button\n                v-if=\"column.sortable\"\n                type=\"button\"\n                class=\"v-data-table-sort\"\n                :data-direction=\"sort?.key === column.key ? sort.direction : undefined\"\n                @click=\"toggleSort(column.key)\"\n              >\n                <slot :name=\"`head-${column.key}`\" :column=\"column\">{{ column.label }}</slot>\n                <!-- Decorative, and deliberately so: given no label, an icon hides itself\n                     from screen readers. What the sort state is, is already carried by\n                     the heading itself. -->\n                <VIcon class=\"v-data-table-sort-icon\" v-bind=\"iconProps(sortIconFor(column))\" />\n              </button>\n              <!-- The heading as plain text, shown to screen readers in the STACKED layout\n                   only, where the button above is hidden: see the stack rules. -->\n              <span v-if=\"column.sortable\" class=\"v-data-table-stack-label\">{{\n                column.label\n              }}</span>\n              <template v-else>\n                <slot :name=\"`head-${column.key}`\" :column=\"column\">{{ column.label }}</slot>\n              </template>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <!--\n            The order matters: loading is checked before emptiness, so a table waiting for its\n            rows never claims there are none.\n          -->\n          <tr v-if=\"loading\">\n            <td :colspan=\"colCount\" class=\"v-data-table-state\">\n              <slot name=\"loading\">\n                <!-- The spinner carries the text for a screen reader, so the visible copy is\n                     hidden from it: read twice, the cell would say it is loading twice. -->\n                <span class=\"v-data-table-state-loading\">\n                  <VSpinner :label=\"resolvedLoadingText\" />\n                  <span aria-hidden=\"true\">{{ resolvedLoadingText }}</span>\n                </span>\n              </slot>\n            </td>\n          </tr>\n          <tr v-else-if=\"displayedRows.length === 0\">\n            <td :colspan=\"colCount\" class=\"v-data-table-state\">\n              <slot name=\"empty\" :search=\"emptySearch\">{{ resolvedEmptyText }}</slot>\n            </td>\n          </tr>\n          <template v-else>\n            <tr\n              v-for=\"(row, index) in displayedRows\"\n              :key=\"visibleIds[index]\"\n              :data-selected=\"selectable && isSelected(visibleIds[index]!) ? '' : undefined\"\n            >\n              <!--\n                The selection is marked with a plain attribute and not with the ARIA selected\n                state, which is invalid on the row of a table: it belongs to a grid. What tells\n                assistive technology that a row is selected is its checkbox being checked.\n              -->\n              <td v-if=\"selectable\" class=\"v-data-table-select\">\n                <VCheckbox\n                  :model-value=\"isSelected(visibleIds[index]!)\"\n                  :aria-label=\"rowSelectLabel(row, index)\"\n                  @update:model-value=\"toggleRow(visibleIds[index]!)\"\n                />\n              </td>\n              <td\n                v-for=\"column in columns\"\n                :key=\"column.key\"\n                :data-label=\"column.label\"\n                :data-align=\"column.align\"\n              >\n                <slot\n                  :name=\"`cell-${column.key}`\"\n                  :row=\"row\"\n                  :value=\"row[column.key]\"\n                  :column=\"column\"\n                >\n                  {{ row[column.key] }}\n                </slot>\n              </td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- The footer has two zones: what is selected on the left, and on the right the page\n         size, the range and the pagination, in that order. -->\n    <div v-if=\"paginated || selectable\" class=\"v-data-table-footer\">\n      <span v-if=\"selectable\" class=\"v-data-table-selection\" aria-live=\"polite\">{{\n        selectionSummary\n      }}</span>\n      <div v-if=\"paginated\" class=\"v-data-table-footer-end\">\n        <div v-if=\"perPageOptions?.length\" class=\"v-data-table-per-page\">\n          <span class=\"v-data-table-per-page-label\" aria-hidden=\"true\">{{\n            resolvedPerPageText\n          }}</span>\n          <!-- The panel is told to match its trigger, which here replaces the default\n               minimum width with something sensible: a menu of \"10\", \"25\", \"50\" has no\n               use for the width a menu of commands assumes, and it still cannot end up\n               narrower than the button opening it. -->\n          <VMenu size=\"sm\" :compact=\"compact\" placement=\"top-end\" match-trigger>\n            <template #trigger=\"{ triggerProps }\">\n              <VButton\n                variant=\"ghost\"\n                tone=\"neutral\"\n                size=\"sm\"\n                :compact=\"compact\"\n                v-bind=\"triggerProps\"\n                :aria-label=\"m.dataTable.perPageValue(resolvedPerPageText, perPage ?? 0)\"\n              >\n                {{ perPage }}\n                <VIcon :name=\"arrowDropDownIcon\" />\n              </VButton>\n            </template>\n            <VMenuItem\n              v-for=\"option in perPageOptions\"\n              :key=\"option\"\n              :label=\"String(option)\"\n              :selected=\"option === perPage\"\n              @select=\"perPage = option\"\n            />\n          </VMenu>\n        </div>\n        <span v-if=\"showRange\" class=\"v-data-table-range\" aria-live=\"polite\">{{\n          rangeSummary\n        }}</span>\n        <!--\n          Named after the table rather than with the generic pagination wording: a page holding\n          this table and a pagination of its own would otherwise expose two navigation landmarks\n          with the same name, and a screen reader user could not tell them apart.\n        -->\n        <VPagination\n          v-model=\"page\"\n          :label=\"m.dataTable.pagination\"\n          :length=\"pageCount\"\n          size=\"sm\"\n          :compact=\"compact\"\n          align=\"end\"\n          :total-visible=\"1\"\n          edge-controls\n          detached\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-data-table {\n    /*\n     * It does not go through the shared control scale; there is no single control height in a\n     * table; which is the same case VAccordion is in.\n     */\n    --data-table-pad-block: var(--vectis-space-3);\n    --data-table-pad-inline: var(--vectis-space-3);\n    --data-table-head-pad-block: var(--vectis-space-2);\n\n    /* The gutter between the frame and what it holds: nothing when the table is\n       unframed, so the caption, the toolbar and the footer sit flush with the edge, and\n       the cells' own inline padding as soon as a frame appears. */\n    --data-table-frame-pad: 0px;\n\n    container-type: inline-size;\n    font-family: var(--vectis-text-family);\n\n    /*\n     * Deliberately no `min-block-size: 0` here. Inside a flex column parent too short for it,\n     * the automatic minimum is what keeps the table at its natural height instead of letting it\n     * be crushed to nothing.\n     */\n    display: flex;\n    flex-direction: column;\n    block-size: 100%;\n  }\n\n  .v-data-table[data-compact] {\n    --data-table-pad-block: var(--vectis-space-2);\n    --data-table-pad-inline: var(--vectis-space-2);\n    --data-table-head-pad-block: var(--vectis-space-1);\n  }\n\n  /*\n   * The card. The unframed default has nothing to undo, since it declares no decoration at all;\n   * whatever surrounds the table is what provides the surface then.\n   */\n  .v-data-table[data-variant='outlined'] {\n    --data-table-frame-pad: var(--data-table-pad-inline);\n\n    background: var(--vectis-color-surface-raised);\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n    /*\n     * `clip` and not `hidden`. Hiding the overflow would make this element a scroll container\n     * of its own, and the sticky heading would then anchor to IT rather than to the area that\n     * actually scrolls; which is to say it would not stick at all.\n     */\n    overflow: clip;\n  }\n\n  /*\n   * `min-block-size: 0` is load-bearing; a flex item refuses by default to shrink below its\n   * content, so without it the area never compresses and the table overflows instead of\n   * scrolling. Deliberately not confined to `data-responsive='scroll'`: a table taller than its\n   * host must scroll in `stack` too, or `outlined`'s clip crops it and the rows below become\n   * unreachable.\n   */\n  .v-data-table-scroller {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow: auto;\n  }\n\n  .v-data-table-toolbar {\n    flex: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--vectis-space-3);\n    padding-block-start: var(--data-table-frame-pad);\n    padding-block-end: var(--vectis-space-3);\n    padding-inline: var(--data-table-frame-pad);\n  }\n\n  /*\n   * It is set through the colour VARIABLE that component reads, and not with a plain colour\n   * declaration. That declaration would collide with VTypography's own at equal specificity,\n   * and the winner would be decided by whichever sheet the consumer's bundler put last.\n   */\n  .v-data-table-title {\n    --typography-color: var(--vectis-color-text);\n  }\n\n  /* The search field is given a width of its own, overriding the full width VInput takes\n     by default. The selector is qualified by its context, which makes it one step more\n     specific than VInput's own rule and therefore independent of the order the two sheets\n     end up in. */\n  .v-data-table-toolbar .v-input {\n    inline-size: var(--vectis-control-size-table-search);\n    max-inline-size: 100%;\n  }\n\n  .v-data-table-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: var(--vectis-text-body-md-size);\n    color: var(--vectis-color-text);\n  }\n\n  .v-data-table-caption {\n    padding-block-end: var(--vectis-space-3);\n    padding-inline: var(--data-table-frame-pad);\n    text-align: start;\n    font-size: var(--vectis-text-body-md-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-data-table-table th {\n    padding: var(--data-table-head-pad-block) var(--data-table-pad-inline);\n    text-align: start;\n    font-size: var(--vectis-text-body-md-size);\n    /*\n     * The heavier weight distinguishes a heading from the data under it, which is emphasis\n     * rather than a typographic role; hence a font token read directly.\n     */\n    font-weight: var(--vectis-font-weight-semibold);\n    color: var(--vectis-color-text-muted);\n    /*\n     * The heading row gets a tint of its own so it reads apart from the data. `muted` and not\n     * `sunken`: the striped rows already take `sunken`, and a heading painted the same would\n     * read as one more stripe.\n     */\n    background-color: var(--vectis-color-surface-muted);\n    border-block-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-data-table-table td {\n    padding: var(--data-table-pad-block) var(--data-table-pad-inline);\n    border-block-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-data-table-table tbody tr:last-child td {\n    border-block-end: none;\n  }\n\n  .v-data-table-table [data-align='end'] {\n    text-align: end;\n  }\n\n  .v-data-table-table [data-align='center'] {\n    text-align: center;\n  }\n\n  /* The checkbox column is reduced to the width of its content. A table lays its columns\n     out automatically, so asking for no width at all is what makes it take the least\n     possible. */\n  .v-data-table-stack-label {\n    display: none;\n  }\n\n  .v-data-table-table .v-data-table-select {\n    inline-size: 0;\n  }\n\n  .v-data-table[data-striped] tbody tr:nth-child(even) {\n    background-color: var(--vectis-color-surface-sunken);\n  }\n\n  /* Placed after the striping on purpose: the specificity is the same, so it is the order\n     that makes a selected row keep its tint on both odd and even rows. */\n  .v-data-table[data-selectable] tbody tr[data-selected] {\n    background-color: var(--vectis-color-accent-surface);\n  }\n\n  /* Forced colours flatten both tints to `Canvas`: the stripes are only a reading aid, but\n     a selected row would be told apart by its checkbox alone. It draws an inward outline in\n     the system selection colour, which the mode keeps. */\n  @media (forced-colors: active) {\n    .v-data-table[data-selectable] tbody tr[data-selected] {\n      outline: var(--vectis-focus-ring-width) solid Highlight;\n      outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n    }\n  }\n\n  /*\n   * A frozen heading relies on the opaque background every `th` already carries: the rows\n   * scroll underneath it, and a consumer restyling that background with a translucent colour\n   * will see them through.\n   */\n  .v-data-table[data-sticky-header] th {\n    position: sticky;\n    inset-block-start: 0;\n    z-index: 1;\n  }\n\n  .v-data-table-sort {\n    /*\n     * The icon context for the sort glyph. Without it the icon would fall back to one em; the\n     * heading's own text size; and come out visibly smaller than every other icon in the\n     * component.\n     */\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    border: none;\n    background: transparent;\n    padding: 0;\n    color: inherit;\n    font: inherit;\n    cursor: pointer;\n    /* Seen only on the focus ring: the control radius capped at half a line, VBreadcrumb's\n       link recipe, since a heading that wraps would otherwise round to half its height. */\n    border-radius: min(var(--vectis-radius-interactive), 0.5lh);\n  }\n\n  .v-data-table-sort:hover {\n    color: var(--vectis-color-text);\n  }\n\n  .v-data-table-sort:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* The glyph stays faint on every column that merely COULD be sorted: it announces that\n     the heading can be clicked without competing for attention with the one column\n     actually carrying the order. */\n  .v-data-table-sort-icon {\n    opacity: 0.35;\n  }\n\n  .v-data-table-sort[data-direction] .v-data-table-sort-icon {\n    opacity: 1;\n  }\n\n  .v-data-table-state {\n    padding: var(--vectis-space-6);\n    text-align: center;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-data-table-state-loading {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-data-table-footer {\n    flex: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-4);\n    padding-block-start: var(--vectis-space-3);\n    padding-block-end: var(--data-table-frame-pad);\n    padding-inline: var(--data-table-frame-pad);\n  }\n\n  /*\n   * The right-hand zone is pushed to the edge by an automatic margin rather than by an\n   * alignment on the footer. The two zones are siblings in the same row, and the count on the\n   * left has to stay at the OPPOSITE edge: any alignment set on the footer would move both of\n   * them together.\n   */\n  .v-data-table-footer-end {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-4);\n    margin-inline-start: auto;\n  }\n\n  .v-data-table-selection,\n  .v-data-table-range,\n  .v-data-table-per-page-label {\n    font-size: var(--vectis-text-body-md-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-data-table-per-page {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  /*\n   * The stacked form: once the COMPONENT is narrow, each row becomes a card carrying its own\n   * headings. It is entirely CSS, and the threshold is written as a literal length; these\n   * queries accept no variables.\n   */\n  @container (max-width: 640px) {\n    .v-data-table[data-responsive='stack'] .v-data-table-head {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n    }\n\n    /*\n     * The heading row is out of sight, so its CONTROLS leave the tab order with it: a sort\n     * button or a \"select all\" box the keyboard lands on and nobody can see. `visibility`\n     * is what takes a control out of the tab order in CSS, and it takes it out of the\n     * accessibility tree too, so a sortable heading hands its name to a plain text copy.\n     */\n    .v-data-table[data-responsive='stack'] .v-data-table-head :is(.v-data-table-sort, .v-checkbox) {\n      visibility: hidden;\n    }\n\n    .v-data-table[data-responsive='stack'] .v-data-table-stack-label {\n      display: inline;\n    }\n\n    .v-data-table[data-responsive='stack'] tbody tr {\n      display: block;\n      padding-block: var(--vectis-space-2);\n      border-block-end: 1px solid var(--vectis-color-border);\n    }\n\n    .v-data-table[data-responsive='stack'] tbody tr:last-child {\n      border-block-end: none;\n    }\n\n    .v-data-table[data-responsive='stack'] td {\n      display: flex;\n      justify-content: space-between;\n      align-items: baseline;\n      gap: var(--vectis-space-4);\n      padding: var(--vectis-space-1) var(--vectis-space-2);\n      border: none;\n      text-align: end;\n    }\n\n    /* Each cell writes its own column's name before itself, taken from the attribute the\n       template put there. It takes the overline type role, without forcing capitals. */\n    .v-data-table[data-responsive='stack'] td::before {\n      content: attr(data-label);\n      font-size: var(--vectis-text-overline-size);\n      font-weight: var(--vectis-text-overline-weight);\n      letter-spacing: var(--vectis-text-overline-tracking);\n      color: var(--vectis-color-text-muted);\n    }\n\n    /*\n     * The checkbox cell carries no column name; there is none; so it gets no heading and opens\n     * the card on its own line.\n     */\n    .v-data-table[data-responsive='stack'] td.v-data-table-select {\n      justify-content: flex-start;\n    }\n\n    .v-data-table[data-responsive='stack'] td.v-data-table-select::before {\n      content: none;\n    }\n\n    /* In a narrow component the search field drops under the title and takes the whole\n       width. This applies to both responsive forms, the toolbar never being part of what\n       scrolls. */\n    .v-data-table-search {\n      flex: 1 1 100%;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VDataTable.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDataTable/VDataTable.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"Row extends Record<string, unknown>\">\n// @core\n/**\n * Native table semantics remain intact. JavaScript adds sorting, paging, selection and\n * debounced search; browser measurements stay in browser tests.\n */\n\nimport { computed, ref, useId, useSlots, watch, watchEffect } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VCheckbox from '../VCheckbox/VCheckbox.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { arrow_downward as arrowDownwardIcon } from '../VIcon/icons/arrow_downward'\nimport { arrow_drop_down as arrowDropDownIcon } from '../VIcon/icons/arrow_drop_down'\nimport { arrow_upward as arrowUpwardIcon } from '../VIcon/icons/arrow_upward'\nimport { search as searchIcon } from '../VIcon/icons/search'\nimport { swap_vert as swapVertIcon } from '../VIcon/icons/swap_vert'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport VMenu from '../VMenu/VMenu.vue'\nimport VMenuItem from '../VMenu/VMenuItem.vue'\nimport VPagination from '../VPagination/VPagination.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { toggleValue } from '../../utils/array'\nimport { cssSize } from '../../utils/css'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useTimer } from '../../composables/useTimer'\nimport { useLocale, useMessages } from '../../i18n/state'\n\n/** How a column's content is aligned. */\nexport type DataTableColumnAlign = 'start' | 'center' | 'end'\n\n/** One column of the table. */\nexport interface DataTableColumn {\n  /** Which field of a row it shows, and the name its slots are addressed by. */\n  key: string\n  /** Its heading. */\n  label: string\n  /** Lets the reader sort by this column. */\n  sortable?: boolean\n  /** How its content is aligned. Numbers usually belong at the end. */\n  align?: DataTableColumnAlign\n}\n\n/** Which way a column is sorted: A to Z, or Z to A. */\nexport type DataTableSortDirection = 'asc' | 'desc'\n\n/** Which column the table is sorted by, and in which direction. */\nexport interface DataTableSort {\n  /** The `key` of the column the rows are ordered by. */\n  key: string\n  /** Which way they are ordered. */\n  direction: DataTableSortDirection\n}\n\n/** How a row is identified: by the field named in `rowKey`, or failing that by its position. */\nexport type DataTableRowId = string | number\n\n/**\n * Everything the table is currently being asked for, reported whenever it changes so a\n * server can answer it. What is not set is `null` rather than left out, so the object keeps\n * the same keys once serialized into a request.\n */\nexport interface DataTableParams {\n  /** The page asked for, from 1. */\n  page: number\n  /** How many rows a page holds, `null` when the table is not paginated. */\n  perPage: number | null\n  /** The `key` of the sorted column, `null` when the rows are not sorted. */\n  sortKey: string | null\n  /** Which way they are sorted, `null` when they are not. */\n  sortDirection: DataTableSortDirection | null\n  /** The committed search, empty when nothing is searched for. */\n  search: string\n}\n\n/** What the `cell-<key>` slots receive. */\nexport interface DataTableCellSlotProps<Row extends Record<string, unknown>> {\n  /** The row the cell belongs to. */\n  row: Row\n  /** The value of the column's field in that row. */\n  value: unknown\n  /** The column the cell belongs to. */\n  column: DataTableColumn\n}\n\n/** What the `head-<key>` slots receive. */\nexport interface DataTableHeadSlotProps {\n  /** The column the heading belongs to. */\n  column: DataTableColumn\n}\n\n/** What the `#empty` slot receives. */\nexport interface DataTableEmptySlotProps {\n  /** The search that produced the empty result, empty when nothing was searched for. */\n  search: string\n}\n\n/** The rows on show, as `rangeText` receives them, counted from 1. */\nexport interface DataTableRange {\n  /** The position of the first row on show. */\n  start: number\n  /** The position of the last row on show. */\n  end: number\n  /** How many rows there are in all. */\n  total: number\n}\n\n/** How much decoration the table carries. */\nexport type DataTableVariant = 'flat' | 'outlined'\n\n// This interface is exported rather than kept local, and it is generic rather than referring to\n// the component's own type parameter. A component typed over its rows inlines the whole\n// signature of its props into the declarations it emits, so a name that is not exported cannot\n// be written there and the build of the type declarations fails.\nexport interface DataTableProps<Row extends Record<string, unknown>> {\n  /** The columns to show, in order. */\n  columns: DataTableColumn[]\n  /** The rows to show. */\n  rows: Row[]\n  /** Which field identifies a row. */\n  rowKey?: string\n  /**\n   * A sentence describing what the table holds. It is announced before the table itself,\n   * and is what tells a screen reader user whether it is worth exploring.\n   */\n  caption?: string\n  /**\n   * How the table is framed: nothing at all, or a card with a raised background, a border\n   * and rounded corners.\n   */\n  variant?: DataTableVariant\n  /** Shows that the rows are being loaded. */\n  loading?: boolean\n  /**\n   * What is written beside the spinner while the rows are loading. It falls back to the design\n   * system dictionary.\n   */\n  loadingText?: string\n  /** What is said when there is no row to show. It falls back to the design system dictionary. */\n  emptyText?: string\n  /** A title above the table, on the left of its toolbar. */\n  title?: string\n  /** Adds a search field to the toolbar. */\n  searchable?: boolean\n  /** What that field says while empty. It falls back to the design system dictionary. */\n  searchPlaceholder?: string\n  /**\n   * What screen readers announce for the search field. It falls back to the design\n   * system dictionary.\n   */\n  searchLabel?: string\n  /**\n   * When a server does the searching, how long to wait after a keystroke before asking\n   * it, in milliseconds. Zero asks at once.\n   */\n  searchDebounce?: number\n  /** Tints every other row, which helps the eye follow a long line across the table. */\n  striped?: boolean\n  /**\n   * Keeps the column headings in place while the rows scroll under them. It needs a\n   * bounded scrolling area to work: either the `height` prop, or a parent with a height\n   * of its own.\n   */\n  stickyHeader?: boolean\n  /** Tightens the cells by one step, and everything the table renders with them. */\n  compact?: boolean\n  /**\n   * The height of the whole component, toolbar and pagination included: a number is read as\n   * pixels, anything else as a CSS length. Left out, the table takes its parent's height\n   * whenever the parent has one.\n   */\n  height?: number | string\n  /** The heading icon of a column that can be sorted but currently is not. */\n  sortIcon?: IconSource\n  /**\n   * The icon of an ascending sort. It points DOWN by default, the spreadsheet\n   * convention: sorting A to Z reads downwards.\n   */\n  sortAscIcon?: IconSource\n  /** The icon of a descending sort. */\n  sortDescIcon?: IconSource\n  /** The choices offered for how many rows a page holds. */\n  perPageOptions?: number[]\n  /** What that choice is called. It falls back to the design system dictionary. */\n  perPageText?: string\n  /**\n   * How many rows there are in all on the server. It is what lets the pagination and the\n   * range be right when the table only ever holds one page.\n   */\n  total?: number\n  /** Shows which rows are being looked at (\"1–10 of 42\") in the footer. */\n  showRange?: boolean\n  /** Rephrases that range. It falls back to the design system dictionary. */\n  rangeText?: (range: DataTableRange) => string\n  /** Adds a checkbox to every row, and one in the heading to take the whole page. */\n  selectable?: boolean\n  /**\n   * What the heading checkbox is announced as. It falls back to the design system\n   * dictionary.\n   */\n  selectAllLabel?: string\n  /**\n   * How the selection is summed up in the footer. It says nothing at all when nothing is\n   * selected, and falls back to the design system dictionary.\n   */\n  selectionText?: (count: number) => string\n  /**\n   * What a row's checkbox is announced as. \"Select row\" tells a screen reader user nothing\n   * about WHICH row, so this is worth supplying with something from the row itself. It falls\n   * back to the design system dictionary, which numbers the rows from 1.\n   */\n  selectRowLabel?: (row: Row, index: number) => string\n  /**\n   * Hands the searching, the sorting and the paging over to a server: the rows are shown\n   * exactly as they arrive, and every change of what is being asked for is reported so\n   * the server can answer it.\n   */\n  serverSide?: boolean\n}\n\nconst props = withDefaults(defineProps<DataTableProps<Row>>(), {\n  rowKey: undefined,\n  caption: undefined,\n  variant: 'flat',\n  loading: false,\n  loadingText: undefined,\n  emptyText: undefined,\n  title: undefined,\n  searchable: false,\n  searchPlaceholder: undefined,\n  searchLabel: undefined,\n  searchDebounce: 250,\n  striped: false,\n  stickyHeader: false,\n  compact: false,\n  height: undefined,\n  sortIcon: () => swapVertIcon,\n  sortAscIcon: () => arrowDownwardIcon,\n  sortDescIcon: () => arrowUpwardIcon,\n  perPageOptions: undefined,\n  perPageText: undefined,\n  total: undefined,\n  showRange: false,\n  rangeText: undefined,\n  selectable: false,\n  selectAllLabel: undefined,\n  selectionText: undefined,\n  selectRowLabel: undefined,\n  serverSide: false,\n})\n\nconst m = useMessages()\nconst vectisLocale = useLocale()\nconst resolvedEmptyText = computed(() => props.emptyText ?? m.value.dataTable.empty)\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.dataTable.loading)\nconst resolvedSearchPlaceholder = computed(\n  () => props.searchPlaceholder ?? m.value.dataTable.searchPlaceholder,\n)\nconst resolvedSearchLabel = computed(() => props.searchLabel ?? m.value.dataTable.searchLabel)\nconst resolvedPerPageText = computed(() => props.perPageText ?? m.value.dataTable.perPage)\nconst resolvedSelectAllLabel = computed(() => props.selectAllLabel ?? m.value.dataTable.selectAll)\n\n/** Which column the rows are sorted by, and in which direction. */\nconst sort = defineModel<DataTableSort | null>('sort', { default: null })\n/** The page being shown, counted from 1. */\nconst page = defineModel<number>('page', { default: 1 })\n/**\n * How many rows a page holds. Any value above zero turns the pagination on, so passing\n * one down without binding it is enough to enable it.\n */\nconst perPage = defineModel<number | undefined>('perPage', { default: undefined })\n/*\n * `sort` is `null` because the TABLE writes that state itself, a third click on a heading\n * clearing the order, and a model the component writes needs a value a consumer can store and\n * compare. `perPage` is `undefined` because nothing here ever clears it: it is simply a model\n * that was not given.\n */\n/** The selected rows, as the identities `rowKey` gives them, never the row objects themselves. */\nconst selected = defineModel<DataTableRowId[]>('selected', { default: () => [] })\n/**\n * What is typed in the search field, empty to begin with. Only the declared columns are\n * searched, accent- and case-insensitively; in `serverSide` mode nothing is filtered here\n * and the term is reported through `update:params` instead.\n */\nconst search = defineModel<string>('search', { default: '' })\n\nconst emit = defineEmits<{\n  /**\n   * What the table is now being asked for, when a server is answering: the page, the page size,\n   * the sort or the search has changed, the last one after its delay.\n   */\n  'update:params': [params: DataTableParams]\n}>()\n\ndefineSlots<{\n  /** What a cell of a given column shows: a slot named after that column's key. */\n  [name: `cell-${string}`]: (scope: DataTableCellSlotProps<Row>) => unknown\n  /** What a column's heading shows: a slot named after that column's key. */\n  [name: `head-${string}`]: (scope: DataTableHeadSlotProps) => unknown\n  /** The left side of the toolbar, replacing the `title` prop. */\n  title?(): unknown\n  /** What the table shows while its rows are loading, replacing the spinner and its text. */\n  loading?(): unknown\n  /**\n   * What the table shows when there is no row to show, replacing `emptyText`. It receives the\n   * search that produced the empty result, empty when nothing was searched for.\n   */\n  empty?(scope: DataTableEmptySlotProps): unknown\n}>()\n\n// `class` and `style` stay on the wrapper, where a consumer expects to place the component;\n// everything else; an id, the aria-*; goes to the `<table>` itself, the only element they\n// validly describe.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst slots = useSlots()\n\n// A template ref on the component reaches the wrapper, a layout box; the `<table>` is where\n// the consumer's attributes land and what they describe.\nconst tableEl = ref<HTMLTableElement | null>(null)\ndefineExpose({\n  /** The `<table>` element, where the consumer's attributes land. */\n  el: tableEl,\n})\n\n// @a11y\n/*\n * A caption already does, and so does a consumer's own `aria-label` or `aria-labelledby`, which\n * a reference to the title would override. Bound before the forwarded attributes, like every\n * state the component owns.\n */\nconst titleId = useId()\nconst tableLabelledBy = computed(() =>\n  props.caption ||\n  !(props.title || slots.title) ||\n  attrs['aria-label'] !== undefined ||\n  attrs['aria-labelledby'] !== undefined\n    ? undefined\n    : titleId,\n)\n\n// @devwarn\nif (isDev) {\n  if (props.selectable && !props.rowKey)\n    console.warn(\n      '[VDataTable] `selectable` without `rowKey` — index-based identities are corrupted by sorting, filtering and pagination.',\n    )\n  /*\n   * A key that is missing, or not a string or a number, turns into the same text on every\n   * row (\"undefined\"), and two rows sharing a key share an identity: ticking one ticks them\n   * all, and the rows' own `:key`s collide. Once per instance and per kind.\n   */\n  const warned = new Set<string>()\n  watchEffect(() => {\n    const key = props.rowKey\n    if (!key) return\n    const seen = new Set<unknown>()\n    for (const row of props.rows) {\n      const value = row[key]\n      if (typeof value !== 'string' && typeof value !== 'number') {\n        if (!warned.has('type')) {\n          warned.add('type')\n          console.warn(\n            `[VDataTable] \\`rowKey\\` \"${key}\" is missing or is not a string or a number on some rows: those rows share one identity.`,\n          )\n        }\n      } else if (seen.has(value)) {\n        if (!warned.has('duplicate')) {\n          warned.add('duplicate')\n          console.warn(\n            `[VDataTable] \\`rowKey\\` \"${key}\" holds the value \"${value}\" twice: rows are told apart by it, so it must be unique.`,\n          )\n        }\n      } else seen.add(value)\n    }\n  })\n}\n\n/*\n * A key that is already a string or a number is returned AS IT IS. The selection holds these\n * identities and is looked up with a Set, which tells the number 7 from the string \"7\": turned\n * into text, a table keyed by numeric ids never found a selected row again, so every checkbox\n * stayed unticked.\n */\nfunction rowIdentity(row: Row, index: number): DataTableRowId {\n  if (!props.rowKey) return index\n  const key = row[props.rowKey]\n  return typeof key === 'string' || typeof key === 'number' ? key : String(key)\n}\n\n// Searching fields the reader cannot see would return rows for reasons nothing on screen\n// explains.\n/*\n * The filter below re-reads the whole table on every keystroke: ten thousand rows across five\n * columns is fifty thousand normalizations per character typed without it.\n */\nconst normalizedOf = createNormalizedCache<Row>()\nconst normalizedCell = (row: Row, key: string) => normalizedOf(row, String(row[key] ?? ''), key)\n\nconst filteredRows = computed(() => {\n  if (props.serverSide || !props.searchable) return props.rows\n  const needle = normalizeText((search.value ?? '').trim())\n  if (!needle) return props.rows\n  return props.rows.filter((row) =>\n    props.columns.some((column) => normalizedCell(row, column.key).includes(needle)),\n  )\n})\n\n/*\n * The locale must nonetheless stay EXPLICIT: an `undefined` one resolves differently in Node\n * and in the browser, so the row order would diverge across hydration.\n */\nconst collator = computed(() => new Intl.Collator(vectisLocale.value, { numeric: true }))\n\n/*\n * What a cell is compared by. A `Date` by its instant: as text it collates on `toString()`,\n * which opens with the WEEKDAY, so Monday the 5th sorted before Saturday the 3rd.\n */\nconst NUMERIC_TEXT = /^\\s*[+-]?(\\d+\\.?\\d*|\\.\\d+)(e[+-]?\\d+)?\\s*$/i\nfunction sortKey(value: unknown): unknown {\n  if (value instanceof Date) return value.getTime()\n  if (typeof value === 'string' && NUMERIC_TEXT.test(value)) return Number(value)\n  return value\n}\n\nconst sortedRows = computed(() => {\n  const current = sort.value\n  if (!current || props.serverSide) return filteredRows.value\n  const factor = current.direction === 'asc' ? 1 : -1\n  const compare = collator.value.compare\n  return [...filteredRows.value].sort((a, b) => {\n    const av = sortKey(a[current.key])\n    const bv = sortKey(b[current.key])\n    if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * factor\n    return compare(String(av ?? ''), String(bv ?? '')) * factor\n  })\n})\n\nconst paginated = computed(() => (perPage.value ?? 0) > 0)\nconst totalCount = computed(() =>\n  props.serverSide ? (props.total ?? props.rows.length) : filteredRows.value.length,\n)\nconst pageCount = computed(() =>\n  paginated.value ? Math.max(1, Math.ceil(totalCount.value / (perPage.value ?? 1))) : 1,\n)\n// The page actually shown is CLAMPED by derivation and the model is never rewritten: a\n// search that leaves fewer pages simply falls back to the last one, and typing a\n// character that would have emptied the table does not silently move the consumer's own\n// page number.\nconst currentPage = computed(() => clamp(page.value, 1, pageCount.value))\n\nconst displayedRows = computed(() => {\n  // With a server answering, the rows received ARE the current page: cutting them again\n  // would show a tenth of a page.\n  if (props.serverSide || !paginated.value) return sortedRows.value\n  const start = (currentPage.value - 1) * (perPage.value ?? 0)\n  return sortedRows.value.slice(start, start + (perPage.value ?? 0))\n})\n\nfunction toggleSort(key: string) {\n  const current = sort.value\n  if (!current || current.key !== key) sort.value = { key, direction: 'asc' }\n  else if (current.direction === 'asc') sort.value = { key, direction: 'desc' }\n  else sort.value = null\n}\n\n// @a11y\n// Only the column actually sorted carries the attribute. Setting it on every heading would have a screen reader announce \"not sorted\" on each one in turn, drowning\n// the single piece of information that matters: which column the order comes from.\nfunction ariaSort(column: DataTableColumn): 'ascending' | 'descending' | undefined {\n  if (sort.value?.key !== column.key) return undefined\n  return sort.value.direction === 'asc' ? 'ascending' : 'descending'\n}\n\n/**\n * Which icon a column's heading shows: a neutral one on any sortable column, and the\n * arrow of the current direction on the one being sorted by.\n *\n * It is deliberately named differently from the prop it falls back to: written the same,\n * the function would shadow the prop inside the template and the icons would never be\n * overridable.\n */\nfunction sortIconFor(column: DataTableColumn): IconSource {\n  if (sort.value?.key !== column.key) return props.sortIcon\n  return sort.value.direction === 'asc' ? props.sortAscIcon : props.sortDescIcon\n}\n\n// And when a server answers, nothing native waits before asking it, so that has to be written.\n// The waiting is delegated to `useTimer`; a delay of zero running at once, cancellation when\n// the component goes away; and the term that was actually committed is what the parameters\n// below report.\nconst committedSearch = ref(search.value)\nconst searchTimer = useTimer()\n\nfunction commitSearch() {\n  // A term typed and erased inside the debounce is no new search: going back to page 1\n  // and asking the server again would be a request for what is already on screen.\n  if (search.value === committedSearch.value) return\n  committedSearch.value = search.value\n  page.value = 1\n}\n\nwatch(search, () => {\n  if (!props.serverSide) {\n    page.value = 1\n    return\n  }\n  searchTimer.start(commitSearch, props.searchDebounce)\n})\n\nconst emptySearch = computed(() => (props.serverSide ? committedSearch.value : search.value))\n\n/*\n * `page` is the model, never the clamped `currentPage`. The clamp reads `total`, which is the\n * server's own answer: read here, a response that changed the total would move the parameters\n * and ask for the page again, and a consumer clearing `total` while it loads would send the\n * reader back to page 1.\n */\n// Committing a search and going back to the first page happen one after the other, but both\n// land in the same flush, so this runs once on the final values; never two requests for what\n// the reader experienced as a single action. Compared by value: a parent handing down an equal\n// `sort` object is no new request.\nwatch(\n  [\n    page,\n    () => perPage.value ?? null,\n    () => sort.value?.key ?? null,\n    () => sort.value?.direction ?? null,\n    committedSearch,\n  ],\n  ([page, perPage, sortKey, sortDirection, search]) => {\n    if (props.serverSide) emit('update:params', { page, perPage, sortKey, sortDirection, search })\n  },\n)\n\n// The selection. The heading checkbox covers the rows currently VISIBLE and not the whole\n// table: a box that silently selected forty thousand rows would be a trap.\nconst selectedSet = computed(() => new Set<DataTableRowId>(selected.value))\nconst visibleIds = computed(() => displayedRows.value.map((row, index) => rowIdentity(row, index)))\nconst allVisibleSelected = computed(\n  () => visibleIds.value.length > 0 && visibleIds.value.every((id) => selectedSet.value.has(id)),\n)\nconst masterIndeterminate = computed(\n  () => !allVisibleSelected.value && visibleIds.value.some((id) => selectedSet.value.has(id)),\n)\n\n/*\n * A row is asked about by the identity `visibleIds` already holds for it: the template reads\n * `visibleIds[index]` for the key, the tint and the checkbox alike, rather than deriving it\n * again three or four times per row per render.\n */\nconst isSelected = (id: DataTableRowId) => selectedSet.value.has(id)\n\nfunction toggleRow(id: DataTableRowId) {\n  selected.value = toggleValue(selected.value, id)\n}\n\n// It only ever touches the rows on screen, so what was selected on the other pages\n// survives moving between them.\n// Refused with no row on screen, or while the rows on screen are the PREVIOUS ones behind\n// the loading state: ticked there, it stayed ticked with nothing selected, or selected rows\n// the reader could not see.\nconst masterDisabled = computed(() => visibleIds.value.length === 0 || props.loading)\n\nfunction toggleMaster() {\n  if (masterDisabled.value) return\n  const ids = visibleIds.value\n  if (allVisibleSelected.value) {\n    const visible = new Set(ids)\n    selected.value = selected.value.filter((id) => !visible.has(id))\n  } else {\n    const current = selectedSet.value\n    selected.value = [...selected.value, ...ids.filter((id) => !current.has(id))]\n  }\n}\n\n// @a11y\n// Without this every checkbox in the column would be announced identically, and a screen\n// reader user would have no way of knowing which row they were about to select.\nfunction rowSelectLabel(row: Row, index: number): string {\n  // The position in the whole table, or every page would have its own \"Select row 1\". The\n  // dictionary counts from one as a human does, the prop from zero as code does.\n  const position = (paginated.value ? (currentPage.value - 1) * (perPage.value ?? 0) : 0) + index\n  return props.selectRowLabel?.(row, position) ?? m.value.dataTable.selectRow(position + 1)\n}\n\nwatch(perPage, () => {\n  page.value = 1\n})\n\nconst colCount = computed(() => props.columns.length + (props.selectable ? 1 : 0))\n\n// @a11y\n/**\n * It is rendered, empty, as soon as rows can be selected at all. A region meant to announce its\n * own changes must already exist before the first change: inserted into the page at the same\n * moment as its text, it announces nothing, and the first row selected would pass in silence.\n */\nconst selectionSummary = computed(() => {\n  const count = selected.value.length\n  if (count === 0) return ''\n  if (props.selectionText) return props.selectionText(count)\n  return m.value.dataTable.selection(count)\n})\n\nconst rangeSummary = computed(() => {\n  const per = perPage.value ?? 0\n  const total = totalCount.value\n  const start = total === 0 ? 0 : (currentPage.value - 1) * per + 1\n  const end = Math.min(currentPage.value * per, total)\n  return props.rangeText?.({ start, end, total }) ?? m.value.dataTable.range({ start, end, total })\n})\n\n// The height is applied to the whole component and not as a ceiling on the scrolling area. A\n// soft ceiling remains available to the consumer through a maximum height of their own: the\n// component is a column whose scrolling area can be compressed.\nconst heightStyle = computed<StyleValue | undefined>(() =>\n  props.height !== undefined ? { blockSize: cssSize(props.height) } : undefined,\n)\n</script>\n\n<template>\n  <div\n    class=\"v-data-table\"\n    :class=\"rootClass\"\n    :style=\"[heightStyle, rootStyle]\"\n    :data-variant=\"variant\"\n    :data-striped=\"striped ? '' : undefined\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-sticky-header=\"stickyHeader ? '' : undefined\"\n    :data-selectable=\"selectable ? '' : undefined\"\n  >\n    <div v-if=\"title || $slots.title || searchable\" class=\"v-data-table-toolbar\">\n      <VTypography :id=\"titleId\" as=\"div\" variant=\"heading-4\" class=\"v-data-table-title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </VTypography>\n      <VInput\n        v-if=\"searchable\"\n        v-model=\"search\"\n        class=\"v-data-table-search\"\n        type=\"search\"\n        size=\"sm\"\n        :compact=\"compact\"\n        :icon-start=\"searchIcon\"\n        clearable\n        :placeholder=\"resolvedSearchPlaceholder\"\n        :aria-label=\"resolvedSearchLabel\"\n      />\n    </div>\n\n    <div class=\"v-data-table-scroller\">\n      <table\n        ref=\"tableEl\"\n        class=\"v-data-table-table\"\n        :aria-labelledby=\"tableLabelledBy\"\n        v-bind=\"forwardedAttrs\"\n      >\n        <caption v-if=\"caption\" class=\"v-data-table-caption\">\n          {{\n            caption\n          }}\n        </caption>\n        <thead class=\"v-data-table-head\">\n          <tr>\n            <th v-if=\"selectable\" scope=\"col\" class=\"v-data-table-select\">\n              <VCheckbox\n                :model-value=\"allVisibleSelected\"\n                :indeterminate=\"masterIndeterminate\"\n                :disabled=\"masterDisabled\"\n                :aria-label=\"resolvedSelectAllLabel\"\n                @update:model-value=\"toggleMaster\"\n              />\n            </th>\n            <th\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              scope=\"col\"\n              :data-align=\"column.align\"\n              :aria-sort=\"ariaSort(column)\"\n            >\n              <button\n                v-if=\"column.sortable\"\n                type=\"button\"\n                class=\"v-data-table-sort\"\n                :data-direction=\"sort?.key === column.key ? sort.direction : undefined\"\n                @click=\"toggleSort(column.key)\"\n              >\n                <slot :name=\"`head-${column.key}`\" :column=\"column\">{{ column.label }}</slot>\n                <!-- Decorative, and deliberately so: given no label, an icon hides itself\n                     from screen readers. What the sort state is, is already carried by\n                     the heading itself. -->\n                <VIcon class=\"v-data-table-sort-icon\" v-bind=\"iconProps(sortIconFor(column))\" />\n              </button>\n              <template v-else>\n                <slot :name=\"`head-${column.key}`\" :column=\"column\">{{ column.label }}</slot>\n              </template>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <!--\n            The order matters: loading is checked before emptiness, so a table waiting for its\n            rows never claims there are none.\n          -->\n          <tr v-if=\"loading\">\n            <td :colspan=\"colCount\" class=\"v-data-table-state\">\n              <slot name=\"loading\">\n                <!-- The spinner carries the text for a screen reader, so the visible copy is\n                     hidden from it: read twice, the cell would say it is loading twice. -->\n                <span class=\"v-data-table-state-loading\">\n                  <VSpinner :label=\"resolvedLoadingText\" />\n                  <span aria-hidden=\"true\">{{ resolvedLoadingText }}</span>\n                </span>\n              </slot>\n            </td>\n          </tr>\n          <tr v-else-if=\"displayedRows.length === 0\">\n            <td :colspan=\"colCount\" class=\"v-data-table-state\">\n              <slot name=\"empty\" :search=\"emptySearch\">{{ resolvedEmptyText }}</slot>\n            </td>\n          </tr>\n          <template v-else>\n            <tr\n              v-for=\"(row, index) in displayedRows\"\n              :key=\"visibleIds[index]\"\n              :data-selected=\"selectable && isSelected(visibleIds[index]!) ? '' : undefined\"\n            >\n              <!--\n                The selection is marked with a plain attribute and not with the ARIA selected\n                state, which is invalid on the row of a table: it belongs to a grid. What tells\n                assistive technology that a row is selected is its checkbox being checked.\n              -->\n              <td v-if=\"selectable\" class=\"v-data-table-select\">\n                <VCheckbox\n                  :model-value=\"isSelected(visibleIds[index]!)\"\n                  :aria-label=\"rowSelectLabel(row, index)\"\n                  @update:model-value=\"toggleRow(visibleIds[index]!)\"\n                />\n              </td>\n              <td v-for=\"column in columns\" :key=\"column.key\" :data-align=\"column.align\">\n                <slot\n                  :name=\"`cell-${column.key}`\"\n                  :row=\"row\"\n                  :value=\"row[column.key]\"\n                  :column=\"column\"\n                >\n                  {{ row[column.key] }}\n                </slot>\n              </td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- The footer has two zones: what is selected on the left, and on the right the page\n         size, the range and the pagination, in that order. -->\n    <div v-if=\"paginated || selectable\" class=\"v-data-table-footer\">\n      <span v-if=\"selectable\" class=\"v-data-table-selection\" aria-live=\"polite\">{{\n        selectionSummary\n      }}</span>\n      <div v-if=\"paginated\" class=\"v-data-table-footer-end\">\n        <div v-if=\"perPageOptions?.length\" class=\"v-data-table-per-page\">\n          <span class=\"v-data-table-per-page-label\" aria-hidden=\"true\">{{\n            resolvedPerPageText\n          }}</span>\n          <!-- The panel is told to match its trigger, which here replaces the default\n               minimum width with something sensible: a menu of \"10\", \"25\", \"50\" has no\n               use for the width a menu of commands assumes, and it still cannot end up\n               narrower than the button opening it. -->\n          <VMenu size=\"sm\" :compact=\"compact\" placement=\"top-end\" match-trigger>\n            <template #trigger=\"{ triggerProps }\">\n              <VButton\n                variant=\"ghost\"\n                tone=\"neutral\"\n                size=\"sm\"\n                :compact=\"compact\"\n                v-bind=\"triggerProps\"\n                :aria-label=\"m.dataTable.perPageValue(resolvedPerPageText, perPage ?? 0)\"\n              >\n                {{ perPage }}\n                <VIcon :name=\"arrowDropDownIcon\" />\n              </VButton>\n            </template>\n            <VMenuItem\n              v-for=\"option in perPageOptions\"\n              :key=\"option\"\n              :label=\"String(option)\"\n              :selected=\"option === perPage\"\n              @select=\"perPage = option\"\n            />\n          </VMenu>\n        </div>\n        <span v-if=\"showRange\" class=\"v-data-table-range\" aria-live=\"polite\">{{\n          rangeSummary\n        }}</span>\n        <!--\n          Named after the table rather than with the generic pagination wording: a page holding\n          this table and a pagination of its own would otherwise expose two navigation landmarks\n          with the same name, and a screen reader user could not tell them apart.\n        -->\n        <VPagination\n          v-model=\"page\"\n          :label=\"m.dataTable.pagination\"\n          :length=\"pageCount\"\n          size=\"sm\"\n          :compact=\"compact\"\n          align=\"end\"\n          :total-visible=\"0\"\n          edge-controls\n          detached\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-data-table {\n    /*\n     * It does not go through the shared control scale; there is no single control height in a\n     * table; which is the same case VAccordion is in.\n     */\n    --data-table-pad-block: var(--vectis-space-3);\n    --data-table-pad-inline: var(--vectis-space-3);\n    --data-table-head-pad-block: var(--vectis-space-2);\n\n    /* The gutter between the frame and what it holds: nothing when the table is\n       unframed, so the caption, the toolbar and the footer sit flush with the edge, and\n       the cells' own inline padding as soon as a frame appears. */\n    --data-table-frame-pad: 0px;\n\n    font-family: var(--vectis-text-family);\n\n    /*\n     * Deliberately no `min-block-size: 0` here. Inside a flex column parent too short for it,\n     * the automatic minimum is what keeps the table at its natural height instead of letting it\n     * be crushed to nothing.\n     */\n    display: flex;\n    flex-direction: column;\n    block-size: 100%;\n  }\n\n  .v-data-table[data-compact] {\n    --data-table-pad-block: var(--vectis-space-2);\n    --data-table-pad-inline: var(--vectis-space-2);\n    --data-table-head-pad-block: var(--vectis-space-1);\n  }\n\n  /*\n   * The card. The unframed default has nothing to undo, since it declares no decoration at all;\n   * whatever surrounds the table is what provides the surface then.\n   */\n  .v-data-table[data-variant='outlined'] {\n    --data-table-frame-pad: var(--data-table-pad-inline);\n\n    background: var(--vectis-color-surface-raised);\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n    /*\n     * `clip` and not `hidden`. Hiding the overflow would make this element a scroll container\n     * of its own, and the sticky heading would then anchor to IT rather than to the area that\n     * actually scrolls; which is to say it would not stick at all.\n     */\n    overflow: clip;\n  }\n\n  /*\n   * `min-block-size: 0` is load-bearing; a flex item refuses by default to shrink below its\n   * content, so without it the area never compresses and the table overflows instead of\n   * scrolling.\n   */\n  .v-data-table-scroller {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow: auto;\n  }\n\n  .v-data-table-toolbar {\n    flex: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--vectis-space-3);\n    padding-block-start: var(--data-table-frame-pad);\n    padding-block-end: var(--vectis-space-3);\n    padding-inline: var(--data-table-frame-pad);\n  }\n\n  /*\n   * It is set through the colour VARIABLE that component reads, and not with a plain colour\n   * declaration. That declaration would collide with VTypography's own at equal specificity,\n   * and the winner would be decided by whichever sheet the consumer's bundler put last.\n   */\n  .v-data-table-title {\n    --typography-color: var(--vectis-color-text);\n  }\n\n  /* The search field is given a width of its own, overriding the full width VInput takes\n     by default. The selector is qualified by its context, which makes it one step more\n     specific than VInput's own rule and therefore independent of the order the two sheets\n     end up in. */\n  .v-data-table-toolbar .v-input {\n    inline-size: var(--vectis-control-size-table-search);\n    max-inline-size: 100%;\n  }\n\n  .v-data-table-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: var(--vectis-text-body-md-size);\n    color: var(--vectis-color-text);\n  }\n\n  .v-data-table-caption {\n    padding-block-end: var(--vectis-space-3);\n    padding-inline: var(--data-table-frame-pad);\n    text-align: start;\n    font-size: var(--vectis-text-body-md-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-data-table-table th {\n    padding: var(--data-table-head-pad-block) var(--data-table-pad-inline);\n    text-align: start;\n    font-size: var(--vectis-text-body-md-size);\n    /*\n     * The heavier weight distinguishes a heading from the data under it, which is emphasis\n     * rather than a typographic role; hence a font token read directly.\n     */\n    font-weight: var(--vectis-font-weight-semibold);\n    color: var(--vectis-color-text-muted);\n    /*\n     * The heading row gets a tint of its own so it reads apart from the data. `muted` and not\n     * `sunken`: the striped rows already take `sunken`, and a heading painted the same would\n     * read as one more stripe.\n     */\n    background-color: var(--vectis-color-surface-muted);\n    border-block-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-data-table-table td {\n    padding: var(--data-table-pad-block) var(--data-table-pad-inline);\n    border-block-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-data-table-table tbody tr:last-child td {\n    border-block-end: none;\n  }\n\n  .v-data-table-table [data-align='end'] {\n    text-align: end;\n  }\n\n  .v-data-table-table [data-align='center'] {\n    text-align: center;\n  }\n\n  /* The checkbox column is reduced to the width of its content. A table lays its columns\n     out automatically, so asking for no width at all is what makes it take the least\n     possible. */\n  .v-data-table-table .v-data-table-select {\n    inline-size: 0;\n  }\n\n  .v-data-table[data-striped] tbody tr:nth-child(even) {\n    background-color: var(--vectis-color-surface-sunken);\n  }\n\n  /* Placed after the striping on purpose: the specificity is the same, so it is the order\n     that makes a selected row keep its tint on both odd and even rows. */\n  .v-data-table[data-selectable] tbody tr[data-selected] {\n    background-color: var(--vectis-color-accent-surface);\n  }\n\n  /* Forced colours flatten both tints to `Canvas`: the stripes are only a reading aid, but\n     a selected row would be told apart by its checkbox alone. It draws an inward outline in\n     the system selection colour, which the mode keeps. */\n  @media (forced-colors: active) {\n    .v-data-table[data-selectable] tbody tr[data-selected] {\n      outline: var(--vectis-focus-ring-width) solid Highlight;\n      outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n    }\n  }\n\n  /*\n   * A frozen heading relies on the opaque background every `th` already carries: the rows\n   * scroll underneath it, and a consumer restyling that background with a translucent colour\n   * will see them through.\n   */\n  .v-data-table[data-sticky-header] th {\n    position: sticky;\n    inset-block-start: 0;\n    z-index: 1;\n  }\n\n  .v-data-table-sort {\n    /*\n     * The icon context for the sort glyph. Without it the icon would fall back to one em; the\n     * heading's own text size; and come out visibly smaller than every other icon in the\n     * component.\n     */\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    border: none;\n    background: transparent;\n    padding: 0;\n    color: inherit;\n    font: inherit;\n    cursor: pointer;\n    /* Seen only on the focus ring: the control radius capped at half a line, VBreadcrumb's\n       link recipe, since a heading that wraps would otherwise round to half its height. */\n    border-radius: min(var(--vectis-radius-interactive), 0.5lh);\n  }\n\n  .v-data-table-sort:hover {\n    color: var(--vectis-color-text);\n  }\n\n  .v-data-table-sort:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* The glyph stays faint on every column that merely COULD be sorted: it announces that\n     the heading can be clicked without competing for attention with the one column\n     actually carrying the order. */\n  .v-data-table-sort-icon {\n    opacity: 0.35;\n  }\n\n  .v-data-table-sort[data-direction] .v-data-table-sort-icon {\n    opacity: 1;\n  }\n\n  .v-data-table-state {\n    padding: var(--vectis-space-6);\n    text-align: center;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-data-table-state-loading {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-data-table-footer {\n    flex: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-4);\n    padding-block-start: var(--vectis-space-3);\n    padding-block-end: var(--data-table-frame-pad);\n    padding-inline: var(--data-table-frame-pad);\n  }\n\n  /*\n   * The right-hand zone is pushed to the edge by an automatic margin rather than by an\n   * alignment on the footer. The two zones are siblings in the same row, and the count on the\n   * left has to stay at the OPPOSITE edge: any alignment set on the footer would move both of\n   * them together.\n   */\n  .v-data-table-footer-end {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-4);\n    margin-inline-start: auto;\n  }\n\n  .v-data-table-selection,\n  .v-data-table-range,\n  .v-data-table-per-page-label {\n    font-size: var(--vectis-text-body-md-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-data-table-per-page {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VPagination/VPagination.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-pagination{display:flex}.v-pagination[data-responsive]{container:v-pagination/inline-size}.v-pagination[data-align=center]{justify-content:center}.v-pagination[data-align=end]{justify-content:flex-end}.v-pagination-page[data-size]{min-inline-size:var(--control-height);padding-inline:var(--vectis-space-2);transition:none}.v-pagination-ellipsis[data-size]{cursor:default}@container v-pagination (inline-size<=36rem){.v-pagination[data-responsive] .v-pagination-page[data-distance="3"]{display:none}}@container v-pagination (inline-size<=31rem){.v-pagination[data-responsive] .v-pagination-page[data-distance="2"],.v-pagination[data-responsive][data-controls=both] .v-pagination-control-label{display:none}}@container v-pagination (inline-size<=25rem){.v-pagination[data-responsive] .v-pagination-page[data-distance="1"],.v-pagination[data-responsive] .v-pagination-control:is([data-side=first],[data-side=last]){display:none}.v-pagination[data-responsive]>.v-pagination-items:not([data-detached])>[data-side=first]+.v-pagination-control[data-side=prev]{border-inline-start-color:var(--pagination-frame,transparent);border-start-start-radius:var(--vectis-radius-interactive);border-end-start-radius:var(--vectis-radius-interactive);margin-inline-start:0}.v-pagination[data-responsive]>.v-pagination-items:not([data-detached])>[data-side=first]+.v-pagination-control[data-side=prev]:before{content:none}.v-pagination[data-responsive]>.v-pagination-items:not([data-detached])>.v-pagination-control[data-side=next]:has(+[data-side=last]){border-inline-end-color:var(--pagination-frame,transparent);border-start-end-radius:var(--vectis-radius-interactive);border-end-end-radius:var(--vectis-radius-interactive)}}.v-pagination[data-item-variant=outline]{--pagination-frame:var(--vectis-color-border-strong)}.v-pagination[data-item-variant=outline]>*>:is(:disabled,[aria-disabled=true]){--pagination-frame:var(--vectis-color-border)}.v-pagination[data-item-variant=outline]>*>.v-pagination-page[aria-current=page]:is([data-variant=soft],[data-variant=ghost]){border-color:var(--pagination-frame)}@media (forced-colors:active){.v-pagination-page.v-pagination-page.v-pagination-page.v-pagination-page[aria-current=page]:not(:disabled,[aria-disabled=true]){forced-color-adjust:none;color:highlighttext;background-color:highlight;border-color:highlight;outline-color:canvastext}}}
+@layer vectis.components{.v-pagination{display:flex}.v-pagination[data-align=center]{justify-content:center}.v-pagination[data-align=end]{justify-content:flex-end}.v-pagination-page[data-size]{min-inline-size:var(--control-height);padding-inline:var(--vectis-space-2);transition:none}.v-pagination-ellipsis[data-size]{cursor:default}.v-pagination[data-item-variant=outline]{--pagination-frame:var(--vectis-color-border-strong)}.v-pagination[data-item-variant=outline]>*>:is(:disabled,[aria-disabled=true]){--pagination-frame:var(--vectis-color-border)}.v-pagination[data-item-variant=outline]>*>.v-pagination-page[aria-current=page]:is([data-variant=soft],[data-variant=ghost]){border-color:var(--pagination-frame)}@media (forced-colors:active){.v-pagination-page.v-pagination-page.v-pagination-page.v-pagination-page[aria-current=page]:not(:disabled,[aria-disabled=true]){forced-color-adjust:none;color:highlighttext;background-color:highlight;border-color:highlight;outline-color:canvastext}}}

package/dist/components/VPagination/VPagination.d.ts

@@ -25,7 +25,8 @@ interface PaginationProps {
     /**
      * How many slots to render, ellipses counted among them, so the row keeps exactly the same
      * width whichever page is current. Below 5, the row drops the bounds and the ellipses and
-     * shows that many consecutive pages around the current one. Left out, every page is rendered.
+     * shows that many consecutive pages around the current one. At 0, no page is rendered and the
+     * controls alone remain. Left out, every page is rendered.
      */
     totalVisible?: number;
     /**
@@ -57,10 +58,7 @@ interface PaginationProps {
     compact?: boolean;
     /** Raises the row off the page, on the terms of VButton's own `elevated`. */
     elevated?: boolean;
-    /**
-     * Where the row sits in the space it is given. It only matters in responsive mode,
-     * where the row takes the whole width available.
-     */
+    /** Where the row sits in the width it is given. */
     align?: PaginationAlign;
     /**
      * The previous and next buttons on either side of the pages: what they show, or `false` to
@@ -107,11 +105,6 @@ interface PaginationProps {
      * controls step OVER them rather than stopping at one.
      */
     disabledPages?: PaginationMatcher;
-    /**
-     * Lets the row shed pages as the space narrows, by asking about its own width. It is
-     * off by default, because it makes the row take the full width available.
-     */
-    responsive?: boolean;
     /**
      * What screen readers announce for the navigation itself. It falls back to the
      * design system dictionary.
@@ -169,7 +162,6 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
     firstText: string;
     lastText: string;
     disabledPages: PaginationMatcher;
-    responsive: boolean;
     pageLabel: (page: number) => string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/VPagination/VPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"VPagination.js","names":[],"sources":["../../../src/components/VPagination/VPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * Native buttons activate pages. JavaScript builds bounded page windows and provides roving\n * keyboard navigation.\n */\nimport { computed, h, nextTick, ref } from 'vue'\nimport type { FunctionalComponent } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { first_page as firstPageIcon } from '../VIcon/icons/first_page'\nimport { last_page as lastPageIcon } from '../VIcon/icons/last_page'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\n\nimport { arrowNavigate, navigableItems } from '../../utils/arrowNav'\nimport { clamp } from '../../utils/number'\nimport { resolveMatcher } from '../../utils/matcher'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** How the pages that are not the current one are drawn. */\nexport type PaginationItemVariant = 'ghost' | 'outline'\n\n/** How the current page is drawn. */\nexport type PaginationSelectedVariant = 'solid' | 'soft' | 'ghost'\n\n/** The colour of the current page. */\nexport type PaginationTone = 'accent' | 'neutral' | 'danger'\n\n/** The height of the pills, from the scale every control shares. */\nexport type PaginationSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Where the row sits in the width it is given. */\nexport type PaginationAlign = 'start' | 'center' | 'end'\n\n/** Whether the previous and next controls are rendered, and what they show. */\nexport type PaginationControls = false | 'icon' | 'text' | 'both'\n\n/**\n * Which pages cannot be reached, given either as a list of page numbers or as a function\n * answering that question for a page.\n */\nexport type PaginationMatcher = number[] | ((page: number) => boolean)\n\ninterface PaginationProps {\n  /**\n   * How many pages there are in all. It is 1 by default, which renders a single page: the\n   * real count almost always has to be given.\n   */\n  length?: number\n  /**\n   * How many slots to render, ellipses counted among them, so the row keeps exactly the same\n   * width whichever page is current. Below 5, the row drops the bounds and the ellipses and\n   * shows that many consecutive pages around the current one. Left out, every page is rendered.\n   */\n  totalVisible?: number\n\n  /**\n   * Separates the buttons instead of joining them into one segmented control. It is the\n   * word VButtonGroup and VToggle use for the same question, in the same direction.\n   */\n  detached?: boolean\n  /**\n   * Draws a line between the joined buttons, so the row reads as segments rather than as one\n   * frame, on the terms of VButtonGroup's own `bordered`. It has no effect under `detached`.\n   */\n  bordered?: boolean\n  /**\n   * How the pages OTHER than the current one, and the controls, are drawn. It is named for the\n   * ITEMS because that is what it paints: on VTabs and VDataTable `variant` names the\n   * decoration of the frame instead.\n   */\n  itemVariant?: PaginationItemVariant\n  /**\n   * How the current page is drawn, in the row's tone: filled, tinted, or the colour of its\n   * text alone. The same choice as VToggle's `selectedVariant`.\n   */\n  selectedVariant?: PaginationSelectedVariant\n  /** The colour the current page takes. The other pages and the controls stay neutral. */\n  tone?: PaginationTone\n  /** The height of the buttons, from the scale shared by every control. */\n  size?: PaginationSize\n  /** Takes 4px off the height of every button. */\n  compact?: boolean\n  /** Raises the row off the page, on the terms of VButton's own `elevated`. */\n  elevated?: boolean\n  /**\n   * Where the row sits in the space it is given. It only matters in responsive mode,\n   * where the row takes the whole width available.\n   */\n  align?: PaginationAlign\n\n  /**\n   * The previous and next buttons on either side of the pages: what they show, or `false` to\n   * leave them out.\n   */\n  controls?: PaginationControls\n  /** The icon of the previous control: an icon name, or an explicit render. */\n  prevIcon?: IconSource\n  /** The icon of the next control: an icon name, or an explicit render. */\n  nextIcon?: IconSource\n  /**\n   * The wording of the previous control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  prevText?: string\n  /**\n   * The wording of the next control, used both as its visible text and as what screen\n   * readers announce. It falls back to the design system dictionary.\n   */\n  nextText?: string\n  /**\n   * Adds first and last page controls outside the previous and next ones, drawn the way\n   * `controls` draws those. It has no effect when `controls` is `false`.\n   */\n  edgeControls?: boolean\n  /** The icon of the first page control: an icon name, or an explicit render. */\n  firstIcon?: IconSource\n  /** The icon of the last page control: an icon name, or an explicit render. */\n  lastIcon?: IconSource\n  /**\n   * The wording of the first page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  firstText?: string\n  /**\n   * The wording of the last page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  lastText?: string\n\n  /** Makes the whole component unusable. */\n  disabled?: boolean\n  /**\n   * Which pages cannot be reached, as a list or as a function. The previous and next\n   * controls step OVER them rather than stopping at one.\n   */\n  disabledPages?: PaginationMatcher\n\n  /**\n   * Lets the row shed pages as the space narrows, by asking about its own width. It is\n   * off by default, because it makes the row take the full width available.\n   */\n  responsive?: boolean\n\n  /**\n   * What screen readers announce for the navigation itself. It falls back to the\n   * design system dictionary.\n   */\n  label?: string\n  /**\n   * How a page is announced. A pill shows a bare number, which alone means nothing to\n   * a screen reader: this is what turns it into \"Page 3\". It falls back to the design\n   * system dictionary.\n   */\n  pageLabel?: (page: number) => string\n  /** The address of a page. Left out, they are buttons. */\n  href?: (page: number) => string\n}\n\nconst props = withDefaults(defineProps<PaginationProps>(), {\n  length: 1,\n  totalVisible: undefined,\n  detached: false,\n  bordered: false,\n  itemVariant: 'ghost',\n  selectedVariant: 'solid',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  elevated: false,\n  align: 'start',\n  controls: 'icon',\n  prevIcon: () => chevronLeftIcon,\n  nextIcon: () => chevronRightIcon,\n  prevText: undefined,\n  nextText: undefined,\n  edgeControls: false,\n  firstIcon: () => firstPageIcon,\n  lastIcon: () => lastPageIcon,\n  firstText: undefined,\n  lastText: undefined,\n  disabled: false,\n  disabledPages: undefined,\n  responsive: false,\n  label: undefined,\n  pageLabel: undefined,\n  href: undefined,\n})\n\nconst emit = defineEmits<{\n  /**\n   * A page was chosen from the row, a pill or a control, with the click that chose it. It comes\n   * before the model changes, so under `href` a single-page application calls\n   * `preventDefault()` on the event and hands the address to its router instead of letting the\n   * browser load it.\n   */\n  navigate: [page: number, event: MouseEvent]\n}>()\n\n// The prop wins over the dictionary, and above both, a consumer's own aria-label or\n// aria-labelledby still wins; that arbitration is what `useAriaLabel` is for.\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.pagination.label)\nconst resolvedPrevText = computed(() => props.prevText ?? m.value.pagination.previous)\nconst resolvedNextText = computed(() => props.nextText ?? m.value.pagination.next)\nconst resolvedFirstText = computed(() => props.firstText ?? m.value.pagination.first)\nconst resolvedLastText = computed(() => props.lastText ?? m.value.pagination.last)\n\n/** The page being shown, counted from 1. It starts on the first. */\nconst page = defineModel<number>({ default: 1 })\n\n/** One slot in the row: either a page, or the ellipsis standing for those left out. */\ntype PaginationItem =\n  | { kind: 'page'; key: string; page: number; edge: boolean; distance: number }\n  | { kind: 'gap'; key: string }\n\n// A length or a model that is not a whole number (`NaN` while a page size is still loading,\n// a computed `2.5`) is brought back to a page that exists, or no pill would ever match it.\nconst total = computed(() => Math.max(Math.trunc(props.length) || 1, 1))\nconst currentPage = computed(() => clamp(Math.round(page.value) || 1, 1, total.value))\n\nconst isPageDisabled = computed(() => resolveMatcher(props.disabledPages))\n\n// @a11y\n// A pill shows nothing but a number, which on its own tells a screen reader\n// nothing at all; this is what has it announced as \"Page 3\".\nfunction pageLabelFor(n: number): string {\n  return props.pageLabel ? props.pageLabel(n) : m.value.pagination.page(n)\n}\n\n/** Works out which slots the row holds. */\nconst items = computed<PaginationItem[]>(() => {\n  const count = total.value\n  const current = currentPage.value\n\n  const pageItem = (n: number): PaginationItem => ({\n    kind: 'page',\n    key: `page-${n}`,\n    page: n,\n    edge: n === 1 || n === count,\n    distance: Math.min(Math.abs(n - current), 3),\n  })\n  const pages = (from: number, to: number): PaginationItem[] => {\n    const out: PaginationItem[] = []\n    for (let n = from; n <= to; n++) out.push(pageItem(n))\n    return out\n  }\n  // Keyed by the side it stands on, never by the page it follows: there is at most one\n  // ellipsis per side, and the left one always comes after the first page while the right\n  // one always comes before the last. A key derived from the window would change on every\n  // navigation, so the right-hand ellipsis would be destroyed and rebuilt each time the\n  // window slid, for a node that never changes.\n  const gap = (side: 'start' | 'end'): PaginationItem => ({ kind: 'gap', key: `gap-${side}` })\n\n  // With no limit given, nothing is left out. At least the current page is always shown.\n  const limit = Math.trunc(props.totalVisible ?? count)\n  const visible = Number.isNaN(limit) ? count : Math.max(limit, 1)\n  if (visible >= count) return pages(1, count)\n\n  // Below five slots there is no room for the first page, an ellipsis, the current page,\n  // another ellipsis and the last: the row is a plain window of consecutive pages, held\n  // against the bounds so it keeps the same number of slots.\n  if (visible < 5) {\n    const from = clamp(current - Math.floor((visible - 1) / 2), 1, count - visible + 1)\n    return pages(from, from + visible - 1)\n  }\n\n  const start = current - Math.floor((visible - 5) / 2)\n  const end = start + (visible - 5)\n\n  // The window is stretched to the bound instead, which both avoids that and keeps the number\n  // of slots exactly the same.\n  if (start <= 3) return [...pages(1, visible - 2), gap('end'), pageItem(count)]\n  if (end >= count - 2) return [pageItem(1), gap('start'), ...pages(count - visible + 3, count)]\n  return [pageItem(1), gap('start'), ...pages(start, end), gap('end'), pageItem(count)]\n})\n\n/**\n * Where a control leads: the nearest page in that direction that can actually be reached,\n * disabled ones being stepped over rather than stopped at. Answering `undefined` means there is\n * none left, which disables the control; and that single answer also covers being on the first\n * or the last page, with no separate test for the ends.\n */\nfunction step(direction: -1 | 1): number | undefined {\n  for (let n = currentPage.value + direction; n >= 1 && n <= total.value; n += direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\n/**\n * Where a first or last control leads: the reachable page farthest in that direction. It is\n * `undefined` exactly when `step` is, so each edge control disables itself with its neighbour.\n */\nfunction leap(direction: -1 | 1): number | undefined {\n  const end = direction < 0 ? 1 : total.value\n  for (let n = end; n !== currentPage.value; n -= direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\nconst firstTarget = computed(() => leap(-1))\nconst prevTarget = computed(() => step(-1))\nconst nextTarget = computed(() => step(1))\nconst lastTarget = computed(() => leap(1))\n\nfunction goTo(n: number | undefined) {\n  if (n === undefined) return\n  page.value = clamp(n, 1, total.value)\n}\n\n/** The address a pill or a control links to, or `undefined` when the row is made of buttons. */\nfunction hrefFor(n: number): string | undefined {\n  return props.href?.(n)\n}\n\n// @core\n/*\n * A link clicked with a modifier held (Ctrl or Cmd for a new tab, Shift for a window, Alt for a\n * download) opens somewhere ELSE: the page on screen stays where it is, so the model must not\n * move. The test the routers themselves make before taking a click over.\n */\nfunction opensElsewhere(event: MouseEvent): boolean {\n  return (\n    props.href !== undefined &&\n    (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n  )\n}\n\nfunction choose(event: MouseEvent, n: number | undefined) {\n  if (n === undefined || opensElsewhere(event)) return\n  emit('navigate', n, event)\n  goTo(n)\n}\n\nfunction isUnusable(el: HTMLElement): boolean {\n  return el.matches(':disabled, [aria-disabled=\"true\"]')\n}\n\n// @a11y\n/*\n * The previous and next controls disable themselves once no page is left in their direction,\n * and a focused button that becomes disabled hands the focus to <body>: a keyboard reader\n * pressing \"Next page\" on the second to last page would be sent back to the top of the document\n * by the next Tab. The focus goes to the page just reached instead, which is always rendered,\n * the current page being the one pill the responsive steps never hide.\n */\nasync function goFromControl(event: MouseEvent, n: number | undefined) {\n  const control = event.currentTarget as HTMLElement\n  const hadFocus = control === document.activeElement\n  choose(event, n)\n  if (!hadFocus) return\n  await nextTick()\n  if (isUnusable(control)) {\n    navEl.value?.querySelector<HTMLElement>('[aria-current=\"page\"]')?.focus()\n  }\n}\n\ntype ControlSide = 'first' | 'prev' | 'next' | 'last'\n\n/*\n * The four controls, written once: they differ only by their direction and reach, and template\n * blocks drifting apart on the next change is exactly what this avoids. A functional component\n * because they sit at either end of the row, with the pages in between, where a `v-for` over\n * descriptors could not put them.\n */\nconst PageControl: FunctionalComponent<{ side: ControlSide }> = ({ side }) => {\n  const { label, icon, target } = {\n    first: { label: resolvedFirstText.value, icon: props.firstIcon, target: firstTarget.value },\n    prev: { label: resolvedPrevText.value, icon: props.prevIcon, target: prevTarget.value },\n    next: { label: resolvedNextText.value, icon: props.nextIcon, target: nextTarget.value },\n    last: { label: resolvedLastText.value, icon: props.lastIcon, target: lastTarget.value },\n  }[side]\n  const disabled = props.disabled || target === undefined\n  const common = {\n    class: 'v-pagination-control',\n    'data-side': side,\n    variant: props.itemVariant,\n    disabled,\n    href: hrefFor(target ?? currentPage.value),\n    rel: props.href && !disabled ? side : undefined,\n    onClick: (event: MouseEvent) => goFromControl(event, target),\n  }\n  const glyph = () => h(VIcon, { ...iconProps(icon), mirrored: true })\n  if (props.controls === 'icon') return h(VIconButton, { ...common, label }, glyph)\n  const backward = side === 'first' || side === 'prev'\n  return h(\n    VButton,\n    { ...common, tone: 'neutral', 'aria-label': label },\n    {\n      ...(props.controls === 'both' ? { [backward ? 'start' : 'end']: glyph } : {}),\n      default: () => h('span', { class: 'v-pagination-control-label' }, label),\n    },\n  )\n}\n\nconst navEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/**\n * The arrow keys, through the shared implementation in `utils/arrowNav`. The pills the\n * responsive rules have hidden are left out by the helper, which skips anything not displayed;\n * so they cannot be focused into.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const nav = navEl.value\n  if (!nav) return\n  arrowNavigate(event, nav, () =>\n    navigableItems(nav, '.v-pagination-page:not(:disabled, [aria-disabled=\"true\"])'),\n  )\n}\n\n// The pills are rendered by a VButtonGroup inside the nav, so a template ref reaches none of\n// them. `focus` goes to the current page, which every responsive step keeps on screen.\ndefineExpose({\n  // Two queries, not one selector list: a list matches in DOM order, which would hand the\n  // focus to the previous control ahead of the current page. `a[href]` because an inert link\n  // has lost its address, and with it the ability to take the focus.\n  /** Moves the focus to the current page, or to the first control that can take it. */\n  focus: (options?: FocusOptions) =>\n    (\n      navEl.value?.querySelector<HTMLElement>(\n        '[aria-current=\"page\"]:is(button, a[href]):not(:disabled)',\n      ) ?? navEl.value?.querySelector<HTMLElement>(':is(button, a[href]):not(:disabled)')\n    )?.focus(options),\n  /** The `<nav>` element, which is also where the consumer's attributes land. */\n  el: navEl,\n})\n</script>\n\n<template>\n  <nav\n    ref=\"navEl\"\n    class=\"v-pagination\"\n    :aria-label=\"ariaLabel\"\n    :data-align=\"align\"\n    :data-item-variant=\"itemVariant\"\n    :data-controls=\"controls || undefined\"\n    :data-responsive=\"responsive ? '' : undefined\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- The row is a VButtonGroup either way: joined it merges the borders of its DIRECT\n         button children, and detached it spaces them, which is all this prop asks of it.\n         That is why there is no list markup wrapping the pills, and why the ellipsis is\n         itself an inert button rather than a plain span: anything else between two pills\n         would break the seam. -->\n    <!--\n      `|| undefined` keeps the group opinion-free when the row does not ask, `undefined` being\n      what means \"no opinion\" there where `false` is an order. The size is always an opinion,\n      the pagination having a default of its own.\n    -->\n    <VButtonGroup\n      class=\"v-pagination-items\"\n      :detached=\"detached\"\n      :bordered=\"bordered\"\n      :size=\"size\"\n      :compact=\"compact || undefined\"\n      :elevated=\"elevated || undefined\"\n    >\n      <PageControl v-if=\"controls && edgeControls\" side=\"first\" />\n      <PageControl v-if=\"controls\" side=\"prev\" />\n\n      <template v-for=\"item in items\" :key=\"item.key\">\n        <VButton\n          v-if=\"item.kind === 'page'\"\n          class=\"v-pagination-page\"\n          :variant=\"item.page === currentPage ? selectedVariant : itemVariant\"\n          :tone=\"item.page === currentPage ? tone : 'neutral'\"\n          :disabled=\"disabled || isPageDisabled(item.page)\"\n          :aria-label=\"pageLabelFor(item.page)\"\n          :aria-current=\"item.page === currentPage ? 'page' : undefined\"\n          :href=\"hrefFor(item.page)\"\n          :data-edge=\"item.edge ? '' : undefined\"\n          :data-distance=\"!item.edge && item.distance > 0 ? item.distance : undefined\"\n          @click=\"choose($event, item.page)\"\n        >\n          {{ item.page }}\n        </VButton>\n        <!--\n          The ellipsis is a disabled icon-only button rather than a span: being a button, it\n          keeps the joined row's seam continuous and follows the size and density like\n          everything else. Disabling it takes it out of the tab order, and it is hidden from\n          screen readers, which have the page numbers themselves; which is also why it is a\n          VButton and not a VIconButton, whose required label would name something nobody can\n          reach.\n        -->\n        <VButton\n          v-else\n          class=\"v-pagination-ellipsis\"\n          aria-hidden=\"true\"\n          data-icon-only\n          :variant=\"itemVariant\"\n          tone=\"neutral\"\n          disabled\n        >\n          <template #start>\n            <VIcon :name=\"moreHorizIcon\" />\n          </template>\n        </VButton>\n      </template>\n\n      <PageControl v-if=\"controls\" side=\"next\" />\n      <PageControl v-if=\"controls && edgeControls\" side=\"last\" />\n    </VButtonGroup>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-pagination {\n    display: flex;\n  }\n\n  /*\n   * A container of this kind computes its width WITHOUT looking at its content, so the row has\n   * to be block-level: as an inline box it would measure zero and hide everything at once. It\n   * therefore takes its parent's whole width, which is exactly what makes the hiding follow the\n   * space the component was actually given, and what obliges a flex parent to grant it one.\n   */\n  .v-pagination[data-responsive] {\n    container-type: inline-size;\n    container-name: v-pagination;\n  }\n\n  .v-pagination[data-align='center'] {\n    justify-content: center;\n  }\n\n  .v-pagination[data-align='end'] {\n    justify-content: flex-end;\n  }\n\n  /*\n   * Qualified by an attribute VButton always renders, which makes both of these beat that\n   * button's own padding and its own transition whatever order the two sheets end up in; the\n   * VIconButton idiom.\n   */\n  .v-pagination-page[data-size] {\n    /* A one-digit pill is square, and widens by itself past that. The height variable\n       is set by the shared size class on this very element, so this single rule covers\n       all five sizes and their compact forms. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--vectis-space-2);\n\n    /*\n     * The highlight changes instantly, and this must not be \"restored for consistency\". VButton\n     * fades `background-color` over `--vectis-duration-fast`, which is right for a button that\n     * stays put and wrong here: truncation SHIFTS its window, so from one page to the next the\n     * highlight keeps its slot but changes ELEMENT, and the outgoing and incoming pills are\n     * both half-tinted for a few frames; read as a flicker, with nothing in the console.\n     */\n    transition: none;\n  }\n\n  /* The ellipsis is a disabled button only as a technical device; to the reader it is\n     not a control that has been turned off, so it does not take the forbidden\n     cursor. Qualified like the pills: VButton's disabled cursor weighs (0,2,0), and a bare\n     class loses to it whatever the sheet order. */\n  .v-pagination-ellipsis[data-size] {\n    cursor: default;\n  }\n\n  /*\n   * Each threshold is the width NEEDED to show that level, never what remains after hiding:\n   * written the other way round the row overflows for the whole interval before the next step\n   * takes effect. The most distant neighbours go first.\n   */\n  @container v-pagination (max-inline-size: 36rem) {\n    .v-pagination[data-responsive] .v-pagination-page[data-distance='3'] {\n      display: none;\n    }\n  }\n\n  @container v-pagination (max-inline-size: 31rem) {\n    .v-pagination[data-responsive] .v-pagination-page[data-distance='2'] {\n      display: none;\n    }\n\n    /* It is never done when the control shows text alone: there would be nothing left to click. */\n    .v-pagination[data-responsive][data-controls='both'] .v-pagination-control-label {\n      display: none;\n    }\n  }\n\n  @container v-pagination (max-inline-size: 25rem) {\n    .v-pagination[data-responsive] .v-pagination-page[data-distance='1'] {\n      display: none;\n    }\n\n    /* The first and last pills stay on screen and lead to the same pages. */\n    .v-pagination[data-responsive]\n      .v-pagination-control:is([data-side='first'], [data-side='last']) {\n      display: none;\n    }\n\n    /*\n     * VButtonGroup joins its segments by DOM position, which a hidden edge control still holds:\n     * the previous and next controls would keep the square corners, the pulled margin and the\n     * cleared or seamed border of an inner segment. These restore an outer edge, at (0,7,0)\n     * against the (0,6,0) of VButtonGroup's heaviest join rule. Controls are neutral and either\n     * ghost or outline, so their border is the outline frame or nothing.\n     */\n    .v-pagination[data-responsive]\n      > .v-pagination-items:not([data-detached])\n      > [data-side='first']\n      + .v-pagination-control[data-side='prev'] {\n      margin-inline-start: 0;\n      border-start-start-radius: var(--vectis-radius-interactive);\n      border-end-start-radius: var(--vectis-radius-interactive);\n      border-inline-start-color: var(--pagination-frame, transparent);\n    }\n\n    .v-pagination[data-responsive]\n      > .v-pagination-items:not([data-detached])\n      > [data-side='first']\n      + .v-pagination-control[data-side='prev']::before {\n      content: none;\n    }\n\n    .v-pagination[data-responsive]\n      > .v-pagination-items:not([data-detached])\n      > .v-pagination-control[data-side='next']:has(+ [data-side='last']) {\n      border-start-end-radius: var(--vectis-radius-interactive);\n      border-end-end-radius: var(--vectis-radius-interactive);\n      border-inline-end-color: var(--pagination-frame, transparent);\n    }\n  }\n\n  /*\n   * A disabled page or control greys its outline to a different token, hence a variable the\n   * second rule changes. VToggle's `--toggle-frame` is the same device.\n   */\n  .v-pagination[data-item-variant='outline'] {\n    --pagination-frame: var(--vectis-color-border-strong);\n  }\n\n  .v-pagination[data-item-variant='outline'] > * > :is(:disabled, [aria-disabled='true']) {\n    --pagination-frame: var(--vectis-color-border);\n  }\n\n  .v-pagination[data-item-variant='outline']\n    > *\n    > .v-pagination-page[aria-current='page']:is([data-variant='soft'], [data-variant='ghost']) {\n    border-color: var(--pagination-frame);\n  }\n\n  /*\n   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-pagination-page.v-pagination-page.v-pagination-page.v-pagination-page[aria-current='page']:not(\n        :disabled,\n        [aria-disabled='true']\n      ) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VPagination.js","names":[],"sources":["../../../src/components/VPagination/VPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * Native buttons activate pages. JavaScript builds bounded page windows and provides roving\n * keyboard navigation.\n */\nimport { computed, h, nextTick, ref } from 'vue'\nimport type { FunctionalComponent } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { first_page as firstPageIcon } from '../VIcon/icons/first_page'\nimport { last_page as lastPageIcon } from '../VIcon/icons/last_page'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\n\nimport { arrowNavigate, navigableItems } from '../../utils/arrowNav'\nimport { clamp } from '../../utils/number'\nimport { resolveMatcher } from '../../utils/matcher'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** How the pages that are not the current one are drawn. */\nexport type PaginationItemVariant = 'ghost' | 'outline'\n\n/** How the current page is drawn. */\nexport type PaginationSelectedVariant = 'solid' | 'soft' | 'ghost'\n\n/** The colour of the current page. */\nexport type PaginationTone = 'accent' | 'neutral' | 'danger'\n\n/** The height of the pills, from the scale every control shares. */\nexport type PaginationSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Where the row sits in the width it is given. */\nexport type PaginationAlign = 'start' | 'center' | 'end'\n\n/** Whether the previous and next controls are rendered, and what they show. */\nexport type PaginationControls = false | 'icon' | 'text' | 'both'\n\n/**\n * Which pages cannot be reached, given either as a list of page numbers or as a function\n * answering that question for a page.\n */\nexport type PaginationMatcher = number[] | ((page: number) => boolean)\n\ninterface PaginationProps {\n  /**\n   * How many pages there are in all. It is 1 by default, which renders a single page: the\n   * real count almost always has to be given.\n   */\n  length?: number\n  /**\n   * How many slots to render, ellipses counted among them, so the row keeps exactly the same\n   * width whichever page is current. Below 5, the row drops the bounds and the ellipses and\n   * shows that many consecutive pages around the current one. At 0, no page is rendered and the\n   * controls alone remain. Left out, every page is rendered.\n   */\n  totalVisible?: number\n\n  /**\n   * Separates the buttons instead of joining them into one segmented control. It is the\n   * word VButtonGroup and VToggle use for the same question, in the same direction.\n   */\n  detached?: boolean\n  /**\n   * Draws a line between the joined buttons, so the row reads as segments rather than as one\n   * frame, on the terms of VButtonGroup's own `bordered`. It has no effect under `detached`.\n   */\n  bordered?: boolean\n  /**\n   * How the pages OTHER than the current one, and the controls, are drawn. It is named for the\n   * ITEMS because that is what it paints: on VTabs and VDataTable `variant` names the\n   * decoration of the frame instead.\n   */\n  itemVariant?: PaginationItemVariant\n  /**\n   * How the current page is drawn, in the row's tone: filled, tinted, or the colour of its\n   * text alone. The same choice as VToggle's `selectedVariant`.\n   */\n  selectedVariant?: PaginationSelectedVariant\n  /** The colour the current page takes. The other pages and the controls stay neutral. */\n  tone?: PaginationTone\n  /** The height of the buttons, from the scale shared by every control. */\n  size?: PaginationSize\n  /** Takes 4px off the height of every button. */\n  compact?: boolean\n  /** Raises the row off the page, on the terms of VButton's own `elevated`. */\n  elevated?: boolean\n  /** Where the row sits in the width it is given. */\n  align?: PaginationAlign\n\n  /**\n   * The previous and next buttons on either side of the pages: what they show, or `false` to\n   * leave them out.\n   */\n  controls?: PaginationControls\n  /** The icon of the previous control: an icon name, or an explicit render. */\n  prevIcon?: IconSource\n  /** The icon of the next control: an icon name, or an explicit render. */\n  nextIcon?: IconSource\n  /**\n   * The wording of the previous control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  prevText?: string\n  /**\n   * The wording of the next control, used both as its visible text and as what screen\n   * readers announce. It falls back to the design system dictionary.\n   */\n  nextText?: string\n  /**\n   * Adds first and last page controls outside the previous and next ones, drawn the way\n   * `controls` draws those. It has no effect when `controls` is `false`.\n   */\n  edgeControls?: boolean\n  /** The icon of the first page control: an icon name, or an explicit render. */\n  firstIcon?: IconSource\n  /** The icon of the last page control: an icon name, or an explicit render. */\n  lastIcon?: IconSource\n  /**\n   * The wording of the first page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  firstText?: string\n  /**\n   * The wording of the last page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  lastText?: string\n\n  /** Makes the whole component unusable. */\n  disabled?: boolean\n  /**\n   * Which pages cannot be reached, as a list or as a function. The previous and next\n   * controls step OVER them rather than stopping at one.\n   */\n  disabledPages?: PaginationMatcher\n\n  /**\n   * What screen readers announce for the navigation itself. It falls back to the\n   * design system dictionary.\n   */\n  label?: string\n  /**\n   * How a page is announced. A pill shows a bare number, which alone means nothing to\n   * a screen reader: this is what turns it into \"Page 3\". It falls back to the design\n   * system dictionary.\n   */\n  pageLabel?: (page: number) => string\n  /** The address of a page. Left out, they are buttons. */\n  href?: (page: number) => string\n}\n\nconst props = withDefaults(defineProps<PaginationProps>(), {\n  length: 1,\n  totalVisible: undefined,\n  detached: false,\n  bordered: false,\n  itemVariant: 'ghost',\n  selectedVariant: 'solid',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  elevated: false,\n  align: 'start',\n  controls: 'icon',\n  prevIcon: () => chevronLeftIcon,\n  nextIcon: () => chevronRightIcon,\n  prevText: undefined,\n  nextText: undefined,\n  edgeControls: false,\n  firstIcon: () => firstPageIcon,\n  lastIcon: () => lastPageIcon,\n  firstText: undefined,\n  lastText: undefined,\n  disabled: false,\n  disabledPages: undefined,\n  label: undefined,\n  pageLabel: undefined,\n  href: undefined,\n})\n\nconst emit = defineEmits<{\n  /**\n   * A page was chosen from the row, a pill or a control, with the click that chose it. It comes\n   * before the model changes, so under `href` a single-page application calls\n   * `preventDefault()` on the event and hands the address to its router instead of letting the\n   * browser load it.\n   */\n  navigate: [page: number, event: MouseEvent]\n}>()\n\n// The prop wins over the dictionary, and above both, a consumer's own aria-label or\n// aria-labelledby still wins; that arbitration is what `useAriaLabel` is for.\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.pagination.label)\nconst resolvedPrevText = computed(() => props.prevText ?? m.value.pagination.previous)\nconst resolvedNextText = computed(() => props.nextText ?? m.value.pagination.next)\nconst resolvedFirstText = computed(() => props.firstText ?? m.value.pagination.first)\nconst resolvedLastText = computed(() => props.lastText ?? m.value.pagination.last)\n\n/** The page being shown, counted from 1. It starts on the first. */\nconst page = defineModel<number>({ default: 1 })\n\n/** One slot in the row: either a page, or the ellipsis standing for those left out. */\ntype PaginationItem = { kind: 'page'; key: string; page: number } | { kind: 'gap'; key: string }\n\n// A length or a model that is not a whole number (`NaN` while a page size is still loading,\n// a computed `2.5`) is brought back to a page that exists, or no pill would ever match it.\nconst total = computed(() => Math.max(Math.trunc(props.length) || 1, 1))\nconst currentPage = computed(() => clamp(Math.round(page.value) || 1, 1, total.value))\n\nconst isPageDisabled = computed(() => resolveMatcher(props.disabledPages))\n\n// @a11y\n// A pill shows nothing but a number, which on its own tells a screen reader\n// nothing at all; this is what has it announced as \"Page 3\".\nfunction pageLabelFor(n: number): string {\n  return props.pageLabel ? props.pageLabel(n) : m.value.pagination.page(n)\n}\n\n/** Works out which slots the row holds. */\nconst items = computed<PaginationItem[]>(() => {\n  const count = total.value\n  const current = currentPage.value\n\n  const pageItem = (n: number): PaginationItem => ({ kind: 'page', key: `page-${n}`, page: n })\n  const pages = (from: number, to: number): PaginationItem[] => {\n    const out: PaginationItem[] = []\n    for (let n = from; n <= to; n++) out.push(pageItem(n))\n    return out\n  }\n  // Keyed by the side it stands on, never by the page it follows: there is at most one\n  // ellipsis per side, and the left one always comes after the first page while the right\n  // one always comes before the last. A key derived from the window would change on every\n  // navigation, so the right-hand ellipsis would be destroyed and rebuilt each time the\n  // window slid, for a node that never changes.\n  const gap = (side: 'start' | 'end'): PaginationItem => ({ kind: 'gap', key: `gap-${side}` })\n\n  // With no limit given, nothing is left out. At 0 the row holds the controls alone.\n  const limit = Math.trunc(props.totalVisible ?? count)\n  const visible = Number.isNaN(limit) ? count : Math.max(limit, 0)\n  if (visible === 0) return []\n  if (visible >= count) return pages(1, count)\n\n  // Below five slots there is no room for the first page, an ellipsis, the current page,\n  // another ellipsis and the last: the row is a plain window of consecutive pages, held\n  // against the bounds so it keeps the same number of slots.\n  if (visible < 5) {\n    const from = clamp(current - Math.floor((visible - 1) / 2), 1, count - visible + 1)\n    return pages(from, from + visible - 1)\n  }\n\n  const start = current - Math.floor((visible - 5) / 2)\n  const end = start + (visible - 5)\n\n  // The window is stretched to the bound instead, which both avoids that and keeps the number\n  // of slots exactly the same.\n  if (start <= 3) return [...pages(1, visible - 2), gap('end'), pageItem(count)]\n  if (end >= count - 2) return [pageItem(1), gap('start'), ...pages(count - visible + 3, count)]\n  return [pageItem(1), gap('start'), ...pages(start, end), gap('end'), pageItem(count)]\n})\n\n/**\n * Where a control leads: the nearest page in that direction that can actually be reached,\n * disabled ones being stepped over rather than stopped at. Answering `undefined` means there is\n * none left, which disables the control; and that single answer also covers being on the first\n * or the last page, with no separate test for the ends.\n */\nfunction step(direction: -1 | 1): number | undefined {\n  for (let n = currentPage.value + direction; n >= 1 && n <= total.value; n += direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\n/**\n * Where a first or last control leads: the reachable page farthest in that direction. It is\n * `undefined` exactly when `step` is, so each edge control disables itself with its neighbour.\n */\nfunction leap(direction: -1 | 1): number | undefined {\n  const end = direction < 0 ? 1 : total.value\n  for (let n = end; n !== currentPage.value; n -= direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\nconst firstTarget = computed(() => leap(-1))\nconst prevTarget = computed(() => step(-1))\nconst nextTarget = computed(() => step(1))\nconst lastTarget = computed(() => leap(1))\n\nfunction goTo(n: number | undefined) {\n  if (n === undefined) return\n  page.value = clamp(n, 1, total.value)\n}\n\n/** The address a pill or a control links to, or `undefined` when the row is made of buttons. */\nfunction hrefFor(n: number): string | undefined {\n  return props.href?.(n)\n}\n\n// @core\n/*\n * A link clicked with a modifier held (Ctrl or Cmd for a new tab, Shift for a window, Alt for a\n * download) opens somewhere ELSE: the page on screen stays where it is, so the model must not\n * move. The test the routers themselves make before taking a click over.\n */\nfunction opensElsewhere(event: MouseEvent): boolean {\n  return (\n    props.href !== undefined &&\n    (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n  )\n}\n\nfunction choose(event: MouseEvent, n: number | undefined) {\n  if (n === undefined || opensElsewhere(event)) return\n  emit('navigate', n, event)\n  goTo(n)\n}\n\nfunction isUnusable(el: HTMLElement): boolean {\n  return el.matches(':disabled, [aria-disabled=\"true\"]')\n}\n\n// @a11y\n/*\n * The previous and next controls disable themselves once no page is left in their direction,\n * and a focused button that becomes disabled hands the focus to <body>: a keyboard reader\n * pressing \"Next page\" on the second to last page would be sent back to the top of the document\n * by the next Tab. The focus goes to the page just reached instead, the current page being\n * always rendered. A row without pages hands it to the nearest control still usable, the one\n * before it first.\n */\nasync function goFromControl(event: MouseEvent, n: number | undefined) {\n  const control = event.currentTarget as HTMLElement\n  const hadFocus = control === document.activeElement\n  choose(event, n)\n  if (!hadFocus) return\n  await nextTick()\n  const nav = navEl.value\n  if (!nav || !isUnusable(control)) return\n  const current = nav.querySelector<HTMLElement>('[aria-current=\"page\"]')\n  if (current) return current.focus()\n  const usable = [...nav.querySelectorAll<HTMLElement>(':is(button, a[href]):not(:disabled)')]\n  const before = usable.filter(\n    (el) => control.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING,\n  )\n  ;(before.at(-1) ?? usable[0])?.focus()\n}\n\ntype ControlSide = 'first' | 'prev' | 'next' | 'last'\n\n/*\n * The four controls, written once: they differ only by their direction and reach, and template\n * blocks drifting apart on the next change is exactly what this avoids. A functional component\n * because they sit at either end of the row, with the pages in between, where a `v-for` over\n * descriptors could not put them.\n */\nconst PageControl: FunctionalComponent<{ side: ControlSide }> = ({ side }) => {\n  const { label, icon, target } = {\n    first: { label: resolvedFirstText.value, icon: props.firstIcon, target: firstTarget.value },\n    prev: { label: resolvedPrevText.value, icon: props.prevIcon, target: prevTarget.value },\n    next: { label: resolvedNextText.value, icon: props.nextIcon, target: nextTarget.value },\n    last: { label: resolvedLastText.value, icon: props.lastIcon, target: lastTarget.value },\n  }[side]\n  const disabled = props.disabled || target === undefined\n  const common = {\n    class: 'v-pagination-control',\n    'data-side': side,\n    variant: props.itemVariant,\n    disabled,\n    href: hrefFor(target ?? currentPage.value),\n    rel: props.href && !disabled ? side : undefined,\n    onClick: (event: MouseEvent) => goFromControl(event, target),\n  }\n  const glyph = () => h(VIcon, { ...iconProps(icon), mirrored: true })\n  if (props.controls === 'icon') return h(VIconButton, { ...common, label }, glyph)\n  const backward = side === 'first' || side === 'prev'\n  return h(\n    VButton,\n    { ...common, tone: 'neutral' },\n    {\n      ...(props.controls === 'both' ? { [backward ? 'start' : 'end']: glyph } : {}),\n      default: () => h('span', { class: 'v-pagination-control-label' }, label),\n    },\n  )\n}\n\nconst navEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/** The arrow keys, through the shared implementation in `utils/arrowNav`. */\nfunction onKeydown(event: KeyboardEvent) {\n  const nav = navEl.value\n  if (!nav) return\n  arrowNavigate(event, nav, () =>\n    navigableItems(nav, '.v-pagination-page:not(:disabled, [aria-disabled=\"true\"])'),\n  )\n}\n\n// The pills are rendered by a VButtonGroup inside the nav, so a template ref reaches none of\n// them. `focus` goes to the current page.\ndefineExpose({\n  // Two queries, not one selector list: a list matches in DOM order, which would hand the\n  // focus to the previous control ahead of the current page. `a[href]` because an inert link\n  // has lost its address, and with it the ability to take the focus.\n  /** Moves the focus to the current page, or to the first control that can take it. */\n  focus: (options?: FocusOptions) =>\n    (\n      navEl.value?.querySelector<HTMLElement>(\n        '[aria-current=\"page\"]:is(button, a[href]):not(:disabled)',\n      ) ?? navEl.value?.querySelector<HTMLElement>(':is(button, a[href]):not(:disabled)')\n    )?.focus(options),\n  /** The `<nav>` element, which is also where the consumer's attributes land. */\n  el: navEl,\n})\n</script>\n\n<template>\n  <nav\n    ref=\"navEl\"\n    class=\"v-pagination\"\n    :aria-label=\"ariaLabel\"\n    :data-align=\"align\"\n    :data-item-variant=\"itemVariant\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- The row is a VButtonGroup either way: joined it merges the borders of its DIRECT\n         button children, and detached it spaces them, which is all this prop asks of it.\n         That is why there is no list markup wrapping the pills, and why the ellipsis is\n         itself an inert button rather than a plain span: anything else between two pills\n         would break the seam. -->\n    <!--\n      `|| undefined` keeps the group opinion-free when the row does not ask, `undefined` being\n      what means \"no opinion\" there where `false` is an order. The size is always an opinion,\n      the pagination having a default of its own.\n    -->\n    <VButtonGroup\n      class=\"v-pagination-items\"\n      :detached=\"detached\"\n      :bordered=\"bordered\"\n      :size=\"size\"\n      :compact=\"compact || undefined\"\n      :elevated=\"elevated || undefined\"\n    >\n      <PageControl v-if=\"controls && edgeControls\" side=\"first\" />\n      <PageControl v-if=\"controls\" side=\"prev\" />\n\n      <template v-for=\"item in items\" :key=\"item.key\">\n        <VButton\n          v-if=\"item.kind === 'page'\"\n          class=\"v-pagination-page\"\n          :variant=\"item.page === currentPage ? selectedVariant : itemVariant\"\n          :tone=\"item.page === currentPage ? tone : 'neutral'\"\n          :disabled=\"disabled || isPageDisabled(item.page)\"\n          :aria-label=\"pageLabelFor(item.page)\"\n          :aria-current=\"item.page === currentPage ? 'page' : undefined\"\n          :href=\"hrefFor(item.page)\"\n          @click=\"choose($event, item.page)\"\n        >\n          {{ item.page }}\n        </VButton>\n        <!--\n          The ellipsis is a disabled icon-only button rather than a span: being a button, it\n          keeps the joined row's seam continuous and follows the size and density like\n          everything else. Disabling it takes it out of the tab order, and it is hidden from\n          screen readers, which have the page numbers themselves; which is also why it is a\n          VButton and not a VIconButton, whose required label would name something nobody can\n          reach.\n        -->\n        <VButton\n          v-else\n          class=\"v-pagination-ellipsis\"\n          aria-hidden=\"true\"\n          data-icon-only\n          :variant=\"itemVariant\"\n          tone=\"neutral\"\n          disabled\n        >\n          <template #start>\n            <VIcon :name=\"moreHorizIcon\" />\n          </template>\n        </VButton>\n      </template>\n\n      <PageControl v-if=\"controls\" side=\"next\" />\n      <PageControl v-if=\"controls && edgeControls\" side=\"last\" />\n    </VButtonGroup>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-pagination {\n    display: flex;\n  }\n\n  .v-pagination[data-align='center'] {\n    justify-content: center;\n  }\n\n  .v-pagination[data-align='end'] {\n    justify-content: flex-end;\n  }\n\n  /*\n   * Qualified by an attribute VButton always renders, which makes both of these beat that\n   * button's own padding and its own transition whatever order the two sheets end up in; the\n   * VIconButton idiom.\n   */\n  .v-pagination-page[data-size] {\n    /* A one-digit pill is square, and widens by itself past that. The height variable\n       is set by the shared size class on this very element, so this single rule covers\n       all five sizes and their compact forms. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--vectis-space-2);\n\n    /*\n     * The highlight changes instantly, and this must not be \"restored for consistency\". VButton\n     * fades `background-color` over `--vectis-duration-fast`, which is right for a button that\n     * stays put and wrong here: truncation SHIFTS its window, so from one page to the next the\n     * highlight keeps its slot but changes ELEMENT, and the outgoing and incoming pills are\n     * both half-tinted for a few frames; read as a flicker, with nothing in the console.\n     */\n    transition: none;\n  }\n\n  /* The ellipsis is a disabled button only as a technical device; to the reader it is\n     not a control that has been turned off, so it does not take the forbidden\n     cursor. Qualified like the pills: VButton's disabled cursor weighs (0,2,0), and a bare\n     class loses to it whatever the sheet order. */\n  .v-pagination-ellipsis[data-size] {\n    cursor: default;\n  }\n\n  /*\n   * A disabled page or control greys its outline to a different token, hence a variable the\n   * second rule changes. VToggle's `--toggle-frame` is the same device.\n   */\n  .v-pagination[data-item-variant='outline'] {\n    --pagination-frame: var(--vectis-color-border-strong);\n  }\n\n  .v-pagination[data-item-variant='outline'] > * > :is(:disabled, [aria-disabled='true']) {\n    --pagination-frame: var(--vectis-color-border);\n  }\n\n  .v-pagination[data-item-variant='outline']\n    > *\n    > .v-pagination-page[aria-current='page']:is([data-variant='soft'], [data-variant='ghost']) {\n    border-color: var(--pagination-frame);\n  }\n\n  /*\n   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-pagination-page.v-pagination-page.v-pagination-page.v-pagination-page[aria-current='page']:not(\n        :disabled,\n        [aria-disabled='true']\n      ) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VPagination/VPagination.vue_vue_type_script_setup_true_lang.js

@@ -18,9 +18,7 @@ import { Fragment as g, computed as _, createBlock as v, createCommentVNode as y
 var N = [
 	"aria-label",
 	"data-align",
-	"data-item-variant",
-	"data-controls",
-	"data-responsive"
+	"data-item-variant"
 ], P = /*@__PURE__*/ C({
 	__name: "VPagination",
 	props: /*@__PURE__*/ T({
@@ -71,10 +69,6 @@ var N = [
 			type: [Array, Function],
 			default: void 0
 		},
-		responsive: {
-			type: Boolean,
-			default: !1
-		},
 		label: { default: void 0 },
 		pageLabel: {
 			type: Function,
@@ -95,12 +89,10 @@ var N = [
 			return u.pageLabel ? u.pageLabel(e) : T.value.pagination.page(e);
 		}
 		let H = _(() => {
-			let e = R.value, t = z.value, n = (n) => ({
+			let e = R.value, t = z.value, n = (e) => ({
 				kind: "page",
-				key: `page-${n}`,
-				page: n,
-				edge: n === 1 || n === e,
-				distance: Math.min(Math.abs(n - t), 3)
+				key: `page-${e}`,
+				page: e
 			}), r = (e, t) => {
 				let r = [];
 				for (let i = e; i <= t; i++) r.push(n(i));
@@ -108,7 +100,8 @@ var N = [
 			}, i = (e) => ({
 				kind: "gap",
 				key: `gap-${e}`
-			}), a = Math.trunc(u.totalVisible ?? e), o = Number.isNaN(a) ? e : Math.max(a, 1);
+			}), a = Math.trunc(u.totalVisible ?? e), o = Number.isNaN(a) ? e : Math.max(a, 0);
+			if (o === 0) return [];
 			if (o >= e) return r(1, e);
 			if (o < 5) {
 				let n = m(t - Math.floor((o - 1) / 2), 1, e - o + 1);
@@ -156,7 +149,14 @@ var N = [
 		}
 		async function ae(e, t) {
 			let n = e.currentTarget, r = n === document.activeElement;
-			Z(e, t), r && (await ee(), ie(n) && $.value?.querySelector("[aria-current=\"page\"]")?.focus());
+			if (Z(e, t), !r) return;
+			await ee();
+			let i = $.value;
+			if (!i || !ie(n)) return;
+			let a = i.querySelector("[aria-current=\"page\"]");
+			if (a) return a.focus();
+			let o = [...i.querySelectorAll(":is(button, a[href]):not(:disabled)")];
+			(o.filter((e) => n.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING).at(-1) ?? o[0])?.focus();
 		}
 		let Q = ({ side: e }) => {
 			let { label: a, icon: o, target: s } = {
@@ -199,8 +199,7 @@ var N = [
 			let f = e === "first" || e === "prev";
 			return w(r, {
 				...l,
-				tone: "neutral",
-				"aria-label": a
+				tone: "neutral"
 			}, {
 				...u.controls === "both" ? { [f ? "start" : "end"]: d } : {},
 				default: () => w("span", { class: "v-pagination-control-label" }, a)
@@ -220,8 +219,6 @@ var N = [
 			"aria-label": A(P),
 			"data-align": s.align,
 			"data-item-variant": s.itemVariant,
-			"data-controls": s.controls || void 0,
-			"data-responsive": s.responsive ? "" : void 0,
 			onKeydown: oe
 		}, [S(o, {
 			class: "v-pagination-items",
@@ -249,8 +246,6 @@ var N = [
 					"aria-label": V(e.page),
 					"aria-current": e.page === z.value ? "page" : void 0,
 					href: X(e.page),
-					"data-edge": e.edge ? "" : void 0,
-					"data-distance": !e.edge && e.distance > 0 ? e.distance : void 0,
 					onClick: (t) => Z(t, e.page)
 				}, {
 					default: M(() => [x(k(e.page), 1)]),
@@ -262,8 +257,6 @@ var N = [
 					"aria-label",
 					"aria-current",
 					"href",
-					"data-edge",
-					"data-distance",
 					"onClick"
 				])) : (E(), v(r, {
 					key: 1,