@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Component, VNodeChild } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { validateBoundedInteger, validateNonEmptyString } from '../../../internal/runtimeContract'
+
+import SButton from '../controls/SButton.vue'
+import SActionCard from './SActionCard.vue'
+import SBadge from './SBadge.vue'
+import type { BadgeSeverity } from './SBadge.vue'
+import type { Props as ButtonProps } from '../controls/SButton.vue'
+import type { InteractiveSurfaceContract, InteractiveSurfaceDensity, InteractiveSurfacePadding, InteractiveSurfaceRadius, InteractiveSurfaceTone } from '../controls/SInteractiveSurface.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export interface ActionListItemBadge {
+  readonly id: string
+  readonly label: string
+  readonly severity: BadgeSeverity
+}
+
+export interface ActionListItemActionsSlotProps {
+  readonly disabled: boolean
+  readonly emitAction: (event: MouseEvent) => void
+}
+
+const props = withDefaults(defineProps<{
+  title: string
+  titleTooltip?: string
+  description?: string | null
+  detail?: string | null
+  icon?: Component
+  surface?: InteractiveSurfaceContract
+  indentLevel?: number
+  selected?: boolean
+  tone?: InteractiveSurfaceTone
+  density?: InteractiveSurfaceDensity
+  surfacePadding?: InteractiveSurfacePadding
+  surfaceRadius?: InteractiveSurfaceRadius
+  actionLabel?: string
+  actionIcon?: Component
+  actionSeverity?: ButtonProps['severity']
+  actionDisabled?: boolean
+  statusLabel?: string | null
+  statusSeverity?: BadgeSeverity
+  badges?: readonly ActionListItemBadge[]
+  trailingIcon?: Component
+  trailingLayout?: 'responsive' | 'inline' | 'stacked'
+  heightMode?: 'content' | 'fill'
+  titlePresentation?: 'text' | 'code'
+  titleWeight?: 'regular' | 'semibold'
+  detailPresentation?: 'text' | 'code'
+  detailOverflow?: 'clamp-2' | 'wrap'
+}>(), {
+  description: undefined,
+  titleTooltip: undefined,
+  detail: undefined,
+  icon: undefined,
+  surface: undefined,
+  indentLevel: 0,
+  selected: false,
+  tone: 'default',
+  density: 'comfortable',
+  surfacePadding: 'none',
+  surfaceRadius: 'md',
+  actionLabel: undefined,
+  actionIcon: undefined,
+  actionSeverity: 'secondary',
+  actionDisabled: false,
+  statusLabel: undefined,
+  statusSeverity: 'secondary',
+  badges: () => [],
+  trailingIcon: undefined,
+  trailingLayout: 'responsive',
+  heightMode: 'content',
+  titlePresentation: 'text',
+  titleWeight: 'semibold',
+  detailPresentation: 'text',
+  detailOverflow: 'clamp-2',
+})
+
+const emit = defineEmits<{
+  activate: [event: MouseEvent]
+  action: [event: MouseEvent]
+}>()
+
+const slots = defineSlots<{
+  title?: () => VNodeChild
+  description?: () => VNodeChild
+  detail?: () => VNodeChild
+  status?: () => VNodeChild
+  actions?: (props: ActionListItemActionsSlotProps) => VNodeChild
+}>()
+
+const validatedIndentLevel = computed(() => validateBoundedInteger(
+  'SActionListItem',
+  'indentLevel',
+  props.indentLevel,
+  { minimum: 0, maximum: 8 },
+))
+const itemStyle = computed(() => ({
+  '--s-action-list-item-indent': `${validatedIndentLevel.value * 0.875}rem`,
+}))
+const ownedAttrs = useOwnedAttrs({ component: 'SActionListItem', owner: 'action list item root' })
+const rootBindings = computed(() => ownedAttrs.bindings())
+const semanticRole = computed(() => {
+  const declaredRole = rootBindings.value.role
+  return typeof declaredRole === 'string' ? declaredRole : 'listitem'
+})
+
+const validatedBadges = computed<readonly ActionListItemBadge[]>(() => {
+  if (!Array.isArray(props.badges)) {
+    throw new TypeError(
+      'SActionListItem: badges должен быть массивом. '
+      + '/ SActionListItem: badges must be an array.',
+    )
+  }
+
+  const identities = new Set<string>()
+  for (const [index, badge] of props.badges.entries()) {
+    const candidate: unknown = badge
+    const badgeId = validateNonEmptyString(
+      'SActionListItem',
+      `badges[${index}].id`,
+      typeof candidate === 'object' && candidate !== null && !Array.isArray(candidate)
+        ? (candidate as Record<string, unknown>).id
+        : undefined,
+    )
+    if (identities.has(badgeId)) {
+      throw new TypeError(
+        `SActionListItem: badges должен содержать уникальные id; дублируется ${JSON.stringify(badgeId)}. `
+        + `/ SActionListItem: badges must contain unique ids; duplicate ${JSON.stringify(badgeId)}.`,
+      )
+    }
+    identities.add(badgeId)
+  }
+  return props.badges
+})
+
+const hasTrailing = computed(() => Boolean(
+  props.actionLabel
+  || props.statusLabel
+  || validatedBadges.value.length > 0
+  || props.trailingIcon
+  || slots.status
+  || slots.actions,
+))
+
+const resolvedSurface = computed<InteractiveSurfaceContract>(() => props.surface ?? {
+  mode: 'action',
+  accessibleLabel: props.title,
+})
+const resolvedMode = computed(() => resolvedSurface.value.mode)
+const surfaceDisabled = computed(() => resolvedSurface.value.mode === 'static'
+  ? false
+  : resolvedSurface.value.disabled ?? false)
+
+function emitAction(event: MouseEvent): void {
+  emit('action', event)
+}
+</script>
+
+<template>
+  <div
+    v-bind="rootBindings"
+    class="s-action-list-item"
+    :data-selected="selected"
+    :data-tone="tone"
+    :data-density="density"
+    :data-interactive="resolvedMode !== 'static'"
+    :data-mode="resolvedMode"
+    :data-disabled="surfaceDisabled || undefined"
+    :data-trailing-layout="trailingLayout"
+    :data-height-mode="heightMode"
+    :data-title-presentation="titlePresentation"
+    :data-title-weight="titleWeight"
+    :data-detail-presentation="detailPresentation"
+    :data-detail-overflow="detailOverflow"
+    :style="itemStyle"
+    :role="semanticRole"
+  >
+    <SActionCard
+      :surface="resolvedSurface"
+      :selected="selected"
+      :tone="tone"
+      :density="density"
+      :padding="surfacePadding"
+      :radius="surfaceRadius"
+      :fill="heightMode === 'fill' ? 'container' : 'content'"
+      @activate="emit('activate', $event)"
+    >
+      <div class="s-action-list-item__main" :class="{ 's-action-list-item__main--static': resolvedMode === 'static' }">
+        <span v-if="icon" class="s-action-list-item__icon" aria-hidden="true">
+          <component :is="icon" />
+        </span>
+        <span class="s-action-list-item__copy">
+          <strong class="s-action-list-item__title" :title="titleTooltip">
+            <slot name="title">{{ title }}</slot>
+          </strong>
+          <span v-if="description || $slots.description" class="s-action-list-item__description">
+            <slot name="description">{{ description }}</slot>
+          </span>
+          <span v-if="detail || $slots.detail" class="s-action-list-item__detail">
+            <slot name="detail">{{ detail }}</slot>
+          </span>
+        </span>
+      </div>
+    </SActionCard>
+    <div v-if="hasTrailing" class="s-action-list-item__trailing">
+      <slot name="status" />
+      <SBadge v-if="statusLabel" :severity="statusSeverity">{{ statusLabel }}</SBadge>
+      <SBadge v-for="badge in validatedBadges" :key="badge.id" :severity="badge.severity">
+        {{ badge.label }}
+      </SBadge>
+      <SButton
+        v-if="actionLabel"
+        size="sm"
+        :label="actionLabel"
+        :leading-icon="actionIcon"
+        :severity="actionSeverity"
+        :disabled="surfaceDisabled || actionDisabled"
+        @click="emitAction"
+      />
+      <slot name="actions" :disabled="surfaceDisabled || actionDisabled" :emit-action="emitAction" />
+      <component :is="trailingIcon" v-if="trailingIcon" class="s-action-list-item__trailing-icon" aria-hidden="true" />
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" src="./SActionListItem.css" scoped></style>

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

