@pgcorp/ui-kit 0.9.0 → 0.10.0

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

@@ -4,8 +4,8 @@
       <div class="s-code-search-panel__field">
         <SInputText
           :model-value="searchValue"
-          :placeholder="findPlaceholder"
-          :aria-label="findPlaceholder"
+          :placeholder="labels.findPlaceholder"
+          :aria-label="labels.findPlaceholder"
           :invalid="validatedSearchError !== undefined"
           :error-message="validatedSearchError"
           name="search"
@@ -22,8 +22,8 @@
           size="sm"
           icon-only
           :leading-icon="ChevronUp"
-          :title="previousLabel"
-          :aria-label="previousLabel"
+          :title="labels.previousLabel"
+          :aria-label="labels.previousLabel"
           @click="emit('previous')"
         />
 
@@ -33,8 +33,8 @@
           size="sm"
           icon-only
           :leading-icon="ChevronDown"
-          :title="nextLabel"
-          :aria-label="nextLabel"
+          :title="labels.nextLabel"
+          :aria-label="labels.nextLabel"
           @click="emit('next')"
         />
 
@@ -45,8 +45,8 @@
           size="sm"
           icon-only
           :leading-icon="ScanSearch"
-          :title="selectAllLabel"
-          :aria-label="selectAllLabel"
+          :title="labels.selectAllLabel"
+          :aria-label="labels.selectAllLabel"
           @click="emit('selectAll')"
         />
 
@@ -57,8 +57,8 @@
           size="sm"
           icon-only
           :leading-icon="X"
-          :title="closeLabel"
-          :aria-label="closeLabel"
+          :title="labels.closeLabel"
+          :aria-label="labels.closeLabel"
           @click="emit('close')"
         />
       </div>
@@ -71,8 +71,8 @@
         size="sm"
         icon-only
         :leading-icon="CaseSensitive"
-        :title="matchCaseLabel"
-        :aria-label="matchCaseLabel"
+        :title="labels.matchCaseLabel"
+        :aria-label="labels.matchCaseLabel"
         :pressed="caseSensitive"
         @click="emit('update:caseSensitive', !caseSensitive)"
       />
@@ -83,8 +83,8 @@
         size="sm"
         icon-only
         :leading-icon="Regex"
-        :title="regexpLabel"
-        :aria-label="regexpLabel"
+        :title="labels.regexpLabel"
+        :aria-label="labels.regexpLabel"
         :pressed="regexp"
         @click="emit('update:regexp', !regexp)"
       />
@@ -95,8 +95,8 @@
         size="sm"
         icon-only
         :leading-icon="WholeWord"
-        :title="wholeWordLabel"
-        :aria-label="wholeWordLabel"
+        :title="labels.wholeWordLabel"
+        :aria-label="labels.wholeWordLabel"
         :pressed="wholeWord"
         @click="emit('update:wholeWord', !wholeWord)"
       />
@@ -109,8 +109,8 @@
       <div class="s-code-search-panel__field">
         <SInputText
           :model-value="replaceValue"
-          :placeholder="replacePlaceholder"
-          :aria-label="replacePlaceholder"
+          :placeholder="labels.replacePlaceholder"
+          :aria-label="labels.replacePlaceholder"
           :invalid="validatedReplaceError !== undefined"
           :error-message="validatedReplaceError"
           name="replace"
@@ -126,8 +126,8 @@
           size="sm"
           icon-only
           :leading-icon="Replace"
-          :title="replaceLabel"
-          :aria-label="replaceLabel"
+          :title="labels.replaceLabel"
+          :aria-label="labels.replaceLabel"
           @click="emit('replace')"
         />
 
@@ -138,8 +138,8 @@
           size="sm"
           icon-only
           :leading-icon="ReplaceAll"
-          :title="replaceAllLabel"
-          :aria-label="replaceAllLabel"
+          :title="labels.replaceAllLabel"
+          :aria-label="labels.replaceAllLabel"
           @click="emit('replaceAll')"
         />
       </div>
