@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,339 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-table-wrapper"
+    :data-surface="validatedSurface"
+    :data-min-width="validatedMinWidth"
+    :data-max-height="validatedMaxHeight"
+  >
+    <table
+      class="s-table"
+      :data-density="validatedDensity"
+      :aria-label="resolvedAccessibleName.ariaLabel"
+      :aria-labelledby="resolvedAccessibleName.ariaLabelledby"
+      :aria-describedby="validatedAriaDescribedby"
+      :aria-busy="validatedLoading ? 'true' : undefined"
+    >
+      <thead class="s-table-header">
+        <tr>
+          <th
+            v-for="column in validatedColumns"
+            :key="column.field"
+            scope="col"
+            :data-width="column.width"
+            :data-min-width="column.minWidth"
+            :data-align="column.align ?? 'left'"
+          >
+            <slot name="column" :column="column">
+              <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
+            </slot>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="s-table-body">
+        <SAsyncState
+          v-if="validatedLoading || errorMessage || validatedRows.length === 0"
+          :state="validatedLoading
+            ? { status: 'loading', message: loadingMessage }
+            : errorMessage
+              ? { status: 'error', message: errorMessage }
+              : { status: 'empty', message: emptyMessage }"
+          presentation="table-row"
+          :colspan="validatedColumns.length || 1"
+        />
+        <template v-else>
+          <tr
+            v-for="(row, rowIndex) in validatedRows"
+            :key="resolvedRowKeys.get(row)"
+            :data-state="resolveRowState(row)"
+            :aria-selected="resolvedRowKeys.get(row) === validatedSelectedRowKey ? 'true' : undefined"
+          >
+            <td
+              v-for="column in validatedColumns"
+              :key="column.field"
+              :data-align="column.align ?? 'left'"
+              :data-state="resolveCellState(row, column)"
+            >
+              <slot
+                :name="`cell-${column.field}`"
+                :value="resolveCellValue(row, column)"
+                :row="row"
+                :column="column"
+                :row-index="rowIndex"
+              >
+                <slot
+                  name="cell"
+                  :value="resolveCellValue(row, column)"
+                  :row="row"
+                  :column="column"
+                  :row-index="rowIndex"
+                >
+                  {{ resolveCellValue(row, column) }}
+                </slot>
+              </slot>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+export type {
+  STableAlignment,
+  STableCellState,
+  STableColumn,
+  STableColumnContent,
+  STableDensity,
+  STableMinWidth,
+  STableProps,
+  STableRowKey,
+  STableRowState,
+  STableSurface,
+} from './table'
+</script>
+
+<script setup lang="ts" generic="Row extends object = Record<string, unknown>, RowKey extends STableRowKey = STableRowKey, Field extends string = Extract<keyof Row, string>">
+import { computed, useSlots } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  validateScrollableViewportMaxBlockSize,
+  validateTableColumnInlineSize,
+  validateTableColumnMinInlineSize,
+} from '../../../internal/semanticSizing'
+import {
+  validateBoolean,
+  validateDomId,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+import SAsyncState from '../feedback/SAsyncState.vue'
+import type {
+  STableCellState,
+  STableColumn,
+  STableColumnContent,
+  STableProps,
+  STableRowKey,
+  STableRowState,
+} from './table'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
+  loading: false,
+  loadingMessage: 'Загрузка...',
+  errorMessage: '',
+  emptyMessage: 'Нет данных для отображения',
+  selectedRowKey: undefined,
+  maxHeight: 'none',
+  density: 'default',
+  surface: 'bordered',
+  minWidth: 'content',
+  rowState: undefined,
+  cellState: undefined,
+  ariaLabel: undefined,
+  ariaLabelledby: undefined,
+  ariaDescribedby: undefined,
+})
+const slots = useSlots()
+
+const TABLE_DENSITIES = ['default', 'compact'] as const
+const TABLE_SURFACES = ['bordered', 'plain'] as const
+const TABLE_MIN_WIDTHS = ['content', 'md', 'lg'] as const
+const TABLE_ALIGNMENTS = ['left', 'center', 'right'] as const
+const TABLE_ROW_STATES = ['default', 'inserted', 'updated', 'deleted'] as const
+const TABLE_CELL_STATES = ['default', 'pending'] as const
+const TABLE_COLUMN_CONTENT = ['field', 'value', 'slot'] as const
+
+const ownedAttrs = useOwnedAttrs({ component: 'STable', owner: 'table scroll surface' })
+const validatedLoading = computed(() => validateBoolean('STable', 'loading', props.loading))
+const resolvedAccessibleName = computed(() => {
+  if (props.ariaLabel !== undefined && props.ariaLabelledby !== undefined) {
+    throw new TypeError('STable: задайте только ariaLabel или ariaLabelledby. / STable: provide only ariaLabel or ariaLabelledby.')
+  }
+  if (props.ariaLabelledby !== undefined) {
+    return {
+      ariaLabel: undefined,
+      ariaLabelledby: validateDomId('STable', 'ariaLabelledby', props.ariaLabelledby),
+    }
+  }
+  return {
+    ariaLabel: props.ariaLabel === undefined
+      ? 'Таблица данных'
+      : validateNonEmptyString('STable', 'ariaLabel', props.ariaLabel),
+    ariaLabelledby: undefined,
+  }
+})
+const validatedAriaDescribedby = computed(() => props.ariaDescribedby === undefined
+  ? undefined
+  : validateDomId('STable', 'ariaDescribedby', props.ariaDescribedby))
+const validatedDensity = computed(() => validateExactString(
+  'STable',
+  'density',
+  props.density,
+  TABLE_DENSITIES,
+))
+const validatedSurface = computed(() => validateExactString(
+  'STable',
+  'surface',
+  props.surface,
+  TABLE_SURFACES,
+))
+const validatedMinWidth = computed(() => validateExactString(
+  'STable',
+  'minWidth',
+  props.minWidth,
+  TABLE_MIN_WIDTHS,
+))
+const validatedMaxHeight = computed(() => validateScrollableViewportMaxBlockSize(
+  'STable',
+  'maxHeight',
+  props.maxHeight,
+))
+
+const validatedColumns = computed<readonly STableColumn<Row, Field>[]>(() => {
+  const fields = new Set<string>()
+  for (const column of props.columns) {
+    const field = validateNonEmptyString('STable', 'columns[].field', column.field)
+    validateNonEmptyString('STable', `column ${JSON.stringify(field)}.header`, column.header)
+    if (fields.has(field)) {
+      throw new TypeError(
+        `STable: columns содержит duplicate field ${JSON.stringify(field)}. `
+        + `/ STable: columns contains duplicate field ${JSON.stringify(field)}.`,
+      )
+    }
+    fields.add(field)
+    if (column.align !== undefined) {
+      validateExactString('STable', `column ${JSON.stringify(field)}.align`, column.align, TABLE_ALIGNMENTS)
+    }
+    if (column.width !== undefined) {
+      validateTableColumnInlineSize('STable', `column ${JSON.stringify(field)}.width`, column.width)
+    }
+    if (column.minWidth !== undefined) {
+      validateTableColumnMinInlineSize('STable', `column ${JSON.stringify(field)}.minWidth`, column.minWidth)
+    }
+    const content: STableColumnContent = validateExactString(
+      'STable',
+      `column ${JSON.stringify(field)}.content`,
+      column.content ?? (column.value === undefined ? 'field' : 'value'),
+      TABLE_COLUMN_CONTENT,
+    )
+    if (content === 'value' && typeof column.value !== 'function') {
+      throw new TypeError(
+        `STable: value column ${JSON.stringify(field)} должен предоставить function value resolver. `
+        + `/ STable: value column ${JSON.stringify(field)} must provide a function value resolver.`,
+      )
+    }
+    if (content !== 'value' && column.value !== undefined) {
+      throw new TypeError(
+        `STable: ${content} column ${JSON.stringify(field)} не принимает value resolver. `
+        + `/ STable: ${content} column ${JSON.stringify(field)} does not accept a value resolver.`,
+      )
+    }
+    if (content === 'slot' && typeof slots[`cell-${field}`] !== 'function') {
+      throw new TypeError(
+        `STable: slot column ${JSON.stringify(field)} требует named slot ${JSON.stringify(`cell-${field}`)}. `
+        + `/ STable: slot column ${JSON.stringify(field)} requires named slot ${JSON.stringify(`cell-${field}`)}.`,
+      )
+    }
+  }
+  return props.columns
+})
+
+function describeRowKey(key: STableRowKey): string {
+  return typeof key === 'string' ? JSON.stringify(key) : String(key)
+}
+
+function validateRowKey(value: unknown): RowKey {
+  if (
+    (typeof value === 'string' && value.trim().length > 0)
+    || (typeof value === 'number' && Number.isFinite(value))
+  ) return value as RowKey
+
+  throw new TypeError(
+    `STable: getRowKey должен вернуть non-empty string | finite number. `
+    + '/ STable: getRowKey must return a non-empty string | finite number.',
+  )
+}
+
+const resolvedRowKeys = computed<ReadonlyMap<Row, RowKey>>(() => {
+  if (typeof props.getRowKey !== 'function') {
+    throw new TypeError(
+      'STable: getRowKey должен быть обязательным function resolver. '
+      + '/ STable: getRowKey must be a required function resolver.',
+    )
+  }
+
+  const keys = new Set<STableRowKey>()
+  const rowKeys = new Map<Row, RowKey>()
+  for (const row of props.data) {
+    const key = validateRowKey(props.getRowKey(row))
+    if (keys.has(key)) {
+      throw new TypeError(
+        `STable: getRowKey вернул duplicate key ${describeRowKey(key)}. `
+        + `/ STable: getRowKey returned duplicate key ${describeRowKey(key)}.`,
+      )
+    }
+    keys.add(key)
+    rowKeys.set(row, key)
+  }
+  return rowKeys
+})
+
+const validatedRows = computed<readonly Row[]>(() => {
+  const columns = validatedColumns.value
+  void resolvedRowKeys.value
+  void validatedSelectedRowKey.value
+  for (const row of props.data) {
+    for (const column of columns) {
+      const content = column.content ?? (column.value === undefined ? 'field' : 'value')
+      if (content === 'field' && !Object.hasOwn(row, column.field)) {
+        throw new TypeError(
+          `STable: column ${JSON.stringify(column.field)} не известен row; добавьте typed field или value resolver. `
+          + `/ STable: column ${JSON.stringify(column.field)} is unknown to row; add a typed field or value resolver.`,
+        )
+      }
+    }
+  }
+  return props.data
+})
+
+const validatedSelectedRowKey = computed<RowKey | undefined>(() => {
+  if (props.selectedRowKey === undefined) return undefined
+  const selectedKey = validateRowKey(props.selectedRowKey)
+  const rowKeys = new Set(resolvedRowKeys.value.values())
+  if (!rowKeys.has(selectedKey)) {
+    throw new TypeError(
+      `STable: selectedRowKey ${describeRowKey(selectedKey)} отсутствует в resolved row keys. `
+      + `/ STable: selectedRowKey ${describeRowKey(selectedKey)} is absent from resolved row keys.`,
+    )
+  }
+  return selectedKey
+})
+
+const resolveCellValue = (row: Row, column: STableColumn<Row, Field>): unknown => column.value
+  ? column.value(row)
+  : column.content === 'slot'
+    ? undefined
+    : Reflect.get(row, column.field)
+
+const resolveRowState = (row: Row): STableRowState => validateExactString(
+  'STable',
+  'rowState',
+  props.rowState?.(row) ?? 'default',
+  TABLE_ROW_STATES,
+)
+
+const resolveCellState = (
+  row: Row,
+  column: STableColumn<Row, Field>,
+): STableCellState => validateExactString(
+  'STable',
+  'cellState',
+  props.cellState?.(row, column) ?? 'default',
+  TABLE_CELL_STATES,
+)
+</script>
+
+<style lang="postcss" src="./STable.css" scoped></style>

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

