@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,298 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    class="s-code-block"
-    :class="{
-      's-code-block--radius-none': validatedSurfaceRadius === 'none',
-      's-code-block--radius-xl': validatedSurfaceRadius === 'xl',
-      's-code-block--interactive': validatedPresentation === 'editor' && !validatedReadOnly,
-      's-code-block--viewport': !['content', 'document'].includes(validatedViewport),
-    }"
-    :data-presentation="validatedPresentation"
-  >
-    <div v-if="validatedShowHeader" class="s-code-block-header">
-      <div class="s-code-block-info">
-        <span v-if="validatedLanguage.mode === 'detect'" class="s-code-block-filename">{{ validatedLanguage.filePath }}</span>
-        <span class="s-code-block-language">{{ resolvedLanguageId }}</span>
-      </div>
-      <div class="s-code-block-actions">
-        <SButton
-          appearance="text"
-          severity="secondary"
-          size="xs"
-          :leading-icon="Copy"
-          icon-only
-          :title="t('clipboard.copyCode')"
-          :aria-label="t('clipboard.copyCode')"
-          label=""
-          @click="copyCode"
-        />
-      </div>
-    </div>
-    <div class="s-code-block-editor-region">
-      <AsyncSCodeEditor
-        v-if="validatedPresentation === 'editor'"
-        ref="codeEditor"
-        :model-value="props.code"
-        :language="validatedLanguage"
-        :capabilities="editorCapabilities"
-        :read-only="validatedReadOnly"
-        :viewport="validatedViewport"
-        v-bind="editorAccessibleName"
-        :placeholder="props.placeholder"
-        :next-selection-pos="props.nextSelectionPos"
-        @update:model-value="emit('update:code', $event)"
-        @cursor-activity="emitCursorActivity"
-        @selection-applied="emit('selection-applied', $event)"
-        @ready="onReady"
-      />
-      <pre
-        v-else-if="validatedPresentation === 'plain'"
-        :ref="setPlainSurface"
-        class="s-code-block-plain"
-        :data-viewport="validatedViewport"
-        :data-line-numbers="validatedShowLineNumbers ? 'visible' : 'hidden'"
-        :aria-label="props.ariaLabel"
-        :aria-labelledby="props.ariaLabelledby"
-        :style="{ tabSize: validatedTabSize }"
-        tabindex="0"
-      ><code v-if="!validatedShowLineNumbers">{{ validatedCode }}</code><code v-else class="s-code-block-plain__lines"><span
-          v-for="(line, index) in plainLines"
-          :key="index"
-          class="s-code-block-plain__line"
-        ><span class="s-code-block-plain__line-number" aria-hidden="true">{{ index + 1 }}</span><span class="s-code-block-plain__line-content">{{ line || '\u200b' }}</span></span></code></pre>
-      <pre
-        v-else
-        :ref="setPlainSurface"
-        class="s-code-block-plain"
-        :data-viewport="validatedViewport"
-        :aria-label="props.ariaLabel"
-        :aria-labelledby="props.ariaLabelledby"
-        :style="{ tabSize: validatedTabSize }"
-        tabindex="0"
-      ><span class="s-code-block-plain__lines"><span
-          v-for="(line, index) in plainLines"
-          :key="index"
-          class="s-code-block-plain__line"
-          :data-line-numbers="validatedShowLineNumbers ? 'visible' : 'hidden'"
-        ><span v-if="validatedShowLineNumbers" class="s-code-block-plain__line-number" aria-hidden="true">{{ index + 1 }}</span><span class="s-code-block-plain__line-content"><SCodeTokenLine
-            :text="line || '\u200b'"
-            :language="validatedLanguage"
-            variant="code-block"
-          /></span></span></span></pre>
-    </div>
-    <SAsyncState
-      v-if="validatedErrorMessage !== undefined || (validatedPresentation === 'editor' && !isReady)"
-      :state="validatedErrorMessage === undefined
-        ? { status: 'loading', message: t('editor.loading') }
-        : { status: 'error', message: validatedErrorMessage }"
-      presentation="overlay"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, defineAsyncComponent, onMounted, ref, watch, type ComponentPublicInstance } from 'vue';
-import { useOwnedAttrs } from '../../../internal/ownedAttrs';
-import { validateBoolean, validateBoundedInteger, validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract';
-import { validateCodeEditorLanguage, validateCodeEditorViewport } from '../../../internal/codeEditorContract';
-import { resolveCodeLanguageKey } from '../../../internal/codeLanguageIdentity';
-import { useNotifier } from '../../../composables/useNotifier';
-import { useClipboard } from '../../../composables/useClipboard';
-import { useUiKitLocale } from '../../../composables/useUiKitLocale';
-import SButton from '../controls/SButton.vue';
-import type {
-  SCodeEditorCapabilities,
-  SCodeEditorCursorActivity,
-  SCodeEditorLanguage,
-  SCodeEditorReadyPayload,
-  SCodeEditorSelectionAppliedPayload,
-  SCodeEditorViewport,
-} from './SCodeEditor.vue';
-import { Copy } from '../../icons/sputnigUiIcons';
-import SAsyncState from '../feedback/SAsyncState.vue';
-import SCodeTokenLine from './_internal/SCodeTokenLine.vue';
-
-defineOptions({ inheritAttrs: false });
-
-type AccessibleName =
-  | { ariaLabel: string; ariaLabelledby?: never }
-  | { ariaLabel?: never; ariaLabelledby: string };
-
-/** Public adapter contract над canonical SCodeEditor leaf. / Public adapter contract over the canonical SCodeEditor leaf. */
-export type Props = AccessibleName & {
-  code: string;
-  language: SCodeEditorLanguage;
-  presentation?: 'editor' | 'plain' | 'highlighted';
-  showHeader?: boolean;
-  showLineNumbers?: boolean;
-  readOnly?: boolean;
-  interceptKeys?: (e: KeyboardEvent) => boolean;
-  tabSize?: number;
-  tabKeyBehavior?: SCodeEditorCapabilities['indentation']['keyBehavior'];
-  nextSelectionPos?: number | null;
-  surfaceRadius?: 'default' | 'none' | 'xl';
-  viewport?: SCodeEditorViewport;
-  placeholder?: string;
-  errorMessage?: string;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  presentation: 'editor',
-  showHeader: true,
-  showLineNumbers: true,
-  readOnly: true,
-  interceptKeys: undefined,
-  tabSize: 2,
-  tabKeyBehavior: 'focus-next',
-  nextSelectionPos: null,
-  surfaceRadius: 'default',
-  viewport: 'content',
-  placeholder: undefined,
-  errorMessage: undefined,
-});
-
-const isReady = ref(false);
-const codeEditor = ref<InstanceType<typeof import('./SCodeEditor.vue')['default']> | null>(null);
-const plainSurface = ref<HTMLElement | null>(null);
-const AsyncSCodeEditor = defineAsyncComponent(() => import('../../../internal/lazyCodeEditor'));
-const ownedAttrs = useOwnedAttrs({ component: 'SCodeBlock', owner: 'code block root' });
-const editorAccessibleName = computed<AccessibleName>(() => props.ariaLabel !== undefined
-  ? { ariaLabel: props.ariaLabel }
-  : { ariaLabelledby: props.ariaLabelledby });
-const emit = defineEmits<{
-  (e: 'cursor-activity', payload: { pos: number; lineFrom: number; lineTo: number; lineText: string; cursorCol: number }): void
-  (e: 'update:code', value: string): void
-  (e: 'selection-applied', payload: SCodeEditorSelectionAppliedPayload): void
-  (e: 'ready', payload: SCodeEditorReadyPayload): void
-}>();
-
-const validatedShowHeader = computed(() => validateBoolean('SCodeBlock', 'showHeader', props.showHeader));
-const validatedShowLineNumbers = computed(() => validateBoolean('SCodeBlock', 'showLineNumbers', props.showLineNumbers));
-const validatedReadOnly = computed(() => validateBoolean('SCodeBlock', 'readOnly', props.readOnly));
-const validatedPresentation = computed(() => validateExactString(
-  'SCodeBlock', 'presentation', props.presentation, ['editor', 'plain', 'highlighted'] as const,
-));
-const validatedSurfaceRadius = computed(() => validateExactString(
-  'SCodeBlock', 'surfaceRadius', props.surfaceRadius, ['default', 'none', 'xl'] as const,
-));
-const validatedViewport = computed(() => validateCodeEditorViewport('SCodeBlock', props.viewport));
-const validatedLanguage = computed(() => validateCodeEditorLanguage('SCodeBlock', props.language));
-const validatedCode = computed(() => {
-  if (typeof props.code !== 'string') throw new TypeError('SCodeBlock: code должен быть string. / SCodeBlock: code must be a string.');
-  return props.code;
-});
-const validatedTabSize = computed(() => validateBoundedInteger('SCodeBlock', 'tabSize', props.tabSize, { minimum: 1, maximum: 16 }));
-const resolvedLanguageId = computed(() => resolveCodeLanguageKey(validatedLanguage.value));
-const plainLines = computed(() => validatedCode.value.split('\n'));
-const validatedErrorMessage = computed(() => props.errorMessage === undefined
-  ? undefined
-  : validateNonEmptyString('SCodeBlock', 'errorMessage', props.errorMessage));
-const editorCapabilities = computed<SCodeEditorCapabilities>(() => ({
-  lineNumbers: validatedShowLineNumbers.value,
-  indentation: { tabSize: validatedTabSize.value, keyBehavior: props.tabKeyBehavior },
-  ...(props.interceptKeys === undefined ? {} : { keyInterceptor: props.interceptKeys }),
-  cursorActivity: 'always',
-}));
-
-const emitCursorActivity = (payload: SCodeEditorCursorActivity) => emit('cursor-activity', {
-  pos: payload.pos,
-  lineFrom: payload.lineFrom,
-  lineTo: payload.lineTo,
-  lineText: payload.lineText,
-  cursorCol: payload.pos - payload.lineFrom,
-});
-
-const onReady = (payload: SCodeEditorReadyPayload): void => {
-  isReady.value = true;
-  emit('ready', payload);
-};
-
-let mounted = false;
-const emitPlainReady = (): void => {
-  isReady.value = true;
-  emit('ready', {
-    documentLength: validatedCode.value.length,
-    viewport: validatedViewport.value,
-    variant: 'code',
-    locked: true,
-  });
-};
-
-const syncPresentation = (): void => {
-  if (!mounted) return;
-  if (validatedPresentation.value !== 'editor') emitPlainReady();
-  else isReady.value = false;
-};
-
-onMounted(() => {
-  mounted = true;
-  syncPresentation();
-});
-watch(validatedPresentation, syncPresentation);
-
-watch(
-  [validatedPresentation, validatedReadOnly],
-  ([presentation, readOnly]) => {
-    if (presentation !== 'editor' && !readOnly) {
-      throw new TypeError(`SCodeBlock: presentation=${JSON.stringify(presentation)} поддерживает только readOnly=true. / SCodeBlock: presentation=${JSON.stringify(presentation)} supports readOnly=true only.`);
-    }
-    if (presentation !== 'editor' && props.interceptKeys !== undefined) {
-      throw new TypeError(`SCodeBlock: presentation=${JSON.stringify(presentation)} не принимает interceptKeys. / SCodeBlock: presentation=${JSON.stringify(presentation)} does not accept interceptKeys.`);
-    }
-    if (presentation !== 'editor' && props.nextSelectionPos !== null) {
-      throw new TypeError(`SCodeBlock: presentation=${JSON.stringify(presentation)} не принимает nextSelectionPos. / SCodeBlock: presentation=${JSON.stringify(presentation)} does not accept nextSelectionPos.`);
-    }
-  },
-  { immediate: true },
-);
-
-const setPlainSurface = (element: Element | ComponentPublicInstance | null): void => {
-  if (element !== null && !(element instanceof HTMLElement)) {
-    throw new TypeError('SCodeBlock: plain surface ref должен быть HTMLElement. / SCodeBlock: plain surface ref must be an HTMLElement.');
-  }
-  plainSurface.value = element;
-};
-
-const applySelection = (position: number): void => {
-  if (validatedPresentation.value !== 'editor') {
-    throw new Error(`SCodeBlock: applySelection недоступен в presentation=${JSON.stringify(validatedPresentation.value)}. / SCodeBlock: applySelection is unavailable in presentation=${JSON.stringify(validatedPresentation.value)}.`);
-  }
-  const editor = codeEditor.value;
-  if (!editor) throw new Error('SCodeBlock: editor не готов; дождитесь ready. / SCodeBlock: editor is not ready; wait for ready.');
-  editor.applySelection(position);
-};
-
-const focus = (): void => {
-  if (validatedPresentation.value !== 'editor') {
-    const surface = plainSurface.value;
-    if (!surface) throw new Error('SCodeBlock: plain surface не готов; дождитесь ready. / SCodeBlock: plain surface is not ready; wait for ready.');
-    surface.focus();
-    return;
-  }
-  const editor = codeEditor.value;
-  if (!editor) throw new Error('SCodeBlock: editor не готов; дождитесь ready. / SCodeBlock: editor is not ready; wait for ready.');
-  editor.focus();
-};
-
-defineExpose({ applySelection, focus });
-const notifier = useNotifier();
-const { t } = useUiKitLocale();
-const { copyText } = useClipboard();
-const copyCode = async () => {
-  const result = await copyText(props.code);
-  if (result.status === 'copied') {
-    notifier.success({ message: t('clipboard.codeCopied') });
-    return;
-  }
-  notifier.danger({
-    message: result.status === 'unavailable'
-      ? t('clipboard.codeCopyUnavailable')
-      : result.status === 'empty'
-        ? t('clipboard.emptyCode')
-        : `${t('clipboard.codeCopyFailed')} ${result.error.message}`,
-  });
-};
-</script>
-
-<style lang="postcss" src="./SCodeBlock.css" scoped></style>