@pgcorp/ui-kit 0.10.0 → 0.10.2

package/src/components/shared/data-display/_internal/SCodeTokenLine.vue

@@ -1,79 +0,0 @@
-<template>
-  <code
-    class="s-code-token-line"
-    :data-highlight-state="highlightState"
-    :data-wrap="validatedWrap"
-    :data-variant="validatedVariant"
-  ><TokenContent /></code>
-</template>
-
-<script setup lang="ts">
-import { Fragment, computed, h, onBeforeUnmount, ref, watch, type VNodeChild } from 'vue'
-
-import { validateBoolean } from '../../../../internal/runtimeContract'
-import type { SDiffLanguage } from '../diff'
-
-defineOptions({ inheritAttrs: false })
-
-interface Props {
-  text: string
-  language?: SDiffLanguage
-  wrap?: boolean
-  variant?: 'diff' | 'code-block'
-}
-
-type RenderToken = string | {
-  readonly className: string | null
-  readonly children: readonly RenderToken[]
-}
-
-const props = withDefaults(defineProps<Props>(), { language: undefined, wrap: false, variant: 'diff' })
-const tokens = ref<readonly RenderToken[]>([props.text])
-const highlightState = ref<'plain' | 'loading' | 'highlighted'>('plain')
-const validatedWrap = computed(() => validateBoolean('SCodeTokenLine', 'wrap', props.wrap))
-const validatedVariant = computed(() => {
-  if (props.variant === 'diff' || props.variant === 'code-block') return props.variant
-  throw new TypeError('SCodeTokenLine: variant must be diff or code-block.')
-})
-let generation = 0
-
-function renderToken(token: RenderToken, index: number): VNodeChild {
-  if (typeof token === 'string') return token
-  return h('span', { key: index, class: token.className }, token.children.map(renderToken))
-}
-
-const TokenContent = () => h(Fragment, tokens.value.map(renderToken))
-
-watch(
-  () => [props.text, props.language] as const,
-  async ([text, language]) => {
-    const currentGeneration = generation += 1
-    if (language === undefined) {
-      tokens.value = [text]
-      highlightState.value = 'plain'
-      return
-    }
-    highlightState.value = 'loading'
-    const highlighter = await import('../../../../internal/codeHighlight')
-    const toRenderToken = (token: Awaited<ReturnType<typeof highlighter.highlightCodeToTokens>>[number]): RenderToken => (
-      typeof token === 'string'
-        ? token
-        : Object.freeze({
-            className: token.scope === null ? null : highlighter.highlightScopeClass(token.scope),
-            children: Object.freeze(token.children.map(toRenderToken)),
-          })
-    )
-    const nextTokens = highlighter.highlightCodeToTokens(text, language).map(toRenderToken)
-    if (currentGeneration !== generation) return
-    tokens.value = Object.freeze(nextTokens)
-    highlightState.value = 'highlighted'
-  },
-  { immediate: true },
-)
-
-onBeforeUnmount(() => {
-  generation += 1
-})
-</script>
-
-<style lang="postcss" src="./SCodeTokenLine.css" scoped></style>

package/src/components/shared/data-display/_internal/SRichBlockNode.vue

