@umbra.ui/core 0.1.0

package/src/components/menus/ActionMenu/theme.css

@@ -0,0 +1,93 @@
+/* Light theme using Colors */
+:root {
+  /* ActionMenu popup colors */
+  --actionmenu-popup-bg: #ffffff; /* white - light background for light mode */
+  --actionmenu-popup-border: 1px solid rgba(0, 0, 0, 0.1); /* border for light mode */
+  --actionmenu-popup-shadow: transparent;
+  --actionmenu-popup-inset-shadow: rgba(
+    255,
+    255,
+    255,
+    0.8
+  ); /* whiteA8 - inset highlight for light mode */
+
+  /* ActionMenu item colors */
+  --actionmenu-item-bg: #ffffff; /* white - light background for light mode */
+  --actionmenu-item-hover-bg: rgba(
+    0,
+    0,
+    0,
+    0.05
+  ); /* blackA6 - hover background for light mode */
+  --actionmenu-item-border: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA6 - border for light mode */
+  --actionmenu-item-text: #1f2937; /* gray8 - dark text for light mode */
+  --actionmenu-item-icon: #6b7280; /* gray5 - icon color for light mode */
+
+  /* ActionMenu destructive colors */
+  --actionmenu-destructive-text: #dc2626; /* red6 - destructive text for light mode */
+  --actionmenu-destructive-icon: #dc2626; /* red6 - destructive icon for light mode */
+
+  /* ActionMenu overlay colors */
+  --actionmenu-overlay-bg: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA8 - lighter overlay for light mode */
+  --actionmenu-overlay-blur-bg: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA6 - blur overlay for light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* ActionMenu popup colors */
+  --actionmenu-popup-bg: #484848; /* Original dark mode value */
+  --actionmenu-popup-border: none; /* no border for dark mode */
+  --actionmenu-popup-shadow: rgba(0, 0, 0, 0.21); /* Original dark mode value */
+  --actionmenu-popup-inset-shadow: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /* Original dark mode value */
+
+  /* ActionMenu item colors */
+  --actionmenu-item-bg: #484848; /* Original dark mode value */
+  --actionmenu-item-hover-bg: rgba(
+    255,
+    255,
+    255,
+    0.05
+  ); /* Original dark mode value */
+  --actionmenu-item-border: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /* Original dark mode value */
+  --actionmenu-item-text: #eeeeee; /* Original dark mode value */
+  --actionmenu-item-icon: #eeeeee; /* Original dark mode value */
+
+  /* ActionMenu destructive colors */
+  --actionmenu-destructive-text: #e5484d; /* Original dark mode value */
+  --actionmenu-destructive-icon: #e5484d; /* Original dark mode value */
+
+  /* ActionMenu overlay colors */
+  --actionmenu-overlay-bg: rgba(0, 0, 0, 0.7); /* Original dark mode value */
+  --actionmenu-overlay-blur-bg: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* Original dark mode value */
+}

package/src/components/models/Popover/Popover.vue

