adata-ui 2.1.41-beta.5 → 2.1.41-beta.7

package/components/elements/select/ACascadeSelectV2.vue

@@ -0,0 +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>