@sabrenski/spire-ui 0.0.1

package/src/components/Dropdown/DropdownItem.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  inject,
+  onMounted,
+  onUnmounted,
+  type Component
+} from 'vue'
+import { dropdownContextKey, type DropdownContext } from './Dropdown.vue'
+
+export interface DropdownItemProps {
+  /** Renders as RouterLink when provided */
+  to?: string | Record<string, unknown>
+  /** Renders as anchor when provided */
+  href?: string
+  /** Disabled state */
+  disabled?: boolean
+  /** Danger/destructive styling */
+  danger?: boolean
+  /** Leading icon */
+  icon?: Component
+  /** Keyboard shortcut hint */
+  shortcut?: string
+  /** Prevent menu from closing on click */
+  preventClose?: boolean
+  /** Show chevron indicator (for submenu triggers) */
+  chevron?: boolean
+}
+
+const props = withDefaults(defineProps<DropdownItemProps>(), {
+  disabled: false,
+  danger: false,
+  preventClose: false,
+  chevron: false
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent | KeyboardEvent]
+}>()
+
+const context = inject(dropdownContextKey)
+const itemRef = ref<HTMLElement | null>(null)
+
+const componentType = computed(() => {
+  if (props.to) return 'router-link'
+  if (props.href) return 'a'
+  return 'button'
+})
+
+const componentProps = computed(() => {
+  const base: Record<string, unknown> = {
+    class: [
+      'ui-dropdown-item',
+      {
+        'ui-dropdown-item--disabled': props.disabled,
+        'ui-dropdown-item--danger': props.danger
+      }
+    ],
+    role: 'menuitem',
+    tabindex: props.disabled ? -1 : 0
+  }
+
+  if (props.disabled) {
+    base['aria-disabled'] = 'true'
+  }
+
+  if (componentType.value === 'router-link') {
+    base.to = props.to
+  } else if (componentType.value === 'a') {
+    base.href = props.href
+    base.target = '_blank'
+    base.rel = 'noopener noreferrer'
+  } else {
+    base.type = 'button'
+    base.disabled = props.disabled
+  }
+
+  return base
+})
+
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    event.preventDefault()
+    return
+  }
+
+  emit('click', event)
+
+  if (!props.preventClose) {
+    context?.close()
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (props.disabled) return
+
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    emit('click', event)
+
+    if (!props.preventClose) {
+      context?.close()
+    }
+  }
+}
+
+onMounted(() => {
+  if (itemRef.value) {
+    context?.registerItem(itemRef.value)
+  }
+})
+
+onUnmounted(() => {
+  if (itemRef.value) {
+    context?.unregisterItem(itemRef.value)
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="componentType"
+    ref="itemRef"
+    v-bind="componentProps"
+    @click="handleClick"
+    @keydown="handleKeydown"
+  >
+    <span v-if="icon" class="ui-dropdown-item__icon">
+      <component :is="icon" />
+    </span>
+    <span class="ui-dropdown-item__content">
+      <slot />
+    </span>
+    <span v-if="shortcut" class="ui-dropdown-item__shortcut">
+      {{ shortcut }}
+    </span>
+    <span v-if="chevron" class="ui-dropdown-item__chevron">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M9 18l6-6-6-6" />
+      </svg>
+    </span>
+  </component>
+</template>
+
+<style scoped>
+.ui-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-2) var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+  color: var(--dropdown-item-text);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  text-align: left;
+  text-decoration: none;
+  outline: none;
+  transition: background-color var(--duration-fast) var(--ease-default),
+              color var(--duration-fast) var(--ease-default);
+}
+
+.ui-dropdown-item:hover:not(.ui-dropdown-item--disabled),
+.ui-dropdown-item:focus:not(.ui-dropdown-item--disabled) {
+  background-color: var(--dropdown-item-hover);
+}
+
+.ui-dropdown-item:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+.ui-dropdown-item--disabled {
+  color: var(--dropdown-item-disabled);
+  cursor: not-allowed;
+}
+
+.ui-dropdown-item--danger {
+  color: var(--dropdown-item-danger);
+}
+
+.ui-dropdown-item--danger:hover:not(.ui-dropdown-item--disabled),
+.ui-dropdown-item--danger:focus:not(.ui-dropdown-item--disabled) {
+  background-color: var(--dropdown-item-danger-hover);
+}
+
+.ui-dropdown-item__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.ui-dropdown-item__icon > :deep(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-dropdown-item__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-dropdown-item__shortcut {
+  margin-left: auto;
+  padding-left: var(--space-4);
+  font-size: var(--text-xs);
+  color: var(--dropdown-item-shortcut);
+  flex-shrink: 0;
+}
+
+.ui-dropdown-item__chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  color: var(--dropdown-item-shortcut);
+  flex-shrink: 0;
+}
+</style>

package/src/components/Dropdown/DropdownSeparator.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="ui-dropdown-separator" role="separator" />
+</template>
+
+<style scoped>
+.ui-dropdown-separator {
+  height: 1px;
+  margin: 2px 0;
+  background-color: var(--dropdown-separator);
+}
+</style>

package/src/components/Dropdown/DropdownSub.vue

@@ -0,0 +1,104 @@
+<script lang="ts">
+import type { InjectionKey } from 'vue'
+
+export interface DropdownSubContext {
+  isOpen: { value: boolean }
+  triggerRef: { value: HTMLElement | null }
+  open: () => void
+  close: () => void
+  onTriggerKeydown: (e: KeyboardEvent) => void
+  scheduleClose: () => void
+  cancelClose: () => void
+}
+
+export const dropdownSubContextKey: InjectionKey<DropdownSubContext> = Symbol('dropdownSub')
+</script>
+
+<script setup lang="ts">
+import { ref, provide, inject } from 'vue'
+import { dropdownContextKey } from './Dropdown.vue'
+
+const parentContext = inject(dropdownContextKey)
+
+const isOpen = ref(false)
+const triggerRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+
+let closeTimeout: ReturnType<typeof setTimeout> | null = null
+
+function open() {
+  if (closeTimeout) {
+    clearTimeout(closeTimeout)
+    closeTimeout = null
+  }
+  isOpen.value = true
+}
+
+function close() {
+  isOpen.value = false
+}
+
+function scheduleClose() {
+  if (closeTimeout) clearTimeout(closeTimeout)
+  closeTimeout = setTimeout(() => {
+    close()
+  }, 150)
+}
+
+function cancelClose() {
+  if (closeTimeout) {
+    clearTimeout(closeTimeout)
+    closeTimeout = null
+  }
+}
+
+function onTriggerKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowRight' || e.key === 'Enter') {
+    e.preventDefault()
+    e.stopPropagation()
+    open()
+  }
+}
+
+function onContentKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowLeft') {
+    e.preventDefault()
+    e.stopPropagation()
+    close()
+    triggerRef.value?.focus()
+  }
+}
+
+provide(dropdownSubContextKey, {
+  isOpen,
+  triggerRef,
+  open,
+  close,
+  onTriggerKeydown,
+  scheduleClose,
+  cancelClose
+} as DropdownSubContext)
+
+defineExpose({
+  isOpen,
+  triggerRef,
+  contentRef,
+  open,
+  close,
+  scheduleClose,
+  cancelClose,
+  onContentKeydown
+})
+</script>
+
+<template>
+  <div class="ui-dropdown-sub">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-dropdown-sub {
+  position: relative;
+}
+</style>

