@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,316 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    class="s-expandable-text"
-    :data-expanded="isExpanded ? 'true' : 'false'"
-    :data-expanded-max-height="validatedExpandedMaxHeight"
-    :data-typography="typography"
-    :data-appearance="appearance"
-  >
-    <div
-      :id="contentId"
-      ref="contentEl"
-      class="s-expandable-text-content"
-      :class="{
-        's-expandable-text-content--mono': monospace,
-        's-expandable-text-content--collapsed': canToggle && !isExpanded,
-        's-expandable-text-content--expanded': isExpanded,
-      }"
-      :style="contentStyle"
-    >
-      {{ text }}
-    </div>
-    <div v-if="canToggle || copyable" class="s-expandable-text-actions">
-      <SButton
-        v-if="canToggle"
-        appearance="text"
-        severity="secondary"
-        size="sm"
-        :label="isExpanded ? t('actions.collapse') : t('actions.expand')"
-        :disclosure="{ expanded: isExpanded, controls: contentId, iconPlacement: 'leading' }"
-        @click="toggleExpanded"
-      />
-      <SButton
-        v-if="copyable"
-        appearance="text"
-        severity="secondary"
-        size="sm"
-        shape="circle"
-        icon-only
-        :leading-icon="Copy"
-        :title="t('clipboard.copyText')"
-        :aria-label="t('clipboard.copyText')"
-        :disabled="!text"
-        @click="copyText"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
-import { Copy } from '../../icons/sputnigUiIcons'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import SButton from '../controls/SButton.vue'
-import { useNotifier } from '../../../composables/useNotifier'
-import { useClipboard } from '../../../composables/useClipboard'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import {
-  validateExpandedContentMaxBlockSize,
-  type ExpandedContentMaxBlockSize,
-} from '../../../internal/semanticSizing'
-import { validateBoundedInteger } from '../../../internal/runtimeContract'
-
-defineOptions({ inheritAttrs: false })
-
-/** Семантический max block-size раскрытого текста. / Semantic expanded-text max block size. */
-export type ExpandedTextMaxHeight = ExpandedContentMaxBlockSize
-/** Точное число строк в collapsed preview. / Exact line count in the collapsed preview. */
-export type ExpandedTextCollapsedLineCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-/** Семантическая типографическая роль. / Semantic typography role. */
-export type ExpandedTextTypography = 'body' | 'title' | 'label' | 'meta'
-/** Владеемая компонентом surface presentation. / Component-owned surface presentation. */
-export type ExpandedTextAppearance = 'plain' | 'preview' | 'surface'
-
-const COLLAPSED_LINE_COUNT_DOMAIN = { minimum: 1, maximum: 12 } as const
-const THRESHOLD_CHARACTER_COUNT_DOMAIN = { minimum: 1, maximum: 100_000 } as const
-
-const props = withDefaults(defineProps<{
-  text: string
-  /** Число видимых строк без clamp/fallback. / Visible line count without clamping or fallback. */
-  collapsedLines?: ExpandedTextCollapsedLineCount
-  /** Эвристический порог до DOM measurement, целое 1…100000. / Pre-measure heuristic, integer 1…100000. */
-  thresholdChars?: number
-  expanded?: boolean
-  defaultExpanded?: boolean
-  monospace?: boolean
-  copyable?: boolean
-  expandedMaxHeight?: ExpandedTextMaxHeight
-  /** Семантическая роль текста, не произвольный набор font classes. / Semantic text role, not arbitrary font classes. */
-  typography?: ExpandedTextTypography
-  /** Повторяемая owned surface для preview/state blocks. / Reusable owned surface for preview/state blocks. */
-  appearance?: ExpandedTextAppearance
-}>(), {
-  collapsedLines: 3,
-  thresholdChars: 220,
-  expanded: undefined,
-  defaultExpanded: false,
-  monospace: false,
-  copyable: true,
-  expandedMaxHeight: 'md',
-  typography: 'body',
-  appearance: 'plain',
-})
-
-const emit = defineEmits<{
-  'update:expanded': [value: boolean]
-}>()
-
-const notifier = useNotifier()
-const { t } = useUiKitLocale()
-const { copyText: copyToClipboard } = useClipboard()
-const contentEl = ref<HTMLElement | null>(null)
-const ownedAttrs = useOwnedAttrs({ component: 'SExpandableText', owner: 'expandable text root' })
-const measuredOverflow = ref(false)
-const internalExpanded = ref(props.defaultExpanded)
-const contentId = `s-expandable-text-${useId()}`
-let resizeObserver: ResizeObserver | null = null
-let measureFrame: number | null = null
-
-const validatedCollapsedLines = computed<ExpandedTextCollapsedLineCount>(() => {
-  const value = validateBoundedInteger(
-    'SExpandableText',
-    'collapsedLines',
-    props.collapsedLines,
-    COLLAPSED_LINE_COUNT_DOMAIN,
-  )
-  switch (value) {
-    case 1:
-    case 2:
-    case 3:
-    case 4:
-    case 5:
-    case 6:
-    case 7:
-    case 8:
-    case 9:
-    case 10:
-    case 11:
-    case 12:
-      return value
-  }
-  throw new TypeError('SExpandableText: unreachable collapsedLines contract state.')
-})
-const validatedThresholdChars = computed(() => validateBoundedInteger(
-  'SExpandableText',
-  'thresholdChars',
-  props.thresholdChars,
-  THRESHOLD_CHARACTER_COUNT_DOMAIN,
-))
-const lineCount = computed(() => (props.text.match(/\r\n|[\r\n]/gu)?.length ?? 0) + 1)
-const likelyOverflow = computed(() =>
-  props.text.length > validatedThresholdChars.value || lineCount.value > validatedCollapsedLines.value,
-)
-const canToggle = computed(() => likelyOverflow.value || measuredOverflow.value)
-const isControlled = computed(() => props.expanded !== undefined)
-const isExpanded = computed({
-  get: () => (isControlled.value ? Boolean(props.expanded) : internalExpanded.value),
-  set: (value: boolean) => {
-    if (isControlled.value) {
-      emit('update:expanded', value)
-      return
-    }
-    internalExpanded.value = value
-    emit('update:expanded', value)
-  },
-})
-const contentStyle = computed<Record<string, string>>(() => ({
-  '--s-expandable-text-lines': String(validatedCollapsedLines.value),
-}))
-const validatedExpandedMaxHeight = computed(() => validateExpandedContentMaxBlockSize(
-  'SExpandableText',
-  'expandedMaxHeight',
-  props.expandedMaxHeight,
-))
-
-function cancelMeasure(): void {
-  if (measureFrame !== null) {
-    window.cancelAnimationFrame(measureFrame)
-    measureFrame = null
-  }
-}
-
-function measureOverflow(): void {
-  const element = contentEl.value
-  if (!element || isExpanded.value) {
-    return
-  }
-  measuredOverflow.value = element.scrollHeight > element.clientHeight + 1
-}
-
-function scheduleMeasure(): void {
-  cancelMeasure()
-  measureFrame = window.requestAnimationFrame(() => {
-    measureFrame = null
-    measureOverflow()
-  })
-}
-
-function toggleExpanded(): void {
-  isExpanded.value = !isExpanded.value
-  if (!isExpanded.value) {
-    void nextTick(scheduleMeasure)
-  }
-}
-
-async function copyText(): Promise<void> {
-  if (!props.text) {
-    return
-  }
-  const result = await copyToClipboard(props.text)
-  if (result.status === 'copied') {
-    notifier.success({ message: t('clipboard.textCopied') })
-    return
-  }
-
-  notifier.danger({
-    title: t('clipboard.copyErrorTitle'),
-    message: result.status === 'unavailable'
-      ? t('clipboard.clipboardUnavailable')
-      : result.status === 'empty'
-        ? t('clipboard.emptyText')
-        : `${t('clipboard.textCopyFailed')} ${result.error.message}`,
-  })
-}
-
-watch(() => props.text, () => {
-  measuredOverflow.value = false
-  void nextTick(scheduleMeasure)
-})
-
-onMounted(() => {
-  void nextTick(scheduleMeasure)
-  if (typeof ResizeObserver !== 'undefined' && contentEl.value) {
-    resizeObserver = new ResizeObserver(scheduleMeasure)
-    resizeObserver.observe(contentEl.value)
-  }
-})
-
-onBeforeUnmount(() => {
-  cancelMeasure()
-  resizeObserver?.disconnect()
-  resizeObserver = null
-})
-</script>
-
-<style lang="postcss" scoped>
-@reference "../../../styles/reference.css";
-
-.s-expandable-text {
-  @apply min-w-0;
-}
-
-.s-expandable-text[data-appearance='preview'] {
-  @apply rounded-xl bg-surface-0 px-3 py-3 dark:bg-surface-950/60;
-}
-
-.s-expandable-text[data-appearance='surface'] {
-  @apply rounded-2xl border border-surface-200 bg-surface-50/70 px-4 py-3 dark:border-surface-700 dark:bg-surface-900/40;
-}
-
-.s-expandable-text-content {
-  @apply min-w-0 text-sm leading-6 text-surface-700 dark:text-surface-200;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-
-.s-expandable-text[data-typography='title'] .s-expandable-text-content {
-  @apply text-sm font-semibold leading-6 text-surface-800 dark:text-surface-100;
-}
-
-.s-expandable-text[data-typography='label'] .s-expandable-text-content {
-  @apply text-sm font-medium leading-6 text-surface-800 dark:text-surface-100;
-}
-
-.s-expandable-text[data-typography='meta'] .s-expandable-text-content {
-  @apply text-xs leading-5 text-surface-500 dark:text-surface-400;
-}
-
-.s-expandable-text[data-appearance='preview'] .s-expandable-text-content,
-.s-expandable-text[data-appearance='surface'] .s-expandable-text-content {
-  @apply text-surface-600 dark:text-surface-300;
-}
-
-.s-expandable-text-content--mono {
-  @apply font-mono text-xs leading-5;
-}
-
-.s-expandable-text-content--collapsed {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--s-expandable-text-lines);
-  overflow: hidden;
-}
-
-.s-expandable-text-content--expanded {
-  overflow: auto;
-}
-
-.s-expandable-text[data-expanded-max-height='sm'] .s-expandable-text-content--expanded {
-  max-block-size: var(--s-expanded-content-max-block-size-sm);
-}
-
-.s-expandable-text[data-expanded-max-height='md'] .s-expandable-text-content--expanded {
-  max-block-size: var(--s-expanded-content-max-block-size-md);
-}
-
-.s-expandable-text[data-expanded-max-height='lg'] .s-expandable-text-content--expanded {
-  max-block-size: var(--s-expanded-content-max-block-size-lg);
-}
-
-.s-expandable-text-actions {
-  @apply mt-2 flex min-w-0 flex-wrap items-center gap-2;
-}
-
-</style>

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

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import STree from '../complex/STree.vue'
-import type { TreeModel, TreeSelection } from '../complex/types'
-import {
-  appendJsonPointer,
-  assertJsonValue,
-  type JsonValue,
-} from './json'
-
-defineOptions({ inheritAttrs: false })
-
-export interface Props { value: JsonValue; initiallyCollapsed?: boolean }
-interface JsonTreeNode {
-  id: string
-  pointer: string
-  keyLabel?: string
-  summary: string
-  kind: 'array' | 'object' | 'scalar'
-  children: JsonTreeNode[]
-}
-
-const props = withDefaults(defineProps<Props>(), { initiallyCollapsed: false })
-const { t } = useUiKitLocale()
-const expanded = ref<Set<string>>(new Set())
-const ownedAttrs = useOwnedAttrs({ component: 'SJsonTree', owner: 'JSON tree root' })
-const selection: TreeSelection<string> = { mode: 'none' }
-const treeModel: TreeModel<JsonTreeNode, string> = {
-  key: (node) => node.id,
-  label: (node) => node.keyLabel === undefined
-    ? node.summary
-    : node.keyLabel.length === 0 ? t('data.emptyKey') : node.keyLabel,
-  children: (node) => node.children,
-  disabled: () => false,
-  icon: () => undefined,
-  multipleSelection: () => 'disabled',
-}
-
-function scalarSummary(value: JsonValue): string {
-  if (typeof value === 'string') return JSON.stringify(value)
-  if (value === null) return 'null'
-  return String(value)
-}
-
-function treeKey(pointer: string): string {
-  return `json-pointer:${pointer}`
-}
-
-function toNode(value: JsonValue, pointer = '', keyLabel?: string): JsonTreeNode {
-  if (Array.isArray(value)) {
-    return {
-      id: treeKey(pointer),
-      pointer,
-      keyLabel,
-      summary: `Array [${value.length}]`,
-      kind: 'array',
-      children: value.map((child, index) => toNode(child, appendJsonPointer(pointer, String(index)), `[${index}]`)),
-    }
-  }
-  if (value !== null && typeof value === 'object') {
-    const entries = Object.entries(value)
-    return {
-      id: treeKey(pointer),
-      pointer,
-      keyLabel,
-      summary: `Object {${entries.length}}`,
-      kind: 'object',
-      children: entries.map(([key, child]) => toNode(child, appendJsonPointer(pointer, key), key)),
-    }
-  }
-  return {
-    id: treeKey(pointer),
-    pointer,
-    keyLabel,
-    summary: scalarSummary(value),
-    kind: 'scalar',
-    children: [],
-  }
-}
-
-const root = computed(() => {
-  assertJsonValue(props.value, 'SJsonTree.value')
-  return toNode(props.value)
-})
-function collectContainerIds(node: JsonTreeNode, target: Set<string>) {
-  if (node.children.length === 0) return
-  target.add(node.id)
-  node.children.forEach((child) => collectContainerIds(child, target))
-}
-function expandAll() { const next = new Set<string>(); collectContainerIds(root.value, next); expanded.value = next }
-function collapseAll() { expanded.value = new Set() }
-
-watch(root, () => props.initiallyCollapsed ? collapseAll() : expandAll(), { immediate: true })
-defineExpose({ expandAll, collapseAll })
-</script>
-
-<template>
-  <div v-bind="ownedAttrs.bindings()" class="s-json-tree">
-    <STree :label="t('data.jsonStructure')" :nodes="[root]" :model="treeModel" :selection="selection" :expanded="expanded" density="compact" actions-layout="overlay" @update:expanded="expanded = new Set($event)">
-      <template #col-left />
-      <template #col-center="{ node }">
-        <span class="s-json-tree__entry" :data-json-pointer="node.pointer">
-          <span v-if="node.keyLabel !== undefined" class="s-json-tree__key">{{ JSON.stringify(node.keyLabel) }}:</span>
-          <span class="s-json-tree__value" :data-kind="node.kind">{{ node.summary }}</span>
-        </span>
-      </template>
-    </STree>
-  </div>
-</template>
-
-<style lang="postcss" src="./SJsonTree.css" scoped></style>

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

