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

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/elements/step-slider/AStepSliderColCard.vue

@@ -67,7 +67,7 @@ function stopTicker() {
 
 function startTicker() {
   stopTicker()
-  if (!props.autoplay || props.steps.length <= 1)
+  if (isPaused.value || !props.autoplay || props.steps.length <= 1)
     return
   ticker = setInterval(() => {
     const now = Date.now()
@@ -87,14 +87,18 @@ function goTo(index: number) {
   startTicker()
 }
 
+const isPaused = ref(false)
+
 function onMouseEnter() {
-  if (props.pauseOnHover)
-    stopTicker()
+  if (!props.pauseOnHover) return
+  isPaused.value = true
+  stopTicker()
 }
 
 function onMouseLeave() {
-  if (props.pauseOnHover)
-    startTicker()
+  if (!props.pauseOnHover) return
+  isPaused.value = false
+  startTicker()
 }
 
 onMounted(startTicker)
@@ -107,42 +111,50 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
 
 <template>
   <div
-    class="grid grid-cols-1 gap-4 lg:gap-10"
+    class="grid grid-cols-1 gap-8"
     :class="colsClass"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
   >
-    <ol class="flex flex-col gap-3">
+    <ol class="flex flex-col gap-2">
       <li
         v-for="(step, i) in steps"
         :key="i"
-        class="ss-card group relative cursor-pointer overflow-hidden rounded-2xl border bg-main transition-all duration-300"
+        class="ss-card group relative cursor-pointer overflow-hidden rounded-14 border bg-main transition-[background-color,box-shadow,border-color,opacity] duration-300"
         :class="i === active
-          ? 'ss-card-active border-brand-200 dark:border-brand-500/40'
-          : 'border-default hover:border-brand-100 dark:hover:border-brand-500/25'"
+          ? 'ss-card-active border-strong'
+          : 'border-default opacity-60 hover:bg-brand-subtle hover:opacity-100'"
         @click="goTo(i)"
       >
         <div class="p-4">
           <div
-            class="flex gap-4"
+            class="flex gap-[13px]"
             :class="expandable ? 'items-center' : 'items-start'"
           >
             <span
-              class="flex size-11 shrink-0 items-center justify-center rounded-xl"
-              :class="step.iconBg || 'bg-brand-subtle'"
+              class="flex size-11 shrink-0 items-center justify-center rounded-lg transition-colors duration-300"
+              :class="step.iconBg || (i === active ? 'bg-brand' : 'bg-brand-subtle')"
             >
               <component
                 :is="step.icon"
                 v-if="step.icon"
-                class="size-5"
-                :class="step.iconColor || 'text-brand'"
+                class="size-5 transition-colors duration-300"
+                :class="step.iconColor || (i === active ? 'text-icon-on-brand' : 'text-icon-brand')"
               />
             </span>
             <div class="min-w-0 flex-1">
-              <p class="text-body-md-strong md:text-body-lg-strong text-primary">
+              <p
+                class="block text-h5 transition-colors"
+                :class="i === active ? 'text-primary' : 'text-quaternary'"
+              >
                 {{ step.title }}
               </p>
 
               <div v-if="!expandable">
-                <p class="mt-1 text-body-sm text-secondary">
+                <p
+                  class="mt-0.5 block text-body-md transition-colors"
+                  :class="i === active ? 'text-quaternary' : 'text-secondary'"
+                >
                   {{ step.description }}
                 </p>
                 <div
@@ -172,7 +184,7 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
               : 'grid-rows-[0fr] opacity-0'"
           >
             <div class="overflow-hidden">
-              <p class="text-body-sm text-secondary">
+              <p class="text-body-md text-quaternary">
                 {{ step.description }}
               </p>
               <div
@@ -194,40 +206,61 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
           </div>
         </div>
 
+        <!-- Прогресс — CSS-анимация scaleX, как в макете (не JS-ширина);
+             длительность приходит переменной: scoped-стили переименовывают
+             @keyframes, поэтому inline-строку animation здесь использовать нельзя.
+             Константный бренд-градиент — одинаков в темах. -->
         <span
           v-if="i === active && autoplay && steps.length > 1"
-          class="absolute inset-x-0 bottom-0 h-1 bg-muted"
-        >
-          <!-- осознанно константный: фирменный бренд-градиент прогресса, одинаков в темах -->
-          <span
-            class="block h-full rounded-r-full bg-linear-to-r from-brand-500 to-brand-400 transition-[width] duration-100 ease-linear"
-            :style="{ width: fillWidth }"
-          />
-        </span>
+          :key="active"
+          class="cap-prog absolute inset-x-0 bottom-0 h-[3px] bg-linear-to-r from-brand to-[#4da8ff]"
+          :class="{ 'is-paused': isPaused }"
+          :style="{ '--cap-dur': `${interval}ms` }"
+        />
       </li>
     </ol>
 
-    <div
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-    >
-      <div class="flex justify-center">
-        <slot
-          name="panel"
-          :active="active"
-          :step="steps[active]"
-          :progress="progress"
-          :count="steps.length"
-          :fill-width="fillWidth"
-          :go-to="goTo"
-        />
-      </div>
+    <div class="flex justify-center">
+      <slot
+        name="panel"
+        :active="active"
+        :step="steps[active]"
+        :progress="progress"
+        :count="steps.length"
+        :fill-width="fillWidth"
+        :go-to="goTo"
+      />
     </div>
   </div>
 </template>
 
 <style scoped>
 .ss-card-active {
-  box-shadow: 0 22px 60px -18px color-mix(in srgb, var(--color-brand-500) 22%, transparent);
+  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--color-brand-500) 32%, transparent);
+}
+
+@keyframes cap-prog {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.cap-prog {
+  transform-origin: left;
+  animation: cap-prog var(--cap-dur, 4600ms) linear;
+}
+
+.cap-prog.is-paused {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cap-prog {
+    animation: none;
+    transform: none;
+  }
 }
 </style>