edvoyui-component-library-test-flight 0.0.106 → 0.0.107

package/dist/modal/EUIModal.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=script&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=03103d67&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=0a1278e7&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIModal.vue.d.ts.map

package/dist/modal/EUIModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AA0F1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}
+{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AA6F1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}

package/package.json

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

package/src/components/dropdown/EUIMultiDropdown.vue

@@ -4,20 +4,32 @@
     <button
       type="button"
       ref="dropdownButton"
-      :class="['inline-flex items-center text-sm font-semibold gap-x-2 capitalize outline-none focus:outline-none', className]"
+      :class="[
+        'inline-flex items-center text-sm font-semibold gap-x-2 capitalize outline-none focus:outline-none',
+        className,
+      ]"
       :disabled="disabled"
       @click="toggleDropdown()"
     >
       <slot name="dropdownName" :open="isOpen">
-         {{ title }}
-         <ChevronDownStroke :class="isOpen ? 'text-gray-900 rotate-180' : 'text-gray-500'"
-            class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
-            aria-hidden="true"
+        {{ title }}
+        <ChevronDownStroke
+          :class="isOpen ? 'text-gray-900 rotate-180' : 'text-gray-500'"
+          class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
+          aria-hidden="true"
         />
       </slot>
     </button>
     <!-- Menu lists -->
-    <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 top-full shadow-gray-300 min-w-32 max-w-64 w-max" @click.stop>
+    <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',
+        dropdownClass,
+      ]"
+      @click.stop
+    >
       <div
         v-for="item in menuItems"
         :key="item.text"
@@ -26,36 +38,55 @@
         @mouseleave="clearActiveMenuItem"
         @click.stop="$emit('menuItem', item)"
       >
-        <div class="flex items-center justify-between w-full gap-2 text-sm font-medium text-gray-800 break-words hover:text-gray-900">
+        <div
+          class="flex items-center justify-between w-full gap-2 text-sm font-medium text-gray-800 break-words hover:text-gray-900"
+        >
           <slot name="menu" :menuitem="item">
-               {{ item.text }}
-               <ChevronDownStroke v-if="item.subMenu" :class="activeMenuItem === item.text ? 'text-gray-900 -rotate-90' : 'text-gray-500 rotate-0'"
-               class="ml-auto transition duration-300 ease-in-out transform size-6 group-hover:text-opacity-80"
-               aria-hidden="true" />
+            {{ item.text }}
+            <ChevronDownStroke
+              v-if="item.subMenu"
+              :class="
+                activeMenuItem === item.text
+                  ? 'text-gray-900 -rotate-90'
+                  : 'text-gray-500 rotate-0'
+              "
+              class="ml-auto transition duration-300 ease-in-out transform size-6 group-hover:text-opacity-80"
+              aria-hidden="true"
+            />
           </slot>
         </div>
 
         <!-- 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">
-          <div class="bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300">
-            <div v-if="item.enableAction" class="flex items-center justify-center w-full gap-1 px-6 py-3 text-sm font-medium text-gray-900 bg-purple-100 rounded-t-md" @click.prevent="$emit('actionItem', 'action')">
-              <slot name="actionName">{{ '+ Action Name' }}</slot>
-             </div>
-             <div class="p-2 overflow-y-auto overscroll-auto max-h-[50svh] min-h-0 scrollbar--thin">
+        <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"
+        >
+          <div
+            class="bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300"
+          >
+            <div
+              v-if="item.enableAction"
+              class="flex items-center justify-center w-full gap-1 px-6 py-3 text-sm font-medium text-gray-900 bg-purple-100 rounded-t-md"
+              @click.prevent="$emit('actionItem', 'action')"
+            >
+              <slot name="actionName">{{ "+ Action Name" }}</slot>
+            </div>
+            <div
+              class="p-2 overflow-y-auto overscroll-auto max-h-[50svh] min-h-0 scrollbar--thin"
+            >
               <div
                 v-for="subItem in item.subMenu"
                 :key="subItem.text"
                 class="flex items-center justify-between gap-2 px-3 py-2 text-sm font-medium text-gray-700 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-gray-900"
                 @click.stop="$emit('subMenuItem', subItem)"
               >
-              <slot name="submenu" :subItem="subItem">
-                {{ subItem.text }}
-              </slot>
+                <slot name="submenu" :subItem="subItem">
+                  {{ subItem.text }}
+                </slot>
               </div>
-             </div>
+            </div>
           </div>
         </div>
-
       </div>
     </div>
   </div>
@@ -69,7 +100,7 @@ import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
 interface MenuItem {
   text: string;
   subMenu?: MenuItem[];
-  enableAction?:boolean;
+  enableAction?: boolean;
 }
 
 defineProps({
@@ -81,6 +112,10 @@ defineProps({
     type: String,
     required: false,
   },
+  dropdownClass: {
+    type: String,
+    required: false,
+  },
   menuItems: {
     type: Array as PropType<MenuItem[]>,
     default: () => [
@@ -93,44 +128,44 @@ defineProps({
           { text: "UKI Fair" },
           { text: "Germany Q4' 24" },
           { text: "Edvoy Express" },
-          { text: "Q1 2025 Pipeline" }
-        ]
+          { text: "Q1 2025 Pipeline" },
+        ],
       },
       {
         text: "Custom Filter",
-        subMenu: [
-          { text: "Application Intakes" },
-          { text: "New Students" },
-        ],
-        enableAction: true
-      }
-    ]
+        subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
+        enableAction: true,
+      },
+    ],
   },
   disabled: Boolean,
