@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,277 @@
+<script lang="ts">
+/** Устойчивый доменный ключ строки definition list. / Stable domain key of a definition-list row. */
+export type SKeyValueGridKey = string | number
+
+/** Значение, которое компонент умеет представить без formatter. / Value the component can present without a formatter. */
+export type SKeyValueGridPrimitiveValue = string | number | boolean | null | undefined
+
+/** Typed presentation-модель одной definition-list строки. / Typed presentation model of one definition-list row. */
+export interface SKeyValueGridItem<Value = SKeyValueGridPrimitiveValue> {
+  label: string
+  value: Value
+  valueMonospace?: boolean
+}
+
+/**
+ * Generic API definition-list: identity задаёт обязательный resolver, форматирование не меняет raw value.
+ * Generic definition-list API: identity comes from the required resolver; formatting preserves the raw value.
+ */
+export interface SKeyValueGridProps<
+  Item extends SKeyValueGridItem = SKeyValueGridItem,
+  ItemKey extends SKeyValueGridKey = SKeyValueGridKey,
+> {
+  items: readonly Item[]
+  getItemKey: (item: Item) => ItemKey
+  formatValue?: (value: Item['value'], item: Item) => string
+  emptyValueLabel?: string
+  variant?: 'cards' | 'inline' | 'plain'
+  columns?: 1 | 2 | 3
+  density?: 'comfortable' | 'compact'
+  valueAlign?: 'start' | 'end'
+  labelWidth?: 'narrow' | 'balanced' | 'wide'
+}
+</script>
+
+<script setup lang="ts" generic="Item extends SKeyValueGridItem, ItemKey extends SKeyValueGridKey">
+import { computed } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  validateBoolean,
+  validateBoundedInteger,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<SKeyValueGridProps<Item, ItemKey>>(), {
+  formatValue: undefined,
+  emptyValueLabel: '—',
+  variant: 'cards',
+  columns: 3,
+  density: 'comfortable',
+  valueAlign: 'start',
+  labelWidth: 'narrow',
+})
+
+defineSlots<{
+  label?(props: { item: Item; itemKey: ItemKey; index: number }): unknown
+  value?(props: {
+    item: Item
+    itemKey: ItemKey
+    index: number
+    value: Item['value']
+    formattedValue: SKeyValueGridPrimitiveValue
+  }): unknown
+}>()
+
+const VARIANTS = ['cards', 'inline', 'plain'] as const
+const DENSITIES = ['comfortable', 'compact'] as const
+const VALUE_ALIGNMENTS = ['start', 'end'] as const
+const LABEL_WIDTHS = ['narrow', 'balanced', 'wide'] as const
+
+interface ResolvedItem {
+  item: Item
+  itemKey: ItemKey
+  index: number
+  label: string
+  formattedValue: SKeyValueGridPrimitiveValue
+  valueMonospace: boolean
+}
+
+const ownedAttrs = useOwnedAttrs({ component: 'SKeyValueGrid', owner: 'key-value definition list' })
+const validatedVariant = computed(() => validateExactString(
+  'SKeyValueGrid',
+  'variant',
+  props.variant,
+  VARIANTS,
+))
+const validatedColumns = computed(() => validateBoundedInteger(
+  'SKeyValueGrid',
+  'columns',
+  props.columns,
+  { minimum: 1, maximum: 3 },
+))
+const validatedDensity = computed(() => validateExactString(
+  'SKeyValueGrid',
+  'density',
+  props.density,
+  DENSITIES,
+))
+const validatedValueAlign = computed(() => validateExactString(
+  'SKeyValueGrid',
+  'valueAlign',
+  props.valueAlign,
+  VALUE_ALIGNMENTS,
+))
+const validatedLabelWidth = computed(() => validateExactString(
+  'SKeyValueGrid',
+  'labelWidth',
+  props.labelWidth,
+  LABEL_WIDTHS,
+))
+
+function describeKey(key: SKeyValueGridKey): string {
+  return typeof key === 'string' ? JSON.stringify(key) : String(key)
+}
+
+function validateItemKey(candidate: unknown, coordinate: string): asserts candidate is ItemKey {
+  if (typeof candidate === 'string') {
+    if (candidate.trim().length > 0) return
+    throw new TypeError(
+      `SKeyValueGrid: getItemKey вернул пустую строку для ${coordinate}. `
+      + `/ SKeyValueGrid: getItemKey returned an empty string for ${coordinate}.`,
+    )
+  }
+  if (typeof candidate === 'number') {
+    if (Number.isFinite(candidate)) return
+    throw new TypeError(
+      `SKeyValueGrid: getItemKey вернул неконечное число для ${coordinate}. `
+      + `/ SKeyValueGrid: getItemKey returned a non-finite number for ${coordinate}.`,
+    )
+  }
+  throw new TypeError(
+    `SKeyValueGrid: getItemKey вернул неподдерживаемый key ${typeof candidate} для ${coordinate}. `
+    + `/ SKeyValueGrid: getItemKey returned unsupported ${typeof candidate} key for ${coordinate}.`,
+  )
+}
+
+function validateUnformattedValue(
+  value: unknown,
+  coordinate: string,
+): asserts value is SKeyValueGridPrimitiveValue {
+  if (
+    value === null
+    || value === undefined
+    || typeof value === 'string'
+    || typeof value === 'boolean'
+    || (typeof value === 'number' && Number.isFinite(value))
+  ) return
+
+  throw new TypeError(
+    `SKeyValueGrid: ${coordinate} должен быть string | finite number | boolean | null | undefined `
+    + `или иметь formatValue. / SKeyValueGrid: ${coordinate} must be string | finite number | boolean `
+    + '| null | undefined or provide formatValue.',
+  )
+}
+
+function resolveFormattedValue(item: Item, index: number): SKeyValueGridPrimitiveValue {
+  const coordinate = `items[${index}]`
+  if (props.formatValue !== undefined) {
+    if (typeof props.formatValue !== 'function') {
+      throw new TypeError(
+        'SKeyValueGrid: formatValue должен быть function. '
+        + '/ SKeyValueGrid: formatValue must be a function.',
+      )
+    }
+    const result: unknown = props.formatValue(item.value, item)
+    if (typeof result !== 'string') {
+      throw new TypeError(
+        `SKeyValueGrid: formatValue должен вернуть string для ${coordinate}. `
+        + `/ SKeyValueGrid: formatValue must return a string for ${coordinate}.`,
+      )
+    }
+    return result
+  }
+
+  validateUnformattedValue(item.value, `${coordinate}.value`)
+  return item.value ?? validateNonEmptyString('SKeyValueGrid', 'emptyValueLabel', props.emptyValueLabel)
+}
+
+const resolvedItems = computed<readonly ResolvedItem[]>(() => {
+  if (!Array.isArray(props.items)) {
+    throw new TypeError(
+      'SKeyValueGrid: items должен быть readonly array. '
+      + '/ SKeyValueGrid: items must be a readonly array.',
+    )
+  }
+  if (typeof props.getItemKey !== 'function') {
+    throw new TypeError(
+      'SKeyValueGrid: getItemKey должен быть обязательным function resolver. '
+      + '/ SKeyValueGrid: getItemKey must be a required function resolver.',
+    )
+  }
+
+  const coordinatesByKey = new Map<SKeyValueGridKey, string>()
+  return props.items.map((candidate, index) => {
+    const coordinate = `items[${index}]`
+    if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
+      throw new TypeError(
+        `SKeyValueGrid: ${coordinate} должен быть object. `
+        + `/ SKeyValueGrid: ${coordinate} must be an object.`,
+      )
+    }
+    const item = candidate as Item
+    const label = validateNonEmptyString('SKeyValueGrid', `${coordinate}.label`, item.label)
+    const rawKey: unknown = props.getItemKey(item)
+    validateItemKey(rawKey, coordinate)
+    const previousCoordinate = coordinatesByKey.get(rawKey)
+    if (previousCoordinate !== undefined) {
+      throw new TypeError(
+        `SKeyValueGrid: getItemKey вернул duplicate key ${describeKey(rawKey)} для ${coordinate}; `
+        + `впервые объявлен в ${previousCoordinate}. / SKeyValueGrid: getItemKey returned duplicate key `
+        + `${describeKey(rawKey)} for ${coordinate}; first declared at ${previousCoordinate}.`,
+      )
+    }
+    coordinatesByKey.set(rawKey, coordinate)
+
+    const valueMonospace = item.valueMonospace === undefined
+      ? false
+      : validateBoolean('SKeyValueGrid', `${coordinate}.valueMonospace`, item.valueMonospace)
+    return {
+      item,
+      itemKey: rawKey,
+      index,
+      label,
+      formattedValue: resolveFormattedValue(item, index),
+      valueMonospace,
+    }
+  })
+})
+</script>
+
+<template>
+  <dl
+    v-bind="ownedAttrs.bindings()"
+    class="s-key-value-grid"
+    :data-variant="validatedVariant"
+    :data-columns="validatedColumns"
+    :data-density="validatedDensity"
+    :data-value-align="validatedValueAlign"
+    :data-label-width="validatedLabelWidth"
+  >
+    <div
+      v-for="entry in resolvedItems"
+      :key="entry.itemKey"
+      class="s-key-value-grid__item"
+    >
+      <dt class="s-key-value-grid__label">
+        <slot
+          name="label"
+          :item="entry.item"
+          :item-key="entry.itemKey"
+          :index="entry.index"
+        >
+          {{ entry.label }}
+        </slot>
+      </dt>
+      <dd
+        class="s-key-value-grid__value"
+        :data-monospace="entry.valueMonospace ? 'true' : undefined"
+      >
+        <slot
+          name="value"
+          :item="entry.item"
+          :item-key="entry.itemKey"
+          :index="entry.index"
+          :value="entry.item.value"
+          :formatted-value="entry.formattedValue"
+        >
+          {{ entry.formattedValue }}
+        </slot>
+      </dd>
+    </div>
+  </dl>
+</template>
+
+<style lang="postcss" src="./SKeyValueGrid.css" scoped></style>

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

