@datametria/vue-components 1.1.2 → 1.2.0

package/src/components/DatametriaMenu.vue

@@ -0,0 +1,620 @@
+<template>
+  <div class="dm-menu" :class="{ 'dm-menu--disabled': disabled }">
+    <div
+      ref="triggerRef"
+      class="dm-menu__trigger"
+      :aria-expanded="isOpen"
+      :aria-haspopup="true"
+      :aria-controls="menuId"
+      @click="handleTriggerClick"
+      @keydown="handleTriggerKeydown"
+    >
+      <slot name="trigger" :isOpen="isOpen" :toggle="toggle">
+        <button
+          type="button"
+          class="dm-menu__button"
+          :disabled="disabled"
+        >
+          {{ triggerText }}
+          <svg
+            class="dm-menu__chevron"
+            :class="{ 'dm-menu__chevron--open': isOpen }"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </slot>
+    </div>
+
+    <Teleport to="body">
+      <Transition
+        name="menu"
+        @enter="onEnter"
+        @leave="onLeave"
+      >
+        <div
+          v-if="isOpen"
+          ref="menuRef"
+          :id="menuId"
+          class="dm-menu__dropdown"
+          :class="[
+            `dm-menu__dropdown--${placement}`,
+            { 'dm-menu__dropdown--full-width': fullWidth }
+          ]"
+          :style="menuStyle"
+          role="menu"
+          :aria-labelledby="triggerId"
+          @keydown="handleMenuKeydown"
+          @click="handleMenuClick"
+        >
+          <div class="dm-menu__content">
+            <slot :close="close" :focusedIndex="focusedIndex">
+              <div
+                v-for="(item, index) in items"
+                :key="item.key || index"
+                class="dm-menu__item"
+                :class="{
+                  'dm-menu__item--focused': focusedIndex === index,
+                  'dm-menu__item--disabled': item.disabled,
+                  'dm-menu__item--divider': item.divider
+                }"
+                role="menuitem"
+                :tabindex="item.disabled ? -1 : 0"
+                :aria-disabled="item.disabled"
+                @click="handleItemClick(item, index)"
+                @mouseenter="focusedIndex = index"
+              >
+                <div v-if="item.divider" class="dm-menu__divider"></div>
+                <template v-else>
+                  <div v-if="item.icon" class="dm-menu__item-icon">
+                    <component :is="item.icon" />
+                  </div>
+                  <div class="dm-menu__item-content">
+                    <div class="dm-menu__item-label">{{ item.label }}</div>
+                    <div v-if="item.description" class="dm-menu__item-description">
+                      {{ item.description }}
+                    </div>
+                  </div>
+                  <div v-if="item.shortcut" class="dm-menu__item-shortcut">
+                    {{ item.shortcut }}
+                  </div>
+                </template>
+              </div>
+            </slot>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Backdrop for mobile -->
+    <Teleport to="body">
+      <Transition name="backdrop">
+        <div
+          v-if="isOpen && showBackdrop"
+          class="dm-menu__backdrop"
+          @click="close"
+        ></div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
+
+interface MenuItem {
+  key?: string
+  label?: string
+  description?: string
+  icon?: any
+  shortcut?: string
+  disabled?: boolean
+  divider?: boolean
+  action?: () => void
+}
+
+type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'left' | 'right'
+
+interface Props {
+  items?: MenuItem[]
+  triggerText?: string
+  placement?: Placement
+  disabled?: boolean
+  fullWidth?: boolean
+  showBackdrop?: boolean
+  closeOnItemClick?: boolean
+  offset?: number
+}
+
+interface Emits {
+  (e: 'open'): void
+  (e: 'close'): void
+  (e: 'item-click', item: MenuItem, index: number): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  triggerText: 'Menu',
+  placement: 'bottom-start',
+  showBackdrop: false,
+  closeOnItemClick: true,
+  offset: 4
+})
+
+const emit = defineEmits<Emits>()
+
+// Refs
+const triggerRef = ref<HTMLElement>()
+const menuRef = ref<HTMLElement>()
+const isOpen = ref(false)
+const focusedIndex = ref(-1)
+
+// Computed
+const menuId = computed(() => `dm-menu-${Math.random().toString(36).substr(2, 9)}`)
+const triggerId = computed(() => `dm-menu-trigger-${Math.random().toString(36).substr(2, 9)}`)
+
+const menuStyle = ref<Record<string, string>>({})
+
+// const enabledItems = computed(() => 
+//   props.items.filter(item => !item.disabled && !item.divider)
+// )
+
+// Methods
+const calculatePosition = async () => {
+  if (!triggerRef.value || !menuRef.value) return
+
+  await nextTick()
+
+  const trigger = triggerRef.value.getBoundingClientRect()
+  const menu = menuRef.value.getBoundingClientRect()
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }
+
+  let top = 0
+  let left = 0
+
+  // Calculate base position
+  switch (props.placement) {
+    case 'bottom-start':
+      top = trigger.bottom + props.offset
+      left = trigger.left
+      break
+    case 'bottom-end':
+      top = trigger.bottom + props.offset
+      left = trigger.right - menu.width
+      break
+    case 'top-start':
+      top = trigger.top - menu.height - props.offset
+      left = trigger.left
+      break
+    case 'top-end':
+      top = trigger.top - menu.height - props.offset
+      left = trigger.right - menu.width
+      break
+    case 'left':
+      top = trigger.top
+      left = trigger.left - menu.width - props.offset
+      break
+    case 'right':
+      top = trigger.top
+      left = trigger.right + props.offset
+      break
+  }
+
+  // Viewport boundary checks
+  if (left < 8) {
+    left = 8
+  } else if (left + menu.width > viewport.width - 8) {
+    left = viewport.width - menu.width - 8
+  }
+
+  if (top < 8) {
+    top = 8
+  } else if (top + menu.height > viewport.height - 8) {
+    top = viewport.height - menu.height - 8
+  }
+
+  const width = props.fullWidth ? `${trigger.width}px` : 'auto'
+
+  menuStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width,
+    zIndex: '9999'
+  }
+}
+
+const open = async () => {
+  if (props.disabled || isOpen.value) return
+
+  isOpen.value = true
+  focusedIndex.value = -1
+  emit('open')
+  
+  await calculatePosition()
+  
+  // Focus first enabled item
+  nextTick(() => {
+    const firstEnabledIndex = props.items.findIndex(item => !item.disabled && !item.divider)
+    if (firstEnabledIndex !== -1) {
+      focusedIndex.value = firstEnabledIndex
+    }
+  })
+}
+
+const close = () => {
+  if (!isOpen.value) return
+
+  isOpen.value = false
+  focusedIndex.value = -1
+  emit('close')
+  
+  // Return focus to trigger
+  nextTick(() => {
+    triggerRef.value?.focus()
+  })
+}
+
+const toggle = () => {
+  if (isOpen.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+const handleTriggerClick = () => {
+  toggle()
+}
+
+const handleTriggerKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case 'Enter':
+    case ' ':
+    case 'ArrowDown':
+      event.preventDefault()
+      open()
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      open()
+      // Focus last item
+      nextTick(() => {
+        const lastEnabledIndex = props.items.map((item, index) => ({ item, index }))
+          .filter(({ item }) => !item.disabled && !item.divider)
+          .pop()?.index ?? -1
+        if (lastEnabledIndex !== -1) {
+          focusedIndex.value = lastEnabledIndex
+        }
+      })
+      break
+    case 'Escape':
+      close()
+      break
+  }
+}
+
+const handleMenuKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      focusNext()
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      focusPrevious()
+      break
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      if (focusedIndex.value !== -1) {
+        const item = props.items[focusedIndex.value]
+        handleItemClick(item, focusedIndex.value)
+      }
+      break
+    case 'Escape':
+      event.preventDefault()
+      close()
+      break
+    case 'Tab':
+      close()
+      break
+  }
+}
+
+const focusNext = () => {
+  const enabledIndices = props.items
+    .map((item, index) => ({ item, index }))
+    .filter(({ item }) => !item.disabled && !item.divider)
+    .map(({ index }) => index)
+
+  if (enabledIndices.length === 0) return
+
+  const currentIndex = enabledIndices.indexOf(focusedIndex.value)
+  const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % enabledIndices.length
+  focusedIndex.value = enabledIndices[nextIndex]
+}
+
+const focusPrevious = () => {
+  const enabledIndices = props.items
+    .map((item, index) => ({ item, index }))
+    .filter(({ item }) => !item.disabled && !item.divider)
+    .map(({ index }) => index)
+
+  if (enabledIndices.length === 0) return
+
+  const currentIndex = enabledIndices.indexOf(focusedIndex.value)
+  const prevIndex = currentIndex === -1 ? enabledIndices.length - 1 : (currentIndex - 1 + enabledIndices.length) % enabledIndices.length
+  focusedIndex.value = enabledIndices[prevIndex]
+}
+
+const handleItemClick = (item: MenuItem, index: number) => {
+  if (item.disabled || item.divider) return
+
+  emit('item-click', item, index)
+  
+  if (item.action) {
+    item.action()
+  }
+
+  if (props.closeOnItemClick) {
+    close()
+  }
+}
+
+const handleMenuClick = (event: Event) => {
+  event.stopPropagation()
+}
+
+const onEnter = () => {
+  calculatePosition()
+}
+
+const onLeave = () => {
+  menuStyle.value = {}
+}
+
+// Handle clicks outside
+const handleClickOutside = (event: Event) => {
+  if (!isOpen.value) return
+
+  const target = event.target as Node
+  if (
+    triggerRef.value?.contains(target) ||
+    menuRef.value?.contains(target)
+  ) {
+    return
+  }
+
+  close()
+}
+
+// Handle window resize
+const handleResize = () => {
+  if (isOpen.value) {
+    calculatePosition()
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('resize', handleResize)
+})
+
+// Watch for items changes
+watch(() => props.items, () => {
+  if (focusedIndex.value >= props.items.length) {
+    focusedIndex.value = -1
+  }
+})
+
+// Expose methods
+defineExpose({
+  open,
+  close,
+  toggle,
+  isOpen: computed(() => isOpen.value)
+})
+</script>
+
+<style scoped>
+.dm-menu {
+  @apply relative inline-block;
+}
+
+.dm-menu--disabled {
+  @apply opacity-60 cursor-not-allowed;
+}
+
+.dm-menu__trigger {
+  @apply inline-block;
+}
+
+.dm-menu__button {
+  @apply inline-flex items-center justify-between px-4 py-2 text-sm font-medium;
+  @apply bg-white border border-gray-300 rounded-md shadow-sm;
+  @apply hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
+  @apply disabled:opacity-50 disabled:cursor-not-allowed;
+  @apply transition-colors duration-200;
+  
+  background-color: var(--dm-bg-primary, #ffffff);
+  border-color: var(--dm-gray-300, #d1d5db);
+  color: var(--dm-text-primary);
+  border-radius: var(--dm-radius);
+  transition: var(--dm-transition);
+}
+
+.dm-menu__button:focus {
+  box-shadow: var(--dm-focus-ring);
+  border-color: var(--dm-primary);
+}
+
+[data-theme="dark"] .dm-menu__button {
+  background-color: var(--dm-bg-secondary);
+  border-color: var(--dm-gray-600, #4b5563);
+  color: var(--dm-text-primary);
+}
+
+.dm-menu__chevron {
+  @apply w-4 h-4 ml-2 transition-transform duration-200;
+  transition: var(--dm-transition);
+}
+
+.dm-menu__chevron--open {
+  @apply transform rotate-180;
+}
+
+.dm-menu__dropdown {
+  @apply bg-white border border-gray-200 rounded-md shadow-lg;
+  @apply min-w-48 max-w-xs;
+  
+  background-color: var(--dm-bg-primary, #ffffff);
+  border-color: var(--dm-gray-200, #e5e7eb);
+  border-radius: var(--dm-radius);
+}
+
+[data-theme="dark"] .dm-menu__dropdown {
+  background-color: var(--dm-bg-secondary);
+  border-color: var(--dm-gray-600, #4b5563);
+}
+
+.dm-menu__content {
+  @apply py-1;
+}
+
+.dm-menu__item {
+  @apply flex items-center px-4 py-2 text-sm cursor-pointer;
+  @apply hover:bg-gray-100 focus:bg-gray-100 focus:outline-none;
+  @apply transition-colors duration-150;
+  
+  color: var(--dm-text-primary);
+  transition: var(--transition-fast);
+}
+
+.dm-menu__item--focused {
+  @apply bg-gray-100;
+  background-color: var(--dm-gray-100, #f3f4f6);
+}
+
+.dm-menu__item--disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.dm-menu__item--disabled:hover,
+.dm-menu__item--disabled:focus {
+  @apply bg-transparent;
+}
+
+[data-theme="dark"] .dm-menu__item {
+  color: var(--dm-text-primary);
+}
+
+[data-theme="dark"] .dm-menu__item:hover,
+[data-theme="dark"] .dm-menu__item--focused {
+  background-color: var(--dm-gray-700, #374151);
+}
+
+.dm-menu__item--divider {
+  @apply p-0 cursor-default;
+}
+
+.dm-menu__divider {
+  @apply border-t border-gray-200 my-1;
+  border-color: var(--dm-gray-200, #e5e7eb);
+}
+
+[data-theme="dark"] .dm-menu__divider {
+  border-color: var(--dm-gray-600, #4b5563);
+}
+
+.dm-menu__item-icon {
+  @apply w-4 h-4 mr-3 flex-shrink-0;
+}
+
+.dm-menu__item-content {
+  @apply flex-1 min-w-0;
+}
+
+.dm-menu__item-label {
+  @apply font-medium;
+}
+
+.dm-menu__item-description {
+  @apply text-xs text-gray-500 mt-0.5;
+  color: var(--dm-gray-500, #6b7280);
+}
+
+[data-theme="dark"] .dm-menu__item-description {
+  color: var(--dm-text-secondary);
+}
+
+.dm-menu__item-shortcut {
+  @apply text-xs text-gray-400 ml-4 flex-shrink-0;
+  color: var(--dm-gray-400, #9ca3af);
+}
+
+[data-theme="dark"] .dm-menu__item-shortcut {
+  color: var(--dm-gray-500, #6b7280);
+}
+
+.dm-menu__backdrop {
+  @apply fixed inset-0 bg-black bg-opacity-25 z-40;
+}
+
+/* Transitions */
+.menu-enter-active,
+.menu-leave-active {
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+}
+
+.menu-enter-from,
+.menu-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+}
+
+.backdrop-enter-active,
+.backdrop-leave-active {
+  transition: opacity var(--transition-fast);
+}
+
+.backdrop-enter-from,
+.backdrop-leave-to {
+  opacity: 0;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .dm-menu__chevron,
+  .dm-menu__item,
+  .menu-enter-active,
+  .menu-leave-active,
+  .backdrop-enter-active,
+  .backdrop-leave-active {
+    transition: none;
+  }
+}
+
+/* Mobile optimizations */
+@media (max-width: 640px) {
+  .dm-menu__dropdown {
+    @apply max-w-none;
+    width: calc(100vw - 2rem);
+  }
+}
+</style>