@@ -162,6 +162,7 @@ import {
 } from '../../icons/sputnigUiIcons';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
 import { validateNonEmptyString } from '../../../internal/runtimeContract';
+import { useUiKitLocale } from '../../../composables/useUiKitLocale';
 
 import SButton from '../controls/SButton.vue';
 import SInputText from '../controls/SInputText.vue';
@@ -192,20 +193,34 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   canReplace: true,
-  findPlaceholder: 'Найти',
-  replacePlaceholder: 'Заменить',
-  nextLabel: 'Дальше',
-  previousLabel: 'Назад',
-  selectAllLabel: 'Все',
-  matchCaseLabel: 'С учётом регистра',
-  regexpLabel: 'Регулярное выражение',
-  wholeWordLabel: 'Слово целиком',
-  replaceLabel: 'Заменить',
-  replaceAllLabel: 'Заменить всё',
-  closeLabel: 'Закрыть',
+  findPlaceholder: undefined,
+  replacePlaceholder: undefined,
+  nextLabel: undefined,
+  previousLabel: undefined,
+  selectAllLabel: undefined,
+  matchCaseLabel: undefined,
+  regexpLabel: undefined,
+  wholeWordLabel: undefined,
+  replaceLabel: undefined,
+  replaceAllLabel: undefined,
+  closeLabel: undefined,
   searchError: undefined,
   replaceError: undefined,
 });
