adata-ui 2.1.41-beta.10 → 2.1.41-beta.12

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

@@ -1,115 +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)
-}
+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

@@ -1,27 +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'
+/** Имена ключей в пользовательских опциях каскадного селекта. */
+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

@@ -1,146 +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>
+<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>