package/src/components/Dropdown/DropdownSubContent.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  watch,
+  inject,
+  nextTick,
+  onMounted,
+  onUnmounted
+} from 'vue'
+import { dropdownSubContextKey } from './DropdownSub.vue'
+
+const subContext = inject(dropdownSubContextKey)
+
+const menuRef = ref<HTMLElement | null>(null)
+const positionStyle = ref<{ top: string; left: string }>({ top: '0', left: '0' })
+
+function handleMouseEnter() {
+  subContext?.cancelClose()
+}
+
+function handleMouseLeave() {
+  subContext?.scheduleClose()
+}
+
+function getFocusableItems(): HTMLElement[] {
+  if (!menuRef.value) return []
+  return Array.from(
+    menuRef.value.querySelectorAll<HTMLElement>(
+      'button:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])'
+    )
+  ).filter(el => el.getAttribute('aria-disabled') !== 'true')
+}
+
+function focusItem(index: number) {
+  const items = getFocusableItems()
+  if (items.length === 0) return
+
+  if (index < 0) index = items.length - 1
+  if (index >= items.length) index = 0
+
+  items[index].focus()
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  const items = getFocusableItems()
+  const currentIndex = items.findIndex(el => el === document.activeElement)
+
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault()
+      e.stopPropagation()
+      focusItem(currentIndex + 1)
+      break
+    case 'ArrowUp':
+      e.preventDefault()
+      e.stopPropagation()
+      focusItem(currentIndex - 1)
+      break
+    case 'Home':
+      e.preventDefault()
+      e.stopPropagation()
+      focusItem(0)
+      break
+    case 'End':
+      e.preventDefault()
+      e.stopPropagation()
+      focusItem(items.length - 1)
+      break
+    case 'ArrowLeft':
+    case 'Escape':
+      e.preventDefault()
+      e.stopPropagation()
+      subContext?.close()
+      subContext?.triggerRef.value?.focus()
+      break
+  }
+}
+
+function updatePosition() {
+  const trigger = subContext?.triggerRef.value
+  const menu = menuRef.value
+  if (!trigger || !menu) return
+
+  const triggerRect = trigger.getBoundingClientRect()
+  const menuRect = menu.getBoundingClientRect()
+  const viewport = { width: window.innerWidth, height: window.innerHeight }
+  const gap = 4
+
+  let top = triggerRect.top
+  let left = triggerRect.right + gap
+
+  // Flip to left if no space on right
+  if (left + menuRect.width > viewport.width - 8) {
+    left = triggerRect.left - menuRect.width - gap
+  }
+
+  // Clamp vertical position
+  if (top + menuRect.height > viewport.height - 8) {
+    top = viewport.height - menuRect.height - 8
+  }
+  top = Math.max(8, top)
+
+  // Clamp horizontal position
+  left = Math.max(8, Math.min(left, viewport.width - menuRect.width - 8))
+
+  positionStyle.value = {
+    top: `${top}px`,
+    left: `${left}px`
+  }
+}
+
+watch(() => subContext?.isOpen.value, async (isOpen) => {
+  if (isOpen) {
+    await nextTick()
+    updatePosition()
+    // Focus first item
+    const firstItem = menuRef.value?.querySelector<HTMLElement>(
+      'button:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])'
+    )
+    firstItem?.focus()
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('resize', updatePosition)
+  window.addEventListener('scroll', updatePosition, true)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updatePosition)
+  window.removeEventListener('scroll', updatePosition, true)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="ui-dropdown-sub">
+      <div
+        v-if="subContext?.isOpen.value"
+        ref="menuRef"
+        class="ui-dropdown-sub-content"
+        role="menu"
+        :style="positionStyle"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+        @keydown="handleKeydown"
+      >
+        <slot />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.ui-dropdown-sub-content {
+  position: fixed;
+  z-index: calc(var(--z-dropdown, 50) + 1);
+  min-width: 160px;
+  padding: var(--space-1);
+  background: var(--dropdown-bg);
+  border: 1px solid var(--dropdown-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  outline: none;
+  font-family: var(--font-sans);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ui-dropdown-sub-enter-active {
+  transition: opacity var(--duration-fast) var(--ease-default),
+              transform var(--duration-fast) var(--ease-default);
+}
+
+.ui-dropdown-sub-leave-active {
+  transition: opacity var(--duration-fast) var(--ease-default),
+              transform var(--duration-fast) var(--ease-default);
+}
+
+.ui-dropdown-sub-enter-from,
+.ui-dropdown-sub-leave-to {
+  opacity: 0;
+  transform: translateX(-4px);
+}
+</style>

package/src/components/Dropdown/DropdownSubTrigger.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import {
+  ref,
+  inject,
+  onMounted,
+  onUnmounted,
+  type Component
+} from 'vue'
+import { dropdownContextKey } from './Dropdown.vue'
+import { dropdownSubContextKey } from './DropdownSub.vue'
+
+export interface DropdownSubTriggerProps {
+  /** Disabled state */
+  disabled?: boolean
+  /** Leading icon */
+  icon?: Component
+}
+
+const props = withDefaults(defineProps<DropdownSubTriggerProps>(), {
+  disabled: false
+})
+
+const parentContext = inject(dropdownContextKey)
+const subContext = inject(dropdownSubContextKey)
+const triggerRef = ref<HTMLElement | null>(null)
+
+function handleMouseEnter() {
+  if (props.disabled) return
+  subContext?.cancelClose()
+  subContext?.open()
+}
+
+function handleMouseLeave() {
+  if (props.disabled) return
+  subContext?.scheduleClose()
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (props.disabled) return
+  subContext?.onTriggerKeydown(e)
+}
+
+onMounted(() => {
+  if (triggerRef.value) {
+    parentContext?.registerItem(triggerRef.value)
+    if (subContext) {
+      subContext.triggerRef.value = triggerRef.value
+    }
+  }
+})
+
+onUnmounted(() => {
+  if (triggerRef.value) {
+    parentContext?.unregisterItem(triggerRef.value)
+  }
+})
+</script>
+
+<template>
+  <button
+    ref="triggerRef"
+    type="button"
+    class="ui-dropdown-sub-trigger"
+    :class="{ 'ui-dropdown-sub-trigger--disabled': disabled }"
+    role="menuitem"
+    :aria-haspopup="true"
+    :aria-expanded="subContext?.isOpen.value"
+    :aria-disabled="disabled || undefined"
+    :tabindex="disabled ? -1 : 0"
+    :disabled="disabled"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @keydown="handleKeydown"
+  >
+    <span v-if="icon" class="ui-dropdown-sub-trigger__icon">
+      <component :is="icon" />
+    </span>
+    <span class="ui-dropdown-sub-trigger__content">
+      <slot />
+    </span>
+    <span class="ui-dropdown-sub-trigger__chevron">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M9 18l6-6-6-6" />
+      </svg>
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.ui-dropdown-sub-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-2) var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+  color: var(--dropdown-item-text);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  text-align: left;
+  outline: none;
+  transition: background-color var(--duration-fast) var(--ease-default);
+}
+
+.ui-dropdown-sub-trigger:hover:not(.ui-dropdown-sub-trigger--disabled),
+.ui-dropdown-sub-trigger:focus:not(.ui-dropdown-sub-trigger--disabled) {
+  background-color: var(--dropdown-item-hover);
+}
+
+.ui-dropdown-sub-trigger:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+.ui-dropdown-sub-trigger--disabled {
+  color: var(--dropdown-item-disabled);
+  cursor: not-allowed;
+}
+
+.ui-dropdown-sub-trigger__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.ui-dropdown-sub-trigger__icon > :deep(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-dropdown-sub-trigger__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-dropdown-sub-trigger__chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  color: var(--dropdown-item-shortcut);
+  flex-shrink: 0;
+}
+</style>

package/src/components/Dropdown/index.ts

@@ -0,0 +1,14 @@
+export { default as Dropdown } from './Dropdown.vue'
+export { default as DropdownItem } from './DropdownItem.vue'
+export { default as DropdownSeparator } from './DropdownSeparator.vue'
+export { default as DropdownSub } from './DropdownSub.vue'
+export { default as DropdownSubTrigger } from './DropdownSubTrigger.vue'
+export { default as DropdownSubContent } from './DropdownSubContent.vue'
+export type {
+  DropdownProps,
+  DropdownPlacement,
+  DropdownContext
+} from './Dropdown.vue'
+export type { DropdownItemProps } from './DropdownItem.vue'
+export type { DropdownSubContext } from './DropdownSub.vue'
+export type { DropdownSubTriggerProps } from './DropdownSubTrigger.vue'