+const { t } = useUiKitLocale();
+const labels = computed(() => ({
+  findPlaceholder: validateNonEmptyString('SCodeSearchPanel', 'findPlaceholder', props.findPlaceholder ?? t('editor.find')),
+  replacePlaceholder: validateNonEmptyString('SCodeSearchPanel', 'replacePlaceholder', props.replacePlaceholder ?? t('editor.replace')),
+  nextLabel: validateNonEmptyString('SCodeSearchPanel', 'nextLabel', props.nextLabel ?? t('editor.nextMatchShort')),
+  previousLabel: validateNonEmptyString('SCodeSearchPanel', 'previousLabel', props.previousLabel ?? t('editor.previousMatchShort')),
+  selectAllLabel: validateNonEmptyString('SCodeSearchPanel', 'selectAllLabel', props.selectAllLabel ?? t('editor.selectAllMatches')),
+  matchCaseLabel: validateNonEmptyString('SCodeSearchPanel', 'matchCaseLabel', props.matchCaseLabel ?? t('editor.matchCase')),
+  regexpLabel: validateNonEmptyString('SCodeSearchPanel', 'regexpLabel', props.regexpLabel ?? t('editor.regularExpression')),
+  wholeWordLabel: validateNonEmptyString('SCodeSearchPanel', 'wholeWordLabel', props.wholeWordLabel ?? t('editor.wholeWord')),
+  replaceLabel: validateNonEmptyString('SCodeSearchPanel', 'replaceLabel', props.replaceLabel ?? t('editor.replaceOne')),
+  replaceAllLabel: validateNonEmptyString('SCodeSearchPanel', 'replaceAllLabel', props.replaceAllLabel ?? t('editor.replaceAll')),
+  closeLabel: validateNonEmptyString('SCodeSearchPanel', 'closeLabel', props.closeLabel ?? t('actions.close')),
+}));
 
 const emit = defineEmits<{
   (e: 'update:searchValue', value: string): void;

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

@@ -0,0 +1,13 @@
+@reference "../../../styles/reference.css";
+
+.s-code-workspace-editor {
+  @apply flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-surface-0 dark:bg-surface-900;
+  width: 100%;
+  height: 100%;
+}
+
+.s-code-workspace-editor[data-empty='true'] {
+  @apply items-center justify-center;
+  min-height: var(--s-code-editor-viewport-compact);
+  padding: var(--s-space-section-gap);
+}

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

@@ -0,0 +1,355 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-code-workspace-editor"
+    :data-empty="records.length === 0 || undefined"
+  >
+    <SEmptyState
+      v-if="records.length === 0"
+      :title="resolvedEmptyTitle"
+      size="sm"
+      presentation="inline"
+    />
+    <STabs
+      v-else
+      :model-value="validatedActiveKey ?? undefined"
+      :aria-label="validatedAriaLabel"
+      :controls-aria-label="resolvedTabActionsLabel"
+      tab-sizing="content"
+      tab-list-width="full"
+      tab-density="compact"
+      surface-radius="none"
+      grow
+      @update:model-value="activateDocument"
+    >
+      <template #list>
+        <STab
+          v-for="record in records"
+          :key="record.document.sessionKey"
+          :name="record.document.key"
+          :title="record.document.label"
+        >
+          {{ record.document.label }}
+        </STab>
+      </template>
+      <template v-if="activeRecord?.document.closable" #controls>
+        <SButton
+          label=""
+          :aria-label="closeLabel(activeRecord.document.label)"
+          :leading-icon="X"
+          appearance="ghost"
+          severity="secondary"
+          size="xs"
+          shape="square"
+          icon-only
+          @click="requestRelease(activeRecord.document)"
+        />
+      </template>
+      <template #panels>
+        <STabPanel
+          v-for="record in records"
+          :key="record.document.sessionKey"
+          :name="record.document.key"
+          overflow="hidden"
+        >
+          <SCodeEditor
+            :key="`${record.document.sessionKey}:${record.epoch}`"
+            :ref="(instance) => setEditorRef(record.document.sessionKey, instance)"
+            :model-value="record.document.value"
+            :language="record.document.language"
+            :capabilities="record.document.capabilities"
+            :diagnostics="record.document.diagnostics"
+            :read-only="record.document.readOnly"
+            :disabled="record.document.disabled"
+            :invalid="record.document.invalid"
+            :placeholder="record.document.placeholder"
+            :variant="record.document.variant"
+            :aria-label="record.document.label"
+            viewport="fill"
+            @update:model-value="emitDocumentChange(record, $event)"
+            @selection-change="emitSelectionChange(record, $event)"
+            @view-state-change="emitViewStateChange(record, $event)"
+          />
+        </STabPanel>
+      </template>
+    </STabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent, onBeforeUnmount, shallowRef, watch } from 'vue'
+import { X } from '../../icons/sputnigUiIcons'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
+import { validateNonEmptyString } from '../../../internal/runtimeContract'
+import SButton from '../controls/SButton.vue'
+import STab from '../navigation/STab.vue'
+import STabPanel from '../navigation/STabPanel.vue'
+import STabs from '../navigation/STabs.vue'
+import SEmptyState from './SEmptyState.vue'
+import type {
+  SCodeEditorApi,
+  SCodeEditorSelectionRange,
+  SCodeEditorViewState,
+} from './codeEditor'
+import {
+  validateCodeWorkspaceActiveKey,
+  validateCodeWorkspaceDocuments,
+  type SCodeWorkspaceDocument,
+  type SCodeWorkspaceDocumentChange,
+  type SCodeWorkspaceDocumentKey,
+  type SCodeWorkspaceDocumentState,
+  type SCodeWorkspaceEditorApi,
+  type SCodeWorkspaceReleaseRequest,
+  type SCodeWorkspaceSelectionChange,
+  type SCodeWorkspaceSessionKey,
+  type SCodeWorkspaceViewStateChange,
+} from './codeWorkspace'
+
+defineOptions({ inheritAttrs: false })
+
+const SCodeEditor = defineAsyncComponent(() => import('../../../internal/lazyCodeEditor'))
+
+/** Keyed editor workspace. Consumer owns text/revisions; UI-kit owns mounted editor-session resources. */
+export interface Props {
+  /** Current controlled document inventory. Sessions must be explicitly released before removal. */
+  documents: readonly SCodeWorkspaceDocument[]
+  /** Controlled active document key, or null for an empty inventory. */
+  activeKey: SCodeWorkspaceDocumentKey | null
+  /** Accessible name for the workspace tab list. */
+  ariaLabel: string
+  /** Optional empty-state title. */
+  emptyTitle?: string
+}
+
+interface SessionRecord {
+  readonly document: SCodeWorkspaceDocument
+  readonly epoch: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  emptyTitle: undefined,
+})
+const emit = defineEmits<{
+  'update:activeKey': [key: SCodeWorkspaceDocumentKey]
+  'document-change': [payload: SCodeWorkspaceDocumentChange]
+  'selection-change': [payload: SCodeWorkspaceSelectionChange]
+  'view-state-change': [payload: SCodeWorkspaceViewStateChange]
+  'release-request': [payload: SCodeWorkspaceReleaseRequest]
+}>()
+
+const ownedAttrs = useOwnedAttrs({
+  component: 'SCodeWorkspaceEditor',
+  owner: 'keyed code-editor workspace root',
+})
+const { t } = useUiKitLocale()
+const records = shallowRef<readonly SessionRecord[]>([])
+const releasedSessionKeys = new Set<SCodeWorkspaceSessionKey>()
+const editorRefs = new Map<SCodeWorkspaceSessionKey, SCodeEditorApi>()
+
+const validatedDocuments = computed(() => validateCodeWorkspaceDocuments(
+  'SCodeWorkspaceEditor',
+  props.documents,
+))
+const validatedActiveKey = computed(() => validateCodeWorkspaceActiveKey(
+  'SCodeWorkspaceEditor',
+  props.activeKey,
+  validatedDocuments.value,
+))
+const activeRecord = computed(() => records.value.find(
+  (record) => record.document.key === validatedActiveKey.value,
+))
+const validatedAriaLabel = computed(() => validateNonEmptyString(
+  'SCodeWorkspaceEditor',
+  'ariaLabel',
+  props.ariaLabel,
+))
+const resolvedEmptyTitle = computed(() => props.emptyTitle === undefined
+  ? t('editor.workspaceEmpty')
+  : validateNonEmptyString('SCodeWorkspaceEditor', 'emptyTitle', props.emptyTitle))
+const resolvedTabActionsLabel = computed(() => t('navigation.tabActions'))
+
+function sameRevision(
+  left: SCodeWorkspaceDocument['revision'],
+  right: SCodeWorkspaceDocument['revision'],
+): boolean {
+  return typeof left === typeof right && left === right
+}
+
+function synchronizeSessions(documents: readonly SCodeWorkspaceDocument[]): void {
+  const previousBySession = new Map(records.value.map((record) => [record.document.sessionKey, record]))
+  const nextSessionKeys = new Set(documents.map((document) => document.sessionKey))
+  const missing = records.value.find((record) => !nextSessionKeys.has(record.document.sessionKey))
+  if (missing) {
+    throw new Error(
+      `SCodeWorkspaceEditor: session ${JSON.stringify(missing.document.sessionKey)} удалена из documents без releaseSession(). `
+      + `/ SCodeWorkspaceEditor: session ${JSON.stringify(missing.document.sessionKey)} was removed from documents without releaseSession().`,
+    )
+  }
+
+  records.value = documents.map((document) => {
+    if (releasedSessionKeys.has(document.sessionKey)) {
+      throw new Error(
+        `SCodeWorkspaceEditor: sessionKey ${JSON.stringify(document.sessionKey)} уже освобождён; откройте документ с новым sessionKey. `
+        + `/ SCodeWorkspaceEditor: sessionKey ${JSON.stringify(document.sessionKey)} was released; reopen with a new sessionKey.`,
+      )
+    }
+    const previous = previousBySession.get(document.sessionKey)
+    if (!previous) return Object.freeze({ document, epoch: 0 })
+    if (previous.document.key !== document.key) {
+      throw new Error(
+        `SCodeWorkspaceEditor: sessionKey ${JSON.stringify(document.sessionKey)} не может менять document key. `
+        + `/ SCodeWorkspaceEditor: sessionKey ${JSON.stringify(document.sessionKey)} cannot change document key.`,
+      )
+    }
+    const epoch = sameRevision(previous.document.revision, document.revision)
+      ? previous.epoch
+      : previous.epoch + 1
+    return Object.freeze({ document, epoch })
+  })
+}
+
+watch(validatedDocuments, synchronizeSessions, { immediate: true })
+watch(validatedActiveKey, () => undefined, { immediate: true })
+
+function isCodeEditorApi(value: unknown): value is SCodeEditorApi {
+  if (typeof value !== 'object' || value === null) return false
+  const candidate = value as Partial<Record<keyof SCodeEditorApi, unknown>>
+  return typeof candidate.applySelection === 'function'
+    && typeof candidate.revealRange === 'function'
+    && typeof candidate.getSelection === 'function'
+    && typeof candidate.captureViewState === 'function'
+    && typeof candidate.applyViewState === 'function'
+    && typeof candidate.focus === 'function'
+}
+
+function setEditorRef(sessionKey: SCodeWorkspaceSessionKey, instance: unknown): void {
+  if (instance === null) {
+    editorRefs.delete(sessionKey)
+    return
+  }
+  if (!isCodeEditorApi(instance)) {
+    throw new TypeError('SCodeWorkspaceEditor: SCodeEditor ref does not implement the public SCodeEditorApi.')
+  }
+  editorRefs.set(sessionKey, instance)
+}
+
+function requireRecordByKey(key: SCodeWorkspaceDocumentKey): SessionRecord {
+  const validatedKey = validateNonEmptyString('SCodeWorkspaceEditor', 'document key', key)
+  const record = records.value.find((candidate) => candidate.document.key === validatedKey)
+  if (!record) {
+    throw new RangeError(
+      `SCodeWorkspaceEditor: document key ${JSON.stringify(validatedKey)} отсутствует. `
+      + `/ SCodeWorkspaceEditor: document key ${JSON.stringify(validatedKey)} is unavailable.`,
+    )
+  }
+  return record
+}
+
+function requireEditor(record: SessionRecord): SCodeEditorApi {
+  const editor = editorRefs.get(record.document.sessionKey)
+  if (!editor) {
+    throw new Error(
+      `SCodeWorkspaceEditor: editor session ${JSON.stringify(record.document.sessionKey)} не готова. `
+      + `/ SCodeWorkspaceEditor: editor session ${JSON.stringify(record.document.sessionKey)} is not ready.`,
+    )
+  }
+  return editor
+}
+
+function activateDocument(key: SCodeWorkspaceDocumentKey): void {
+  requireRecordByKey(key)
+  emit('update:activeKey', key)
+}
+
+function closeLabel(label: string): string {
+  return t('editor.closeDocument', { name: label })
+}
+
+function requestRelease(document: SCodeWorkspaceDocument): void {
+  emit('release-request', Object.freeze({
+    key: document.key,
+    sessionKey: document.sessionKey,
+  }))
+}
+
+function emitDocumentChange(record: SessionRecord, value: string): void {
+  emit('document-change', Object.freeze({
+    key: record.document.key,
+    sessionKey: record.document.sessionKey,
+    revision: record.document.revision,
+    value,
+  }))
+}
+
+function emitSelectionChange(record: SessionRecord, selection: SCodeEditorSelectionRange): void {
+  emit('selection-change', Object.freeze({
+    key: record.document.key,
+    sessionKey: record.document.sessionKey,
+    selection,
+  }))
+}
+
+function emitViewStateChange(record: SessionRecord, viewState: SCodeEditorViewState): void {
+  emit('view-state-change', Object.freeze({
+    key: record.document.key,
+    sessionKey: record.document.sessionKey,
+    viewState,
+  }))
+}
+
+function releaseSession(sessionKey: SCodeWorkspaceSessionKey): void {
+  const validatedSessionKey = validateNonEmptyString('SCodeWorkspaceEditor', 'sessionKey', sessionKey)
+  if (releasedSessionKeys.has(validatedSessionKey)) {
+    throw new Error(
+      `SCodeWorkspaceEditor: session ${JSON.stringify(validatedSessionKey)} уже освобождена. `
+      + `/ SCodeWorkspaceEditor: session ${JSON.stringify(validatedSessionKey)} is already released.`,
+    )
+  }
+  if (!records.value.some((record) => record.document.sessionKey === validatedSessionKey)) {
+    throw new RangeError(
+      `SCodeWorkspaceEditor: session ${JSON.stringify(validatedSessionKey)} отсутствует. `
+      + `/ SCodeWorkspaceEditor: session ${JSON.stringify(validatedSessionKey)} is unavailable.`,
+    )
+  }
+  releasedSessionKeys.add(validatedSessionKey)
+  editorRefs.delete(validatedSessionKey)
+  records.value = records.value.filter((record) => record.document.sessionKey !== validatedSessionKey)
+}
+
+const api: SCodeWorkspaceEditorApi = {
+  focusActive: () => {
+    if (validatedActiveKey.value === null) {
+      throw new Error('SCodeWorkspaceEditor: пустой workspace не имеет active editor. / SCodeWorkspaceEditor: an empty workspace has no active editor.')
+    }
+    const record = requireRecordByKey(validatedActiveKey.value)
+    requireEditor(record).focus()
+  },
+  revealRange: (key, range) => {
+    const record = requireRecordByKey(key)
+    requireEditor(record).revealRange(range)
+  },
+  captureDocumentState: (key): SCodeWorkspaceDocumentState => {
+    const record = requireRecordByKey(key)
+    const editor = requireEditor(record)
+    return Object.freeze({
+      key: record.document.key,
+      sessionKey: record.document.sessionKey,
+      revision: record.document.revision,
+      selection: editor.getSelection(),
+      viewState: editor.captureViewState(),
+    })
+  },
+  releaseSession,
+}
+
+defineExpose<SCodeWorkspaceEditorApi>(api)
+
+onBeforeUnmount(() => {
+  editorRefs.clear()
+  releasedSessionKeys.clear()
+  records.value = []
+})
+</script>
+
+<style lang="postcss" src="./SCodeWorkspaceEditor.css" scoped></style>

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

