@pgcorp/ui-kit 0.1.0

package/src/components/shared/navigation/SBreadcrumbs.css

@@ -0,0 +1,26 @@
+@reference "../../../styles/reference.css";
+
+.s-breadcrumbs {
+  @apply min-w-0 overflow-x-auto border-y border-surface-200 py-2 dark:border-surface-700;
+  scrollbar-width: thin;
+}
+
+.s-breadcrumbs__list {
+  @apply flex min-w-max list-none items-center gap-1 p-0 m-0;
+}
+
+.s-breadcrumbs__item {
+  @apply flex items-center gap-1;
+}
+
+.s-breadcrumbs__current {
+  @apply block shrink-0 rounded px-2 py-1 text-xs font-medium;
+}
+
+.s-breadcrumbs__current {
+  @apply text-surface-900 dark:text-surface-50;
+}
+
+.s-breadcrumbs__divider {
+  @apply h-3 w-3 shrink-0 text-surface-400;
+}

package/src/components/shared/navigation/SBreadcrumbs.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+
+import { resolveLinkTarget } from '../../../internal/linkTarget'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { ChevronRight } from '../../icons/sputnigUiIcons'
+import SButton from '../controls/SButton.vue'
+import SLink from '../controls/SLink.vue'
+import type { LinkDestination } from '../controls/SLink'
+
+defineOptions({ inheritAttrs: false })
+
+interface BreadcrumbItemBase {
+  readonly id: string
+  readonly label: string
+}
+
+/** Обычное navigation destination с точным href/to XOR. / Ordinary navigation destination with exact href/to XOR. */
+export type BreadcrumbDestinationItem = BreadcrumbItemBase & LinkDestination & {
+  readonly kind: 'destination'
+  readonly disabled?: boolean
+}
+
+/** Команда в цепочке, не имитирующая ссылку. / A breadcrumb command that does not impersonate a link. */
+export interface BreadcrumbActionItem extends BreadcrumbItemBase {
+  readonly kind: 'action'
+  readonly disabled?: boolean
+}
+
+/** Текущая пассивная страница. / The current passive page. */
+export interface BreadcrumbCurrentItem extends BreadcrumbItemBase {
+  readonly kind: 'current'
+}
+
+/** Точный semantic contract сегмента. / Exact semantic breadcrumb-item contract. */
+export type BreadcrumbItem = BreadcrumbDestinationItem | BreadcrumbActionItem | BreadcrumbCurrentItem
+
+const props = withDefaults(defineProps<{
+  items: readonly BreadcrumbItem[]
+  ariaLabel?: string
+}>(), {
+  ariaLabel: 'Навигационная цепочка',
+})
+
+const emit = defineEmits<{
+  action: [id: string, event: MouseEvent]
+  navigate: [item: BreadcrumbDestinationItem, event: MouseEvent]
+}>()
+
+const ownedAttrs = useOwnedAttrs({ component: 'SBreadcrumbs', owner: 'breadcrumb navigation root' })
+const EXACT_KEYS = {
+  action: new Set(['kind', 'id', 'label', 'disabled']),
+  current: new Set(['kind', 'id', 'label']),
+  destination: new Set(['kind', 'id', 'label', 'disabled', 'href', 'to', 'target', 'rel']),
+} as const
+
+function assertRecord(value: unknown, coordinate: string): asserts value is Record<string, unknown> {
+  if (typeof value === 'object' && value !== null && !Array.isArray(value)) return
+  throw new TypeError(`SBreadcrumbs: ${coordinate} must be an object`)
+}
+
+function validateContract(): void {
+  if (typeof props.ariaLabel !== 'string' || !props.ariaLabel.trim()) {
+    throw new TypeError('SBreadcrumbs: ariaLabel must be a non-empty string')
+  }
+  if (!Array.isArray(props.items) || props.items.length === 0) {
+    throw new TypeError('SBreadcrumbs: items must be a non-empty array')
+  }
+  const ids = new Set<string>()
+  let currentIndex = -1
+  for (const [index, candidate] of props.items.entries()) {
+    const coordinate = `items[${index}]`
+    assertRecord(candidate, coordinate)
+    const kind = candidate.kind
+    if (kind !== 'action' && kind !== 'current' && kind !== 'destination') {
+      throw new TypeError(`SBreadcrumbs: ${coordinate}.kind must be action, current, or destination`)
+    }
+    for (const key of Reflect.ownKeys(candidate)) {
+      if (typeof key !== 'string' || !EXACT_KEYS[kind].has(key)) {
+        throw new TypeError(`SBreadcrumbs: ${coordinate} has unsupported field '${String(key)}'`)
+      }
+      const descriptor = Object.getOwnPropertyDescriptor(candidate, key)
+      if (!descriptor?.enumerable || !('value' in descriptor)) {
+        throw new TypeError(`SBreadcrumbs: ${coordinate}.${key} must be an enumerable data property`)
+      }
+    }
+    if (typeof candidate.id !== 'string' || !candidate.id.trim()) {
+      throw new TypeError(`SBreadcrumbs: ${coordinate}.id must be a non-empty string`)
+    }
+    if (ids.has(candidate.id)) throw new TypeError(`SBreadcrumbs: duplicate item id '${candidate.id}'`)
+    ids.add(candidate.id)
+    if (typeof candidate.label !== 'string' || !candidate.label.trim()) {
+      throw new TypeError(`SBreadcrumbs: ${coordinate}.label must be a non-empty string`)
+    }
+    if (candidate.disabled !== undefined && typeof candidate.disabled !== 'boolean') {
+      throw new TypeError(`SBreadcrumbs: ${coordinate}.disabled must be a boolean`)
+    }
+    if (kind === 'destination') {
+      resolveLinkTarget({
+        owner: `SBreadcrumbs: ${coordinate}`,
+        href: candidate.href,
+        to: candidate.to,
+        target: candidate.target,
+        rel: candidate.rel,
+      })
+    }
+    if (kind === 'current') {
+      if (currentIndex >= 0) throw new TypeError('SBreadcrumbs: items must contain exactly one current item')
+      currentIndex = index
+    }
+  }
+  if (currentIndex !== props.items.length - 1) {
+    throw new TypeError('SBreadcrumbs: the sole current item must be last')
+  }
+}
+
+watch(() => [props.items, props.ariaLabel] as const, validateContract, { immediate: true, deep: true })
+</script>
+
+<template>
+  <nav v-bind="ownedAttrs.bindings()" class="s-breadcrumbs" :aria-label="ariaLabel">
+    <ol class="s-breadcrumbs__list">
+      <li v-for="(item, index) in items" :key="item.id" class="s-breadcrumbs__item">
+        <ChevronRight v-if="index > 0" class="s-breadcrumbs__divider" aria-hidden="true" />
+        <span v-if="item.kind === 'current'" class="s-breadcrumbs__current" aria-current="page">
+          {{ item.label }}
+        </span>
+        <SLink
+          v-else-if="item.kind === 'destination'"
+          :href="item.href"
+          :to="item.to"
+          :target="item.target"
+          :rel="item.rel"
+          variant="subtle"
+          size="sm"
+          :disabled="item.disabled"
+          @click="emit('navigate', item, $event)"
+        >
+          {{ item.label }}
+        </SLink>
+        <SButton
+          v-else
+          :label="item.label"
+          :disabled="item.disabled"
+          size="xs"
+          severity="secondary"
+          appearance="ghost"
+          @click="emit('action', item.id, $event)"
+        />
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<style lang="postcss" src="./SBreadcrumbs.css" scoped></style>

