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

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-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>
+<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>

package/components/transitions/ATransitionHeight.vue

@@ -1,67 +1,67 @@
-<script setup lang="ts">
-import ui from "#adata-ui/components/elements/accordion/AAccordionGroup/ui.config";
-import { twMerge } from '#adata-ui/utils/twMerge'
-
-const props = defineProps<{
-  transition?: {
-    enterActiveClass?: string
-    leaveActiveClass?: string
-  }
-}>()
-
-const mergedUi = computed(() => ({
-  transition: {
-    enterActiveClass: twMerge(
-      ui.transition.enterActiveClass,
-      props.transition?.enterActiveClass
-    ),
-    leaveActiveClass: twMerge(
-      ui.transition.leaveActiveClass,
-      props.transition?.leaveActiveClass
-    )
-  }
-}))
-
-function onEnter(_el: Element, done: () => void) {
-  const el = _el as HTMLElement
-  el.style.height = '0'
-  el.offsetHeight // Trigger a reflow, flushing the CSS changes
-  el.style.height = el.scrollHeight + 'px'
-
-  el.addEventListener('transitionend', done, {once: true})
-}
-
-function onBeforeLeave(_el: Element) {
-  const el = _el as HTMLElement
-  el.style.height = el.scrollHeight + 'px'
-  el.offsetHeight // Trigger a reflow, flushing the CSS changes
-}
-
-function onAfterEnter(_el: Element) {
-  const el = _el as HTMLElement
-  el.style.height = 'auto'
-}
-
-function onLeave(_el: Element, done: () => void) {
-  const el = _el as HTMLElement
-  el.style.height = '0'
-
-  el.addEventListener('transitionend', done, {once: true})
-}
-</script>
-
-<template>
-  <Transition
-    v-bind="mergedUi.transition"
-    @enter="onEnter"
-    @after-enter="onAfterEnter"
-    @before-leave="onBeforeLeave"
-    @leave="onLeave"
-  >
-    <slot/>
-  </Transition>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import ui from "#adata-ui/components/elements/accordion/AAccordionGroup/ui.config";
+import { twMerge } from 'tailwind-merge'
+
+const props = defineProps<{
+  transition?: {
+    enterActiveClass?: string
+    leaveActiveClass?: string
+  }
+}>()
+
+const mergedUi = computed(() => ({
+  transition: {
+    enterActiveClass: twMerge(
+      ui.transition.enterActiveClass,
+      props.transition?.enterActiveClass
+    ),
+    leaveActiveClass: twMerge(
+      ui.transition.leaveActiveClass,
+      props.transition?.leaveActiveClass
+    )
+  }
+}))
+
+function onEnter(_el: Element, done: () => void) {
+  const el = _el as HTMLElement
+  el.style.height = '0'
+  el.offsetHeight // Trigger a reflow, flushing the CSS changes
+  el.style.height = el.scrollHeight + 'px'
+
+  el.addEventListener('transitionend', done, {once: true})
+}
+
+function onBeforeLeave(_el: Element) {
+  const el = _el as HTMLElement
+  el.style.height = el.scrollHeight + 'px'
+  el.offsetHeight // Trigger a reflow, flushing the CSS changes
+}
+
+function onAfterEnter(_el: Element) {
+  const el = _el as HTMLElement
+  el.style.height = 'auto'
+}
+
+function onLeave(_el: Element, done: () => void) {
+  const el = _el as HTMLElement
+  el.style.height = '0'
+
+  el.addEventListener('transitionend', done, {once: true})
+}
+</script>
+
+<template>
+  <Transition
+    v-bind="mergedUi.transition"
+    @enter="onEnter"
+    @after-enter="onAfterEnter"
+    @before-leave="onBeforeLeave"
+    @leave="onLeave"
+  >
+    <slot/>
+  </Transition>
+</template>
+
+<style scoped>
+
+</style>

package/components/utils/index.ts

@@ -1,19 +1,19 @@
-export function mergeConfig<T>(defaultUi: T, config: Partial<T>): T {
-  const mergedUi = {...defaultUi};
-
-  for (const key in config) {
-    if (Object.prototype.hasOwnProperty.call(config, key)) {
-      const defaultValue = defaultUi[key];
-      const configValue = config[key];
-      if (typeof defaultValue === 'object' && typeof configValue === 'object' && defaultValue !== null && configValue !== null) {
-        mergedUi[key] = mergeConfig(defaultValue, configValue);
-      } else if (typeof configValue === 'string') {
-        mergedUi[key] = `${defaultValue} ${configValue}`;
-      } else {
-        mergedUi[key] = configValue;
-      }
-    }
-  }
-
-  return mergedUi as T;
-}
+export function mergeConfig<T>(defaultUi: T, config: Partial<T>): T {
+  const mergedUi = {...defaultUi};
+
+  for (const key in config) {
+    if (Object.prototype.hasOwnProperty.call(config, key)) {
+      const defaultValue = defaultUi[key];
+      const configValue = config[key];
+      if (typeof defaultValue === 'object' && typeof configValue === 'object' && defaultValue !== null && configValue !== null) {
+        mergedUi[key] = mergeConfig(defaultValue, configValue);
+      } else if (typeof configValue === 'string') {
+        mergedUi[key] = `${defaultValue} ${configValue}`;
+      } else {
+        mergedUi[key] = configValue;
+      }
+    }
+  }
+
+  return mergedUi as T;
+}

package/components/utils/removeTrailingSlash.ts

@@ -1,7 +1,7 @@
-export function removeTrailingSlash(str: string): string {
-  if (str.endsWith('/')) {
-    return str.slice(0, -1)
-  }
-
-  return str
-}
+export function removeTrailingSlash(str: string): string {
+  if (str.endsWith('/')) {
+    return str.slice(0, -1)
+  }
+
+  return str
+}