@umbra.ui/core 0.1.0

package/src/components/controls/Dropdown/Dropdown.vue

@@ -0,0 +1,476 @@
+<script setup lang="ts">
+import { ChevronRightIcon } from "@umbra-ui/icons";
+import { Button } from "@umbra-ui/core";
+import { ref, onUnmounted, onMounted, computed, nextTick, watch } from "vue";
+import { DropdownItem } from "./types";
+import "./theme.css";
+
+// Shared overlay system across all dropdown instances
+let globalOverlay: HTMLElement | null = null;
+let activeDropdownCount = 0;
+
+export interface Props {
+  items: DropdownItem[];
+  modelValue?: DropdownItem | null; // v-model support
+  showOverlay?: boolean;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [
+    { id: "1", title: "One" },
+    { id: "2", title: "Two" },
+    { id: "3", title: "Three" },
+  ],
+  modelValue: null,
+  showOverlay: true,
+  placeholder: "Select an option",
+});
+
+// v-model emit
+const emit = defineEmits<{
+  "update:modelValue": [item: DropdownItem | null];
+  change: [item: DropdownItem | null]; // Optional additional change event
+}>();
+
+const isOpen = ref(false);
+const containerRef = ref<HTMLElement | null>(null);
+const popoverRef = ref<HTMLElement | null>(null);
+const buttonRef = ref<HTMLElement | null>(null);
+const isPopoverAbove = ref(false);
+const focusedItemIndex = ref(-1);
+
+// Simple icon color - using default and secondary values from CSS
+const iconColor = computed(() => {
+  return "var(--dropdown-icon-color-default)";
+});
+
+// Computed property for display text
+const displayText = computed(() => {
+  if (!props.modelValue) {
+    return props.placeholder;
+  }
+  return props.modelValue.title;
+});
+
+// Helper to find item index by id
+const getItemIndex = (item: DropdownItem | null): number => {
+  if (!item) return -1;
+  return props.items.findIndex((i) => i.id === item.id);
+};
+
+// Check if an item is selected
+const isItemSelected = (item: DropdownItem): boolean => {
+  return props.modelValue?.id === item.id;
+};
+
+const createGlobalOverlay = () => {
+  if (!globalOverlay) {
+    globalOverlay = document.createElement("div");
+    globalOverlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: var(--dropdown-overlay-bg);
+      z-index: 9999;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+    `;
+    document.body.appendChild(globalOverlay);
+  }
+  return globalOverlay;
+};
+
+const removeGlobalOverlay = () => {
+  if (globalOverlay && activeDropdownCount === 0) {
+    globalOverlay.style.opacity = "0";
+    globalOverlay.style.pointerEvents = "none";
+    setTimeout(() => {
+      if (globalOverlay && activeDropdownCount === 0) {
+        document.body.removeChild(globalOverlay);
+        globalOverlay = null;
+      }
+    }, 200);
+  }
+};
+
+const positionPopover = async () => {
+  await nextTick();
+  if (!popoverRef.value || !buttonRef.value) return;
+
+  const buttonRect = buttonRef.value.getBoundingClientRect();
+  const popoverRect = popoverRef.value.getBoundingClientRect();
+  const windowHeight = window.innerHeight;
+  const windowWidth = window.innerWidth;
+
+  // Reset styles to measure natural dimensions
+  popoverRef.value.style.maxHeight = "17.65rem"; // 300px / 17px
+  popoverRef.value.style.width = `${Math.max(buttonRect.width, 200)}px`;
+
+  // Calculate positions
+  let top = buttonRect.bottom + 12;
+  let left = buttonRect.left;
+
+  // Check if dropdown would go off bottom of screen
+  if (top + popoverRect.height > windowHeight - 20) {
+    // Position above the button
+    top = buttonRect.top - popoverRect.height - 12;
+    isPopoverAbove.value = true;
+  } else {
+    isPopoverAbove.value = false;
+  }
+
+  // Check if dropdown would go off right side of screen
+  if (left + popoverRect.width > windowWidth - 20) {
+    left = windowWidth - popoverRect.width - 20;
+  }
+
+  // Apply calculated positions
+  popoverRef.value.style.top = `${top}px`;
+  popoverRef.value.style.left = `${left}px`;
+};
+
+const openDropdown = async () => {
+  isOpen.value = true;
+
+  if (props.showOverlay) {
+    const overlay = createGlobalOverlay();
+    activeDropdownCount++;
+    // Force a reflow to ensure the transition works
+    overlay.offsetHeight;
+    overlay.style.opacity = "1";
+    overlay.style.pointerEvents = "auto";
+  }
+
+  if (containerRef.value) {
+    containerRef.value.style.zIndex = "10001";
+  }
+
+  await positionPopover();
+
+  // Add global click listener
+  document.addEventListener("click", handleClickOutside);
+  window.addEventListener("scroll", handleScroll, true);
+  window.addEventListener("resize", handleResize);
+};
+
+const closeDropdown = () => {
+  isOpen.value = false;
+  isPopoverAbove.value = false;
+  focusedItemIndex.value = -1;
+
+  if (props.showOverlay) {
+    activeDropdownCount--;
+    removeGlobalOverlay();
+  }
+
+  if (containerRef.value) {
+    containerRef.value.style.zIndex = "";
+  }
+
+  // Remove global listeners
+  document.removeEventListener("click", handleClickOutside);
+  window.removeEventListener("scroll", handleScroll, true);
+  window.removeEventListener("resize", handleResize);
+};
+
+const toggleDropdown = () => {
+  if (isOpen.value) {
+    closeDropdown();
+  } else {
+    openDropdown();
+  }
+};
+
+const selectItem = (item: DropdownItem) => {
+  if (item.disabled) return;
+
+  emit("update:modelValue", item);
+  emit("change", item);
+  closeDropdown();
+};
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (
+    containerRef.value &&
+    !containerRef.value.contains(event.target as Node)
+  ) {
+    closeDropdown();
+  }
+};
+
+const handleScroll = () => {
+  if (isOpen.value) {
+    positionPopover();
+  }
+};
+
+const handleResize = () => {
+  if (isOpen.value) {
+    positionPopover();
+  }
+};
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (
+    !isOpen.value &&
+    (event.key === "Enter" || event.key === " " || event.key === "ArrowDown")
+  ) {
+    event.preventDefault();
+    openDropdown();
+    return;
+  }
+
+  if (isOpen.value) {
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault();
+        closeDropdown();
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        focusNextItem();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        focusPreviousItem();
+        break;
+      case "Enter":
+        event.preventDefault();
+        selectFocusedItem();
+        break;
+    }
+  }
+};
+
+const focusNextItem = () => {
+  const enabledItems = props.items
+    .map((item, index) => ({ item, index }))
+    .filter(({ item }) => !item.disabled);
+
+  if (enabledItems.length === 0) return;
+
+  if (focusedItemIndex.value === -1) {
+    focusedItemIndex.value = enabledItems[0].index;
+  } else {
+    const currentEnabledIndex = enabledItems.findIndex(
+      ({ index }) => index === focusedItemIndex.value
+    );
+    const nextIndex = (currentEnabledIndex + 1) % enabledItems.length;
+    focusedItemIndex.value = enabledItems[nextIndex].index;
+  }
+};
+
+const focusPreviousItem = () => {
+  const enabledItems = props.items
+    .map((item, index) => ({ item, index }))
+    .filter(({ item }) => !item.disabled);
+
+  if (enabledItems.length === 0) return;
+
+  if (focusedItemIndex.value === -1) {
+    focusedItemIndex.value = enabledItems[enabledItems.length - 1].index;
+  } else {
+    const currentEnabledIndex = enabledItems.findIndex(
+      ({ index }) => index === focusedItemIndex.value
+    );
+    const prevIndex =
+      (currentEnabledIndex - 1 + enabledItems.length) % enabledItems.length;
+    focusedItemIndex.value = enabledItems[prevIndex].index;
+  }
+};
+
+const selectFocusedItem = () => {
+  if (
+    focusedItemIndex.value !== -1 &&
+    !props.items[focusedItemIndex.value].disabled
+  ) {
+    selectItem(props.items[focusedItemIndex.value]);
+  }
+};
+
+onUnmounted(() => {
+  if (isOpen.value) {
+    closeDropdown();
+  }
+});
+</script>
+
+<template>
+  <div :class="$style.container" ref="containerRef">
+    <div :class="$style.buttonWrapper" ref="buttonRef">
+      <Button
+        :title="displayText"
+        buttonStyle="secondary"
+        @click="toggleDropdown"
+        @keydown="handleKeyDown"
+        :aria-expanded="isOpen"
+        :aria-haspopup="true"
+        role="combobox"
+      />
+      <div
+        :class="$style.icon"
+        :style="{
+          transform: isOpen
+            ? isPopoverAbove
+              ? 'rotate(-90deg)'
+              : 'rotate(90deg)'
+            : 'rotate(0)',
+        }"
+      >
+        <ChevronRightIcon :color="iconColor" />
+      </div>
+    </div>
+
+    <Transition name="dropdown">
+      <div
+        v-if="isOpen"
+        :class="$style.popover"
+        ref="popoverRef"
+        role="listbox"
+        :aria-label="placeholder"
+      >
+        <div
+          v-for="(item, index) in items"
+          :key="item.id"
+          :class="[
+            $style.item,
+            {
+              [$style.selected]: isItemSelected(item),
+              [$style.disabled]: item.disabled,
+              [$style.focused]: index === focusedItemIndex,
+            },
+          ]"
+          @click="selectItem(item)"
+          @mouseenter="focusedItemIndex = index"
+          @mouseleave="focusedItemIndex = -1"
+          role="option"
+          :aria-selected="isItemSelected(item)"
+          :aria-disabled="item.disabled"
+        >
+          <span class="body">{{ item.title }}</span>
+          <span v-if="item.subtitle" :class="$style.itemSubtitle">{{
+            item.subtitle
+          }}</span>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style module>
+.container {
+  position: relative;
+  display: inline-block;
+}
+
+.buttonWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.buttonWrapper > :first-child {
+  padding-right: 1.7rem;
+}
+
+.icon {
+  position: absolute;
+  right: 0;
+  transform: translateY(-50%);
+  margin-right: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0.6;
+  transition: transform 0.2s ease;
+}
+
+.icon > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.popover {
+  position: fixed;
+  background-color: var(--dropdown-popover-bg);
+  border-radius: 0.35rem; /* 6px / 17px */
+  box-shadow: 0px 1px 0px 0px var(--dropdown-shadow-dark),
+    inset 0px 1px 0px 0px var(--dropdown-shadow-light);
+  overflow-y: auto;
+  z-index: 10002;
+  border: var(--dropdown-popover-border);
+}
+
+.item {
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  padding-top: 0.471rem;
+  padding-bottom: 0.471rem;
+  border-bottom: 1px solid var(--dropdown-item-border);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.12rem; /* 2px / 17px */
+}
+
+.item:first-child {
+  border-top-left-radius: 0.35rem; /* 6px / 17px */
+  border-top-right-radius: 0.35rem; /* 6px / 17px */
+}
+
+.item:last-child {
+  border-bottom-left-radius: 0.35rem; /* 6px / 17px */
+  border-bottom-right-radius: 0.35rem; /* 6px / 17px */
+  border-bottom: none;
+}
+
+.item:hover:not(.disabled) {
+  background-color: var(--dropdown-item-hover-bg);
+}
+
+.item.focused:not(.disabled) {
+  background-color: var(--dropdown-item-focused-bg);
+}
+
+.item.selected {
+  background-color: var(--dropdown-item-selected-bg);
+  font-weight: 500;
+}
+
+.item.selected:hover:not(.disabled) {
+  background-color: var(--dropdown-item-selected-hover-bg);
+}
+
+.item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.itemSubtitle {
+  color: var(--dropdown-item-subtitle);
+  font-size: 0.71rem; /* 12px / 17px */
+  line-height: 1.4;
+}
+
+/* Dropdown transition */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.dropdown-enter-from {
+  opacity: 0;
+  transform: translateY(-0.47rem); /* -8px / 17px */
+}
+
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-0.47rem); /* -8px / 17px */
+}
+</style>