edvoyui-component-library-test-flight 0.0.171 → 0.0.173

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.171",
+  "version": "0.0.173",
   "type": "module",
   "files": [
     "dist/",

package/src/components/dropdown/EUIMultiDropdown.vue

@@ -22,8 +22,8 @@
     <div
       v-if="isOpen && menuItems.length"
       :class="[
-        'absolute left-0 z-0 p-2 mt-1 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',
-        placement === 'top' ? 'bottom-full' : 'top-full',
+        'absolute z-0 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,
         dropdownClass,
       ]"
       @click.stop
@@ -57,7 +57,7 @@
         <!-- Sub-menu lists-->
         <div
           v-if="item.subMenu && activeMenuItem === item.text"
-          class="absolute top-0 z-10 transition-all duration-300 ease-in-out left-full min-w-32 max-w-64 w-max"
+          :class="['absolute top-0 z-10 transition-all duration-300 ease-in-out min-w-32 max-w-64 w-max', placement === 'right' ? 'right-full' : 'left-full']"
         >
           <div
             class="bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300"
@@ -91,7 +91,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, PropType } from "vue";
+import { ref, defineProps, PropType, computed } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
 import ChevronDownStrokeSolid from "../../assets/svg/ChevronDownStrokeSolid.vue";
@@ -102,7 +102,7 @@ interface MenuItem {
   enableAction?: boolean;
 }
 
-defineProps({
+const props = defineProps({
   title: {
     type: String,
     default: "My Students",
@@ -143,7 +143,7 @@ defineProps({
   },
   disabled: Boolean,
   placement: {
-    type: String as PropType<"top" | "bottom">,
+    type: String as PropType<"top" | "bottom" | "left" | "right">,
     default: "bottom",
   },
 });
@@ -169,6 +169,19 @@ const clearActiveMenuItem = () => {
 onClickOutside(dropdownButton, () => {
   isOpen.value = false;
 });
+
+const mainDropdownClasses = computed(() => {
+  switch (props.placement) {
+    case 'top':
+      return 'bottom-full left-0 mb-1';
+    case 'left':
+      return 'right-full top-0 me-1'; // me-1 is margin-end for spacing
+    case 'right':
+      return 'left-full top-0 ms-1'; // ms-1 is margin-start for spacing
+    default: // 'bottom'
+      return 'top-full left-0 mt-1';
+  }
+});
 </script>
 
 <style lang="scss" scoped></style>