edvoyui-component-library-test-flight 0.0.201 → 0.0.203

package/dist/components/dropdown/EUIMultiDropdown.d.ts

@@ -20,6 +20,7 @@ declare function __VLS_template(): {
     };
     refs: {
         dropdownButton: HTMLButtonElement;
+        dropdownMenu: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
 };
@@ -124,6 +125,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     menuItems: MenuItem[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     dropdownButton: HTMLButtonElement;
+    dropdownMenu: HTMLDivElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/dropdown/EUIMultiDropdown.vue

@@ -21,6 +21,7 @@
     <!-- Menu lists -->
     <div
       v-if="isOpen && menuItems.length"
+      ref="dropdownMenu"
       :class="[
         'absolute z-50 p-2 transition-all duration-300 ease-in-out bg-white border border-gray-200 border-solid rounded-lg shadow-2xl shadow-gray-300 min-w-32 max-w-64 w-max',
         mainDropdownClasses,
@@ -91,7 +92,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, PropType, computed } from "vue";
+import {
+  ref,
+  PropType,
+  computed,
+  nextTick,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  defineProps
+} from "vue";
 import { onClickOutside } from "@vueuse/core";
 import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
 import ChevronDownStrokeSolid from "../../assets/svg/ChevronDownStrokeSolid.vue";
@@ -151,6 +161,10 @@ const props = defineProps({
 const isOpen = ref(false);
 const activeMenuItem = ref<string | null>(null);
 const dropdownButton = ref<HTMLElement | null>(null);
+const dropdownMenu = ref<HTMLElement | null>(null);
+const resolvedPlacement = ref<"top" | "bottom" | "left" | "right">(
+  props.placement
+);
 
 defineEmits(["subMenuItem", "menuItem", "actionItem"]);
 
@@ -170,8 +184,61 @@ onClickOutside(dropdownButton, () => {
   isOpen.value = false;
 });
 
+const updateDropdownPlacement = () => {
+  if (!isOpen.value || !dropdownButton.value || !dropdownMenu.value) return;
+
+  if (props.placement === "left" || props.placement === "right") {
+    resolvedPlacement.value = props.placement;
+    return;
+  }
+
+  const buttonRect = dropdownButton.value.getBoundingClientRect();
+  const menuRect = dropdownMenu.value.getBoundingClientRect();
+  const menuHeight = menuRect.height || 240;
+  const spaceBelow = window.innerHeight - buttonRect.bottom;
+  const spaceAbove = buttonRect.top;
+
+  if (props.placement === "top") {
+    resolvedPlacement.value =
+      spaceAbove < menuHeight && spaceBelow > spaceAbove ? "bottom" : "top";
+    return;
+  }
+
+  resolvedPlacement.value =
+    spaceBelow < menuHeight && spaceAbove > spaceBelow ? "top" : "bottom";
+};
+
+watch(
+  () => isOpen.value,
+  async (open) => {
+    if (!open) return;
+    await nextTick();
+    updateDropdownPlacement();
+  }
+);
+
+watch(
+  () => props.placement,
+  () => {
+    resolvedPlacement.value = props.placement;
+    if (isOpen.value) {
+      nextTick(() => updateDropdownPlacement());
+    }
+  }
+);
+
+onMounted(() => {
+  window.addEventListener("resize", updateDropdownPlacement);
+  window.addEventListener("scroll", updateDropdownPlacement, true);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateDropdownPlacement);
+  window.removeEventListener("scroll", updateDropdownPlacement, true);
+});
+
 const mainDropdownClasses = computed(() => {
-  switch (props.placement) {
+  switch (resolvedPlacement.value) {
     case 'top':
       return 'bottom-full left-0 mb-1';
     case 'left':

package/dist/components/table/EUIDashboardTable.vue

@@ -491,7 +491,7 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
     tbody {
       @apply snap-y snap-mandatory snap-always;
       tr:not(.norecords) {
-        @apply text-gray-500 transition-all duration-300 rounded-xl bg-white snap-start ease-in-out snap-x snap-mandatory will-change-transform;
+        @apply text-gray-500 transition-all duration-300 rounded-xl bg-white snap-start ease-in-out snap-x snap-mandatory;
         &:hover {
           @apply shadow-[1px_2px_40px_0px_#03022912] ring-1 ring-gray-100 ring-inset z-30;
         }