@umbra.ui/core 0.1.26 → 0.2.0

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

@@ -7,6 +7,7 @@ import {
   watch,
   Teleport,
   computed,
+  type CSSProperties,
 } from "vue";
 import {
   offset,
@@ -25,7 +26,7 @@ export interface PopoverProps {
   /**
    * Controls whether the popover is visible
    */
-  modelValue: boolean;
+  modelValue?: boolean;
   /**
    * Placement of the popover relative to the trigger
    * @default 'bottom'
@@ -56,6 +57,11 @@ export interface PopoverProps {
    * @default 0.5
    */
   overlayOpacity?: number;
+  /**
+   * Blur strength for overlay backdrop (0 = no blur)
+   * @default 0
+   */
+  overlayBlur?: number;
   /**
    * Animation duration in seconds
    * @default 0.2
@@ -96,6 +102,10 @@ export interface PopoverProps {
    * @default 0
    */
   hoverHideDelay?: number;
+  /**
+   * Background color of the popover
+   */
+  popoverBackground?: string;
 }
 
 const props = withDefaults(defineProps<PopoverProps>(), {
@@ -104,6 +114,7 @@ const props = withDefaults(defineProps<PopoverProps>(), {
   dismissOnClickOutside: true,
   showArrow: true,
   showOverlay: false,
+  overlayBlur: 0,
   overlayOpacity: 0.5,
   animationDuration: 0.2,
   zIndex: 1000,
@@ -113,6 +124,7 @@ const props = withDefaults(defineProps<PopoverProps>(), {
   trigger: "click",
   hoverShowDelay: 0,
   hoverHideDelay: 0,
+  popoverBackground: "var(--popover-bg)",
 });
 
 const emit = defineEmits<{
@@ -140,13 +152,19 @@ const popoverStyles = computed(() => ({
   maxWidth: props.maxWidth,
   maxHeight: props.maxHeight,
   zIndex: props.zIndex + 1,
+  backgroundColor: props.popoverBackground,
 }));
 
 const overlayStyles = computed(() => ({
-  opacity: props.overlayOpacity,
   zIndex: props.zIndex,
 }));
 
+const triggerStyles = computed<CSSProperties>(() =>
+  props.showOverlay && isVisible.value
+    ? { position: "relative", zIndex: props.zIndex + 1 }
+    : {}
+);
+
 // Positioning
 const updatePosition = async () => {
   if (!triggerRef.value || !popoverRef.value) return;
@@ -196,6 +214,81 @@ const updatePosition = async () => {
   }
 };
 
+const enableSmoothResize = () => {
+  if (!popoverRef.value) return;
+
+  let lastHeight = popoverRef.value.offsetHeight;
+  let isFirstRun = true;
+
+  const resizeObserver = new ResizeObserver((entries) => {
+    // Skip the initial observation
+    if (isFirstRun) {
+      isFirstRun = false;
+      return;
+    }
+
+    for (const entry of entries) {
+      if (!popoverRef.value) continue;
+
+      // Get the content wrapper's height
+      const contentWrapper = popoverRef.value.lastElementChild as HTMLElement;
+      if (!contentWrapper) continue;
+
+      const newContentHeight = contentWrapper.offsetHeight;
+
+      // Calculate total height including padding/borders
+      const computedStyle = window.getComputedStyle(popoverRef.value);
+      const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+      const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+      const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
+      const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
+
+      const newHeight =
+        newContentHeight +
+        paddingTop +
+        paddingBottom +
+        borderTop +
+        borderBottom;
+
+      // Only animate if height actually changed significantly
+      if (Math.abs(lastHeight - newHeight) > 1) {
+        // Kill any existing animations on this element
+        gsap.killTweensOf(popoverRef.value);
+
+        // Animate height change
+        gsap.fromTo(
+          popoverRef.value,
+          {
+            height: lastHeight,
+          },
+          {
+            height: newHeight,
+            duration: 0.3,
+            ease: "power2.inOut",
+            onComplete: () => {
+              lastHeight = newHeight;
+              updatePosition();
+            },
+          }
+        );
+
+        break; // Only process one change at a time
+      }
+    }
+  });
+
+  // Find the popoverContent div
+  const contentWrapper = popoverRef.value.lastElementChild as HTMLElement;
+  if (contentWrapper) {
+    // Only observe direct children, not the wrapper itself
+    Array.from(contentWrapper.children).forEach((child) => {
+      resizeObserver.observe(child as HTMLElement);
+    });
+  }
+
+  return resizeObserver;
+};
+
 // Animation functions
 const open = async () => {
   if (isAnimating.value || isVisible.value) return;
@@ -258,10 +351,10 @@ const open = async () => {
   // 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
+    top: { x: 0, y: 8 },
+    bottom: { x: 0, y: -8 },
+    left: { x: 8, y: 0 },
+    right: { x: -8, y: 0 },
   }[side] || { x: 0, y: -8 };
 
   gsap.set(popoverRef.value, {
@@ -288,6 +381,13 @@ const open = async () => {
     onComplete: () => {
       isAnimating.value = false;
       emit("after-enter");
+
+      // Set up smooth resizing AFTER animation completes
+      if (popoverRef.value) {
+        const resizeObserver = enableSmoothResize();
+        // Store it for cleanup
+        (popoverRef.value as any)._resizeObserver = resizeObserver;
+      }
     },
   });
 
@@ -304,7 +404,7 @@ const open = async () => {
     tl.to(
       overlayRef.value,
       {
-        opacity: 1,
+        opacity: props.overlayBlur > 0 ? 1 : props.overlayOpacity,
         duration: props.animationDuration,
         ease: "power2.out",
       },
@@ -320,6 +420,12 @@ const close = async () => {
   emit("update:modelValue", false);
   emit("close");
 
+  // Clean up resize observer
+  if (popoverRef.value && (popoverRef.value as any)._resizeObserver) {
+    (popoverRef.value as any)._resizeObserver.disconnect();
+    delete (popoverRef.value as any)._resizeObserver;
+  }
+
   if (!popoverRef.value) return;
 
   // Animate out
@@ -431,11 +537,12 @@ const handleEscape = (event: KeyboardEvent) => {
 watch(
   () => props.modelValue,
   (newValue) => {
-    if (newValue) {
+    if (newValue === true) {
       open();
-    } else {
+    } else if (newValue === false) {
       close();
     }
+    // When undefined, let the trigger handle it
   }
 );
 
@@ -472,6 +579,7 @@ defineExpose({
     <div
       ref="triggerRef"
       :class="$style.trigger"
+      :style="triggerStyles"
       @click="handleTriggerClick"
       @mouseenter="handleTriggerMouseEnter"
       @mouseleave="handleTriggerMouseLeave"
@@ -485,7 +593,10 @@ defineExpose({
       <div
         v-if="showOverlay && isVisible"
         ref="overlayRef"
-        :class="$style.overlay"
+        :class="[
+          $style.overlay,
+          overlayBlur > 0 ? $style.overlayBlur : $style.overlayDim,
+        ]"
         :style="overlayStyles"
         @click="handleClickOutside"
       />
@@ -502,8 +613,10 @@ defineExpose({
         <!-- Arrow -->
         <div v-if="showArrow" ref="arrowRef" :class="$style.arrow" />
 
-        <!-- Content -->
-        <slot />
+        <!-- Content wrapper for proper sizing -->
+        <div :class="$style.popoverContent">
+          <slot />
+        </div>
       </div>
     </Teleport>
   </div>
@@ -522,15 +635,23 @@ defineExpose({
 .overlay {
   position: fixed;
   inset: 0;
-  background-color: var(--popover-overlay-bg);
   will-change: opacity;
 }
 
+.overlayBlur {
+  background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent for blur effect */
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.overlayDim {
+  background-color: var(--popover-overlay-bg); /* Darker for dim effect */
+}
+
 .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);
@@ -538,6 +659,17 @@ defineExpose({
   will-change: transform, opacity;
   transform-origin: top center;
   overflow: hidden;
+  will-change: transform, opacity, height;
+  height: auto;
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.popoverContent {
+  width: fit-content;
+  height: fit-content;
+  max-height: 80vh;
+  overflow: hidden;
 }
 
 .arrow {

package/src/components/models/Popover/theme.css

@@ -21,12 +21,7 @@
   ); /* blackA3 - subtle shadow for light mode */
 
   /* Popover overlay colors */
-  --popover-overlay-bg: rgba(
-    0,
-    0,
-    0,
-    0.5
-  ); /* blackA8 - overlay for light mode */
+  --popover-overlay-bg: black; /* blackA8 - overlay for light mode */
 }
 
 /* Dark theme */
@@ -48,5 +43,5 @@
   --popover-arrow-shadow: rgba(0, 0, 0, 0.05); /* Original dark mode value */
 
   /* Popover overlay colors */
-  --popover-overlay-bg: rgba(0, 0, 0, 0.5); /* Original dark mode value */
+  --popover-overlay-bg: black; /* Original dark mode value */
 }

package/src/components/navigation/adaptive/AdaptiveLayout.vue

@@ -1,4 +1,4 @@
-<!-- AdaptiveLayout2.vue -->
+<!-- AdaptiveLayout.vue -->
 <script setup lang="ts">
 import {
   markRaw,
@@ -31,6 +31,7 @@ export interface Props {
   canHideViews?: boolean;
   canResizeViews?: boolean;
   layout?: ViewLayout;
+  height?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -41,12 +42,17 @@ const props = withDefaults(defineProps<Props>(), {
   canHideViews: true,
   canResizeViews: true,
   layout: "adaptive",
+  height: "100%",
 });
 
 // View state management
 const layoutState = useAdaptiveLayoutState(props.instanceKey);
 const views = layoutState.views;
 
+const allowViewResize = computed(() => {
+  return props.canResizeViews && props.layout !== "navstack";
+});
+
 // Initialize views with the initial data
 views.value = props.initialViews.map((view) => ({
   ...view,
@@ -68,6 +74,20 @@ onMounted(() => {
     push,
     pop,
   });
+  switch (props.layout) {
+    case "navstack":
+      setupForBreakpoint(null, "mobile");
+      break;
+    case "slideover":
+      setupForBreakpoint(null, "tablet");
+      break;
+    case "splitview":
+      setupForBreakpoint(null, "desktop");
+      break;
+    default:
+      break;
+  }
+  setupForBreakpoint(null, "tablet");
 });
 
 // Container ref and monitoring
@@ -152,13 +172,13 @@ const replace = (id: string, view: View, animated: boolean = true) => {
 const show = (id: string, animated: boolean = true) => {
   switch (props.layout) {
     case "splitview":
-      splitViewShow(id);
+      splitViewShow(id, animated);
       return;
     case "slideover":
-      slideoverShow(id);
+      slideoverShow(id, animated);
       return;
     case "navstack":
-      navstackShow(id);
+      navstackShow(id, animated);
       return;
   }
   switch (monitor.currentBreakpoint.value) {
@@ -411,6 +431,7 @@ const getViewMaxWidthOnscreen = (view: InternalView): string => {
       '--padding': props.padding,
       '--gap': props.gap,
       '--width': `${monitor.dimensions.value.width}px`,
+      height: props.height,
     }"
   >
     <div :id="getOnscreenId()" :class="$style.onscreen">
@@ -458,7 +479,7 @@ const getViewMaxWidthOnscreen = (view: InternalView): string => {
 
         <!-- Resize handle (not on last element) -->
         <div
-          v-if="props.canResizeViews && index < onScreenViews.length - 1"
+          v-if="allowViewResize && index < onScreenViews.length - 1"
           :class="$style.resizeHandle"
           @mousedown="startResize(view.id, $event)"
         >

package/src/components/navigation/adaptive/useViewAnimation.ts

@@ -29,7 +29,8 @@ export const useViewAnimation = (
   const animate = async (
     targets: HTMLElement[],
     manipulateDOMFn: () => void,
-    updateDataFn: () => void
+    updateDataFn: () => void,
+    animated: boolean = true
   ) => {
     if (animationInProgress.value) {
       console.warn("Animation already in progress");
@@ -43,17 +44,24 @@ export const useViewAnimation = (
     manipulateDOMFn();
 
     // Step 3: Animate
-    return Flip.from(state, {
-      duration: 0.3,
-      ease: "power1.inOut",
-      absolute: true,
-      onComplete: () => {
-        animationInProgress.value = false;
-      },
-    }).then(() => {
-      // Step 5: Update Data
+    if (animated) {
+      return Flip.from(state, {
+        duration: 0.3,
+        ease: "power1.inOut",
+        absolute: true,
+        onComplete: () => {
+          animationInProgress.value = false;
+        },
+      }).then(() => {
+        // Step 5: Update Data
+        updateDataFn();
+      });
+    } else {
+      // Update Data
       updateDataFn();
-    });
+      // Step 5: Complete
+      animationInProgress.value = false;
+    }
   };
 
   /*
@@ -235,10 +243,10 @@ export const useViewAnimation = (
 
   type NavigationType = "push" | "pop" | "show" | "hide";
 
-  const splitViewShow = async (id: string) => {
+  const splitViewShow = async (id: string, animated: boolean = true) => {
     const view = views.value.find((v) => v.id === id);
     if (view?.location === "onscreen") return;
-    await splitViewNavigate(id, "show");
+    await splitViewNavigate(id, "show", animated);
   };
 
   const splitViewHide = async (id: string) => {
@@ -287,7 +295,11 @@ export const useViewAnimation = (
     }
   };
 
-  const splitViewNavigate = async (id: string, type: NavigationType) => {
+  const splitViewNavigate = async (
+    id: string,
+    type: NavigationType,
+    animated: boolean = true
+  ) => {
     const elements = getViewElements();
 
     // Get the appropriate view elements based on type
@@ -439,7 +451,7 @@ export const useViewAnimation = (
       }
     };
 
-    await animate(elements, manipulateDOM, updateData);
+    await animate(elements, manipulateDOM, updateData, animated);
   };
 
   /*
@@ -451,7 +463,7 @@ export const useViewAnimation = (
   - pop dismisses a view from the overlay to the left. 
    */
 
-  const slideoverShow = async (id: string) => {
+  const slideoverShow = async (id: string, animated: boolean = true) => {
     // Get the view with the given id AND all views after it that have location "leading"
     const currentView = views.value.find((v) => v.id === id);
     if (currentView?.location === "onscreen") {
@@ -607,9 +619,9 @@ export const useViewAnimation = (
   - pop dismisses current view to the right, and pushes preceeding view fullscreen from the left. 
    */
 
-  const navstackShow = async (id: string) => {
+  const navstackShow = async (id: string, animated: boolean = true) => {
     const index = views.value.findIndex((view) => view.id === id);
-    navstackNavigateTo(index);
+    navstackNavigateTo(index, animated);
   };
 
   const navstackPush = async () => {
@@ -626,7 +638,10 @@ export const useViewAnimation = (
     navstackNavigateTo(currentIndex - 1);
   };
 
-  const navstackNavigateTo = async (index: number) => {
+  const navstackNavigateTo = async (
+    index: number,
+    animated: boolean = true
+  ) => {
     const onscreen = document.getElementById(getOnscreenId());
     const offscreenLeading = document.getElementById(getOffscreenLeadingId());
     const offscreenTrailing = document.getElementById(getOffscreenTrailingId());
@@ -685,7 +700,7 @@ export const useViewAnimation = (
       currentView.style.width = "";
       nextView.style.width = "";
     };
-    await animate(targets, manipulateDOM, updateData);
+    await animate(targets, manipulateDOM, updateData, animated);
   };
 
   /*

package/src/index.ts

@@ -1,3 +1,6 @@
+import "@umbra.ui/colors/semantic-colors.css";
+import "@umbra.ui/typography/typography.css";
+
 // Core package exports
 export * from "@umbra.ui/colors";
 export * from "@umbra.ui/icons";