@pgcorp/ui-kit 0.8.1 → 0.10.0

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

@@ -13,7 +13,7 @@
         <span v-if="renderMode" class="s-doc-block-language">{{ headerLabel }}</span>
       </div>
       <div class="s-doc-block-actions" v-if="contract.showActions">
-        <SButton appearance="text" severity="secondary" size="xs" icon-only :leading-icon="Copy" @click="copyContent" title="Копировать" aria-label="Копировать" />
+        <SButton appearance="text" severity="secondary" size="xs" icon-only :leading-icon="Copy" @click="copyContent" :title="t('clipboard.copyDocument')" :aria-label="t('clipboard.copyDocument')" />
       </div>
     </div>
 
@@ -38,7 +38,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineComponent, h, ref, type Component, type PropType, type VNodeChild } from 'vue';
+import {
+  computed,
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  watch,
+  type Component,
+  type PropType,
+  type VNodeChild,
+} from 'vue';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract';
 import { validateBoolean, validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract';
@@ -48,21 +59,9 @@ import SAsyncState from '../feedback/SAsyncState.vue';
 import { Copy } from '../../icons/sputnigUiIcons';
 import { useNotifier } from '../../../composables/useNotifier';
 import { useClipboard } from '../../../composables/useClipboard';
+import { useUiKitLocale } from '../../../composables/useUiKitLocale';
 
-// Markdown rendering with highlight.js similar to MessageBubble
 import { marked } from 'marked';
-import hljs from 'highlight.js/lib/core';
-import bash from 'highlight.js/lib/languages/bash';
-import dockerfile from 'highlight.js/lib/languages/dockerfile';
-import javascript from 'highlight.js/lib/languages/javascript';
-import makefile from 'highlight.js/lib/languages/makefile';
-import nginx from 'highlight.js/lib/languages/nginx';
-import powershell from 'highlight.js/lib/languages/powershell';
-import python from 'highlight.js/lib/languages/python';
-import typescript from 'highlight.js/lib/languages/typescript';
-import xml from 'highlight.js/lib/languages/xml';
-import yaml from 'highlight.js/lib/languages/yaml';
-import { resolveHighlightLanguageKey } from '../codeLanguages';
 import {
   SANITIZED_DOCUMENT_RENDER_ATTRIBUTES,
   SANITIZED_DOCUMENT_TAGS,
@@ -71,30 +70,10 @@ import {
 
 defineOptions({ inheritAttrs: false });
 
-hljs.registerLanguage('bash', bash);
-hljs.registerLanguage('dockerfile', dockerfile);
-hljs.registerLanguage('javascript', javascript);
-hljs.registerLanguage('makefile', makefile);
-hljs.registerLanguage('nginx', nginx);
-hljs.registerLanguage('powershell', powershell);
-hljs.registerLanguage('python', python);
-hljs.registerLanguage('typescript', typescript);
-hljs.registerLanguage('xml', xml);
-hljs.registerLanguage('yaml', yaml);
-
 const ownedAttrs = useOwnedAttrs({ component: 'SDocBlock', owner: 'document block root' });
 
 useInteractiveLeafRegistration({ owner: 'SDocBlock' });
 
-function escapeHighlightedCode(code: string): string {
-  return code
-    .replace(/&/gu, '&amp;')
-    .replace(/</gu, '&lt;')
-    .replace(/>/gu, '&gt;')
-    .replace(/"/gu, '&quot;')
-    .replace(/'/gu, '&#39;');
-}
-
 function escapeHtmlAttribute(value: string): string {
   return value
     .replace(/&/gu, '&amp;')
@@ -104,23 +83,38 @@ function escapeHtmlAttribute(value: string): string {
     .replace(/'/gu, '&#39;');
 }
 
-const markdownRenderer = new marked.Renderer();
-markdownRenderer.code = ({ text, lang }) => {
-  const rawLanguage = (lang || '').match(/\S+/)?.[0] ?? '';
-  const normalizedLanguage = rawLanguage
-    ? resolveHighlightLanguageKey({ mode: 'explicit', id: rawLanguage })
-    : null;
-  const languageClass = rawLanguage ? `language-${escapeHtmlAttribute(rawLanguage.toLowerCase())}` : '';
-  const isSupportedLanguage = normalizedLanguage !== null && Boolean(hljs.getLanguage(normalizedLanguage));
-
-  const highlightedCode = isSupportedLanguage
-    ? hljs.highlight(text, { language: normalizedLanguage, ignoreIllegals: true }).value
-    : escapeHighlightedCode(text);
-  const classNames = [languageClass, isSupportedLanguage ? 'hljs' : ''].filter(Boolean).join(' ');
-  const classAttribute = classNames ? ` class="${classNames}"` : '';
-
-  return `<pre><code${classAttribute}>${highlightedCode}</code></pre>\n`;
-};
+type CodeHighlightRuntime = typeof import('../../../internal/codeHighlight');
+
+interface MarkdownRenderResult {
+  html: string;
+  requiresHighlightRuntime: boolean;
+}
+
+function renderMarkdown(content: string, highlighter: CodeHighlightRuntime | null): MarkdownRenderResult {
+  let requiresHighlightRuntime = false;
+  const renderer = new marked.Renderer();
+  renderer.code = ({ text, lang }) => {
+    const rawLanguage = (lang || '').match(/\S+/)?.[0] ?? '';
+    const language = rawLanguage ? { mode: 'explicit' as const, id: rawLanguage } : null;
+    if (language !== null && highlighter === null) requiresHighlightRuntime = true;
+    const languageClass = rawLanguage ? `language-${escapeHtmlAttribute(rawLanguage.toLowerCase())}` : '';
+    const isSupportedLanguage = language !== null
+      && highlighter !== null
+      && highlighter.isCodeHighlightLanguageSupported(language);
+    const highlightedCode = language !== null && highlighter !== null
+      ? highlighter.highlightCodeToHtml(text, language)
+      : escapeHtmlAttribute(text);
+    const classNames = [languageClass, isSupportedLanguage ? 'hljs' : ''].filter(Boolean).join(' ');
+    const classAttribute = classNames ? ` class="${classNames}"` : '';
+
+    return `<pre><code${classAttribute}>${highlightedCode}</code></pre>\n`;
+  };
+
+  return {
+    html: marked.parse(content, { gfm: true, breaks: true, renderer }) as string,
+    requiresHighlightRuntime,
+  };
+}
 
 interface Props {
   content: string;
@@ -150,6 +144,7 @@ const emit = defineEmits<{
 }>();
 
 const notifier = useNotifier();
+const { t } = useUiKitLocale();
 const { copyText } = useClipboard();
 const rootRef = ref<HTMLElement | null>(null);
 
@@ -186,28 +181,61 @@ const headerLabel = computed(() => {
   switch (renderMode.value) {
     case 'markdown': return 'Markdown';
     case 'html': return 'HTML';
-    default: return 'Текст';
+    default: return t('editor.plainText');
   }
 });
 
-const renderedMarkdown = computed(() => marked.parse(contract.value.content, {
-  gfm: true,
-  breaks: true,
-  renderer: markdownRenderer,
-}) as string);
+const renderedDocumentHtml = shallowRef('');
+const documentRenderError = shallowRef<Error | null>(null);
+let documentRenderGeneration = 0;
 
-const sanitizedMarkdown = computed(() => {
-  const html = renderedMarkdown.value;
-  return sanitizeDocumentHtml(html);
-});
+function documentRenderingError(error: unknown): Error {
+  if (error instanceof Error) return error;
+  return new Error(`SDocBlock: document rendering failed with ${String(error)}.`);
+}
+
+async function enhanceMarkdownHighlighting(
+  content: string,
+  generation: number,
+): Promise<void> {
+  try {
+    const highlighter = await import('../../../internal/codeHighlight');
+    const highlighted = renderMarkdown(content, highlighter);
+    if (generation !== documentRenderGeneration) return;
+    renderedDocumentHtml.value = sanitizeDocumentHtml(highlighted.html);
+  } catch (error) {
+    if (generation !== documentRenderGeneration) return;
+    documentRenderError.value = documentRenderingError(error);
+  }
+}
+
+watch(
+  () => [contract.value.content, renderMode.value] as const,
+  ([content, mode]) => {
+    const generation = documentRenderGeneration += 1;
+    documentRenderError.value = null;
+    if (mode === 'html') {
+      renderedDocumentHtml.value = sanitizeDocumentHtml(content);
+      return;
+    }
+    if (mode === 'plaintext') {
+      renderedDocumentHtml.value = '';
+      return;
+    }
+    const initial = renderMarkdown(content, null);
+    renderedDocumentHtml.value = sanitizeDocumentHtml(initial.html);
+    if (initial.requiresHighlightRuntime) void enhanceMarkdownHighlighting(content, generation);
+  },
+  { immediate: true },
+);
 
-const sanitizedHtml = computed(() => {
-  return sanitizeDocumentHtml(contract.value.content);
+onBeforeUnmount(() => {
+  documentRenderGeneration += 1;
 });
 
 const sanitizedDocumentHtml = computed(() => {
-  if (renderMode.value === 'markdown') return sanitizedMarkdown.value;
-  if (renderMode.value === 'html') return sanitizedHtml.value;
+  if (documentRenderError.value !== null) throw documentRenderError.value;
+  if (renderMode.value === 'markdown' || renderMode.value === 'html') return renderedDocumentHtml.value;
   throw new Error('SDocBlock: document renderer доступен только для markdown/html mode. / SDocBlock: the document renderer is available only in markdown/html mode.');
 });
 
@@ -298,15 +326,15 @@ const copyContent = async () => {
   if (!text) return;
   const result = await copyText(text);
   if (result.status === 'copied') {
-    notifier.success({ message: 'Содержимое скопировано' });
+    notifier.success({ message: t('clipboard.documentCopied') });
     return;
   }
   notifier.danger({
     message: result.status === 'unavailable'
-      ? 'Буфер обмена недоступен в этом браузере.'
+      ? t('clipboard.clipboardUnavailable')
       : result.status === 'empty'
-        ? 'Нет содержимого для копирования.'
-        : `Не удалось скопировать. ${result.error.message}`,
+        ? t('clipboard.emptyDocument')
+        : `${t('clipboard.documentCopyFailed')} ${result.error.message}`,
   });
 };
 
@@ -350,7 +378,7 @@ const handleDocumentLinkClick = (event: MouseEvent, payload: DocumentLinkPayload
   try {
     openExternalHref(new URL(payload.href, window.location.href).toString());
   } catch {
-    notifier.danger({ message: `Не удалось открыть ссылку: ${payload.href}` });
+    notifier.danger({ message: t('feedback.openLinkFailed', { href: payload.href }) });
   }
 };
 </script>

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

@@ -26,7 +26,7 @@
         appearance="text"
         severity="secondary"
         size="sm"
-        :label="isExpanded ? 'Свернуть' : 'Развернуть'"
+        :label="isExpanded ? t('actions.collapse') : t('actions.expand')"
         :disclosure="{ expanded: isExpanded, controls: contentId, iconPlacement: 'leading' }"
         @click="toggleExpanded"
       />
@@ -38,8 +38,8 @@
         shape="circle"
         icon-only
         :leading-icon="Copy"
-        title="Скопировать текст"
-        aria-label="Скопировать текст"
+        :title="t('clipboard.copyText')"
+        :aria-label="t('clipboard.copyText')"
         :disabled="!text"
         @click="copyText"
       />
@@ -54,6 +54,7 @@ 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,
@@ -106,6 +107,7 @@ const emit = defineEmits<{
 }>()
 
 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' })
@@ -207,17 +209,17 @@ async function copyText(): Promise<void> {
   }
   const result = await copyToClipboard(props.text)
   if (result.status === 'copied') {
-    notifier.success({ message: 'Текст скопирован' })
+    notifier.success({ message: t('clipboard.textCopied') })
     return
   }
 
   notifier.danger({
-    title: 'Ошибка копирования',
+    title: t('clipboard.copyErrorTitle'),
     message: result.status === 'unavailable'
-      ? 'Буфер обмена недоступен в этом браузере.'
+      ? t('clipboard.clipboardUnavailable')
       : result.status === 'empty'
-        ? 'Нет текста для копирования.'
-        : `Не удалось скопировать текст. ${result.error.message}`,
+        ? t('clipboard.emptyText')
+        : `${t('clipboard.textCopyFailed')} ${result.error.message}`,
   })
 }
 

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

@@ -1,5 +1,6 @@
 <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'
@@ -22,6 +23,7 @@ interface 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' }
@@ -29,7 +31,7 @@ const treeModel: TreeModel<JsonTreeNode, string> = {
   key: (node) => node.id,
   label: (node) => node.keyLabel === undefined
     ? node.summary
-    : node.keyLabel.length === 0 ? 'Пустой ключ' : node.keyLabel,
+    : node.keyLabel.length === 0 ? t('data.emptyKey') : node.keyLabel,
   children: (node) => node.children,
   disabled: () => false,
   icon: () => undefined,
@@ -96,7 +98,7 @@ defineExpose({ expandAll, collapseAll })
 
 <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)">
+    <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">

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 { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { withErrorCause } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
@@ -128,17 +129,18 @@ import SStatus from './SStatus.vue'
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<Props<T>>(), {
-  accessibleLabel: 'Связанные системы',
+  accessibleLabel: undefined,
   presentation: 'list',
   actionsDisabled: false,
 })
+const { t } = useUiKitLocale()
 
 const slots = defineSlots<Slots<T>>()
 const ownedAttrs = useOwnedAttrs({ component: 'SLinkedSystemsList', owner: 'active linked-systems list root' })
 const validatedAccessibleLabel = computed(() => validateNonEmptyString(
   'SLinkedSystemsList',
   'accessibleLabel',
-  props.accessibleLabel,
+  props.accessibleLabel ?? t('data.linkedSystems'),
 ))
 const validatedPresentation = computed(() => validateExactString(
   'SLinkedSystemsList',

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

@@ -41,6 +41,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { X } from '../../icons/sputnigUiIcons'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
@@ -79,8 +80,6 @@ export interface SMessageDismissEvent {
 const MESSAGE_SEVERITIES = ['info', 'success', 'warn', 'danger'] as const satisfies readonly Severity[]
 const MESSAGE_LIVE_MODES = ['off', 'polite', 'assertive', 'auto'] as const satisfies readonly FeedbackLiveMode[]
 const MESSAGE_SIZES = ['sm', 'md'] as const satisfies readonly SMessageSize[]
-const DEFAULT_DISMISS_LABEL = 'Закрыть'
-
 export interface Props {
   severity?: Severity
   title?: string
@@ -96,11 +95,12 @@ const props = withDefaults(defineProps<Props>(), {
   severity: 'info',
   title: undefined,
   closable: false,
-  dismissLabel: DEFAULT_DISMISS_LABEL,
+  dismissLabel: undefined,
   dismissDisabled: false,
   live: 'off',
   size: 'md',
 })
+const { t } = useUiKitLocale()
 
 const emit = defineEmits<{
   dismiss: [event: SMessageDismissEvent]
@@ -134,9 +134,9 @@ const validatedSize = computed<SMessageSize>(() => validateExactString(
 const dismissAction = computed<SMessageDismissAction | undefined>(() => {
   const closable = validateBoolean('SMessage', 'closable', props.closable)
   const disabled = validateBoolean('SMessage', 'dismissDisabled', props.dismissDisabled)
-  const label = validateNonEmptyString('SMessage', 'dismissLabel', props.dismissLabel)
+  const label = validateNonEmptyString('SMessage', 'dismissLabel', props.dismissLabel ?? t('feedback.dismissMessage'))
   if (!closable) {
-    if (disabled || label !== DEFAULT_DISMISS_LABEL) {
+    if (disabled || props.dismissLabel !== undefined) {
       throw new TypeError(
         'SMessage: dismissLabel/dismissDisabled применяются только при closable=true. '
         + '/ SMessage: dismissLabel/dismissDisabled apply only when closable=true.',
@@ -147,7 +147,7 @@ const dismissAction = computed<SMessageDismissAction | undefined>(() => {
   return { label, disabled }
 })
 
-const presentation = computed(() => resolveFeedbackPresentation(validatedSeverity.value))
+const presentation = computed(() => resolveFeedbackPresentation(validatedSeverity.value, t))
 const iconComponent = computed(() => presentation.value.icon)
 const liveAttributes = computed(() => resolveFeedbackLive(validatedSeverity.value, validatedLive.value))
 

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

@@ -0,0 +1,8 @@
+@reference "../../../styles/reference.css";
+
+.s-rich-document {
+  @apply min-w-0 text-base leading-7 text-surface-800 dark:text-surface-200;
+  display: grid;
+  gap: var(--s-space-section-gap);
+  overflow-wrap: anywhere;
+}

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

@@ -0,0 +1,65 @@
+<template>
+  <article
+    v-bind="ownedAttrs.bindings()"
+    class="s-rich-document"
+    :aria-label="validatedAccessibleLabel"
+    :data-document-id="model.document.id"
+  >
+    <SRichBlockNode
+      v-for="(node, index) in model.document.nodes"
+      :key="index"
+      :node="node"
+      :resources="model.resources"
+      :document-id="model.document.id"
+      :path="`document.nodes[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+      @resource-activate="emit('resource-activate', $event)"
+      @action="emit('action', $event)"
+    />
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { validateNonEmptyString } from '../../../internal/runtimeContract'
+import SRichBlockNode from './_internal/SRichBlockNode.vue'
+import {
+  validateRichDocumentModel,
+  type SRichDocumentActionIntent,
+  type SRichDocumentLinkActivate,
+  type SRichDocumentResource,
+  type SRichDocumentResourceActivate,
+  type SRichDocumentV1,
+} from './richDocument'
+
+defineOptions({ inheritAttrs: false })
+
+/** Safe renderer input. The document and resources are validated before any node reaches the DOM. */
+export interface Props {
+  document: SRichDocumentV1
+  resources?: readonly SRichDocumentResource[]
+  accessibleLabel: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  resources: () => [],
+})
+
+const emit = defineEmits<{
+  'link-activate': [payload: SRichDocumentLinkActivate]
+  'resource-activate': [payload: SRichDocumentResourceActivate]
+  action: [payload: SRichDocumentActionIntent]
+}>()
+
+const ownedAttrs = useOwnedAttrs({ component: 'SRichDocument', owner: 'safe rich document root' })
+const validatedAccessibleLabel = computed(() => validateNonEmptyString(
+  'SRichDocument',
+  'accessibleLabel',
+  props.accessibleLabel,
+))
+const model = computed(() => validateRichDocumentModel(props.document, props.resources))
+</script>
+
+<style lang="postcss" src="./SRichDocument.css" scoped></style>

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

@@ -0,0 +1,53 @@
+@reference "../../../styles/reference.css";
+
+.s-scroll-viewport {
+  @apply relative min-h-0 min-w-0;
+}
+
+.s-scroll-viewport[data-axis='x'] {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.s-scroll-viewport[data-axis='y'] {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.s-scroll-viewport[data-axis='both'] {
+  overflow: auto;
+}
+
+.s-scroll-viewport[data-block-size='sm'] {
+  block-size: var(--s-scroll-viewport-max-block-size-sm);
+}
+
+.s-scroll-viewport[data-block-size='md'] {
+  block-size: var(--s-scroll-viewport-max-block-size-md);
+}
+
+.s-scroll-viewport[data-block-size='lg'] {
+  block-size: var(--s-scroll-viewport-max-block-size-lg);
+}
+
+.s-scroll-viewport[data-block-size='fill'] {
+  block-size: 100%;
+}
+
+.s-scroll-viewport[data-overscroll-behavior='contain'] {
+  overscroll-behavior: contain;
+}
+
+.s-scroll-viewport[data-overscroll-behavior='none'] {
+  overscroll-behavior: none;
+}
+
+.s-scroll-viewport[data-focusable='true']:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
+.s-scroll-viewport__content {
+  min-block-size: 100%;
+  min-inline-size: 100%;
+}