@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,178 @@
+@reference "../../../styles/reference.css";
+
+.s-code-editor {
+  @apply min-h-0 min-w-0;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.s-code-editor[data-viewport='content'] {
+  max-height: var(--s-code-editor-viewport-content-max);
+}
+
+.s-code-editor[data-viewport='compact'] {
+  height: var(--s-code-editor-viewport-compact);
+}
+
+.s-code-editor[data-viewport='standard'] {
+  height: var(--s-code-editor-viewport-standard);
+}
+
+.s-code-editor[data-viewport='expanded'] {
+  height: var(--s-code-editor-viewport-expanded);
+}
+
+.s-code-editor[data-viewport='fill'] {
+  height: 100%;
+}
+
+.s-code-editor :deep(.cm-editor) {
+  @apply min-w-0 text-sm;
+  width: 100%;
+  max-width: 100%;
+  height: inherit;
+  max-height: inherit;
+}
+
+.s-code-editor :deep(.cm-scroller) {
+  max-width: 100%;
+  overflow: auto;
+}
+
+.s-code-editor[data-line-numbers='hidden'] :deep(.cm-gutters) {
+  display: none;
+}
+
+.s-code-editor[data-line-numbers='hidden'] :deep(.cm-content) {
+  padding-left: 0;
+}
+
+.s-code-editor[data-variant='code'] :deep(.cm-scroller) {
+  @apply overflow-x-auto p-3;
+}
+
+.s-code-editor[data-variant='code'] :deep(.cm-lineNumbers) {
+  @apply px-1.5;
+}
+
+.s-code-editor[data-variant='sql'] :deep(.cm-line) {
+  padding-inline: 0.75rem;
+}
+
+.s-code-editor[data-variant='sql'] :deep(.cm-content) {
+  min-height: 12rem;
+}
+
+.s-code-editor[data-variant='sql']:not([data-viewport='content']) :deep(.cm-content) {
+  min-height: 100%;
+}
+
+.s-code-editor :deep(.cm-gutters) {
+  @apply text-surface-400 dark:text-surface-500;
+}
+
+.s-code-editor :deep(.cm-tooltip) {
+  @apply rounded-md border border-surface-200 bg-surface-0 text-surface-900 shadow-lg;
+  @apply dark:border-surface-700 dark:bg-surface-800 dark:text-surface-100;
+  z-index: var(--s-layer-floating);
+}
+
+.s-code-editor :deep(.cm-panels) {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: var(--s-layer-affordance);
+  display: flex;
+  justify-content: center;
+  padding: 0 1rem 1rem;
+  border: 0;
+  background: transparent;
+  pointer-events: none;
+}
+
+.s-code-editor :deep(.cm-panel[class~='s-codemirror-search-panel-host']) {
+  width: min(34rem, calc(100vw - 2rem));
+  max-width: calc(100vw - 2rem);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  pointer-events: auto;
+}
+
+.s-code-editor :deep(.cm-searchMatch) {
+  background-color: var(--s-code-editor-search-match-background);
+}
+
+.s-code-editor :deep(.cm-searchMatch.cm-searchMatch-selected) {
+  background-color: var(--s-code-editor-search-match-selected-background);
+  outline: 1px solid var(--s-code-editor-search-match-selected-outline);
+}
+
+.s-code-editor :deep(.cm-tooltip-hover),
+.s-code-editor :deep(.cm-completionInfo),
+.s-code-editor :deep(.cm-tooltip-markdown) {
+  @apply rounded-xl border border-surface-200 bg-surface-0 text-sm text-surface-900 shadow-xl;
+  @apply dark:border-surface-700 dark:bg-surface-900 dark:text-surface-50;
+}
+
+.s-code-editor :deep(.cm-tooltip-autocomplete) {
+  @apply min-w-72 rounded-md border border-surface-200 bg-surface-50 text-surface-900 shadow-xl;
+  @apply dark:border-surface-700 dark:bg-surface-800 dark:text-surface-50;
+}
+
+.s-code-editor :deep(.cm-tooltip-autocomplete > ul) {
+  @apply m-0 max-h-72 list-none overflow-y-auto p-1 font-sans text-sm;
+}
+
+.s-code-editor :deep(.cm-tooltip-autocomplete > ul > li) {
+  @apply flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-surface-700 dark:text-surface-300;
+}
+
+.s-code-editor :deep(.cm-tooltip-autocomplete > ul > li:hover) {
+  @apply bg-surface-200 dark:bg-surface-700;
+}
+
+.s-code-editor :deep(.cm-tooltip-autocomplete > ul > li[aria-selected]) {
+  @apply bg-primary-500 text-white;
+}
+
+.s-code-editor :deep(.cm-completionLabel) {
+  @apply truncate font-medium;
+}
+
+.s-code-editor :deep(.cm-completionDetail) {
+  @apply ml-auto truncate text-xs italic opacity-70;
+}
+
+.s-code-editor :deep(.cm-completionInfo),
+.s-code-editor :deep(.cm-tooltip-markdown__content) {
+  max-height: min(26rem, calc(100vh - 3rem));
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 0.75rem 0.875rem;
+  line-height: 1.45;
+  white-space: normal;
+}
+
+.s-code-editor :deep(.cm-tooltip-markdown) {
+  max-width: min(34rem, calc(100vw - 2rem));
+  max-height: min(30rem, calc(100vh - 3rem));
+  overflow: hidden;
+  line-height: 1.45;
+  white-space: normal;
+  word-break: break-word;
+}
+
+@media (max-width: 768px) {
+  .s-code-editor :deep(.cm-panels) {
+    padding-inline: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .s-code-editor :deep(.cm-panel[class~='s-codemirror-search-panel-host']) {
+    width: calc(100vw - 1.5rem);
+    max-width: calc(100vw - 1.5rem);
+  }
+}

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

@@ -0,0 +1,274 @@
+<template>
+  <Codemirror
+    v-bind="ownedAttrs.bindings()"
+    class="s-code-editor"
+    :data-variant="validatedVariant"
+    :data-viewport="validatedViewport"
+    :data-line-numbers="resolvedCapabilities.lineNumbers ? 'visible' : 'hidden'"
+    :model-value="validatedModelValue"
+    :autofocus="validatedAutofocus"
+    :indent-with-tab="resolvedCapabilities.indentation.keyBehavior === 'indent'"
+    :tab-size="resolvedCapabilities.indentation.tabSize"
+    :extensions="resolvedExtensions"
+    @ready="onReady"
+    @update:model-value="onUpdate"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { Codemirror } from 'vue-codemirror'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { EditorSelection, EditorState, type Extension } from '@codemirror/state'
+import { EditorView, lineNumbers, placeholder as codeMirrorPlaceholder } from '@codemirror/view'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { useRuntimeTheme } from '../../../internal/runtimeTheme'
+import {
+  validateBoolean,
+  validateBoundedInteger,
+  validateDomId,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+import { useTrustedCodeEditorExtensions } from '../../../internal/codeEditorExtensions'
+import {
+  CODE_EDITOR_VARIANTS,
+  CODE_EDITOR_VIEWPORTS,
+  type CodeEditorCapabilitiesContract,
+  type CodeEditorLanguageContract,
+  validateCodeEditorCapabilities,
+  validateCodeEditorLanguage,
+  validateCodeEditorVariant,
+  validateCodeEditorViewport,
+} from '../../../internal/codeEditorContract'
+import { getCodeMirrorLanguageExtension, resolveCodeLanguageKey } from '../codeLanguages'
+
+defineOptions({ inheritAttrs: false })
+
+export type SCodeEditorViewport = typeof CODE_EDITOR_VIEWPORTS[number]
+export type SCodeEditorVariant = typeof CODE_EDITOR_VARIANTS[number]
+/** Явный язык либо детектирование из обязательного filePath. / Explicit language or detection from a required filePath. */
+export type SCodeEditorLanguage = CodeEditorLanguageContract
+/** Явные возможности leaf-редактора. / Explicit capabilities of the leaf editor. */
+export type SCodeEditorCapabilities = CodeEditorCapabilitiesContract
+
+/** Exact-координаты документа для cursor activity. / Exact document coordinates emitted for cursor activity. */
+export interface SCodeEditorCursorActivity {
+  pos: number
+  line: number
+  column: number
+  lineFrom: number
+  lineTo: number
+  lineText: string
+}
+
+/** Public readiness snapshot без раскрытия third-party EditorView. / Public readiness snapshot without exposing the third-party EditorView instance. */
+export interface SCodeEditorReadyPayload {
+  documentLength: number
+  viewport: SCodeEditorViewport
+  variant: SCodeEditorVariant
+  locked: boolean
+}
+
+/** Подтверждённое применение selection и источник вызова. / Confirmed selection application and its initiating API. */
+export interface SCodeEditorSelectionAppliedPayload {
+  position: number
+  source: 'controlled' | 'imperative'
+}
+
+type AccessibleName =
+  | { ariaLabel: string; ariaLabelledby?: never }
+  | { ariaLabel?: never; ariaLabelledby: string }
+
+/** Public SCodeEditor contract; размер задаёт только semantic viewport. / Public SCodeEditor contract; sizing is expressed only by semantic viewport. */
+export type Props = AccessibleName & {
+  modelValue: string
+  language: SCodeEditorLanguage
+  capabilities: SCodeEditorCapabilities
+  readOnly?: boolean
+  disabled?: boolean
+  autofocus?: boolean
+  placeholder?: string
+  viewport?: SCodeEditorViewport
+  variant?: SCodeEditorVariant
+  nextSelectionPos?: number | null
+  /** DOM id supplemental status/diagnostic owner. / DOM id of a supplemental status/diagnostic owner. */
+  ariaDescribedby?: string
+  /** Помечает editor content невалидным без владения presentation диагностики. / Marks the editor content as invalid without owning diagnostic presentation. */
+  invalid?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readOnly: false,
+  disabled: false,
+  autofocus: false,
+  placeholder: undefined,
+  viewport: 'content',
+  variant: 'code',
+  nextSelectionPos: null,
+  ariaDescribedby: undefined,
+  invalid: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'cursor-activity': [payload: SCodeEditorCursorActivity]
+  'selection-applied': [payload: SCodeEditorSelectionAppliedPayload]
+  ready: [payload: SCodeEditorReadyPayload]
+}>()
+
+const ownedAttrs = useOwnedAttrs({ component: 'SCodeEditor', owner: 'CodeMirror root adapter' })
+useInteractiveLeafRegistration({ owner: 'SCodeEditor' })
+
+const runtimeTheme = useRuntimeTheme()
+const trustedChannel = useTrustedCodeEditorExtensions()
+const editorView = ref<EditorView | null>(null)
+const pendingControlledSelection = ref<number | null>(null)
+
+const validatedModelValue = computed(() => {
+  if (typeof props.modelValue === 'string') return props.modelValue
+  throw new TypeError('SCodeEditor: modelValue должен быть строкой. / SCodeEditor: modelValue must be a string.')
+})
+
+const validatedViewport = computed<SCodeEditorViewport>(() => validateCodeEditorViewport('SCodeEditor', props.viewport))
+const validatedVariant = computed<SCodeEditorVariant>(() => validateCodeEditorVariant('SCodeEditor', props.variant))
+const validatedAutofocus = computed(() => validateBoolean('SCodeEditor', 'autofocus', props.autofocus))
+const validatedReadOnly = computed(() => validateBoolean('SCodeEditor', 'readOnly', props.readOnly))
+const validatedDisabled = computed(() => validateBoolean('SCodeEditor', 'disabled', props.disabled))
+const validatedInvalid = computed(() => validateBoolean('SCodeEditor', 'invalid', props.invalid))
+const isLocked = computed(() => validatedReadOnly.value || validatedDisabled.value)
+
+const resolvedLanguage = computed((): SCodeEditorLanguage => {
+  const language = validateCodeEditorLanguage('SCodeEditor', props.language)
+  const extension = getCodeMirrorLanguageExtension(language)
+  const languageKey = resolveCodeLanguageKey(language)
+  if (!extension && languageKey !== 'plaintext' && languageKey !== 'text') {
+    const coordinate = language.mode === 'explicit'
+      ? `language.id ${JSON.stringify(language.id)}`
+      : `language.filePath ${JSON.stringify(language.filePath)}`
+    throw new RangeError(`SCodeEditor: ${coordinate} не поддерживается. / SCodeEditor: ${coordinate} is not supported.`)
+  }
+  return language
+})
+
+const resolvedCapabilities = computed((): SCodeEditorCapabilities =>
+  validateCodeEditorCapabilities('SCodeEditor', props.capabilities))
+
+const contentAttributes = computed((): Record<string, string> => {
+  if (props.ariaLabel !== undefined && props.ariaLabelledby !== undefined) {
+    throw new TypeError('SCodeEditor: задайте только ariaLabel или ariaLabelledby. / SCodeEditor: provide only ariaLabel or ariaLabelledby.')
+  }
+  const attributes: Record<string, string> = {}
+  if (props.ariaLabel !== undefined) {
+    attributes['aria-label'] = validateNonEmptyString('SCodeEditor', 'ariaLabel', props.ariaLabel)
+  } else if (props.ariaLabelledby !== undefined) {
+    attributes['aria-labelledby'] = validateDomId('SCodeEditor', 'ariaLabelledby', props.ariaLabelledby)
+  } else {
+    throw new TypeError('SCodeEditor: требуется ariaLabel или ariaLabelledby. / SCodeEditor: ariaLabel or ariaLabelledby is required.')
+  }
+  if (props.ariaDescribedby !== undefined) {
+    attributes['aria-describedby'] = validateDomId('SCodeEditor', 'ariaDescribedby', props.ariaDescribedby)
+  }
+  if (validatedInvalid.value) attributes['aria-invalid'] = 'true'
+  if (validatedReadOnly.value) attributes['aria-readonly'] = 'true'
+  if (validatedDisabled.value) attributes['aria-disabled'] = 'true'
+  return attributes
+})
+
+const resolvedExtensions = computed<Extension[]>(() => {
+  const capabilities = resolvedCapabilities.value
+  const language = resolvedLanguage.value
+  const result: Extension[] = [...(trustedChannel?.extensions.value ?? [])]
+  const languageExtension = getCodeMirrorLanguageExtension(language)
+  if (languageExtension) result.push(languageExtension)
+  if (runtimeTheme.value.mode === 'dark') result.push(oneDark)
+  if (capabilities.lineNumbers) result.push(lineNumbers())
+  if (props.placeholder !== undefined) result.push(codeMirrorPlaceholder(validateNonEmptyString('SCodeEditor', 'placeholder', props.placeholder)))
+  result.push(EditorState.readOnly.of(isLocked.value))
+  result.push(EditorView.editable.of(!isLocked.value))
+  result.push(EditorView.contentAttributes.of(contentAttributes.value))
+  if (capabilities.keyInterceptor && !isLocked.value) {
+    result.push(EditorView.domEventHandlers({ keydown: (event) => {
+      const handled = capabilities.keyInterceptor?.(event)
+      if (!validateBoolean('SCodeEditor', 'capabilities.keyInterceptor return value', handled)) return false
+      event.preventDefault()
+      return true
+    } }))
+  }
+  result.push(EditorView.updateListener.of((update) => {
+    editorView.value = update.view
+    if ((isLocked.value && capabilities.cursorActivity !== 'always') || (!update.selectionSet && !update.docChanged)) return
+    const pos = update.state.selection.main.head
+    const line = update.state.doc.lineAt(pos)
+    emit('cursor-activity', {
+      pos,
+      line: line.number,
+      column: pos - line.from + 1,
+      lineFrom: line.from,
+      lineTo: line.to,
+      lineText: update.state.doc.sliceString(line.from, line.to),
+    })
+  }))
+  return result
+})
+
+const validateSelectionPosition = (position: unknown, documentLength: number, coordinate: string): number =>
+  validateBoundedInteger('SCodeEditor', coordinate, position, { minimum: 0, maximum: documentLength })
+
+const dispatchSelection = (position: number, source: SCodeEditorSelectionAppliedPayload['source']): void => {
+  const view = editorView.value
+  if (!view) throw new Error('SCodeEditor: editor не готов; дождитесь ready. / SCodeEditor: editor is not ready; wait for ready.')
+  const validated = validateSelectionPosition(position, view.state.doc.length, `${source} selection position`)
+  view.dispatch({ selection: EditorSelection.single(validated), scrollIntoView: true })
+  view.focus()
+  emit('selection-applied', { position: validated, source })
+}
+
+const onUpdate = (value: string): void => {
+  if (typeof value !== 'string') {
+    throw new TypeError('SCodeEditor: CodeMirror update payload должен быть строкой. / SCodeEditor: CodeMirror update payload must be a string.')
+  }
+  if (!isLocked.value) emit('update:modelValue', value)
+}
+
+const onReady = (payload: unknown): void => {
+  if (typeof payload !== 'object' || payload === null || !('view' in payload) || !((payload as { view?: unknown }).view instanceof EditorView)) {
+    throw new TypeError('SCodeEditor: CodeMirror ready payload должен содержать EditorView. / SCodeEditor: CodeMirror ready payload must contain EditorView.')
+  }
+  editorView.value = (payload as { view: EditorView }).view
+  const readyPayload: SCodeEditorReadyPayload = {
+    documentLength: editorView.value.state.doc.length,
+    viewport: validatedViewport.value,
+    variant: validatedVariant.value,
+    locked: isLocked.value,
+  }
+  emit('ready', readyPayload)
+  if (pendingControlledSelection.value !== null) {
+    const position = pendingControlledSelection.value
+    pendingControlledSelection.value = null
+    dispatchSelection(position, 'controlled')
+  }
+}
+
+watch(() => props.nextSelectionPos, (position) => {
+  if (position === null || position === undefined) return
+  if (!Number.isInteger(position)) {
+    throw new TypeError(`SCodeEditor: nextSelectionPos должен быть целым числом; получено ${String(position)}. / SCodeEditor: nextSelectionPos must be an integer; received ${String(position)}.`)
+  }
+  if (!editorView.value) {
+    pendingControlledSelection.value = position
+    return
+  }
+  dispatchSelection(position, 'controlled')
+}, { immediate: true })
+
+defineExpose({
+  applySelection: (position: number) => dispatchSelection(position, 'imperative'),
+  focus: () => {
+    if (!editorView.value) throw new Error('SCodeEditor: editor не готов; дождитесь ready. / SCodeEditor: editor is not ready; wait for ready.')
+    editorView.value.focus()
+  },
+})
+</script>
+
+<style lang="postcss" src="./SCodeEditor.css" scoped></style>