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

package/components/elements/select/ASelectV2.vue

@@ -1,581 +1,588 @@
-<script generic="T" lang="ts" setup>
-import type { Placement } from '@floating-ui/vue'
-import { autoUpdate, flip, size as floatingSize, offset, shift, useFloating } from '@floating-ui/vue'
-import { onClickOutside, useToggle } from '@vueuse/core'
-import { useChipOverflow } from '#adata-ui/composables/useChipOverflow'
-
-import pkg from 'lodash'
-
-interface Props {
-  label: string
-  required?: boolean
-  options: T[]
-  hideOverflow?: boolean
-  keyToShow?: string
-  getOnlyKey?: boolean
-  keyToSelect?: string
-  clearable?: boolean
-  hasButtons?: boolean
-  disabled?: boolean
-  size?: 'sm' | 'md'
-  error?: string | string[]
-  startIcon?: object
-  searchable?: boolean
-  searchLabel?: string
-  searchKey?: string | string[]
-  searchFromOut?: boolean
-  multiple?: boolean
-  minimalWords?: boolean
-  canChipRemove?: boolean
-  showFirstItem?: boolean
-  buttonBg?: string
-  dropdownAnchor?: HTMLElement | string | null
-  dropdownWidth?: number | string
-  dropdownMaxHeight?: number | string
-  dropdownAlign?: 'start' | 'center' | 'end'
-  changeableModelValue?: boolean
-}
-
-interface Emits {
-  (e: 'onChange', option?: T | T[]): void
-  (e: 'onSubmit', value?: T | T[]): void
-  (e: 'onClear'): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  required: false,
-  hideOverflow: false,
-  getOnlyKey: false,
-  keyToShow: 'name',
-  keyToSelect: 'id',
-  clearable: true,
-  hasButtons: false,
-  disabled: false,
-  size: 'sm',
-  error: undefined,
-  startIcon: undefined,
-  searchable: false,
-  searchLabel: 'Поиск...',
-  searchKey: 'name',
-  searchFromOut: false,
-  multiple: false,
-  minimalWords: false,
-  canChipRemove: true,
-  showFirstItem: false,
-  buttonBg: '',
-  dropdownAnchor: null,
-  dropdownWidth: undefined,
-  dropdownMaxHeight: undefined,
-  dropdownAlign: 'start',
-  changeableModelValue: false,
-})
-
-const emits = defineEmits<Emits>()
-
-const modelValue = defineModel<T | T[] | null | any>({ required: true })
-const search = defineModel<T | null | any>('search')
-const isOpen = defineModel<boolean>('open', { default: false })
-
-const { isEqual } = pkg
-
-const reference = ref<HTMLElement | null>(null)
-const floating = ref<HTMLElement | null>(null)
-
-function toCssSize(v?: number | string): string | null {
-  if (v == null || v === '') return null
-  return typeof v === 'number' ? `${v}px` : v
-}
-
-const anchorEl = computed<HTMLElement | null>(() => {
-  const a = props.dropdownAnchor
-  if (!a) return null
-  return typeof a === 'string' ? document.querySelector<HTMLElement>(a) : a
-})
-
-const positionReference = computed(() => {
-  const trigger = reference.value
-  const anchor = anchorEl.value
-  if (!trigger || !anchor) return trigger
-  return {
-    contextElement: trigger,
-    getBoundingClientRect() {
-      const t = trigger.getBoundingClientRect()
-      const c = anchor.getBoundingClientRect()
-      return {
-        x: c.x,
-        y: t.y,
-        left: c.left,
-        right: c.right,
-        top: t.top,
-        bottom: t.bottom,
-        width: c.width,
-        height: t.height,
-      }
-    },
-  }
-})
-
-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(positionReference, 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
-        const widthOverride = toCssSize(props.dropdownWidth)
-        el.style.width = widthOverride ?? `${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`
-        el.style.overflowY = props.hideOverflow ? 'hidden' : 'auto'
-      },
-    }),
-  ]),
-})
-
-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 wrapper = ref<HTMLDivElement | null>(null)
-const toggleOpen = useToggle(isOpen)
-const searchValue = ref('')
-
-onClickOutside(wrapper, () => {
-  if (isOpen.value) toggleOpen(false)
-})
-
-watch(isOpen, (open) => {
-  if (!open) searchValue.value = ''
-})
-
-function findOptionByKey(key: unknown): T | null {
-  if (!props.getOnlyKey) return null
-  return props.options.find(opt => isEqual(opt[props.keyToSelect as keyof T], key)) ?? null
-}
-
-const valueToShow = computed<T | T[] | null>(() => {
-  if (props.multiple) {
-    if (!Array.isArray(modelValue.value) || modelValue.value.length === 0) return null
-    if (props.getOnlyKey) {
-      const keys = modelValue.value as any[]
-      const found = props.options.filter(opt =>
-        keys.some(k => isEqual(k, opt[props.keyToSelect as keyof T])),
-      )
-      return found.length ? found : null
-    }
-    return modelValue.value as T[]
-  }
-
-  if (props.getOnlyKey) {
-    const match = findOptionByKey(modelValue.value)
-    if (match) return match
-  }
-  else if (modelValue.value != null && modelValue.value !== '') {
-    return modelValue.value as T
-  }
-
-  if (props.showFirstItem || !props.label) {
-    return props.options[0] ?? null
-  }
-  return null
-})
-
-const componentOptions = computed(() => {
-  const needle = searchValue.value.toLowerCase()
-  if (!needle) return props.options
-  const keys = Array.isArray(props.searchKey) ? props.searchKey : [props.searchKey]
-  return props.options.filter((item) => {
-    return keys.some(k =>
-      String(item[k as keyof T] ?? '').toLowerCase().includes(needle),
-    )
-  })
-})
-
-function selectedKey(item: T) {
-  return props.getOnlyKey ? item[props.keyToSelect as keyof T] : item
-}
-
-function isItemSelected(item: T): boolean {
-  const key = selectedKey(item)
-  if (props.multiple) {
-    if (!Array.isArray(modelValue.value)) return false
-    return modelValue.value.some(el => isEqual(el, key))
-  }
-  return isEqual(modelValue.value, key)
-}
-
-function onSelect(item: T) {
-  if (props.multiple) {
-    const current = (Array.isArray(modelValue.value) ? [...modelValue.value] : []) as any[]
-    const key = selectedKey(item)
-    const index = current.findIndex(el => isEqual(el, key))
-    if (index !== -1) current.splice(index, 1)
-    else current.push(key)
-    modelValue.value = current
-    emits('onChange', modelValue.value as T[])
-    return
-  }
-  modelValue.value = selectedKey(item)
-  emits('onChange', item)
-  toggleOpen(false)
-}
-
-function onClear() {
-  modelValue.value = props.multiple ? [] : null
-  emits('onClear')
-}
-
-function onClearFromMulti(index: number) {
-  if (!Array.isArray(modelValue.value)) return
-  const next = [...modelValue.value]
-  next.splice(index, 1)
-  modelValue.value = next
-}
-
-defineExpose({ onClear })
-
-const valueColumn = ref<HTMLElement | null>(null)
-const measureRow = ref<HTMLElement | null>(null)
-const selectedCount = computed(() =>
-  Array.isArray(valueToShow.value) ? valueToShow.value.length : 0,
-)
-const { visibleCount: visibleChipCount, hiddenCount: hiddenChipCount } = useChipOverflow({
-  container: valueColumn,
-  measure: measureRow,
-  count: selectedCount,
-  gap: 6,
-})
-
-const triggerLayoutClass = computed(() => {
-  if (props.multiple || !props.label) {
-    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'
-})
-
-const showFloatingLabel = computed(() => !!props.label && !props.multiple)
-
-const isDefaultSelection = computed(() => {
-  if (props.multiple) {
-    return !Array.isArray(modelValue.value) || modelValue.value.length === 0
-  }
-  return modelValue.value == null || modelValue.value === ''
-})
-</script>
-
-<template>
-  <div ref="wrapper" class="select-v2 relative w-full text-sm">
-    <button
-      ref="reference"
-      :disabled="disabled"
-      :class="[
-        triggerLayoutClass,
-        clearable ? 'pr-16' : 'pr-9',
-        { 'select-v2__trigger--error': error },
-        disabled
-          ? 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
-          : (buttonBg || 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'),
-      ]"
-      class="select-v2__trigger text-deepblue-900 relative flex w-full items-center gap-2 rounded-[10px] border border-solid pl-4 transition-colors duration-200 hover:border-blue-500 focus-visible:border-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/20 dark:text-gray-200 dark:hover:border-blue-400 dark:focus-visible:border-blue-400 dark:focus-visible:ring-blue-400/20"
-      @click="toggleOpen()"
-    >
-      <span
-        v-if="showFloatingLabel"
-        :data-size="size"
-        class="select-v2__label pointer-events-none absolute left-4 top-1.5 text-[10px] leading-none text-gray-500 dark:text-gray-400"
-        :class="valueToShow ? 'select-v2__label--floated' : 'select-v2__label--placeholder'"
-      >
-        {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
-      </span>
-
-      <component
-        :is="startIcon"
-        v-if="startIcon"
-        class="shrink-0"
-      />
-
-      <span ref="valueColumn" class="relative w-full min-w-0 overflow-hidden text-start leading-tight">
-        <template v-if="!multiple">
-          <span v-if="valueToShow" class="block truncate leading-tight">
-            <slot name="single-selected" :value="valueToShow">{{ (valueToShow as any)[keyToShow] }}</slot>
-          </span>
-          <span v-else class="text-gray-500 dark:text-gray-400">&#8203;</span>
-        </template>
-
-        <template v-else>
-          <template v-if="Array.isArray(valueToShow) && valueToShow.length">
-            <span class="flex w-full min-w-0 items-center gap-1.5 overflow-hidden py-0.5">
-              <span
-                v-for="(item, index) in (valueToShow as any[]).slice(0, visibleChipCount)"
-                :key="index"
-                class="select-v2__chip inline-flex min-w-0 max-w-[180px] items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs dark:border-gray-700 dark:bg-white/[0.06]"
-                @click.stop="canChipRemove ? onClearFromMulti(index) : (isOpen = true)"
-              >
-                <span class="truncate">{{ item[keyToShow] }}</span>
-                <button
-                  v-if="canChipRemove"
-                  class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-white/[0.12]"
-                >
-                  <a-icon-x-mark class="size-2.5" />
-                </button>
-              </span>
-              <span
-                v-if="hiddenChipCount > 0"
-                class="inline-flex shrink-0 items-center whitespace-nowrap rounded-md border border-blue-200 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
-              >
-                +{{ hiddenChipCount }}
-              </span>
-            </span>
-
-            <span
-              ref="measureRow"
-              aria-hidden="true"
-              class="pointer-events-none invisible absolute left-0 top-0 flex h-0 items-center gap-1.5"
-            >
-              <span
-                v-for="(item, index) in (valueToShow as any[])"
-                :key="`measure-${index}`"
-                class="inline-flex max-w-[180px] items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs"
-              >
-                <span class="truncate">{{ item[keyToShow] }}</span>
-                <span
-                  v-if="canChipRemove"
-                  class="flex shrink-0 items-center justify-center rounded-full p-0.5"
-                >
-                  <a-icon-x-mark class="size-2.5" />
-                </span>
-              </span>
-              <span class="inline-flex shrink-0 items-center whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium">
-                +{{ selectedCount }}
-              </span>
-            </span>
-          </template>
-          <span v-else class="text-gray-500 dark:text-gray-400">{{ label }}</span>
-        </template>
-      </span>
-
-      <button
-        v-if="valueToShow && clearable && !isDefaultSelection"
-        class="absolute right-9 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-white/[0.08] dark:hover:text-gray-300"
-        @click.stop="onClear"
-      >
-        <a-icon-x-mark class="!m-0 size-3.5" />
-      </button>
-
-      <span
-        :class="{ 'rotate-180': isOpen }"
-        class="absolute right-3 top-1/2 -translate-y-1/2 transition-transform duration-200"
-      >
-        <a-icon-chevron-down class="!m-0 size-4 text-gray-400 dark:text-gray-500" />
-      </span>
-    </button>
-
-    <transition
-      enter-active-class="select-v2__dropdown-enter-active"
-      enter-from-class="select-v2__dropdown-enter-from"
-      enter-to-class="select-v2__dropdown-enter-to"
-      leave-active-class="select-v2__dropdown-leave-active"
-      leave-from-class="select-v2__dropdown-leave-from"
-      leave-to-class="select-v2__dropdown-leave-to"
-    >
-      <div
-        v-if="isOpen"
-        ref="floating"
-        class="select-v2__dropdown z-[10000] rounded-xl border border-gray-200 bg-white shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
-        :style="{
-          position: strategy,
-          left: x != null ? `${x}px` : '',
-          top: y != null ? `${y}px` : '',
-        }"
-      >
-        <slot :options="options" name="options">
-          <ul class="select-v2__list flex flex-col gap-1 p-1.5">
-            <li v-if="searchFromOut" class="px-1 pb-1.5">
-              <a-input-standard
-                v-model="search"
-                :label="searchLabel"
-                :size="size"
-                clearable
-                color="gray"
-              />
-            </li>
-
-            <li v-if="searchable" class="px-1 pb-1.5">
-              <a-input-standard
-                v-model="searchValue"
-                :label="searchLabel"
-                :size="size"
-                clearable
-                color="gray"
-              />
-            </li>
-
-            <li v-for="(option, index) in componentOptions" :key="index">
-              <button
-                :disabled="!multiple && isItemSelected(option)"
-                :class="{ 'select-v2__option--selected': isItemSelected(option) }"
-                class="select-v2__option flex w-full items-center justify-between rounded-lg px-3 py-2 text-start text-sm transition-colors duration-100 hover:bg-gray-50 dark:hover:bg-gray-800/60"
-                @click="onSelect(option)"
-              >
-                <span>
-                  <slot name="option" :option="option">{{ (option as any)[keyToShow] }}</slot>
-                </span>
-                <a-icon-check
-                  v-if="isItemSelected(option)"
-                  class="size-4 shrink-0 text-blue-600 dark:text-blue-400"
-                />
-              </button>
-            </li>
-          </ul>
-        </slot>
-
-        <div
-          v-if="props.hasButtons"
-          class="flex w-full flex-col gap-2 border-t border-gray-200 p-3 xl:flex-row dark:border-gray-700"
-        >
-          <slot name="buttons">
-            <a-button
-              view="outline"
-              color="gray"
-              block
-              @click="onClear"
-            >
-              Сбросить
-            </a-button>
-            <a-button block @click="emits('onSubmit', modelValue)">
-              Применить
-            </a-button>
-          </slot>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped>
-.select-v2__trigger:disabled {
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
-.select-v2__trigger--error {
-  border-color: theme('colors.red.500');
-}
-
-.select-v2__dropdown-enter-active,
-.select-v2__dropdown-leave-active {
-  transition:
-    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
-    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.select-v2__dropdown-enter-from,
-.select-v2__dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-.select-v2__dropdown-enter-to,
-.select-v2__dropdown-leave-from {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.select-v2__list {
-  max-height: 250px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.select-v2__list::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  display: none;
-}
-
-.select-v2__option--selected {
-  background-color: theme('colors.blue.50');
-  font-weight: 500;
-}
-
-:is(.dark) .select-v2__option--selected {
-  background-color: rgb(30 64 175 / 0.12);
-}
-
-.select-v2__chip {
-  cursor: pointer;
-  transition: background-color 150ms;
-}
-
-.select-v2__chip:hover {
-  background-color: theme('colors.gray.100');
-}
-
-:is(.dark) .select-v2__chip:hover {
-  background-color: rgb(255 255 255 / 0.08);
-}
-
-.select-v2__option {
-  cursor: pointer;
-}
-
-.select-v2__option:disabled {
-  cursor: default;
-}
-
-.select-v2__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-v2__label--floated {
-  transform: translateY(0) scale(1);
-}
-
-.select-v2__label--placeholder {
-  transform: translateY(7px) scale(1.4);
-}
-
-.select-v2__label--placeholder[data-size="sm"] {
-  transform: translateY(5px) scale(1.4);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .select-v2__dropdown-enter-active,
-  .select-v2__dropdown-leave-active,
-  .select-v2__label {
-    transition: none;
-  }
-}
-</style>
+<script generic="T" lang="ts" setup>
+import type { Placement } from '@floating-ui/vue'
+import { autoUpdate, flip, size as floatingSize, offset, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside, useToggle } from '@vueuse/core'
+import { useChipOverflow } from '#adata-ui/composables/useChipOverflow'
+
+import pkg from 'lodash'
+
+interface Props {
+  label: string
+  required?: boolean
+  options: T[]
+  hideOverflow?: boolean
+  keyToShow?: string
+  getOnlyKey?: boolean
+  keyToSelect?: string
+  clearable?: boolean
+  hasButtons?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md'
+  error?: string | string[]
+  startIcon?: object
+  searchable?: boolean
+  searchLabel?: string
+  searchKey?: string | string[]
+  searchFromOut?: boolean
+  multiple?: boolean
+  minimalWords?: boolean
+  canChipRemove?: boolean
+  showFirstItem?: boolean
+  buttonBg?: string
+  dropdownAnchor?: HTMLElement | string | null
+  dropdownWidth?: number | string
+  dropdownMaxHeight?: number | string
+  dropdownAlign?: 'start' | 'center' | 'end'
+  changeableModelValue?: boolean
+}
+
+interface Emits {
+  (e: 'onChange', option?: T | T[]): void
+  (e: 'onSubmit', value?: T | T[]): void
+  (e: 'onClear'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  required: false,
+  hideOverflow: false,
+  getOnlyKey: false,
+  keyToShow: 'name',
+  keyToSelect: 'id',
+  clearable: true,
+  hasButtons: false,
+  disabled: false,
+  size: 'sm',
+  error: undefined,
+  startIcon: undefined,
+  searchable: false,
+  searchLabel: 'Поиск...',
+  searchKey: 'name',
+  searchFromOut: false,
+  multiple: false,
+  minimalWords: false,
+  canChipRemove: true,
+  showFirstItem: false,
+  buttonBg: '',
+  dropdownAnchor: null,
+  dropdownWidth: undefined,
+  dropdownMaxHeight: undefined,
+  dropdownAlign: 'start',
+  changeableModelValue: false,
+})
+
+const emits = defineEmits<Emits>()
+
+const modelValue = defineModel<T | T[] | null | any>({ required: true })
+const search = defineModel<T | null | any>('search')
+const isOpen = defineModel<boolean>('open', { default: false })
+
+const { isEqual } = pkg
+
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+
+function toCssSize(v?: number | string): string | null {
+  if (v == null || v === '') return null
+  return typeof v === 'number' ? `${v}px` : v
+}
+
+const anchorEl = computed<HTMLElement | null>(() => {
+  const a = props.dropdownAnchor
+  if (!a) return null
+  return typeof a === 'string' ? document.querySelector<HTMLElement>(a) : a
+})
+
+const positionReference = computed(() => {
+  const trigger = reference.value
+  const anchor = anchorEl.value
+  if (!trigger || !anchor) return trigger
+  return {
+    contextElement: trigger,
+    getBoundingClientRect() {
+      const t = trigger.getBoundingClientRect()
+      const c = anchor.getBoundingClientRect()
+      return {
+        x: c.x,
+        y: t.y,
+        left: c.left,
+        right: c.right,
+        top: t.top,
+        bottom: t.bottom,
+        width: c.width,
+        height: t.height,
+      }
+    },
+  }
+})
+
+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(positionReference, 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
+        const widthOverride = toCssSize(props.dropdownWidth)
+        el.style.width = widthOverride ?? `${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`
+        el.style.overflowY = props.hideOverflow ? 'hidden' : 'auto'
+      },
+    }),
+  ]),
+})
+
+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 wrapper = ref<HTMLDivElement | null>(null)
+const toggleOpen = useToggle(isOpen)
+const searchValue = ref('')
+
+onClickOutside(wrapper, () => {
+  if (isOpen.value) toggleOpen(false)
+})
+
+watch(isOpen, (open) => {
+  if (!open) searchValue.value = ''
+})
+
+function findOptionByKey(key: unknown): T | null {
+  if (!props.getOnlyKey) return null
+  return props.options.find(opt => isEqual(opt[props.keyToSelect as keyof T], key)) ?? null
+}
+
+const valueToShow = computed<T | T[] | null>(() => {
+  if (props.multiple) {
+    if (!Array.isArray(modelValue.value) || modelValue.value.length === 0) return null
+    if (props.getOnlyKey) {
+      const keys = modelValue.value as any[]
+      const found = keys
+        .map(k => props.options.find(opt => isEqual(k, opt[props.keyToSelect as keyof T])))
+        .filter((opt): opt is T => opt != null)
+      return found.length ? found : null
+    }
+    return modelValue.value as T[]
+  }
+
+  if (props.getOnlyKey) {
+    const match = findOptionByKey(modelValue.value)
+    if (match) return match
+  }
+  else if (modelValue.value != null && modelValue.value !== '') {
+    return modelValue.value as T
+  }
+
+  if (props.showFirstItem || !props.label) {
+    return props.options[0] ?? null
+  }
+  return null
+})
+
+const componentOptions = computed(() => {
+  const needle = searchValue.value.toLowerCase()
+  if (!needle) return props.options
+  const keys = Array.isArray(props.searchKey) ? props.searchKey : [props.searchKey]
+  return props.options.filter((item) => {
+    return keys.some(k =>
+      String(item[k as keyof T] ?? '').toLowerCase().includes(needle),
+    )
+  })
+})
+
+function selectedKey(item: T) {
+  return props.getOnlyKey ? item[props.keyToSelect as keyof T] : item
+}
+
+function isItemSelected(item: T): boolean {
+  const key = selectedKey(item)
+  if (props.multiple) {
+    if (!Array.isArray(modelValue.value)) return false
+    return modelValue.value.some(el => isEqual(el, key))
+  }
+  return isEqual(modelValue.value, key)
+}
+
+function onSelect(item: T) {
+  if (props.multiple) {
+    const current = (Array.isArray(modelValue.value) ? [...modelValue.value] : []) as any[]
+    const key = selectedKey(item)
+    const index = current.findIndex(el => isEqual(el, key))
+    if (index !== -1) current.splice(index, 1)
+    else current.push(key)
+    modelValue.value = current
+    emits('onChange', modelValue.value as T[])
+    return
+  }
+  modelValue.value = selectedKey(item)
+  emits('onChange', item)
+  toggleOpen(false)
+}
+
+function onClear() {
+  modelValue.value = props.multiple ? [] : null
+  emits('onClear')
+}
+
+function onClearFromMulti(item: T) {
+  if (!Array.isArray(modelValue.value)) return
+  const key = selectedKey(item)
+  const index = modelValue.value.findIndex(el => isEqual(el, key))
+  if (index === -1) return
+  const next = [...modelValue.value]
+  next.splice(index, 1)
+  modelValue.value = next
+}
+
+defineExpose({ onClear })
+
+const valueColumn = ref<HTMLElement | null>(null)
+const measureRow = ref<HTMLElement | null>(null)
+const selectedCount = computed(() =>
+  Array.isArray(valueToShow.value) ? valueToShow.value.length : 0,
+)
+const { visibleCount: visibleChipCount, hiddenCount: hiddenChipCount } = useChipOverflow({
+  container: valueColumn,
+  measure: measureRow,
+  count: selectedCount,
+  contentKey: computed(() => {
+    if (!Array.isArray(valueToShow.value)) return ''
+    return (valueToShow.value as any[]).map(item => item?.[props.keyToShow]).join(' ')
+  }),
+  gap: 6,
+})
+
+const triggerLayoutClass = computed(() => {
+  if (props.multiple || !props.label) {
+    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'
+})
+
+const showFloatingLabel = computed(() => !!props.label && !props.multiple)
+
+const isDefaultSelection = computed(() => {
+  if (props.multiple) {
+    return !Array.isArray(modelValue.value) || modelValue.value.length === 0
+  }
+  return modelValue.value == null || modelValue.value === ''
+})
+</script>
+
+<template>
+  <div ref="wrapper" class="select-v2 relative w-full text-body-md">
+    <button
+      ref="reference"
+      :disabled="disabled"
+      :class="[
+        triggerLayoutClass,
+        clearable ? 'pr-16' : 'pr-9',
+        { 'select-v2__trigger--error': error },
+        disabled
+          ? 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
+          : (buttonBg || 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'),
+      ]"
+      class="select-v2__trigger text-deepblue-900 relative flex w-full items-center gap-2 rounded-[10px] border border-solid pl-4 transition-colors duration-200 hover:border-blue-500 focus-visible:border-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/20 dark:text-gray-200 dark:hover:border-blue-400 dark:focus-visible:border-blue-400 dark:focus-visible:ring-blue-400/20"
+      @click="toggleOpen()"
+    >
+      <span
+        v-if="showFloatingLabel"
+        :data-size="size"
+        class="select-v2__label pointer-events-none absolute left-4 top-1.5 text-[10px] leading-none text-gray-500 dark:text-gray-400"
+        :class="valueToShow ? 'select-v2__label--floated' : 'select-v2__label--placeholder'"
+      >
+        {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
+      </span>
+
+      <component
+        :is="startIcon"
+        v-if="startIcon"
+        class="shrink-0"
+      />
+
+      <span ref="valueColumn" class="relative w-full min-w-0 overflow-hidden text-start leading-tight">
+        <template v-if="!multiple">
+          <span v-if="valueToShow" class="block truncate leading-tight">
+            <slot name="single-selected" :value="valueToShow">{{ (valueToShow as any)[keyToShow] }}</slot>
+          </span>
+          <span v-else class="text-gray-500 dark:text-gray-400">&#8203;</span>
+        </template>
+
+        <template v-else>
+          <template v-if="Array.isArray(valueToShow) && valueToShow.length">
+            <span class="flex w-full min-w-0 items-center gap-1.5 overflow-hidden py-0.5">
+              <span
+                v-for="(item, index) in (valueToShow as any[]).slice(0, visibleChipCount)"
+                :key="index"
+                class="select-v2__chip inline-flex min-w-0 items-center gap-1 rounded-sm bg-[#F0F8FF] px-2 py-0.5 text-body-sm text-blue-600 dark:bg-blue-600/15 dark:text-blue-400"
+                @click.stop="canChipRemove ? onClearFromMulti(item) : (isOpen = true)"
+              >
+                <span class="truncate">{{ item[keyToShow] }}</span>
+                <button
+                  v-if="canChipRemove"
+                  class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-blue-100 dark:hover:bg-blue-500/20"
+                >
+                  <a-icon-x-mark class="size-2.5" />
+                </button>
+              </span>
+              <span
+                v-if="hiddenChipCount > 0"
+                class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm bg-[#DBEFFF] px-2 py-0.5 text-body-sm-medium text-[#0066BD] dark:bg-blue-600/25 dark:text-blue-300"
+              >
+                +{{ hiddenChipCount }}
+              </span>
+            </span>
+
+            <span
+              ref="measureRow"
+              aria-hidden="true"
+              class="pointer-events-none invisible absolute left-0 top-0 flex h-0 w-max items-center gap-1.5"
+            >
+              <span
+                v-for="(item, index) in (valueToShow as any[])"
+                :key="`measure-${index}`"
+                class="inline-flex items-center gap-1 whitespace-nowrap rounded-sm bg-gray-50 px-2 py-0.5 text-body-sm"
+              >
+                <span>{{ item[keyToShow] }}</span>
+                <span
+                  v-if="canChipRemove"
+                  class="flex shrink-0 items-center justify-center rounded-full p-0.5"
+                >
+                  <a-icon-x-mark class="size-2.5" />
+                </span>
+              </span>
+              <span class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm px-2 py-0.5 text-body-sm-medium">
+                +{{ selectedCount }}
+              </span>
+            </span>
+          </template>
+          <span v-else class="text-gray-500 dark:text-gray-400">{{ label }}</span>
+        </template>
+      </span>
+
+      <button
+        v-if="valueToShow && clearable && !isDefaultSelection"
+        class="absolute right-9 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.08] dark:hover:text-gray-300"
+        @click.stop="onClear"
+      >
+        <a-icon-x-mark class="!m-0 size-3.5" />
+      </button>
+
+      <span
+        :class="{ 'rotate-180': isOpen }"
+        class="absolute right-3 top-1/2 -translate-y-1/2 transition-transform duration-200"
+      >
+        <a-icon-chevron-down class="!m-0 size-4 text-gray-400 dark:text-gray-500" />
+      </span>
+    </button>
+
+    <transition
+      enter-active-class="select-v2__dropdown-enter-active"
+      enter-from-class="select-v2__dropdown-enter-from"
+      enter-to-class="select-v2__dropdown-enter-to"
+      leave-active-class="select-v2__dropdown-leave-active"
+      leave-from-class="select-v2__dropdown-leave-from"
+      leave-to-class="select-v2__dropdown-leave-to"
+    >
+      <div
+        v-if="isOpen"
+        ref="floating"
+        class="select-v2__dropdown z-[10000] rounded-lg border border-gray-200 bg-white shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
+        :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        }"
+      >
+        <slot :options="options" name="options">
+          <ul class="select-v2__list flex flex-col gap-1 p-1.5">
+            <li v-if="searchFromOut" class="px-1 pb-1.5">
+              <a-input-standard
+                v-model="search"
+                :label="searchLabel"
+                :size="size"
+                clearable
+                color="gray"
+              />
+            </li>
+
+            <li v-if="searchable" class="px-1 pb-1.5">
+              <a-input-standard
+                v-model="searchValue"
+                :label="searchLabel"
+                :size="size"
+                clearable
+                color="gray"
+              />
+            </li>
+
+            <li v-for="(option, index) in componentOptions" :key="index">
+              <button
+                :disabled="!multiple && isItemSelected(option)"
+                :class="{ 'select-v2__option--selected': isItemSelected(option) }"
+                class="select-v2__option flex w-full items-center justify-between rounded-md px-3 py-2 text-start text-body-md transition-colors duration-100 hover:bg-gray-50 dark:hover:bg-gray-800/60"
+                @click="onSelect(option)"
+              >
+                <span>
+                  <slot name="option" :option="option">{{ (option as any)[keyToShow] }}</slot>
+                </span>
+                <a-icon-check
+                  v-if="isItemSelected(option)"
+                  class="size-4 shrink-0 text-blue-600 dark:text-blue-400"
+                />
+              </button>
+            </li>
+          </ul>
+        </slot>
+
+        <div
+          v-if="props.hasButtons"
+          class="flex w-full flex-col gap-2 border-t border-gray-200 p-3 xl:flex-row dark:border-gray-700"
+        >
+          <slot name="buttons">
+            <a-button
+              view="outline"
+              color="gray"
+              block
+              @click="onClear"
+            >
+              Сбросить
+            </a-button>
+            <a-button block @click="emits('onSubmit', modelValue)">
+              Применить
+            </a-button>
+          </slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.select-v2__trigger:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.select-v2__trigger--error {
+  border-color: theme('colors.red.500');
+}
+
+.select-v2__dropdown-enter-active,
+.select-v2__dropdown-leave-active {
+  transition:
+    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.select-v2__dropdown-enter-from,
+.select-v2__dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.select-v2__dropdown-enter-to,
+.select-v2__dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.select-v2__list {
+  max-height: 250px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.select-v2__list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.select-v2__option--selected {
+  background-color: theme('colors.blue.50');
+  font-weight: 500;
+}
+
+:is(.dark) .select-v2__option--selected {
+  background-color: rgb(30 64 175 / 0.12);
+}
+
+.select-v2__chip {
+  cursor: pointer;
+  transition: background-color 150ms;
+}
+
+.select-v2__chip:hover {
+  background-color: theme('colors.blue.100');
+}
+
+:is(.dark) .select-v2__chip:hover {
+  background-color: rgb(6 141 255 / 0.25);
+}
+
+.select-v2__option {
+  cursor: pointer;
+}
+
+.select-v2__option:disabled {
+  cursor: default;
+}
+
+.select-v2__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-v2__label--floated {
+  transform: translateY(0) scale(1);
+}
+
+.select-v2__label--placeholder {
+  transform: translateY(7px) scale(1.4);
+}
+
+.select-v2__label--placeholder[data-size="sm"] {
+  transform: translateY(5px) scale(1.4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .select-v2__dropdown-enter-active,
+  .select-v2__dropdown-leave-active,
+  .select-v2__label {
+    transition: none;
+  }
+}
+</style>