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

package/components/elements/select/ASelectV2.vue

@@ -1,10 +1,10 @@
 <script generic="T" lang="ts" setup>
 import type { Placement } from '@floating-ui/vue'
+import { useChipOverflow } from '#adata-ui/composables/useChipOverflow'
+import { toCssSize } from '#adata-ui/utils/toCssSize'
 import { autoUpdate, flip, size as floatingSize, offset, shift, useFloating } from '@floating-ui/vue'
 import { onClickOutside, useToggle } from '@vueuse/core'
-import { useChipOverflow } from '#adata-ui/composables/useChipOverflow'
-
-import pkg from 'lodash'
+import { isEqual } from 'lodash-es'
 
 interface Props {
   label: string
@@ -76,16 +76,11 @@ const modelValue = defineModel<T | T[] | null | any>({ required: true })
 const search = defineModel<T | null | any>('search')
 const isOpen = defineModel<boolean>('open', { default: false })
 
-const { isEqual } = pkg
-
-const reference = ref<HTMLElement | null>(null)
+const triggerRef = ref<{ el: HTMLButtonElement | null, valueEl: HTMLElement | null } | null>(null)
+/* Reference-элемент живёт внутри <a-select-trigger>, поэтому разворачиваем его через expose. */
+const reference = computed<HTMLElement | null>(() => triggerRef.value?.el ?? null)
 const floating = ref<HTMLElement | null>(null)
 
-function toCssSize(v?: number | string): string | null {
-  if (v == null || v === '') return null
-  return typeof v === 'number' ? `${v}px` : v
-}
-
 const anchorEl = computed<HTMLElement | null>(() => {
   const a = props.dropdownAnchor
   if (!a) return null
@@ -261,7 +256,7 @@ function onClearFromMulti(item: T) {
 
 defineExpose({ onClear })
 
-const valueColumn = ref<HTMLElement | null>(null)
+const valueColumn = computed<HTMLElement | null>(() => triggerRef.value?.valueEl ?? null)
 const measureRow = ref<HTMLElement | null>(null)
 const selectedCount = computed(() =>
   Array.isArray(valueToShow.value) ? valueToShow.value.length : 0,
@@ -277,13 +272,6 @@ const { visibleCount: visibleChipCount, hiddenCount: hiddenChipCount } = useChip
   gap: 6,
 })
 
-const triggerLayoutClass = computed(() => {
-  if (props.multiple || !props.label) {
-    return props.size === 'md' ? 'h-10 py-1.5' : 'h-9 py-1.5'
-  }
-  return props.size === 'md' ? 'h-10 pt-3 pb-0.5' : 'h-9 pt-3.5 pb-0.5'
-})
-
 const showFloatingLabel = computed(() => !!props.label && !props.multiple)
 
 const isDefaultSelection = computed(() => {
@@ -296,110 +284,81 @@ const isDefaultSelection = computed(() => {
 
 <template>
   <div ref="wrapper" class="select-v2 relative w-full text-body-md">
-    <button
-      ref="reference"
+    <a-select-trigger
+      ref="triggerRef"
+      :label="label"
+      :required="required"
+      :size="size"
       :disabled="disabled"
-      :class="[
-        triggerLayoutClass,
-        clearable ? 'pr-16' : 'pr-9',
-        { 'select-v2__trigger--error': error },
-        disabled
-          ? 'border-default bg-badge/70'
-          : (buttonBg || 'border-default bg-main'),
-      ]"
-      class="select-v2__trigger text-primary relative flex w-full items-center gap-2 rounded-[10px] border border-solid pl-4 transition-colors duration-200 hover:border-brand focus-visible:border-focus focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/20"
-      @click="toggleOpen()"
+      :error="error"
+      :is-open="isOpen"
+      :start-icon="startIcon"
+      :button-bg="buttonBg"
+      :clearable="clearable"
+      :show-clear="!!valueToShow && clearable && !isDefaultSelection"
+      :floating-label="showFloatingLabel"
+      :has-value="!!valueToShow"
+      @toggle="toggleOpen()"
+      @clear="onClear"
     >
-      <span
-        v-if="showFloatingLabel"
-        :data-size="size"
-        class="select-v2__label pointer-events-none absolute left-4 top-1.5 text-[10px] leading-none text-secondary"
-        :class="valueToShow ? 'select-v2__label--floated' : 'select-v2__label--placeholder'"
-      >
-        {{ label }}<span v-if="required" class="text-danger">&nbsp;*</span>
-      </span>
-
-      <component
-        :is="startIcon"
-        v-if="startIcon"
-        class="shrink-0"
-      />
-
-      <span ref="valueColumn" class="relative w-full min-w-0 overflow-hidden text-start leading-tight">
-        <template v-if="!multiple">
-          <span v-if="valueToShow" class="block truncate leading-tight">
-            <slot name="single-selected" :value="valueToShow">{{ (valueToShow as any)[keyToShow] }}</slot>
-          </span>
-          <span v-else class="text-secondary">&#8203;</span>
-        </template>
-
-        <template v-else>
-          <template v-if="Array.isArray(valueToShow) && valueToShow.length">
-            <span class="flex w-full min-w-0 items-center gap-1.5 overflow-hidden py-0.5">
-              <span
-                v-for="(item, index) in (valueToShow as any[]).slice(0, visibleChipCount)"
-                :key="index"
-                class="select-v2__chip inline-flex min-w-0 items-center gap-1 rounded-sm bg-brand-subtle px-2 py-0.5 text-body-sm text-brand"
-                @click.stop="canChipRemove ? onClearFromMulti(item) : (isOpen = true)"
-              >
-                <span class="truncate">{{ item[keyToShow] }}</span>
-                <button
-                  v-if="canChipRemove"
-                  class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-blue-subtle"
-                >
-                  <a-icon-x-mark class="size-2.5" />
-                </button>
-              </span>
+      <template v-if="!multiple">
+        <span v-if="valueToShow" class="block truncate leading-tight">
+          <slot name="single-selected" :value="valueToShow">{{ (valueToShow as any)[keyToShow] }}</slot>
+        </span>
+        <span v-else class="text-secondary">&#8203;</span>
+      </template>
+
+      <template v-else>
+        <template v-if="Array.isArray(valueToShow) && valueToShow.length">
+          <span class="flex w-full min-w-0 items-center gap-1.5 overflow-hidden py-0.5">
+            <span
+              v-for="(item, index) in (valueToShow as any[]).slice(0, visibleChipCount)"
+              :key="index"
+              class="select-v2__chip inline-flex min-w-0 items-center gap-1 rounded-sm bg-brand-subtle px-2 py-0.5 text-body-sm text-brand"
+              @click.stop="canChipRemove ? onClearFromMulti(item) : (isOpen = true)"
+            >
+              <span class="truncate">{{ item[keyToShow] }}</span>
               <span
-                v-if="hiddenChipCount > 0"
-                class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm bg-blue-subtle px-2 py-0.5 text-body-sm-medium text-brand"
+                v-if="canChipRemove"
+                class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-blue-subtle"
               >
-                +{{ hiddenChipCount }}
+                <a-icon-x-mark class="size-2.5" />
               </span>
             </span>
+            <span
+              v-if="hiddenChipCount > 0"
+              class="inline-flex shrink-0 items-center rounded-sm bg-blue-subtle px-2 py-0.5 text-body-sm-medium whitespace-nowrap text-brand"
+            >
+              +{{ hiddenChipCount }}
+            </span>
+          </span>
 
+          <span
+            ref="measureRow"
+            aria-hidden="true"
+            class="pointer-events-none invisible absolute top-0 left-0 flex h-0 w-max items-center gap-1.5"
+          >
             <span
-              ref="measureRow"
-              aria-hidden="true"
-              class="pointer-events-none invisible absolute left-0 top-0 flex h-0 w-max items-center gap-1.5"
+              v-for="(item, index) in (valueToShow as any[])"
+              :key="`measure-${index}`"
+              class="inline-flex items-center gap-1 rounded-sm bg-muted px-2 py-0.5 text-body-sm whitespace-nowrap"
             >
+              <span>{{ item[keyToShow] }}</span>
               <span
-                v-for="(item, index) in (valueToShow as any[])"
-                :key="`measure-${index}`"
-                class="inline-flex items-center gap-1 whitespace-nowrap rounded-sm bg-muted px-2 py-0.5 text-body-sm"
+                v-if="canChipRemove"
+                class="flex shrink-0 items-center justify-center rounded-full p-0.5"
               >
-                <span>{{ item[keyToShow] }}</span>
-                <span
-                  v-if="canChipRemove"
-                  class="flex shrink-0 items-center justify-center rounded-full p-0.5"
-                >
-                  <a-icon-x-mark class="size-2.5" />
-                </span>
-              </span>
-              <span class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm px-2 py-0.5 text-body-sm-medium">
-                +{{ selectedCount }}
+                <a-icon-x-mark class="size-2.5" />
               </span>
             </span>
-          </template>
-          <span v-else class="text-secondary">{{ label }}</span>
+            <span class="inline-flex shrink-0 items-center rounded-sm px-2 py-0.5 text-body-sm-medium whitespace-nowrap">
+              +{{ selectedCount }}
+            </span>
+          </span>
         </template>
-      </span>
-
-      <button
-        v-if="valueToShow && clearable && !isDefaultSelection"
-        class="absolute right-9 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5transition-colors hover:bg-badge"
-        @click.stop="onClear"
-      >
-        <a-icon-x-mark class="!m-0 size-3.5" />
-      </button>
-
-      <span
-        :class="{ 'rotate-180': isOpen }"
-        class="absolute right-3 top-1/2 -translate-y-1/2 transition-transform duration-200"
-      >
-        <a-icon-chevron-down class="!m-0 size-4 text-icon-disabled" />
-      </span>
-    </button>
+        <span v-else class="text-secondary">{{ label }}</span>
+      </template>
+    </a-select-trigger>
 
     <transition
       enter-active-class="select-v2__dropdown-enter-active"
@@ -412,7 +371,7 @@ const isDefaultSelection = computed(() => {
       <div
         v-if="isOpen"
         ref="floating"
-        class="select-v2__dropdown z-[10000] rounded-lg border border-default bg-main shadow-lg shadow-surface-dark/10 dark:shadow-surface-dark/30"
+        class="select-v2__dropdown z-10000 rounded-lg border border-default bg-main shadow-lg shadow-surface-dark/10 dark:shadow-surface-dark/30"
         :style="{
           position: strategy,
           left: x != null ? `${x}px` : '',
@@ -484,16 +443,6 @@ const isDefaultSelection = computed(() => {
 </template>
 
 <style scoped>
-.select-v2__trigger:disabled {
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
-.select-v2__trigger--error {
-  border-color: var(--border-color-danger);
-}
-
 .select-v2__dropdown-enter-active,
 .select-v2__dropdown-leave-active {
   transition:
@@ -549,31 +498,9 @@ const isDefaultSelection = computed(() => {
   cursor: default;
 }
 
-.select-v2__label {
-  transform-origin: 0 0;
-  transform: translateY(0) scale(1);
-  transition:
-    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
-    color 200ms ease-out;
-  will-change: transform;
-}
-
-.select-v2__label--floated {
-  transform: translateY(0) scale(1);
-}
-
-.select-v2__label--placeholder {
-  transform: translateY(7px) scale(1.4);
-}
-
-.select-v2__label--placeholder[data-size="sm"] {
-  transform: translateY(5px) scale(1.4);
-}
-
 @media (prefers-reduced-motion: reduce) {
   .select-v2__dropdown-enter-active,
-  .select-v2__dropdown-leave-active,
-  .select-v2__label {
+  .select-v2__dropdown-leave-active {
     transition: none;
   }
 }

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>