@@ -0,0 +1,53 @@
+@reference "../../../styles/reference.css";
+
+.s-toast-container {
+  @apply fixed top-0 right-0 flex max-h-full min-w-0 w-full max-w-md flex-col overflow-y-auto overscroll-contain p-4;
+  z-index: var(--s-layer-toast);
+  @apply pointer-events-none;
+}
+
+.s-toast-transition-wrapper {
+  @apply flex flex-col items-end gap-2;
+}
+
+/*
+  Transition classes for TransitionGroup.
+  This animates toasts sliding in and out from the right.
+*/
+
+/* 1. Enter transitions */
+.notification-transition-enter-active {
+  transition: all var(--s-motion-standard) ease-out;
+}
+
+.notification-transition-enter-from {
+  opacity: 0;
+  transform: translate3d(16px, 12px, 0) scale(0.98);
+}
+
+.notification-transition-enter-to {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+/* 2. Leave transitions */
+.notification-transition-leave-active {
+  transition: all var(--s-motion-fast) ease-in;
+  /* To keep layout from jumping, we make the leaving element absolute */
+  position: absolute;
+}
+
+.notification-transition-leave-from {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.notification-transition-leave-to {
+  opacity: 0;
+  transform: translate3d(12px, 8px, 0) scale(0.98);
+}
+
+/* 3. Move transition */
+.notification-transition-move {
+  transition: transform var(--s-motion-standard) ease;
+}

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

@@ -0,0 +1,31 @@
+<template>
+  <div v-bind="ownedAttrs.bindings()" class="s-toast-container">
+    <TransitionGroup name="notification-transition" tag="div" class="s-toast-transition-wrapper">
+      <SToastItem
+        v-for="notification in notifications"
+        :key="notification.id"
+        :notification="notification"
+        @dismiss="dismiss"
+      />
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNotifierStore } from '../../../stores/useNotifierStore'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { storeToRefs } from 'pinia'
+import SToastItem from '../_internal/SToastItem.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const store = useNotifierStore()
+const { notifications } = storeToRefs(store)
+const ownedAttrs = useOwnedAttrs({ component: 'SToastContainer', owner: 'toast container root' })
+
+function dismiss(id: string): void {
+  store.remove(id)
+}
+</script>
+
+<style lang="postcss" src="./SToastContainer.css" scoped></style>

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

@@ -0,0 +1,114 @@
+@reference "../../../styles/reference.css";
+
+.s-tooltip {
+  @apply fixed rounded-md border px-2 py-1;
+  @apply text-xs font-normal;
+  background-color: var(--s-floating-surface);
+  color: var(--s-floating-foreground);
+  box-shadow: 0 0 0 1px var(--s-floating-outline), var(--s-elevation-floating);
+  max-width: 32rem;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+  pointer-events: none;
+  user-select: none;
+}
+
+.s-tooltip__content {
+  @apply grid gap-1;
+}
+
+.s-tooltip__title,
+.s-tooltip__section-title {
+  @apply font-semibold text-surface-900 dark:text-surface-50;
+}
+
+.s-tooltip__description,
+.s-tooltip__text,
+.s-tooltip__section-description {
+  @apply m-0 text-surface-700 dark:text-surface-200;
+}
+
+.s-tooltip__text {
+  white-space: pre-line;
+}
+
+.s-tooltip__details {
+  @apply m-0 grid gap-0.5;
+}
+
+.s-tooltip__detail {
+  @apply grid min-w-0 items-baseline gap-2;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.s-tooltip__detail-label {
+  @apply text-surface-500 dark:text-surface-400;
+}
+
+.s-tooltip__detail-value {
+  @apply m-0 min-w-0 text-surface-900 dark:text-surface-100;
+}
+
+.s-tooltip__detail-value[data-presentation='code'] {
+  @apply font-mono;
+}
+
+.s-tooltip__detail-value[data-tone='info'] {
+  @apply text-info-700 dark:text-info-300;
+}
+
+.s-tooltip__detail-value[data-tone='success'] {
+  @apply text-success-700 dark:text-success-300;
+}
+
+.s-tooltip__detail-value[data-tone='warn'] {
+  @apply text-warn-700 dark:text-warn-300;
+}
+
+.s-tooltip__detail-value[data-tone='danger'] {
+  @apply text-danger-700 dark:text-danger-300;
+}
+
+.s-tooltip__sections {
+  @apply mt-1 grid gap-2 border-t border-surface-200 pt-2 dark:border-surface-600;
+}
+
+.s-tooltip__section {
+  @apply grid gap-0.5;
+}
+
+.s-tooltip__section-items {
+  @apply m-0 list-disc space-y-0.5 pl-4 text-surface-700 dark:text-surface-200;
+}
+
+.s-tooltip-arrow {
+  @apply absolute h-0 w-0;
+  border-style: solid;
+  border-width: 5px;
+  border-color: transparent;
+}
+
+.s-tooltip[data-placement^='top-'] .s-tooltip-arrow {
+  bottom: -10px;
+  transform: translateX(-50%);
+  border-top-color: var(--s-floating-surface);
+}
+
+.s-tooltip[data-placement^='bottom-'] .s-tooltip-arrow {
+  top: -10px;
+  transform: translateX(-50%);
+  border-bottom-color: var(--s-floating-surface);
+}
+
+.s-tooltip[data-placement^='left-'] .s-tooltip-arrow {
+  right: -10px;
+  transform: translateY(-50%);
+  border-left-color: var(--s-floating-surface);
+}
+
+.s-tooltip[data-placement^='right-'] .s-tooltip-arrow {
+  left: -10px;
+  transform: translateY(-50%);
+  border-right-color: var(--s-floating-surface);
+}