@pgcorp/ui-kit 0.10.0 → 0.10.1

package/src/components/shared/data-display/STable.vue

@@ -1,960 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    class="s-table-wrapper"
-    :data-surface="validatedSurface"
-    :data-min-width="validatedMinWidth"
-    :data-max-height="validatedMaxHeight"
-  >
-    <table
-      class="s-table"
-      :data-density="validatedDensity"
-      :aria-label="resolvedAccessibleName.ariaLabel"
-      :aria-labelledby="resolvedAccessibleName.ariaLabelledby"
-      :aria-describedby="validatedAriaDescribedby"
-      :aria-busy="validatedLoading ? 'true' : undefined"
-    >
-      <thead class="s-table-header">
-        <tr>
-          <th
-            v-if="validatedSelectionMode === 'multiple'"
-            class="s-table__control-cell"
-            scope="col"
-            data-width="2xs"
-          >
-            <SCheckbox
-              :model-value="allCurrentRowsSelected"
-              :indeterminate="someCurrentRowsSelected && !allCurrentRowsSelected"
-              :disabled="selectableRows.length === 0"
-              :aria-label="allCurrentRowsSelected ? t('table.clearAllRows') : t('table.selectAllRows')"
-              @update:model-value="updateAllRowsSelection"
-            />
-          </th>
-          <th
-            v-if="hasRowDetails"
-            class="s-table__control-cell"
-            scope="col"
-            data-width="2xs"
-          >
-            <span class="s-table__assistive">{{ t('table.rowDetails') }}</span>
-          </th>
-          <th
-            v-for="column in validatedColumns"
-            :key="column.field"
-            scope="col"
-            :data-width="column.width"
-            :data-min-width="column.minWidth"
-            :data-align="column.align ?? 'left'"
-            :data-sortable="column.sortable || undefined"
-            :aria-sort="columnAriaSort(column)"
-          >
-            <SButton
-              v-if="column.sortable"
-              :aria-label="sortActionLabel(column)"
-              appearance="text"
-              severity="secondary"
-              size="xs"
-              density="compact"
-              width="full"
-              :content-align="column.align === 'right' ? 'end' : column.align === 'center' ? 'center' : 'start'"
-              :trailing-icon="sortIcon(column)"
-              :badge="sortPriority(column) ?? undefined"
-              badge-severity="primary"
-              @click="requestSort(column)"
-            >
-              <span
-                class="s-table__header-content"
-                :data-header-presentation="column.headerPresentation ?? 'visible'"
-              >
-                <slot name="column" :column="column">
-                  <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
-                </slot>
-              </span>
-            </SButton>
-            <span
-              v-else
-              class="s-table__header-content"
-              :data-header-presentation="column.headerPresentation ?? 'visible'"
-            >
-              <slot name="column" :column="column">
-                <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
-              </slot>
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody class="s-table-body">
-        <SAsyncState
-          v-if="validatedLoading || errorMessage || validatedRows.length === 0"
-          :state="validatedLoading
-            ? { status: 'loading', message: resolvedLoadingMessage }
-            : errorMessage
-              ? { status: 'error', message: errorMessage }
-              : { status: 'empty', message: resolvedEmptyMessage }"
-          presentation="table-row"
-          :colspan="renderedColumnCount"
-        />
-        <template v-else>
-          <template
-            v-for="entry in validatedRows"
-            :key="rowKeyToken(entry.key)"
-          >
-            <tr
-              :data-state="resolveRowState(entry.row)"
-              :data-selected="rowIsSelected(entry) || undefined"
-              :aria-selected="rowAriaSelected(entry)"
-              tabindex="0"
-              @click="onRowClick($event, entry.row, entry.index)"
-              @contextmenu="onRowContextMenu($event, entry.row, entry.index)"
-              @keydown.enter="onRowKeydown($event, entry.row, entry.index)"
-              @keydown.space="onRowKeydown($event, entry.row, entry.index)"
-            >
-              <td
-                v-if="validatedSelectionMode === 'multiple'"
-                class="s-table__control-cell"
-              >
-                <SCheckbox
-                  :model-value="rowIsSelected(entry)"
-                  :disabled="!entry.selectable"
-                  :aria-label="rowSelectionLabel(entry)"
-                  @update:model-value="updateRowSelection(entry, $event)"
-                />
-              </td>
-              <td v-if="hasRowDetails" class="s-table__control-cell">
-                <SButton
-                  v-if="entry.expandable"
-                  :aria-label="rowExpansionLabel(entry)"
-                  appearance="text"
-                  severity="secondary"
-                  size="xs"
-                  density="compact"
-                  shape="square"
-                  icon-only
-                  :disclosure="{
-                    expanded: rowIsExpanded(entry),
-                    controls: rowDetailsId(entry.key),
-                    iconPlacement: 'leading',
-                  }"
-                  @click="toggleRowExpansion(entry)"
-                />
-              </td>
-              <td
-                v-for="column in validatedColumns"
-                :key="column.field"
-                :data-align="column.align ?? 'left'"
-                :data-state="resolveCellState(entry.row, column)"
-              >
-                <slot
-                  :name="`cell-${column.field}`"
-                  :value="resolveCellValue(entry.row, column)"
-                  :row="entry.row"
-                  :column="column"
-                  :row-index="entry.index"
-                >
-                  <slot
-                    name="cell"
-                    :value="resolveCellValue(entry.row, column)"
-                    :row="entry.row"
-                    :column="column"
-                    :row-index="entry.index"
-                  >
-                    {{ resolveCellValue(entry.row, column) }}
-                  </slot>
-                </slot>
-              </td>
-            </tr>
-            <tr v-if="entry.expandable && rowIsExpanded(entry)" data-row-details>
-              <td :colspan="renderedColumnCount">
-                <div
-                  :id="rowDetailsId(entry.key)"
-                  class="s-table__row-details"
-                  role="region"
-                  :aria-label="t('table.detailsFor', { label: resolveRowLabel(entry.row, entry.index) })"
-                >
-                  <slot name="row-details" :row="entry.row" :row-index="entry.index" />
-                </div>
-              </td>
-            </tr>
-          </template>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script lang="ts">
-import type { ScrollableViewportMaxBlockSize } from '../../../internal/semanticSizing'
-import type {
-  STableCellState,
-  STableColumn,
-  STableColumnContent,
-  STableColumnHeaderPresentation,
-  STableDensity,
-  STableMinWidth,
-  STableRowKey,
-  STableRowState,
-  STableSelectionMode,
-  STableSort,
-  STableSortMode,
-  STableSurface,
-} from './table'
-
-export type {
-  STableAlignment,
-  STableCellState,
-  STableColumn,
-  STableColumnContent,
-  STableColumnHeaderPresentation,
-  STableDensity,
-  STableMinWidth,
-  STableRowKey,
-  STableRowState,
-  STableSelectionMode,
-  STableSort,
-  STableSortDirection,
-  STableSortMode,
-  STableSurface,
-} from './table'
-
-/** Публичный generic-контракт таблицы принадлежит source-SFC runtime. / The public generic table contract is owned by the source-SFC runtime. */
-export interface STableProps<
-  Row extends object,
-  RowKey extends STableRowKey,
-  Field extends string,
-> {
-  columns: readonly STableColumn<Row, Field>[]
-  data: readonly Row[]
-  getRowKey: (row: Row) => RowKey
-  loading?: boolean
-  loadingMessage?: string
-  errorMessage?: string
-  emptyMessage?: string
-  selectedRowKey?: RowKey
-  selectionMode?: STableSelectionMode
-  selectedRowKeys?: readonly RowKey[]
-  isRowSelectable?: (row: Row, index: number) => boolean
-  expandedRowKeys?: readonly RowKey[]
-  isRowExpandable?: (row: Row, index: number) => boolean
-  getRowLabel?: (row: Row, index: number) => string
-  sortMode?: STableSortMode
-  sort?: STableSort<Field> | null
-  sorts?: readonly STableSort<Field>[]
-  maxHeight?: ScrollableViewportMaxBlockSize
-  density?: STableDensity
-  surface?: STableSurface
-  minWidth?: STableMinWidth
-  rowState?: (row: Row) => STableRowState
-  cellState?: (row: Row, column: STableColumn<Row, Field>) => STableCellState
-  /** Accessible name без visible owner. / Accessible name when there is no visible owner. */
-  ariaLabel?: string
-  /** DOM id visible owner, mutually exclusive with ariaLabel. / DOM id of the visible owner, mutually exclusive with ariaLabel. */
-  ariaLabelledby?: string
-  /** DOM id supplemental status/diagnostic owner. / DOM id of a supplemental status/diagnostic owner. */
-  ariaDescribedby?: string
-}
-</script>
-
-<script setup lang="ts" generic="Row extends object = Record<string, unknown>, RowKey extends STableRowKey = STableRowKey, Field extends string = Extract<keyof Row, string>">
-import { computed, useId, useSlots, watch } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { ChevronDown, ChevronsUpDown, ChevronUp } from '../../icons/sputnigUiIcons'
-import { hasOwn } from '../../../internal/es2020'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import {
-  validateScrollableViewportMaxBlockSize,
-  validateTableColumnInlineSize,
-  validateTableColumnMinInlineSize,
-} from '../../../internal/semanticSizing'
-import {
-  validateBoolean,
-  validateDomId,
-  validateExactString,
-  validateNonEmptyString,
-} from '../../../internal/runtimeContract'
-import SAsyncState from '../feedback/SAsyncState.vue'
-import SButton from '../controls/SButton.vue'
-import SCheckbox from '../controls/SCheckbox.vue'
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
-  loading: false,
-  loadingMessage: undefined,
-  errorMessage: '',
-  emptyMessage: undefined,
-  selectedRowKey: undefined,
-  selectionMode: 'none',
-  selectedRowKeys: () => [],
-  isRowSelectable: undefined,
-  expandedRowKeys: () => [],
-  isRowExpandable: undefined,
-  getRowLabel: undefined,
-  sortMode: 'single',
-  sort: null,
-  sorts: () => [],
-  maxHeight: 'none',
-  density: 'default',
-  surface: 'bordered',
-  minWidth: 'content',
-  rowState: undefined,
-  cellState: undefined,
-  ariaLabel: undefined,
-  ariaLabelledby: undefined,
-  ariaDescribedby: undefined,
-})
-const emit = defineEmits<{
-  'row-click': [row: Row, index: number]
-  'row-contextmenu': [row: Row, index: number, event: MouseEvent]
-  'update:selectedRowKeys': [value: readonly RowKey[]]
-  'update:expandedRowKeys': [value: readonly RowKey[]]
-  'row-expand': [row: Row, index: number, expanded: boolean]
-  'update:sort': [value: STableSort<Field> | null]
-  sort: [value: STableSort<Field> | null]
-  'update:sorts': [value: readonly STableSort<Field>[]]
-  'multi-sort': [value: readonly STableSort<Field>[]]
-}>()
-const slots = useSlots()
-const { t } = useUiKitLocale()
-
-const TABLE_DENSITIES = ['default', 'compact'] as const
-const TABLE_SURFACES = ['bordered', 'plain'] as const
-const TABLE_MIN_WIDTHS = ['content', 'md', 'lg'] as const
-const TABLE_ALIGNMENTS = ['left', 'center', 'right'] as const
-const TABLE_ROW_STATES = ['default', 'inserted', 'updated', 'deleted'] as const
-const TABLE_CELL_STATES = ['default', 'pending'] as const
-const TABLE_COLUMN_CONTENT = ['field', 'value', 'slot'] as const
-const TABLE_HEADER_PRESENTATIONS = ['visible', 'assistive'] as const
-const TABLE_SELECTION_MODES = ['none', 'multiple'] as const
-const TABLE_SORT_MODES = ['single', 'multiple'] as const
-const TABLE_SORT_DIRECTIONS = ['ascending', 'descending'] as const
-
-const ownedAttrs = useOwnedAttrs({ component: 'STable', owner: 'table scroll surface' })
-useInteractiveLeafRegistration({ owner: 'STable' })
-const tableInstanceId = `s-table-${useId()}`
-const hasRowDetails = typeof slots['row-details'] === 'function'
-
-function eventBelongsToNestedControl(event: Event): boolean {
-  const owner = event.currentTarget
-  return event.composedPath().some((candidate) => candidate !== owner && candidate instanceof HTMLElement && (
-    candidate.matches('button, a, input, select, textarea, [role="button"], [role="link"]')
-  ))
-}
-
-function onRowClick(event: MouseEvent, row: Row, rowIndex: number): void {
-  if (!eventBelongsToNestedControl(event)) emit('row-click', row, rowIndex)
-}
-
-function onRowContextMenu(event: MouseEvent, row: Row, rowIndex: number): void {
-  if (!eventBelongsToNestedControl(event)) emit('row-contextmenu', row, rowIndex, event)
-}
-
-function onRowKeydown(event: KeyboardEvent, row: Row, rowIndex: number): void {
-  if (event.target !== event.currentTarget) return
-  event.preventDefault()
-  emit('row-click', row, rowIndex)
-}
-const validatedLoading = computed(() => validateBoolean('STable', 'loading', props.loading))
-const resolvedLoadingMessage = computed(() => props.loadingMessage ?? t('table.loading'))
-const resolvedEmptyMessage = computed(() => props.emptyMessage ?? t('table.empty'))
-const resolvedAccessibleName = computed(() => {
-  if (props.ariaLabel !== undefined && props.ariaLabelledby !== undefined) {
-    throw new TypeError('STable: задайте только ariaLabel или ariaLabelledby. / STable: provide only ariaLabel or ariaLabelledby.')
-  }
-  if (props.ariaLabelledby !== undefined) {
-    return {
-      ariaLabel: undefined,
-      ariaLabelledby: validateDomId('STable', 'ariaLabelledby', props.ariaLabelledby),
-    }
-  }
-  return {
-    ariaLabel: props.ariaLabel === undefined
-      ? t('table.accessibleName')
-      : validateNonEmptyString('STable', 'ariaLabel', props.ariaLabel),
-    ariaLabelledby: undefined,
-  }
-})
-const validatedAriaDescribedby = computed(() => props.ariaDescribedby === undefined
-  ? undefined
-  : validateDomId('STable', 'ariaDescribedby', props.ariaDescribedby))
-const validatedDensity = computed(() => validateExactString(
-  'STable',
-  'density',
-  props.density,
-  TABLE_DENSITIES,
-))
-const validatedSurface = computed(() => validateExactString(
-  'STable',
-  'surface',
-  props.surface,
-  TABLE_SURFACES,
-))
-const validatedMinWidth = computed(() => validateExactString(
-  'STable',
-  'minWidth',
-  props.minWidth,
-  TABLE_MIN_WIDTHS,
-))
-const validatedMaxHeight = computed(() => validateScrollableViewportMaxBlockSize(
-  'STable',
-  'maxHeight',
-  props.maxHeight,
-))
-const validatedSelectionMode = computed(() => validateExactString(
-  'STable',
-  'selectionMode',
-  props.selectionMode,
-  TABLE_SELECTION_MODES,
-))
-const validatedSortMode = computed(() => validateExactString(
-  'STable',
-  'sortMode',
-  props.sortMode,
-  TABLE_SORT_MODES,
-))
-
-const validatedColumns = computed<readonly STableColumn<Row, Field>[]>(() => {
-  const fields = new Set<string>()
-  for (const column of props.columns) {
-    const field = validateNonEmptyString('STable', 'columns[].field', column.field)
-    validateNonEmptyString('STable', `column ${JSON.stringify(field)}.header`, column.header)
-    const headerPresentation: STableColumnHeaderPresentation = validateExactString(
-      'STable',
-      `column ${JSON.stringify(field)}.headerPresentation`,
-      column.headerPresentation ?? 'visible',
-      TABLE_HEADER_PRESENTATIONS,
-    )
-    if (fields.has(field)) {
-      throw new TypeError(
-        `STable: columns содержит duplicate field ${JSON.stringify(field)}. `
-        + `/ STable: columns contains duplicate field ${JSON.stringify(field)}.`,
-      )
-    }
-    fields.add(field)
-    if (column.align !== undefined) {
-      validateExactString('STable', `column ${JSON.stringify(field)}.align`, column.align, TABLE_ALIGNMENTS)
-    }
-    if (column.sortable !== undefined) {
-      validateBoolean('STable', `column ${JSON.stringify(field)}.sortable`, column.sortable)
-    }
-    if (headerPresentation === 'assistive' && column.sortable) {
-      throw new TypeError(
-        `STable: assistive header column ${JSON.stringify(field)} не может быть sortable без visible action. `
-        + `/ STable: assistive header column ${JSON.stringify(field)} cannot be sortable without a visible action.`,
-      )
-    }
-    if (column.width !== undefined) {
-      validateTableColumnInlineSize('STable', `column ${JSON.stringify(field)}.width`, column.width)
-    }
-    if (column.minWidth !== undefined) {
-      validateTableColumnMinInlineSize('STable', `column ${JSON.stringify(field)}.minWidth`, column.minWidth)
-    }
-    const content: STableColumnContent = validateExactString(
-      'STable',
-      `column ${JSON.stringify(field)}.content`,
-      column.content ?? (column.value === undefined ? 'field' : 'value'),
-      TABLE_COLUMN_CONTENT,
-    )
-    if (content === 'value' && typeof column.value !== 'function') {
-      throw new TypeError(
-        `STable: value column ${JSON.stringify(field)} должен предоставить function value resolver. `
-        + `/ STable: value column ${JSON.stringify(field)} must provide a function value resolver.`,
-      )
-    }
-    if (content !== 'value' && column.value !== undefined) {
-      throw new TypeError(
-        `STable: ${content} column ${JSON.stringify(field)} не принимает value resolver. `
-        + `/ STable: ${content} column ${JSON.stringify(field)} does not accept a value resolver.`,
-      )
-    }
-    if (content === 'slot' && typeof slots[`cell-${field}`] !== 'function') {
-      throw new TypeError(
-        `STable: slot column ${JSON.stringify(field)} требует named slot ${JSON.stringify(`cell-${field}`)}. `
-        + `/ STable: slot column ${JSON.stringify(field)} requires named slot ${JSON.stringify(`cell-${field}`)}.`,
-      )
-    }
-  }
-  return props.columns
-})
-
-function validateSortEntry(value: unknown, coordinate: string): STableSort<Field> {
-  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
-    throw new TypeError(
-      `STable: ${coordinate} должен быть STableSort object. `
-      + `/ STable: ${coordinate} must be an STableSort object.`,
-    )
-  }
-  const entry = value as Record<string, unknown>
-  const key = validateNonEmptyString('STable', `${coordinate}.key`, entry.key) as Field
-  const column = validatedColumns.value.find((candidate) => candidate.field === key)
-  if (!column?.sortable) {
-    throw new TypeError(`STable: sort key ${JSON.stringify(key)} должен ссылаться на sortable column. / STable: sort key ${JSON.stringify(key)} must reference a sortable column.`)
-  }
-  return {
-    key,
-    direction: validateExactString(
-      'STable',
-      `${coordinate}.direction`,
-      entry.direction,
-      TABLE_SORT_DIRECTIONS,
-    ),
-  }
-}
-
-const validatedSingleSort = computed<STableSort<Field> | null>(() => {
-  if (validatedSortMode.value === 'multiple') {
-    if (props.sort !== null && props.sort !== undefined) {
-      throw new TypeError(
-        'STable: sortMode="multiple" несовместим с sort; используйте v-model:sorts. '
-        + '/ STable: sortMode="multiple" is incompatible with sort; use v-model:sorts.',
-      )
-    }
-    return null
-  }
-  if (props.sort === null || props.sort === undefined) return null
-  return validateSortEntry(props.sort, 'sort')
-})
-
-const validatedMultipleSort = computed<readonly STableSort<Field>[]>(() => {
-  const sorts: unknown = props.sorts
-  if (!Array.isArray(sorts)) {
-    throw new TypeError(
-      'STable: sorts должен быть ordered STableSort array. '
-      + '/ STable: sorts must be an ordered STableSort array.',
-    )
-  }
-  if (validatedSortMode.value === 'single') {
-    if (sorts.length > 0) {
-      throw new TypeError(
-        'STable: sortMode="single" несовместим с непустым sorts; используйте v-model:sort. '
-        + '/ STable: sortMode="single" is incompatible with non-empty sorts; use v-model:sort.',
-      )
-    }
-    return []
-  }
-  const keys = new Set<Field>()
-  return sorts.map((entry, index) => {
-    const validated = validateSortEntry(entry, `sorts[${index}]`)
-    if (keys.has(validated.key)) {
-      throw new TypeError(
-        `STable: sorts содержит duplicate key ${JSON.stringify(validated.key)}. `
-        + `/ STable: sorts contains duplicate key ${JSON.stringify(validated.key)}.`,
-      )
-    }
-    keys.add(validated.key)
-    return validated
-  })
-})
-
-const activeSorts = computed<readonly STableSort<Field>[]>(() => {
-  const singleSort = validatedSingleSort.value
-  const multipleSort = validatedMultipleSort.value
-  if (validatedSortMode.value === 'multiple') return multipleSort
-  return singleSort === null ? [] : [singleSort]
-})
-
-const NO_PENDING_SORT = Symbol('STable.no-pending-sort')
-let pendingSingleSort: STableSort<Field> | null | typeof NO_PENDING_SORT = NO_PENDING_SORT
-let pendingMultipleSort: readonly STableSort<Field>[] | typeof NO_PENDING_SORT = NO_PENDING_SORT
-
-const clearPendingSortIntent = (): void => {
-  pendingSingleSort = NO_PENDING_SORT
-  pendingMultipleSort = NO_PENDING_SORT
-}
-
-watch(validatedSortMode, clearPendingSortIntent, { flush: 'sync' })
-watch(validatedSingleSort, () => {
-  pendingSingleSort = NO_PENDING_SORT
-}, { deep: true, flush: 'sync' })
-watch(validatedMultipleSort, () => {
-  pendingMultipleSort = NO_PENDING_SORT
-}, { deep: true, flush: 'sync' })
-
-function sortIndex(column: STableColumn<Row, Field>): number {
-  return activeSorts.value.findIndex((candidate) => candidate.key === column.field)
-}
-
-function sortPriority(column: STableColumn<Row, Field>): number | null {
-  if (validatedSortMode.value !== 'multiple') return null
-  const index = sortIndex(column)
-  return index === -1 ? null : index + 1
-}
-
-const columnAriaSort = (column: STableColumn<Row, Field>): 'none' | 'ascending' | 'descending' | undefined => {
-  if (!column.sortable) return undefined
-  if (validatedSortMode.value === 'multiple') {
-    const primary = activeSorts.value[0]
-    return primary?.key === column.field ? primary.direction : undefined
-  }
-  const current = activeSorts.value[0]
-  return current?.key === column.field ? current.direction : 'none'
-}
-
-const sortIcon = (column: STableColumn<Row, Field>) => {
-  const direction = activeSorts.value.find((candidate) => candidate.key === column.field)?.direction
-  return direction === 'ascending' ? ChevronUp : direction === 'descending' ? ChevronDown : ChevronsUpDown
-}
-
-const sortActionLabel = (column: STableColumn<Row, Field>): string => {
-  const index = sortIndex(column)
-  const current = index === -1 ? undefined : activeSorts.value[index]
-  if (validatedSortMode.value === 'multiple') {
-    if (!current) return t('table.addSortAscending', { column: column.header })
-    const direction = current.direction === 'ascending'
-      ? t('table.ascending')
-      : t('table.descending')
-    const action = current.direction === 'ascending'
-      ? t('table.sortNextDescending')
-      : t('table.removeFromSort')
-    return t('table.multiSortSummary', {
-      column: column.header,
-      priority: index + 1,
-      total: activeSorts.value.length,
-      direction,
-      action,
-    })
-  }
-  const direction = current?.direction
-  if (direction === 'ascending') return t('table.sortDescending', { column: column.header })
-  if (direction === 'descending') return t('table.clearSort', { column: column.header })
-  return t('table.sortAscending', { column: column.header })
-}
-
-function requestSort(column: STableColumn<Row, Field>): void {
-  if (!column.sortable) return
-  const key = column.field as Field
-  if (validatedSortMode.value === 'multiple') {
-    const current = pendingMultipleSort === NO_PENDING_SORT
-      ? activeSorts.value
-      : pendingMultipleSort
-    const index = current.findIndex((candidate) => candidate.key === key)
-    let next: readonly STableSort<Field>[]
-    if (index === -1) next = [...current, { key, direction: 'ascending' }]
-    else if (current[index]!.direction === 'ascending') {
-      next = current.map((entry, candidateIndex) => candidateIndex === index
-        ? { key: entry.key, direction: 'descending' }
-        : entry)
-    } else next = current.filter((_entry, candidateIndex) => candidateIndex !== index)
-    pendingMultipleSort = next.map((entry) => ({ ...entry }))
-    emit('update:sorts', next)
-    emit('multi-sort', next)
-  } else {
-    const current = pendingSingleSort === NO_PENDING_SORT
-      ? activeSorts.value[0]
-      : pendingSingleSort ?? undefined
-    const next: STableSort<Field> | null = current?.key !== key
-      ? { key, direction: 'ascending' }
-      : current.direction === 'ascending'
-        ? { key, direction: 'descending' }
-        : null
-    pendingSingleSort = next === null ? null : { ...next }
-    emit('update:sort', next)
-    emit('sort', next)
-  }
-}
-
-function describeRowKey(key: STableRowKey): string {
-  return typeof key === 'string' ? JSON.stringify(key) : String(key)
-}
-
-function diagnosticOwner(): string {
-  return resolvedAccessibleName.value.ariaLabel === undefined
-    ? `STable [aria-labelledby=${JSON.stringify(resolvedAccessibleName.value.ariaLabelledby)}]`
-    : `STable ${JSON.stringify(resolvedAccessibleName.value.ariaLabel)}`
-}
-
-function describeThrownError(error: unknown): string {
-  return error instanceof Error ? `${error.name}: ${error.message}` : String(error)
-}
-
-function validateRowKey(value: unknown, coordinate: string): RowKey {
-  if (
-    (typeof value === 'string' && value.trim().length > 0)
-    || (typeof value === 'number' && Number.isFinite(value))
-  ) return value as RowKey
-
-  throw new TypeError(
-    `${diagnosticOwner()}: ${coordinate} должен вернуть non-empty string | finite number. `
-    + `/ ${diagnosticOwner()}: ${coordinate} must return a non-empty string | finite number.`,
-  )
-}
-
-function resolveRowKey(row: Row, rowIndex: number): RowKey {
-  if (typeof props.getRowKey !== 'function') {
-    throw new TypeError(
-      `${diagnosticOwner()}: getRowKey должен быть обязательным function resolver. `
-      + `/ ${diagnosticOwner()}: getRowKey must be a required function resolver.`,
-    )
-  }
-
-  let value: unknown
-  try {
-    value = props.getRowKey(row)
-  } catch (error: unknown) {
-    throw new TypeError(
-      `${diagnosticOwner()}: getRowKey failed at data[${rowIndex}]: ${describeThrownError(error)}.`,
-    )
-  }
-  return validateRowKey(value, `getRowKey at data[${rowIndex}]`)
-}
-
-function validateControlledKeys(coordinate: string, value: unknown): readonly RowKey[] {
-  if (!Array.isArray(value)) {
-    throw new TypeError(
-      `${diagnosticOwner()}: ${coordinate} должен быть readonly array. `
-      + `/ ${diagnosticOwner()}: ${coordinate} must be a readonly array.`,
-    )
-  }
-  const validated: RowKey[] = []
-  const seen = new Set<STableRowKey>()
-  for (const [index, candidate] of value.entries()) {
-    const key = validateRowKey(candidate, `${coordinate}[${index}]`)
-    if (seen.has(key)) {
-      throw new TypeError(
-        `${diagnosticOwner()}: ${coordinate} содержит duplicate key ${describeRowKey(key)}. `
-        + `/ ${diagnosticOwner()}: ${coordinate} contains duplicate key ${describeRowKey(key)}.`,
-      )
-    }
-    seen.add(key)
-    validated.push(key)
-  }
-  return validated
-}
-
-const validatedSelectedRowKey = computed<RowKey | undefined>(() => {
-  if (props.selectedRowKey === undefined) return undefined
-  if (validatedSelectionMode.value === 'multiple') {
-    throw new TypeError(
-      `${diagnosticOwner()}: selectedRowKey несовместим с selectionMode="multiple"; используйте selectedRowKeys. `
-      + `/ ${diagnosticOwner()}: selectedRowKey is incompatible with selectionMode="multiple"; use selectedRowKeys.`,
-    )
-  }
-  return validateRowKey(props.selectedRowKey, 'selectedRowKey')
-})
-
-const validatedSelectedRowKeys = computed<readonly RowKey[]>(() => {
-  const keys = validateControlledKeys('selectedRowKeys', props.selectedRowKeys)
-  if (validatedSelectionMode.value === 'none' && keys.length > 0) {
-    throw new TypeError(
-      `${diagnosticOwner()}: selectedRowKeys требует selectionMode="multiple". `
-      + `/ ${diagnosticOwner()}: selectedRowKeys requires selectionMode="multiple".`,
-    )
-  }
-  if (props.isRowSelectable !== undefined && validatedSelectionMode.value !== 'multiple') {
-    throw new TypeError(
-      `${diagnosticOwner()}: isRowSelectable требует selectionMode="multiple". `
-      + `/ ${diagnosticOwner()}: isRowSelectable requires selectionMode="multiple".`,
-    )
-  }
-  if (props.isRowSelectable !== undefined && typeof props.isRowSelectable !== 'function') {
-    throw new TypeError(`${diagnosticOwner()}: isRowSelectable must be a function.`)
-  }
-  return keys
-})
-
-const validatedExpandedRowKeys = computed<readonly RowKey[]>(() => {
-  const keys = validateControlledKeys('expandedRowKeys', props.expandedRowKeys)
-  if (!hasRowDetails && (keys.length > 0 || props.isRowExpandable !== undefined)) {
-    throw new TypeError(
-      `${diagnosticOwner()}: expandedRowKeys/isRowExpandable требует slot row-details. `
-      + `/ ${diagnosticOwner()}: expandedRowKeys/isRowExpandable requires the row-details slot.`,
-    )
-  }
-  if (props.isRowExpandable !== undefined && typeof props.isRowExpandable !== 'function') {
-    throw new TypeError(`${diagnosticOwner()}: isRowExpandable must be a function.`)
-  }
-  return keys
-})
-
-interface ResolvedRowEntry {
-  readonly row: Row
-  readonly key: RowKey
-  readonly index: number
-  readonly selectable: boolean
-  readonly expandable: boolean
-}
-
-const resolvedRowEntries = computed<readonly ResolvedRowEntry[]>(() => {
-  const columns = validatedColumns.value
-  void activeSorts.value
-  void validatedSelectedRowKeys.value
-  void validatedExpandedRowKeys.value
-  const firstIndexByKey = new Map<STableRowKey, number>()
-  const entries: ResolvedRowEntry[] = []
-  for (const [index, row] of props.data.entries()) {
-    const key = resolveRowKey(row, index)
-    const firstIndex = firstIndexByKey.get(key)
-    if (firstIndex !== undefined) {
-      throw new TypeError(
-        `${diagnosticOwner()}: getRowKey вернул duplicate key ${describeRowKey(key)} at data[${index}]; `
-        + `first returned at data[${firstIndex}]. / ${diagnosticOwner()}: getRowKey returned duplicate key `
-        + `${describeRowKey(key)} at data[${index}]; first returned at data[${firstIndex}].`,
-      )
-    }
-    firstIndexByKey.set(key, index)
-    for (const column of columns) {
-      const content = column.content ?? (column.value === undefined ? 'field' : 'value')
-      if (content === 'field' && !hasOwn(row, column.field)) {
-        throw new TypeError(
-          `STable: column ${JSON.stringify(column.field)} не известен row; добавьте typed field или value resolver. `
-          + `/ STable: column ${JSON.stringify(column.field)} is unknown to row; add a typed field or value resolver.`,
-        )
-      }
-    }
-    entries.push({
-      row,
-      key,
-      index,
-      selectable: validatedSelectionMode.value === 'multiple'
-        ? validateBoolean('STable', `isRowSelectable at data[${index}]`, props.isRowSelectable?.(row, index) ?? true)
-        : false,
-      expandable: hasRowDetails
-        ? validateBoolean('STable', `isRowExpandable at data[${index}]`, props.isRowExpandable?.(row, index) ?? true)
-        : false,
-    })
-  }
-  return entries
-})
-
-const validatedRows = computed<readonly ResolvedRowEntry[]>(() => {
-  const entries = resolvedRowEntries.value
-  const selectedKey = validatedSelectedRowKey.value
-  if (selectedKey !== undefined && !entries.some((entry) => entry.key === selectedKey)) {
-    throw new TypeError(
-      `${diagnosticOwner()}: selectedRowKey ${describeRowKey(selectedKey)} отсутствует в resolved row keys. `
-      + `/ ${diagnosticOwner()}: selectedRowKey ${describeRowKey(selectedKey)} is absent from resolved row keys.`,
-    )
-  }
-  const expanded = new Set(validatedExpandedRowKeys.value)
-  for (const entry of entries) {
-    if (expanded.has(entry.key) && !entry.expandable) {
-      throw new TypeError(
-        `${diagnosticOwner()}: expandedRowKeys содержит current row, для которой isRowExpandable вернул false. `
-        + `/ ${diagnosticOwner()}: expandedRowKeys contains a current row for which isRowExpandable returned false.`,
-      )
-    }
-  }
-  return entries
-})
-
-function rowKeyToken(key: RowKey): string {
-  return `${typeof key === 'number' ? 'number' : 'string'}:${String(key)}`
-}
-
-function rowDetailsId(key: RowKey): string {
-  return `${tableInstanceId}-details-${encodeURIComponent(rowKeyToken(key))}`
-}
-
-function resolveRowLabel(row: Row, index: number): string {
-  if (props.getRowLabel === undefined) return t('table.rowLabel', { index: index + 1 })
-  if (typeof props.getRowLabel !== 'function') {
-    throw new TypeError(`${diagnosticOwner()}: getRowLabel must be a function.`)
-  }
-  return validateNonEmptyString('STable', `getRowLabel at data[${index}]`, props.getRowLabel(row, index))
-}
-
-const selectedKeySet = computed(() => new Set(validatedSelectedRowKeys.value))
-const expandedKeySet = computed(() => new Set(validatedExpandedRowKeys.value))
-const selectableRows = computed(() => validatedRows.value.filter((entry) => entry.selectable))
-const selectedCurrentRowCount = computed(() => selectableRows.value.filter(
-  (entry) => selectedKeySet.value.has(entry.key),
-).length)
-const someCurrentRowsSelected = computed(() => selectedCurrentRowCount.value > 0)
-const allCurrentRowsSelected = computed(() => (
-  selectableRows.value.length > 0 && selectedCurrentRowCount.value === selectableRows.value.length
-))
-const renderedColumnCount = computed(() => Math.max(
-  validatedColumns.value.length
-    + (validatedSelectionMode.value === 'multiple' ? 1 : 0)
-    + (hasRowDetails ? 1 : 0),
-  1,
-))
-
-function rowIsSelected(entry: ResolvedRowEntry): boolean {
-  return validatedSelectionMode.value === 'multiple' && selectedKeySet.value.has(entry.key)
-}
-
-function rowAriaSelected(entry: ResolvedRowEntry): 'true' | 'false' | undefined {
-  if (validatedSelectionMode.value === 'multiple') return rowIsSelected(entry) ? 'true' : 'false'
-  return entry.key === validatedSelectedRowKey.value ? 'true' : undefined
-}
-
-function rowSelectionLabel(entry: ResolvedRowEntry): string {
-  const label = resolveRowLabel(entry.row, entry.index)
-  if (!entry.selectable) return t('table.selectionUnavailable', { label })
-  return rowIsSelected(entry)
-    ? t('table.deselectRow', { label })
-    : t('table.selectRow', { label })
-}
-
-function updateRowSelection(entry: ResolvedRowEntry, selected: boolean): void {
-  if (!entry.selectable) return
-  const key = entry.key
-  const current = validatedSelectedRowKeys.value
-  if (selected && !selectedKeySet.value.has(key)) emit('update:selectedRowKeys', [...current, key])
-  if (!selected && selectedKeySet.value.has(key)) {
-    emit('update:selectedRowKeys', current.filter((candidate) => candidate !== key))
-  }
-}
-
-function updateAllRowsSelection(selected: boolean): void {
-  const current = validatedSelectedRowKeys.value
-  const currentSelectableKeys = new Set(selectableRows.value.map((entry) => entry.key))
-  if (!selected) {
-    emit('update:selectedRowKeys', current.filter((key) => !currentSelectableKeys.has(key)))
-    return
-  }
-  const next = [...current]
-  const nextKeys = new Set(current)
-  for (const key of currentSelectableKeys) {
-    if (!nextKeys.has(key)) next.push(key)
-  }
-  emit('update:selectedRowKeys', next)
-}
-
-function rowIsExpanded(entry: ResolvedRowEntry): boolean {
-  return expandedKeySet.value.has(entry.key)
-}
-
-function rowExpansionLabel(entry: ResolvedRowEntry): string {
-  const label = resolveRowLabel(entry.row, entry.index)
-  return rowIsExpanded(entry)
-    ? t('table.collapseRow', { label })
-    : t('table.expandRow', { label })
-}
-
-function toggleRowExpansion(entry: ResolvedRowEntry): void {
-  if (!entry.expandable) return
-  const key = entry.key
-  const expanded = !expandedKeySet.value.has(key)
-  const next = expanded
-    ? [...validatedExpandedRowKeys.value, key]
-    : validatedExpandedRowKeys.value.filter((candidate) => candidate !== key)
-  emit('update:expandedRowKeys', next)
-  emit('row-expand', entry.row, entry.index, expanded)
-}
-
-const resolveCellValue = (row: Row, column: STableColumn<Row, Field>): unknown => column.value
-  ? column.value(row)
-  : column.content === 'slot'
-    ? undefined
-    : Reflect.get(row, column.field)
-
-const resolveRowState = (row: Row): STableRowState => validateExactString(
-  'STable',
-  'rowState',
-  props.rowState?.(row) ?? 'default',
-  TABLE_ROW_STATES,
-)
-
-const resolveCellState = (
-  row: Row,
-  column: STableColumn<Row, Field>,
-): STableCellState => validateExactString(
-  'STable',
-  'cellState',
-  props.cellState?.(row, column) ?? 'default',
-  TABLE_CELL_STATES,
-)
-</script>
-
-<style lang="postcss" src="./STable.css" scoped></style>