@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,386 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    ref="rootRef"
-    class="s-doc-block"
-    :class="{
-      's-doc-block--radius-none': contract.surfaceRadius === 'none',
-    }"
-  >
-    <div v-if="contract.showHeader && (filename || renderMode)" class="s-doc-block-header">
-      <div class="s-doc-block-info">
-        <span v-if="filename" class="s-doc-block-filename">{{ filename }}</span>
-        <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="t('clipboard.copyDocument')" :aria-label="t('clipboard.copyDocument')" />
-      </div>
-    </div>
-
-    <SAsyncState
-      v-if="contract.errorMessage !== undefined"
-      :state="{ status: 'error', message: contract.errorMessage }"
-      presentation="block"
-    />
-
-    <div
-      v-else-if="renderMode === 'markdown' || renderMode === 'html'"
-      class="s-doc-block__content prose dark:prose-invert max-w-none"
-    >
-      <SDocumentContent
-        :html="sanitizedDocumentHtml"
-        @link-click="handleDocumentLinkClick"
-      />
-    </div>
-
-    <pre v-else-if="renderMode === 'plaintext'" class="fallback-pre">{{ contract.content }}</pre>
-  </div>
-</template>
-
-<script setup lang="ts">
-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';
-import SButton from '../controls/SButton.vue';
-import SLink from '../controls/SLink.vue';
-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';
-
-import { marked } from 'marked';
-import {
-  SANITIZED_DOCUMENT_RENDER_ATTRIBUTES,
-  SANITIZED_DOCUMENT_TAGS,
-  sanitizeDocumentHtml,
-} from '../markdown';
-
-defineOptions({ inheritAttrs: false });
-
-const ownedAttrs = useOwnedAttrs({ component: 'SDocBlock', owner: 'document block root' });
-
-useInteractiveLeafRegistration({ owner: 'SDocBlock' });
-
-function escapeHtmlAttribute(value: string): string {
-  return value
-    .replace(/&/gu, '&amp;')
-    .replace(/</gu, '&lt;')
-    .replace(/>/gu, '&gt;')
-    .replace(/"/gu, '&quot;')
-    .replace(/'/gu, '&#39;');
-}
-
-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;
-  mode: 'markdown' | 'html' | 'plaintext';
-  linkPolicy?: 'open' | 'emit';
-  filename?: string;
-  showHeader?: boolean;
-  showActions?: boolean;
-  surfaceRadius?: 'default' | 'none';
-  errorMessage?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-  linkPolicy: 'open',
-  filename: undefined,
-  showHeader: true,
-  showActions: true,
-  surfaceRadius: 'default',
-  errorMessage: undefined,
-});
-const emit = defineEmits<{
-  'link-click': [{
-    href: string;
-    text: string;
-    title: string | null;
-    isExternal: boolean;
-  }];
-}>();
-
-const notifier = useNotifier();
-const { t } = useUiKitLocale();
-const { copyText } = useClipboard();
-const rootRef = ref<HTMLElement | null>(null);
-
-const contract = computed(() => {
-  if (typeof props.content !== 'string') {
-    throw new TypeError(
-      'SDocBlock: content должен быть строкой. / SDocBlock: content must be a string',
-    );
-  }
-  return {
-    content: props.content,
-    mode: validateExactString(
-      'SDocBlock', 'mode', props.mode, ['markdown', 'html', 'plaintext'] as const,
-    ),
-    linkPolicy: validateExactString(
-      'SDocBlock', 'linkPolicy', props.linkPolicy, ['open', 'emit'] as const,
-    ),
-    showHeader: validateBoolean('SDocBlock', 'showHeader', props.showHeader),
-    showActions: validateBoolean('SDocBlock', 'showActions', props.showActions),
-    surfaceRadius: validateExactString(
-      'SDocBlock', 'surfaceRadius', props.surfaceRadius, ['default', 'none'] as const,
-    ),
-    errorMessage: props.errorMessage === undefined
-      ? undefined
-      : validateNonEmptyString('SDocBlock', 'errorMessage', props.errorMessage),
-  };
-});
-
-const renderMode = computed<'markdown' | 'html' | 'plaintext'>(() => {
-  return contract.value.mode;
-});
-
-const headerLabel = computed(() => {
-  switch (renderMode.value) {
-    case 'markdown': return 'Markdown';
-    case 'html': return 'HTML';
-    default: return t('editor.plainText');
-  }
-});
-
-const renderedDocumentHtml = shallowRef('');
-const documentRenderError = shallowRef<Error | null>(null);
-let documentRenderGeneration = 0;
-
-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 },
-);
-
-onBeforeUnmount(() => {
-  documentRenderGeneration += 1;
-});
-
-const sanitizedDocumentHtml = computed(() => {
-  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.');
-});
-
-interface DocumentLinkPayload {
-  href: string;
-  text: string;
-  title: string | null;
-  isExternal: boolean;
-}
-
-type DocumentLinkHandler = (event: MouseEvent, payload: DocumentLinkPayload) => void;
-const sanitizedTagSet = new Set<string>(SANITIZED_DOCUMENT_TAGS);
-const sanitizedAttributeSet = new Set<string>(SANITIZED_DOCUMENT_RENDER_ATTRIBUTES);
-const documentLinkComponent: Component = SLink;
-
-function renderSanitizedNode(node: Node, handleLink: DocumentLinkHandler): VNodeChild {
-  if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? '';
-  if (node.nodeType === Node.COMMENT_NODE) return null;
-  if (!(node instanceof HTMLElement)) {
-    throw new TypeError(`SDocBlock: unsupported sanitized node type ${node.nodeType}.`);
-  }
-
-  const tag = node.tagName.toLowerCase();
-  if (!sanitizedTagSet.has(tag)) {
-    throw new TypeError(`SDocBlock: sanitized renderer получил недопустимый tag <${tag}>. / SDocBlock: sanitized renderer received unsupported tag <${tag}>.`);
-  }
-  const attributes: Record<string, string> = {};
-  for (const attribute of node.attributes) {
-    if (!sanitizedAttributeSet.has(attribute.name)) {
-      throw new TypeError(`SDocBlock: sanitized renderer получил недопустимый attribute ${attribute.name}. / SDocBlock: sanitized renderer received unsupported attribute ${attribute.name}.`);
-    }
-    attributes[attribute.name] = attribute.value;
-  }
-  const children = [...node.childNodes].map((child) => renderSanitizedNode(child, handleLink));
-
-  if (tag === 'a') {
-    const href = attributes.href?.trim();
-    if (!href) {
-      throw new TypeError('SDocBlock: sanitized <a> требует href. / SDocBlock: sanitized <a> requires href.');
-    }
-    if (!href.startsWith('#') && !URL.canParse(href, window.location.href)) {
-      throw new TypeError(`SDocBlock: href ${JSON.stringify(href)} не является допустимым URL. / SDocBlock: href ${JSON.stringify(href)} is not a valid URL.`);
-    }
-    const payload: DocumentLinkPayload = {
-      href,
-      text: node.textContent?.trim() || href,
-      title: attributes.title ?? null,
-      isExternal: /^(https?:\/\/|mailto:|tel:|file:\/\/)/i.test(href),
-    };
-    return h(documentLinkComponent, {
-      href,
-      title: payload.title ?? undefined,
-      variant: 'document',
-      underline: 'always',
-      wrap: 'anywhere',
-      external: payload.isExternal,
-      onClick: (event: MouseEvent) => handleLink(event, payload),
-    }, { default: () => children });
-  }
-
-  return h(tag, attributes, children);
-}
-
-const SDocumentContent = defineComponent({
-  name: 'SDocumentContent',
-  props: {
-    html: { type: String as PropType<string>, required: true },
-  },
-  emits: {
-    'link-click': (event: MouseEvent, payload: DocumentLinkPayload) => (
-      event instanceof MouseEvent && typeof payload.href === 'string'
-    ),
-  },
-  setup(rendererProps, { emit: emitDocument }) {
-    return () => {
-      const template = document.createElement('template');
-      template.innerHTML = rendererProps.html;
-      return [...template.content.childNodes].map((node) => renderSanitizedNode(
-        node,
-        (event, payload) => emitDocument('link-click', event, payload),
-      ));
-    };
-  },
-});
-
-const copyContent = async () => {
-  const text = contract.value.content;
-  if (!text) return;
-  const result = await copyText(text);
-  if (result.status === 'copied') {
-    notifier.success({ message: t('clipboard.documentCopied') });
-    return;
-  }
-  notifier.danger({
-    message: result.status === 'unavailable'
-      ? t('clipboard.clipboardUnavailable')
-      : result.status === 'empty'
-        ? t('clipboard.emptyDocument')
-        : `${t('clipboard.documentCopyFailed')} ${result.error.message}`,
-  });
-};
-
-const openExternalHref = (href: string) => {
-  if (/^(mailto:|tel:)/i.test(href)) {
-    window.location.href = href;
-    return;
-  }
-
-  window.open(href, '_blank', 'noopener,noreferrer');
-};
-
-const scrollToAnchor = (href: string) => {
-  const anchorId = href.slice(1);
-  if (!anchorId) return;
-  const target = [...(rootRef.value?.querySelectorAll<HTMLElement>('[data-s-doc-anchor]') ?? [])]
-    .find((element) => element.dataset.sDocAnchor === anchorId);
-  target?.scrollIntoView({ block: 'start', behavior: 'smooth' });
-};
-
-const handleDocumentLinkClick = (event: MouseEvent, payload: DocumentLinkPayload) => {
-  event.preventDefault();
-  event.stopPropagation();
-
-  if (payload.href.startsWith('#')) {
-    scrollToAnchor(payload.href);
-    return;
-  }
-
-  emit('link-click', payload);
-
-  if (contract.value.linkPolicy === 'emit') {
-    return;
-  }
-
-  if (payload.isExternal) {
-    openExternalHref(payload.href);
-    return;
-  }
-
-  try {
-    openExternalHref(new URL(payload.href, window.location.href).toString());
-  } catch {
-    notifier.danger({ message: t('feedback.openLinkFailed', { href: payload.href }) });
-  }
-};
-</script>
-
-<style lang="postcss" src="./SDocBlock.css" scoped></style>

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

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { computed, watchEffect, type Component, type VNodeChild } from 'vue'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { PassiveContentBoundary, type PassiveContentContract } from '../../../internal/passiveContentContract'
-import { validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<{
-  title?: string
-  description?: string
-  icon?: Component
-  size?: 'sm' | 'md'
-  presentation?: 'panel' | 'inline'
-}>(), {
-  title: undefined,
-  description: undefined,
-  icon: undefined,
-  size: 'md',
-  presentation: 'panel',
-})
-const slots = defineSlots<{
-  title?: () => VNodeChild
-  actions?: () => VNodeChild
-}>()
-
-const ownedAttrs = useOwnedAttrs({ component: 'SEmptyState', owner: 'empty state root' })
-const validatedSize = computed(() => validateExactString(
-  'SEmptyState', 'size', props.size, ['sm', 'md'] as const,
-))
-const validatedPresentation = computed(() => validateExactString(
-  'SEmptyState', 'presentation', props.presentation, ['panel', 'inline'] as const,
-))
-const validatedTitle = computed(() => props.title === undefined
-  ? undefined
-  : validateNonEmptyString('SEmptyState', 'title', props.title))
-const validatedDescription = computed(() => props.description === undefined
-  ? undefined
-  : validateNonEmptyString('SEmptyState', 'description', props.description))
-const passiveTitleContract: PassiveContentContract = {
-  owner: 'SEmptyState',
-  region: 'empty-state title',
-  guidance: 'Передайте действия через actions slot. / Pass actions through the actions slot.',
-}
-
-watchEffect(() => {
-  const hasTitleProp = validatedTitle.value !== undefined
-  const hasTitleSlot = Boolean(slots.title)
-  if (hasTitleProp === hasTitleSlot) {
-    throw new Error(
-      'SEmptyState: требуется ровно один источник title — prop или title slot. '
-      + '/ SEmptyState: exactly one title source is required: the prop or the title slot.',
-    )
-  }
-})
-</script>
-
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    class="s-empty-state"
-    :data-size="validatedSize"
-    :data-presentation="validatedPresentation"
-    role="status"
-  >
-    <component :is="icon" v-if="icon" class="s-empty-state__icon" aria-hidden="true" />
-    <div class="s-empty-state__title">
-      <PassiveContentBoundary :contract="passiveTitleContract">
-        <slot name="title">{{ validatedTitle }}</slot>
-      </PassiveContentBoundary>
-    </div>
-    <span v-if="validatedDescription" class="s-empty-state__description">{{ validatedDescription }}</span>
-    <div v-if="$slots.actions" class="s-empty-state__actions">
-      <slot name="actions" />
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" src="./SEmptyState.css" scoped></style>