adata-ui 2.1.41-beta.7 → 2.1.41-beta.9

package/components/overlays/tooltip/ATooltipV2.vue

@@ -1,226 +1,226 @@
-<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
-  dataTestId?: 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: '',
-  dataTestId: undefined,
-})
-
-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-main px-2.5 py-1.5 shadow-lg ring-1 ring-(--border-color-default)',
-    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"
-        :data-test-id="dataTestId"
-        :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-default bg-main"
-          :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>
+<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
+  dataTestId?: 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: '',
+  dataTestId: undefined,
+})
+
+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-main px-2.5 py-1.5 shadow-lg ring-1 ring-(--border-color-default)',
+    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"
+        :data-test-id="dataTestId"
+        :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-default bg-main"
+          :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 +1,26 @@
-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'
+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'