@@ -1,282 +0,0 @@
-<template>
-  <p v-if="node.type === 'paragraph'" class="s-rich-document__paragraph">
-    <SRichInlineNode
-      v-for="(child, index) in node.children"
-      :key="index"
-      :node="child"
-      :document-id="documentId"
-      :path="`${path}.children[${index}]`"
-      @link-activate="emit('link-activate', $event)"
-    />
-  </p>
-  <component :is="`h${node.level}`" v-else-if="node.type === 'heading'" class="s-rich-document__heading">
-    <SRichInlineNode
-      v-for="(child, index) in node.children"
-      :key="index"
-      :node="child"
-      :document-id="documentId"
-      :path="`${path}.children[${index}]`"
-      @link-activate="emit('link-activate', $event)"
-    />
-  </component>
-  <component
-    :is="node.ordered ? 'ol' : 'ul'"
-    v-else-if="node.type === 'list'"
-    class="s-rich-document__list"
-    :start="node.ordered ? node.start : undefined"
-  >
-    <li v-for="(item, itemIndex) in node.children" :key="itemIndex">
-      <SRichBlockNode
-        v-for="(child, childIndex) in item.children"
-        :key="childIndex"
-        :node="child"
-        :resources="resources"
-        :document-id="documentId"
-        :path="`${path}.children[${itemIndex}].children[${childIndex}]`"
-        @link-activate="emit('link-activate', $event)"
-        @resource-activate="emit('resource-activate', $event)"
-        @action="emit('action', $event)"
-      />
-    </li>
-  </component>
-  <blockquote v-else-if="node.type === 'quote'" class="s-rich-document__quote">
-    <SRichBlockNode
-      v-for="(child, index) in node.children"
-      :key="index"
-      :node="child"
-      :resources="resources"
-      :document-id="documentId"
-      :path="`${path}.children[${index}]`"
-      @link-activate="emit('link-activate', $event)"
-      @resource-activate="emit('resource-activate', $event)"
-      @action="emit('action', $event)"
-    />
-  </blockquote>
-  <hr v-else-if="node.type === 'divider'" class="s-rich-document__divider" />
-  <figure v-else-if="node.type === 'image'" class="s-rich-document__figure">
-    <img
-      class="s-rich-document__image"
-      :src="imageResource(node.resourceId).url"
-      :alt="imageResource(node.resourceId).alt"
-      :title="imageResource(node.resourceId).title"
-      loading="lazy"
-      decoding="async"
-    />
-    <figcaption v-if="node.caption" class="s-rich-document__caption">
-      <SRichInlineNode
-        v-for="(child, index) in node.caption"
-        :key="index"
-        :node="child"
-        :document-id="documentId"
-        :path="`${path}.caption[${index}]`"
-        @link-activate="emit('link-activate', $event)"
-      />
-    </figcaption>
-  </figure>
-  <div v-else-if="node.type === 'resource'" class="s-rich-document__resource">
-    <SButton
-      :label="node.label"
-      severity="secondary"
-      appearance="soft"
-      size="sm"
-      @click="activateResource(node.resourceId)"
-    />
-    <span v-if="node.description" class="s-rich-document__resource-description">{{ node.description }}</span>
-  </div>
-  <AsyncSCodeBlock
-    v-else-if="node.type === 'codeBlock'"
-    :code="node.code"
-    :language="{ mode: 'explicit', id: node.language ?? 'text' }"
-    presentation="highlighted"
-    :show-header="node.language !== undefined || node.label !== undefined"
-    :show-line-numbers="node.showLineNumbers ?? true"
-    read-only
-    viewport="document"
-    :aria-label="node.label ?? t('editor.codeBlock')"
-  />
-  <AsyncSRichMath
-    v-else-if="node.type === 'mathBlock'"
-    :source="node.source"
-    :label="node.label"
-    display="block"
-  />
-  <STable
-    v-else-if="node.type === 'table'"
-    :columns="tableColumns"
-    :data="node.rows"
-    :get-row-key="rowKey"
-    :aria-label="node.label"
-    surface="plain"
-    density="compact"
-    min-width="content"
-  >
-    <template #cell="{ row, column }">
-      <SRichInlineNode
-        v-for="(child, index) in tableCell(row, column.field).children"
-        :key="index"
-        :node="child"
-        :document-id="documentId"
-        :path="`${path}.rows[${tableRowIndex(row)}].cells[${tableColumnIndex(column.field)}].children[${index}]`"
-        @link-activate="emit('link-activate', $event)"
-      />
-    </template>
-  </STable>
-  <SPanel
-    v-else-if="node.type === 'callout' && node.tone === 'neutral'"
-    :title="node.title"
-    :heading-level="3"
-    surface-tone="subtle"
-    content-layout="stack"
-    content-gap="content"
-  >
-    <SRichBlockNode
-      v-for="(child, index) in node.children"
-      :key="index"
-      :node="child"
-      :resources="resources"
-      :document-id="documentId"
-      :path="`${path}.children[${index}]`"
-      @link-activate="emit('link-activate', $event)"
-      @resource-activate="emit('resource-activate', $event)"
-      @action="emit('action', $event)"
-    />
-  </SPanel>
-  <SMessage
-    v-else-if="node.type === 'callout'"
-    :severity="calloutSeverity(node.tone)"
-    :title="node.title"
-    live="off"
-  >
-    <div class="s-rich-document__callout-content">
-      <SRichBlockNode
-        v-for="(child, index) in node.children"
-        :key="index"
-        :node="child"
-        :resources="resources"
-        :document-id="documentId"
-        :path="`${path}.children[${index}]`"
-        @link-activate="emit('link-activate', $event)"
-        @resource-activate="emit('resource-activate', $event)"
-        @action="emit('action', $event)"
-      />
-    </div>
-  </SMessage>
-  <div v-else-if="node.type === 'actionGroup'" class="s-rich-document__actions" role="group" :aria-label="node.label">
-    <SButton
-      v-for="action in node.actions"
-      :key="action.id"
-      :label="action.label"
-      :severity="actionSeverity(action.appearance)"
-      :appearance="action.appearance === 'primary' ? 'solid' : 'soft'"
-      :disabled="action.disabled"
-      size="sm"
-      @click="activateAction(action.id)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, defineAsyncComponent } from 'vue'
-
-import { useUiKitLocale } from '../../../../composables/useUiKitLocale'
-import SPanel from '../../containers/SPanel.vue'
-import SButton, { type SButtonSeverity } from '../../controls/SButton.vue'
-import SMessage, { type Severity as SMessageSeverity } from '../SMessage.vue'
-import STable from '../STable.vue'
-import type { STableColumn } from '../table'
-import type {
-  SRichActionAppearance,
-  SRichBlockNode,
-  SRichCalloutTone,
-  SRichDocumentActionIntent,
-  SRichDocumentImageResource,
-  SRichDocumentLinkActivate,
-  SRichDocumentResource,
-  SRichDocumentResourceActivate,
-  SRichTableCell,
-  SRichTableRow,
-} from '../richDocument'
-import SRichInlineNode from './SRichInlineNode.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps<{
-  node: SRichBlockNode
-  resources: readonly SRichDocumentResource[]
-  documentId: string
-  path: string
-}>()
-
-const emit = defineEmits<{
-  'link-activate': [payload: SRichDocumentLinkActivate]
-  'resource-activate': [payload: SRichDocumentResourceActivate]
-  action: [payload: SRichDocumentActionIntent]
-}>()
-
-const { t } = useUiKitLocale()
-const AsyncSCodeBlock = defineAsyncComponent(() => import('../SCodeBlock.vue'))
-const AsyncSRichMath = defineAsyncComponent(() => import('./SRichMath.vue'))
-const tableColumns = computed<readonly STableColumn<SRichTableRow, string>[]>(() => {
-  if (props.node.type !== 'table') return []
-  return Object.freeze(props.node.columns.map((column, index) => Object.freeze({
-    field: column.id,
-    header: column.header,
-    headerPresentation: column.headerPresentation,
-    align: column.align,
-    content: 'value' as const,
-    value: (row: SRichTableRow) => row.cells[index],
-  })))
-})
-
-function rowKey(row: SRichTableRow): string {
-  return row.id
-}
-
-function tableColumnIndex(field: string): number {
-  if (props.node.type !== 'table') throw new Error('SRichBlockNode: table column outside table node.')
-  const index = props.node.columns.findIndex((column) => column.id === field)
-  if (index < 0) throw new Error(`SRichBlockNode: unknown table column ${JSON.stringify(field)}.`)
-  return index
-}
-
-function tableRowIndex(row: SRichTableRow): number {
-  if (props.node.type !== 'table') throw new Error('SRichBlockNode: table row outside table node.')
-  const index = props.node.rows.findIndex((candidate) => candidate.id === row.id)
-  if (index < 0) throw new Error(`SRichBlockNode: unknown table row ${JSON.stringify(row.id)}.`)
-  return index
-}
-
-function tableCell(row: SRichTableRow, field: string): SRichTableCell {
-  const cell = row.cells[tableColumnIndex(field)]
-  if (!cell) throw new Error(`SRichBlockNode: missing table cell for ${JSON.stringify(field)}.`)
-  return cell
-}
-
-function imageResource(id: string): SRichDocumentImageResource {
-  const resource = props.resources.find((candidate) => candidate.id === id)
-  if (resource?.kind !== 'image') throw new Error(`SRichBlockNode: image resource ${JSON.stringify(id)} is unavailable.`)
-  return resource
-}
-
-function activateResource(resourceId: string): void {
-  emit('resource-activate', Object.freeze({ documentId: props.documentId, path: props.path, resourceId }))
-}
-
-function activateAction(actionId: string): void {
-  emit('action', Object.freeze({ documentId: props.documentId, path: props.path, actionId }))
-}
-
-function calloutSeverity(tone: SRichCalloutTone): SMessageSeverity {
-  if (tone === 'information' || tone === 'neutral') return 'info'
-  if (tone === 'warning') return 'warn'
-  return tone
-}
-
-function actionSeverity(appearance: SRichActionAppearance | undefined): SButtonSeverity {
-  if (appearance === 'danger') return 'danger'
-  if (appearance === 'secondary') return 'secondary'
-  return 'primary'
-}
-</script>
-
-<style lang="postcss" src="./SRichBlockNode.css" scoped></style>

