@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,314 @@
+<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 ? 'Свернуть' : 'Развернуть'"
+        :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="Скопировать текст"
+        aria-label="Скопировать текст"
+        :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 {
+  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 { 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: 'Текст скопирован' })
+    return
+  }
+
+  notifier.danger({
+    title: 'Ошибка копирования',
+    message: result.status === 'unavailable'
+      ? 'Буфер обмена недоступен в этом браузере.'
+      : result.status === 'empty'
+        ? 'Нет текста для копирования.'
+        : `Не удалось скопировать текст. ${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.css

@@ -0,0 +1,6 @@
+@reference "../../../styles/reference.css";
+.s-json-tree { @apply overflow-auto rounded p-3 font-mono text-xs; background: var(--s-json-tree-surface); }
+.s-json-tree__entry { @apply min-w-0; }
+.s-json-tree__key { @apply mr-1 font-mono; color: var(--s-json-tree-key-foreground); }
+.s-json-tree__value { @apply font-mono; color: var(--s-json-tree-value-foreground); font-variant-ligatures: none; }
+.s-json-tree__value[data-kind='array'], .s-json-tree__value[data-kind='object'] { @apply opacity-70; }

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

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+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 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 ? 'Пустой ключ' : 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="Структура JSON" :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.css

@@ -0,0 +1,37 @@
+@reference "../../../styles/reference.css";
+.s-key-value-grid { container-type: inline-size; @apply grid gap-3; }
+.s-key-value-grid[data-columns='2'] { @apply sm:grid-cols-2; }
+.s-key-value-grid[data-columns='3'] { @apply sm:grid-cols-2 xl:grid-cols-3; }
+.s-key-value-grid__item { @apply min-w-0; }
+.s-key-value-grid[data-variant='cards'] .s-key-value-grid__item { @apply rounded-md border border-surface-200 bg-surface-0/80 p-4 dark:border-surface-700 dark:bg-surface-900/60; }
+.s-key-value-grid[data-variant='inline'] .s-key-value-grid__item,
+.s-key-value-grid[data-variant='plain'] .s-key-value-grid__item { @apply grid items-start gap-x-3 gap-y-1; }
+.s-key-value-grid[data-variant='inline'] .s-key-value-grid__item { @apply border-b border-surface-200 py-2 last:border-b-0 dark:border-surface-700; }
+.s-key-value-grid[data-label-width='narrow'] .s-key-value-grid__item { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
+.s-key-value-grid[data-label-width='balanced'] .s-key-value-grid__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+.s-key-value-grid[data-label-width='wide'] .s-key-value-grid__item { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
+.s-key-value-grid[data-density='compact'] { @apply gap-1; }
+.s-key-value-grid__label {
+  @apply whitespace-normal text-xs uppercase tracking-[0.2em] text-surface-500 dark:text-surface-300;
+  overflow-wrap: anywhere;
+}
+.s-key-value-grid__value {
+  @apply whitespace-normal text-sm font-medium text-surface-900 dark:text-surface-100;
+  overflow-wrap: anywhere;
+}
+.s-key-value-grid[data-variant='cards'] .s-key-value-grid__value { @apply mt-2; }
+.s-key-value-grid[data-density='compact'] .s-key-value-grid__label,
+.s-key-value-grid[data-density='compact'] .s-key-value-grid__value { @apply text-[0.82rem] font-normal normal-case tracking-normal; }
+.s-key-value-grid[data-value-align='end'] .s-key-value-grid__value { @apply text-right; }
+.s-key-value-grid__value[data-monospace='true'] { @apply font-mono; }
+
+@container (max-width: 24rem) {
+  .s-key-value-grid[data-variant='inline'] .s-key-value-grid__item,
+  .s-key-value-grid[data-variant='plain'] .s-key-value-grid__item {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .s-key-value-grid[data-value-align='end'] .s-key-value-grid__value {
+    text-align: start;
+  }
+}