adata-ui 2.1.40-beta.10 → 2.1.40-beta.12

package/components/navigation/pill-tabs/APillTabsV2.vue

@@ -18,18 +18,22 @@ const props = withDefaults(defineProps<{
   block?: boolean
   disabled?: boolean
   size?: 'sm' | 'md'
+  scrollIntoView?: boolean
 }>(), {
   showCount: false,
   block: false,
   disabled: false,
   size: 'sm',
+  scrollIntoView: false,
 })
 
 const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
 
+const listRef = ref<HTMLElement | null>(null)
+
 const SIZE_CLASS: Record<'sm' | 'md', string> = {
-  sm: 'text-xs',
-  md: 'text-sm',
+  sm: 'text-body-sm',
+  md: 'text-body-md',
 }
 
 const COUNT_COLOR_CLASS: Record<CountColor, string> = {
@@ -55,11 +59,22 @@ function select(option: PillTab) {
   if (isDisabled(option)) return
   emit('update:modelValue', option.key)
 }
+
+function scrollActiveIntoView() {
+  if (!props.scrollIntoView) return
+  nextTick(() => {
+    const active = listRef.value?.querySelector<HTMLElement>('[aria-selected="true"]')
+    active?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+  })
+}
+
+watch(() => props.modelValue, scrollActiveIntoView)
+onMounted(scrollActiveIntoView)
 </script>
 
 <template>
   <div
-    class="pill-tabs-v2 min-w-0 max-w-full rounded-xl border border-gray-200 bg-gray-50 p-1 dark:border-white/10 dark:bg-white/[0.03]"
+    class="pill-tabs-v2 min-w-0 max-w-full rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-white/10 dark:bg-white/[0.03]"
     :class="[
       block ? 'w-full' : 'w-fit',
       disabled ? 'pill-tabs-v2--disabled opacity-60' : '',
@@ -67,6 +82,7 @@ function select(option: PillTab) {
     :aria-disabled="disabled || undefined"
   >
     <div
+      ref="listRef"
       role="tablist"
       :aria-label="ariaLabel"
       class="pill-tabs-v2__list flex w-full flex-nowrap items-center gap-1 overflow-x-auto"
@@ -80,13 +96,13 @@ function select(option: PillTab) {
         :aria-disabled="isDisabled(option) || undefined"
         :disabled="isDisabled(option)"
         :tabindex="modelValue === option.key ? 0 : -1"
-        class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3 py-1.5 font-medium transition-colors duration-150"
+        class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 font-medium transition-colors duration-150"
         :class="[
           SIZE_CLASS[size],
           isDisabled(option)
             ? 'cursor-not-allowed text-gray-300 dark:text-gray-600'
             : modelValue === option.key
-              ? 'text-deepblue-900 bg-white shadow-sm dark:bg-gray-700 dark:text-gray-100 dark:shadow-none dark:ring-1 dark:ring-inset dark:ring-white/10'
+              ? 'bg-white text-deepblue-900 shadow-sm dark:bg-gray-700 dark:text-gray-100 dark:shadow-none dark:ring-1 dark:ring-inset dark:ring-white/10'
               : 'text-gray-700 hover:bg-white/70 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-white/[0.06] dark:hover:text-gray-100',
           block ? 'flex-1 basis-0 justify-center' : 'shrink-0',
         ]"
@@ -97,7 +113,7 @@ function select(option: PillTab) {
 
           <span
             v-if="showCount && !option.hideCount"
-            class="inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-semibold leading-5"
+            class="inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-body-sm font-semibold leading-5"
             :class="COUNT_COLOR_CLASS[option.countColor ?? 'gray']"
           >
             {{ option.count }}

package/components/overlays/drawer/ADrawerV2.vue

@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import { onKeyStroke, useScrollLock } from '@vueuse/core'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  closeOnOverlay?: boolean
+  closeOnEsc?: boolean
+  lockScroll?: boolean
+  persistent?: boolean
+  transition?: boolean
+  contentClass?: string
+  hideHeader?: boolean
+  blur?: boolean | 'sm' | 'md' | 'lg' | 'xl'
+  swipeToClose?: boolean
+  swipeThreshold?: number
+  showDragHandle?: boolean
+  maxHeight?: string
+}>(), {
+  closeOnOverlay: true,
+  closeOnEsc: true,
+  lockScroll: true,
+  persistent: false,
+  transition: true,
+  hideHeader: false,
+  blur: false,
+  swipeToClose: true,
+  swipeThreshold: 65,
+  showDragHandle: true,
+  maxHeight: '100dvh',
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'open'): void
+}>()
+
+const open = defineModel<boolean>({ required: true })
+
+const contentRef = ref<HTMLElement | null>(null)
+const overlayRef = ref<HTMLElement | null>(null)
+const swipeClosing = ref(false)
+const bodyScrollLocked = useScrollLock(import.meta.client ? document.body : null)
+
+const blurClass = computed(() => {
+  if (!props.blur) return ''
+
+  switch (props.blur) {
+    case 'sm': return 'backdrop-blur-sm'
+    case 'md': return 'backdrop-blur-md'
+    case 'lg': return 'backdrop-blur-lg'
+    case 'xl': return 'backdrop-blur-xl'
+    default: return 'backdrop-blur'
+  }
+})
+
+const overlayClass = computed(() => {
+  const base = ['drawer-v2-overlay fixed inset-0 z-[10000] flex items-end justify-stretch bg-black/40 dark:bg-black/60']
+  if (blurClass.value) base.push(blurClass.value)
+  return base.join(' ')
+})
+
+const contentStyle = computed(() => ({ maxHeight: props.maxHeight }))
+
+const overlayTransitionName = computed(() => {
+  if (swipeClosing.value) return ''
+  return props.transition ? 'drawer-v2-overlay' : ''
+})
+const contentTransitionName = computed(() => {
+  if (swipeClosing.value || !props.transition) return ''
+  return 'drawer-v2-sheet'
+})
+
+function closeIfAllowed() {
+  if (props.persistent) return
+  open.value = false
+}
+
+function onOverlayClick(event: MouseEvent) {
+  if (!props.closeOnOverlay || props.persistent) return
+  if (event.target === event.currentTarget) {
+    open.value = false
+  }
+}
+
+onKeyStroke('Escape', () => {
+  if (!open.value) return
+  if (!props.closeOnEsc || props.persistent) return
+  open.value = false
+})
+
+function setScrollbarCompensation(active: boolean) {
+  if (!import.meta.client) return
+
+  if (active) {
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+    document.body.style.paddingRight = scrollbarWidth > 0 ? `${scrollbarWidth}px` : ''
+  }
+  else {
+    document.body.style.paddingRight = ''
+  }
+}
+
+watch(open, (value) => {
+  if (props.lockScroll) {
+    if (value) setScrollbarCompensation(true)
+    bodyScrollLocked.value = value
+    if (!value) setScrollbarCompensation(false)
+  }
+
+  if (value) emit('open')
+  else emit('close')
+})
+
+onBeforeUnmount(() => {
+  if (bodyScrollLocked.value) {
+    bodyScrollLocked.value = false
+  }
+  setScrollbarCompensation(false)
+})
+
+const dragging = ref(false)
+const dragStartY = ref(0)
+const dragDelta = ref(0)
+
+function canSwipe() {
+  return props.swipeToClose && !props.persistent
+}
+
+function setTransform(value: string) {
+  if (contentRef.value) {
+    contentRef.value.style.transform = value
+  }
+}
+
+function onTouchStart(event: TouchEvent) {
+  if (!canSwipe()) return
+  dragging.value = true
+  dragStartY.value = event.touches[0].clientY
+  dragDelta.value = 0
+
+  if (contentRef.value) {
+    contentRef.value.style.transition = 'none'
+  }
+}
+
+function onTouchMove(event: TouchEvent) {
+  if (!dragging.value || !canSwipe()) return
+
+  const delta = event.touches[0].clientY - dragStartY.value
+  if (delta < 0) {
+    dragDelta.value = 0
+    setTransform('')
+    return
+  }
+
+  dragDelta.value = delta
+  setTransform(`translateY(${delta}px)`)
+}
+
+function prefersReducedMotion() {
+  return import.meta.client && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+function animateClose() {
+  const content = contentRef.value
+
+  if (!content || prefersReducedMotion()) {
+    open.value = false
+    return
+  }
+
+  swipeClosing.value = true
+
+  let done = false
+  const finish = () => {
+    if (done) return
+    done = true
+    content.removeEventListener('transitionend', onTransitionEnd)
+    open.value = false
+    swipeClosing.value = false
+  }
+
+  function onTransitionEnd(event: TransitionEvent) {
+    if (event.target === content && event.propertyName === 'transform') {
+      finish()
+    }
+  }
+
+  content.addEventListener('transitionend', onTransitionEnd)
+  setTimeout(finish, 320)
+
+  requestAnimationFrame(() => {
+    content.style.transition = 'transform 260ms cubic-bezier(0.22, 1, 0.36, 1)'
+    content.style.transform = 'translateY(100%)'
+
+    if (overlayRef.value) {
+      overlayRef.value.style.transition = 'opacity 260ms ease'
+      overlayRef.value.style.opacity = '0'
+    }
+  })
+}
+
+function onTouchEnd() {
+  if (!dragging.value) return
+  dragging.value = false
+
+  const shouldClose = dragDelta.value > props.swipeThreshold && canSwipe()
+
+  if (shouldClose) {
+    animateClose()
+  }
+  else if (contentRef.value) {
+    contentRef.value.style.transition = 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)'
+    contentRef.value.style.transform = ''
+  }
+
+  dragDelta.value = 0
+}
+</script>
+
+<template>
+  <client-only>
+    <teleport to="body">
+      <transition :name="overlayTransitionName">
+        <div
+          v-if="open"
+          ref="overlayRef"
+          :class="overlayClass"
+          @mousedown="onOverlayClick"
+        >
+          <transition :name="contentTransitionName" appear>
+            <div
+              v-if="open"
+              ref="contentRef"
+              class="drawer-v2-content flex w-full max-w-none flex-col overflow-hidden rounded-t-xl border-t border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-900"
+              :style="contentStyle"
+              @mousedown.stop
+            >
+              <div
+                v-if="showDragHandle"
+                class="flex shrink-0 cursor-grab touch-none justify-center py-2"
+                @touchstart.passive="onTouchStart"
+                @touchmove="onTouchMove"
+                @touchend="onTouchEnd"
+                @touchcancel="onTouchEnd"
+              >
+                <div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600" />
+              </div>
+
+              <header
+                v-if="!hideHeader && (title || $slots.header)"
+                class="flex shrink-0 items-center justify-between gap-3 border-b border-gray-200 px-5 py-4 dark:border-gray-800"
+                @touchstart.passive="onTouchStart"
+                @touchmove="onTouchMove"
+                @touchend="onTouchEnd"
+                @touchcancel="onTouchEnd"
+              >
+                <slot name="header">
+                  <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                    {{ title }}
+                  </h2>
+                  <button
+                    type="button"
+                    class="rounded-sm p-1 text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                    @click="closeIfAllowed"
+                  >
+                    <a-icon-x-mark class="size-4" />
+                  </button>
+                </slot>
+              </header>
+
+              <div class="min-h-0 flex-1 overflow-auto" :class="contentClass">
+                <slot :close="closeIfAllowed" />
+              </div>
+
+              <footer
+                v-if="$slots.footer"
+                class="shrink-0 border-t border-gray-200 px-5 py-4 dark:border-gray-800"
+              >
+                <slot name="footer" :close="closeIfAllowed" />
+              </footer>
+            </div>
+          </transition>
+        </div>
+      </transition>
+    </teleport>
+  </client-only>
+</template>
+
+<style scoped lang="scss">
+.drawer-v2-overlay {
+  will-change: opacity;
+}
+
+.drawer-v2-content {
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+.drawer-v2-overlay-enter-active {
+  transition: opacity 240ms ease-out;
+}
+
+.drawer-v2-overlay-leave-active {
+  transition: opacity 220ms ease-in;
+}
+
+.drawer-v2-overlay-enter-from,
+.drawer-v2-overlay-leave-to {
+  opacity: 0;
+}
+
+.drawer-v2-sheet-enter-active {
+  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.drawer-v2-sheet-leave-active {
+  transition: transform 240ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+.drawer-v2-sheet-enter-from,
+.drawer-v2-sheet-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer-v2-overlay-enter-active,
+  .drawer-v2-overlay-leave-active,
+  .drawer-v2-sheet-enter-active,
+  .drawer-v2-sheet-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/overlays/modal/AModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import { twJoin, twMerge } from 'tailwind-merge'
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 import { onClickOutside, useWindowSize } from '@vueuse/core'
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 
@@ -22,13 +22,13 @@ const uiConfig = {
   position: 'top-1/2 left-1/2 translate-y-[-50%] translate-x-[-50%]',
   padding: "p-8",
   background: "bg-white dark:bg-gray-900",
-  rounded: "rounded-lg",
+  rounded: "rounded-md",
   fullscreen: "w-screen h-screen rounded-none",
   mobile: {
     width: "w-screen",
     position: "bottom-0 left-0 transition-transform",
     padding: 'px-4 sm:pb-8 pb-4 pt-3',
-    rounded: "rounded-t-2xl"
+    rounded: "rounded-t-xl"
   },
   transition: {
     desktop: {
@@ -297,7 +297,7 @@ watch(modelValue, async (newValue) => {
                 >
                   <h4
                     v-if="title"
-                    class="heading-02 text-center"
+                    class="text-h2 text-center"
                     @touchmove="touchmove"
                     @touchstart="touchstart"
                     @touchend="touchend"

package/components/overlays/modal/AModalV2.vue

@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<{
   transition?: boolean
   contentClass?: string
   hideHeader?: boolean
+  hideClose?: boolean
   blur?: boolean | 'sm' | 'md' | 'lg' | 'xl'
   mobileSheet?: boolean
   swipeToClose?: boolean
@@ -27,6 +28,7 @@ const props = withDefaults(defineProps<{
   persistent: false,
   transition: true,
   hideHeader: false,
+  hideClose: false,
   blur: false,
   mobileSheet: true,
   swipeToClose: true,
@@ -96,10 +98,10 @@ const contentBaseClass = computed(() => {
   const base = ['modal-v2-content flex flex-col overflow-hidden border bg-white shadow-2xl dark:bg-gray-900']
 
   if (isSheet.value) {
-    base.push('w-full max-w-none max-h-[100dvh] rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t border-gray-200 dark:border-gray-800')
+    base.push('w-full max-w-none max-h-[100dvh] rounded-t-xl rounded-b-none border-x-0 border-b-0 border-t border-gray-200 dark:border-gray-800')
   }
   else {
-    const radius = props.size === 'fullscreen' ? 'rounded-none' : 'rounded-2xl'
+    const radius = props.size === 'fullscreen' ? 'rounded-none' : 'rounded-xl'
     const widthCls = props.size === 'container'
       ? ' w-full max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl 2xl:max-w-screen-2xl'
       : ''
@@ -306,13 +308,14 @@ function onTouchEnd() {
                 @touchcancel="onTouchEnd"
               >
                 <slot name="header">
-                  <h2 v-if="title" class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                  <h2 v-if="title" class="text-h5 text-gray-900 dark:text-gray-100">
                     {{ title }}
                   </h2>
                 </slot>
                 <button
+                  v-if="!hideClose"
                   type="button"
-                  class="ml-auto rounded-md p-1 transition hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                  class="ml-auto rounded-sm p-1 transition hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200"
                   @click="closeIfAllowed"
                 >
                   <a-icon-x-mark class="size-4" />

package/components/overlays/side-panel/ASidePanel.vue

@@ -128,10 +128,10 @@ watch(() => [modelValue.value, panel.value], (newP, oldP) => {
 
 const roundedClass = computed(() => {
   const classes = {
-    left: "rounded-r-xl",
-    right: "rounded-l-xl",
-    top: "rounded-b-xl",
-    bottom: "rounded-t-xl",
+    left: "rounded-r-lg",
+    right: "rounded-l-lg",
+    top: "rounded-b-lg",
+    bottom: "rounded-t-lg",
   }
 
   return classes[panelSide.value]
@@ -170,7 +170,7 @@ const modalHeight = ref(0)
 const touchstart = (event: TouchEvent) => {
   isClose.value = false
   positionStart.value = event.touches[0].clientY
-  modalHeight.value = panel.value?.offsetHeight || 0 // Запоминаем текущую высоту модалки
+  modalHeight.value = panel.value?.offsetHeight || 0
 }
 
 const touchmove = (event: TouchEvent) => {
@@ -179,7 +179,7 @@ const touchmove = (event: TouchEvent) => {
   const touchPosition = event.touches[0].clientY
   const step = touchPosition - positionStart.value
 
-  if (step < 0) return // предотвратить движение вверх
+  if (step < 0) return
 
   const newHeight = modalHeight.value - step
   panel.value.style.height = `${newHeight}px`

package/components/overlays/sideover/ASlideover.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import { twJoin, twMerge } from 'tailwind-merge'
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 import { onClickOutside, useWindowSize } from '@vueuse/core'
 import {disableBodyScroll, enableBodyScroll} from "body-scroll-lock";
 
@@ -37,10 +37,10 @@ const uiConfig = {
     bottom: 'bottom-0 left-0 w-full'
   },
   rounded: {
-    top: 'rounded-b-lg',
-    bottom: 'rounded-t-lg',
-    left: 'rounded-r-lg',
-    right: 'rounded-l-lg'
+    top: 'rounded-b-md',
+    bottom: 'rounded-t-md',
+    left: 'rounded-r-md',
+    right: 'rounded-l-md'
   },
   fullscreen: 'w-screen h-screen rounded-none',
   transition: {
@@ -219,7 +219,7 @@ const modalHeight = ref(0)
 const touchstart = (event: TouchEvent) => {
   isClose.value = false
   positionStart.value = event.touches[0].clientY
-  modalHeight.value = slideover.value?.offsetHeight || 0 // Запоминаем текущую высоту модалки
+  modalHeight.value = slideover.value?.offsetHeight || 0
 }
 
 const touchmove = (event: TouchEvent) => {

package/components/overlays/tooltip/ATooltip.vue

@@ -56,7 +56,7 @@ const baseClass = computed(() => {
   const color = props.errorParsing ? 'text-[#E74135] dark:text-[#F47E75]' : 'text-white dark:text-deepblue-900'
   const pad = props.size === 'sm' ? 'px-4 py-2' : 'px-4 py-4'
   const truncated = props.truncate ? 'truncate' : 'max-w-[530px] w-max'
-  return ['text-xs font-normal absolute', bg, color, 'rounded-md', pad, truncated].join(' ')
+  return ['text-body-sm font-normal absolute', bg, color, 'rounded-sm', pad, truncated].join(' ')
 })
 
 /* --- positioning logic --- */

package/components/overlays/tooltip/ATooltipV2.vue

@@ -9,27 +9,20 @@ import {
   useFloating,
 } from '@floating-ui/vue'
 import { onClickOutside, onKeyStroke } from '@vueuse/core'
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '#adata-ui/utils/twMerge'
 import { useTooltipTrigger } from './useTooltipTrigger'
 
 interface Props {
-  /** Preferred side; auto-flips when there isn't room. */
   placement?: TooltipPlacement
-  /** How the tooltip opens. `manual` is fully driven by `v-model:open`. */
   trigger?: TooltipTrigger
-  /** Show a pointer arrow aimed at the trigger. */
   arrow?: boolean
-  /** Gap between trigger and tooltip, in px. */
   offset?: number
   openDelay?: number
   closeDelay?: number
-  /** Render through `<Teleport to="body">` to escape overflow/stacking contexts. */
   teleport?: boolean
   disabled?: boolean
   zIndex?: number
-  /** Plain-text fallback used when the `content` slot is empty. */
   text?: string
-  /** Extra classes merged onto the tooltip box (e.g. width/padding overrides). */
   contentClass?: string
 }
 
@@ -80,7 +73,6 @@ const { x, y, strategy, middlewareData, placement: resolvedPlacement } = useFloa
 const side = computed(() => resolvedPlacement.value.split('-')[0])
 const opposite: Record<string, string> = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }
 
-// Grow the panel out of the edge nearest the trigger.
 const transformOrigin = computed(() => {
   const [main, align] = resolvedPlacement.value.split('-')
   const anchor = opposite[main] ?? 'center'
@@ -92,7 +84,6 @@ const transformOrigin = computed(() => {
   return `${h} ${anchor}`
 })
 
-// The two outer edges of the rotated square form the visible point.
 const arrowBorderClass = computed(() => {
   switch (side.value) {
     case 'top': return 'border-b border-r'
@@ -117,12 +108,11 @@ const interactive = computed(() => props.trigger !== 'hover')
 
 const boxClass = computed(() =>
   twMerge(
-    'rounded-lg bg-white px-2.5 py-1.5 shadow-lg ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-700',
+    'rounded-md bg-white px-2.5 py-1.5 shadow-lg ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-700',
     props.contentClass,
   ),
 )
 
-// Click mode dismisses on outside-click / Escape; hover leaves on its own; manual is parent-driven.
 onClickOutside(
   floating,
   () => {

package/components/transitions/ATransitionHeight.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ui from "#adata-ui/components/elements/accordion/AAccordionGroup/ui.config";
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '#adata-ui/utils/twMerge'
 
 const props = defineProps<{
   transition?: {