@pgcorp/ui-kit 0.7.2 → 0.8.0

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

@@ -5,9 +5,10 @@
     :class="{
       's-code-block--radius-none': validatedSurfaceRadius === 'none',
       's-code-block--radius-xl': validatedSurfaceRadius === 'xl',
-      's-code-block--interactive': !validatedReadOnly,
+      's-code-block--interactive': validatedPresentation === 'editor' && !validatedReadOnly,
       's-code-block--viewport': !['content', 'document'].includes(validatedViewport),
     }"
+    :data-presentation="validatedPresentation"
   >
     <div v-if="validatedShowHeader" class="s-code-block-header">
       <div class="s-code-block-info">
@@ -29,7 +30,8 @@
       </div>
     </div>
     <div class="s-code-block-editor-region">
-      <SCodeEditor
+      <AsyncSCodeEditor
+        v-if="validatedPresentation === 'editor'"
         ref="codeEditor"
         :model-value="props.code"
         :language="validatedLanguage"
@@ -45,9 +47,24 @@
         @selection-applied="emit('selection-applied', $event)"
         @ready="onReady"
       />
+      <pre
+        v-else
+        :ref="setPlainSurface"
+        class="s-code-block-plain"
+        :data-viewport="validatedViewport"
+        :data-line-numbers="validatedShowLineNumbers ? 'visible' : 'hidden'"
+        :aria-label="props.ariaLabel"
+        :aria-labelledby="props.ariaLabelledby"
+        :style="{ tabSize: validatedTabSize }"
+        tabindex="0"
+      ><code v-if="!validatedShowLineNumbers">{{ validatedCode }}</code><code v-else class="s-code-block-plain__lines"><span
+          v-for="(line, index) in plainLines"
+          :key="index"
+          class="s-code-block-plain__line"
+        ><span class="s-code-block-plain__line-number" aria-hidden="true">{{ index + 1 }}</span><span class="s-code-block-plain__line-content">{{ line || '\u200b' }}</span></span></code></pre>
     </div>
     <SAsyncState
-      v-if="validatedErrorMessage !== undefined || !isReady"
+      v-if="validatedErrorMessage !== undefined || (validatedPresentation === 'editor' && !isReady)"
       :state="validatedErrorMessage === undefined
         ? { status: 'loading', message: 'Загрузка кода...' }
         : { status: 'error', message: validatedErrorMessage }"
