@flightlesslabs/dodo-ui 0.11.0 → 0.12.0

package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte

@@ -32,6 +32,8 @@
     lockPoistions?: boolean;
     /** Popper Height For Vertical Position, default 300 */
     popperHeightForVerticalPosition?: number;
+    /** Full width Popper? */
+    fullWidth?: boolean;
   }
 </script>
 
@@ -50,9 +52,15 @@
     popupOffsetY: offsetY = 12,
     popperHeightForVerticalPosition = 100,
     lockPoistions = false,
+    fullWidth = false,
   }: PopperPopupProps = $props();
 
-  const popperWidth = $derived(width || '100%');
+  let popupLocation = $state<DOMRect>();
+
+  const fullWidthInPixels = $derived(
+    fullWidth && popperLocation?.width ? `${popperLocation?.width}px` : '',
+  );
+  const popperWidth = $derived(width || fullWidthInPixels);
   const popupMaxHeight = $derived(maxHeight || '400px');
 
   let left = $state<number | null>(null);
@@ -60,20 +68,39 @@
   let top = $state<number | null>(null);
   let bottom = $state<number | null>(null);
 
+  function capturePopupLocation() {
+    if (!ref) {
+      return;
+    }
+
+    popupLocation = ref.getBoundingClientRect();
+  }
+
+  $effect(() => {
+    if (!ref) {
+      return;
+    }
+
+    capturePopupLocation();
+
+    window.addEventListener('resize', capturePopupLocation);
+
+    return () => {
+      window.removeEventListener('resize', capturePopupLocation);
+    };
+  });
+
   $effect(() => {
     const values = getPopupPosition({
       positionX,
       positionY,
-      height: popperLocation?.height || 0,
-      width: popperLocation?.width || 0,
-      top: popperLocation?.top || 0,
-      bottom: popperLocation?.bottom || 0,
-      left: popperLocation?.left || 0,
-      right: popperLocation?.right || 0,
       offsetX: offsetX,
       offsetY: offsetY,
       popperHeight: popperHeightForVerticalPosition,
       lockPoistions,
+      popperLocation,
+      popupLocation,
+      fullWidth,
     });
 
     left = values.left;
@@ -91,12 +118,11 @@
     className,
   ].join(' ')}
   bind:this={ref}