package/src/components/shared/data-display/_internal/SRichInlineNode.vue

@@ -1,76 +0,0 @@
-<template>
-  <template v-if="node.type === 'text'">{{ node.value }}</template>
-  <strong v-else-if="node.type === 'strong'">
-    <SRichInlineNode
-      v-for="(child, index) in node.children"
-      :key="index"
-      :node="child"
-      :document-id="documentId"
-      :path="`${path}.children[${index}]`"
-      @link-activate="emit('link-activate', $event)"
-    />
-  </strong>
-  <em v-else-if="node.type === 'emphasis'">
-    <SRichInlineNode
-      v-for="(child, index) in node.children"
-      :key="index"
-      :node="child"
-      :document-id="documentId"
-      :path="`${path}.children[${index}]`"
-      @link-activate="emit('link-activate', $event)"
-    />
-  </em>
-  <code v-else-if="node.type === 'inlineCode'" class="s-rich-document__inline-code">{{ node.code }}</code>
-  <SLink
-    v-else-if="node.type === 'link'"
-    :href="node.href"
-    :title="node.title"
-    :active="node.current"
-    variant="document"
-    wrap="anywhere"
-    @click.prevent="activateLink"
-  >
-    <SRichInlineNode
-      v-for="(child, index) in node.children"
-      :key="index"
-      :node="child"
-      :document-id="documentId"
-      :path="`${path}.children[${index}]`"
-      @link-activate="emit('link-activate', $event)"
-    />
-  </SLink>
-  <AsyncSRichMath v-else-if="node.type === 'mathInline'" :source="node.source" display="inline" />
-</template>
-
-<script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
-
-import SLink from '../../controls/SLink.vue'
-import type { SRichDocumentLinkActivate, SRichInlineNode } from '../richDocument'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps<{
-  node: SRichInlineNode
-  documentId: string
-  path: string
-}>()
-
-const emit = defineEmits<{
-  'link-activate': [payload: SRichDocumentLinkActivate]
-}>()
-
-const AsyncSRichMath = defineAsyncComponent(() => import('./SRichMath.vue'))
-
-function activateLink(): void {
-  if (props.node.type !== 'link') return
-  emit('link-activate', Object.freeze({
-    documentId: props.documentId,
-    path: props.path,
-    href: props.node.href,
-    ...(props.node.title === undefined ? {} : { title: props.node.title }),
-  }))
-}
-</script>
-
-<style lang="postcss" src="./SRichInlineNode.css" scoped></style>

