@datametria/vue-components 1.1.2 → 1.2.0

package/src/components/DatametriaTooltip.vue

@@ -0,0 +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;
+  }
+}
+</style>

package/src/components/__tests__/DatametriaAlert.test.js

@@ -0,0 +1,36 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaAlert from '../DatametriaAlert.vue'
+
+describe('DatametriaAlert', () => {
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { 
+        variant: 'primary',
+        message: 'Test message'
+      }
+    })
+    
+    expect(wrapper.classes()).toContain('datametria-alert--primary')
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaAlert, {
+      props: { 
+        variant: 'invalid',
+        message: 'Test'
+      }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaAlert] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+})

package/src/components/__tests__/DatametriaBadge.test.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaBadge from '../DatametriaBadge.vue'
+
+describe('DatametriaBadge', () => {
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { label: 'Test', variant: 'primary' }
+    })
+    
+    expect(wrapper.classes()).toContain('dm-badge--primary')
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaBadge, {
+      props: { label: 'Test', variant: 'invalid' }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaBadge] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+})

package/src/components/__tests__/DatametriaButton.test.js

@@ -0,0 +1,31 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaButton from '../DatametriaButton.vue'
+import { ButtonVariant } from '../../types'
+
+describe('DatametriaButton', () => {
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaButton, {
+      props: { variant: 'invalid' }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaButton] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaButton, {
+      props: { variant: ButtonVariant.PRIMARY }
+    })
+    
+    expect(wrapper.classes()).toContain('datametria-button--primary')
+  })
+})

package/src/components/__tests__/DatametriaChip.test.js

@@ -0,0 +1,39 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaChip from '../DatametriaChip.vue'
+
+describe('DatametriaChip', () => {
+  it('renders with primary variant by default', () => {
+    const wrapper = mount(DatametriaChip, {
+      props: { label: 'Test' }
+    })
+    
+    expect(wrapper.classes()).toContain('dm-chip--primary')
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaChip, {
+      props: { label: 'Test', variant: 'invalid' }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaChip] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+
+  it('emits click event when clickable', async () => {
+    const wrapper = mount(DatametriaChip, {
+      props: { label: 'Test', clickable: true }
+    })
+    
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+})

package/src/components/__tests__/DatametriaNavbar.test.js

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaNavbar from '../DatametriaNavbar.vue'
+
+describe('DatametriaNavbar', () => {
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaNavbar, {
+      props: { variant: 'primary' }
+    })
+    
+    expect(wrapper.classes()).toContain('dm-navbar--primary')
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaNavbar, {
+      props: { variant: 'invalid' }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaNavbar] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+
+  it('renders brand text', () => {
+    const wrapper = mount(DatametriaNavbar, {
+      props: { brand: 'DATAMETRIA' }
+    })
+    
+    expect(wrapper.text()).toContain('DATAMETRIA')
+  })
+
+  it('toggles mobile menu', async () => {
+    const wrapper = mount(DatametriaNavbar, {
+      slots: { menu: '<div>Menu items</div>' }
+    })
+    
+    const toggle = wrapper.find('.dm-navbar__toggle')
+    await toggle.trigger('click')
+    
+    expect(wrapper.find('.dm-navbar__menu').classes()).toContain('dm-navbar__menu--open')
+  })
+})

package/src/components/__tests__/DatametriaToast.test.js

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaToast from '../DatametriaToast.vue'
+
+describe('DatametriaToast', () => {
+  it('renders with primary variant', () => {
+    // Create body element for Teleport
+    const body = document.createElement('div')
+    document.body.appendChild(body)
+    
+    const wrapper = mount(DatametriaToast, {
+      props: { 
+        message: 'Test message',
+        variant: 'primary',
+        modelValue: true
+      },
+      attachTo: body
+    })
+    
+    // Check if toast exists in document body
+    const toast = document.querySelector('.dm-toast')
+    expect(toast).toBeTruthy()
+    expect(toast.classList.contains('dm-toast--primary')).toBe(true)
+    
+    wrapper.unmount()
+    document.body.removeChild(body)
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaToast, {
+      props: { 
+        message: 'Test',
+        variant: 'invalid',
+        modelValue: true
+      }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaToast] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+})