@@ -57,21 +74,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, ref, watch, type ComponentPublicInstance } from 'vue';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
-import { validateBoolean, validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract';
+import { validateBoolean, validateBoundedInteger, validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract';
 import { validateCodeEditorLanguage, validateCodeEditorViewport } from '../../../internal/codeEditorContract';
-import { resolveCodeLanguageKey } from '../codeLanguages';
+import { resolveCodeLanguageKey } from '../../../internal/codeLanguageIdentity';
 import { useNotifier } from '../../../composables/useNotifier';
 import { useClipboard } from '../../../composables/useClipboard';
 import SButton from '../controls/SButton.vue';
-import SCodeEditor, {
-  type SCodeEditorCapabilities,
-  type SCodeEditorCursorActivity,
-  type SCodeEditorLanguage,
-  type SCodeEditorReadyPayload,
-  type SCodeEditorSelectionAppliedPayload,
-  type SCodeEditorViewport,
+import type {
+  SCodeEditorCapabilities,
+  SCodeEditorCursorActivity,
+  SCodeEditorLanguage,
+  SCodeEditorReadyPayload,
+  SCodeEditorSelectionAppliedPayload,
+  SCodeEditorViewport,
 } from './SCodeEditor.vue';
 import { Copy } from '../../icons/sputnigUiIcons';
 import SAsyncState from '../feedback/SAsyncState.vue';
@@ -86,6 +103,7 @@ type AccessibleName =
 export type Props = AccessibleName & {
   code: string;
   language: SCodeEditorLanguage;
+  presentation?: 'editor' | 'plain';
   showHeader?: boolean;
   showLineNumbers?: boolean;
   readOnly?: boolean;
@@ -100,6 +118,7 @@ export type Props = AccessibleName & {
 };
 
 const props = withDefaults(defineProps<Props>(), {
+  presentation: 'editor',
   showHeader: true,
   showLineNumbers: true,
   readOnly: true,
@@ -114,7 +133,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const isReady = ref(false);
-const codeEditor = ref<InstanceType<typeof SCodeEditor> | null>(null);
+const codeEditor = ref<InstanceType<typeof import('./SCodeEditor.vue')['default']> | null>(null);
+const plainSurface = ref<HTMLElement | null>(null);
+const AsyncSCodeEditor = defineAsyncComponent(() => import('../../../internal/lazyCodeEditor'));
 const ownedAttrs = useOwnedAttrs({ component: 'SCodeBlock', owner: 'code block root' });
 const emit = defineEmits<{
   (e: 'cursor-activity', payload: { pos: number; lineFrom: number; lineTo: number; lineText: string; cursorCol: number }): void
@@ -124,19 +145,29 @@ const emit = defineEmits<{
 }>();
 
 const validatedShowHeader = computed(() => validateBoolean('SCodeBlock', 'showHeader', props.showHeader));
+const validatedShowLineNumbers = computed(() => validateBoolean('SCodeBlock', 'showLineNumbers', props.showLineNumbers));
 const validatedReadOnly = computed(() => validateBoolean('SCodeBlock', 'readOnly', props.readOnly));
+const validatedPresentation = computed(() => validateExactString(
+  'SCodeBlock', 'presentation', props.presentation, ['editor', 'plain'] as const,
+));
 const validatedSurfaceRadius = computed(() => validateExactString(
   'SCodeBlock', 'surfaceRadius', props.surfaceRadius, ['default', 'none', 'xl'] as const,
 ));
 const validatedViewport = computed(() => validateCodeEditorViewport('SCodeBlock', props.viewport));
 const validatedLanguage = computed(() => validateCodeEditorLanguage('SCodeBlock', props.language));
+const validatedCode = computed(() => {
+  if (typeof props.code !== 'string') throw new TypeError('SCodeBlock: code должен быть string. / SCodeBlock: code must be a string.');
+  return props.code;
+});
+const validatedTabSize = computed(() => validateBoundedInteger('SCodeBlock', 'tabSize', props.tabSize, { minimum: 1, maximum: 16 }));
 const resolvedLanguageId = computed(() => resolveCodeLanguageKey(validatedLanguage.value));
+const plainLines = computed(() => validatedCode.value.split('\n'));
 const validatedErrorMessage = computed(() => props.errorMessage === undefined
   ? undefined
   : validateNonEmptyString('SCodeBlock', 'errorMessage', props.errorMessage));
 const editorCapabilities = computed<SCodeEditorCapabilities>(() => ({
-  lineNumbers: props.showLineNumbers,
-  indentation: { tabSize: props.tabSize, keyBehavior: props.tabKeyBehavior },
+  lineNumbers: validatedShowLineNumbers.value,
+  indentation: { tabSize: validatedTabSize.value, keyBehavior: props.tabKeyBehavior },
   ...(props.interceptKeys === undefined ? {} : { keyInterceptor: props.interceptKeys }),
   cursorActivity: 'always',
 }));
@@ -154,13 +185,68 @@ const onReady = (payload: SCodeEditorReadyPayload): void => {
   emit('ready', payload);
 };
 
+let mounted = false;
+const emitPlainReady = (): void => {
+  isReady.value = true;
+  emit('ready', {
+    documentLength: validatedCode.value.length,
+    viewport: validatedViewport.value,
+    variant: 'code',
+    locked: true,
+  });
+};
+
+const syncPresentation = (): void => {
+  if (!mounted) return;
+  if (validatedPresentation.value === 'plain') emitPlainReady();
+  else isReady.value = false;
+};
+
+onMounted(() => {
+  mounted = true;
+  syncPresentation();
+});
+watch(validatedPresentation, syncPresentation);
+
+watch(
+  [validatedPresentation, validatedReadOnly],
+  ([presentation, readOnly]) => {
+    if (presentation === 'plain' && !readOnly) {
+      throw new TypeError('SCodeBlock: presentation="plain" поддерживает только readOnly=true. / SCodeBlock: presentation="plain" supports readOnly=true only.');
+    }
+    if (presentation === 'plain' && props.interceptKeys !== undefined) {
+      throw new TypeError('SCodeBlock: presentation="plain" не принимает interceptKeys. / SCodeBlock: presentation="plain" does not accept interceptKeys.');
+    }
+    if (presentation === 'plain' && props.nextSelectionPos !== null) {
+      throw new TypeError('SCodeBlock: presentation="plain" не принимает nextSelectionPos. / SCodeBlock: presentation="plain" does not accept nextSelectionPos.');
+    }
+  },
+  { immediate: true },
+);
+
+const setPlainSurface = (element: Element | ComponentPublicInstance | null): void => {
+  if (element !== null && !(element instanceof HTMLElement)) {
+    throw new TypeError('SCodeBlock: plain surface ref должен быть HTMLElement. / SCodeBlock: plain surface ref must be an HTMLElement.');
+  }
+  plainSurface.value = element;
+};
+
 const applySelection = (position: number): void => {
+  if (validatedPresentation.value === 'plain') {
+    throw new Error('SCodeBlock: applySelection недоступен в presentation="plain". / SCodeBlock: applySelection is unavailable in presentation="plain".');
+  }
   const editor = codeEditor.value;
   if (!editor) throw new Error('SCodeBlock: editor не готов; дождитесь ready. / SCodeBlock: editor is not ready; wait for ready.');
   editor.applySelection(position);
 };
 
 const focus = (): void => {
+  if (validatedPresentation.value === 'plain') {
+    const surface = plainSurface.value;
+    if (!surface) throw new Error('SCodeBlock: plain surface не готов; дождитесь ready. / SCodeBlock: plain surface is not ready; wait for ready.');
+    surface.focus();
+    return;
+  }
   const editor = codeEditor.value;
   if (!editor) throw new Error('SCodeBlock: editor не готов; дождитесь ready. / SCodeBlock: editor is not ready; wait for ready.');
   editor.focus();

package/src/components/shared/data-display/SMetricCard.css

@@ -30,3 +30,4 @@
 }
 .s-metric-card__progress { @apply mt-auto space-y-2; }
 .s-metric-card__progress-label { @apply text-xs text-surface-500; }
+.s-metric-card__chart { @apply mt-auto min-w-0 w-full overflow-hidden; }

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

@@ -108,6 +108,7 @@ watchEffect(() => {
         <SProgressBar :accessibility="progressAccessibility" :value="resolvedProgressValue" :severity="progressSeverity" />
         <div class="s-metric-card__progress-label">{{ resolvedProgressLabel }}</div>
       </div>
+      <div v-if="$slots.chart" class="s-metric-card__chart"><slot name="chart" /></div>
       <slot />
     </div>
     <template v-if="$slots.actions" #actions><slot name="actions" /></template>

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

@@ -96,34 +96,34 @@
         />
         <template v-else>
           <template
-            v-for="(row, rowIndex) in validatedRows"
-            :key="rowDomToken(row)"
+            v-for="entry in validatedRows"
+            :key="rowKeyToken(entry.key)"
           >
             <tr
-              :data-state="resolveRowState(row)"
-              :data-selected="rowIsSelected(row) || undefined"
-              :aria-selected="rowAriaSelected(row)"
+              :data-state="resolveRowState(entry.row)"
+              :data-selected="rowIsSelected(entry) || undefined"
+              :aria-selected="rowAriaSelected(entry)"
               tabindex="0"
-              @click="onRowClick($event, row, rowIndex)"
-              @contextmenu="onRowContextMenu($event, row, rowIndex)"
-              @keydown.enter="onRowKeydown($event, row, rowIndex)"
-              @keydown.space="onRowKeydown($event, row, rowIndex)"
+              @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(row)"
-                  :disabled="!rowIsSelectable(row)"
-                  :aria-label="rowSelectionLabel(row, rowIndex)"
-                  @update:model-value="updateRowSelection(row, rowIndex, $event)"
+                  :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="rowIsExpandable(row)"
-                  :aria-label="rowExpansionLabel(row, rowIndex)"
+                  v-if="entry.expandable"
+                  :aria-label="rowExpansionLabel(entry)"
                   appearance="text"
                   severity="secondary"
                   size="xs"
@@ -131,47 +131,47 @@
                   shape="square"
                   icon-only
                   :disclosure="{
-                    expanded: rowIsExpanded(row),
-                    controls: rowDetailsId(row),
+                    expanded: rowIsExpanded(entry),
+                    controls: rowDetailsId(entry.key),
                     iconPlacement: 'leading',
                   }"
-                  @click="toggleRowExpansion(row, rowIndex)"
+                  @click="toggleRowExpansion(entry)"
                 />
               </td>
               <td
                 v-for="column in validatedColumns"
                 :key="column.field"
                 :data-align="column.align ?? 'left'"
-                :data-state="resolveCellState(row, column)"
+                :data-state="resolveCellState(entry.row, column)"
               >
                 <slot
                   :name="`cell-${column.field}`"
-                  :value="resolveCellValue(row, column)"
-                  :row="row"
+                  :value="resolveCellValue(entry.row, column)"
+                  :row="entry.row"
                   :column="column"
-                  :row-index="rowIndex"
+                  :row-index="entry.index"
                 >
                   <slot
                     name="cell"
-                    :value="resolveCellValue(row, column)"
-                    :row="row"
+                    :value="resolveCellValue(entry.row, column)"
+                    :row="entry.row"
                     :column="column"
-                    :row-index="rowIndex"
+                    :row-index="entry.index"
                   >
-                    {{ resolveCellValue(row, column) }}
+                    {{ resolveCellValue(entry.row, column) }}
                   </slot>
                 </slot>
               </td>
             </tr>
-            <tr v-if="rowIsExpandable(row) && rowIsExpanded(row)" data-row-details>
+            <tr v-if="entry.expandable && rowIsExpanded(entry)" data-row-details>
               <td :colspan="renderedColumnCount">
                 <div
-                  :id="rowDetailsId(row)"
+                  :id="rowDetailsId(entry.key)"
                   class="s-table__row-details"
                   role="region"
-                  :aria-label="`Детали: ${resolveRowLabel(row, rowIndex)}`"
+                  :aria-label="`Детали: ${resolveRowLabel(entry.row, entry.index)}`"
                 >
-                  <slot name="row-details" :row="row" :row-index="rowIndex" />
+                  <slot name="row-details" :row="entry.row" :row-index="entry.index" />
                 </div>
               </td>
             </tr>
@@ -664,7 +664,7 @@ function validateRowKey(value: unknown, coordinate: string): RowKey {
   )
 }
 
-const resolvedRowKeys = computed<ReadonlyMap<Row, RowKey>>(() => {
+function resolveRowKey(row: Row, rowIndex: number): RowKey {
   if (typeof props.getRowKey !== 'function') {
     throw new TypeError(
       `${diagnosticOwner()}: getRowKey должен быть обязательным function resolver. `
@@ -672,31 +672,16 @@ const resolvedRowKeys = computed<ReadonlyMap<Row, RowKey>>(() => {
     )
   }
 
-  const firstIndexByKey = new Map<STableRowKey, number>()
-  const rowKeys = new Map<Row, RowKey>()
-  for (const [rowIndex, row] of props.data.entries()) {
-    let value: unknown
-    try {
-      value = props.getRowKey(row)
-    } catch (error: unknown) {
-      throw new TypeError(
-        `${diagnosticOwner()}: getRowKey failed at data[${rowIndex}]: ${describeThrownError(error)}.`,
-      )
-    }
-    const key = validateRowKey(value, `getRowKey at data[${rowIndex}]`)
-    const firstIndex = firstIndexByKey.get(key)
-    if (firstIndex !== undefined) {
-      throw new TypeError(
-        `${diagnosticOwner()}: getRowKey вернул duplicate key ${describeRowKey(key)} at data[${rowIndex}]; `
-        + `first returned at data[${firstIndex}]. / ${diagnosticOwner()}: getRowKey returned duplicate key `
-        + `${describeRowKey(key)} at data[${rowIndex}]; first returned at data[${firstIndex}].`,
-      )
-    }
-    firstIndexByKey.set(key, rowIndex)
-    rowKeys.set(row, key)
+  let value: unknown
+  try {
+    value = props.getRowKey(row)
+  } catch (error: unknown) {
+    throw new TypeError(
+      `${diagnosticOwner()}: getRowKey failed at data[${rowIndex}]: ${describeThrownError(error)}.`,
+    )
   }
-  return rowKeys
-})
+  return validateRowKey(value, `getRowKey at data[${rowIndex}]`)
+}
 
 function validateControlledKeys(coordinate: string, value: unknown): readonly RowKey[] {
   if (!Array.isArray(value)) {
@@ -729,15 +714,7 @@ const validatedSelectedRowKey = computed<RowKey | undefined>(() => {
       + `/ ${diagnosticOwner()}: selectedRowKey is incompatible with selectionMode="multiple"; use selectedRowKeys.`,
     )
   }
-  const selectedKey = validateRowKey(props.selectedRowKey, 'selectedRowKey')
-  const rowKeys = new Set(resolvedRowKeys.value.values())
-  if (!rowKeys.has(selectedKey)) {
-    throw new TypeError(
-      `${diagnosticOwner()}: selectedRowKey ${describeRowKey(selectedKey)} отсутствует в resolved row keys. `
-      + `/ ${diagnosticOwner()}: selectedRowKey ${describeRowKey(selectedKey)} is absent from resolved row keys.`,
-    )
-  }
-  return selectedKey
+  return validateRowKey(props.selectedRowKey, 'selectedRowKey')
 })
 
 const validatedSelectedRowKeys = computed<readonly RowKey[]>(() => {
@@ -760,17 +737,6 @@ const validatedSelectedRowKeys = computed<readonly RowKey[]>(() => {
   return keys
 })
 
-const rowSelectableByRow = computed<ReadonlyMap<Row, boolean>>(() => {
-  const result = new Map<Row, boolean>()
-  for (const [index, row] of props.data.entries()) {
-    const selectable = validatedSelectionMode.value === 'multiple'
-      ? validateBoolean('STable', `isRowSelectable at data[${index}]`, props.isRowSelectable?.(row, index) ?? true)
-      : false
-    result.set(row, selectable)
-  }
-  return result
-})
-
 const validatedExpandedRowKeys = computed<readonly RowKey[]>(() => {
   const keys = validateControlledKeys('expandedRowKeys', props.expandedRowKeys)
   if (!hasRowDetails && (keys.length > 0 || props.isRowExpandable !== undefined)) {
@@ -785,36 +751,32 @@ const validatedExpandedRowKeys = computed<readonly RowKey[]>(() => {
   return keys
 })
 
-const rowExpandableByRow = computed<ReadonlyMap<Row, boolean>>(() => {
-  const result = new Map<Row, boolean>()
-  for (const [index, row] of props.data.entries()) {
-    const expandable = hasRowDetails
-      ? validateBoolean('STable', `isRowExpandable at data[${index}]`, props.isRowExpandable?.(row, index) ?? true)
-      : false
-    result.set(row, expandable)
-  }
-  const expanded = new Set(validatedExpandedRowKeys.value)
-  for (const row of props.data) {
-    if (expanded.has(rowKey(row)) && !result.get(row)) {
-      throw new TypeError(
-        `${diagnosticOwner()}: expandedRowKeys содержит current row, для которой isRowExpandable вернул false. `
-        + `/ ${diagnosticOwner()}: expandedRowKeys contains a current row for which isRowExpandable returned false.`,
-      )
-    }
-  }
-  return result
-})
+interface ResolvedRowEntry {
+  readonly row: Row
+  readonly key: RowKey
+  readonly index: number
+  readonly selectable: boolean
+  readonly expandable: boolean
+}
 
-const validatedRows = computed<readonly Row[]>(() => {
+const resolvedRowEntries = computed<readonly ResolvedRowEntry[]>(() => {
   const columns = validatedColumns.value
   void activeSorts.value
-  void resolvedRowKeys.value
-  void validatedSelectedRowKey.value
   void validatedSelectedRowKeys.value
-  void rowSelectableByRow.value
   void validatedExpandedRowKeys.value
-  void rowExpandableByRow.value
-  for (const row of props.data) {
+  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)) {
@@ -824,26 +786,48 @@ const validatedRows = computed<readonly Row[]>(() => {
         )
       }
     }
-  }
-  return props.data
+    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
 })
 
-function rowKey(row: Row): RowKey {
-  const key = resolvedRowKeys.value.get(row)
-  if (key === undefined) throw new Error(`${diagnosticOwner()}: row identity is unavailable`)
-  return key
-}
+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 rowDomToken(row: Row): string {
-  return rowKeyToken(rowKey(row))
-}
-
-function rowDetailsId(row: Row): string {
-  return `${tableInstanceId}-details-${encodeURIComponent(rowDomToken(row))}`
+function rowDetailsId(key: RowKey): string {
+  return `${tableInstanceId}-details-${encodeURIComponent(rowKeyToken(key))}`
 }
 
 function resolveRowLabel(row: Row, index: number): string {
@@ -856,9 +840,9 @@ function resolveRowLabel(row: Row, index: number): string {
 
 const selectedKeySet = computed(() => new Set(validatedSelectedRowKeys.value))
 const expandedKeySet = computed(() => new Set(validatedExpandedRowKeys.value))
-const selectableRows = computed(() => props.data.filter((row) => rowSelectableByRow.value.get(row) === true))
+const selectableRows = computed(() => validatedRows.value.filter((entry) => entry.selectable))
 const selectedCurrentRowCount = computed(() => selectableRows.value.filter(
-  (row) => selectedKeySet.value.has(rowKey(row)),
+  (entry) => selectedKeySet.value.has(entry.key),
 ).length)
 const someCurrentRowsSelected = computed(() => selectedCurrentRowCount.value > 0)
 const allCurrentRowsSelected = computed(() => (
@@ -871,29 +855,24 @@ const renderedColumnCount = computed(() => Math.max(
   1,
 ))
 
-function rowIsSelectable(row: Row): boolean {
-  return rowSelectableByRow.value.get(row) === true
+function rowIsSelected(entry: ResolvedRowEntry): boolean {
+  return validatedSelectionMode.value === 'multiple' && selectedKeySet.value.has(entry.key)
 }
 
-function rowIsSelected(row: Row): boolean {
-  return validatedSelectionMode.value === 'multiple' && selectedKeySet.value.has(rowKey(row))
+function rowAriaSelected(entry: ResolvedRowEntry): 'true' | 'false' | undefined {
+  if (validatedSelectionMode.value === 'multiple') return rowIsSelected(entry) ? 'true' : 'false'
+  return entry.key === validatedSelectedRowKey.value ? 'true' : undefined
 }
 
-function rowAriaSelected(row: Row): 'true' | 'false' | undefined {
-  if (validatedSelectionMode.value === 'multiple') return rowIsSelected(row) ? 'true' : 'false'
-  return rowKey(row) === validatedSelectedRowKey.value ? 'true' : undefined
+function rowSelectionLabel(entry: ResolvedRowEntry): string {
+  const label = resolveRowLabel(entry.row, entry.index)
+  if (!entry.selectable) return `Выбор недоступен: ${label}`
+  return rowIsSelected(entry) ? `Снять выбор: ${label}` : `Выбрать: ${label}`
 }
 
-function rowSelectionLabel(row: Row, index: number): string {
-  const label = resolveRowLabel(row, index)
-  if (!rowIsSelectable(row)) return `Выбор недоступен: ${label}`
-  return rowIsSelected(row) ? `Снять выбор: ${label}` : `Выбрать: ${label}`
-}
-
-function updateRowSelection(row: Row, index: number, selected: boolean): void {
-  void index
-  if (!rowIsSelectable(row)) return
-  const key = rowKey(row)
+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)) {
@@ -903,7 +882,7 @@ function updateRowSelection(row: Row, index: number, selected: boolean): void {
 
 function updateAllRowsSelection(selected: boolean): void {
   const current = validatedSelectedRowKeys.value
-  const currentSelectableKeys = new Set(selectableRows.value.map((row) => rowKey(row)))
+  const currentSelectableKeys = new Set(selectableRows.value.map((entry) => entry.key))
   if (!selected) {
     emit('update:selectedRowKeys', current.filter((key) => !currentSelectableKeys.has(key)))
     return
@@ -916,27 +895,23 @@ function updateAllRowsSelection(selected: boolean): void {
   emit('update:selectedRowKeys', next)
 }
 
-function rowIsExpandable(row: Row): boolean {
-  return rowExpandableByRow.value.get(row) === true
-}
-
-function rowIsExpanded(row: Row): boolean {
-  return expandedKeySet.value.has(rowKey(row))
+function rowIsExpanded(entry: ResolvedRowEntry): boolean {
+  return expandedKeySet.value.has(entry.key)
 }
 
-function rowExpansionLabel(row: Row, index: number): string {
-  return `${rowIsExpanded(row) ? 'Свернуть' : 'Раскрыть'}: ${resolveRowLabel(row, index)}`
+function rowExpansionLabel(entry: ResolvedRowEntry): string {
+  return `${rowIsExpanded(entry) ? 'Свернуть' : 'Раскрыть'}: ${resolveRowLabel(entry.row, entry.index)}`
 }
 
-function toggleRowExpansion(row: Row, index: number): void {
-  if (!rowIsExpandable(row)) return
-  const key = rowKey(row)
+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', row, index, expanded)
+  emit('row-expand', entry.row, entry.index, expanded)
 }
 
 const resolveCellValue = (row: Row, column: STableColumn<Row, Field>): unknown => column.value