adata-ui 2.1.41-beta.1 → 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()
@@ -110,10 +110,6 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
 </script>
 
 <template>
-  <!-- eslint-disable tailwindcss/no-unnecessary-arbitrary-value --
-       Размеры и типографика скопированы из макета литералами (см. предупреждения
-       правила). Токены здесь не использовать: подсказка leading-1.4 в v4 значит
-       0.35rem, а не line-height 1.4. -->
   <div
     class="grid grid-cols-1 gap-8"
     :class="colsClass"
@@ -136,19 +132,19 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
             :class="expandable ? 'items-center' : 'items-start'"
           >
             <span
-              class="flex size-10 shrink-0 items-center justify-center rounded-[12px]"
-              :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="block text-[14px] font-bold transition-colors"
+                class="block text-h5 transition-colors"
                 :class="i === active ? 'text-primary' : 'text-quaternary'"
               >
                 {{ step.title }}
@@ -156,7 +152,7 @@ watch(() => [props.interval, props.autoplay, props.steps.length], () => {
 
               <div v-if="!expandable">
                 <p
-                  class="mt-0.5 block text-[12px] leading-[1.4] transition-colors"
+                  class="mt-0.5 block text-body-md transition-colors"
                   :class="i === active ? 'text-quaternary' : 'text-secondary'"
                 >
                   {{ step.description }}
@@ -188,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-quaternary">
+              <p class="text-body-md text-quaternary">
                 {{ step.description }}
               </p>
               <div

package/components/features/go-top/GoTop.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { AIconChevronUp } from "#components";
 
+const { t } = useI18n()
+
 const props = defineProps<{
   bottomOffset?: number
 }>()
@@ -49,9 +51,11 @@ onUnmounted(() => {
     :class="[{ 'opacity-0': !isShow }]"
     :style="{ bottom: footerHeight + 'px' }"
   >
+    <!-- Кнопка только с иконкой: без aria-label скринридер читает её как "button". -->
     <a-button
       @click="goTop"
       form="icon"
+      :aria-label="t('reuse.goTop')"
       :icon="AIconChevronUp"
       icon-class="h-6 w-6"
       size="lg"

package/components/forms/feedback-form/FeedbackFormV2.vue

@@ -5,6 +5,8 @@ import MessageSquare from '#adata-ui/icons/message/message-square.vue'
 import AInputV2 from '#adata-ui/components/forms/input/AInputV2.vue'
 import ATextareaV2 from '#adata-ui/components/forms/input/textarea/ATextareaV2.vue'
 import AButtonV2 from '#adata-ui/components/elements/button/AButtonV2.vue'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import { PAGES } from '#adata-ui/shared/constans/pages'
 
 const props = withDefaults(defineProps<{
   userInfo: any
@@ -16,24 +18,22 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits(['submit'])
-
+const { locale } = useI18n()
 const { t } = useI18n()
-
-const isLoading = defineModel< null | any>('isLoading', { default: false })
-const isModalOpen = defineModel< null | any>('isModalOpen', { default: false })
-
+const { landing } = useUrls()
+const isLoading = defineModel<null | any>('isLoading', { default: false })
+const isModalOpen = defineModel<null | any>('isModalOpen', { default: false })
 const fullName = ref<string>('')
 const phone = ref<string>('')
 const mail = ref<string>('')
 const comment = ref<string>('')
-
 const submitted = ref(false)
 
 const scheme = z.object({
-  fullName: z.string().nonempty(t('forms.feedback.fieldRequired')),
+  fullName: z.string(),
   phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
-  mail: z.string().nonempty(t('forms.feedback.fieldRequired')).email(t('forms.feedback.emailValid')),
-  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
+  mail: z.string(),
+  comment: z.string().max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
 })
 
 const { validation, getError } = useUIValidation(
@@ -58,7 +58,6 @@ const send = () => {
   mail.value = props.userInfo?.email || ''
   comment.value = ''
 }
-
 defineExpose({
   reset: () => (submitted.value = false),
 })
@@ -73,7 +72,7 @@ onMounted(() => {
     <!-- градиент промо-карточки — осознанный литерал (§05 аудита), но флипается в тёмной теме -->
     <div class="grid grid-cols-1 items-center gap-8 rounded-[28px] border border-default bg-linear-to-br from-[#f0f8ff] via-[#eef4ff] to-[#f0f8ff] p-4 md:gap-10 md:p-12 lg:grid-cols-2 dark:from-[#1a2231] dark:via-[#15191f] dark:to-[#121316]">
       <div>
-        <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-default bg-main px-3 py-1.5 text-body-md text-brand">
+        <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-default bg-main h-8 px-3 text-body-md text-brand">
           <message-square class="size-3.5" />
           {{ t('forms.feedback.value') }}
         </div>
@@ -99,7 +98,6 @@ onMounted(() => {
             v-model="fullName"
             variant="gray"
             size="md"
-            required
             :label="t('forms.demo.n')"
             :error="getError('fullName')"
             :disabled="isLoading"
@@ -121,7 +119,6 @@ onMounted(() => {
               type="email"
               variant="gray"
               size="md"
-              required
               :label="t('forms.feedback.email')"
               :error="getError('mail')"
               :disabled="isLoading"
@@ -136,7 +133,6 @@ onMounted(() => {
             :label="t('forms.feedback.comment')"
             :error="getError('comment')"
             :disabled="isLoading"
-            required
           />
           <a-button-v2
             type="submit"
@@ -149,9 +145,13 @@ onMounted(() => {
           </a-button-v2>
           <p class="mt-1 text-center text-body-sm text-disabled">
             {{ t('forms.feedback.consent') }}
-            <span class="text-brand">
+            <nuxt-link-locale
+              class="cursor-pointer text-brand"
+              :to="buildLocalizedUrl(locale, landing, PAGES.privacy)"
+              target="_blank"
+            >
               {{ t('forms.feedback.consentAccent') }}
-            </span>
+            </nuxt-link-locale>
           </p>
         </form>
       </div>