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

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>