@@ -0,0 +1,551 @@
+<script setup lang="ts">
+import {
+  ref,
+  onMounted,
+  nextTick,
+  onUnmounted,
+  watch,
+  Teleport,
+  computed,
+} from "vue";
+import {
+  offset,
+  flip,
+  shift,
+  arrow,
+  computePosition,
+  autoUpdate,
+  type Placement,
+  type Middleware,
+} from "@floating-ui/vue";
+import gsap from "gsap";
+import "./theme.css";
+
+export interface PopoverProps {
+  /**
+   * Controls whether the popover is visible
+   */
+  modelValue: boolean;
+  /**
+   * Placement of the popover relative to the trigger
+   * @default 'bottom'
+   */
+  placement?: Placement;
+  /**
+   * Offset from the trigger element
+   * @default 8
+   */
+  offsetDistance?: number;
+  /**
+   * Whether clicking outside closes the popover
+   * @default true
+   */
+  dismissOnClickOutside?: boolean;
+  /**
+   * Whether to show an arrow pointing to the trigger
+   * @default true
+   */
+  showArrow?: boolean;
+  /**
+   * Whether to show an overlay backdrop
+   * @default false
+   */
+  showOverlay?: boolean;
+  /**
+   * Overlay opacity (0-1)
+   * @default 0.5
+   */
+  overlayOpacity?: number;
+  /**
+   * Animation duration in seconds
+   * @default 0.2
+   */
+  animationDuration?: number;
+  /**
+   * Z-index for the popover
+   * @default 1000
+   */
+  zIndex?: number;
+  /**
+   * Padding from viewport edges
+   * @default 16
+   */
+  viewportPadding?: number;
+  /**
+   * Maximum width of the popover
+   * @default 'none'
+   */
+  maxWidth?: string;
+  /**
+   * Maximum height of the popover
+   * @default 'none'
+   */
+  maxHeight?: string;
+  /**
+   * Trigger event: 'click' or 'hover'
+   * @default 'click'
+   */
+  trigger?: "click" | "hover";
+  /**
+   * Delay before showing on hover (ms)
+   * @default 0
+   */
+  hoverShowDelay?: number;
+  /**
+   * Delay before hiding on hover (ms)
+   * @default 0
+   */
+  hoverHideDelay?: number;
+}
+
+const props = withDefaults(defineProps<PopoverProps>(), {
+  placement: "bottom",
+  offsetDistance: 8,
+  dismissOnClickOutside: true,
+  showArrow: true,
+  showOverlay: false,
+  overlayOpacity: 0.5,
+  animationDuration: 0.2,
+  zIndex: 1000,
+  viewportPadding: 16,
+  maxWidth: "none",
+  maxHeight: "none",
+  trigger: "click",
+  hoverShowDelay: 0,
+  hoverHideDelay: 0,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  open: [];
+  close: [];
+  "after-enter": [];
+  "after-leave": [];
+}>();
+
+// Refs
+const isVisible = ref(false);
+const isAnimating = ref(false);
+const triggerRef = ref<HTMLElement>();
+const popoverRef = ref<HTMLElement>();
+const arrowRef = ref<HTMLElement>();
+const overlayRef = ref<HTMLElement>();
+
+// Store cleanup function
+let cleanupAutoUpdate: (() => void) | null = null;
+let hoverTimeout: number | null = null;
+
+// Computed styles
+const popoverStyles = computed(() => ({
+  maxWidth: props.maxWidth,
+  maxHeight: props.maxHeight,
+  zIndex: props.zIndex + 1,
+}));
+
+const overlayStyles = computed(() => ({
+  opacity: props.overlayOpacity,
+  zIndex: props.zIndex,
+}));
+
+// Positioning
+const updatePosition = async () => {
+  if (!triggerRef.value || !popoverRef.value) return;
+
+  const middleware: Middleware[] = [
+    offset(props.offsetDistance),
+    flip(),
+    shift({ padding: props.viewportPadding }),
+  ];
+
+  if (props.showArrow && arrowRef.value) {
+    middleware.push(arrow({ element: arrowRef.value }));
+  }
+
+  const { x, y, placement, middlewareData } = await computePosition(
+    triggerRef.value,
+    popoverRef.value,
+    {
+      placement: props.placement,
+      middleware,
+    }
+  );
+
+  Object.assign(popoverRef.value.style, {
+    left: `${x}px`,
+    top: `${y}px`,
+  });
+
+  // Position arrow
+  if (props.showArrow && arrowRef.value && middlewareData.arrow) {
+    const { x: arrowX, y: arrowY } = middlewareData.arrow;
+
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right",
+    }[placement.split("-")[0]];
+
+    Object.assign(arrowRef.value.style, {
+      left: arrowX != null ? `${arrowX}px` : "",
+      top: arrowY != null ? `${arrowY}px` : "",
+      right: "",
+      bottom: "",
+      [staticSide!]: "-4px",
+    });
+  }
+};
+
+// Animation functions
+const open = async () => {
+  if (isAnimating.value || isVisible.value) return;
+
+  isAnimating.value = true;
+  isVisible.value = true;
+  emit("open");
+
+  await nextTick();
+
+  if (!popoverRef.value) return;
+
+  // First, position the popover to determine actual placement
+  let actualPlacement = props.placement;
+
+  if (triggerRef.value && popoverRef.value) {
+    const middleware: Middleware[] = [
+      offset(props.offsetDistance),
+      flip(),
+      shift({ padding: props.viewportPadding }),
+    ];
+
+    if (props.showArrow && arrowRef.value) {
+      middleware.push(arrow({ element: arrowRef.value }));
+    }
+
+    const result = await computePosition(triggerRef.value, popoverRef.value, {
+      placement: props.placement,
+      middleware,
+    });
+
+    actualPlacement = result.placement;
+
+    // Apply the position
+    Object.assign(popoverRef.value.style, {
+      left: `${result.x}px`,
+      top: `${result.y}px`,
+    });
+
+    // Position arrow if needed
+    if (props.showArrow && arrowRef.value && result.middlewareData.arrow) {
+      const { x: arrowX, y: arrowY } = result.middlewareData.arrow;
+      const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+      }[actualPlacement.split("-")[0]];
+
+      Object.assign(arrowRef.value.style, {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide!]: "-4px",
+      });
+    }
+  }
+
+  // NOW set initial state based on actual placement
+  const side = actualPlacement.split("-")[0];
+  const initialOffset = {
+    top: { x: 0, y: 8 }, // slides up from below
+    bottom: { x: 0, y: -8 }, // slides down from above
+    left: { x: 8, y: 0 }, // slides left from right
+    right: { x: -8, y: 0 }, // slides right from left
+  }[side] || { x: 0, y: -8 };
+
+  gsap.set(popoverRef.value, {
+    opacity: 0,
+    scale: 0.95,
+    ...initialOffset,
+  });
+
+  if (overlayRef.value) {
+    gsap.set(overlayRef.value, { opacity: 0 });
+  }
+
+  // Start auto-update
+  if (triggerRef.value && popoverRef.value) {
+    cleanupAutoUpdate = autoUpdate(
+      triggerRef.value,
+      popoverRef.value,
+      updatePosition
+    );
+  }
+
+  // Animate in
+  const tl = gsap.timeline({
+    onComplete: () => {
+      isAnimating.value = false;
+      emit("after-enter");
+    },
+  });
+
+  tl.to(popoverRef.value, {
+    opacity: 1,
+    scale: 1,
+    x: 0,
+    y: 0,
+    duration: props.animationDuration,
+    ease: "back.out(1.7)",
+  });
+
+  if (overlayRef.value) {
+    tl.to(
+      overlayRef.value,
+      {
+        opacity: 1,
+        duration: props.animationDuration,
+        ease: "power2.out",
+      },
+      0
+    );
+  }
+};
+
+const close = async () => {
+  if (isAnimating.value || !isVisible.value) return;
+
+  isAnimating.value = true;
+  emit("update:modelValue", false);
+  emit("close");
+
+  if (!popoverRef.value) return;
+
+  // Animate out
+  const tl = gsap.timeline({
+    onComplete: () => {
+      isVisible.value = false;
+      isAnimating.value = false;
+      if (cleanupAutoUpdate) {
+        cleanupAutoUpdate();
+        cleanupAutoUpdate = null;
+      }
+      emit("after-leave");
+    },
+  });
+
+  tl.to(popoverRef.value, {
+    opacity: 0,
+    scale: 0.95,
+    y: -4,
+    duration: props.animationDuration * 0.8,
+    ease: "power2.in",
+  });
+
+  if (overlayRef.value) {
+    tl.to(
+      overlayRef.value,
+      {
+        opacity: 0,
+        duration: props.animationDuration * 0.8,
+        ease: "power2.in",
+      },
+      0
+    );
+  }
+};
+
+// Event handlers
+const handleTriggerClick = () => {
+  if (props.trigger === "click") {
+    if (isVisible.value) {
+      close();
+    } else {
+      open();
+    }
+  }
+};
+
+const handleTriggerMouseEnter = () => {
+  if (props.trigger === "hover") {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+    }
+    hoverTimeout = window.setTimeout(() => {
+      open();
+    }, props.hoverShowDelay);
+  }
+};
+
+const handleTriggerMouseLeave = () => {
+  if (props.trigger === "hover") {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+    }
+    hoverTimeout = window.setTimeout(() => {
+      close();
+    }, props.hoverHideDelay);
+  }
+};
+
+const handlePopoverMouseEnter = () => {
+  if (props.trigger === "hover" && hoverTimeout) {
+    clearTimeout(hoverTimeout);
+  }
+};
+
+const handlePopoverMouseLeave = () => {
+  if (props.trigger === "hover") {
+    hoverTimeout = window.setTimeout(() => {
+      close();
+    }, props.hoverHideDelay);
+  }
+};
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (!props.dismissOnClickOutside || !isVisible.value) return;
+
+  const target = event.target as Node;
+  if (
+    triggerRef.value?.contains(target) ||
+    popoverRef.value?.contains(target)
+  ) {
+    return;
+  }
+
+  close();
+};
+
+const handleEscape = (event: KeyboardEvent) => {
+  if (
+    event.key === "Escape" &&
+    isVisible.value &&
+    props.dismissOnClickOutside
+  ) {
+    close();
+  }
+};
+
+// Watchers
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue) {
+      open();
+    } else {
+      close();
+    }
+  }
+);
+
+// Lifecycle
+onMounted(() => {
+  document.addEventListener("click", handleClickOutside, true);
+  document.addEventListener("keydown", handleEscape);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside, true);
+  document.removeEventListener("keydown", handleEscape);
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout);
+  }
+});
+
+// Expose API
+defineExpose({
+  open,
+  close,
+  isVisible,
+  isAnimating,
+  updatePosition,
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <!-- Trigger slot -->
+    <div
+      ref="triggerRef"
+      :class="$style.trigger"
+      @click="handleTriggerClick"
+      @mouseenter="handleTriggerMouseEnter"
+      @mouseleave="handleTriggerMouseLeave"
+    >
+      <slot name="trigger" />
+    </div>
+
+    <!-- Popover -->
+    <Teleport to="body">
+      <!-- Overlay -->
+      <div
+        v-if="showOverlay && isVisible"
+        ref="overlayRef"
+        :class="$style.overlay"
+        :style="overlayStyles"
+        @click="handleClickOutside"
+      />
+
+      <!-- Popover content -->
+      <div
+        v-if="isVisible"
+        ref="popoverRef"
+        :class="$style.popover"
+        :style="popoverStyles"
+        @mouseenter="handlePopoverMouseEnter"
+        @mouseleave="handlePopoverMouseLeave"
+      >
+        <!-- Arrow -->
+        <div v-if="showArrow" ref="arrowRef" :class="$style.arrow" />
+
+        <!-- Content -->
+        <slot />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: inline-block;
+}
+
+.trigger {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--popover-overlay-bg);
+  will-change: opacity;
+}
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--popover-bg);
+  border-radius: 0.353rem;
+  box-shadow: 0px 1px 0px 0px var(--popover-shadow),
+    inset 0px 1px 0px 0px var(--popover-inset-shadow);
+  border: var(--popover-border);
+  will-change: transform, opacity;
+  transform-origin: top center;
+  overflow: hidden;
+}
+
+.arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--popover-arrow-bg);
+  transform: rotate(45deg);
+  box-shadow: -1px -1px 1px var(--popover-arrow-shadow);
+}
+</style>