@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,158 +0,0 @@
-<script setup lang="ts">
-import { computed, watch } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-
-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: undefined,
-})
-const { t } = useUiKitLocale()
-const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('navigation.breadcrumbs'))
-
-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 (!resolvedAriaLabel.value.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, resolvedAriaLabel.value] as const, validateContract, { immediate: true, deep: true })
-</script>
-
-<template>
-  <nav v-bind="ownedAttrs.bindings()" class="s-breadcrumbs" :aria-label="resolvedAriaLabel">
-    <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.vue

@@ -1,314 +0,0 @@
-<template>
-  <section v-bind="ownedAttrs.bindings()" class="s-catalog-navigator" :aria-label="resolvedAriaLabel">
-    <div class="s-catalog-navigator__toolbar">
-      <SInputText
-        v-model="query"
-        size="sm"
-        :placeholder="resolvedSearchPlaceholder"
-        :aria-label="resolvedSearchPlaceholder"
-      />
-      <SSelect
-        v-model="selectedGroup"
-        size="sm"
-        :options="groupOptions"
-        :label="resolvedGroupFilterLabel"
-      />
-      <SSelect
-        v-model="sortMode"
-        size="sm"
-        :options="sortOptions"
-        :label="t('navigation.sort')"
-      />
-    </div>
-
-    <div class="s-catalog-navigator__summary" aria-live="polite">
-      {{ t('navigation.found') }} {{ filteredItemCount }} {{ t('navigation.of') }} {{ items.length }}
-    </div>
-
-    <div class="s-catalog-navigator__viewport" role="region" :aria-label="t('navigation.catalogItems', { catalog: resolvedAriaLabel })">
-      <div v-if="groupedItems.length === 0" class="s-catalog-navigator__empty">
-        {{ resolvedEmptyText }}
-      </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';
-import { useUiKitLocale } from '../../../composables/useUiKitLocale';
-
-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: undefined,
-  searchPlaceholder: undefined,
-  groupFilterLabel: undefined,
-  emptyText: undefined,
-});
-const { locale, t } = useUiKitLocale();
-const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('navigation.catalog'));
-const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? t('actions.search'));
-const resolvedGroupFilterLabel = computed(() => props.groupFilterLabel ?? t('navigation.group'));
-const resolvedEmptyText = computed(() => props.emptyText ?? t('navigation.noResults'));
-
-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: t('navigation.allGroups') },
-  ...[...catalogInventory.value.groups]
-    .sort((left, right) => left.label.localeCompare(right.label, locale.value))
-    .map((group) => ({ value: group.filterValue, label: group.label })),
-]);
-
-const sortOptions = computed(() => [
-  { value: 'title-asc', label: t('navigation.sortNameAscending') },
-  { value: 'title-desc', label: t('navigation.sortNameDescending') },
-  { value: 'id-asc', label: t('navigation.sortId') },
-]);
-
-const normalizedQuery = computed(() => query.value.trim().toLocaleLowerCase(locale.value));
-
-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>