@pgcorp/ui-kit 0.9.0 → 0.10.0

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

@@ -0,0 +1,205 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-toast-container s-controlled-toast-viewport"
+    :data-position="validatedPosition"
+    role="region"
+    :aria-label="validatedAccessibleLabel"
+  >
+    <TransitionGroup name="notification-transition" tag="div" class="s-toast-transition-wrapper">
+      <SToastItem
+        v-for="notification in visibleNotifications"
+        :key="notification.id"
+        :notification="notification"
+        @dismiss="onDismiss"
+        @action="emit('action', $event)"
+        @lifetime-pause="pauseLifetime"
+        @lifetime-resume="resumeLifetime"
+      />
+    </TransitionGroup>
+  </div>
+</template>
+
+<script
+  setup
+  lang="ts"
+  generic="Id extends SToastId = string, ActionId extends SToastActionId = string"
+>
+import { computed, onBeforeUnmount, watch } from 'vue'
+
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  validateBoundedInteger,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+import SToastItem from '../_internal/SToastItem.vue'
+import {
+  type SToastActionId,
+  type SToastActionIntent,
+  type SToastDismissIntent,
+  type SToastId,
+  type SToastLifetimeExpiredIntent,
+  type SToastLifetimeOwner,
+  type SToastPosition,
+  type SToastPresentation,
+  validateToastLifetimeOwner,
+  validateToastPosition,
+  validateToastPresentations,
+} from './toast'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  notifications: readonly SToastPresentation<Id, ActionId>[]
+  accessibleLabel: string
+  lifetimeOwner?: SToastLifetimeOwner
+  position?: SToastPosition
+  maxVisible?: number
+}>(), {
+  lifetimeOwner: 'consumer',
+  position: 'top-end',
+  maxVisible: 5,
+})
+
+const emit = defineEmits<{
+  dismiss: [intent: SToastDismissIntent<Id>]
+  action: [intent: SToastActionIntent<Id, ActionId>]
+  'lifetime-expired': [intent: SToastLifetimeExpiredIntent<Id>]
+}>()
+
+type PauseReason = 'pointer' | 'focus'
+
+interface LifetimeState {
+  configuredDurationMs: number
+  remainingMs: number
+  startedAt: number
+  timer: ReturnType<typeof setTimeout> | null
+  pausedBy: Set<PauseReason>
+  expired: boolean
+}
+
+const ownedAttrs = useOwnedAttrs({
+  component: 'SControlledToastViewport',
+  owner: 'controlled toast viewport root',
+})
+const lifetimeStates = new Map<Id, LifetimeState>()
+const validatedNotifications = computed(() =>
+  validateToastPresentations('SControlledToastViewport', props.notifications))
+const validatedAccessibleLabel = computed(() =>
+  validateNonEmptyString('SControlledToastViewport', 'accessibleLabel', props.accessibleLabel))
+const validatedPosition = computed(() => validateToastPosition(props.position))
+const validatedLifetimeOwner = computed(() => validateToastLifetimeOwner(props.lifetimeOwner))
+const validatedMaxVisible = computed(() => validateBoundedInteger(
+  'SControlledToastViewport',
+  'maxVisible',
+  props.maxVisible,
+  { minimum: 1, maximum: Number.MAX_SAFE_INTEGER },
+))
+const visibleNotifications = computed(() =>
+  validatedNotifications.value.slice(0, validatedMaxVisible.value))
+
+function clearTimer(state: LifetimeState): void {
+  if (state.timer === null) return
+  clearTimeout(state.timer)
+  state.timer = null
+}
+
+function removeLifetime(id: Id): void {
+  const state = lifetimeStates.get(id)
+  if (!state) return
+  clearTimer(state)
+  lifetimeStates.delete(id)
+}
+
+function clearLifetimes(): void {
+  for (const state of lifetimeStates.values()) clearTimer(state)
+  lifetimeStates.clear()
+}
+
+function startLifetime(id: Id, state: LifetimeState): void {
+  if (
+    typeof window === 'undefined'
+    || state.expired
+    || state.remainingMs <= 0
+    || state.pausedBy.size > 0
+  ) return
+  state.startedAt = Date.now()
+  state.timer = setTimeout(() => {
+    state.timer = null
+    state.remainingMs = 0
+    state.expired = true
+    emit('lifetime-expired', { id })
+  }, state.remainingMs)
+}
+
+function createLifetime(id: Id, durationMs: number): LifetimeState {
+  const state: LifetimeState = {
+    configuredDurationMs: durationMs,
+    remainingMs: durationMs,
+    startedAt: 0,
+    timer: null,
+    pausedBy: new Set(),
+    expired: false,
+  }
+  lifetimeStates.set(id, state)
+  startLifetime(id, state)
+  return state
+}
+
+function syncLifetimes(): void {
+  if (validatedLifetimeOwner.value !== 'viewport' || typeof window === 'undefined') {
+    clearLifetimes()
+    return
+  }
+  const visibleIds = new Set<Id>()
+  for (const notification of visibleNotifications.value) {
+    visibleIds.add(notification.id)
+    const durationMs = notification.durationMs ?? 0
+    const current = lifetimeStates.get(notification.id)
+    if (durationMs === 0) {
+      removeLifetime(notification.id)
+      continue
+    }
+    if (!current) {
+      createLifetime(notification.id, durationMs)
+      continue
+    }
+    if (current.configuredDurationMs !== durationMs) {
+      removeLifetime(notification.id)
+      createLifetime(notification.id, durationMs)
+    }
+  }
+  for (const id of lifetimeStates.keys()) {
+    if (!visibleIds.has(id)) removeLifetime(id)
+  }
+}
+
+function pauseLifetime(id: Id, reason: PauseReason): void {
+  const state = lifetimeStates.get(id)
+  if (!state || state.expired || state.pausedBy.has(reason)) return
+  state.pausedBy.add(reason)
+  if (state.timer === null) return
+  const elapsedMs = Math.max(0, Date.now() - state.startedAt)
+  state.remainingMs = Math.max(0, state.remainingMs - elapsedMs)
+  clearTimer(state)
+}
+
+function resumeLifetime(id: Id, reason: PauseReason): void {
+  const state = lifetimeStates.get(id)
+  if (!state || !state.pausedBy.delete(reason) || state.pausedBy.size > 0) return
+  startLifetime(id, state)
+}
+
+function onDismiss(id: Id): void {
+  emit('dismiss', { id, reason: 'close' })
+}
+
+watch(
+  [visibleNotifications, validatedLifetimeOwner],
+  syncLifetimes,
+  { immediate: true },
+)
+onBeforeUnmount(clearLifetimes)
+</script>
+
+<style lang="postcss" src="./SControlledToastViewport.css" scoped></style>

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

