@pgcorp/ui-kit 0.2.0 → 0.3.1

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

@@ -0,0 +1,92 @@
+<template>
+  <span
+    v-bind="ownedAttrs.bindings()"
+    class="s-chip"
+    :data-severity="validatedSeverity"
+    :data-size="validatedSize"
+    :data-closable="closable || undefined"
+    :data-disabled="disabled || undefined"
+  >
+    <span v-if="leadingIcon" class="s-chip__icon" aria-hidden="true">
+      <component :is="leadingIcon" class="s-chip__icon-graphic" />
+    </span>
+    <span class="s-chip__label">{{ validatedLabel }}</span>
+    <SButton
+      v-if="closable"
+      label=""
+      appearance="ghost"
+      severity="secondary"
+      size="xs"
+      density="compact"
+      spacing="tight"
+      shape="circle"
+      icon-only
+      :leading-icon="X"
+      :disabled="disabled"
+      :aria-label="resolvedCloseLabel"
+      :title="resolvedCloseLabel"
+      @click.stop="emit('close', $event)"
+    />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { X } from '../../icons/sputnigUiIcons'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  validateBoolean,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+import SButton from '../controls/SButton.vue'
+import type { BadgeSeverity } from './SBadge.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export type SChipSeverity = BadgeSeverity
+export type SChipSize = 'sm' | 'md'
+
+export interface Props {
+  label: string
+  severity?: SChipSeverity
+  size?: SChipSize
+  leadingIcon?: Component
+  closable?: boolean
+  closeLabel?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  severity: 'secondary',
+  size: 'md',
+  leadingIcon: undefined,
+  closable: false,
+  closeLabel: undefined,
+  disabled: false,
+})
+const emit = defineEmits<{
+  close: [event: MouseEvent]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SChip', owner: 'chip root' })
+
+const validatedLabel = computed(() => validateNonEmptyString('SChip', 'label', props.label))
+const validatedSeverity = computed(() => validateExactString(
+  'SChip',
+  'severity',
+  props.severity,
+  ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'contrast'] as const,
+))
+const validatedSize = computed(() => validateExactString(
+  'SChip', 'size', props.size, ['sm', 'md'] as const,
+))
+const resolvedCloseLabel = computed(() => {
+  validateBoolean('SChip', 'closable', props.closable)
+  validateBoolean('SChip', 'disabled', props.disabled)
+  return props.closeLabel === undefined
+    ? `Удалить «${validatedLabel.value}»`
+    : validateNonEmptyString('SChip', 'closeLabel', props.closeLabel)
+})
+</script>
+
+<style lang="postcss" src="./SChip.css" scoped></style>

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

