adata-ui 2.1.41-beta.19 → 2.1.41-beta.20

package/components/elements/banner/ABanner.vue

@@ -39,7 +39,7 @@ onBeforeMount(() => {
       v-show="isDark"
       :href="bannerData?.redirect_url"
       target="_blank"
-      :class="location === 'horizontal' ? '' : 'mt-4 hidden w-0 min-w-full lg:flex'"
+      :class="location === 'horizontal' ? 'hidden lg:block' : 'mt-4 hidden w-0 min-w-full lg:flex'"
     >
       <img
         class="w-full"
@@ -51,7 +51,7 @@ onBeforeMount(() => {
       v-show="!isDark"
       :href="bannerData?.redirect_url"
       target="_blank"
-      :class="location === 'horizontal' ? '' : 'mt-4 hidden w-0 min-w-full lg:flex'"
+      :class="location === 'horizontal' ? 'hidden lg:block' : 'mt-4 hidden w-0 min-w-full lg:flex'"
     >
       <img
         class="w-full"

package/components/elements/button/AButtonV2.vue

@@ -127,7 +127,7 @@ const ROUNDED_CLASS: Record<Rounded, string> = {
 const ICON_SIZE: Record<Size, string> = {
   xs: 'size-3.5',
   sm: 'size-4',
-  md: 'size-5',
+  md: 'size-4.5',
   lg: 'size-5',
 }
 

package/components/elements/select/AGroupSelectV2.vue

@@ -0,0 +1,592 @@
+<script generic="T" lang="ts" setup>
+import type { Placement } from '@floating-ui/vue'
+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 { isEqual } from 'lodash-es'
+
+/**
+ * Селект по двухуровневому справочнику: категория и вложенные в неё виды.
+ *
+ * Отличие от `ACascadeSelectV2` — тот показывает уровни отдельными колонками и даёт
+ * выбрать ТОЛЬКО лист. Здесь оба уровня лежат в одном списке и категория выбирается
+ * наравне с дочерним видом (`selectableParents`): справочники вроде «вида нарушения»
+ * допускают и общую категорию, и уточнение.
+ *
+ * На вход идёт ПЛОСКИЙ список — ровно в том виде, в каком его отдаёт бэк
+ * (`[{ id, name, parent_id }]`). Группировку компонент делает сам, поэтому
+ * консьюмерам не нужно раскладывать справочник в дерево у себя.
+ *
+ * Весь «хром» триггера — общий `a-select-trigger`, тот же, что у `ASelectV2`,
+ * поэтому поле выглядит идентично обычному селекту.
+ */
+defineOptions({ name: 'AGroupSelectV2' })
+
+const props = withDefaults(defineProps<Props>(), {
+  required: false,
+  keyToShow: 'name',
+  keyToSelect: 'id',
+  parentKey: 'parent_id',
+  disabledKey: undefined,
+  getOnlyKey: false,
+  selectableParents: true,
+  clearable: true,
+  disabled: false,
+  size: 'sm',
+  error: undefined,
+  startIcon: undefined,
+  buttonBg: '',
+  searchable: false,
+  searchLabel: 'Поиск...',
+  showPathInTrigger: false,
+  dropdownWidth: undefined,
+  dropdownMaxHeight: undefined,
+  dropdownAlign: 'start',
+  emptyLabel: 'Ничего не найдено',
+})
+
+const emits = defineEmits<Emits>()
+
+defineSlots<{
+  'option'?: (props: { option: T, isParent: boolean, selected: boolean }) => unknown
+  'single-selected'?: (props: { value: T, parent: T | null }) => unknown
+  'empty'?: () => unknown
+}>()
+
+interface Props {
+  label: string
+  /** Плоский список: вложенность задаётся через `parentKey`, а не массивом детей. */
+  options: T[]
+  required?: boolean
+  keyToShow?: string
+  keyToSelect?: string
+  /** Ключ со ссылкой на родителя. `null`/`undefined` — элемент верхнего уровня. */
+  parentKey?: string
+  /** Необязательный ключ-флаг «опция недоступна». */
+  disabledKey?: string
+  /** `true` — в v-model лежит ключ опции, `false` — сам объект. */
+  getOnlyKey?: boolean
+  /** Можно ли выбрать саму категорию, а не только вложенный вид. */
+  selectableParents?: boolean
+  clearable?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md'
+  error?: string | string[]
+  startIcon?: object
+  buttonBg?: string
+  searchable?: boolean
+  searchLabel?: string
+  /** Показывать в триггере весь путь («Категория / Вид»). */
+  showPathInTrigger?: boolean
+  dropdownWidth?: number | string
+  dropdownMaxHeight?: number | string
+  dropdownAlign?: 'start' | 'center' | 'end'
+  emptyLabel?: string
+}
+
+interface Emits {
+  (e: 'onChange', option: T, parent: T | null): void
+  (e: 'onClear'): void
+}
+
+const modelValue = defineModel<T | unknown | null>({ required: true })
+const isOpen = defineModel<boolean>('open', { default: false })
+
+function readKey(node: T, key: string): unknown {
+  return (node as Record<string, unknown>)[key]
+}
+
+function nodeKey(node: T): unknown {
+  return readKey(node, props.keyToSelect)
+}
+
+function nodeLabel(node: T): string {
+  return String(readKey(node, props.keyToShow) ?? '')
+}
+
+function nodeDisabled(node: T): boolean {
+  return props.disabledKey ? Boolean(readKey(node, props.disabledKey)) : false
+}
+
+// -- Группировка -----------------------------------------------------------
+
+interface Group {
+  parent: T
+  children: T[]
+}
+
+/**
+ * Один проход по плоскому списку. Элемент считается дочерним, только если его
+ * `parent_id` реально указывает на существующий верхнеуровневый элемент —
+ * «сирота» со ссылкой в никуда поднимается в корень, а не теряется из списка.
+ */
+const groups = computed<Group[]>(() => {
+  const items = props.options ?? []
+  if (!items.length) return []
+
+  const rootKeys = new Set(
+    items.filter(item => readKey(item, props.parentKey) == null).map(item => nodeKey(item)),
+  )
+
+  const childrenByParent = new Map<unknown, T[]>()
+  const roots: T[] = []
+
+  items.forEach((item) => {
+    const parentId = readKey(item, props.parentKey)
+    if (parentId != null && rootKeys.has(parentId)) {
+      const siblings = childrenByParent.get(parentId) ?? []
+      siblings.push(item)
+      childrenByParent.set(parentId, siblings)
+      return
+    }
+    roots.push(item)
+  })
+
+  return roots.map(root => ({ parent: root, children: childrenByParent.get(nodeKey(root)) ?? [] }))
+})
+
+/** Плоский индекс «ключ → узел и его родитель» — по нему решается отображение в триггере. */
+const index = computed(() => {
+  const map = new Map<unknown, { node: T, parent: T | null }>()
+  groups.value.forEach(({ parent, children }) => {
+    map.set(nodeKey(parent), { node: parent, parent: null })
+    children.forEach(child => map.set(nodeKey(child), { node: child, parent }))
+  })
+  return map
+})
+
+// -- Поиск -----------------------------------------------------------------
+
+const searchValue = ref('')
+
+/**
+ * Группа остаётся в списке, если совпал сам заголовок (тогда показываем её целиком)
+ * или хоть один вложенный вид (тогда заголовок остаётся как контекст, даже если
+ * сам не совпал — иначе непонятно, к чему относится найденный вид).
+ */
+const visibleGroups = computed<Group[]>(() => {
+  const needle = searchValue.value.trim().toLowerCase()
+  if (!needle) return groups.value
+
+  return groups.value.flatMap(({ parent, children }) => {
+    if (nodeLabel(parent).toLowerCase().includes(needle)) return [{ parent, children }]
+    const matched = children.filter(child => nodeLabel(child).toLowerCase().includes(needle))
+    return matched.length ? [{ parent, children: matched }] : []
+  })
+})
+
+const isEmpty = computed(() => visibleGroups.value.length === 0)
+
+// -- Выбранное значение ----------------------------------------------------
+
+const selectedKey = computed<unknown>(() => {
+  const value = modelValue.value
+  if (value == null || value === '') return undefined
+  return props.getOnlyKey ? value : nodeKey(value as T)
+})
+
+const selectedEntry = computed(() =>
+  selectedKey.value === undefined ? null : index.value.get(selectedKey.value) ?? null,
+)
+
+const displayValue = computed(() => {
+  const entry = selectedEntry.value
+  if (!entry) return ''
+  if (props.showPathInTrigger && entry.parent) {
+    return `${nodeLabel(entry.parent)} / ${nodeLabel(entry.node)}`
+  }
+  return nodeLabel(entry.node)
+})
+
+function isSelected(node: T): boolean {
+  return selectedKey.value !== undefined && isEqual(selectedKey.value, nodeKey(node))
+}
+
+/** Заголовок группы кликабелен, только если категории вообще разрешено выбирать. */
+function isParentSelectable(parent: T): boolean {
+  return props.selectableParents && !nodeDisabled(parent)
+}
+
+// -- Позиционирование ------------------------------------------------------
+
+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 dropdownPlacement = computed<Placement>(() => {
+  if (props.dropdownAlign === 'center') return 'bottom'
+  if (props.dropdownAlign === 'end') return 'bottom-end'
+  return 'bottom-start'
+})
+
+const dropdownFallback = computed<Placement[]>(() => {
+  if (props.dropdownAlign === 'center') return ['top']
+  if (props.dropdownAlign === 'end') return ['top-end']
+  return ['top-start']
+})
+
+const { x, y, strategy, update } = useFloating(reference, floating, {
+  placement: dropdownPlacement,
+  strategy: 'absolute',
+  middleware: computed(() => [
+    offset(6),
+    flip({ fallbackPlacements: dropdownFallback.value }),
+    shift({ padding: 8 }),
+    floatingSize({
+      apply({ availableHeight, elements, rects }) {
+        const el = elements.floating as HTMLElement
+        el.style.width = toCssSize(props.dropdownWidth) ?? `${rects.reference.width}px`
+        const maxHeightOverride = toCssSize(props.dropdownMaxHeight)
+        el.style.maxHeight = maxHeightOverride
+          ? `min(${maxHeightOverride}, ${availableHeight}px)`
+          : `${Math.max(140, Math.min(availableHeight, 320))}px`
+      },
+    }),
+  ]),
+})
+
+let cleanup: (() => void) | null = null
+watch(isOpen, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  }
+  else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+onUnmounted(() => cleanup?.())
+
+const toggleOpen = useToggle(isOpen)
+
+onClickOutside(wrapper, () => {
+  if (isOpen.value) toggleOpen(false)
+})
+
+// -- Действия --------------------------------------------------------------
+
+function onSelect(node: T) {
+  if (nodeDisabled(node)) return
+  modelValue.value = props.getOnlyKey ? nodeKey(node) : node
+  emits('onChange', node, index.value.get(nodeKey(node))?.parent ?? null)
+  toggleOpen(false)
+}
+
+function onClear() {
+  modelValue.value = null
+  emits('onClear')
+}
+
+defineExpose({ onClear })
+
+// -- Клавиатура ------------------------------------------------------------
+
+/** Строки в порядке отрисовки — только те, на которые реально можно встать. */
+const navigableRows = computed<T[]>(() =>
+  visibleGroups.value.flatMap(({ parent, children }) => [
+    ...(isParentSelectable(parent) ? [parent] : []),
+    ...children.filter(child => !nodeDisabled(child)),
+  ]),
+)
+
+const focusedKey = ref<unknown>(undefined)
+const listRef = ref<HTMLElement | null>(null)
+
+function focusRow(key: unknown) {
+  focusedKey.value = key
+  nextTick(() => {
+    listRef.value
+      ?.querySelector<HTMLElement>(`[data-row-key="${String(key)}"]`)
+      ?.scrollIntoView({ block: 'nearest' })
+  })
+}
+
+function moveFocus(delta: number) {
+  const rows = navigableRows.value
+  if (!rows.length) return
+  const current = rows.findIndex(row => isEqual(nodeKey(row), focusedKey.value))
+  const next = current === -1
+    ? (delta > 0 ? 0 : rows.length - 1)
+    : (current + delta + rows.length) % rows.length
+  focusRow(nodeKey(rows[next]))
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (props.disabled) return
+
+  if (!isOpen.value) {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      toggleOpen(true)
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'Escape':
+      event.preventDefault()
+      toggleOpen(false)
+      nextTick(() => reference.value?.focus())
+      break
+    case 'Tab':
+      toggleOpen(false)
+      break
+    case 'ArrowDown':
+      event.preventDefault()
+      moveFocus(1)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      moveFocus(-1)
+      break
+    case 'Home':
+      event.preventDefault()
+      if (navigableRows.value.length) focusRow(nodeKey(navigableRows.value[0]))
+      break
+    case 'End': {
+      event.preventDefault()
+      const rows = navigableRows.value
+      if (rows.length) focusRow(nodeKey(rows[rows.length - 1]))
+      break
+    }
+    case 'Enter': {
+      const row = navigableRows.value.find(item => isEqual(nodeKey(item), focusedKey.value))
+      if (!row) break
+      event.preventDefault()
+      onSelect(row)
+      break
+    }
+  }
+}
+
+/* Открытие — на выбранном значении, закрытие — сброс поиска и фокуса. */
+watch(isOpen, (open) => {
+  if (open) {
+    focusedKey.value = selectedKey.value ?? nodeKey(navigableRows.value[0] ?? ({} as T))
+    nextTick(() => focusRow(focusedKey.value))
+    return
+  }
+  searchValue.value = ''
+  focusedKey.value = undefined
+})
+</script>
+
+<template>
+  <div
+    ref="wrapper"
+    class="group-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"
+          :parent="selectedEntry.parent"
+        >{{ displayValue }}</slot>
+      </span>
+      <span v-else class="text-secondary">&#8203;</span>
+    </a-select-trigger>
+
+    <transition
+      enter-active-class="group-select__dropdown-enter-active"
+      enter-from-class="group-select__dropdown-enter-from"
+      enter-to-class="group-select__dropdown-enter-to"
+      leave-active-class="group-select__dropdown-leave-active"
+      leave-from-class="group-select__dropdown-leave-from"
+      leave-to-class="group-select__dropdown-leave-to"
+    >
+      <div
+        v-if="isOpen"
+        ref="floating"
+        class="group-select__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` : '',
+          top: y != null ? `${y}px` : '',
+        }"
+      >
+        <div v-if="searchable" class="px-2.5 pt-2.5">
+          <a-input-standard
+            v-model="searchValue"
+            :label="searchLabel"
+            :size="size"
+            clearable
+            color="gray"
+          />
+        </div>
+
+        <ul
+          ref="listRef"
+          class="group-select__list flex flex-col gap-0.5 p-1.5"
+          role="listbox"
+        >
+          <li v-if="isEmpty" class="px-3 py-6 text-center text-body-sm text-quaternary">
+            <slot name="empty">
+              {{ emptyLabel }}
+            </slot>
+          </li>
+
+          <li
+            v-for="group in visibleGroups"
+            :key="String(nodeKey(group.parent))"
+          >
+            <!-- Категория: кнопка, когда её разрешено выбирать, иначе просто заголовок. -->
+            <component
+              :is="isParentSelectable(group.parent) ? 'button' : 'div'"
+              :data-row-key="String(nodeKey(group.parent))"
+              :type="isParentSelectable(group.parent) ? 'button' : undefined"
+              :role="isParentSelectable(group.parent) ? 'option' : 'presentation'"
+              :aria-selected="isParentSelectable(group.parent) ? isSelected(group.parent) : undefined"
+              :disabled="isParentSelectable(group.parent) ? nodeDisabled(group.parent) : undefined"
+              class="flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-start"
+              :class="[
+                isParentSelectable(group.parent)
+                  ? 'group-select__row text-body-md-medium text-primary transition-colors duration-100 hover:bg-action-secondary-hover'
+                  : 'text-overline text-quaternary',
+                { 'group-select__row--selected': isSelected(group.parent) },
+                { 'group-select__row--focused': isEqual(focusedKey, nodeKey(group.parent)) },
+              ]"
+              @click="isParentSelectable(group.parent) ? onSelect(group.parent) : undefined"
+            >
+              <span class="min-w-0 flex-1 truncate">
+                <slot
+                  name="option"
+                  :option="group.parent"
+                  :is-parent="true"
+                  :selected="isSelected(group.parent)"
+                >{{ nodeLabel(group.parent) }}</slot>
+              </span>
+              <a-icon-check
+                v-if="isSelected(group.parent)"
+                class="size-4 shrink-0 text-brand"
+              />
+            </component>
+
+            <!-- Вложенные виды: отступ и точка-маркер, чтобы связь с категорией читалась. -->
+            <ul v-if="group.children.length" class="mt-0.5 flex flex-col gap-0.5">
+              <li v-for="child in group.children" :key="String(nodeKey(child))">
+                <button
+                  type="button"
+                  role="option"
+                  :data-row-key="String(nodeKey(child))"
+                  :aria-selected="isSelected(child)"
+                  :disabled="nodeDisabled(child)"
+                  class="group-select__row flex w-full items-center gap-2 rounded-md py-2 pr-3 pl-6 text-start text-body-md text-secondary transition-colors duration-100 hover:bg-action-secondary-hover"
+                  :class="[
+                    { 'group-select__row--selected': isSelected(child) },
+                    { 'group-select__row--focused': isEqual(focusedKey, nodeKey(child)) },
+                  ]"
+                  @click="onSelect(child)"
+                >
+                  <span class="group-select__bullet shrink-0 rounded-full" />
+                  <span class="min-w-0 flex-1 truncate">
+                    <slot
+                      name="option"
+                      :option="child"
+                      :is-parent="false"
+                      :selected="isSelected(child)"
+                    >{{ nodeLabel(child) }}</slot>
+                  </span>
+                  <a-icon-check
+                    v-if="isSelected(child)"
+                    class="size-4 shrink-0 text-brand"
+                  />
+                </button>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.group-select__dropdown-enter-active,
+.group-select__dropdown-leave-active {
+  transition:
+    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.group-select__dropdown-enter-from,
+.group-select__dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.group-select__dropdown-enter-to,
+.group-select__dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.group-select__list {
+  max-height: 250px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.group-select__list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.group-select__row {
+  cursor: pointer;
+}
+
+/* Размер и цвет точки — здесь, а не утилитами: consumer может тянуть CSS слоя
+   из npm-копии, и утилита, которую больше никто не использует, не сгенерируется. */
+.group-select__bullet {
+  width: 6px;
+  height: 6px;
+  background-color: var(--color-icon-secondary);
+}
+
+.group-select__row:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+/* Фокус с клавиатуры: рамка внутрь, чтобы не спорить с соседними строками.
+   Цвет сильно разбавлен — сплошной --border-color-focus на узкой строке бьёт по глазам. */
+.group-select__row--focused {
+  outline: 1px solid color-mix(in srgb, var(--border-color-focus) 35%, transparent);
+  outline-offset: -1px;
+  background-color: color-mix(in srgb, var(--border-color-focus) 6%, transparent);
+}
+
+.group-select__row--selected {
+  background-color: var(--background-color-brand-subtle);
+  font-weight: 500;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .group-select__dropdown-enter-active,
+  .group-select__dropdown-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/elements/status-badge/AStatusBadge.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { useResizeObserver } from '@vueuse/core'
+
 type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'warning'
 type BadgeView = 'default' | 'inverted' | 'transparent' | 'subtle'
 type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
@@ -22,7 +24,7 @@ interface Props {
   customClasses?: string
 }
 
-defineOptions({ name: 'AStatusBadge' })
+defineOptions({ name: 'AStatusBadge', inheritAttrs: false })
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'primary',
@@ -100,7 +102,7 @@ const pointSwitchValues: ViewType = {
 
 const classes = computed(() =>
   [
-    'text-body-md rounded-2xl select-none inline-flex gap-[5.5px] justify-center items-center border',
+    'text-body-md rounded-2xl select-none inline-flex min-w-0 max-w-full gap-[5.5px] justify-center items-center border',
     typeSwitchValues[props.view][props.type],
     props.size === 'xs' ? 'px-2 py-[2px] text-body-sm font-bold' : '',
     props.size === 'sm' ? 'px-[10px] py-1 text-body-sm font-semibold h-6' : '',
@@ -113,13 +115,46 @@ const pointClasses = computed(() =>
     'w-1.5 h-1.5 rounded-full shrink-0',
     pointSwitchValues[props.view][props.type],
   ])
+
+const label = ref<HTMLElement | null>(null)
+const isTruncated = ref(false)
+const tooltipText = ref('')
+
+/* Обрезку меряем по самому тексту: ширину бейджу задаёт потребитель
+   (max-w/сетка), поэтому ResizeObserver ловит ресайз, а mouseenter — смену
+   содержимого слота, при которой размер обрезанного span не меняется. */
+function measure() {
+  const el = label.value
+  if (!el) return
+  isTruncated.value = el.scrollWidth > el.clientWidth + 1
+  tooltipText.value = el.textContent?.trim() ?? ''
+}
+
+useResizeObserver(label, measure)
+onMounted(() => nextTick(measure))
 </script>
 
 <template>
-  <div :class="[[classes], customClasses]">
-    <slot name="point">
-      <span v-if="point" :class="pointClasses" />
-    </slot>
-    <slot />
-  </div>
+  <a-tooltip-v2
+    class="max-w-full min-w-0"
+    content-class="max-h-[50vh] max-w-[min(20rem,calc(100vw-2rem))] overflow-hidden text-body-sm whitespace-normal text-primary wrap-anywhere"
+    :text="tooltipText"
+    :disabled="!isTruncated"
+  >
+    <div
+      v-bind="$attrs"
+      :class="[[classes], customClasses]"
+      @mouseenter="measure"
+    >
+      <slot name="point">
+        <span v-if="point" :class="pointClasses" />
+      </slot>
+      <span
+        ref="label"
+        class="truncate"
+      >
+        <slot />
+      </span>
+    </div>
+  </a-tooltip-v2>
 </template>

package/components/elements/step-slider/AStepSliderRowCard.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { useElementHover } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+export interface StepSliderRowCardStep {
+  title: string
+  description: string
+  icon?: Component
+  iconBg?: string
+  iconColor?: string
+}
+
+type RowBreakpoint = 'sm' | 'md' | 'lg'
+
+interface Props {
+  steps: StepSliderRowCardStep[]
+  interval?: number
+  autoplay?: boolean
+  pauseOnHover?: boolean
+  rowFrom?: RowBreakpoint
+  connectors?: boolean
+  titleTag?: 'p' | 'h2' | 'h3' | 'h4' | 'h5'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  interval: 5000,
+  autoplay: true,
+  pauseOnHover: true,
+  rowFrom: 'lg',
+  connectors: true,
+  titleTag: 'p',
+})
+
+const active = defineModel<number>({ default: 0 })
+
+const ROW_LAYOUT: Record<RowBreakpoint, { grid: string, lift: string, connector: string }> = {
+  sm: { grid: 'sm:grid-cols-none sm:grid-flow-col sm:auto-cols-fr', lift: 'sm:-translate-y-1.5', connector: 'sm:flex' },
+  md: { grid: 'md:grid-cols-none md:grid-flow-col md:auto-cols-fr', lift: 'md:-translate-y-1.5', connector: 'md:flex' },
+  lg: { grid: 'lg:grid-cols-none lg:grid-flow-col lg:auto-cols-fr', lift: 'lg:-translate-y-1.5', connector: 'lg:flex' },
+}
+
+const root = ref<HTMLElement>()
+const hovered = useElementHover(root)
+
+const count = computed(() => props.steps.length)
+const layout = computed(() => ROW_LAYOUT[props.rowFrom])
+const running = computed(() => props.autoplay && count.value > 1)
+const paused = computed(() => props.pauseOnHover && hovered.value)
+
+const timingStyle = computed(() => ({
+  animationDuration: `${props.interval}ms`,
+  animationPlayState: paused.value ? 'paused' : 'running',
+}))
+
+function goTo(to: number) {
+  if (count.value === 0)
+    return
+  active.value = ((to % count.value) + count.value) % count.value
+}
+
+function next() {
+  goTo(active.value + 1)
+}
+
+watch(count, (value) => {
+  if (active.value >= value)
+    goTo(0)
+})
+
+defineExpose({ goTo, next })
+</script>
+
+<template>
+  <ol
+    ref="root"
+    class="grid grid-cols-1 items-stretch gap-5"
+    :class="layout.grid"
+  >
+    <li
+      v-for="(step, i) in steps"
+      :key="i"
+      class="ss-row-card relative flex cursor-pointer flex-col rounded-xl border bg-main p-6 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-(--border-color-focus)"
+      :class="i === active
+        ? ['ss-row-card-active border-brand', layout.lift]
+        : 'border-default opacity-50'"
+      @click="goTo(i)"
+    >
+      <div class="mb-4 flex items-center justify-between">
+        <span
+          class="flex size-12 shrink-0 items-center justify-center rounded-xl transition-colors duration-500"
+          :class="step.iconBg || (i === active ? 'bg-brand' : 'bg-brand-subtle')"
+        >
+          <component
+            :is="step.icon"
+            v-if="step.icon"
+            class="size-5.5 transition-colors duration-500"
+            :class="step.iconColor || (i === active ? 'text-icon-on-brand' : 'text-icon-brand')"
+          />
+        </span>
+
+        <span
+          class="text-display-lg leading-none transition-colors duration-500"
+          :class="i === active
+            ? 'text-brand-200 dark:text-brand-900'
+            : 'text-secondary-50 dark:text-secondary-800'"
+          aria-hidden="true"
+        >
+          {{ i + 1 }}
+        </span>
+      </div>
+
+      <component :is="titleTag" class="mb-1.5 text-h5 text-primary">
+        <button
+          type="button"
+          class="text-left focus-visible:outline-hidden"
+          :aria-current="i === active ? 'step' : undefined"
+          @click.stop="goTo(i)"
+        >
+          {{ step.title }}
+        </button>
+      </component>
+
+      <p
+        class="text-body-md leading-relaxed text-quaternary"
+        :class="{ 'mb-4': $slots.visual }"
+      >
+        {{ step.description }}
+      </p>
+
+      <div
+        v-if="$slots.visual"
+        class="mt-auto"
+      >
+        <slot
+          name="visual"
+          :step="step"
+          :index="i"
+          :is-active="i === active"
+          :active="active"
+          :paused="paused"
+        />
+      </div>
+
+      <span
+        v-if="i === active && running"
+        class="ss-row-prog pointer-events-none absolute inset-x-4 bottom-0 h-[3px] rounded-full bg-linear-to-r from-brand to-brand-400"
+        :style="timingStyle"
+        aria-hidden="true"
+        @animationend="next"
+      />
+
+      <span
+        v-if="connectors && i < steps.length - 1"
+        class="pointer-events-none absolute top-1/2 right-[-13px] z-10 hidden size-6 -translate-y-1/2 items-center justify-center rounded-full border bg-main transition-colors duration-500"
+        :class="[layout.connector, i < active ? 'border-brand text-brand' : 'border-default text-quaternary']"
+        aria-hidden="true"
+      >
+        <a-icon-arrow-right class="size-3.5" />
+      </span>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.ss-row-card {
+  transition: border-color .5s ease-out, box-shadow .5s ease-out, opacity .5s ease-out, translate .5s ease-out;
+}
+
+.ss-row-card-active {
+  box-shadow: 0 20px 46px -24px color-mix(in srgb, var(--color-brand-500) 55%, transparent);
+}
+
+.ss-row-prog {
+  transform-origin: left;
+  animation: ss-row-prog linear forwards;
+}
+
+@keyframes ss-row-prog {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ss-row-card {
+    transition: none;
+  }
+
+  .ss-row-prog {
+    animation: none;
+  }
+}
+</style>

package/components/forms/input/AInputV2.vue

@@ -351,7 +351,7 @@ function rowDisplay(item: T): unknown {
         :is="startIcon"
         v-if="startIcon"
         class="shrink-0"
-        :class="[startIconClass || 'size-4 text-icon-disabled', iconOffsetClass]"
+        :class="[startIconClass || 'size-4 text-icon-secondary', iconOffsetClass]"
       />
 
       <input

package/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -16,7 +16,6 @@ const otp = ref(['', '', '', '', '', ''])
 const otpFormatted = computed(() => {
   return otp.value.join('')
 })
-const showError = ref(false)
 const isLoading = ref(false)
 
 async function loginUser() {
@@ -72,7 +71,7 @@ async function onConfirm() {
     confirmSuccessfulModal.value = true
   }
   catch (error) {
-    showError.value = true
+    $toast.error(apiErrorMessage(error, t('error.validation')))
   }
   finally {
     isLoading.value = false
@@ -81,7 +80,6 @@ async function onConfirm() {
 
 function resetOtp() {
   otp.value = ['', '', '', '', '', '']
-  showError.value = false
 }
 
 function onClose() {
@@ -162,7 +160,6 @@ onMounted(() => {
 
     <id-otp-input
       v-model="otp"
-      v-model:error="showError"
       @on-completed="onConfirm"
     />
 

package/components/modals/id/IdLoginModal.vue

@@ -323,9 +323,10 @@ function onForgotPassword() {
         block
         :icon="social.icon"
         :data-test-id="`login-form-${social.id}-button`"
+        class="max-sm:gap-0"
         @click="authWithSocial(social.id)"
       >
-        {{ social.label }}
+        <span class="hidden sm:inline">{{ social.label }}</span>
       </a-button-v2>
     </div>
 

package/icons/calendar2.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup="">
+
+</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-calendar-days">
+    <path d="M8 2v3"/>
+    <path d="M16 2v3"/>
+    <rect x="3" y="3" width="18" height="18" rx="2"/>
+    <path d="M3 9h18"/>
+    <path d="M8 13h.01"/>
+    <path d="M12 13h.01"/>
+    <path d="M16 13h.01"/>
+    <path d="M8 17h.01"/>
+    <path d="M12 17h.01"/>
+    <path d="M16 17h.01"/>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>

package/icons/file/folder.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup="">
+
+</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-folder">
+    <path
+      d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>

package/icons/file-download.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-file-down">
+    <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
+    <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
+    <path d="M12 18v-6"/>
+    <path d="m9 15 3 3 3-3"/>
+  </svg>
+</template>

package/icons/filter2.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup="">
+
+</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-sliders-horizontal">
+    <path d="M10 5H3"/>
+    <path d="M12 19H3"/>
+    <path d="M14 3v4"/>
+    <path d="M16 17v4"/>
+    <path d="M21 12h-9"/>
+    <path d="M21 19h-5"/>
+    <path d="M21 5h-7"/>
+    <path d="M8 10v4"/>
+    <path d="M8 12H3"/>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>

package/icons/funnel.vue

@@ -0,0 +1,5 @@
+<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-funnel">
+    <path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/>
+  </svg>
+</template>

package/icons/qr-code.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup="">
+
+</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-qr-code">
+    <rect width="5" height="5" x="3" y="3" rx="1"/>
+    <rect width="5" height="5" x="16" y="3" rx="1"/>
+    <rect width="5" height="5" x="3" y="16" rx="1"/>
+    <path d="M21 16h-3a2 2 0 0 0-2 2v3"/>
+    <path d="M21 21v.01"/>
+    <path d="M12 7v3a2 2 0 0 1-2 2H7"/>
+    <path d="M3 12h.01"/>
+    <path d="M12 3h.01"/>
+    <path d="M12 16v.01"/>
+    <path d="M16 12h1"/>
+    <path d="M21 12v.01"/>
+    <path d="M12 21v-1"/>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>

package/icons/recycle.vue

@@ -0,0 +1,10 @@
+<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-recycle">
+    <path d="M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5"/>
+    <path d="M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12"/>
+    <path d="m14 16-3 3 3 3"/>
+    <path d="M8.293 13.596 7.196 9.5 3.1 10.598"/>
+    <path d="m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843"/>
+    <path d="m13.378 9.633 4.096 1.098 1.097-4.096"/>
+  </svg>
+</template>

package/icons/reply.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup="">
+
+</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-reply">
+    <path d="M20 18v-2a4 4 0 0 0-4-4H4"/>
+    <path d="m9 17-5-5 5-5"/>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>

package/icons/target.vue

@@ -0,0 +1,7 @@
+<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-target">
+    <circle cx="12" cy="12" r="10"/>
+    <circle cx="12" cy="12" r="6"/>
+    <circle cx="12" cy="12" r="2"/>
+  </svg>
+</template>

package/icons/upload.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup="">
+
+</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-upload">
+    <path d="M12 3v12"/>
+    <path d="m17 8-5-5-5 5"/>
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>

package/icons/user-x.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup="">
+
+</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="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-x"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="17" x2="22" y1="8" y2="13"/><line x1="22" x2="17" y1="8" y2="13"/></svg>
+</template>
+
+<style scoped>
+
+</style>

package/package.json

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