@@ -3,6 +3,7 @@ import { Copy } from '../../icons/sputnigUiIcons'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useNotifier } from '../../../composables/useNotifier'
 import { useClipboard } from '../../../composables/useClipboard'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import SInputText from '../controls/SInputText.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -24,13 +25,14 @@ const props = withDefaults(
     placeholder: '',
     disabled: false,
     monospace: false,
-    successMessage: 'Значение скопировано',
-    unavailableMessage: 'Буфер обмена недоступен в этом браузере.',
-    errorMessage: 'Не удалось скопировать значение.',
+    successMessage: undefined,
+    unavailableMessage: undefined,
+    errorMessage: undefined,
   },
 )
 
 const notifier = useNotifier()
+const { t } = useUiKitLocale()
 const { copyText } = useClipboard()
 const ownedAttrs = useOwnedAttrs({ component: 'SCopyField', owner: 'copy field input owner' })
 
@@ -41,17 +43,17 @@ async function copyValue() {
 
   const result = await copyText(props.value)
   if (result.status === 'copied') {
-    notifier.success({ message: props.successMessage })
+    notifier.success({ message: props.successMessage ?? t('clipboard.valueCopied') })
     return
   }
 
   notifier.danger({
-    title: 'Ошибка копирования',
+    title: t('clipboard.copyErrorTitle'),
     message: result.status === 'unavailable'
-      ? props.unavailableMessage
+      ? props.unavailableMessage ?? t('clipboard.clipboardUnavailable')
       : result.status === 'empty'
-        ? 'Нет значения для копирования.'
-        : `${props.errorMessage} ${result.error.message}`,
+        ? t('clipboard.emptyValue')
+        : `${props.errorMessage ?? t('clipboard.valueCopyFailed')} ${result.error.message}`,
   })
 }
 </script>
@@ -66,8 +68,8 @@ async function copyValue() {
     :disabled="disabled"
     :monospace="monospace"
     :trailing-action="{
-      label: 'Скопировать',
-      title: 'Скопировать',
+      label: t('clipboard.copy'),
+      title: t('clipboard.copy'),
       icon: Copy,
       disabled: disabled || !value,
     }"

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