@@ -0,0 +1,270 @@
+<template>
+  <div
+    v-if="validatedPresentation === 'chips'"
+    v-bind="ownedAttrs.bindings()"
+    class="s-linked-systems-list"
+    data-presentation="chips"
+    role="list"
+    :aria-label="validatedAccessibleLabel"
+  >
+    <span
+      v-for="item in validatedItems"
+      :key="item.id"
+      class="s-linked-systems-list__chip"
+      role="listitem"
+      :title="`${item.providerName}: ${item.externalId}`"
+    >
+      <SStatus
+        :label="item.syncStatus.label"
+        :tone="item.syncStatus.tone"
+        :title="item.syncStatus.title"
+        :icon="item.syncStatus.icon"
+        label-visibility="sr-only"
+        size="xs"
+      />
+      <SLink
+        v-if="item.externalUrl"
+        :href="item.externalUrl"
+        target="_blank"
+        external
+        variant="subtle"
+        underline="hover"
+        wrap="anywhere"
+        content-kind="identifier"
+      >
+        {{ item.externalId }}
+      </SLink>
+      <span v-else class="s-linked-systems-list__external-id">{{ item.externalId }}</span>
+    </span>
+  </div>
+  <SActionList v-else v-bind="ownedAttrs.bindings()" :accessible-label="validatedAccessibleLabel">
+    <SActionListItem
+      v-for="item in validatedItems"
+      :key="item.id"
+      :title="item.providerName"
+      :surface="{ mode: 'static' }"
+      :action-disabled="validatedActionsDisabled"
+      trailing-layout="responsive"
+    >
+      <template #description>
+        <SLink
+          v-if="item.externalUrl"
+          :href="item.externalUrl"
+          target="_blank"
+          external
+          variant="subtle"
+        >
+          {{ item.externalId }}
+        </SLink>
+        <span v-else>
+          {{ item.externalId }}
+        </span>
+      </template>
+      <template #status>
+        <SStatus
+          :label="item.syncStatus.label"
+          :tone="item.syncStatus.tone"
+          :title="item.syncStatus.title"
+          :icon="item.syncStatus.icon"
+          size="sm"
+        />
+      </template>
+      <template v-if="$slots.actions" #actions="{ disabled }">
+        <slot name="actions" :item="item" :disabled="disabled" />
+      </template>
+    </SActionListItem>
+  </SActionList>
+</template>
+
+<script lang="ts">
+import type { Component, VNodeChild } from 'vue'
+import type { StatusTone } from './SStatus.vue'
+
+export type LinkedSystemPresentation = 'list' | 'chips'
+
+export interface LinkedSystemSyncStatus {
+  readonly label: string
+  readonly tone: StatusTone
+  readonly title?: string
+  readonly icon?: Component | null
+}
+
+export interface LinkedSystemListItem {
+  readonly id: string
+  readonly providerName: string
+  readonly externalId: string
+  readonly externalUrl: string | null
+  readonly syncStatus: LinkedSystemSyncStatus
+}
+
+export interface Props<T extends LinkedSystemListItem = LinkedSystemListItem> {
+  readonly items: readonly T[]
+  readonly accessibleLabel?: string
+  /** List подходит для inspector, chips — для компактных строк сущностей. / List suits inspectors; chips suit compact entity rows. */
+  readonly presentation?: LinkedSystemPresentation
+  /** Единое disabled-состояние для слота действий. / Shared disabled state for the actions slot. */
+  readonly actionsDisabled?: boolean
+}
+
+export interface Slots<T extends LinkedSystemListItem = LinkedSystemListItem> {
+  actions?: (props: { readonly item: T, readonly disabled: boolean }) => VNodeChild
+}
+</script>
+
+<script setup lang="ts" generic="T extends LinkedSystemListItem = LinkedSystemListItem">
+import { computed, watchEffect } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  validateBoolean,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+import SLink from '../controls/SLink.vue'
+import SActionList from './SActionList.vue'
+import SActionListItem from './SActionListItem.vue'
+import SStatus from './SStatus.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<Props<T>>(), {
+  accessibleLabel: 'Связанные системы',
+  presentation: 'list',
+  actionsDisabled: false,
+})
+
+const slots = defineSlots<Slots<T>>()
+const ownedAttrs = useOwnedAttrs({ component: 'SLinkedSystemsList', owner: 'active linked-systems list root' })
+const validatedAccessibleLabel = computed(() => validateNonEmptyString(
+  'SLinkedSystemsList',
+  'accessibleLabel',
+  props.accessibleLabel,
+))
+const validatedPresentation = computed(() => validateExactString(
+  'SLinkedSystemsList',
+  'presentation',
+  props.presentation,
+  ['list', 'chips'] as const,
+))
+const validatedActionsDisabled = computed(() => validateBoolean(
+  'SLinkedSystemsList',
+  'actionsDisabled',
+  props.actionsDisabled,
+))
+
+function requireRecord(value: unknown, coordinate: string): Record<string, unknown> {
+  if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+    return value as Record<string, unknown>
+  }
+  throw new TypeError(
+    `SLinkedSystemsList: ${coordinate} должен быть объектом. `
+    + `/ SLinkedSystemsList: ${coordinate} must be an object.`,
+  )
+}
+
+function validateExternalUrl(value: unknown, index: number): void {
+  const coordinate = `items[${index}].externalUrl`
+  if (value === null) return
+  const externalUrl = validateNonEmptyString('SLinkedSystemsList', coordinate, value)
+  let parsedUrl: URL
+  try {
+    parsedUrl = new URL(externalUrl)
+  } catch (error: unknown) {
+    throw new TypeError(
+      `SLinkedSystemsList: ${coordinate} должен быть абсолютным HTTP(S) URL или null; получено ${JSON.stringify(externalUrl)}. `
+      + `/ SLinkedSystemsList: ${coordinate} must be an absolute HTTP(S) URL or null; received ${JSON.stringify(externalUrl)}.`,
+      { cause: error },
+    )
+  }
+  if (
+    (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:')
+    && parsedUrl.hostname.length > 0
+    && externalUrl.trim() === externalUrl
+  ) return
+  throw new TypeError(
+    `SLinkedSystemsList: ${coordinate} должен быть абсолютным HTTP(S) URL без окружающих пробелов или null; получено ${JSON.stringify(externalUrl)}. `
+    + `/ SLinkedSystemsList: ${coordinate} must be an absolute HTTP(S) URL without surrounding whitespace or null; received ${JSON.stringify(externalUrl)}.`,
+  )
+}
+
+function validateSyncStatus(value: unknown, index: number): void {
+  const coordinate = `items[${index}].syncStatus`
+  const status = requireRecord(value, coordinate)
+  validateNonEmptyString('SLinkedSystemsList', `${coordinate}.label`, status.label)
+  validateExactString(
+    'SLinkedSystemsList',
+    `${coordinate}.tone`,
+    status.tone,
+    ['neutral', 'info', 'success', 'warn', 'danger'] as const,
+  )
+  if (status.title !== undefined) {
+    validateNonEmptyString('SLinkedSystemsList', `${coordinate}.title`, status.title)
+  }
+  if (
+    status.icon !== undefined
+    && status.icon !== null
+    && (
+      Array.isArray(status.icon)
+      || (typeof status.icon !== 'object' && typeof status.icon !== 'function')
+    )
+  ) {
+    throw new TypeError(
+      `SLinkedSystemsList: ${coordinate}.icon должен быть Vue Component, null или undefined. `
+      + `/ SLinkedSystemsList: ${coordinate}.icon must be a Vue Component, null, or undefined.`,
+    )
+  }
+}
+
+const validatedItems = computed<readonly T[]>(() => {
+  const candidate: unknown = props.items
+  if (!Array.isArray(candidate)) {
+    throw new TypeError(
+      'SLinkedSystemsList: items должен быть readonly-массивом linked-system объектов. '
+      + '/ SLinkedSystemsList: items must be a readonly array of linked-system objects.',
+    )
+  }
+  const identities = new Set<string>()
+  for (const [index, item] of candidate.entries()) {
+    const record = requireRecord(item, `items[${index}]`)
+    const identity = validateNonEmptyString('SLinkedSystemsList', `items[${index}].id`, record.id)
+    if (identities.has(identity)) {
+      throw new TypeError(
+        `SLinkedSystemsList: items должен содержать уникальные stable id; дублируется ${JSON.stringify(identity)}. `
+        + `/ SLinkedSystemsList: items must contain unique stable ids; duplicate ${JSON.stringify(identity)}.`,
+      )
+    }
+    identities.add(identity)
+    validateNonEmptyString('SLinkedSystemsList', `items[${index}].providerName`, record.providerName)
+    validateNonEmptyString('SLinkedSystemsList', `items[${index}].externalId`, record.externalId)
+    validateExternalUrl(record.externalUrl, index)
+    validateSyncStatus(record.syncStatus, index)
+  }
+  return props.items
+})
+
+watchEffect(() => {
+  void validatedItems.value
+  void validatedAccessibleLabel.value
+  void validatedActionsDisabled.value
+  if (validatedPresentation.value === 'chips' && slots.actions) {
+    throw new Error('SLinkedSystemsList: presentation="chips" не принимает actions slot. / Chips presentation does not accept the actions slot.')
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+@reference "../../../styles/reference.css";
+
+.s-linked-systems-list[data-presentation='chips'] {
+  @apply flex min-w-0 flex-wrap items-center gap-1.5;
+}
+
+.s-linked-systems-list__chip {
+  @apply inline-flex min-w-0 items-center gap-1.5 rounded-full border border-surface-200 bg-surface-100 px-1.5 py-0.5 text-xs dark:border-surface-700 dark:bg-surface-700/50;
+}
+
+.s-linked-systems-list__external-id {
+  @apply min-w-0 font-mono;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+</style>

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

@@ -0,0 +1,88 @@
+@reference "../../../styles/reference.css";
+
+.s-message {
+  @apply flex min-w-0 items-start p-4 rounded-lg border;
+}
+
+.s-message[data-size='sm'] {
+  @apply p-2;
+}
+
+.s-message-icon {
+  @apply shrink-0 mr-3;
+}
+
+.s-message[data-size='sm'] .s-message-icon {
+  @apply mr-2;
+}
+
+.s-message-icon-graphic {
+  width: var(--s-icon-size-sm);
+  height: var(--s-icon-size-sm);
+}
+
+.s-message[data-size='sm'] .s-message-icon-graphic {
+  width: var(--s-icon-size-xs);
+  height: var(--s-icon-size-xs);
+}
+
+.s-message-content {
+  @apply min-w-0 flex-grow text-sm;
+}
+
+.s-message[data-size='sm'] .s-message-content {
+  @apply text-xs;
+}
+
+.s-message-title {
+  @apply block font-bold mb-1;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.s-message-body {
+  @apply min-w-0 opacity-90;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.s-message-close {
+  @apply shrink-0 ml-auto -my-1 -mr-1;
+}
+
+/* Severity: info */
+.s-message[data-severity='info'] {
+  @apply bg-info-50 border-info-200 text-info-800;
+  @apply dark:bg-info-950 dark:border-info-800 dark:text-info-200;
+}
+.s-message[data-severity='info'] .s-message-icon {
+  @apply text-info-500 dark:text-info-400;
+}
+
+/* Severity: success */
+.s-message[data-severity='success'] {
+  @apply bg-success-50 border-success-200 text-success-800;
+  @apply dark:bg-success-950 dark:border-success-800 dark:text-success-200;
+}
+.s-message[data-severity='success'] .s-message-icon {
+  @apply text-success-500 dark:text-success-400;
+}
+
+/* Severity: warn */
+.s-message[data-severity='warn'] {
+  @apply bg-warn-50 border-warn-200 text-warn-800;
+  @apply dark:bg-warn-950 dark:border-warn-800 dark:text-warn-200;
+}
+.s-message[data-severity='warn'] .s-message-icon {
+  @apply text-warn-500 dark:text-warn-400;
+}
+
+/* Severity: danger */
+.s-message[data-severity='danger'] {
+  @apply bg-danger-50 border-danger-200 text-danger-800;
+  @apply dark:bg-danger-950 dark:border-danger-800 dark:text-danger-200;
+}
+.s-message[data-severity='danger'] .s-message-icon {
+  @apply text-danger-500 dark:text-danger-400;
+}