sprintify-ui 0.0.84 → 0.0.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.84",
+  "version": "0.0.85",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDropdown.stories.js

@@ -26,7 +26,7 @@ const Template = (args) => ({
     return { args };
   },
   template: `
-  <div style="height: 1000px; margin-top: 100px;">
+  <div style="height: 1000px; margin-top: 300px;">
     <div style="height: 70px; overflow: hidden; position: relative; display: inline-block;">
       <BaseDropdown v-bind="args">
         <template #button>

package/src/components/BaseDropdown.vue

@@ -93,10 +93,12 @@ function toggle() {
 
 function open() {
   activate();
-  setBoundingBoxes();
   showDropdown.value = true;
-  disableScroll(dropdown.value);
-  emit('open');
+  nextTick(() => {
+    setBoundingBoxes();
+    disableScroll(dropdown.value);
+    emit('open');
+  });
 }
 
 function close() {
@@ -151,15 +153,43 @@ function onMouseDown(event: MouseEvent) {
   }
 }
 
+const placementInternal = computed(() => {
+  const tooTallForTop =
+    buttonY.value - dropdownHeight.value - props.padding < 0;
+  const tooTallForBottom =
+    window.innerHeight - buttonY.value - buttonHeight.value - props.padding <
+    dropdownHeight.value;
+
+  if (props.placement == 'top-start' && tooTallForTop) {
+    return 'bottom-start';
+  }
+  if (props.placement == 'top-end' && tooTallForTop) {
+    return 'bottom-end';
+  }
+  if (props.placement == 'bottom-start' && tooTallForBottom) {
+    return 'top-start';
+  }
+  if (props.placement == 'bottom-end' && tooTallForBottom) {
+    return 'top-end';
+  }
+  return props.placement;
+});
+
 const dropdownStyles = computed((): StyleValue => {
   let top = buttonY.value;
 
-  if (props.placement == 'bottom-start' || props.placement == 'bottom-end') {
+  if (
+    placementInternal.value == 'bottom-start' ||
+    placementInternal.value == 'bottom-end'
+  ) {
     top += buttonHeight.value;
     top += props.padding;
   }
 
-  if (props.placement == 'top-start' || props.placement == 'top-end') {
+  if (
+    placementInternal.value == 'top-start' ||
+    placementInternal.value == 'top-end'
+  ) {
     top -= dropdownHeight.value;
     top -= props.padding;
   }
@@ -169,7 +199,10 @@ const dropdownStyles = computed((): StyleValue => {
     top: `${top}px`,
   } as any;
 
-  if (props.placement == 'bottom-end' || props.placement == 'top-end') {
+  if (
+    placementInternal.value == 'bottom-end' ||
+    placementInternal.value == 'top-end'
+  ) {
     styles.left = `${
       buttonX.value + buttonWidth.value - dropdownWidth.value
     }px`;