adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

package/components/elements/select/cascade-utils.ts

@@ -0,0 +1,115 @@
+import type { CascadeEntry, CascadeKeys } from './types'
+
+/**
+ * Чистые (без Vue) утилиты обхода дерева опций для ACascadeSelectV2.
+ * Вынесены из SFC, чтобы навигацию по дереву можно было тестировать отдельно
+ * от рендера — по образцу `components/elements/tree-select/utils.ts`.
+ */
+
+export function nodeKey<T>(node: T, keys: CascadeKeys): unknown {
+  return (node as any)?.[keys.keyToSelect]
+}
+
+export function nodeLabel<T>(node: T, keys: CascadeKeys): string {
+  const raw = (node as any)?.[keys.keyToShow]
+  return raw == null ? '' : String(raw)
+}
+
+export function childrenOf<T>(node: T | null | undefined, keys: CascadeKeys): T[] {
+  const raw = (node as any)?.[keys.childrenKey]
+  return Array.isArray(raw) ? raw as T[] : []
+}
+
+export function isLeaf<T>(node: T, keys: CascadeKeys): boolean {
+  return childrenOf(node, keys).length === 0
+}
+
+export function isDisabled<T>(node: T, keys: CascadeKeys): boolean {
+  if (!keys.disabledKey) return false
+  return Boolean((node as any)?.[keys.disabledKey])
+}
+
+/**
+ * Один обход дерева → плоский `Map` ключ → узел с его цепочкой предков.
+ * Даёт O(1) на «где лежит выбранное значение» и «какие ветки раскрыть при открытии»,
+ * поэтому дерево на тысячи узлов не деградирует.
+ *
+ * Ключи должны быть уникальны по всему дереву; при коллизии выигрывает последний
+ * встреченный узел — ровно как в плоском ASelectV2, где `keyToSelect` тоже уникален.
+ */
+export function buildCascadeIndex<T>(options: T[], keys: CascadeKeys): Map<unknown, CascadeEntry<T>> {
+  const index = new Map<unknown, CascadeEntry<T>>()
+
+  const walk = (nodes: T[], path: T[], keyPath: unknown[], parent: T | null, level: number) => {
+    for (const node of nodes) {
+      const key = nodeKey(node, keys)
+      const nextPath = [...path, node]
+      const nextKeyPath = [...keyPath, key]
+      const children = childrenOf(node, keys)
+
+      index.set(key, {
+        node,
+        path: nextPath,
+        keyPath: nextKeyPath,
+        parent,
+        level,
+        isLeaf: children.length === 0,
+      })
+
+      if (children.length) walk(children, nextPath, nextKeyPath, node, level + 1)
+    }
+  }
+
+  walk(options, [], [], null, 0)
+  return index
+}
+
+/**
+ * Раскладывает дерево в колонки для текущего пути раскрытия.
+ * `panels[0]` — всегда корень; дальше по колонке на каждый валидный ключ пути.
+ * Возвращает и сам путь, обрезанный до того места, где он ещё разрешим
+ * (ключ мог исчезнуть после смены `options`).
+ */
+export function resolvePanels<T>(
+  options: T[],
+  keyPath: unknown[],
+  index: Map<unknown, CascadeEntry<T>>,
+  keys: CascadeKeys,
+): { panels: T[][], keyPath: unknown[] } {
+  const panels: T[][] = [options]
+  const resolved: unknown[] = []
+
+  for (const key of keyPath) {
+    const entry = index.get(key)
+    if (!entry) break
+    const children = childrenOf(entry.node, keys)
+    if (!children.length) break
+    panels.push(children)
+    resolved.push(key)
+  }
+
+  return { panels, keyPath: resolved }
+}
+
+/** Плоский поиск по листьям — для режима `searchable`. */
+export function searchLeaves<T>(
+  index: Map<unknown, CascadeEntry<T>>,
+  query: string,
+  keys: CascadeKeys,
+): CascadeEntry<T>[] {
+  const needle = query.trim().toLowerCase()
+  if (!needle) return []
+
+  const result: CascadeEntry<T>[] = []
+  for (const entry of index.values()) {
+    if (!entry.isLeaf) continue
+    const hit = entry.path.some(node => nodeLabel(node, keys).toLowerCase().includes(needle))
+    if (hit) result.push(entry)
+  }
+  return result
+}
+
+/** Подпись пути без последнего элемента: «Кварталы» для «Кварталы / 1 квартал 2026». */
+export function pathLabel<T>(path: T[], keys: CascadeKeys, separator = ' / '): string {
+  return path.map(node => nodeLabel(node, keys)).join(separator)
+}

package/components/elements/select/types.ts