package/src/components/shared/navigation/SCatalogNavigator.css

@@ -0,0 +1,100 @@
+.s-catalog-navigator {
+  container-type: inline-size;
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.s-catalog-navigator__toolbar {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+  align-items: end;
+}
+
+.s-catalog-navigator__toolbar > :first-child {
+  grid-column: 1 / -1;
+}
+
+.s-catalog-navigator__summary {
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.s-catalog-navigator__viewport {
+  min-height: 10rem;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border-block: 1px solid var(--color-border-subtle);
+}
+
+.s-catalog-navigator__row {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.s-catalog-navigator__row:hover {
+  background: var(--color-surface-muted);
+}
+
+.s-catalog-navigator__row--selected {
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  box-shadow: inset 3px 0 0 var(--color-primary);
+}
+
+.s-catalog-navigator__row--selected .s-catalog-navigator__subtitle {
+  color: var(--color-text);
+}
+
+.s-catalog-navigator__row-main {
+  display: grid;
+  min-width: 0;
+  flex: 1 1 auto;
+  gap: 0.125rem;
+}
+
+.s-catalog-navigator__subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-inline: 0.75rem;
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+}
+
+.s-catalog-navigator__badges {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+
+.s-catalog-navigator__empty {
+  padding: 1.5rem 0.75rem;
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+@container (max-width: 26rem) {
+  .s-catalog-navigator__toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .s-catalog-navigator__toolbar > :first-child {
+    grid-column: auto;
+  }
+
+  .s-catalog-navigator__badges {
+    justify-content: flex-start;
+  }
+}

package/src/components/shared/navigation/SCatalogNavigator.vue

@@ -0,0 +1,308 @@
+<template>
+  <section v-bind="ownedAttrs.bindings()" class="s-catalog-navigator" :aria-label="ariaLabel">
+    <div class="s-catalog-navigator__toolbar">
+      <SInputText
+        v-model="query"
+        size="sm"
+        :placeholder="searchPlaceholder"
+        :aria-label="searchPlaceholder"
+      />
+      <SSelect
+        v-model="selectedGroup"
+        size="sm"
+        :options="groupOptions"
+        :label="groupFilterLabel"
+      />
+      <SSelect
+        v-model="sortMode"
+        size="sm"
+        :options="sortOptions"
+        label="Сортировка"
+      />
+    </div>
+
+    <div class="s-catalog-navigator__summary" aria-live="polite">
+      Найдено: {{ filteredItemCount }} из {{ items.length }}
+    </div>
+
+    <div class="s-catalog-navigator__viewport" role="region" :aria-label="`${ariaLabel}: элементы`">
+      <div v-if="groupedItems.length === 0" class="s-catalog-navigator__empty">
+        {{ emptyText }}
+      </div>
+      <template v-else>
+        <SCatalogNavigatorGroup
+          v-for="group in groupedItems"
+          :key="group.key"
+          :id="groupDisclosureId(group.key)"
+          :label="group.label"
+          :count="group.items.length"
+        >
+            <div
+              v-for="item in group.items"
+              :key="item.id"
+              class="s-catalog-navigator__row"
+              role="listitem"
+              :class="{ 's-catalog-navigator__row--selected': item.id === validatedSelectedId }"
+              :aria-current="item.id === validatedSelectedId ? 'true' : undefined"
+            >
+              <div class="s-catalog-navigator__row-main">
+                <SButton
+                  :label="item.title"
+                  size="sm"
+                  severity="secondary"
+                  appearance="ghost"
+                  shape="row"
+                  width="full"
+                  content-align="start"
+                  :disabled="item.disabled"
+                  :aria-current="item.id === validatedSelectedId || undefined"
+                  @click="selectItem(item)"
+                />
+                <span v-if="item.subtitle" class="s-catalog-navigator__subtitle">{{ item.subtitle }}</span>
+              </div>
+              <span v-if="item.badges?.length" class="s-catalog-navigator__badges">
+                <SBadge v-for="badge in item.badges" :key="badge" severity="secondary" size="xs">
+                  {{ badge }}
+                </SBadge>
+              </span>
+              <slot name="item-actions" :item="item" />
+            </div>
+        </SCatalogNavigatorGroup>
+      </template>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useId, watch } from 'vue';
+import SInputText from '../controls/SInputText.vue';
+import SSelect from '../controls/SSelect.vue';
+import SButton from '../controls/SButton.vue';
+import SBadge from '../data-display/SBadge.vue';
+import SCatalogNavigatorGroup from './_internal/SCatalogNavigatorGroup.vue';
+import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+
+defineOptions({ inheritAttrs: false });
+
+export interface CatalogNavigatorItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  group: string;
+  groupLabel: string;
+  keywords?: string[];
+  badges?: string[];
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<{
+  items: CatalogNavigatorItem[];
+  selectedId?: string | null;
+  ariaLabel?: string;
+  searchPlaceholder?: string;
+  groupFilterLabel?: string;
+  emptyText?: string;
+}>(), {
+  selectedId: null,
+  ariaLabel: 'Каталог',
+  searchPlaceholder: 'Поиск',
+  groupFilterLabel: 'Группа',
+  emptyText: 'Ничего не найдено.',
+});
+
+const emit = defineEmits<{
+  (event: 'select', id: string): void;
+}>();
+const ownedAttrs = useOwnedAttrs({ component: 'SCatalogNavigator', owner: 'catalog navigation section' });
+
+const query = ref('');
+const ALL_GROUP_FILTER = 'all';
+const selectedGroup = ref(ALL_GROUP_FILTER);
+const sortMode = ref('title-asc');
+const componentId = useId();
+const groupIdentityTokens = new Map<string, number>();
+let nextGroupIdentityToken = 0;
+
+interface CatalogGroupInventory {
+  key: string;
+  label: string;
+  filterValue: string;
+  disclosureId: string;
+}
+
+const ITEM_KEYS = new Set([
+  'id', 'title', 'subtitle', 'group', 'groupLabel', 'keywords', 'badges', 'disabled',
+]);
+
+function validateNonEmptyString(value: unknown, coordinate: string): string {
+  if (typeof value !== 'string' || value.trim().length === 0) {
+    throw new TypeError(`SCatalogNavigator: ${coordinate} must be a non-empty string`);
+  }
+  return value;
+}
+
+function validateOptionalStringList(value: unknown, coordinate: string): string[] | undefined {
+  if (value === undefined) return undefined;
+  if (!Array.isArray(value)) {
+    throw new TypeError(`SCatalogNavigator: ${coordinate} must be an array of non-empty strings`);
+  }
+  const result = value.map((item, index) => validateNonEmptyString(item, `${coordinate}[${index}]`));
+  if (new Set(result).size !== result.length) {
+    throw new TypeError(`SCatalogNavigator: ${coordinate} must not contain duplicate values`);
+  }
+  return result;
+}
+
+function groupIdentityToken(key: string): number {
+  const current = groupIdentityTokens.get(key);
+  if (current !== undefined) return current;
+  const token = nextGroupIdentityToken;
+  nextGroupIdentityToken += 1;
+  groupIdentityTokens.set(key, token);
+  return token;
+}
+
+const catalogInventory = computed(() => {
+  if (!Array.isArray(props.items)) {
+    throw new TypeError('SCatalogNavigator: items must be an array');
+  }
+  const ids = new Set<string>();
+  const groupsByKey = new Map<string, CatalogGroupInventory>();
+  const validatedItems = props.items.map((candidate, index): CatalogNavigatorItem => {
+    if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
+      throw new TypeError(`SCatalogNavigator: items[${index}] must be an object`);
+    }
+    for (const key of Reflect.ownKeys(candidate)) {
+      if (typeof key !== 'string' || !ITEM_KEYS.has(key)) {
+        throw new TypeError(`SCatalogNavigator: items[${index}] has unsupported field ${String(key)}`);
+      }
+    }
+    const id = validateNonEmptyString(candidate.id, `items[${index}].id`);
+    if (ids.has(id)) {
+      throw new TypeError(`SCatalogNavigator: duplicate item id ${JSON.stringify(id)}`);
+    }
+    ids.add(id);
+    validateNonEmptyString(candidate.title, `items[${index}].title`);
+    const group = validateNonEmptyString(candidate.group, `items[${index}].group`);
+    const groupLabel = validateNonEmptyString(candidate.groupLabel, `items[${index}].groupLabel`);
+    const existingGroup = groupsByKey.get(group);
+    if (existingGroup && existingGroup.label !== groupLabel) {
+      throw new TypeError(
+        `SCatalogNavigator: group ${JSON.stringify(group)} has conflicting labels ${JSON.stringify(existingGroup.label)} and ${JSON.stringify(groupLabel)}`,
+      );
+    }
+    if (!existingGroup) {
+      const token = groupIdentityToken(group);
+      groupsByKey.set(group, {
+        key: group,
+        label: groupLabel,
+        filterValue: `group-${token}`,
+        disclosureId: `${componentId}-catalog-group-${token}`,
+      });
+    }
+    if (candidate.disabled !== undefined && typeof candidate.disabled !== 'boolean') {
+      throw new TypeError(`SCatalogNavigator: items[${index}].disabled must be a boolean`);
+    }
+    if (candidate.subtitle !== undefined) {
+      validateNonEmptyString(candidate.subtitle, `items[${index}].subtitle`);
+    }
+    validateOptionalStringList(candidate.keywords, `items[${index}].keywords`);
+    validateOptionalStringList(candidate.badges, `items[${index}].badges`);
+    return candidate;
+  });
+  return {
+    items: validatedItems,
+    ids,
+    groups: [...groupsByKey.values()],
+    groupsByKey,
+  };
+});
+
+const validatedSelectedId = computed(() => {
+  if (props.selectedId === null) return null;
+  const id = validateNonEmptyString(props.selectedId, 'selectedId');
+  if (!catalogInventory.value.ids.has(id)) {
+    throw new RangeError(`SCatalogNavigator: selectedId ${JSON.stringify(id)} is outside items inventory`);
+  }
+  return id;
+});
+
+function selectItem(item: CatalogNavigatorItem): void {
+  if (!item.disabled) emit('select', item.id);
+}
+
+function groupDisclosureId(groupKey: string): string {
+  const group = catalogInventory.value.groupsByKey.get(groupKey);
+  if (!group) {
+    throw new RangeError(`SCatalogNavigator: group ${JSON.stringify(groupKey)} is outside inventory`);
+  }
+  return group.disclosureId;
+}
+
+const groupOptions = computed(() => [
+  { value: ALL_GROUP_FILTER, label: 'Все группы' },
+  ...[...catalogInventory.value.groups]
+    .sort((left, right) => left.label.localeCompare(right.label, 'ru'))
+    .map((group) => ({ value: group.filterValue, label: group.label })),
+]);
+
+const sortOptions = [
+  { value: 'title-asc', label: 'По названию' },
+  { value: 'title-desc', label: 'По названию, обратно' },
+  { value: 'id-asc', label: 'По ID' },
+];
+
+const normalizedQuery = computed(() => query.value.trim().toLocaleLowerCase('ru'));
+
+const selectedGroupKey = computed(() => {
+  if (selectedGroup.value === ALL_GROUP_FILTER) return null;
+  const group = catalogInventory.value.groups.find((candidate) => candidate.filterValue === selectedGroup.value);
+  if (!group) {
+    throw new RangeError(`SCatalogNavigator: selected group filter ${JSON.stringify(selectedGroup.value)} is outside inventory`);
+  }
+  return group.key;
+});
+
+watch(
+  () => catalogInventory.value.groups.map((group) => group.filterValue).join('\n'),
+  () => {
+    if (
+      selectedGroup.value !== ALL_GROUP_FILTER
+      && !catalogInventory.value.groups.some((group) => group.filterValue === selectedGroup.value)
+    ) {
+      selectedGroup.value = ALL_GROUP_FILTER;
+    }
+  },
+  { flush: 'sync' },
+);
+
+const visibleItems = computed(() => catalogInventory.value.items
+  .filter((item) => selectedGroupKey.value === null || item.group === selectedGroupKey.value)
+  .filter((item) => {
+    if (!normalizedQuery.value) return true;
+    const haystack = [item.title, item.subtitle, item.id, ...(item.keywords ?? [])]
+      .filter((value): value is string => typeof value === 'string')
+      .join(' ')
+      .toLocaleLowerCase('ru');
+    return haystack.includes(normalizedQuery.value);
+  })
+  .sort((left, right) => {
+    if (sortMode.value === 'id-asc') return left.id.localeCompare(right.id, 'ru');
+    const direction = sortMode.value === 'title-desc' ? -1 : 1;
+    return direction * left.title.localeCompare(right.title, 'ru');
+  }));
+
+const groupedItems = computed(() => {
+  const groups = new Map<string, { key: string; label: string; items: CatalogNavigatorItem[] }>();
+  visibleItems.value.forEach((item) => {
+    const group = groups.get(item.group) ?? { key: item.group, label: item.groupLabel, items: [] };
+    group.items.push(item);
+    groups.set(item.group, group);
+  });
+  return Array.from(groups.values()).sort((left, right) => left.label.localeCompare(right.label, 'ru'));
+});
+
+const filteredItemCount = computed(() => visibleItems.value.length);
+</script>
+
+<style lang="postcss" src="./SCatalogNavigator.css" scoped></style>