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

package/components/overlays/modal/AModalV2.vue

@@ -1,397 +0,0 @@
-<script setup lang="ts">
-import { onKeyStroke, useScrollLock, useWindowSize } from '@vueuse/core'
-
-type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'container' | 'fullscreen'
-
-const props = withDefaults(defineProps<{
-  title?: string
-  size?: ModalSize
-  width?: string
-  closeOnOverlay?: boolean
-  closeOnEsc?: boolean
-  lockScroll?: boolean
-  persistent?: boolean
-  transition?: boolean
-  contentClass?: string
-  hideHeader?: boolean
-  hideClose?: boolean
-  blur?: boolean | 'sm' | 'md' | 'lg' | 'xl'
-  mobileSheet?: boolean
-  swipeToClose?: boolean
-  swipeThreshold?: number
-  showDragHandle?: boolean
-  dataTestId?: string
-  iconXMarkTestId?: string
-}>(), {
-  size: 'md',
-  closeOnOverlay: true,
-  closeOnEsc: true,
-  lockScroll: true,
-  persistent: false,
-  transition: true,
-  hideHeader: false,
-  hideClose: false,
-  blur: false,
-  mobileSheet: true,
-  swipeToClose: true,
-  swipeThreshold: 65,
-  showDragHandle: true,
-  dataTestId: undefined,
-  iconXMarkTestId: undefined,
-})
-
-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 { width: windowWidth } = useWindowSize()
-
-const isMobile = computed(() => windowWidth.value < 1025)
-const isSheet = computed(() => isMobile.value && props.mobileSheet)
-
-const sizeStyle = computed(() => {
-  if (isSheet.value) return { width: '100%' }
-  if (props.width) return { width: props.width }
-
-  switch (props.size) {
-    case 'sm': return { width: '380px' }
-    case 'md': return { width: '520px' }
-    case 'lg': return { width: '720px' }
-    case 'xl': return { width: '1100px' }
-    case 'container': return {}
-    case 'fullscreen': return { width: '100vw', height: '100vh' }
-    default: return { width: '520px' }
-  }
-})
-
-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 = ['modal-v2-overlay fixed inset-0 z-[10000] flex bg-black/40 dark:bg-black/60']
-
-  if (isSheet.value) {
-    base.push('items-end justify-stretch')
-  }
-  else {
-    base.push(props.size === 'container' ? 'items-center justify-center' : 'items-center justify-center p-4')
-  }
-
-  if (blurClass.value) base.push(blurClass.value)
-
-  return base.join(' ')
-})
-
-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-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-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'
-      : ''
-    base.push(`max-h-[calc(100vh-2rem)] border-gray-200 dark:border-gray-800 ${radius}${widthCls}`)
-  }
-
-  return base.join(' ')
-})
-
-const overlayTransitionName = computed(() => {
-  if (swipeClosing.value) return ''
-  return props.transition ? 'modal-v2-overlay' : ''
-})
-const contentTransitionName = computed(() => {
-  if (swipeClosing.value || !props.transition) return ''
-  return isSheet.value ? 'modal-v2-sheet' : 'modal-v2-content'
-})
-
-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 isSheet.value && 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="contentBaseClass"
-              :style="sizeStyle"
-              :data-test-id="dataTestId"
-              @mousedown.stop
-            >
-              <div
-                v-if="isSheet && 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"
-                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 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-sm p-1 transition hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                  :data-test-id="iconXMarkTestId"
-                  @click="closeIfAllowed"
-                >
-                  <a-icon-x-mark class="size-4" />
-                </button>
-              </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">
-.modal-v2-overlay-enter-active {
-  transition: opacity 200ms ease-out;
-}
-
-.modal-v2-overlay-leave-active {
-  transition: opacity 150ms ease-in;
-}
-
-.modal-v2-overlay-enter-from,
-.modal-v2-overlay-leave-to {
-  opacity: 0;
-}
-
-.modal-v2-content-enter-active {
-  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out;
-}
-
-.modal-v2-content-leave-active {
-  transition: transform 150ms ease-in, opacity 150ms ease-in;
-}
-
-.modal-v2-content-enter-from,
-.modal-v2-content-leave-to {
-  opacity: 0;
-  transform: translateY(8px) scale(0.98);
-}
-
-.modal-v2-sheet-enter-active,
-.modal-v2-sheet-leave-active {
-  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.modal-v2-sheet-enter-from,
-.modal-v2-sheet-leave-to {
-  transform: translateY(100%);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .modal-v2-overlay-enter-active,
-  .modal-v2-overlay-leave-active,
-  .modal-v2-content-enter-active,
-  .modal-v2-content-leave-active,
-  .modal-v2-sheet-enter-active,
-  .modal-v2-sheet-leave-active {
-    transition: none;
-  }
-}
-</style>

package/components/overlays/tooltip/ATooltipV2.vue

@@ -1,223 +0,0 @@
-<script setup lang="ts">
-import type { TooltipPlacement, TooltipTrigger } from './types'
-import {
-  arrow as arrowMiddleware,
-  autoUpdate,
-  flip,
-  offset as offsetMiddleware,
-  shift,
-  useFloating,
-} from '@floating-ui/vue'
-import { onClickOutside, onKeyStroke } from '@vueuse/core'
-import { twMerge } from '#adata-ui/utils/twMerge'
-import { useTooltipTrigger } from './useTooltipTrigger'
-
-interface Props {
-  placement?: TooltipPlacement
-  trigger?: TooltipTrigger
-  arrow?: boolean
-  offset?: number
-  openDelay?: number
-  closeDelay?: number
-  teleport?: boolean
-  disabled?: boolean
-  zIndex?: number
-  text?: string
-  contentClass?: string
-}
-
-defineOptions({ name: 'ATooltipV2', inheritAttrs: false })
-
-const props = withDefaults(defineProps<Props>(), {
-  placement: 'top',
-  trigger: 'hover',
-  arrow: false,
-  offset: 8,
-  openDelay: 0,
-  closeDelay: 0,
-  teleport: true,
-  disabled: false,
-  zIndex: 9999,
-  text: '',
-  contentClass: '',
-})
-
-const open = defineModel<boolean>('open', { default: false })
-
-const reference = ref<HTMLElement | null>(null)
-const floating = ref<HTMLElement | null>(null)
-const arrowRef = ref<HTMLElement | null>(null)
-
-const tooltipId = `a-tooltip-v2-${useId()}`
-
-const { listeners, close, clearTimers } = useTooltipTrigger({
-  open,
-  trigger: toRef(props, 'trigger'),
-  disabled: toRef(props, 'disabled'),
-  openDelay: toRef(props, 'openDelay'),
-  closeDelay: toRef(props, 'closeDelay'),
-})
-
-const { x, y, strategy, middlewareData, placement: resolvedPlacement } = useFloating(reference, floating, {
-  placement: computed(() => props.placement),
-  strategy: 'fixed',
-  whileElementsMounted: autoUpdate,
-  middleware: computed(() => [
-    offsetMiddleware(props.offset),
-    flip(),
-    shift({ padding: 8 }),
-    ...(props.arrow ? [arrowMiddleware({ element: arrowRef, padding: 6 })] : []),
-  ]),
-})
-
-const side = computed(() => resolvedPlacement.value.split('-')[0])
-const opposite: Record<string, string> = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }
-
-const transformOrigin = computed(() => {
-  const [main, align] = resolvedPlacement.value.split('-')
-  const anchor = opposite[main] ?? 'center'
-  if (main === 'left' || main === 'right') {
-    const v = align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center'
-    return `${anchor} ${v}`
-  }
-  const h = align === 'start' ? 'left' : align === 'end' ? 'right' : 'center'
-  return `${h} ${anchor}`
-})
-
-const arrowBorderClass = computed(() => {
-  switch (side.value) {
-    case 'top': return 'border-b border-r'
-    case 'bottom': return 'border-t border-l'
-    case 'left': return 'border-t border-r'
-    case 'right': return 'border-b border-l'
-    default: return ''
-  }
-})
-
-const arrowStyle = computed<Record<string, string>>(() => {
-  const data = middlewareData.value.arrow
-  const staticSide = opposite[side.value]
-  const style: Record<string, string> = {}
-  if (data?.x != null) style.left = `${data.x}px`
-  if (data?.y != null) style.top = `${data.y}px`
-  if (staticSide) style[staticSide] = '-4px'
-  return style
-})
-
-const interactive = computed(() => props.trigger !== 'hover')
-
-const boxClass = computed(() =>
-  twMerge(
-    '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,
-  ),
-)
-
-onClickOutside(
-  floating,
-  () => {
-    if (open.value && props.trigger === 'click') close()
-  },
-  { ignore: [reference] },
-)
-
-onKeyStroke('Escape', () => {
-  if (open.value && props.trigger === 'click') close()
-})
-
-onUnmounted(() => clearTimers())
-</script>
-
-<template>
-  <span
-    ref="reference"
-    v-bind="$attrs"
-    class="inline-flex"
-    :aria-describedby="open ? tooltipId : undefined"
-    v-on="listeners"
-  >
-    <slot :open="open" />
-  </span>
-
-  <teleport
-    to="body"
-    :disabled="!teleport"
-  >
-    <transition
-      enter-active-class="a-tooltip-v2__enter-active"
-      enter-from-class="a-tooltip-v2__enter-from"
-      enter-to-class="a-tooltip-v2__enter-to"
-      leave-active-class="a-tooltip-v2__leave-active"
-      leave-from-class="a-tooltip-v2__leave-from"
-      leave-to-class="a-tooltip-v2__leave-to"
-    >
-      <div
-        v-if="open && !disabled"
-        :id="tooltipId"
-        ref="floating"
-        role="tooltip"
-        :class="[boxClass, interactive ? 'pointer-events-auto' : 'pointer-events-none']"
-        :style="{
-          position: strategy,
-          left: x != null ? `${x}px` : '0',
-          top: y != null ? `${y}px` : '0',
-          zIndex,
-          transformOrigin,
-        }"
-      >
-        <slot
-          name="content"
-          :close="close"
-        >
-          {{ text }}
-        </slot>
-
-        <span
-          v-if="arrow"
-          ref="arrowRef"
-          class="absolute size-2 rotate-45 border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
-          :class="arrowBorderClass"
-          :style="arrowStyle"
-        />
-      </div>
-    </transition>
-  </teleport>
-</template>
-
-<style scoped>
-.a-tooltip-v2__enter-active {
-  transition:
-    opacity 160ms ease,
-    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.a-tooltip-v2__leave-active {
-  transition:
-    opacity 120ms ease,
-    transform 140ms cubic-bezier(0.4, 0, 1, 1);
-}
-
-.a-tooltip-v2__enter-from,
-.a-tooltip-v2__leave-to {
-  opacity: 0;
-  transform: translateY(-4px) scale(0.96);
-}
-
-.a-tooltip-v2__enter-to,
-.a-tooltip-v2__leave-from {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .a-tooltip-v2__enter-active,
-  .a-tooltip-v2__leave-active {
-    transition: opacity 120ms ease;
-  }
-
-  .a-tooltip-v2__enter-from,
-  .a-tooltip-v2__leave-to {
-    transform: none;
-  }
-}
-</style>

package/components/overlays/tooltip/types.ts

@@ -1,26 +0,0 @@
-import type { Placement } from '@floating-ui/vue'
-
-export type { Placement }
-
-/**
- * Placement options spelled out as literals (mirrors Floating UI's `Placement`).
- * Importing the package's `Placement` alias directly makes Vue's runtime prop
- * inference fall back to `Object` and warn; a locally-resolvable union infers
- * `String` correctly.
- */
-export type TooltipPlacement
-  = | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-
-/** How the tooltip is opened. `manual` is fully driven by `v-model:open`. */
-export type TooltipTrigger = 'hover' | 'click' | 'manual'