-  style={`width: ${popperWidth};
+  style={`${popperWidth ? `width: ${popperWidth};` : ''}
   ${left !== null ? `left: ${left}px;` : ''}
   ${right !== null ? `right: ${right}px;` : ''}
   ${top !== null ? `top: ${top}px;` : ''}
   ${bottom !== null ? `bottom: ${bottom}px;` : ''}
-  ${positionX === 'center' ? `margin: auto;` : ''}
   `}
 >
   <Paper shadow={3} {...paperProps}>
@@ -110,7 +136,7 @@
 
 <style lang="scss">
   .dodo-ui-PopperPopup {
-    position: absolute;
+    position: fixed;
     z-index: var(--dodo-ui-z-index-4);
 
     section {

package/src/lib/stories/developer tools/components/Popper/PopperPopup/utils/getPopupPosition.ts

@@ -4,16 +4,13 @@ import type { PositionX, PositionY } from '$lib/types/position.js';
 export interface GetPopupPositionProps {
   positionX: PositionX;
   positionY: PositionY;
-  height: number;
-  width: number;
-  top: number;
-  bottom: number;
-  left: number;
-  right: number;
   offsetX?: number;
   offsetY?: number;
   popperHeight: number;
   lockPoistions: boolean;
+  popperLocation?: DOMRect;
+  popupLocation?: DOMRect;
+  fullWidth?: boolean;
 }
 
 export function getPopupPosition(props: GetPopupPositionProps) {
@@ -32,52 +29,69 @@ export function getPopupPosition(props: GetPopupPositionProps) {
     };
   }
 
-  const innerHeight = window.innerHeight;
-
-  const gapBottom = innerHeight - props.bottom;
-  const popperHeight = props.popperHeight;
+  const POPPER_LEFT = props.popperLocation?.left || 0;
+  const POPPER_TOP = props.popperLocation?.top || 0;
+  const POPPER_BOTTOM = props.popperLocation?.bottom || 0;
+  const POPPER_HEIGHT = props.popperLocation?.height || 0;
+  const POPPER_WIDTH = props.popperLocation?.width || 0;
 
   const offsetX = props.offsetX ? props.offsetX : 0;
   const offsetY = props.offsetY ? props.offsetY : 0;
 
-  const positionX = props.positionX;
+  const POPUP_WIDTH = props.popupLocation?.width || 0;
+
+  const WIDTH_DIFF = POPPER_WIDTH - POPUP_WIDTH;
+
+  const innerHeight = window.innerHeight;
+  const gapBottom = innerHeight - POPPER_BOTTOM;
+
   let positionY = props.positionY;
 
+  // Adjust position if there is not enough space to draw it.
   if (!props.lockPoistions) {
-    if (positionY === 'top' && props.top < popperHeight + offsetY) {
+    if (positionY === 'top' && POPPER_TOP < POPPER_HEIGHT + offsetY) {
       positionY = 'bottom';
-    } else if (positionY === 'bottom' && gapBottom < popperHeight + offsetY) {
+    } else if (positionY === 'bottom' && gapBottom < POPPER_HEIGHT + offsetY) {
       positionY = 'top';
     }
   }
 
-  switch (positionX) {
-    case 'left':
-      left = offsetX;
-      right = null;
-      break;
-    case 'center':
-      left = 0;
-      right = 0;
-      break;
-    case 'right':
-      left = null;
-      right = offsetX;
-      break;
-  }
-
   switch (positionY) {
     case 'top':
-    case 'middle':
       top = null;
-      bottom = props.height + offsetY;
+      bottom = POPPER_TOP + POPPER_HEIGHT + offsetY;
       break;
     case 'bottom':
-      top = props.height + offsetY;
+      top = POPPER_TOP + POPPER_HEIGHT + offsetY;
       bottom = null;
       break;
   }
 
+  if (props.fullWidth) {
+    // If Full Width
+    left = POPPER_LEFT;
+    right = null;
+  } else if (WIDTH_DIFF < 0) {
+    // If Popup is bigger than the Popper Container
+    left = POPPER_LEFT;
+    right = null;
+  } else {
+    switch (props.positionX) {
+      case 'left':
+        left = POPPER_LEFT + offsetX;
+        right = null;
+        break;
+      case 'center':
+        left = POPPER_LEFT + offsetX + WIDTH_DIFF / 2;
+        right = null;
+        break;
+      case 'right':
+        left = POPPER_LEFT + offsetX + WIDTH_DIFF;
+        right = null;
+        break;
+    }
+  }
+
   return {
     left,
     right,

package/src/lib/stories/developer tools/directives/drag/drag.ts

@@ -0,0 +1,47 @@
+export function drag(node: HTMLElement) {
+  let dragging = false;
+
+  function getX(e: MouseEvent | TouchEvent): number {
+    return 'touches' in e ? e.touches[0].clientX : e.clientX;
+  }
+
+  function handleStart(e: MouseEvent | TouchEvent) {
+    dragging = true;
+    const x = getX(e);
+    node.dispatchEvent(new CustomEvent('dragstart', { detail: { x } }));
+
+    window.addEventListener('mousemove', handleMove);
+    window.addEventListener('mouseup', handleEnd);
+    window.addEventListener('touchmove', handleMove);
+    window.addEventListener('touchend', handleEnd);
+  }
+
+  function handleMove(e: MouseEvent | TouchEvent) {
+    if (!dragging) return;
+    const x = getX(e);
+
+    node.dispatchEvent(new CustomEvent('dragging', { detail: { x } }));
+  }
+
+  function handleEnd(e: MouseEvent | TouchEvent) {
+    if (!dragging) return;
+    dragging = false;
+    const x = getX(e);
+    node.dispatchEvent(new CustomEvent('dragend', { detail: { x } }));
+
+    window.removeEventListener('mousemove', handleMove);
+    window.removeEventListener('mouseup', handleEnd);
+    window.removeEventListener('touchmove', handleMove);
+    window.removeEventListener('touchend', handleEnd);
+  }
+
+  node.addEventListener('mousedown', handleStart);
+  node.addEventListener('touchstart', handleStart, { passive: true });
+
+  return {
+    destroy() {
+      node.removeEventListener('mousedown', handleStart);
+      node.removeEventListener('touchstart', handleStart);
+    },
+  };
+}

package/src/lib/styles/_components.css

@@ -4,6 +4,11 @@
   --dodo-ui-element-height-normal: 40px;
   --dodo-ui-element-height-large: 50px;
 
+  /* Size Thin elements */
+  --dodo-ui-track-element-height-small: 6px;
+  --dodo-ui-track-element-height-normal: 8px;
+  --dodo-ui-track-element-height-large: 10px;
+
   /* Roundness */
   --dodo-ui-element-roundness-1: 0.4375em;
   --dodo-ui-element-roundness-2: 0.8125em;