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

package/components/elements/select/ACascadeSelectV2.vue

@@ -1,710 +1,710 @@
-<script generic="T" lang="ts" setup>
-import type { CascadeEntry, CascadeKeys, CascadeMode } from './types'
-import { toCssSize } from '#adata-ui/utils/toCssSize'
-import { autoUpdate, flip, size as floatingSize, offset, shift, useFloating } from '@floating-ui/vue'
-import { onClickOutside, useMediaQuery, useToggle, useWindowSize } from '@vueuse/core'
-import { isEqual } from 'lodash-es'
-import { buildCascadeIndex, isDisabled, isLeaf, nodeKey, nodeLabel, pathLabel, resolvePanels } from './cascade-utils'
-
-interface Props {
-  label: string
-  options: T[]
-  required?: boolean
-  keyToShow?: string
-  keyToSelect?: string
-  childrenKey?: string
-  disabledKey?: string
-  /** `true` — в v-model лежит ключ листа, `false` — сам объект листа. */
-  getOnlyKey?: boolean
-  clearable?: boolean
-  disabled?: boolean
-  size?: 'sm' | 'md'
-  error?: string | string[]
-  startIcon?: object
-  buttonBg?: string
-  /** Куда растут подпанели. `auto` — вправо, а если не влезает, влево. */
-  panelsSide?: 'auto' | 'right' | 'left'
-  /** Принудительный режим раскрытия вместо авто-выбора по ширине экрана. */
-  submenuTrigger?: 'auto' | 'hover' | 'click'
-  hoverOpenDelay?: number
-  hoverCloseDelay?: number
-  /** Ширина колонки. По умолчанию — ширина триггера. */
-  panelWidth?: number | string
-  /** Нижняя граница ширины колонки — когда триггер узкий, а подписи длинные. */
-  panelMinWidth?: number | string
-  panelMaxHeight?: number | string
-  /** Подпись первой колонки. По умолчанию — `label`. */
-  panelTitle?: string
-  /** Показывать в триггере весь путь («Кварталы / 1 квартал 2026»). */
-  showPathInTrigger?: boolean
-  drawerTitle?: string
-  /** Фиксированная общая высота мобильного дровера («70dvh»). */
-  drawerHeight?: number | string
-  drawerMaxHeight?: number | string
-  backLabel?: string
-  emptyLabel?: string
-  mobileBreakpoint?: number
-  tabletBreakpoint?: number
-  teleport?: boolean
-  /** Слой выпадашки и мобильного дровера. */
-  zIndex?: number | string
-}
-
-interface Emits {
-  (e: 'onChange', option: T, path: T[]): void
-  (e: 'onClear'): void
-}
-
-/**
- * Каскадный селект: опция-родитель раскрывает своих детей отдельной колонкой сбоку.
- *
- * Три режима, выбираются по ширине экрана (или принудительно через `submenuTrigger`):
- *  • `columns-hover` (десктоп)  — подпанель по наведению;
- *  • `columns-click` (планшет)  — подпанель по клику, у дочерней колонки есть «Назад»;
- *  • `drawer`       (мобильный) — `a-drawer-v2` с drill-down по одной колонке.
- *
- * Выбирается ТОЛЬКО лист: узел с детьми лишь раскрывает ветку и значение не меняет.
- */
-defineOptions({ name: 'ACascadeSelectV2' })
-
-const props = withDefaults(defineProps<Props>(), {
-  required: false,
-  keyToShow: 'name',
-  keyToSelect: 'id',
-  childrenKey: 'children',
-  disabledKey: undefined,
-  getOnlyKey: false,
-  clearable: true,
-  disabled: false,
-  size: 'sm',
-  error: undefined,
-  startIcon: undefined,
-  buttonBg: '',
-  panelsSide: 'auto',
-  submenuTrigger: 'auto',
-  hoverOpenDelay: 120,
-  hoverCloseDelay: 200,
-  panelWidth: undefined,
-  panelMinWidth: undefined,
-  panelMaxHeight: undefined,
-  panelTitle: undefined,
-  showPathInTrigger: false,
-  drawerTitle: undefined,
-  drawerHeight: undefined,
-  drawerMaxHeight: undefined,
-  backLabel: 'Назад',
-  emptyLabel: 'Ничего не найдено',
-  mobileBreakpoint: 768,
-  tabletBreakpoint: 1024,
-  teleport: true,
-  zIndex: 10000,
-})
-
-const emits = defineEmits<Emits>()
-
-defineSlots<{
-  'option'?: (props: { option: T, level: number, selected: boolean, hasChildren: boolean, active: boolean }) => unknown
-  'single-selected'?: (props: { value: T, path: T[] }) => unknown
-  'empty'?: () => unknown
-}>()
-
-const modelValue = defineModel<T | unknown | null>({ required: true })
-const isOpen = defineModel<boolean>('open', { default: false })
-
-const keys = computed<CascadeKeys>(() => ({
-  keyToShow: props.keyToShow,
-  keyToSelect: props.keyToSelect,
-  childrenKey: props.childrenKey,
-  disabledKey: props.disabledKey,
-}))
-
-/* Один обход дерева на смену options: дальше все выборки по ключу — O(1). */
-const index = computed(() => buildCascadeIndex(props.options, keys.value))
-
-const selectedKey = computed<unknown>(() => {
-  const value = modelValue.value
-  if (value == null || value === '') return undefined
-  return props.getOnlyKey ? value : nodeKey(value as T, keys.value)
-})
-
-const selectedEntry = computed<CascadeEntry<T> | null>(() =>
-  selectedKey.value === undefined ? null : index.value.get(selectedKey.value) ?? null,
-)
-
-/** Ключи предков выбранного листа — ими раскрываем ветку при открытии. */
-const selectedAncestorKeys = computed<unknown[]>(() =>
-  selectedEntry.value ? selectedEntry.value.keyPath.slice(0, -1) : [],
-)
-
-// -- Навигация -------------------------------------------------------------
-
-/** Цепочка ключей раскрытых родителей: activePath[i] раскрыт из колонки i. */
-const activePath = ref<unknown[]>([])
-
-const resolved = computed(() => resolvePanels(props.options, activePath.value, index.value, keys.value))
-const panels = computed<T[][]>(() => resolved.value.panels)
-/** Путь, обрезанный до реально разрешимого: options могли смениться под нами. */
-const resolvedPath = computed<unknown[]>(() => resolved.value.keyPath)
-
-// -- Режим -----------------------------------------------------------------
-
-const isMobileViewport = useMediaQuery(computed(() => `(max-width: ${props.mobileBreakpoint - 1}px)`))
-const isTabletViewport = useMediaQuery(
-  computed(() => `(min-width: ${props.mobileBreakpoint}px) and (max-width: ${props.tabletBreakpoint - 1}px)`),
-)
-
-const mode = computed<CascadeMode>(() => {
-  if (isMobileViewport.value) return 'drawer'
-  if (props.submenuTrigger === 'hover') return 'columns-hover'
-  if (props.submenuTrigger === 'click') return 'columns-click'
-  return isTabletViewport.value ? 'columns-click' : 'columns-hover'
-})
-
-const isDrawerMode = computed(() => mode.value === 'drawer')
-
-/**
- * Планшет и дровер показывают одну колонку — текущую: вернуться к родителю есть чем
- * («Назад»), а вторая колонка только съедала бы ширину. Десктоп показывает все.
- * Абсолютный `level` сохраняем, чтобы срез не ломал индексацию путей и рефов.
- */
-const panelViews = computed<{ options: T[], level: number }[]>(() => {
-  const all = panels.value.map((options, level) => ({ options, level }))
-  if (isDrawerMode.value || mode.value === 'columns-click') return all.slice(-1)
-  return all
-})
-
-/* undefined доезжает до a-cascade-drawer и там подхватывает его собственные дефолты. */
-const drawerHeightStyle = computed(() => toCssSize(props.drawerHeight))
-const drawerMaxHeightStyle = computed(() => toCssSize(props.drawerMaxHeight))
-
-const drawerView = computed(() => panelViews.value[0] ?? { options: props.options, level: 0 })
-const drawerParentLabel = computed(() => {
-  const level = drawerView.value.level
-  if (level === 0) return ''
-  const entry = index.value.get(resolvedPath.value[level - 1])
-  return entry ? nodeLabel(entry.node, keys.value) : ''
-})
-
-// -- Позиционирование ------------------------------------------------------
-
-const wrapper = ref<HTMLElement | null>(null)
-const triggerRef = ref<{ el: HTMLButtonElement | null, valueEl: HTMLElement | null } | null>(null)
-const reference = computed<HTMLElement | null>(() => triggerRef.value?.el ?? null)
-const floating = ref<HTMLElement | null>(null)
-
-const panelsDir = ref<'right' | 'left'>('right')
-
-const autoMaxHeight = ref('320px')
-/* Ширина триггера, снятая floating-ui: по ней колонки выравниваются с полем, как в ASelectV2. */
-const autoPanelWidth = ref<string>()
-
-const panelMaxHeightStyle = computed(() => toCssSize(props.panelMaxHeight) ?? autoMaxHeight.value)
-const panelWidthStyle = computed(() => toCssSize(props.panelWidth) ?? autoPanelWidth.value)
-const panelMinWidthStyle = computed(() => toCssSize(props.panelMinWidth))
-
-function pxOf(value?: string): number {
-  const match = /^([\d.]+)px$/.exec(value ?? '')
-  return match ? Number.parseFloat(match[1]) : 0
-}
-
-/** Фактическая ширина колонки в пикселях; 0 — размер задан нечисловой единицей, мерить нечем. */
-const panelWidthPx = computed(() => {
-  const width = pxOf(panelWidthStyle.value)
-  if (!width) return 0
-  /* min-width может оказаться больше ширины триггера — тогда колонка шире, чем кажется. */
-  return Math.max(width, pxOf(panelMinWidthStyle.value))
-})
-
-const { width: viewportWidth } = useWindowSize()
-
-/**
- * Колонки фиксированной ширины перестают влезать в экран уже на третьем уровне,
- * а `shift` умеет только сдвигать. Поэтому режем лишние слева — тем же приёмом,
- * что планшет (`slice(-2)`) и дровер (`slice(-1)`).
- */
-const visiblePanelViews = computed(() => {
-  const all = panelViews.value
-  const panelPx = panelWidthPx.value
-  if (isDrawerMode.value || !panelPx || !viewportWidth.value) return all
-
-  const gap = 8 /* gap-2 между колонками */
-  const edges = 16 /* по 8px от краёв — столько же просит shift({ padding: 8 }) */
-  const fits = Math.max(1, Math.floor((viewportWidth.value - edges + gap) / (panelPx + gap)))
-  return all.length > fits ? all.slice(-fits) : all
-})
-
-/**
- * «Назад» нужен на самой мелкой видимой колонке: если срез (планшетный или по ширине экрана)
- * спрятал родителя, вернуться к нему больше нечем. На остальных колонках он был бы дублем.
- */
-function showBackFor(level: number) {
-  if (level === 0) return false
-  return level === (visiblePanelViews.value[0]?.level ?? 0)
-}
-
-const { x, y, strategy, update } = useFloating(reference, floating, {
-  /* Колонки растут вправо от левого края триггера; в зеркальном режиме — влево от правого. */
-  placement: computed(() => (panelsDir.value === 'left' ? 'bottom-end' : 'bottom-start')),
-  strategy: 'fixed',
-  middleware: computed(() => [
-    offset(6),
-    flip({ fallbackPlacements: panelsDir.value === 'left' ? ['top-end'] : ['top-start'] }),
-    shift({ padding: 8 }),
-    floatingSize({
-      /* Пишем в ref только на смену значения: apply зовётся на каждый кадр autoUpdate. */
-      apply({ availableHeight, rects }) {
-        const nextHeight = `${Math.max(160, Math.min(availableHeight, 360))}px`
-        if (nextHeight !== autoMaxHeight.value) autoMaxHeight.value = nextHeight
-
-        const nextWidth = `${Math.round(rects.reference.width)}px`
-        if (nextWidth !== autoPanelWidth.value) autoPanelWidth.value = nextWidth
-      },
-    }),
-  ]),
-})
-
-/* Только на смену: запись меняет placement, тот дёргает update — иначе петля. */
-function setDirection(next: 'right' | 'left') {
-  if (next !== panelsDir.value) panelsDir.value = next
-}
-
-/**
- * Сторону выбираем один раз на изменение набора колонок, а не внутри middleware:
- * измерение в `apply` меняло бы placement, тот — измерение, и получалась бы петля.
- */
-function measureDirection() {
-  if (props.panelsSide !== 'auto') {
-    setDirection(props.panelsSide)
-    return
-  }
-  const rect = reference.value?.getBoundingClientRect()
-  const el = floating.value
-  if (!rect || !el) return
-  const needed = el.scrollWidth
-  const spaceRight = window.innerWidth - rect.left - 8
-  const spaceLeft = rect.right - 8
-  setDirection(needed > spaceRight && spaceLeft > spaceRight ? 'left' : 'right')
-}
-
-watch(() => props.panelsSide, () => measureDirection(), { immediate: true })
-watch([visiblePanelViews, isOpen], () => {
-  if (!isOpen.value || isDrawerMode.value) return
-  nextTick(measureDirection)
-})
-
-let cleanup: (() => void) | null = null
-watch([isOpen, isDrawerMode], () => {
-  cleanup?.()
-  cleanup = null
-  if (!isOpen.value || isDrawerMode.value) return
-  nextTick(() => {
-    if (reference.value && floating.value) {
-      cleanup = autoUpdate(reference.value, floating.value, () => {
-        update()
-        measureDirection()
-      })
-    }
-  })
-})
-
-// -- Таймеры hover-intent (по образцу useTooltipTrigger) --------------------
-
-let openTimer: ReturnType<typeof setTimeout> | null = null
-let collapseTimer: ReturnType<typeof setTimeout> | null = null
-
-function clearOpenTimer() {
-  if (openTimer) {
-    clearTimeout(openTimer)
-    openTimer = null
-  }
-}
-
-function clearCollapseTimer() {
-  if (collapseTimer) {
-    clearTimeout(collapseTimer)
-    collapseTimer = null
-  }
-}
-
-onUnmounted(() => {
-  clearOpenTimer()
-  clearCollapseTimer()
-  cleanup?.()
-})
-
-// -- Действия --------------------------------------------------------------
-
-const toggleOpen = useToggle(isOpen)
-
-function openBranch(level: number, node: T) {
-  activePath.value = [...resolvedPath.value.slice(0, level), nodeKey(node, keys.value)]
-}
-
-function collapseTo(level: number) {
-  activePath.value = resolvedPath.value.slice(0, level)
-}
-
-function selectLeaf(node: T) {
-  const entry = index.value.get(nodeKey(node, keys.value))
-  modelValue.value = props.getOnlyKey ? nodeKey(node, keys.value) : node
-  emits('onChange', node, entry?.path ?? [node])
-  toggleOpen(false)
-}
-
-function activate(level: number, node: T) {
-  if (isDisabled(node, keys.value)) return
-  clearOpenTimer()
-  clearCollapseTimer()
-  if (isLeaf(node, keys.value)) {
-    selectLeaf(node)
-    return
-  }
-  openBranch(level, node)
-  focusRow(level + 1, firstEnabledKey(level + 1))
-}
-
-function goBackFrom(level: number) {
-  activePath.value = resolvedPath.value.slice(0, Math.max(0, level - 1))
-}
-
-function goBack() {
-  goBackFrom(drawerView.value.level)
-}
-
-function onClear() {
-  modelValue.value = null
-  activePath.value = []
-  emits('onClear')
-}
-
-defineExpose({ onClear })
-
-// -- Hover -----------------------------------------------------------------
-
-function onRowHover(level: number, node: T) {
-  if (mode.value !== 'columns-hover') return
-  clearCollapseTimer()
-  clearOpenTimer()
-  openTimer = setTimeout(() => {
-    openTimer = null
-    if (isDisabled(node, keys.value)) return
-    if (isLeaf(node, keys.value)) collapseTo(level)
-    else openBranch(level, node)
-  }, props.hoverOpenDelay)
-}
-
-function onPanelsEnter() {
-  clearCollapseTimer()
-}
-
-/* Уводя мышь со всего каскада, схлопываем его до ветки выбранного значения. */
-function onPanelsLeave() {
-  clearOpenTimer()
-  if (mode.value !== 'columns-hover') return
-  clearCollapseTimer()
-  collapseTimer = setTimeout(() => {
-    collapseTimer = null
-    activePath.value = selectedAncestorKeys.value
-  }, props.hoverCloseDelay)
-}
-
-// -- Клавиатура ------------------------------------------------------------
-
-const focused = ref<{ level: number, key: unknown } | null>(null)
-const panelRefs = ref<Record<number, { focusItem: (key: unknown) => void } | null>>({})
-
-function setPanelRef(el: unknown, level: number) {
-  if (el == null) delete panelRefs.value[level]
-  else panelRefs.value[level] = el as { focusItem: (key: unknown) => void }
-}
-
-function enabledRows(level: number): T[] {
-  return (panels.value[level] ?? []).filter(node => !isDisabled(node, keys.value))
-}
-
-function firstEnabledKey(level: number): unknown {
-  const rows = enabledRows(level)
-  return rows.length ? nodeKey(rows[0], keys.value) : undefined
-}
-
-function focusRow(level: number, key: unknown) {
-  if (key === undefined || isDrawerMode.value) return
-  focused.value = { level, key }
-  nextTick(() => panelRefs.value[level]?.focusItem(key))
-}
-
-function nodeByKey(level: number, key: unknown): T | undefined {
-  return (panels.value[level] ?? []).find(node => isEqual(nodeKey(node, keys.value), key))
-}
-
-function moveWithin(level: number, delta: number) {
-  const rows = enabledRows(level)
-  if (!rows.length) return
-  const current = rows.findIndex(node => isEqual(nodeKey(node, keys.value), focused.value?.key))
-  const next = current === -1
-    ? (delta > 0 ? 0 : rows.length - 1)
-    : (current + delta + rows.length) % rows.length
-  focusRow(level, nodeKey(rows[next], keys.value))
-}
-
-function focusInitial() {
-  if (isDrawerMode.value) return
-  const entry = selectedEntry.value
-  if (entry) {
-    focusRow(entry.level, selectedKey.value)
-    return
-  }
-  focusRow(0, firstEnabledKey(0))
-}
-
-function closeAndRestoreFocus() {
-  toggleOpen(false)
-  nextTick(() => reference.value?.focus())
-}
-
-function onKeydown(event: KeyboardEvent) {
-  if (props.disabled) return
-
-  if (!isOpen.value) {
-    if (event.key === 'ArrowDown') {
-      event.preventDefault()
-      toggleOpen(true)
-    }
-    return
-  }
-
-  if (event.key === 'Escape') {
-    event.preventDefault()
-    closeAndRestoreFocus()
-    return
-  }
-
-  if (event.key === 'Tab') {
-    toggleOpen(false)
-    return
-  }
-
-  if (isDrawerMode.value) return
-
-  const level = focused.value?.level ?? 0
-
-  switch (event.key) {
-    case 'ArrowDown':
-      event.preventDefault()
-      moveWithin(level, 1)
-      break
-    case 'ArrowUp':
-      event.preventDefault()
-      moveWithin(level, -1)
-      break
-    case 'Home':
-      event.preventDefault()
-      focusRow(level, firstEnabledKey(level))
-      break
-    case 'End': {
-      event.preventDefault()
-      const rows = enabledRows(level)
-      if (rows.length) focusRow(level, nodeKey(rows[rows.length - 1], keys.value))
-      break
-    }
-    case 'ArrowRight': {
-      const node = focused.value ? nodeByKey(level, focused.value.key) : undefined
-      if (!node || isLeaf(node, keys.value)) break
-      event.preventDefault()
-      openBranch(level, node)
-      focusRow(level + 1, firstEnabledKey(level + 1))
-      break
-    }
-    case 'ArrowLeft': {
-      if (level === 0) break
-      event.preventDefault()
-      const parentKey = resolvedPath.value[level - 1]
-      goBackFrom(level)
-      focusRow(level - 1, parentKey)
-      break
-    }
-  }
-}
-
-// -- Открытие / закрытие ---------------------------------------------------
-
-watch(isOpen, (open) => {
-  clearOpenTimer()
-  clearCollapseTimer()
-  if (open) {
-    activePath.value = selectedAncestorKeys.value
-    /* Ширину берём с триггера сразу: иначе колонка мигнёт фолбэком min-w-45 и прыгнет. */
-    const triggerWidth = reference.value?.offsetWidth
-    if (triggerWidth) autoPanelWidth.value = `${Math.round(triggerWidth)}px`
-    nextTick(focusInitial)
-  }
-  else {
-    focused.value = null
-  }
-})
-
-onClickOutside(floating, () => {
-  if (isOpen.value && !isDrawerMode.value) toggleOpen(false)
-}, { ignore: [reference] })
-
-// -- Отображение в триггере ------------------------------------------------
-
-const displayValue = computed(() => {
-  const entry = selectedEntry.value
-  if (!entry) return ''
-  return props.showPathInTrigger
-    ? pathLabel(entry.path, keys.value)
-    : nodeLabel(entry.node, keys.value)
-})
-
-const rootPanelTitle = computed(() => props.panelTitle ?? props.label)
-</script>
-
-<template>
-  <div
-    ref="wrapper"
-    class="cascade-select relative w-full text-body-md"
-    @keydown="onKeydown"
-  >
-    <a-select-trigger
-      ref="triggerRef"
-      :label="label"
-      :required="required"
-      :size="size"
-      :disabled="disabled"
-      :error="error"
-      :is-open="isOpen"
-      :start-icon="startIcon"
-      :button-bg="buttonBg"
-      :clearable="clearable"
-      :show-clear="clearable && !!selectedEntry"
-      floating-label
-      :has-value="!!selectedEntry"
-      @toggle="toggleOpen()"
-      @clear="onClear"
-    >
-      <span v-if="selectedEntry" class="block truncate leading-tight">
-        <slot
-          name="single-selected"
-          :value="selectedEntry.node"
-          :path="selectedEntry.path"
-        >{{ displayValue }}</slot>
-      </span>
-      <span v-else class="text-secondary">&#8203;</span>
-    </a-select-trigger>
-
-    <client-only>
-      <teleport
-        to="body"
-        :disabled="!teleport"
-      >
-        <transition
-          enter-active-class="cascade-select__enter-active"
-          enter-from-class="cascade-select__enter-from"
-          enter-to-class="cascade-select__enter-to"
-          leave-active-class="cascade-select__leave-active"
-          leave-from-class="cascade-select__leave-from"
-          leave-to-class="cascade-select__leave-to"
-        >
-          <div
-            v-if="isOpen && !isDrawerMode"
-            ref="floating"
-            class="cascade-select__panels flex items-start gap-2"
-            :class="{ 'flex-row-reverse': panelsDir === 'left' }"
-            :style="{
-              position: strategy,
-              left: x != null ? `${x}px` : '',
-              top: y != null ? `${y}px` : '',
-              zIndex,
-            }"
-            @pointerenter="onPanelsEnter"
-            @pointerleave="onPanelsLeave"
-            @keydown="onKeydown"
-          >
-            <a-cascade-panel
-              v-for="view in visiblePanelViews"
-              :key="view.level"
-              :ref="(el: any) => setPanelRef(el, view.level)"
-              :options="view.options"
-              :keys="keys"
-              :level="view.level"
-              :active-key="resolvedPath[view.level]"
-              :selected-key="selectedKey"
-              :focused-key="focused?.level === view.level ? focused?.key : undefined"
-              :title="view.level === 0 ? rootPanelTitle : ''"
-              :show-back="showBackFor(view.level)"
-              :mirrored="panelsDir === 'left'"
-              :back-label="backLabel"
-              :width="panelWidthStyle"
-              :min-width="panelMinWidthStyle"
-              :max-height="panelMaxHeightStyle"
-              :empty-label="emptyLabel"
-              @activate="activate(view.level, $event)"
-              @hover="onRowHover(view.level, $event)"
-              @back="goBackFrom(view.level)"
-            >
-              <template #option="slotProps">
-                <slot name="option" v-bind="slotProps" />
-              </template>
-              <template #empty>
-                <slot name="empty" />
-              </template>
-            </a-cascade-panel>
-          </div>
-        </transition>
-      </teleport>
-
-      <a-cascade-drawer
-        v-if="isDrawerMode"
-        v-model="isOpen"
-        :options="drawerView.options"
-        :keys="keys"
-        :level="drawerView.level"
-        :title="drawerTitle ?? label"
-        :parent-label="drawerParentLabel"
-        :back-label="backLabel"
-        :selected-key="selectedKey"
-        :height="drawerHeightStyle"
-        :max-height="drawerMaxHeightStyle"
-        :z-index="zIndex"
-        @activate="activate(drawerView.level, $event)"
-        @back="goBack"
-      >
-        <template #option="slotProps">
-          <slot name="option" v-bind="slotProps" />
-        </template>
-        <template #empty>
-          <slot name="empty" />
-        </template>
-      </a-cascade-drawer>
-    </client-only>
-  </div>
-</template>
-
-<style scoped>
-.cascade-select__enter-active,
-.cascade-select__leave-active {
-  transition:
-    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
-    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.cascade-select__enter-from,
-.cascade-select__leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-.cascade-select__enter-to,
-.cascade-select__leave-from {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .cascade-select__enter-active,
-  .cascade-select__leave-active {
-    transition: none;
-  }
-}
-</style>
+<script generic="T" lang="ts" setup>
+import type { CascadeEntry, CascadeKeys, CascadeMode } from './types'
+import { toCssSize } from '#adata-ui/utils/toCssSize'
+import { autoUpdate, flip, size as floatingSize, offset, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside, useMediaQuery, useToggle, useWindowSize } from '@vueuse/core'
+import { isEqual } from 'lodash-es'
+import { buildCascadeIndex, isDisabled, isLeaf, nodeKey, nodeLabel, pathLabel, resolvePanels } from './cascade-utils'
+
+interface Props {
+  label: string
+  options: T[]
+  required?: boolean
+  keyToShow?: string
+  keyToSelect?: string
+  childrenKey?: string
+  disabledKey?: string
+  /** `true` — в v-model лежит ключ листа, `false` — сам объект листа. */
+  getOnlyKey?: boolean
+  clearable?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md'
+  error?: string | string[]
+  startIcon?: object
+  buttonBg?: string
+  /** Куда растут подпанели. `auto` — вправо, а если не влезает, влево. */
+  panelsSide?: 'auto' | 'right' | 'left'
+  /** Принудительный режим раскрытия вместо авто-выбора по ширине экрана. */
+  submenuTrigger?: 'auto' | 'hover' | 'click'
+  hoverOpenDelay?: number
+  hoverCloseDelay?: number
+  /** Ширина колонки. По умолчанию — ширина триггера. */
+  panelWidth?: number | string
+  /** Нижняя граница ширины колонки — когда триггер узкий, а подписи длинные. */
+  panelMinWidth?: number | string
+  panelMaxHeight?: number | string
+  /** Подпись первой колонки. По умолчанию — `label`. */
+  panelTitle?: string
+  /** Показывать в триггере весь путь («Кварталы / 1 квартал 2026»). */
+  showPathInTrigger?: boolean
+  drawerTitle?: string
+  /** Фиксированная общая высота мобильного дровера («70dvh»). */
+  drawerHeight?: number | string
+  drawerMaxHeight?: number | string
+  backLabel?: string
+  emptyLabel?: string
+  mobileBreakpoint?: number
+  tabletBreakpoint?: number
+  teleport?: boolean
+  /** Слой выпадашки и мобильного дровера. */
+  zIndex?: number | string
+}
+
+interface Emits {
+  (e: 'onChange', option: T, path: T[]): void
+  (e: 'onClear'): void
+}
+
+/**
+ * Каскадный селект: опция-родитель раскрывает своих детей отдельной колонкой сбоку.
+ *
+ * Три режима, выбираются по ширине экрана (или принудительно через `submenuTrigger`):
+ *  • `columns-hover` (десктоп)  — подпанель по наведению;
+ *  • `columns-click` (планшет)  — подпанель по клику, у дочерней колонки есть «Назад»;
+ *  • `drawer`       (мобильный) — `a-drawer-v2` с drill-down по одной колонке.
+ *
+ * Выбирается ТОЛЬКО лист: узел с детьми лишь раскрывает ветку и значение не меняет.
+ */
+defineOptions({ name: 'ACascadeSelectV2' })
+
+const props = withDefaults(defineProps<Props>(), {
+  required: false,
+  keyToShow: 'name',
+  keyToSelect: 'id',
+  childrenKey: 'children',
+  disabledKey: undefined,
+  getOnlyKey: false,
+  clearable: true,
+  disabled: false,
+  size: 'sm',
+  error: undefined,
+  startIcon: undefined,
+  buttonBg: '',
+  panelsSide: 'auto',
+  submenuTrigger: 'auto',
+  hoverOpenDelay: 120,
+  hoverCloseDelay: 200,
+  panelWidth: undefined,
+  panelMinWidth: undefined,
+  panelMaxHeight: undefined,
+  panelTitle: undefined,
+  showPathInTrigger: false,
+  drawerTitle: undefined,
+  drawerHeight: undefined,
+  drawerMaxHeight: undefined,
+  backLabel: 'Назад',
+  emptyLabel: 'Ничего не найдено',
+  mobileBreakpoint: 768,
+  tabletBreakpoint: 1024,
+  teleport: true,
+  zIndex: 10000,
+})
+
+const emits = defineEmits<Emits>()
+
+defineSlots<{
+  'option'?: (props: { option: T, level: number, selected: boolean, hasChildren: boolean, active: boolean }) => unknown
+  'single-selected'?: (props: { value: T, path: T[] }) => unknown
+  'empty'?: () => unknown
+}>()
+
+const modelValue = defineModel<T | unknown | null>({ required: true })
+const isOpen = defineModel<boolean>('open', { default: false })
+
+const keys = computed<CascadeKeys>(() => ({
+  keyToShow: props.keyToShow,
+  keyToSelect: props.keyToSelect,
+  childrenKey: props.childrenKey,
+  disabledKey: props.disabledKey,
+}))
+
+/* Один обход дерева на смену options: дальше все выборки по ключу — O(1). */
+const index = computed(() => buildCascadeIndex(props.options, keys.value))
+
+const selectedKey = computed<unknown>(() => {
+  const value = modelValue.value
+  if (value == null || value === '') return undefined
+  return props.getOnlyKey ? value : nodeKey(value as T, keys.value)
+})
+
+const selectedEntry = computed<CascadeEntry<T> | null>(() =>
+  selectedKey.value === undefined ? null : index.value.get(selectedKey.value) ?? null,
+)
+
+/** Ключи предков выбранного листа — ими раскрываем ветку при открытии. */
+const selectedAncestorKeys = computed<unknown[]>(() =>
+  selectedEntry.value ? selectedEntry.value.keyPath.slice(0, -1) : [],
+)
+
+// -- Навигация -------------------------------------------------------------
+
+/** Цепочка ключей раскрытых родителей: activePath[i] раскрыт из колонки i. */
+const activePath = ref<unknown[]>([])
+
+const resolved = computed(() => resolvePanels(props.options, activePath.value, index.value, keys.value))
+const panels = computed<T[][]>(() => resolved.value.panels)
+/** Путь, обрезанный до реально разрешимого: options могли смениться под нами. */
+const resolvedPath = computed<unknown[]>(() => resolved.value.keyPath)
+
+// -- Режим -----------------------------------------------------------------
+
+const isMobileViewport = useMediaQuery(computed(() => `(max-width: ${props.mobileBreakpoint - 1}px)`))
+const isTabletViewport = useMediaQuery(
+  computed(() => `(min-width: ${props.mobileBreakpoint}px) and (max-width: ${props.tabletBreakpoint - 1}px)`),
+)
+
+const mode = computed<CascadeMode>(() => {
+  if (isMobileViewport.value) return 'drawer'
+  if (props.submenuTrigger === 'hover') return 'columns-hover'
+  if (props.submenuTrigger === 'click') return 'columns-click'
+  return isTabletViewport.value ? 'columns-click' : 'columns-hover'
+})
+
+const isDrawerMode = computed(() => mode.value === 'drawer')
+
+/**
+ * Планшет и дровер показывают одну колонку — текущую: вернуться к родителю есть чем
+ * («Назад»), а вторая колонка только съедала бы ширину. Десктоп показывает все.
+ * Абсолютный `level` сохраняем, чтобы срез не ломал индексацию путей и рефов.
+ */
+const panelViews = computed<{ options: T[], level: number }[]>(() => {
+  const all = panels.value.map((options, level) => ({ options, level }))
+  if (isDrawerMode.value || mode.value === 'columns-click') return all.slice(-1)
+  return all
+})
+
+/* undefined доезжает до a-cascade-drawer и там подхватывает его собственные дефолты. */
+const drawerHeightStyle = computed(() => toCssSize(props.drawerHeight))
+const drawerMaxHeightStyle = computed(() => toCssSize(props.drawerMaxHeight))
+
+const drawerView = computed(() => panelViews.value[0] ?? { options: props.options, level: 0 })
+const drawerParentLabel = computed(() => {
+  const level = drawerView.value.level
+  if (level === 0) return ''
+  const entry = index.value.get(resolvedPath.value[level - 1])
+  return entry ? nodeLabel(entry.node, keys.value) : ''
+})
+
+// -- Позиционирование ------------------------------------------------------
+
+const wrapper = ref<HTMLElement | null>(null)
+const triggerRef = ref<{ el: HTMLButtonElement | null, valueEl: HTMLElement | null } | null>(null)
+const reference = computed<HTMLElement | null>(() => triggerRef.value?.el ?? null)
+const floating = ref<HTMLElement | null>(null)
+
+const panelsDir = ref<'right' | 'left'>('right')
+
+const autoMaxHeight = ref('320px')
+/* Ширина триггера, снятая floating-ui: по ней колонки выравниваются с полем, как в ASelectV2. */
+const autoPanelWidth = ref<string>()
+
+const panelMaxHeightStyle = computed(() => toCssSize(props.panelMaxHeight) ?? autoMaxHeight.value)
+const panelWidthStyle = computed(() => toCssSize(props.panelWidth) ?? autoPanelWidth.value)
+const panelMinWidthStyle = computed(() => toCssSize(props.panelMinWidth))
+
+function pxOf(value?: string): number {
+  const match = /^([\d.]+)px$/.exec(value ?? '')
+  return match ? Number.parseFloat(match[1]) : 0
+}
+
+/** Фактическая ширина колонки в пикселях; 0 — размер задан нечисловой единицей, мерить нечем. */
+const panelWidthPx = computed(() => {
+  const width = pxOf(panelWidthStyle.value)
+  if (!width) return 0
+  /* min-width может оказаться больше ширины триггера — тогда колонка шире, чем кажется. */
+  return Math.max(width, pxOf(panelMinWidthStyle.value))
+})
+
+const { width: viewportWidth } = useWindowSize()
+
+/**
+ * Колонки фиксированной ширины перестают влезать в экран уже на третьем уровне,
+ * а `shift` умеет только сдвигать. Поэтому режем лишние слева — тем же приёмом,
+ * что планшет (`slice(-2)`) и дровер (`slice(-1)`).
+ */
+const visiblePanelViews = computed(() => {
+  const all = panelViews.value
+  const panelPx = panelWidthPx.value
+  if (isDrawerMode.value || !panelPx || !viewportWidth.value) return all
+
+  const gap = 8 /* gap-2 между колонками */
+  const edges = 16 /* по 8px от краёв — столько же просит shift({ padding: 8 }) */
+  const fits = Math.max(1, Math.floor((viewportWidth.value - edges + gap) / (panelPx + gap)))
+  return all.length > fits ? all.slice(-fits) : all
+})
+
+/**
+ * «Назад» нужен на самой мелкой видимой колонке: если срез (планшетный или по ширине экрана)
+ * спрятал родителя, вернуться к нему больше нечем. На остальных колонках он был бы дублем.
+ */
+function showBackFor(level: number) {
+  if (level === 0) return false
+  return level === (visiblePanelViews.value[0]?.level ?? 0)
+}
+
+const { x, y, strategy, update } = useFloating(reference, floating, {
+  /* Колонки растут вправо от левого края триггера; в зеркальном режиме — влево от правого. */
+  placement: computed(() => (panelsDir.value === 'left' ? 'bottom-end' : 'bottom-start')),
+  strategy: 'fixed',
+  middleware: computed(() => [
+    offset(6),
+    flip({ fallbackPlacements: panelsDir.value === 'left' ? ['top-end'] : ['top-start'] }),
+    shift({ padding: 8 }),
+    floatingSize({
+      /* Пишем в ref только на смену значения: apply зовётся на каждый кадр autoUpdate. */
+      apply({ availableHeight, rects }) {
+        const nextHeight = `${Math.max(160, Math.min(availableHeight, 360))}px`
+        if (nextHeight !== autoMaxHeight.value) autoMaxHeight.value = nextHeight
+
+        const nextWidth = `${Math.round(rects.reference.width)}px`
+        if (nextWidth !== autoPanelWidth.value) autoPanelWidth.value = nextWidth
+      },
+    }),
+  ]),
+})
+
+/* Только на смену: запись меняет placement, тот дёргает update — иначе петля. */
+function setDirection(next: 'right' | 'left') {
+  if (next !== panelsDir.value) panelsDir.value = next
+}
+
+/**
+ * Сторону выбираем один раз на изменение набора колонок, а не внутри middleware:
+ * измерение в `apply` меняло бы placement, тот — измерение, и получалась бы петля.
+ */
+function measureDirection() {
+  if (props.panelsSide !== 'auto') {
+    setDirection(props.panelsSide)
+    return
+  }
+  const rect = reference.value?.getBoundingClientRect()
+  const el = floating.value
+  if (!rect || !el) return
+  const needed = el.scrollWidth
+  const spaceRight = window.innerWidth - rect.left - 8
+  const spaceLeft = rect.right - 8
+  setDirection(needed > spaceRight && spaceLeft > spaceRight ? 'left' : 'right')
+}
+
+watch(() => props.panelsSide, () => measureDirection(), { immediate: true })
+watch([visiblePanelViews, isOpen], () => {
+  if (!isOpen.value || isDrawerMode.value) return
+  nextTick(measureDirection)
+})
+
+let cleanup: (() => void) | null = null
+watch([isOpen, isDrawerMode], () => {
+  cleanup?.()
+  cleanup = null
+  if (!isOpen.value || isDrawerMode.value) return
+  nextTick(() => {
+    if (reference.value && floating.value) {
+      cleanup = autoUpdate(reference.value, floating.value, () => {
+        update()
+        measureDirection()
+      })
+    }
+  })
+})
+
+// -- Таймеры hover-intent (по образцу useTooltipTrigger) --------------------
+
+let openTimer: ReturnType<typeof setTimeout> | null = null
+let collapseTimer: ReturnType<typeof setTimeout> | null = null
+
+function clearOpenTimer() {
+  if (openTimer) {
+    clearTimeout(openTimer)
+    openTimer = null
+  }
+}
+
+function clearCollapseTimer() {
+  if (collapseTimer) {
+    clearTimeout(collapseTimer)
+    collapseTimer = null
+  }
+}
+
+onUnmounted(() => {
+  clearOpenTimer()
+  clearCollapseTimer()
+  cleanup?.()
+})
+
+// -- Действия --------------------------------------------------------------
+
+const toggleOpen = useToggle(isOpen)
+
+function openBranch(level: number, node: T) {
+  activePath.value = [...resolvedPath.value.slice(0, level), nodeKey(node, keys.value)]
+}
+
+function collapseTo(level: number) {
+  activePath.value = resolvedPath.value.slice(0, level)
+}
+
+function selectLeaf(node: T) {
+  const entry = index.value.get(nodeKey(node, keys.value))
+  modelValue.value = props.getOnlyKey ? nodeKey(node, keys.value) : node
+  emits('onChange', node, entry?.path ?? [node])
+  toggleOpen(false)
+}
+
+function activate(level: number, node: T) {
+  if (isDisabled(node, keys.value)) return
+  clearOpenTimer()
+  clearCollapseTimer()
+  if (isLeaf(node, keys.value)) {
+    selectLeaf(node)
+    return
+  }
+  openBranch(level, node)
+  focusRow(level + 1, firstEnabledKey(level + 1))
+}
+
+function goBackFrom(level: number) {
+  activePath.value = resolvedPath.value.slice(0, Math.max(0, level - 1))
+}
+
+function goBack() {
+  goBackFrom(drawerView.value.level)
+}
+
+function onClear() {
+  modelValue.value = null
+  activePath.value = []
+  emits('onClear')
+}
+
+defineExpose({ onClear })
+
+// -- Hover -----------------------------------------------------------------
+
+function onRowHover(level: number, node: T) {
+  if (mode.value !== 'columns-hover') return
+  clearCollapseTimer()
+  clearOpenTimer()
+  openTimer = setTimeout(() => {
+    openTimer = null
+    if (isDisabled(node, keys.value)) return
+    if (isLeaf(node, keys.value)) collapseTo(level)
+    else openBranch(level, node)
+  }, props.hoverOpenDelay)
+}
+
+function onPanelsEnter() {
+  clearCollapseTimer()
+}
+
+/* Уводя мышь со всего каскада, схлопываем его до ветки выбранного значения. */
+function onPanelsLeave() {
+  clearOpenTimer()
+  if (mode.value !== 'columns-hover') return
+  clearCollapseTimer()
+  collapseTimer = setTimeout(() => {
+    collapseTimer = null
+    activePath.value = selectedAncestorKeys.value
+  }, props.hoverCloseDelay)
+}
+
+// -- Клавиатура ------------------------------------------------------------
+
+const focused = ref<{ level: number, key: unknown } | null>(null)
+const panelRefs = ref<Record<number, { focusItem: (key: unknown) => void } | null>>({})
+
+function setPanelRef(el: unknown, level: number) {
+  if (el == null) delete panelRefs.value[level]
+  else panelRefs.value[level] = el as { focusItem: (key: unknown) => void }
+}
+
+function enabledRows(level: number): T[] {
+  return (panels.value[level] ?? []).filter(node => !isDisabled(node, keys.value))
+}
+
+function firstEnabledKey(level: number): unknown {
+  const rows = enabledRows(level)
+  return rows.length ? nodeKey(rows[0], keys.value) : undefined
+}
+
+function focusRow(level: number, key: unknown) {
+  if (key === undefined || isDrawerMode.value) return
+  focused.value = { level, key }
+  nextTick(() => panelRefs.value[level]?.focusItem(key))
+}
+
+function nodeByKey(level: number, key: unknown): T | undefined {
+  return (panels.value[level] ?? []).find(node => isEqual(nodeKey(node, keys.value), key))
+}
+
+function moveWithin(level: number, delta: number) {
+  const rows = enabledRows(level)
+  if (!rows.length) return
+  const current = rows.findIndex(node => isEqual(nodeKey(node, keys.value), focused.value?.key))
+  const next = current === -1
+    ? (delta > 0 ? 0 : rows.length - 1)
+    : (current + delta + rows.length) % rows.length
+  focusRow(level, nodeKey(rows[next], keys.value))
+}
+
+function focusInitial() {
+  if (isDrawerMode.value) return
+  const entry = selectedEntry.value
+  if (entry) {
+    focusRow(entry.level, selectedKey.value)
+    return
+  }
+  focusRow(0, firstEnabledKey(0))
+}
+
+function closeAndRestoreFocus() {
+  toggleOpen(false)
+  nextTick(() => reference.value?.focus())
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (props.disabled) return
+
+  if (!isOpen.value) {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      toggleOpen(true)
+    }
+    return
+  }
+
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    closeAndRestoreFocus()
+    return
+  }
+
+  if (event.key === 'Tab') {
+    toggleOpen(false)
+    return
+  }
+
+  if (isDrawerMode.value) return
+
+  const level = focused.value?.level ?? 0
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      moveWithin(level, 1)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      moveWithin(level, -1)
+      break
+    case 'Home':
+      event.preventDefault()
+      focusRow(level, firstEnabledKey(level))
+      break
+    case 'End': {
+      event.preventDefault()
+      const rows = enabledRows(level)
+      if (rows.length) focusRow(level, nodeKey(rows[rows.length - 1], keys.value))
+      break
+    }
+    case 'ArrowRight': {
+      const node = focused.value ? nodeByKey(level, focused.value.key) : undefined
+      if (!node || isLeaf(node, keys.value)) break
+      event.preventDefault()
+      openBranch(level, node)
+      focusRow(level + 1, firstEnabledKey(level + 1))
+      break
+    }
+    case 'ArrowLeft': {
+      if (level === 0) break
+      event.preventDefault()
+      const parentKey = resolvedPath.value[level - 1]
+      goBackFrom(level)
+      focusRow(level - 1, parentKey)
+      break
+    }
+  }
+}
+
+// -- Открытие / закрытие ---------------------------------------------------
+
+watch(isOpen, (open) => {
+  clearOpenTimer()
+  clearCollapseTimer()
+  if (open) {
+    activePath.value = selectedAncestorKeys.value
+    /* Ширину берём с триггера сразу: иначе колонка мигнёт фолбэком min-w-45 и прыгнет. */
+    const triggerWidth = reference.value?.offsetWidth
+    if (triggerWidth) autoPanelWidth.value = `${Math.round(triggerWidth)}px`
+    nextTick(focusInitial)
+  }
+  else {
+    focused.value = null
+  }
+})
+
+onClickOutside(floating, () => {
+  if (isOpen.value && !isDrawerMode.value) toggleOpen(false)
+}, { ignore: [reference] })
+
+// -- Отображение в триггере ------------------------------------------------
+
+const displayValue = computed(() => {
+  const entry = selectedEntry.value
+  if (!entry) return ''
+  return props.showPathInTrigger
+    ? pathLabel(entry.path, keys.value)
+    : nodeLabel(entry.node, keys.value)
+})
+
+const rootPanelTitle = computed(() => props.panelTitle ?? props.label)
+</script>
+
+<template>
+  <div
+    ref="wrapper"
+    class="cascade-select relative w-full text-body-md"
+    @keydown="onKeydown"
+  >
+    <a-select-trigger
+      ref="triggerRef"
+      :label="label"
+      :required="required"
+      :size="size"
+      :disabled="disabled"
+      :error="error"
+      :is-open="isOpen"
+      :start-icon="startIcon"
+      :button-bg="buttonBg"
+      :clearable="clearable"
+      :show-clear="clearable && !!selectedEntry"
+      floating-label
+      :has-value="!!selectedEntry"
+      @toggle="toggleOpen()"
+      @clear="onClear"
+    >
+      <span v-if="selectedEntry" class="block truncate leading-tight">
+        <slot
+          name="single-selected"
+          :value="selectedEntry.node"
+          :path="selectedEntry.path"
+        >{{ displayValue }}</slot>
+      </span>
+      <span v-else class="text-secondary">&#8203;</span>
+    </a-select-trigger>
+
+    <client-only>
+      <teleport
+        to="body"
+        :disabled="!teleport"
+      >
+        <transition
+          enter-active-class="cascade-select__enter-active"
+          enter-from-class="cascade-select__enter-from"
+          enter-to-class="cascade-select__enter-to"
+          leave-active-class="cascade-select__leave-active"
+          leave-from-class="cascade-select__leave-from"
+          leave-to-class="cascade-select__leave-to"
+        >
+          <div
+            v-if="isOpen && !isDrawerMode"
+            ref="floating"
+            class="cascade-select__panels flex items-start gap-2"
+            :class="{ 'flex-row-reverse': panelsDir === 'left' }"
+            :style="{
+              position: strategy,
+              left: x != null ? `${x}px` : '',
+              top: y != null ? `${y}px` : '',
+              zIndex,
+            }"
+            @pointerenter="onPanelsEnter"
+            @pointerleave="onPanelsLeave"
+            @keydown="onKeydown"
+          >
+            <a-cascade-panel
+              v-for="view in visiblePanelViews"
+              :key="view.level"
+              :ref="(el: any) => setPanelRef(el, view.level)"
+              :options="view.options"
+              :keys="keys"
+              :level="view.level"
+              :active-key="resolvedPath[view.level]"
+              :selected-key="selectedKey"
+              :focused-key="focused?.level === view.level ? focused?.key : undefined"
+              :title="view.level === 0 ? rootPanelTitle : ''"
+              :show-back="showBackFor(view.level)"
+              :mirrored="panelsDir === 'left'"
+              :back-label="backLabel"
+              :width="panelWidthStyle"
+              :min-width="panelMinWidthStyle"
+              :max-height="panelMaxHeightStyle"
+              :empty-label="emptyLabel"
+              @activate="activate(view.level, $event)"
+              @hover="onRowHover(view.level, $event)"
+              @back="goBackFrom(view.level)"
+            >
+              <template #option="slotProps">
+                <slot name="option" v-bind="slotProps" />
+              </template>
+              <template #empty>
+                <slot name="empty" />
+              </template>
+            </a-cascade-panel>
+          </div>
+        </transition>
+      </teleport>
+
+      <a-cascade-drawer
+        v-if="isDrawerMode"
+        v-model="isOpen"
+        :options="drawerView.options"
+        :keys="keys"
+        :level="drawerView.level"
+        :title="drawerTitle ?? label"
+        :parent-label="drawerParentLabel"
+        :back-label="backLabel"
+        :selected-key="selectedKey"
+        :height="drawerHeightStyle"
+        :max-height="drawerMaxHeightStyle"
+        :z-index="zIndex"
+        @activate="activate(drawerView.level, $event)"
+        @back="goBack"
+      >
+        <template #option="slotProps">
+          <slot name="option" v-bind="slotProps" />
+        </template>
+        <template #empty>
+          <slot name="empty" />
+        </template>
+      </a-cascade-drawer>
+    </client-only>
+  </div>
+</template>
+
+<style scoped>
+.cascade-select__enter-active,
+.cascade-select__leave-active {
+  transition:
+    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.cascade-select__enter-from,
+.cascade-select__leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.cascade-select__enter-to,
+.cascade-select__leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cascade-select__enter-active,
+  .cascade-select__leave-active {
+    transition: none;
+  }
+}
+</style>