package/src/components/shared/data-display/_internal/SRichMath.vue

@@ -1,102 +0,0 @@
-<template>
-  <component
-    :is="validatedDisplay === 'block' ? 'div' : 'span'"
-    class="s-rich-math"
-    :data-display="validatedDisplay"
-    :data-state="state"
-  >
-    <span ref="surface" class="s-rich-math__surface" />
-    <code v-if="state === 'loading'" class="s-rich-math__fallback">{{ validatedSource }}</code>
-    <span v-if="state === 'loading'" class="s-rich-math__assistive" role="status">{{ t('editor.mathLoading') }}</span>
-    <span v-if="state === 'error'" class="s-rich-math__error" role="alert">
-      <span>{{ t('editor.mathError') }}</span>
-      <code>{{ validatedSource }}</code>
-    </span>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import 'katex/dist/katex.min.css'
-
-import { useUiKitLocale } from '../../../../composables/useUiKitLocale'
-import { validateExactString, validateNonEmptyString } from '../../../../internal/runtimeContract'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<{
-  source: string
-  display?: 'inline' | 'block'
-  label?: string
-}>(), {
-  display: 'inline',
-  label: undefined,
-})
-
-const { t } = useUiKitLocale()
-const surface = ref<HTMLElement | null>(null)
-const state = ref<'loading' | 'ready' | 'error'>('loading')
-const validatedSource = computed(() => validateNonEmptyString('SRichMath', 'source', props.source))
-const validatedDisplay = computed(() => validateExactString(
-  'SRichMath',
-  'display',
-  props.display,
-  ['inline', 'block'] as const,
-))
-const validatedLabel = computed(() => props.label === undefined
-  ? validatedSource.value
-  : validateNonEmptyString('SRichMath', 'label', props.label))
-let mounted = false
-let generation = 0
-
-async function renderMath(): Promise<void> {
-  if (!mounted) return
-  const target = surface.value
-  if (!target) throw new Error('SRichMath: render surface is unavailable.')
-  const currentGeneration = generation += 1
-  state.value = 'loading'
-  target.replaceChildren()
-  try {
-    const katex = await import('katex')
-    if (currentGeneration !== generation || !mounted) return
-    katex.default.render(validatedSource.value, target, {
-      displayMode: validatedDisplay.value === 'block',
-      output: 'htmlAndMathml',
-      strict: 'error',
-      throwOnError: true,
-      trust: false,
-      maxExpand: 1_000,
-      maxSize: 20,
-    })
-    target.setAttribute('role', 'math')
-    target.setAttribute('aria-label', validatedLabel.value)
-    state.value = 'ready'
-  } catch {
-    if (currentGeneration !== generation || !mounted) return
-    target.replaceChildren()
-    target.removeAttribute('role')
-    target.removeAttribute('aria-label')
-    state.value = 'error'
-  }
-}
-
-onMounted(() => {
-  mounted = true
-  void renderMath()
-})
-
-watch(
-  () => [props.source, props.display, props.label] as const,
-  () => { void renderMath() },
-)
-
-onBeforeUnmount(() => {
-  mounted = false
-  generation += 1
-  surface.value?.replaceChildren()
-  surface.value?.removeAttribute('role')
-  surface.value?.removeAttribute('aria-label')
-})
-</script>
-
-<style lang="postcss" src="./SRichMath.css"></style>

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