@@ -1,277 +0,0 @@
-<script lang="ts">
-/** Устойчивый доменный ключ строки definition list. / Stable domain key of a definition-list row. */
-export type SKeyValueGridKey = string | number
-
-/** Значение, которое компонент умеет представить без formatter. / Value the component can present without a formatter. */
-export type SKeyValueGridPrimitiveValue = string | number | boolean | null | undefined
-
-/** Typed presentation-модель одной definition-list строки. / Typed presentation model of one definition-list row. */
-export interface SKeyValueGridItem<Value = SKeyValueGridPrimitiveValue> {
-  label: string
-  value: Value
-  valueMonospace?: boolean
-}
-
-/**
- * Generic API definition-list: identity задаёт обязательный resolver, форматирование не меняет raw value.
- * Generic definition-list API: identity comes from the required resolver; formatting preserves the raw value.
- */
-export interface SKeyValueGridProps<
-  Item extends SKeyValueGridItem = SKeyValueGridItem,
-  ItemKey extends SKeyValueGridKey = SKeyValueGridKey,
-> {
-  items: readonly Item[]
-  getItemKey: (item: Item) => ItemKey
-  formatValue?: (value: Item['value'], item: Item) => string
-  emptyValueLabel?: string
-  variant?: 'cards' | 'inline' | 'plain'
-  columns?: 1 | 2 | 3
-  density?: 'comfortable' | 'compact'
-  valueAlign?: 'start' | 'end'
-  labelWidth?: 'narrow' | 'balanced' | 'wide'
-}
-</script>
-
-<script setup lang="ts" generic="Item extends SKeyValueGridItem, ItemKey extends SKeyValueGridKey">
-import { computed } from 'vue'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import {
-  validateBoolean,
-  validateBoundedInteger,
-  validateExactString,
-  validateNonEmptyString,
-} from '../../../internal/runtimeContract'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<SKeyValueGridProps<Item, ItemKey>>(), {
-  formatValue: undefined,
-  emptyValueLabel: '—',
-  variant: 'cards',
-  columns: 3,
-  density: 'comfortable',
-  valueAlign: 'start',
-  labelWidth: 'narrow',
-})
-
-defineSlots<{
-  label?(props: { item: Item; itemKey: ItemKey; index: number }): unknown
-  value?(props: {
-    item: Item
-    itemKey: ItemKey
-    index: number
-    value: Item['value']
-    formattedValue: SKeyValueGridPrimitiveValue
-  }): unknown
-}>()
-
-const VARIANTS = ['cards', 'inline', 'plain'] as const
-const DENSITIES = ['comfortable', 'compact'] as const
-const VALUE_ALIGNMENTS = ['start', 'end'] as const
-const LABEL_WIDTHS = ['narrow', 'balanced', 'wide'] as const
-
-interface ResolvedItem {
-  item: Item
-  itemKey: ItemKey
-  index: number
-  label: string
-  formattedValue: SKeyValueGridPrimitiveValue
-  valueMonospace: boolean
-}
-
-const ownedAttrs = useOwnedAttrs({ component: 'SKeyValueGrid', owner: 'key-value definition list' })
-const validatedVariant = computed(() => validateExactString(
-  'SKeyValueGrid',
-  'variant',
-  props.variant,
-  VARIANTS,
-))
-const validatedColumns = computed(() => validateBoundedInteger(
-  'SKeyValueGrid',
-  'columns',
-  props.columns,
-  { minimum: 1, maximum: 3 },
-))
-const validatedDensity = computed(() => validateExactString(
-  'SKeyValueGrid',
-  'density',
-  props.density,
-  DENSITIES,
-))
-const validatedValueAlign = computed(() => validateExactString(
-  'SKeyValueGrid',
-  'valueAlign',
-  props.valueAlign,
-  VALUE_ALIGNMENTS,
-))
-const validatedLabelWidth = computed(() => validateExactString(
-  'SKeyValueGrid',
-  'labelWidth',
-  props.labelWidth,
-  LABEL_WIDTHS,
-))
-
-function describeKey(key: SKeyValueGridKey): string {
-  return typeof key === 'string' ? JSON.stringify(key) : String(key)
-}
-
-function validateItemKey(candidate: unknown, coordinate: string): asserts candidate is ItemKey {
-  if (typeof candidate === 'string') {
-    if (candidate.trim().length > 0) return
-    throw new TypeError(
-      `SKeyValueGrid: getItemKey вернул пустую строку для ${coordinate}. `
-      + `/ SKeyValueGrid: getItemKey returned an empty string for ${coordinate}.`,
-    )
-  }
-  if (typeof candidate === 'number') {
-    if (Number.isFinite(candidate)) return
-    throw new TypeError(
-      `SKeyValueGrid: getItemKey вернул неконечное число для ${coordinate}. `
-      + `/ SKeyValueGrid: getItemKey returned a non-finite number for ${coordinate}.`,
-    )
-  }
-  throw new TypeError(
-    `SKeyValueGrid: getItemKey вернул неподдерживаемый key ${typeof candidate} для ${coordinate}. `
-    + `/ SKeyValueGrid: getItemKey returned unsupported ${typeof candidate} key for ${coordinate}.`,
-  )
-}
-
-function validateUnformattedValue(
-  value: unknown,
-  coordinate: string,
-): asserts value is SKeyValueGridPrimitiveValue {
-  if (
-    value === null
-    || value === undefined
-    || typeof value === 'string'
-    || typeof value === 'boolean'
-    || (typeof value === 'number' && Number.isFinite(value))
-  ) return
-
-  throw new TypeError(
-    `SKeyValueGrid: ${coordinate} должен быть string | finite number | boolean | null | undefined `
-    + `или иметь formatValue. / SKeyValueGrid: ${coordinate} must be string | finite number | boolean `
-    + '| null | undefined or provide formatValue.',
-  )
-}
-
-function resolveFormattedValue(item: Item, index: number): SKeyValueGridPrimitiveValue {
-  const coordinate = `items[${index}]`
-  if (props.formatValue !== undefined) {
-    if (typeof props.formatValue !== 'function') {
-      throw new TypeError(
-        'SKeyValueGrid: formatValue должен быть function. '
-        + '/ SKeyValueGrid: formatValue must be a function.',
-      )
-    }
-    const result: unknown = props.formatValue(item.value, item)
-    if (typeof result !== 'string') {
-      throw new TypeError(
-        `SKeyValueGrid: formatValue должен вернуть string для ${coordinate}. `
-        + `/ SKeyValueGrid: formatValue must return a string for ${coordinate}.`,
-      )
-    }
-    return result
-  }
-
-  validateUnformattedValue(item.value, `${coordinate}.value`)
-  return item.value ?? validateNonEmptyString('SKeyValueGrid', 'emptyValueLabel', props.emptyValueLabel)
-}
-
-const resolvedItems = computed<readonly ResolvedItem[]>(() => {
-  if (!Array.isArray(props.items)) {
-    throw new TypeError(
-      'SKeyValueGrid: items должен быть readonly array. '
-      + '/ SKeyValueGrid: items must be a readonly array.',
-    )
-  }
-  if (typeof props.getItemKey !== 'function') {
-    throw new TypeError(
-      'SKeyValueGrid: getItemKey должен быть обязательным function resolver. '
-      + '/ SKeyValueGrid: getItemKey must be a required function resolver.',
-    )
-  }
-
-  const coordinatesByKey = new Map<SKeyValueGridKey, string>()
-  return props.items.map((candidate, index) => {
-    const coordinate = `items[${index}]`
-    if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
-      throw new TypeError(
-        `SKeyValueGrid: ${coordinate} должен быть object. `
-        + `/ SKeyValueGrid: ${coordinate} must be an object.`,
-      )
-    }
-    const item = candidate as Item
-    const label = validateNonEmptyString('SKeyValueGrid', `${coordinate}.label`, item.label)
-    const rawKey: unknown = props.getItemKey(item)
-    validateItemKey(rawKey, coordinate)
-    const previousCoordinate = coordinatesByKey.get(rawKey)
-    if (previousCoordinate !== undefined) {
-      throw new TypeError(
-        `SKeyValueGrid: getItemKey вернул duplicate key ${describeKey(rawKey)} для ${coordinate}; `
-        + `впервые объявлен в ${previousCoordinate}. / SKeyValueGrid: getItemKey returned duplicate key `
-        + `${describeKey(rawKey)} for ${coordinate}; first declared at ${previousCoordinate}.`,
-      )
-    }
-    coordinatesByKey.set(rawKey, coordinate)
-
-    const valueMonospace = item.valueMonospace === undefined
-      ? false
-      : validateBoolean('SKeyValueGrid', `${coordinate}.valueMonospace`, item.valueMonospace)
-    return {
-      item,
-      itemKey: rawKey,
-      index,
-      label,
-      formattedValue: resolveFormattedValue(item, index),
-      valueMonospace,
-    }
-  })
-})
-</script>
-
-<template>
-  <dl
-    v-bind="ownedAttrs.bindings()"
-    class="s-key-value-grid"
-    :data-variant="validatedVariant"
-    :data-columns="validatedColumns"
-    :data-density="validatedDensity"
-    :data-value-align="validatedValueAlign"
-    :data-label-width="validatedLabelWidth"
-  >
-    <div
-      v-for="entry in resolvedItems"
-      :key="entry.itemKey"
-      class="s-key-value-grid__item"
-    >
-      <dt class="s-key-value-grid__label">
-        <slot
-          name="label"
-          :item="entry.item"
-          :item-key="entry.itemKey"
-          :index="entry.index"
-        >
-          {{ entry.label }}
-        </slot>
-      </dt>
-      <dd
-        class="s-key-value-grid__value"
-        :data-monospace="entry.valueMonospace ? 'true' : undefined"
-      >
-        <slot
-          name="value"
-          :item="entry.item"
-          :item-key="entry.itemKey"
-          :index="entry.index"
-          :value="entry.item.value"
-          :formatted-value="entry.formattedValue"
-        >
-          {{ entry.formattedValue }}
-        </slot>
-      </dd>
-    </div>
-  </dl>
-</template>
-
-<style lang="postcss" src="./SKeyValueGrid.css" scoped></style>