@@ -0,0 +1,89 @@
+@reference "../../../styles/reference.css";
+
+.s-toast-container {
+  @apply fixed flex max-h-[100dvh] min-w-0 w-full max-w-md flex-col overflow-y-auto overscroll-contain p-4;
+  z-index: var(--s-layer-root-toast);
+  pointer-events: none;
+}
+
+.s-toast-container[data-position^='top-'] {
+  inset-block-start: 0;
+}
+
+.s-toast-container[data-position^='bottom-'] {
+  inset-block-end: 0;
+}
+
+.s-toast-container[data-position$='-start'] {
+  inset-inline-start: 0;
+}
+
+.s-toast-container[data-position$='-end'] {
+  inset-inline-end: 0;
+}
+
+.s-toast-container[data-position$='-center'] {
+  inset-inline: 0;
+  margin-inline: auto;
+}
+
+.s-toast-transition-wrapper {
+  @apply relative flex flex-col gap-2;
+}
+
+.s-toast-container[data-position$='-start'] .s-toast-transition-wrapper {
+  align-items: flex-start;
+}
+
+.s-toast-container[data-position$='-center'] .s-toast-transition-wrapper {
+  align-items: center;
+}
+
+.s-toast-container[data-position$='-end'] .s-toast-transition-wrapper {
+  align-items: flex-end;
+}
+
+.notification-transition-enter-active {
+  transition:
+    opacity var(--s-motion-standard) ease-out,
+    transform var(--s-motion-standard) ease-out;
+}
+
+.notification-transition-enter-from {
+  opacity: 0;
+  transform: translate3d(0, 0.75rem, 0) scale(0.98);
+}
+
+.notification-transition-enter-to {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.notification-transition-leave-active {
+  position: absolute;
+  transition:
+    opacity var(--s-motion-fast) ease-in,
+    transform var(--s-motion-fast) ease-in;
+}
+
+.notification-transition-leave-from {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.notification-transition-leave-to {
+  opacity: 0;
+  transform: translate3d(0, 0.5rem, 0) scale(0.98);
+}
+
+.notification-transition-move {
+  transition: transform var(--s-motion-standard) ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .notification-transition-enter-active,
+  .notification-transition-leave-active,
+  .notification-transition-move {
+    transition-duration: 0.01ms;
+  }
+}