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

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

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

package/components/elements/select/ui/select-trigger.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+/**
+ * Общий «хром» триггера селектов нового ДС: рамка, плавающий лейбл, крестик очистки
+ * и шеврон. Область значения приходит слотом, поэтому одна и та же кнопка обслуживает
+ * и одиночный текст (ASelectV2, ACascadeSelectV2), и строку чипов (ASelectV2 multiple).
+ *
+ * `el` / `valueEl` отдаются наружу через defineExpose: первый нужен как reference-элемент
+ * для floating-ui, второй — как контейнер измерения в useChipOverflow.
+ */
+defineOptions({ name: 'SelectTrigger' })
+
+const props = withDefaults(defineProps<{
+  label?: string
+  required?: boolean
+  size?: 'sm' | 'md'
+  disabled?: boolean
+  error?: string | string[]
+  isOpen?: boolean
+  startIcon?: object
+  buttonBg?: string
+  /** Резервирует место под крестик (pr-16 вместо pr-9) — совпадает с прежним `clearable`. */
+  clearable?: boolean
+  /** Крестик показывается только когда есть что чистить. */
+  showClear?: boolean
+  /** Лейбл ведёт себя как floating label (иначе за плейсхолдер отвечает слот). */
+  floatingLabel?: boolean
+  /** Значение выбрано — лейбл поднят, иначе стоит на месте плейсхолдера. */
+  hasValue?: boolean
+}>(), {
+  label: '',
+  required: false,
+  size: 'sm',
+  disabled: false,
+  error: undefined,
+  isOpen: false,
+  startIcon: undefined,
+  buttonBg: '',
+  clearable: true,
+  showClear: false,
+  floatingLabel: false,
+  hasValue: false,
+})
+
+const emits = defineEmits<{
+  toggle: []
+  clear: []
+}>()
+
+const el = ref<HTMLButtonElement | null>(null)
+const valueEl = ref<HTMLElement | null>(null)
+
+/* Без floating label кнопка центрирует содержимое, с ним — прижимает значение к низу. */
+const layoutClass = computed(() => {
+  if (!props.floatingLabel) {
+    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'
+})
+
+defineExpose({ el, valueEl })
+</script>
+
+<template>
+  <button
+    ref="el"
+    :disabled="disabled"
+    aria-haspopup="listbox"
+    :aria-expanded="isOpen"
+    :class="[
+      layoutClass,
+      clearable ? 'pr-16' : 'pr-9',
+      { 'select-trigger--error': error },
+      disabled
+        ? 'border-default bg-badge/70'
+        : (buttonBg || 'border-default bg-main'),
+    ]"
+    class="select-trigger relative flex w-full items-center gap-2 rounded-10 border border-solid pl-4 text-primary transition-colors duration-200 hover:border-brand focus-visible:border-focus focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-hidden"
+    @click="emits('toggle')"
+  >
+    <span
+      v-if="floatingLabel && label"
+      :data-size="size"
+      class="select-trigger__label pointer-events-none absolute top-1.5 left-4 text-[10px] leading-none text-secondary"
+      :class="hasValue ? 'select-trigger__label--floated' : 'select-trigger__label--placeholder'"
+    >
+      {{ label }}<span v-if="required" class="text-danger">&nbsp;*</span>
+    </span>
+
+    <component
+      :is="startIcon"
+      v-if="startIcon"
+      class="shrink-0"
+    />
+
+    <span ref="valueEl" class="relative w-full min-w-0 overflow-hidden text-start leading-tight">
+      <slot />
+    </span>
+
+    <!-- span, а не вложенная <button>: вложенные кнопки ломают SSR-разметку при гидрации -->
+    <span
+      v-if="showClear"
+      role="button"
+      tabindex="-1"
+      aria-label="Очистить"
+      class="select-trigger__clear absolute top-1/2 right-9 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-badge"
+      @click.stop="emits('clear')"
+      @keydown.enter.stop.prevent="emits('clear')"
+      @keydown.space.stop.prevent="emits('clear')"
+    >
+      <a-icon-x-mark class="m-0! size-3.5" />
+    </span>
+
+    <span
+      :class="{ 'rotate-180': isOpen }"
+      class="absolute top-1/2 right-3 -translate-y-1/2 transition-transform duration-200"
+    >
+      <a-icon-chevron-down class="m-0! size-4 text-icon-disabled" />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.select-trigger {
+  cursor: pointer;
+}
+
+.select-trigger:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.select-trigger--error {
+  border-color: var(--border-color-danger);
+}
+
+.select-trigger__clear {
+  cursor: pointer;
+}
+
+.select-trigger__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-trigger__label--floated {
+  transform: translateY(0) scale(1);
+}
+
+.select-trigger__label--placeholder {
+  transform: translateY(7px) scale(1.4);
+}
+
+.select-trigger__label--placeholder[data-size="sm"] {
+  transform: translateY(5px) scale(1.4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .select-trigger__label {
+    transition: none;
+  }
+}
+</style>

package/components/overlays/drawer/ADrawerV2.vue

@@ -14,7 +14,10 @@ const props = withDefaults(defineProps<{
   swipeToClose?: boolean
   swipeThreshold?: number
   showDragHandle?: boolean
+  /** Фиксированная общая высота листа («70dvh»). По умолчанию высота по контенту. */
+  height?: string
   maxHeight?: string
+  zIndex?: number | string
 }>(), {
   closeOnOverlay: true,
   closeOnEsc: true,
@@ -26,7 +29,9 @@ const props = withDefaults(defineProps<{
   swipeToClose: true,
   swipeThreshold: 65,
   showDragHandle: true,
+  height: undefined,
   maxHeight: '100dvh',
+  zIndex: 10000,
 })
 
 const emit = defineEmits<{
@@ -54,12 +59,13 @@ const blurClass = computed(() => {
 })
 
 const overlayClass = computed(() => {
-  const base = ['drawer-v2-overlay fixed inset-0 z-[10000] flex items-end justify-stretch bg-overlay']
+  const base = ['drawer-v2-overlay fixed inset-0 flex items-end justify-stretch bg-overlay']
   if (blurClass.value) base.push(blurClass.value)
   return base.join(' ')
 })
 
-const contentStyle = computed(() => ({ maxHeight: props.maxHeight }))
+const overlayStyle = computed(() => ({ zIndex: props.zIndex }))
+const contentStyle = computed(() => ({ height: props.height, maxHeight: props.maxHeight }))
 
 const overlayTransitionName = computed(() => {
   if (swipeClosing.value) return ''
@@ -226,6 +232,7 @@ function onTouchEnd() {
           v-if="open"
           ref="overlayRef"
           :class="overlayClass"
+          :style="overlayStyle"
           @mousedown="onOverlayClick"
         >
           <transition :name="contentTransitionName" appear>

package/components/overlays/modal/AModalV2.vue

@@ -7,6 +7,7 @@ const props = withDefaults(defineProps<{
   title?: string
   size?: ModalSize
   width?: string
+  rounded?: string
   closeOnOverlay?: boolean
   closeOnEsc?: boolean
   lockScroll?: boolean

package/icons/arrow/arrow-down-left.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-left-icon lucide-arrow-down-left">
+    <path d="M17 7 7 17"/>
+    <path d="M17 17H7V7"/>
+  </svg>
+</template>

package/icons/arrow/arrow-up-right.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right">
+    <path d="M7 7h10v10"/>
+    <path d="M7 17 17 7"/>
+  </svg>
+</template>

package/icons/crown.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-crown-icon lucide-crown">
+    <path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z"/>
+    <path d="M5 21h14"/>
+  </svg>
+</template>

package/icons/refresh-cw.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw-icon lucide-refresh-cw">
+    <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+    <path d="M21 3v5h-5"/>
+    <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+    <path d="M8 16H3v5"/>
+  </svg>
+</template>

package/icons/user-plus.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus-icon lucide-user-plus"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M19 8v6"/><path d="M22 11h-6"/><circle cx="9" cy="7" r="4"/></svg>
+</template>

package/illustrations/scheme-notes.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-info-icon lucide-info"
+  >
+    <circle cx="12" cy="12" r="10"
+    /><path d="M12 16v-4" />
+    <path d="M12 8h.01"/>
+  </svg>
+</template>

package/illustrations/scheme-waypoints.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-waypoints-icon lucide-waypoints"
+  >
+    <path d="m10.586 5.414-5.172 5.172" />
+    <path d="m18.586 13.414-5.172 5.172" />
+    <path d="M6 12h12" />
+    <circle cx="12" cy="20" r="2" />
+    <circle cx="12" cy="4" r="2" />
+    <circle cx="20" cy="12" r="2" />
+    <circle cx="4" cy="12" r="2" />
+  </svg>
+</template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.1.41-beta.5",
+  "version": "2.1.41-beta.7",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/utils/toCssSize.ts

@@ -0,0 +1,11 @@
+/**
+ * Нормализует размер из props в CSS-значение: число трактуем как пиксели,
+ * строку отдаём как есть (`70dvh`, `min(320px, 50vw)`), пустое — как «не задано».
+ *
+ * Общая для селектов и дроверов: и `ASelectV2`, и `ACascadeSelectV2` принимают
+ * размеры выпадашки в виде `number | string`.
+ */
+export function toCssSize(value?: number | string | null): string | undefined {
+  if (value == null || value === '') return undefined
+  return typeof value === 'number' ? `${value}px` : value
+}