@@ -1,54 +0,0 @@
-/** Поддерживаемые семейства графиков. / Supported chart families. */
-export type SChartType = 'line' | 'area' | 'bar' | 'pie' | 'donut'
-
-/** Семантическая categorical palette без raw CSS values. / Semantic categorical palette without raw CSS values. */
-export type SChartTone =
-  | 'series-1'
-  | 'series-2'
-  | 'series-3'
-  | 'series-4'
-  | 'series-5'
-  | 'series-6'
-  | 'series-7'
-  | 'series-8'
-  | 'success'
-  | 'warn'
-  | 'danger'
-
-/** Одна общая категория Cartesian axis либо radial slice. / One shared Cartesian category or radial slice. */
-export interface SChartCategory {
-  readonly key: string
-  readonly label: string
-  /** Используется slice-ом pie/donut; Cartesian series владеет собственным tone. / Used by pie/donut slices; Cartesian series owns its tone. */
-  readonly tone?: SChartTone
-}
-
-/** Один data series; values позиционно соответствуют categories. / One data series; values correspond positionally to categories. */
-export interface SChartSeries {
-  readonly key: string
-  readonly label: string
-  readonly values: readonly number[]
-  readonly tone?: SChartTone
-}
-
-/** Accessible-name contract графика. / Chart accessible-name contract. */
-export type SChartAccessibility =
-  | { readonly mode: 'decorative' }
-  | { readonly mode: 'label'; readonly label: string; readonly description?: string }
-  | { readonly mode: 'labelledby'; readonly id: string; readonly describedby?: string }
-
-/** Домен шкалы без неявных min/max fallbacks. / Scale domain without implicit min/max fallbacks. */
-export type SChartDomain =
-  | { readonly mode: 'auto'; readonly includeZero?: boolean }
-  | { readonly mode: 'fixed'; readonly minimum: number; readonly maximum: number }
-
-export type SChartSize = 'compact' | 'sm' | 'md' | 'lg'
-export type SChartGrid = 'none' | 'horizontal' | 'vertical' | 'both'
-export type SChartLegend = 'none' | 'top' | 'bottom'
-export type SChartDataLabels = 'none' | 'latest' | 'all'
-export type SChartMarkers = 'none' | 'latest' | 'all'
-export type SChartXLabels = 'none' | 'endpoints' | 'auto' | 'all'
-export type SChartCurve = 'linear' | 'smooth'
-export type SChartBarMode = 'grouped' | 'stacked'
-export type SChartRadialLabel = 'value' | 'percentage' | 'category'
-export type SChartDataTablePresentation = 'assistive' | 'visible' | 'none'