@@ -0,0 +1,122 @@
+@reference "../../../styles/reference.css";
+
+.s-diff-viewer {
+  @apply flex min-h-0 min-w-0 flex-col overflow-hidden rounded-md border border-surface-200 text-surface-900 dark:border-surface-700 dark:text-surface-100;
+  width: 100%;
+  background: var(--s-diff-surface);
+}
+
+.s-diff-viewer[data-viewport='content'] {
+  block-size: min(
+    calc((var(--s-diff-content-row-count) * var(--s-diff-row-block-size)) + 4.5rem),
+    var(--s-code-editor-viewport-content-max)
+  );
+}
+
+.s-diff-viewer[data-viewport='compact'] { block-size: var(--s-code-editor-viewport-compact); }
+.s-diff-viewer[data-viewport='standard'] { block-size: var(--s-code-editor-viewport-standard); }
+.s-diff-viewer[data-viewport='expanded'] { block-size: var(--s-code-editor-viewport-expanded); }
+.s-diff-viewer[data-viewport='fill'] { block-size: 100%; }
+
+.s-diff-viewer__header,
+.s-diff-viewer__split-header {
+  @apply flex shrink-0 items-center justify-between gap-3 border-b border-surface-200 px-3 text-xs dark:border-surface-700;
+  min-block-size: 2.25rem;
+}
+
+.s-diff-viewer__sources { @apply flex min-w-0 items-center gap-2; }
+.s-diff-viewer__source { @apply min-w-0 truncate font-semibold; }
+.s-diff-viewer__direction,
+.s-diff-viewer__summary { @apply shrink-0 text-surface-500 dark:text-surface-400; }
+
+.s-diff-viewer__split-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  padding-inline: 0;
+}
+
+.s-diff-viewer__split-header > span { @apply truncate px-3 font-semibold; }
+.s-diff-viewer__split-header > span + span { @apply border-l border-surface-200 dark:border-surface-700; }
+
+.s-diff-viewer__viewport {
+  @apply min-h-0 min-w-0 flex-1;
+  overflow: hidden;
+}
+
+.s-diff-viewer__error {
+  @apply flex min-h-0 flex-col items-start gap-3 p-3;
+}
+
+.s-diff-viewer__gap-row {
+  @apply flex min-w-0 items-center border-y border-surface-200 px-2 dark:border-surface-700;
+  min-block-size: var(--s-diff-row-block-size);
+  background: var(--s-diff-context-surface);
+}
+
+.s-diff-viewer__unified-row,
+.s-diff-viewer__split-row,
+.s-diff-viewer__split-cell {
+  min-width: 0;
+  min-block-size: var(--s-diff-row-block-size);
+}
+
+.s-diff-viewer__unified-row {
+  display: grid;
+  grid-template-columns: 2rem 3rem 3rem minmax(var(--s-diff-unified-code-inline-size), 1fr);
+  width: 100%;
+  min-width: calc(9rem + var(--s-diff-unified-code-inline-size));
+}
+
+.s-diff-viewer__split-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  width: 100%;
+  min-width: 100%;
+}
+
+.s-diff-viewer__split-cell {
+  display: grid;
+  grid-template-columns: 3rem minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.s-diff-viewer__split-cell + .s-diff-viewer__split-cell {
+  @apply border-l border-surface-200 dark:border-surface-700;
+}
+
+.s-diff-viewer__marker,
+.s-diff-viewer__line-number {
+  @apply select-none text-right text-xs text-surface-500 dark:text-surface-400;
+  min-block-size: var(--s-diff-row-block-size);
+  padding-inline: 0.5rem;
+  background: var(--s-diff-gutter-surface);
+  font-family: var(--font-mono);
+  line-height: var(--s-diff-row-block-size);
+}
+
+.s-diff-viewer__marker { @apply text-center font-semibold; }
+
+.s-diff-viewer__code-cell {
+  @apply relative overflow-hidden px-2;
+  min-width: 0;
+  min-block-size: var(--s-diff-row-block-size);
+}
+
+.s-diff-viewer__unified-row[data-kind='added'],
+.s-diff-viewer__split-cell[data-kind='added'] {
+  background: var(--s-diff-added-surface);
+  box-shadow: inset 2px 0 var(--s-diff-added-accent);
+}
+
+.s-diff-viewer__unified-row[data-kind='removed'],
+.s-diff-viewer__split-cell[data-kind='removed'] {
+  background: var(--s-diff-removed-surface);
+  box-shadow: inset 2px 0 var(--s-diff-removed-accent);
+}
+
+.s-diff-viewer__split-cell[data-kind='empty'] { background: var(--s-diff-gutter-surface); }
+
+.s-diff-viewer__missing-break {
+  @apply absolute right-1 top-0 text-xs font-semibold text-surface-500 dark:text-surface-400;
+  line-height: var(--s-diff-row-block-size);
+}