@@ -0,0 +1,27 @@
+/** Имена ключей в пользовательских опциях каскадного селекта. */
+export interface CascadeKeys {
+  /** Ключ с подписью опции. */
+  keyToShow: string
+  /** Ключ со значением опции (должен быть уникален по всему дереву). */
+  keyToSelect: string
+  /** Ключ с массивом дочерних опций. */
+  childrenKey: string
+  /** Необязательный ключ-флаг «опция недоступна». */
+  disabledKey?: string
+}
+
+/** Узел дерева вместе с его положением — то, что лежит в индексе. */
+export interface CascadeEntry<T = any> {
+  node: T
+  /** Цепочка узлов от корня до `node` включительно. */
+  path: T[]
+  /** Та же цепочка в виде ключей. */
+  keyPath: unknown[]
+  parent: T | null
+  /** 0 — корневая колонка. */
+  level: number
+  isLeaf: boolean
+}
+
+/** Режим работы каскадного селекта, выбранный по ширине экрана. */
+export type CascadeMode = 'columns-hover' | 'columns-click' | 'drawer'

package/components/elements/select/ui/cascade-drawer.vue

@@ -0,0 +1,146 @@
+<script generic="T" lang="ts" setup>
+import type { CascadeKeys } from '../types'
+
+/**
+ * Мобильный режим каскадного селекта: одна колонка внутри `a-drawer-v2`,
+ * переходы между уровнями — drill-down с кнопкой «Назад» в шапке.
+ * Состояние пути живёт в ACascadeSelectV2, сюда приходит уже готовая колонка.
+ */
+defineOptions({ name: 'CascadeDrawer' })
+
+const props = withDefaults(defineProps<{
+  options: T[]
+  keys: CascadeKeys
+  level: number
+  title?: string
+  /** Заголовок текущего уровня (имя родителя) — показывается рядом с «Назад». */
+  parentLabel?: string
+  backLabel?: string
+  selectedKey?: unknown
+  /** Фиксированная общая высота листа; по умолчанию высота по контенту. */
+  height?: string
+  maxHeight?: string
+  zIndex?: number | string
+}>(), {
+  title: '',
+  parentLabel: '',
+  backLabel: 'Назад',
+  selectedKey: undefined,
+  height: undefined,
+  maxHeight: undefined,
+  zIndex: 10000,
+})
+
+const emits = defineEmits<{
+  activate: [node: T]
+  back: []
+}>()
+
+defineSlots<{
+  option?: (props: { option: T, level: number, selected: boolean, hasChildren: boolean, active: boolean }) => unknown
+  empty?: () => unknown
+}>()
+
+const open = defineModel<boolean>({ required: true })
+
+/* 80dvh — дефолт «высоты по контенту»; с фиксированным height он бы её же и обрезал. */
+const maxHeightStyle = computed(() => props.maxHeight ?? (props.height ? undefined : '80dvh'))
+
+/* Направление анимации: вглубь дерева — влево, назад — вправо. */
+const direction = ref<'forward' | 'back'>('forward')
+watch(() => props.level, (next, prev) => {
+  direction.value = next >= prev ? 'forward' : 'back'
+})
+
+const transitionName = computed(() =>
+  direction.value === 'forward' ? 'cascade-drawer-forward' : 'cascade-drawer-back',
+)
+</script>
+
+<template>
+  <a-drawer-v2
+    v-model="open"
+    :height="height"
+    :max-height="maxHeightStyle"
+    :z-index="zIndex"
+    content-class="p-2"
+  >
+    <template #header>
+      <div class="flex min-w-0 flex-1 items-center gap-2">
+        <button
+          v-if="level > 0"
+          type="button"
+          class="-ml-1 flex shrink-0 items-center gap-1 rounded-md p-1 text-body-sm text-secondary transition-colors hover:bg-action-secondary-hover hover:text-primary"
+          @click="emits('back')"
+        >
+          <a-icon-chevron-left class="size-3.5 shrink-0" />
+          <span>{{ backLabel }}</span>
+        </button>
+
+        <h2 v-else class="min-w-0 truncate text-body-lg-strong text-primary">
+          {{ title }}
+        </h2>
+      </div>
+
+      <button
+        type="button"
+        class="shrink-0 rounded-sm p-1 text-secondary transition hover:bg-badge hover:text-icon-strong"
+        @click="open = false"
+      >
+        <a-icon-x-mark class="size-4" />
+      </button>
+    </template>
+
+    <transition :name="transitionName" mode="out-in">
+      <a-cascade-panel
+        :key="level"
+        bare
+        :options="options"
+        :keys="keys"
+        :level="level"
+        :title="level > 0 ? parentLabel : ''"
+        :selected-key="selectedKey"
+        @activate="emits('activate', $event)"
+      >
+        <template #option="slotProps">
+          <slot name="option" v-bind="slotProps" />
+        </template>
+        <template #empty>
+          <slot name="empty" />
+        </template>
+      </a-cascade-panel>
+    </transition>
+  </a-drawer-v2>
+</template>
+
+<style scoped>
+.cascade-drawer-forward-enter-active,
+.cascade-drawer-forward-leave-active,
+.cascade-drawer-back-enter-active,
+.cascade-drawer-back-leave-active {
+  transition:
+    opacity 140ms ease,
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.cascade-drawer-forward-enter-from,
+.cascade-drawer-back-leave-to {
+  opacity: 0;
+  transform: translateX(24px);
+}
+
+.cascade-drawer-forward-leave-to,
+.cascade-drawer-back-enter-from {
+  opacity: 0;
+  transform: translateX(-24px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cascade-drawer-forward-enter-active,
+  .cascade-drawer-forward-leave-active,
+  .cascade-drawer-back-enter-active,
+  .cascade-drawer-back-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/elements/select/ui/cascade-panel.vue

@@ -0,0 +1,237 @@
+<script generic="T" lang="ts" setup>
+import type { CascadeKeys } from '../types'
+import { isDisabled, isLeaf, nodeKey, nodeLabel } from '../cascade-utils'
+
+/**
+ * Одна колонка каскадного селекта. Компонент намеренно НЕ рекурсивен: панели
+ * приходят плоским массивом из ACascadeSelectV2, поэтому здесь нет самоссылки
+ * (и нет TS7022, на который натыкается рекурсивный ATreeSelectNode).
+ */
+defineOptions({ name: 'CascadePanel' })
+
+const props = withDefaults(defineProps<{
+  options: T[]
+  keys: CascadeKeys
+  level: number
+  /** Ключ раскрытого из этой колонки родителя. */
+  activeKey?: unknown
+  /** Ключ выбранного листа. */
+  selectedKey?: unknown
+  /** Ключ строки с roving-фокусом. */
+  focusedKey?: unknown
+  title?: string
+  showBack?: boolean
+  backLabel?: string
+  width?: string
+  minWidth?: string
+  maxHeight?: string
+  emptyLabel?: string
+  /**
+   * Колонки растут влево. Зеркалятся только строки-ветки: их шеврон разворачивается
+   * и уезжает влево, к своей будущей колонке. Листья (и заголовок, и «Назад») всегда
+   * читаются слева направо — у них никуда не ведёт, зеркалить нечего.
+   */
+  mirrored?: boolean
+  /** Без карточной обвязки (рамка/тень/фон) — колонка внутри дровера. */
+  bare?: boolean
+}>(), {
+  activeKey: undefined,
+  selectedKey: undefined,
+  focusedKey: undefined,
+  title: '',
+  showBack: false,
+  backLabel: 'Назад',
+  width: undefined,
+  minWidth: undefined,
+  maxHeight: undefined,
+  emptyLabel: 'Ничего не найдено',
+  mirrored: false,
+  bare: false,
+})
+
+const emits = defineEmits<{
+  /** Клик/Enter по строке — родитель решает, раскрыть ветку или выбрать лист. */
+  activate: [node: T]
+  hover: [node: T]
+  back: []
+}>()
+
+defineSlots<{
+  option?: (props: { option: T, level: number, selected: boolean, hasChildren: boolean, active: boolean }) => unknown
+  empty?: () => unknown
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const listEl = ref<HTMLElement | null>(null)
+
+const rootClass = computed(() => {
+  if (props.bare) return 'w-full text-start'
+  const card = 'rounded-lg border border-default bg-main p-1.5 text-start shadow-lg shadow-surface-dark/10 dark:shadow-surface-dark/30'
+  /* min-w-45 — фолбэк на первый кадр, пока ширина триггера ещё не измерена. */
+  return props.width ? card : `${card} min-w-45`
+})
+
+const rootStyle = computed(() => ({
+  width: props.bare ? undefined : props.width,
+  minWidth: props.bare ? undefined : props.minWidth,
+  maxHeight: props.maxHeight,
+}))
+
+function keyOf(node: T) {
+  return nodeKey(node, props.keys)
+}
+
+function hasChildren(node: T) {
+  return !isLeaf(node, props.keys)
+}
+
+function optionId(node: T) {
+  return `cascade-${props.level}-${String(keyOf(node))}`
+}
+
+/** Ставит фокус на строку по ключу — используется клавиатурной навигацией родителя. */
+function focusItem(key: unknown) {
+  const el = listEl.value?.querySelector<HTMLElement>(`[data-cascade-key="${CSS.escape(String(key))}"]`)
+  if (!el) return
+  el.focus()
+  el.scrollIntoView({ block: 'nearest' })
+}
+
+defineExpose({ root, focusItem })
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="cascade-panel flex min-w-0 flex-col"
+    :class="rootClass"
+    :style="rootStyle"
+  >
+    <button
+      v-if="showBack"
+      type="button"
+      class="mb-0.5 flex shrink-0 items-center gap-1 rounded-md px-2 py-1.5 text-body-sm text-secondary transition-colors hover:bg-action-secondary-hover hover:text-primary"
+      @click="emits('back')"
+    >
+      <!-- Шеврон-левый, развёрнутый на 180°, — точное зеркало правого: пути SVG симметричны. -->
+      <a-icon-chevron-left class="size-3.5 shrink-0" :class="{ 'rotate-180': mirrored }" />
+      <span>{{ backLabel }}</span>
+    </button>
+
+    <p
+      v-else-if="title"
+      class="shrink-0 px-3 py-1.5 text-body-sm text-secondary"
+    >
+      {{ title }}
+    </p>
+
+    <ul
+      ref="listEl"
+      role="listbox"
+      class="cascade-panel__list flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto"
+    >
+      <li v-if="!options.length" class="px-3 py-2 text-body-sm text-secondary">
+        <slot name="empty">
+          {{ emptyLabel }}
+        </slot>
+      </li>
+
+      <li
+        v-for="node in options"
+        :key="String(keyOf(node))"
+        role="none"
+      >
+        <button
+          :id="optionId(node)"
+          type="button"
+          role="option"
+          :data-cascade-key="String(keyOf(node))"
+          :aria-selected="keyOf(node) === selectedKey"
+          :aria-haspopup="hasChildren(node) ? 'listbox' : undefined"
+          :aria-expanded="hasChildren(node) ? keyOf(node) === activeKey : undefined"
+          :disabled="isDisabled(node, keys)"
+          :tabindex="keyOf(node) === focusedKey ? 0 : -1"
+          :class="{
+            'cascade-panel__option--active': keyOf(node) === activeKey,
+            'cascade-panel__option--selected': keyOf(node) === selectedKey,
+            'cascade-panel__option--branch': hasChildren(node),
+            'hover:bg-action-secondary-hover': !hasChildren(node),
+            'flex-row-reverse text-end': mirrored && hasChildren(node),
+          }"
+          class="cascade-panel__option flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-body-md transition-colors duration-100 focus-visible:ring-2 focus-visible:ring-brand-500/30 focus-visible:outline-hidden"
+          @click="emits('activate', node)"
+          @pointerenter="emits('hover', node)"
+        >
+          <span class="truncate">
+            <slot
+              name="option"
+              :option="node"
+              :level="level"
+              :selected="keyOf(node) === selectedKey"
+              :has-children="hasChildren(node)"
+              :active="keyOf(node) === activeKey"
+            >{{ nodeLabel(node, keys) }}</slot>
+          </span>
+
+          <a-icon-chevron-right
+            v-if="hasChildren(node)"
+            class="size-4 shrink-0"
+            :class="[
+              keyOf(node) === activeKey ? 'text-icon-brand' : 'text-icon-secondary',
+              { 'rotate-180': mirrored },
+            ]"
+          />
+          <a-icon-check
+            v-else-if="keyOf(node) === selectedKey"
+            class="size-4 shrink-0 text-brand"
+          />
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.cascade-panel__list {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.cascade-panel__list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.cascade-panel__option {
+  cursor: pointer;
+}
+
+.cascade-panel__option:disabled {
+  cursor: not-allowed;
+  color: var(--text-color-disabled);
+  pointer-events: none;
+}
+
+/* Раскрытая ветка и выбранный лист — одна и та же brand-подсветка по макету ДС. */
+.cascade-panel__option--active,
+.cascade-panel__option--selected {
+  background-color: var(--background-color-brand-subtle);
+  color: var(--text-color-brand);
+  font-weight: 500;
+}
+
+/*
+ * Под курсором brand-подсветка обязана остаться brand-подсветкой:
+ *  • строка с детьми берёт этот фон сразу — иначе на hoverOpenDelay виден серый ховер,
+ *    который через 120 мс сменяется синим (то самое мигание);
+ *  • у раскрытой ветки и выбранного листа серый ховер имеет ту же специфичность (0,2,0),
+ *    так что без явного правила исход зависел бы от порядка стилей в бандле.
+ * Цвет текста и вес не трогаем: раскрытая ветка должна оставаться заметнее наведённой.
+ */
+.cascade-panel__option--branch:hover,
+.cascade-panel__option--active:hover,
+.cascade-panel__option--selected:hover {
+  background-color: var(--background-color-brand-subtle);
+}
+</style>