sprintify-ui 0.0.82 → 0.0.83

package/package.json

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

package/src/components/BaseDropdown.vue

@@ -15,7 +15,7 @@
           leave-from-class="transform scale-100 opacity-100"
           leave-to-class="transform scale-90 opacity-0"
         >
-          <div v-show="showDropdown" class="inline-block">
+          <div v-show="showDropdown" class="inline-block" scroll-lock-target>
             <slot
               name="dropdown"
               :close="close"
@@ -31,7 +31,7 @@
 
 <script lang="ts" setup>
 import { PropType, StyleValue } from 'vue';
-import { useElementBounding } from '@vueuse/core';
+import { disableScroll, enableScroll } from '../utils';
 
 const button = ref<HTMLElement | null>(null);
 const dropdown = ref<HTMLElement | null>(null);
@@ -57,12 +57,32 @@ const props = defineProps({
   },
 });
 
-const { y, x, height, width } = useElementBounding(button);
-const { height: dropdownHeight, width: dropdownWidth } =
-  useElementBounding(dropdown);
+const buttonX = ref(0);
+const buttonY = ref(0);
+const buttonWidth = ref(0);
+const buttonHeight = ref(0);
+
+const dropdownWidth = ref(0);
+const dropdownHeight = ref(0);
 
 const emit = defineEmits(['close', 'open']);
 
+function setBoundingBoxes() {
+  if (button.value) {
+    const { y, x, height, width } = button.value.getBoundingClientRect();
+    buttonX.value = x;
+    buttonY.value = y;
+    buttonWidth.value = width;
+    buttonHeight.value = height;
+  }
+
+  if (dropdown.value) {
+    const { height, width } = dropdown.value.getBoundingClientRect();
+    dropdownWidth.value = width;
+    dropdownHeight.value = height;
+  }
+}
+
 function toggle() {
   if (showDropdown.value) {
     close();
@@ -73,13 +93,16 @@ function toggle() {
 
 function open() {
   activate();
+  setBoundingBoxes();
   showDropdown.value = true;
+  disableScroll(dropdown.value);
   emit('open');
 }
 
 function close() {
   deactivate();
   showDropdown.value = false;
+  enableScroll();
   emit('close');
 }
 
@@ -129,10 +152,10 @@ function onMouseDown(event: MouseEvent) {
 }
 
 const dropdownStyles = computed((): StyleValue => {
-  let top = y.value;
+  let top = buttonY.value;
 
   if (props.placement == 'bottom-start' || props.placement == 'bottom-end') {
-    top += height.value;
+    top += buttonHeight.value;
     top += props.padding;
   }
 
@@ -147,15 +170,18 @@ const dropdownStyles = computed((): StyleValue => {
   } as any;
 
   if (props.placement == 'bottom-end' || props.placement == 'top-end') {
-    styles.left = `${x.value + width.value - dropdownWidth.value}px`;
+    styles.left = `${
+      buttonX.value + buttonWidth.value - dropdownWidth.value
+    }px`;
   } else {
-    styles.left = `${x.value}px`;
+    styles.left = `${buttonX.value}px`;
   }
 
   return styles as StyleValue;
 });
 
 onBeforeUnmount(() => {
+  close();
   deactivate();
 });
 </script>