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

package/components/overlays/tooltip/ATooltip.vue

@@ -1,237 +1,237 @@
-<script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onBeforeUnmount, watch } from 'vue'
-
-interface Props {
-  text?: string
-  header?: string
-  openDelay?: number
-  closeDelay?: number
-  prevent?: boolean
-  placement?: 'top' | 'bottom' | 'left' | 'right'
-  popper?: boolean
-  popperPosition?: 'start' | 'center' | 'end'
-  size?: 'sm' | 'md'
-  zIndex?: number
-  truncate?: boolean
-  errorParsing?: boolean
-  parent?: HTMLElement
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  text: '',
-  header: '',
-  openDelay: 0,
-  closeDelay: 0,
-  prevent: false,
-  placement: 'top',
-  popper: true,
-  popperPosition: 'start',
-  size: 'md',
-  truncate: true,
-  errorParsing: false
-})
-
-/* --- refs --- */
-const wrapper = ref<HTMLElement | null>(null) // root wrapper
-const body = ref<HTMLElement | null>(null)    // tooltip element
-const open = ref(false)
-let openTimeout: ReturnType<typeof setTimeout> | null = null
-let closeTimeout: ReturnType<typeof setTimeout> | null = null
-
-// inline styles for tooltip positioning
-const tooltipStyle = ref<Record<string, string>>({
-  left: '0px',
-  top: '0px',
-  transform: 'translateX(0) translateY(0)'
-})
-
-// visual placement (may be flipped if not enough space)
-const visualPlacement = ref(props.placement)
-const popperPosition = ref(props.popperPosition)
-
-/* --- helpers: compute classes (you can keep your uiConfig) --- */
-const baseClass = computed(() => {
-  // keep your Tailwind classes if you like, but we position via inline styles
-  const bg = props.errorParsing ? 'bg-[#FAD9D7] dark:bg-[#4F393A]' : 'bg-deepblue-900 dark:bg-gray-50'
-  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(' ')
-})
-
-/* --- positioning logic --- */
-function updatePosition(targetEl: HTMLElement | null) {
-  if (!targetEl || !body.value) return
-
-  const targetRect = targetEl.getBoundingClientRect()
-  const tooltipRect = body.value.getBoundingClientRect()
-  const vw = window.innerWidth
-  const vh = window.innerHeight
-
-  // default placement = requested prop
-  let place: Props['placement'] = props.placement
-
-  // decide flip if not enough space
-  if (place === 'top' && targetRect.top < tooltipRect.height + 8 && (vh - targetRect.bottom) >= tooltipRect.height + 8) {
-    place = 'bottom'
-  } else if (place === 'bottom' && (vh - targetRect.bottom) < tooltipRect.height + 8 && targetRect.top >= tooltipRect.height + 8) {
-    place = 'top'
-  } else if (place === 'left' && targetRect.left < tooltipRect.width + 8 && (vw - targetRect.right) >= tooltipRect.width + 8) {
-    place = 'right'
-  } else if (place === 'right' && (vw - targetRect.right) < tooltipRect.width + 8 && targetRect.left >= tooltipRect.width + 8) {
-    place = 'left'
-  }
-
-  visualPlacement.value = place
-
-  // compute left/top depending on placement and prefer 'start' unless end/center chosen by popperPosition
-  let left = 0
-  let top = 0
-
-  if (place === 'top' || place === 'bottom') {
-    // horizontal alignment depends on popperPosition
-    if (popperPosition.value === 'center') {
-      left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2
-    } else if (popperPosition.value === 'end') {
-      left = targetRect.right - tooltipRect.width
-    } else {
-      // start
-      left = targetRect.left
-    }
-
-    // vertical
-    if (place === 'top') {
-      top = targetRect.top - tooltipRect.height - 8
-    } else {
-      top = targetRect.bottom + 8
-    }
-  } else {
-    // left or right: vertical alignment
-    if (popperPosition.value === 'center') {
-      top = targetRect.top + targetRect.height / 2 - tooltipRect.height / 2
-    } else if (popperPosition.value === 'end') {
-      top = targetRect.bottom - tooltipRect.height
-    } else {
-      top = targetRect.top
-    }
-
-    if (place === 'left') {
-      left = targetRect.left - tooltipRect.width - 8
-    } else {
-      left = targetRect.right + 8
-    }
-  }
-
-  // keep tooltip inside the viewport (small clamp)
-  const minGap = 6
-  if (left < minGap) left = minGap
-  if (left + tooltipRect.width > vw - minGap) left = vw - tooltipRect.width - minGap
-  if (top < minGap) top = minGap
-  if (top + tooltipRect.height > vh - minGap) top = vh - tooltipRect.height - minGap
-
-  tooltipStyle.value.left = `${Math.round(left)}px`
-  tooltipStyle.value.top = `${Math.round(top)}px`
-  tooltipStyle.value.transform = 'none'
-}
-
-/* --- events --- */
-function handleMouseEnter(e: MouseEvent) {
-  // clear close timeout
-  if (closeTimeout) {
-    clearTimeout(closeTimeout)
-    closeTimeout = null
-  }
-
-  const targetEl = (e.currentTarget ?? e.target) as HTMLElement
-
-  // schedule open
-  openTimeout = openTimeout || setTimeout(async () => {
-    open.value = true
-    await nextTick()
-    // measure and position after tooltip is rendered
-    updatePosition(targetEl)
-    openTimeout = null
-  }, props.openDelay)
-}
-
-function handleMouseLeave(e?: MouseEvent) {
-  if (openTimeout) {
-    clearTimeout(openTimeout)
-    openTimeout = null
-  }
-  if (!open.value) return
-
-  closeTimeout = closeTimeout || setTimeout(() => {
-    open.value = false
-    closeTimeout = null
-  }, props.closeDelay)
-}
-
-// if tooltip is open and user scrolls/resizes, recalc
-function onWindowChange() {
-  // try to recalc against the wrapper's slot element if present
-  // we assume wrapper contains the hovered child
-  const hovered = wrapper.value?.querySelector(':hover') as HTMLElement | null
-  const target = hovered ?? wrapper.value
-  updatePosition(target)
-}
-
-onMounted(() => {
-  window.addEventListener('resize', onWindowChange)
-  window.addEventListener('scroll', onWindowChange, true)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', onWindowChange)
-  window.removeEventListener('scroll', onWindowChange, true)
-})
-
-</script>
-
-<template>
-  <div
-    ref="wrapper"
-    v-bind="$attrs"
-    class="relative"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-  >
-    <slot :open="open">
-      Hover
-    </slot>
-
-    <!-- tooltip rendered absolutely on body of component, positioned by inline styles -->
-    <transition name="fade" appear>
-      <div
-        v-if="open && !props.prevent"
-        class="pointer-events-none"
-        :style="{ position: 'fixed', left: tooltipStyle.left, top: tooltipStyle.top, zIndex: props.zIndex ?? 9999 }"
-      >
-        <div ref="body" :class="baseClass">
-          <div v-if="$slots.header || props.header" class="font-semibold mb-1">
-            <slot name="header">
-              <p>{{ props.header }}</p>
-            </slot>
-          </div>
-
-          <slot name="content">
-            {{ props.text }}
-          </slot>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped>
-/* simple fade (you can adapt to your transition) */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .18s ease;
-}
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-.fade-enter-to, .fade-leave-from {
-  opacity: 1;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed, nextTick, onMounted, onBeforeUnmount, watch } from 'vue'
+
+interface Props {
+  text?: string
+  header?: string
+  openDelay?: number
+  closeDelay?: number
+  prevent?: boolean
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+  popper?: boolean
+  popperPosition?: 'start' | 'center' | 'end'
+  size?: 'sm' | 'md'
+  zIndex?: number
+  truncate?: boolean
+  errorParsing?: boolean
+  parent?: HTMLElement
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: '',
+  header: '',
+  openDelay: 0,
+  closeDelay: 0,
+  prevent: false,
+  placement: 'top',
+  popper: true,
+  popperPosition: 'start',
+  size: 'md',
+  truncate: true,
+  errorParsing: false
+})
+
+/* --- refs --- */
+const wrapper = ref<HTMLElement | null>(null) // root wrapper
+const body = ref<HTMLElement | null>(null)    // tooltip element
+const open = ref(false)
+let openTimeout: ReturnType<typeof setTimeout> | null = null
+let closeTimeout: ReturnType<typeof setTimeout> | null = null
+
+// inline styles for tooltip positioning
+const tooltipStyle = ref<Record<string, string>>({
+  left: '0px',
+  top: '0px',
+  transform: 'translateX(0) translateY(0)'
+})
+
+// visual placement (may be flipped if not enough space)
+const visualPlacement = ref(props.placement)
+const popperPosition = ref(props.popperPosition)
+
+/* --- helpers: compute classes (you can keep your uiConfig) --- */
+const baseClass = computed(() => {
+  // keep your Tailwind classes if you like, but we position via inline styles
+  const bg = props.errorParsing ? 'bg-[#FAD9D7] dark:bg-[#4F393A]' : 'bg-deepblue-900 dark:bg-gray-50'
+  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-body-sm font-normal absolute', bg, color, 'rounded-sm', pad, truncated].join(' ')
+})
+
+/* --- positioning logic --- */
+function updatePosition(targetEl: HTMLElement | null) {
+  if (!targetEl || !body.value) return
+
+  const targetRect = targetEl.getBoundingClientRect()
+  const tooltipRect = body.value.getBoundingClientRect()
+  const vw = window.innerWidth
+  const vh = window.innerHeight
+
+  // default placement = requested prop
+  let place: Props['placement'] = props.placement
+
+  // decide flip if not enough space
+  if (place === 'top' && targetRect.top < tooltipRect.height + 8 && (vh - targetRect.bottom) >= tooltipRect.height + 8) {
+    place = 'bottom'
+  } else if (place === 'bottom' && (vh - targetRect.bottom) < tooltipRect.height + 8 && targetRect.top >= tooltipRect.height + 8) {
+    place = 'top'
+  } else if (place === 'left' && targetRect.left < tooltipRect.width + 8 && (vw - targetRect.right) >= tooltipRect.width + 8) {
+    place = 'right'
+  } else if (place === 'right' && (vw - targetRect.right) < tooltipRect.width + 8 && targetRect.left >= tooltipRect.width + 8) {
+    place = 'left'
+  }
+
+  visualPlacement.value = place
+
+  // compute left/top depending on placement and prefer 'start' unless end/center chosen by popperPosition
+  let left = 0
+  let top = 0
+
+  if (place === 'top' || place === 'bottom') {
+    // horizontal alignment depends on popperPosition
+    if (popperPosition.value === 'center') {
+      left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2
+    } else if (popperPosition.value === 'end') {
+      left = targetRect.right - tooltipRect.width
+    } else {
+      // start
+      left = targetRect.left
+    }
+
+    // vertical
+    if (place === 'top') {
+      top = targetRect.top - tooltipRect.height - 8
+    } else {
+      top = targetRect.bottom + 8
+    }
+  } else {
+    // left or right: vertical alignment
+    if (popperPosition.value === 'center') {
+      top = targetRect.top + targetRect.height / 2 - tooltipRect.height / 2
+    } else if (popperPosition.value === 'end') {
+      top = targetRect.bottom - tooltipRect.height
+    } else {
+      top = targetRect.top
+    }
+
+    if (place === 'left') {
+      left = targetRect.left - tooltipRect.width - 8
+    } else {
+      left = targetRect.right + 8
+    }
+  }
+
+  // keep tooltip inside the viewport (small clamp)
+  const minGap = 6
+  if (left < minGap) left = minGap
+  if (left + tooltipRect.width > vw - minGap) left = vw - tooltipRect.width - minGap
+  if (top < minGap) top = minGap
+  if (top + tooltipRect.height > vh - minGap) top = vh - tooltipRect.height - minGap
+
+  tooltipStyle.value.left = `${Math.round(left)}px`
+  tooltipStyle.value.top = `${Math.round(top)}px`
+  tooltipStyle.value.transform = 'none'
+}
+
+/* --- events --- */
+function handleMouseEnter(e: MouseEvent) {
+  // clear close timeout
+  if (closeTimeout) {
+    clearTimeout(closeTimeout)
+    closeTimeout = null
+  }
+
+  const targetEl = (e.currentTarget ?? e.target) as HTMLElement
+
+  // schedule open
+  openTimeout = openTimeout || setTimeout(async () => {
+    open.value = true
+    await nextTick()
+    // measure and position after tooltip is rendered
+    updatePosition(targetEl)
+    openTimeout = null
+  }, props.openDelay)
+}
+
+function handleMouseLeave(e?: MouseEvent) {
+  if (openTimeout) {
+    clearTimeout(openTimeout)
+    openTimeout = null
+  }
+  if (!open.value) return
+
+  closeTimeout = closeTimeout || setTimeout(() => {
+    open.value = false
+    closeTimeout = null
+  }, props.closeDelay)
+}
+
+// if tooltip is open and user scrolls/resizes, recalc
+function onWindowChange() {
+  // try to recalc against the wrapper's slot element if present
+  // we assume wrapper contains the hovered child
+  const hovered = wrapper.value?.querySelector(':hover') as HTMLElement | null
+  const target = hovered ?? wrapper.value
+  updatePosition(target)
+}
+
+onMounted(() => {
+  window.addEventListener('resize', onWindowChange)
+  window.addEventListener('scroll', onWindowChange, true)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onWindowChange)
+  window.removeEventListener('scroll', onWindowChange, true)
+})
+
+</script>
+
+<template>
+  <div
+    ref="wrapper"
+    v-bind="$attrs"
+    class="relative"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <slot :open="open">
+      Hover
+    </slot>
+
+    <!-- tooltip rendered absolutely on body of component, positioned by inline styles -->
+    <transition name="fade" appear>
+      <div
+        v-if="open && !props.prevent"
+        class="pointer-events-none"
+        :style="{ position: 'fixed', left: tooltipStyle.left, top: tooltipStyle.top, zIndex: props.zIndex ?? 9999 }"
+      >
+        <div ref="body" :class="baseClass">
+          <div v-if="$slots.header || props.header" class="font-semibold mb-1">
+            <slot name="header">
+              <p>{{ props.header }}</p>
+            </slot>
+          </div>
+
+          <slot name="content">
+            {{ props.text }}
+          </slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+/* simple fade (you can adapt to your transition) */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .18s ease;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to, .fade-leave-from {
+  opacity: 1;
+}
+</style>