+  placement: {
+    type: String as PropType<"top" | "bottom">,
+    default: "bottom",
+  },
 });
 
 const isOpen = ref(false);
 const activeMenuItem = ref<string | null>(null);
 const dropdownButton = ref<HTMLElement | null>(null);
 
-defineEmits(['subMenuItem', 'menuItem', 'actionItem'])
+defineEmits(["subMenuItem", "menuItem", "actionItem"]);
 
 const toggleDropdown = () => {
   isOpen.value = !isOpen.value;
-}
+};
 
-const setActiveMenuItem = (text:string) => {
+const setActiveMenuItem = (text: string) => {
   activeMenuItem.value = text;
-}
+};
 
 const clearActiveMenuItem = () => {
   activeMenuItem.value = null;
-}
+};
 
 onClickOutside(dropdownButton, () => {
   isOpen.value = false;
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

package/src/components/modal/EUIModal.stories.ts

@@ -44,6 +44,17 @@ const meta: Meta<typeof EUIModal> = {
           "Prevents the modal from being closed by clicking on the backdrop or pressing the Escape key.",
         defaultValue: false,
       },
+      size: {
+        control: {
+          type: "select",
+          options: ["xs", "sm", "md", "lg", "xl", "full"],
+        },
+        description: "Size of the slideover.",
+        defaultValue: "sm",
+        table: {
+          defaultValue: { summary: "sm" },
+        },
+      },
     },
   },
   parameters: {
@@ -58,6 +69,15 @@ type Story = StoryObj<typeof meta>;
 
 // Default EUIModal story with basic content
 export const Default: Story = {
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "full"],
+      persistent: false,
+      slimHeader: false,
+      visibleClose: true,
+    },
+  },
   args: {
     isVisible: false,
   },

package/src/components/modal/EUIModal.vue

@@ -3,16 +3,18 @@
     <Transition name="modal" appear>
       <div
         v-if="isVisible"
-        class="fixed inset-0 z-50 flex flex-col items-center justify-end sm:justify-center"
+        class="fixed z-50 flex flex-col items-center justify-end inset-2 sm:justify-center"
         @click.self="closeModal"
       >
         <div
           class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/50 pointer-events-none overflow-hidden"
         ></div>
         <div
-          class="bg-white shadow-lg max-w-lg w-full max-h-[calc(100svh-3rem)] md:h-auto overflow-hidden relative"
           :class="[
+            'bg-white shadow-lg w-full overflow-hidden relative flex flex-col justify-between',
+            slideClass,
             roundedClass !== '' ? roundedClass : 'rounded-t-3xl md:rounded-2xl',
+            size === 'full' ? 'h-full max-h-svh' : 'max-h-[calc(100svh-3rem)] md:h-auto'
           ]"
         >
           <template v-if="$slots.header">
@@ -55,14 +57,14 @@
           <template v-if="$slots.content">
             <slot name="content"></slot>
           </template>
-          <div v-else class="p-4 border-t border-b border-gray-200">
+          <div v-else class="p-4 border-t border-b border-gray-200 max-h-[calc(100svh-3rem)] flex-1">
             <slot></slot>
           </div>
 
           <template v-if="$slots.footer">
             <slot name="footer"></slot>
           </template>
-          <div v-else class="flex items-center justify-end p-4 space-x-2">
+          <div v-else class="sticky bottom-0 flex items-center justify-end float-none p-4 space-x-2">
             <button
               @click="closeModal"
               class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
@@ -83,7 +85,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, watch } from "vue";
+import {
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  watch,
+  computed,
+  type PropType,
+} from "vue";
 
 export default defineComponent({
   name: "Modal",
@@ -112,9 +121,27 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    size: {
+      type: String as PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">,
+      default: "sm",
+    },
   },
   emits: ["update:isVisible", "confirm"],
   setup(props, { emit }) {
+    const slideClass = computed(() => {
+      const sizeClass = {
+        full: "max-w-screen",
+        xl: "max-w-screen-lg min-w-[100svw] sm:min-w-[1024px]",
+        lg: "max-w-2xl min-w-[100svw] sm:min-w-[42rem]",
+        md: "max-w-xl min-w-[100svw] sm:min-w-[36rem]",
+        sm: "max-w-lg min-w-[100svw] sm:min-w-[32rem]",
+        xs: "max-w-md min-w-[100svw] sm:min-w-[28rem]",
+      };
+
+      const slideWidth = sizeClass[props.size];
+      return slideWidth;
+    });
+
     // Methods
     const closeModal = () => {
       if (!props.persistent) {
@@ -143,9 +170,10 @@ export default defineComponent({
       window.removeEventListener("keydown", handleKeydown);
     });
     return {
-      closeModal
+      closeModal,
+      slideClass,
     };
-  }
+  },
 });
 </script>
 
@@ -160,7 +188,7 @@ export default defineComponent({
 }
 .modal-enter-to,
 .modal-leave-from {
- @apply opacity-100;
+  @apply opacity-100;
 }
 
 .backdrop {

package/src/components/slideover/EUISlideover.stories.ts

@@ -23,7 +23,7 @@ const meta: Meta<typeof EUISlideover> = {
         },
       },
       size: {
-        control: { type: "select", options: ["xs", "sm", "md", "lg"] },
+        control: { type: "select", options: ["xs", "sm", "md", "lg", "full"] },
         description: "Size of the slideover.",
         defaultValue: "xs",
         table: {