@@ -88,20 +88,20 @@ useInteractiveLeafRegistration({ owner: 'SDocBlock' });
 
 function escapeHighlightedCode(code: string): string {
   return code
-    .replaceAll('&', '&')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;');
+    .replace(/&/gu, '&amp;')
+    .replace(/</gu, '&lt;')
+    .replace(/>/gu, '&gt;')
+    .replace(/"/gu, '&quot;')
+    .replace(/'/gu, '&#39;');
 }
 
 function escapeHtmlAttribute(value: string): string {
   return value
-    .replaceAll('&', '&amp;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;');
+    .replace(/&/gu, '&amp;')
+    .replace(/</gu, '&lt;')
+    .replace(/>/gu, '&gt;')
+    .replace(/"/gu, '&quot;')
+    .replace(/'/gu, '&#39;');
 }
 
 const markdownRenderer = new marked.Renderer();

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

@@ -113,6 +113,7 @@ export interface Slots<T extends LinkedSystemListItem = LinkedSystemListItem> {
 
 <script setup lang="ts" generic="T extends LinkedSystemListItem = LinkedSystemListItem">
 import { computed, watchEffect } from 'vue'
+import { withErrorCause } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
   validateBoolean,
@@ -169,11 +170,10 @@ function validateExternalUrl(value: unknown, index: number): void {
   try {
     parsedUrl = new URL(externalUrl)
   } catch (error: unknown) {
-    throw new TypeError(
+    throw withErrorCause(new TypeError(
       `SLinkedSystemsList: ${coordinate} должен быть абсолютным HTTP(S) URL или null; получено ${JSON.stringify(externalUrl)}. `
       + `/ SLinkedSystemsList: ${coordinate} must be an absolute HTTP(S) URL or null; received ${JSON.stringify(externalUrl)}.`,
-      { cause: error },
-    )
+    ), error)
   }
   if (
     (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:')

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

@@ -23,10 +23,30 @@
             :data-width="column.width"
             :data-min-width="column.minWidth"
             :data-align="column.align ?? 'left'"
+            :data-sortable="column.sortable || undefined"
+            :aria-sort="columnAriaSort(column)"
           >
-            <slot name="column" :column="column">
-              <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
-            </slot>
+            <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)"
+              @click="requestSort(column)"
+            >
+              <slot name="column" :column="column">
+                <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
+              </slot>
+            </SButton>
+            <template v-else>
+              <slot name="column" :column="column">
+                <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
+              </slot>
+            </template>
           </th>
         </tr>
       </thead>
@@ -47,6 +67,10 @@
             :key="resolvedRowKeys.get(row)"
             :data-state="resolveRowState(row)"
             :aria-selected="resolvedRowKeys.get(row) === validatedSelectedRowKey ? 'true' : undefined"
+            tabindex="0"
+            @click="onRowClick($event, row, rowIndex)"
+            @keydown.enter="onRowKeydown($event, row, rowIndex)"
+            @keydown.space.prevent="onRowKeydown($event, row, rowIndex)"
           >
             <td
               v-for="column in validatedColumns"
@@ -80,6 +104,19 @@
 </template>
 
 <script lang="ts">
+import type { ScrollableViewportMaxBlockSize } from '../../../internal/semanticSizing'
+import type {
+  STableCellState,
+  STableColumn,
+  STableColumnContent,
+  STableDensity,
+  STableMinWidth,
+  STableRowKey,
+  STableRowState,
+  STableSort,
+  STableSurface,
+} from './table'
+
 export type {
   STableAlignment,
   STableCellState,
@@ -87,16 +124,49 @@ export type {
   STableColumnContent,
   STableDensity,
   STableMinWidth,
-  STableProps,
   STableRowKey,
   STableRowState,
+  STableSort,
+  STableSortDirection,
   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
+  sort?: STableSort<Field> | null
+  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, useSlots } from 'vue'
+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,
@@ -109,15 +179,7 @@ import {
   validateNonEmptyString,
 } from '../../../internal/runtimeContract'
 import SAsyncState from '../feedback/SAsyncState.vue'
-import type {
-  STableCellState,
-  STableColumn,
-  STableColumnContent,
-  STableProps,
-  STableRowKey,
-  STableRowState,
-} from './table'
-
+import SButton from '../controls/SButton.vue'
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
@@ -126,6 +188,7 @@ const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
   errorMessage: '',
   emptyMessage: 'Нет данных для отображения',
   selectedRowKey: undefined,
+  sort: null,
   maxHeight: 'none',
   density: 'default',
   surface: 'bordered',
@@ -136,6 +199,11 @@ const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
   ariaLabelledby: undefined,
   ariaDescribedby: undefined,
 })
+const emit = defineEmits<{
+  'row-click': [row: Row, index: number]
+  'update:sort': [value: STableSort<Field> | null]
+  sort: [value: STableSort<Field> | null]
+}>()
 const slots = useSlots()
 
 const TABLE_DENSITIES = ['default', 'compact'] as const
@@ -147,6 +215,22 @@ const TABLE_CELL_STATES = ['default', 'pending'] as const
 const TABLE_COLUMN_CONTENT = ['field', 'value', 'slot'] as const
 
 const ownedAttrs = useOwnedAttrs({ component: 'STable', owner: 'table scroll surface' })
+useInteractiveLeafRegistration({ owner: 'STable' })
+
+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 onRowKeydown(event: KeyboardEvent, row: Row, rowIndex: number): void {
+  if (event.target === event.currentTarget) emit('row-click', row, rowIndex)
+}
 const validatedLoading = computed(() => validateBoolean('STable', 'loading', props.loading))
 const resolvedAccessibleName = computed(() => {
   if (props.ariaLabel !== undefined && props.ariaLabelledby !== undefined) {
@@ -207,6 +291,9 @@ const validatedColumns = computed<readonly STableColumn<Row, 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 (column.width !== undefined) {
       validateTableColumnInlineSize('STable', `column ${JSON.stringify(field)}.width`, column.width)
     }
@@ -241,6 +328,54 @@ const validatedColumns = computed<readonly STableColumn<Row, Field>[]>(() => {
   return props.columns
 })
 
+const validatedSort = computed<STableSort<Field> | null>(() => {
+  if (props.sort === null || props.sort === undefined) return null
+  const key = validateNonEmptyString('STable', 'sort.key', props.sort.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',
+      'sort.direction',
+      props.sort.direction,
+      ['ascending', 'descending'] as const,
+    ),
+  }
+})
+
+const columnAriaSort = (column: STableColumn<Row, Field>): 'none' | 'ascending' | 'descending' | undefined => {
+  if (!column.sortable) return undefined
+  return validatedSort.value?.key === column.field ? validatedSort.value.direction : 'none'
+}
+
+const sortIcon = (column: STableColumn<Row, Field>) => {
+  const direction = columnAriaSort(column)
+  return direction === 'ascending' ? ChevronUp : direction === 'descending' ? ChevronDown : ChevronsUpDown
+}
+
+const sortActionLabel = (column: STableColumn<Row, Field>): string => {
+  const direction = columnAriaSort(column)
+  if (direction === 'ascending') return `${column.header}: сортировать по убыванию`
+  if (direction === 'descending') return `${column.header}: сбросить сортировку`
+  return `${column.header}: сортировать по возрастанию`
+}
+
+function requestSort(column: STableColumn<Row, Field>): void {
+  if (!column.sortable) return
+  const current = validatedSort.value
+  const key = column.field as Field
+  const next: STableSort<Field> | null = current?.key !== key
+    ? { key, direction: 'ascending' }
+    : current.direction === 'ascending'
+      ? { key, direction: 'descending' }
+      : null
+  emit('update:sort', next)
+  emit('sort', next)
+}
+
 function describeRowKey(key: STableRowKey): string {
   return typeof key === 'string' ? JSON.stringify(key) : String(key)
 }
@@ -283,12 +418,13 @@ const resolvedRowKeys = computed<ReadonlyMap<Row, RowKey>>(() => {
 
 const validatedRows = computed<readonly Row[]>(() => {
   const columns = validatedColumns.value
+  void validatedSort.value
   void resolvedRowKeys.value
   void validatedSelectedRowKey.value
   for (const row of props.data) {
     for (const column of columns) {
       const content = column.content ?? (column.value === undefined ? 'field' : 'value')
-      if (content === 'field' && !Object.hasOwn(row, column.field)) {
+      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.`,

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

@@ -69,6 +69,7 @@ import {
   type VNodeRef,
 } from 'vue';
 import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { hasOwn } from '../../../internal/es2020';
 import {
   resolveInteractiveElement,
   type ElementRefTarget,
@@ -202,7 +203,7 @@ function assertDenseArray(coordinate: string, value: unknown): readonly unknown[
     throw triggerContractError(`${coordinate} должен быть массивом. ${coordinate} must be an array.`);
   }
   for (let index = 0; index < value.length; index += 1) {
-    if (!Object.hasOwn(value, index)) {
+    if (!hasOwn(value, index)) {
       throw triggerContractError(`${coordinate}[${index}] отсутствует в sparse array. ${coordinate}[${index}] is missing from a sparse array.`);
     }
   }

package/src/components/shared/data-display/SVirtualList.ts

@@ -1,19 +1,4 @@
 /** Ключ элемента виртуального списка. / Virtual-list item key. */
 export type SVirtualListItemKey = string | number
 
-/**
- * Публичный контракт виртуального списка с измеряемыми строками.
- * Public contract for a virtual list with measured rows.
- */
-export interface SVirtualListProps<Item = unknown> {
-  items: readonly Item[]
-  /** Оценочная высота строки до фактического измерения ResizeObserver. / Estimated row height before ResizeObserver measurement. */
-  itemSize: number
-  overscan?: number
-  height?: number | null
-  /** Устойчивый доменный ключ; индекс массива не является допустимым fallback. / Stable domain key; an array index is not a valid fallback. */
-  itemKey: (item: Item) => SVirtualListItemKey
-  itemLabel: (item: Item, index: number) => string
-  accessibleLabel: string
-  externalScrollTarget?: HTMLElement | null
-}
+export type { SVirtualListProps } from './SVirtualList.vue'

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

@@ -35,6 +35,24 @@
   </div>
 </template>
 
+<script lang="ts">
+import type { SVirtualListItemKey } from './SVirtualList'
+
+/** Публичный контракт virtual list принадлежит source-SFC runtime. / The public virtual-list contract is owned by the source-SFC runtime. */
+export interface SVirtualListProps<Item = unknown> {
+  items: readonly Item[]
+  /** Оценочная высота строки до фактического измерения. / Estimated row height before measurement. */
+  itemSize: number
+  overscan?: number
+  height?: number | null
+  /** Устойчивый доменный ключ; индекс не является fallback. / Stable domain key; the index is not a fallback. */
+  itemKey: (item: Item) => SVirtualListItemKey
+  itemLabel: (item: Item, index: number) => string
+  accessibleLabel: string
+  externalScrollTarget?: HTMLElement | null
+}
+</script>
+
 <script setup lang="ts" generic="T">
 import {
   computed,
@@ -47,8 +65,6 @@ import {
 } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import type { SVirtualListItemKey, SVirtualListProps } from './SVirtualList'
-
 defineOptions({ inheritAttrs: false })
 
 type Alignment = 'auto' | 'start' | 'center' | 'end'

package/src/components/shared/data-display/json.ts

@@ -12,7 +12,7 @@ export type JsonValue = JsonScalar | JsonObject | JsonArray
 
 /** Escapes one RFC 6901 reference token. / Экранирует один reference token по RFC 6901. */
 export function escapeJsonPointerToken(token: string): string {
-  return token.replaceAll('~', '~0').replaceAll('/', '~1')
+  return token.replace(/~/gu, '~0').replace(/\//gu, '~1')
 }
 
 /** Appends a reference token to an RFC 6901 JSON Pointer. / Добавляет reference token к JSON Pointer по RFC 6901. */

package/src/components/shared/data-display/table.ts

@@ -1,5 +1,4 @@
 import type {
-  ScrollableViewportMaxBlockSize,
   TableColumnInlineSize,
   TableColumnMinInlineSize,
 } from '../../../internal/semanticSizing'
@@ -12,6 +11,13 @@ export type STableSurface = 'bordered' | 'plain'
 export type STableMinWidth = 'content' | 'md' | 'lg'
 export type STableDensity = 'default' | 'compact'
 export type STableColumnContent = 'field' | 'value' | 'slot'
+export type STableSortDirection = 'ascending' | 'descending'
+
+/** Controlled sort state; consumer owns data ordering. / Управляемое состояние сортировки; порядок данных принадлежит consumer. */
+export interface STableSort<Field extends string = string> {
+  key: Field
+  direction: STableSortDirection
+}
 
 interface STableColumnBase<Field extends string> {
   field: Field
@@ -19,6 +25,7 @@ interface STableColumnBase<Field extends string> {
   width?: TableColumnInlineSize
   minWidth?: TableColumnMinInlineSize
   align?: STableAlignment
+  sortable?: boolean
 }
 
 type STableFieldColumn<Field extends string> = STableColumnBase<Field> & {
@@ -47,30 +54,4 @@ export type STableColumn<
   | STableSlotColumn<Field>
   | (Field extends Extract<keyof Row, string> ? STableFieldColumn<Field> : never)
 
-/** Публичный generic-контракт таблицы. / Public generic table contract. */
-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
-  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
-}
+export type { STableProps } from './STable.vue'

package/src/components/shared/database/SDataGrid.vue

@@ -83,6 +83,13 @@
 </template>
 
 <script lang="ts">
+import type { ScrollableViewportMaxBlockSize } from '../../../internal/semanticSizing'
+import type {
+  SDataGridColumn,
+  SDataGridColumnKey,
+  SDataGridRow,
+} from './dataGrid'
+
 export type {
   SDataGridCell,
   SDataGridCellKind,
@@ -90,14 +97,32 @@ export type {
   SDataGridColumnKey,
   SDataGridCommitInput,
   SDataGridEditPayload,
-  SDataGridProps,
   SDataGridRow,
   SDataGridRowState,
 } from './dataGrid'
+
+/** Публичный контракт data grid принадлежит source-SFC runtime. / The public data-grid contract is owned by the source-SFC runtime. */
+export interface SDataGridProps<Key extends SDataGridColumnKey = SDataGridColumnKey> {
+  columns: readonly SDataGridColumn<Key>[]
+  rows: readonly SDataGridRow<Key>[]
+  title?: string
+  loading?: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  errorMessage?: string
+  emptyMessage?: string
+  selectedRowId?: string
+  maxHeight?: ScrollableViewportMaxBlockSize
+  /** Accessible name без visible title. / Accessible name when there is no visible title. */
+  ariaLabel?: string
+  /** DOM id external visible title. / DOM id of an external visible title. */
+  ariaLabelledby?: string
+}
 </script>
 
 <script setup lang="ts" generic="ColumnKey extends string = string">
 import { computed, reactive, useId, useSlots, watch } from 'vue'
+import { hasOwn } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
   validateScrollableViewportMaxBlockSize,
@@ -121,12 +146,8 @@ import type {
 } from '../data-display/table'
 import type {
   SDataGridCell,
-  SDataGridColumn,
-  SDataGridColumnKey,
   SDataGridCommitInput,
   SDataGridEditPayload,
-  SDataGridProps,
-  SDataGridRow,
 } from './dataGrid'
 
 defineOptions({ inheritAttrs: false })
@@ -266,7 +287,7 @@ const validatedGrid = computed<ValidatedGrid<ColumnKey>>(() => {
       }
     }
     for (const [key, column] of columnByKey) {
-      if (!Object.hasOwn(row.cells, key)) {
+      if (!hasOwn(row.cells, key)) {
         throw new TypeError(
           `SDataGrid: row ${JSON.stringify(rowId)} не содержит cell ${JSON.stringify(key)}. `
           + `/ SDataGrid: row ${JSON.stringify(rowId)} is missing cell ${JSON.stringify(key)}.`,
@@ -358,7 +379,7 @@ function resolveColumn(key: string): SDataGridColumn<ColumnKey> {
 
 function resolveCell(row: SDataGridRow<ColumnKey>, columnKeyValue: string): SDataGridCell {
   const columnKey = resolveColumn(columnKeyValue).key
-  if (Object.hasOwn(row.cells, columnKey)) return row.cells[columnKey]
+  if (hasOwn(row.cells, columnKey)) return row.cells[columnKey]
   throw new TypeError(
     `SDataGrid: row ${JSON.stringify(row.id)} не содержит cell ${JSON.stringify(columnKey)}. `
     + `/ SDataGrid: row ${JSON.stringify(row.id)} is missing cell ${JSON.stringify(columnKey)}.`,
@@ -404,7 +425,7 @@ function editCell(row: SDataGridRow<ColumnKey>, column: SDataGridColumn<ColumnKe
 function validateCommitInput(input: unknown): SDataGridCommitInput {
   assertRecord(input, 'commit input')
   const source = validateExactString('SDataGrid', 'commit input.source', input.source, COMMIT_SOURCES)
-  const hasValue = Object.hasOwn(input, 'value')
+  const hasValue = hasOwn(input, 'value')
   if (source === 'draft' && hasValue) {
     throw new TypeError(
       'SDataGrid: draft commit не должен содержать value. / SDataGrid: draft commit must not contain value.',

package/src/components/shared/database/SSqlEditor.vue

@@ -51,6 +51,7 @@
 
 <script setup lang="ts">
 import { computed, ref, useId, useSlots } from 'vue'
+import { hasOwn } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { provideTrustedCodeEditorExtensions } from '../../../internal/codeEditorExtensions'
 import { validateCodeEditorViewport } from '../../../internal/codeEditorContract'
@@ -291,8 +292,8 @@ const validatedDiagnostics = computed<SSqlEditorDiagnostic[]>(() => {
   return props.diagnostics.map((candidate, index) => {
     const runtimeCandidate: unknown = candidate
     const record = assertPlainExactRecord(`SSqlEditor.diagnostics[${index}]`, runtimeCandidate, ['severity', 'message', 'from', 'to', 'line', 'column'])
-    const hasOffset = Object.hasOwn(record, 'from')
-    const hasLine = Object.hasOwn(record, 'line') || Object.hasOwn(record, 'column')
+    const hasOffset = hasOwn(record, 'from')
+    const hasLine = hasOwn(record, 'line') || hasOwn(record, 'column')
     if (hasOffset === hasLine) throw new TypeError(`SSqlEditor: diagnostics[${index}] должен задавать ровно один range: from/to или line/column. / SSqlEditor: diagnostics[${index}] must provide exactly one range: from/to or line/column.`)
     const allowedRangeKeys = hasOffset
       ? ['severity', 'message', 'from', 'to']