adata-ui 2.0.80 → 2.0.82

package/components/elements/select/ASelect.vue

@@ -439,7 +439,7 @@ onUnmounted(() => cleanup?.())
   }
   button {
     user-select: text !important;
-    cursor: text;
+    cursor: pointer;
   }
 }
 </style>

package/components/features/payment/process/PaymentTopUpSidePanel.vue

@@ -15,8 +15,8 @@ const errorAlert = ref(false)
 const sumArr = ref([
   {
     id: 1,
-    value: 1000,
-    label: '1 000 ₸',
+    value: 2000,
+    label: '2 000 ₸',
   },
   {
     id: 2,

package/components/overlays/tooltip/ATooltip.vue

@@ -1,74 +1,5 @@
 <script setup lang="ts">
-
-import {twJoin, twMerge} from "tailwind-merge"
-
-const uiConfig = {
-  wrapper: 'relative',
-  container: {
-    base: 'group absolute',
-    zIndex: 'z-[999]',
-    placement: {
-      top: '-top-1 left-1/2',
-      bottom: '-bottom-1 left-1/2',
-      left: '-left-1 top-1/2',
-      right: '-right-1 top-1/2'
-    }
-  },
-  width: 'max-w-xs',
-  background: 'bg-deepblue-900 dark:bg-gray-50',
-  backgroundError: 'bg-[#FAD9D7] dark:bg-[#4F393A]',
-  color: 'text-white dark:text-deepblue-900',
-  colorError: 'text-[#E74135] dark:text-[#F47E75]',
-  rounded: 'rounded-md',
-  base: 'text-xs font-normal absolute',
-  padding: {
-    sm: 'px-4 py-2',
-    md: 'px-4 py-4'
-  },
-  placement: {
-    top: {
-      start: 'bottom-[1px] left-[-13px]',
-      center: 'bottom-[1px] left-1/2 transform translate-x-[-50%]',
-      end: 'bottom-[1px] right-[-13px]'
-    },
-    bottom: {
-      start: 'top-[1px] left-[-13px]',
-      center: 'top-[1px] left-1/2 transform translate-x-[-50%]',
-      end: 'top-[1px] right-[-13px]'
-    },
-    left: {
-      start: 'right-[1px] top-[-13px]',
-      center: 'right-[1px] top-1/2 transform translate-y-[-50%]',
-      end: 'right-[1px] bottom-[-13px]'
-    },
-    right: {
-      start: 'left-[1px] top-[-13px]',
-      center: 'left-[1px] top-1/2 transform translate-y-[-50%]',
-      end: 'left-[1px] bottom-[-13px]'
-    }
-  },
-  transition: {
-    enterActiveClass: 'transition ease-out duration-200',
-    enterFromClass: 'opacity-0 translate-y-1',
-    enterToClass: 'opacity-100 translate-y-0',
-    leaveActiveClass: 'transition ease-in duration-150',
-    leaveFromClass: 'opacity-100 translate-y-0',
-    leaveToClass: 'opacity-0 translate-y-1'
-  },
-  popper: {
-    strategy: 'absolute',
-    base: 'invisible before:visible before:block before:absolute before:rotate-45 before:z-19 before:w-3 before:h-3',
-    rounded: 'before:rounded-sm',
-    background: 'before:bg-deepblue-900 dark:before:bg-gray-50',
-    backgroundError: 'before:bg-[#FAD9D7] dark:before:dark:bg-[#4F393A]',
-    placement: {
-      top: 'bottom-0 before:bottom-[-2px] before:left-[-6px]',
-      bottom: 'top-0 before:top-[-2px] before:left-[-6px]',
-      left: 'right-0 before:right-[-2px] before:top-[-6px]',
-      right: 'left-0 before:left-[-2px] before:top-[-6px]'
-    }
-  },
-}
+import { ref, computed, nextTick, onMounted, onBeforeUnmount, watch } from 'vue'
 
 interface Props {
   text?: string
@@ -100,143 +31,207 @@ const props = withDefaults(defineProps<Props>(), {
   errorParsing: false
 })
 
-const slots = useSlots()
-const body = ref<HTMLElement | null>(null)
-
+/* --- refs --- */
+const wrapper = ref<HTMLElement | null>(null) // root wrapper
+const body = ref<HTMLElement | null>(null)    // tooltip element
 const open = ref(false)
-let openTimeout: NodeJS.Timeout | null = null
-let closeTimeout: NodeJS.Timeout | null = null
+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)
 
-const wrapperClasses = uiConfig.wrapper
-const containerClasses = computed(() => twMerge(twJoin(
-  uiConfig.container.base,
-  uiConfig.container.placement[props.placement],
-  uiConfig.width,
-  props.zIndex ? '' : uiConfig.container.zIndex
-)))
-const poperClasses = computed(() => twMerge(twJoin(
-  uiConfig.popper.strategy,
-  uiConfig.popper.base,
-  uiConfig.popper.rounded,
-  props.errorParsing ? uiConfig.popper.backgroundError : uiConfig.popper.background,
-  uiConfig.popper.placement[props.placement]
-)))
-const baseClasses = computed(() => twMerge(twJoin(
-  uiConfig.base,
-  props.errorParsing ? uiConfig.backgroundError : uiConfig.background,
-  props.errorParsing ? uiConfig.colorError : uiConfig.color,
-  uiConfig.rounded,
-  uiConfig.placement[props.placement][popperPosition.value],
-  uiConfig.padding[props.size],
-  props.truncate ? 'truncate' : 'max-w-[530px] w-max'
-)))
-const transitionClasses = uiConfig.transition
-
-const containerStyles = computed(() => {
-  return {
-    zIndex: props.zIndex
-  }
+/* --- 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'
+  }
 
-const hasSlot = (name: string): boolean => {
-  return Boolean(slots[name])
-}
+  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
+    }
 
-const hasHeader = computed(() => hasSlot('header') || Boolean(props.header))
+    // 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
+    }
 
-function onMouseEnter(e) {
-  if (props.parent) {
-    const parent = props.parent.getBoundingClientRect()
-    const target = e.target
+    if (place === 'left') {
+      left = targetRect.left - tooltipRect.width - 8
+    } else {
+      left = targetRect.right + 8
+    }
+  }
 
-    setTimeout(() => {
-      if (body.value) {
-        let left = parent.width - (target.offsetLeft + (target.clientWidth / 2) + body.value.offsetWidth)
+  // 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
 
-        if (left < 0) {
-          popperPosition.value = 'end'
-        }
-      }
-    })
-  }
+  tooltipStyle.value.left = `${Math.round(left)}px`
+  tooltipStyle.value.top = `${Math.round(top)}px`
+  tooltipStyle.value.transform = 'none'
 }
 
-const onMouseOver = (e) => {
+/* --- events --- */
+function handleMouseEnter(e: MouseEvent) {
+  // clear close timeout
   if (closeTimeout) {
     clearTimeout(closeTimeout)
     closeTimeout = null
   }
-  if (open.value) {
-    return
-  }
 
-  openTimeout = openTimeout || setTimeout(() => {
+  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)
 }
 
-const onMouseLeave = () => {
+function handleMouseLeave(e?: MouseEvent) {
   if (openTimeout) {
     clearTimeout(openTimeout)
     openTimeout = null
   }
-  if (!open.value) {
-    return
-  }
+  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="wrapperClasses"
-    @mouseover="onMouseOver"
-    @mouseleave="onMouseLeave"
-    @mouseenter="onMouseEnter"
+    class="relative"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
     <slot :open="open">
       Hover
     </slot>
-    <Transition
-      appear
-      v-bind="transitionClasses"
-    >
+
+    <!-- tooltip rendered absolutely on body of component, positioned by inline styles -->
+    <transition name="fade" appear>
       <div
-        v-if="open && !prevent"
-        :class="containerClasses"
-        :style="containerStyles"
+        v-if="open && !props.prevent"
+        class="pointer-events-none"
+        :style="{ position: 'fixed', left: tooltipStyle.left, top: tooltipStyle.top, zIndex: props.zIndex ?? 9999 }"
       >
-        <div
-          v-if="popper"
-          :class="poperClasses"
-        />
-        <div :class="baseClasses" ref="body">
-          <div
-            v-if="hasHeader"
-            class="font-semibold mb-1"
-          >
+        <div ref="body" :class="baseClass">
+          <div v-if="$slots.header || props.header" class="font-semibold mb-1">
             <slot name="header">
-              <p>{{ header }}</p>
+              <p>{{ props.header }}</p>
             </slot>
           </div>
 
           <slot name="content">
-            {{ text }}
+            {{ props.text }}
           </slot>
         </div>
       </div>
-    </Transition>
+    </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>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.0.80",
+  "version": "2.0.82",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",