@datametria/vue-components 1.2.0 → 2.0.1

package/src/components/DatametriaTooltip.vue

@@ -1,409 +1,409 @@
-<template>
-  <div 
-    ref="triggerRef"
-    class="dm-tooltip-trigger"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-    @focus="handleFocus"
-    @blur="handleBlur"
-    @click="handleClick"
-  >
-    <slot />
-    
-    <Teleport to="body">
-      <Transition
-        name="tooltip"
-        @enter="onEnter"
-        @leave="onLeave"
-      >
-        <div
-          v-if="isVisible"
-          ref="tooltipRef"
-          :id="tooltipId"
-          class="dm-tooltip"
-          :class="[
-            `dm-tooltip--${placement}`,
-            `dm-tooltip--${variant}`,
-            { 'dm-tooltip--arrow': showArrow }
-          ]"
-          :style="tooltipStyle"
-          role="tooltip"
-          :aria-hidden="!isVisible"
-        >
-          <div class="dm-tooltip__content">
-            <slot name="content">
-              {{ content }}
-            </slot>
-          </div>
-          <div v-if="showArrow" class="dm-tooltip__arrow"></div>
-        </div>
-      </Transition>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
-
-type Placement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
-type Variant = 'dark' | 'light' | 'primary' | 'error' | 'warning' | 'success'
-type Trigger = 'hover' | 'click' | 'focus' | 'manual'
-
-interface Props {
-  content?: string
-  placement?: Placement
-  variant?: Variant
-  trigger?: Trigger
-  disabled?: boolean
-  showArrow?: boolean
-  delay?: number
-  hideDelay?: number
-  offset?: number
-  maxWidth?: string
-}
-
-interface Emits {
-  (e: 'show'): void
-  (e: 'hide'): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placement: 'top',
-  variant: 'dark',
-  trigger: 'hover',
-  showArrow: true,
-  delay: 100,
-  hideDelay: 100,
-  offset: 8,
-  maxWidth: '200px'
-})
-
-const emit = defineEmits<Emits>()
-
-// Refs
-const triggerRef = ref<HTMLElement>()
-const tooltipRef = ref<HTMLElement>()
-const isVisible = ref(false)
-const showTimeout = ref<number>()
-const hideTimeout = ref<number>()
-
-// Computed
-const tooltipId = computed(() => `dm-tooltip-${Math.random().toString(36).substr(2, 9)}`)
-
-const tooltipStyle = ref<Record<string, string>>({})
-
-// Methods
-const calculatePosition = async () => {
-  if (!triggerRef.value || !tooltipRef.value) return
-
-  await nextTick()
-
-  const trigger = triggerRef.value.getBoundingClientRect()
-  const tooltip = tooltipRef.value.getBoundingClientRect()
-  const viewport = {
-    width: window.innerWidth,
-    height: window.innerHeight
-  }
-
-  let top = 0
-  let left = 0
-
-  // Calculate base position
-  switch (props.placement) {
-    case 'top':
-    case 'top-start':
-    case 'top-end':
-      top = trigger.top - tooltip.height - props.offset
-      break
-    case 'bottom':
-    case 'bottom-start':
-    case 'bottom-end':
-      top = trigger.bottom + props.offset
-      break
-    case 'left':
-      top = trigger.top + (trigger.height - tooltip.height) / 2
-      left = trigger.left - tooltip.width - props.offset
-      break
-    case 'right':
-      top = trigger.top + (trigger.height - tooltip.height) / 2
-      left = trigger.right + props.offset
-      break
-  }
-
-  // Calculate horizontal position for top/bottom placements
-  if (props.placement.startsWith('top') || props.placement.startsWith('bottom')) {
-    switch (props.placement) {
-      case 'top':
-      case 'bottom':
-        left = trigger.left + (trigger.width - tooltip.width) / 2
-        break
-      case 'top-start':
-      case 'bottom-start':
-        left = trigger.left
-        break
-      case 'top-end':
-      case 'bottom-end':
-        left = trigger.right - tooltip.width
-        break
-    }
-  }
-
-  // Viewport boundary checks
-  if (left < 0) {
-    left = 8
-  } else if (left + tooltip.width > viewport.width) {
-    left = viewport.width - tooltip.width - 8
-  }
-
-  if (top < 0) {
-    top = 8
-  } else if (top + tooltip.height > viewport.height) {
-    top = viewport.height - tooltip.height - 8
-  }
-
-  tooltipStyle.value = {
-    position: 'fixed',
-    top: `${top}px`,
-    left: `${left}px`,
-    maxWidth: props.maxWidth,
-    zIndex: '9999'
-  }
-}
-
-const show = () => {
-  if (props.disabled || isVisible.value) return
-
-  clearTimeout(hideTimeout.value)
-  
-  showTimeout.value = window.setTimeout(async () => {
-    isVisible.value = true
-    emit('show')
-    await calculatePosition()
-  }, props.delay)
-}
-
-const hide = () => {
-  clearTimeout(showTimeout.value)
-  
-  hideTimeout.value = window.setTimeout(() => {
-    isVisible.value = false
-    emit('hide')
-  }, props.hideDelay)
-}
-
-const handleMouseEnter = () => {
-  if (props.trigger === 'hover') {
-    show()
-  }
-}
-
-const handleMouseLeave = () => {
-  if (props.trigger === 'hover') {
-    hide()
-  }
-}
-
-const handleFocus = () => {
-  if (props.trigger === 'focus') {
-    show()
-  }
-}
-
-const handleBlur = () => {
-  if (props.trigger === 'focus') {
-    hide()
-  }
-}
-
-const handleClick = () => {
-  if (props.trigger === 'click') {
-    if (isVisible.value) {
-      hide()
-    } else {
-      show()
-    }
-  }
-}
-
-const onEnter = () => {
-  calculatePosition()
-}
-
-const onLeave = () => {
-  tooltipStyle.value = {}
-}
-
-// Handle window resize
-const handleResize = () => {
-  if (isVisible.value) {
-    calculatePosition()
-  }
-}
-
-// Handle scroll
-const handleScroll = () => {
-  if (isVisible.value) {
-    calculatePosition()
-  }
-}
-
-// Lifecycle
-onMounted(() => {
-  window.addEventListener('resize', handleResize)
-  window.addEventListener('scroll', handleScroll, true)
-})
-
-onUnmounted(() => {
-  clearTimeout(showTimeout.value)
-  clearTimeout(hideTimeout.value)
-  window.removeEventListener('resize', handleResize)
-  window.removeEventListener('scroll', handleScroll, true)
-})
-
-// Expose methods
-defineExpose({
-  show,
-  hide,
-  isVisible: computed(() => isVisible.value)
-})
-</script>
-
-<style scoped>
-.dm-tooltip-trigger {
-  @apply inline-block;
-}
-
-.dm-tooltip {
-  @apply absolute z-50 px-2 py-1 text-sm rounded shadow-lg pointer-events-none;
-  border-radius: var(--dm-radius);
-  font-size: var(--dm-text-sm);
-}
-
-/* Variants */
-.dm-tooltip--dark {
-  @apply bg-gray-900 text-white;
-  background-color: var(--dm-gray-900);
-  color: var(--dm-bg-primary, #ffffff);
-}
-
-.dm-tooltip--light {
-  @apply bg-white text-gray-900 border border-gray-200;
-  background-color: var(--dm-bg-primary, #ffffff);
-  color: var(--dm-text-primary);
-  border-color: var(--dm-gray-200, #e5e7eb);
-}
-
-.dm-tooltip--primary {
-  @apply text-white;
-  background: var(--gradient-primary);
-  color: var(--dm-bg-primary, #ffffff);
-}
-
-.dm-tooltip--error {
-  @apply text-white;
-  background-color: var(--dm-error);
-  color: var(--dm-bg-primary, #ffffff);
-}
-
-.dm-tooltip--warning {
-  @apply text-white;
-  background-color: var(--dm-warning);
-  color: var(--dm-bg-primary, #ffffff);
-}
-
-.dm-tooltip--success {
-  @apply text-white;
-  background-color: var(--dm-success);
-  color: var(--dm-bg-primary, #ffffff);
-}
-
-/* Dark mode adjustments */
-[data-theme="dark"] .dm-tooltip--dark {
-  background-color: var(--dm-gray-800, #1f2937);
-  color: var(--dm-text-primary);
-}
-
-[data-theme="dark"] .dm-tooltip--light {
-  background-color: var(--dm-bg-secondary);
-  color: var(--dm-text-primary);
-  border-color: var(--dm-gray-600, #4b5563);
-}
-
-.dm-tooltip__content {
-  @apply relative z-10;
-}
-
-/* Arrow styles */
-.dm-tooltip--arrow .dm-tooltip__arrow {
-  @apply absolute w-2 h-2 transform rotate-45;
-}
-
-.dm-tooltip--top .dm-tooltip__arrow {
-  @apply bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2;
-}
-
-.dm-tooltip--bottom .dm-tooltip__arrow {
-  @apply top-0 left-1/2 -translate-x-1/2 -translate-y-1/2;
-}
-
-.dm-tooltip--left .dm-tooltip__arrow {
-  @apply right-0 top-1/2 translate-x-1/2 -translate-y-1/2;
-}
-
-.dm-tooltip--right .dm-tooltip__arrow {
-  @apply left-0 top-1/2 -translate-x-1/2 -translate-y-1/2;
-}
-
-/* Arrow colors */
-.dm-tooltip--dark .dm-tooltip__arrow {
-  background-color: var(--dm-gray-900);
-}
-
-.dm-tooltip--light .dm-tooltip__arrow {
-  background-color: var(--dm-bg-primary, #ffffff);
-  border: 1px solid var(--dm-gray-200, #e5e7eb);
-}
-
-.dm-tooltip--primary .dm-tooltip__arrow {
-  background-color: var(--dm-primary);
-}
-
-.dm-tooltip--error .dm-tooltip__arrow {
-  background-color: var(--dm-error);
-}
-
-.dm-tooltip--warning .dm-tooltip__arrow {
-  background-color: var(--dm-warning);
-}
-
-.dm-tooltip--success .dm-tooltip__arrow {
-  background-color: var(--dm-success);
-}
-
-/* Transitions */
-.tooltip-enter-active,
-.tooltip-leave-active {
-  transition: opacity var(--transition-fast), transform var(--transition-fast);
-}
-
-.tooltip-enter-from,
-.tooltip-leave-to {
-  opacity: 0;
-  transform: scale(0.95);
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .tooltip-enter-active,
-  .tooltip-leave-active {
-    transition: none;
-  }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .dm-tooltip {
-    @apply border-2 border-current;
-  }
-}
+<template>
+  <div 
+    ref="triggerRef"
+    class="dm-tooltip-trigger"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @click="handleClick"
+  >
+    <slot />
+    
+    <Teleport to="body">
+      <Transition
+        name="tooltip"
+        @enter="onEnter"
+        @leave="onLeave"
+      >
+        <div
+          v-if="isVisible"
+          ref="tooltipRef"
+          :id="tooltipId"
+          class="dm-tooltip"
+          :class="[
+            `dm-tooltip--${placement}`,
+            `dm-tooltip--${variant}`,
+            { 'dm-tooltip--arrow': showArrow }
+          ]"
+          :style="tooltipStyle"
+          role="tooltip"
+          :aria-hidden="!isVisible"
+        >
+          <div class="dm-tooltip__content">
+            <slot name="content">
+              {{ content }}
+            </slot>
+          </div>
+          <div v-if="showArrow" class="dm-tooltip__arrow"></div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
+
+type Placement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
+type Variant = 'dark' | 'light' | 'primary' | 'error' | 'warning' | 'success'
+type Trigger = 'hover' | 'click' | 'focus' | 'manual'
+
+interface Props {
+  content?: string
+  placement?: Placement
+  variant?: Variant
+  trigger?: Trigger
+  disabled?: boolean
+  showArrow?: boolean
+  delay?: number
+  hideDelay?: number
+  offset?: number
+  maxWidth?: string
+}
+
+interface Emits {
+  (e: 'show'): void
+  (e: 'hide'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placement: 'top',
+  variant: 'dark',
+  trigger: 'hover',
+  showArrow: true,
+  delay: 100,
+  hideDelay: 100,
+  offset: 8,
+  maxWidth: '200px'
+})
+
+const emit = defineEmits<Emits>()
+
+// Refs
+const triggerRef = ref<HTMLElement>()
+const tooltipRef = ref<HTMLElement>()
+const isVisible = ref(false)
+const showTimeout = ref<number>()
+const hideTimeout = ref<number>()
+
+// Computed
+const tooltipId = computed(() => `dm-tooltip-${Math.random().toString(36).substr(2, 9)}`)
+
+const tooltipStyle = ref<Record<string, string>>({})
+
+// Methods
+const calculatePosition = async () => {
+  if (!triggerRef.value || !tooltipRef.value) return
+
+  await nextTick()
+
+  const trigger = triggerRef.value.getBoundingClientRect()
+  const tooltip = tooltipRef.value.getBoundingClientRect()
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }
+
+  let top = 0
+  let left = 0
+
+  // Calculate base position
+  switch (props.placement) {
+    case 'top':
+    case 'top-start':
+    case 'top-end':
+      top = trigger.top - tooltip.height - props.offset
+      break
+    case 'bottom':
+    case 'bottom-start':
+    case 'bottom-end':
+      top = trigger.bottom + props.offset
+      break
+    case 'left':
+      top = trigger.top + (trigger.height - tooltip.height) / 2
+      left = trigger.left - tooltip.width - props.offset
+      break
+    case 'right':
+      top = trigger.top + (trigger.height - tooltip.height) / 2
+      left = trigger.right + props.offset
+      break
+  }
+
+  // Calculate horizontal position for top/bottom placements
+  if (props.placement.startsWith('top') || props.placement.startsWith('bottom')) {
+    switch (props.placement) {
+      case 'top':
+      case 'bottom':
+        left = trigger.left + (trigger.width - tooltip.width) / 2
+        break
+      case 'top-start':
+      case 'bottom-start':
+        left = trigger.left
+        break
+      case 'top-end':
+      case 'bottom-end':
+        left = trigger.right - tooltip.width
+        break
+    }
+  }
+
+  // Viewport boundary checks
+  if (left < 0) {
+    left = 8
+  } else if (left + tooltip.width > viewport.width) {
+    left = viewport.width - tooltip.width - 8
+  }
+
+  if (top < 0) {
+    top = 8
+  } else if (top + tooltip.height > viewport.height) {
+    top = viewport.height - tooltip.height - 8
+  }
+
+  tooltipStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    maxWidth: props.maxWidth,
+    zIndex: '9999'
+  }
+}
+
+const show = () => {
+  if (props.disabled || isVisible.value) return
+
+  clearTimeout(hideTimeout.value)
+  
+  showTimeout.value = window.setTimeout(async () => {
+    isVisible.value = true
+    emit('show')
+    await calculatePosition()
+  }, props.delay)
+}
+
+const hide = () => {
+  clearTimeout(showTimeout.value)
+  
+  hideTimeout.value = window.setTimeout(() => {
+    isVisible.value = false
+    emit('hide')
+  }, props.hideDelay)
+}
+
+const handleMouseEnter = () => {
+  if (props.trigger === 'hover') {
+    show()
+  }
+}
+
+const handleMouseLeave = () => {
+  if (props.trigger === 'hover') {
+    hide()
+  }
+}
+
+const handleFocus = () => {
+  if (props.trigger === 'focus') {
+    show()
+  }
+}
+
+const handleBlur = () => {
+  if (props.trigger === 'focus') {
+    hide()
+  }
+}
+
+const handleClick = () => {
+  if (props.trigger === 'click') {
+    if (isVisible.value) {
+      hide()
+    } else {
+      show()
+    }
+  }
+}
+
+const onEnter = () => {
+  calculatePosition()
+}
+
+const onLeave = () => {
+  tooltipStyle.value = {}
+}
+
+// Handle window resize
+const handleResize = () => {
+  if (isVisible.value) {
+    calculatePosition()
+  }
+}
+
+// Handle scroll
+const handleScroll = () => {
+  if (isVisible.value) {
+    calculatePosition()
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  window.addEventListener('scroll', handleScroll, true)
+})
+
+onUnmounted(() => {
+  clearTimeout(showTimeout.value)
+  clearTimeout(hideTimeout.value)
+  window.removeEventListener('resize', handleResize)
+  window.removeEventListener('scroll', handleScroll, true)
+})
+
+// Expose methods
+defineExpose({
+  show,
+  hide,
+  isVisible: computed(() => isVisible.value)
+})
+</script>
+
+<style scoped>
+.dm-tooltip-trigger {
+  @apply inline-block;
+}
+
+.dm-tooltip {
+  @apply absolute z-50 px-2 py-1 text-sm rounded shadow-lg pointer-events-none;
+  border-radius: var(--dm-radius);
+  font-size: var(--dm-text-sm);
+}
+
+/* Variants */
+.dm-tooltip--dark {
+  @apply bg-gray-900 text-white;
+  background-color: var(--dm-gray-900);
+  color: var(--dm-bg-primary, #ffffff);
+}
+
+.dm-tooltip--light {
+  @apply bg-white text-gray-900 border border-gray-200;
+  background-color: var(--dm-bg-primary, #ffffff);
+  color: var(--dm-text-primary);
+  border-color: var(--dm-gray-200, #e5e7eb);
+}
+
+.dm-tooltip--primary {
+  @apply text-white;
+  background: var(--gradient-primary);
+  color: var(--dm-bg-primary, #ffffff);
+}
+
+.dm-tooltip--error {
+  @apply text-white;
+  background-color: var(--dm-error);
+  color: var(--dm-bg-primary, #ffffff);
+}
+
+.dm-tooltip--warning {
+  @apply text-white;
+  background-color: var(--dm-warning);
+  color: var(--dm-bg-primary, #ffffff);
+}
+
+.dm-tooltip--success {
+  @apply text-white;
+  background-color: var(--dm-success);
+  color: var(--dm-bg-primary, #ffffff);
+}
+
+/* Dark mode adjustments */
+[data-theme="dark"] .dm-tooltip--dark {
+  background-color: var(--dm-gray-800, #1f2937);
+  color: var(--dm-text-primary);
+}
+
+[data-theme="dark"] .dm-tooltip--light {
+  background-color: var(--dm-bg-secondary);
+  color: var(--dm-text-primary);
+  border-color: var(--dm-gray-600, #4b5563);
+}
+
+.dm-tooltip__content {
+  @apply relative z-10;
+}
+
+/* Arrow styles */
+.dm-tooltip--arrow .dm-tooltip__arrow {
+  @apply absolute w-2 h-2 transform rotate-45;
+}
+
+.dm-tooltip--top .dm-tooltip__arrow {
+  @apply bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2;
+}
+
+.dm-tooltip--bottom .dm-tooltip__arrow {
+  @apply top-0 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+
+.dm-tooltip--left .dm-tooltip__arrow {
+  @apply right-0 top-1/2 translate-x-1/2 -translate-y-1/2;
+}
+
+.dm-tooltip--right .dm-tooltip__arrow {
+  @apply left-0 top-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+
+/* Arrow colors */
+.dm-tooltip--dark .dm-tooltip__arrow {
+  background-color: var(--dm-gray-900);
+}
+
+.dm-tooltip--light .dm-tooltip__arrow {
+  background-color: var(--dm-bg-primary, #ffffff);
+  border: 1px solid var(--dm-gray-200, #e5e7eb);
+}
+
+.dm-tooltip--primary .dm-tooltip__arrow {
+  background-color: var(--dm-primary);
+}
+
+.dm-tooltip--error .dm-tooltip__arrow {
+  background-color: var(--dm-error);
+}
+
+.dm-tooltip--warning .dm-tooltip__arrow {
+  background-color: var(--dm-warning);
+}
+
+.dm-tooltip--success .dm-tooltip__arrow {
+  background-color: var(--dm-success);
+}
+
+/* Transitions */
+.tooltip-enter-active,
+.tooltip-leave-active {
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+}
+
+.tooltip-enter-from,
+.tooltip-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .tooltip-enter-active,
+  .tooltip-leave-active {
+    transition: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .dm-tooltip {
+    @apply border-2 border-current;
+  }
+}
 </style>