@@ -0,0 +1,73 @@
+@reference "../../../styles/reference.css";
+
+.s-badge {
+  @apply inline-flex items-center gap-1 rounded-full font-semibold;
+}
+
+.s-badge[data-size='md'] {
+  @apply px-2.5 py-0.5 text-xs;
+}
+
+.s-badge[data-size='sm'] {
+  @apply px-2 py-0.5 text-[11px] leading-4;
+}
+
+.s-badge[data-size='xs'] {
+  @apply px-1.5 py-0 text-[10px] leading-4;
+}
+
+.s-badge__icon {
+  @apply inline-flex h-3 w-3 shrink-0 items-center justify-center;
+}
+
+.s-badge__icon-graphic {
+  @apply h-full w-full;
+}
+
+.s-badge[data-icon-motion='spin'] .s-badge__icon-graphic {
+  @apply animate-spin;
+}
+
+.s-badge__label {
+  @apply min-w-0;
+}
+
+.s-badge[data-max-width='sm'] {
+  max-width: 9.5rem;
+}
+
+.s-badge[data-max-width='md'] {
+  max-width: 14rem;
+}
+
+.s-badge[data-truncate='true'] .s-badge__label {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+/* Severity Colors */
+.s-badge[data-severity='primary'] {
+  @apply bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-50;
+}
+.s-badge[data-severity='secondary'] {
+  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-50;
+}
+.s-badge[data-severity='success'] {
+  @apply bg-success-100 text-success-800 dark:bg-success-950 dark:text-success-50;
+}
+.s-badge[data-severity='info'] {
+  @apply bg-info-100 text-info-800 dark:bg-info-950 dark:text-info-50;
+}
+.s-badge[data-severity='warn'] {
+  @apply bg-warn-100 text-warn-800 dark:bg-warn-950 dark:text-warn-50;
+}
+.s-badge[data-severity='danger'] {
+  @apply bg-danger-100 text-danger-800 dark:bg-danger-950 dark:text-danger-50;
+}
+.s-badge[data-severity='contrast'] {
+  @apply bg-surface-800 text-surface-100 dark:bg-surface-200 dark:text-surface-800;
+}
+
+/* Dot Mode */
+.s-badge.s-badge--dot {
+  @apply w-2.5 h-2.5 p-0;
+}

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

@@ -0,0 +1,52 @@
+<template>
+  <span
+    v-bind="ownedAttrs.bindings()"
+    class="s-badge"
+    :class="{ 's-badge--dot': dot }"
+    :data-severity="severity"
+    :data-size="size"
+    :data-max-width="maxWidth"
+    :data-truncate="truncate || undefined"
+    :data-icon-motion="iconMotion"
+  >
+    <template v-if="!dot">
+      <span v-if="leadingIcon" class="s-badge__icon" aria-hidden="true">
+        <component :is="leadingIcon" class="s-badge__icon-graphic" />
+      </span>
+      <span class="s-badge__label"><slot /></span>
+    </template>
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+
+defineOptions({ inheritAttrs: false });
+
+export type BadgeSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast';
+
+export interface Props {
+  severity?: BadgeSeverity;
+  dot?: boolean;
+  size?: 'xs' | 'sm' | 'md';
+  leadingIcon?: Component;
+  iconMotion?: 'static' | 'spin';
+  truncate?: boolean;
+  maxWidth?: 'none' | 'sm' | 'md';
+}
+
+withDefaults(defineProps<Props>(), {
+  severity: 'secondary',
+  dot: false,
+  size: 'md',
+  leadingIcon: undefined,
+  iconMotion: 'static',
+  truncate: false,
+  maxWidth: 'none',
+});
+
+const ownedAttrs = useOwnedAttrs({ component: 'SBadge', owner: 'badge root' });
+</script>
+
+<style lang="postcss" src="./SBadge.css" scoped></style>

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

@@ -0,0 +1,56 @@
+@reference "../../../styles/reference.css";
+
+.s-code-block {
+  @apply relative rounded-md border border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-800/50;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  contain: layout paint;
+  content-visibility: auto;
+  contain-intrinsic-size: 100px;
+}
+
+.s-code-block--viewport {
+  display: flex;
+  flex-direction: column;
+}
+
+.s-code-block--interactive {
+  contain: none;
+  content-visibility: visible;
+  contain-intrinsic-size: auto;
+}
+
+.s-code-block--radius-none {
+  @apply rounded-none;
+}
+
+.s-code-block--radius-xl {
+  @apply rounded-2xl;
+}
+
+.s-code-block-header {
+  @apply flex items-center justify-between border-b border-surface-200 px-3 py-1.5 dark:border-surface-700;
+  flex: 0 0 auto;
+}
+
+.s-code-block-editor-region {
+  @apply flex min-h-0 min-w-0;
+}
+
+.s-code-block--viewport .s-code-block-editor-region {
+  flex: 1 1 auto;
+}
+
+.s-code-block-info {
+  @apply flex items-center gap-2 text-xs text-surface-500 dark:text-surface-400;
+}
+
+.s-code-block-filename {
+  @apply font-semibold;
+}
+
+.s-code-block-language {
+  @apply font-mono;
+}

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

@@ -0,0 +1,188 @@
+<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': !validatedReadOnly,
+      's-code-block--viewport': validatedViewport !== 'content',
+    }"
+  >
+    <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="Копировать код"
+          aria-label="Копировать код"
+          label=""
+          @click="copyCode"
+        />
+      </div>
+    </div>
+    <div class="s-code-block-editor-region">
+      <SCodeEditor
+        ref="codeEditor"
+        :model-value="props.code"
+        :language="validatedLanguage"
+        :capabilities="editorCapabilities"
+        :read-only="validatedReadOnly"
+        :viewport="validatedViewport"
+        :aria-label="props.ariaLabel"
+        :aria-labelledby="props.ariaLabelledby"
+        :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"
+      />
+    </div>
+    <SAsyncState
+      v-if="validatedErrorMessage !== undefined || !isReady"
+      :state="validatedErrorMessage === undefined
+        ? { status: 'loading', message: 'Загрузка кода...' }
+        : { status: 'error', message: validatedErrorMessage }"
+      presentation="overlay"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { validateBoolean, validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract';
+import { validateCodeEditorLanguage, validateCodeEditorViewport } from '../../../internal/codeEditorContract';
+import { resolveCodeLanguageKey } from '../codeLanguages';
+import { useNotifier } from '../../../composables/useNotifier';
+import { useClipboard } from '../../../composables/useClipboard';
+import SButton from '../controls/SButton.vue';
+import SCodeEditor, {
+  type SCodeEditorCapabilities,
+  type SCodeEditorCursorActivity,
+  type SCodeEditorLanguage,
+  type SCodeEditorReadyPayload,
+  type SCodeEditorSelectionAppliedPayload,
+  type SCodeEditorViewport,
+} from './SCodeEditor.vue';
+import { Copy } from '../../icons/sputnigUiIcons';
+import SAsyncState from '../feedback/SAsyncState.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;
+  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>(), {
+  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 SCodeEditor> | null>(null);
+const ownedAttrs = useOwnedAttrs({ component: 'SCodeBlock', owner: 'code block root' });
+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 validatedReadOnly = computed(() => validateBoolean('SCodeBlock', 'readOnly', props.readOnly));
+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 resolvedLanguageId = computed(() => resolveCodeLanguageKey(validatedLanguage.value));
+const validatedErrorMessage = computed(() => props.errorMessage === undefined
+  ? undefined
+  : validateNonEmptyString('SCodeBlock', 'errorMessage', props.errorMessage));
+const editorCapabilities = computed<SCodeEditorCapabilities>(() => ({
+  lineNumbers: props.showLineNumbers,
+  indentation: { tabSize: props.tabSize, 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);
+};
+
+const applySelection = (position: number): void => {
+  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 => {
+  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 { copyText } = useClipboard();
+const copyCode = async () => {
+  const result = await copyText(props.code);
+  if (result.status === 'copied') {
+    notifier.success({ message: 'Код скопирован' });
+    return;
+  }
+  notifier.danger({
+    message: result.status === 'unavailable'
+      ? 'Копирование недоступно в этом браузере'
+      : result.status === 'empty'
+        ? 'Нет кода для копирования'
+        : `Ошибка копирования. ${result.error.message}`,
+  });
+};
+</script>
+
+<style lang="postcss" src="./SCodeBlock.css" scoped></style>