adata-ui 2.1.41-beta.13 → 2.1.41-beta.15

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

@@ -1,237 +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>
+<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>