adata-ui 2.1.40-beta.16 → 2.1.40-beta.18

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

@@ -1,154 +0,0 @@
-<script lang="ts" setup>
-type CountColor = 'gray' | 'blue' | 'yellow' | 'red' | 'green' | 'neutral'
-
-export interface PillTab {
-  key: string
-  name: string
-  count?: number | string
-  countColor?: CountColor
-  disabled?: boolean
-  hideCount?: boolean
-}
-
-const props = withDefaults(defineProps<{
-  modelValue: string
-  options: PillTab[]
-  showCount?: boolean
-  defaultCountColor?: CountColor
-  ariaLabel?: string
-  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-body-sm',
-  md: 'text-body-md',
-}
-
-const COUNT_COLOR_CLASS: Record<CountColor, string> = {
-  gray: 'bg-gray-200/70 text-gray-600 dark:bg-white/[0.08] dark:text-gray-300',
-  blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
-  yellow: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
-  red: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
-  green: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
-  neutral: 'bg-gray-100 text-gray-500 dark:bg-white/[0.06] dark:text-gray-400',
-}
-
-const { t, te } = useI18n()
-
-function hasCount(option: PillTab) {
-  if (typeof option.count === 'string') {
-    return !!Number(String(option.count).replace(/\s/g, ''))
-  }
-  return !!option.count
-}
-
-function formatCount(option: PillTab) {
-  if (typeof option.count === 'number') {
-    return option.count.toLocaleString('ru-RU')
-  }
-  return option.count
-}
-
-function resolveCountColor(option: PillTab): CountColor {
-  if (!hasCount(option)) return 'gray'
-  return option.countColor ?? props.defaultCountColor ?? 'gray'
-}
-
-function localize(label: string) {
-  return te(label) ? t(label) : label
-}
-
-function isDisabled(option: PillTab) {
-  return props.disabled || option.disabled === true
-}
-
-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-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' : '',
-    ]"
-    :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"
-    >
-      <button
-        v-for="option in options"
-        :key="option.key"
-        type="button"
-        role="tab"
-        :aria-selected="modelValue === option.key"
-        :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-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
-              ? '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',
-        ]"
-        @click="select(option)"
-      >
-        <slot name="option" :option="option">
-          <span>{{ localize(option.name) }}</span>
-
-          <span
-            v-if="showCount && !option.hideCount"
-            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[resolveCountColor(option)]"
-          >
-            {{ formatCount(option) }}
-          </span>
-        </slot>
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.pill-tabs-v2__list {
-  scrollbar-width: none;
-}
-.pill-tabs-v2__list::-webkit-scrollbar {
-  display: none;
-}
-</style>

package/components/overlays/drawer/ADrawerV2.vue

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