edvoyui-component-library-test-flight 0.0.105 → 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/dist/tabs/EUITabs.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=9b4681af&lang.css";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=8ce36c62&lang.css";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUITabs.vue.d.ts.map

package/package.json

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

package/src/components/breadcrumb/EUIBreadcrumb.stories.ts

@@ -0,0 +1,75 @@
+// EUIBreadcrumb.stories.ts
+import { Meta, StoryObj } from "@storybook/vue3";
+import EUIBreadcrumb from "./EUIBreadcrumb.vue";
+import {
+  BookOpenIcon,
+  HomeIcon,
+  TableCellsIcon,
+} from "@heroicons/vue/24/outline";
+
+const meta = {
+  title: "Components/Breadcrumb",
+  component: EUIBreadcrumb,
+  tags: ["autodocs"],
+  argTypes: {
+    pages: {
+      description: `An array of objects representing the breadcrumb pages.
+Each object can include:
+- \`name\` (string): The display name of the breadcrumb item.
+- \`href\` (string, optional): The URL the breadcrumb item points to.
+- \`current\` (boolean, optional): Indicates if the breadcrumb item is the current page.
+- \`showIcon\` (Vue component, optional): An icon component to display alongside the name.`,
+      control: "object",
+    },
+  },
+} satisfies Meta<typeof EUIBreadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    pages: [
+      {
+        name: "Home",
+        href: "/",
+        current: true,
+      },
+      {
+        name: "Library",
+        href: "/library",
+        current: false,
+      },
+      {
+        name: "Data",
+        current: false,
+      },
+    ],
+  },
+};
+
+// Default story with minimum props
+export const IconsUsed: Story = {
+  args: {
+    pages: [
+      {
+        name: "Home",
+        href: "/",
+        current: true,
+        showIcon: HomeIcon,
+      },
+      {
+        name: "Library",
+        href: "/library",
+        current: false,
+        showIcon: BookOpenIcon,
+      },
+      {
+        name: "Data",
+        current: false,
+        showIcon: TableCellsIcon,
+      },
+    ],
+  },
+};

package/src/components/breadcrumb/EUIBreadcrumb.vue

@@ -0,0 +1,59 @@
+<template>
+  <nav aria-label="breadcrumb" class="my-2">
+    <ol
+      role="list"
+      class="flex items-center justify-start max-w-full space-x-1"
+    >
+      <li
+        v-for="(page, index) in pages"
+        :key="page.name"
+        class="flex flex-row items-center justify-start space-x-1"
+      >
+        <a
+          :href="page.href"
+          class="inline-flex items-center gap-2 text-sm font-medium font-inter"
+          :class="
+            pages.length - 1 !== index
+              ? 'text-gray-600 hover:text-gray-700'
+              : 'text-gray-500'
+          "
+          :aria-current="page.current ? 'page' : undefined"
+        >
+          <component
+            v-if="page?.showIcon"
+            :is="page?.showIcon"
+            class="text-current size-4"
+          />
+          {{ page.name }}</a
+        >
+        <ChevronDownStroke
+          v-if="pages.length - 1 !== index"
+          class="flex-shrink-0 w-5 h-5 text-gray-400 transform -rotate-90"
+          aria-hidden="true"
+        />
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { toRefs, type PropType } from "vue";
+import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
+
+interface BreadcrumbPage {
+  name: string;
+  href?: string;
+  current?: boolean;
+  showIcon?: {};
+}
+
+const props = defineProps({
+  pages: {
+    type: Array as PropType<BreadcrumbPage[]>,
+    default: [],
+  },
+});
+const { pages } = toRefs(props);
+</script>
+
+<style scoped></style>

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/index.ts

@@ -48,3 +48,5 @@ export { default as EUITooltip } from "./tooltip/EUITooltip.vue";
 export { default as EUISearch } from "./searchInput/EUISearch.vue";
 export { default as EUISearchExpand } from "./searchexpand/EUISearchExpand.vue";
 export { default as EUISearchToggle } from "./searchexpand/EUISearchToggle.vue";
+
+export { default as EUIBreadcrumb } from "./breadcrumb/EUIBreadcrumb.vue";

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: {

package/src/components/tabs/EUITabs.vue

@@ -31,7 +31,7 @@
                 : ' text-gray-500 hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center',
             ]"
           >
-            <slot name="title" :tab="tab">
+            <slot name="title" :tab="tab" :tabIndex="tabindex" :activeTab="activeTabIndex">
               {{ tab?.name }}
             </slot>
           </span>
@@ -51,6 +51,7 @@
         <button
           v-for="(tab, tabindex) in tabs"
           :key="tabindex"
+          type="button"
           role="tab"
           :id="`id-${tab.name}`"
           :class="[
@@ -64,11 +65,38 @@
           ]"
           @click="selectTab(tabindex)"
         >
-          <slot name="title" :tab="tab">
+          <slot name="title" :tab="tab" :tabIndex="tabindex" :activeTab="activeTabIndex">
             {{ tab?.name }}
           </slot>
         </button>
       </div>
+      <div
+      v-else-if="tabStyle === 'shadow'"
+      class="justify-start relative z-0 inline-flex items-center gap-0 bg-white/50 rounded-t-lg shadow-[0px_1px_2px_0px_rgba(55,65,81,0.10)]"
+    >
+      <button
+        v-for="(tab, tabindex) in tabs"
+        :key="tabindex"
+        type="button"
+        role="tab"
+        :id="`id-${tab.name}`"
+        :class="[
+          'px-3 py-1 leading-5 transition-all duration-150 ease-in-out hover:text-gray-800 h-12 rounded-t-lg',
+          tabSize === 'sm'
+            ? 'text-sm font-medium border-b-2'
+            : 'text-base font-semibold border-b-[3px]',
+          activeTabIndex === tabindex
+            ? 'border-purple-800 text-purple-800 bg-white z-10 rounded-t-lg shadow-[0px_2px_4px_0px_rgba(55,65,81,0.1)]'
+            : 'border-transparent text-gray-500 z-0',
+        ]"
+        @click="selectTab(tabindex)"
+      >
+        <slot name="title" :tab="tab" :tabIndex="tabindex" :activeTab="activeTabIndex">
+          {{ tab?.name }}
+        </slot>
+      </button>
+    </div>
+
       <div
         v-else
         class="flex items-center gap-1 p-2 transition-all duration-100"
@@ -76,6 +104,7 @@
         <button
           v-for="(tab, tabindex) in tabs"
           :key="tabindex"
+          type="button"
           role="tab"
           :id="`id-${tab.name}`"
           class="px-4 py-1 text-sm font-semibold transition-colors duration-150 ease-in-out border rounded-full"
@@ -86,12 +115,12 @@
           "
           @click="selectTab(tabindex)"
         >
-          <slot name="title" :tab="tab">
+          <slot name="title" :tab="tab" :tabIndex="tabindex" :activeTab="activeTabIndex">
             {{ tab?.name }}
           </slot>
         </button>
       </div>
-    <div :class="['py-2 text-base font-normal text-gray-700', contentClass]">
+    <div :class="['py-2 text-base font-normal text-gray-700 bg-white relative', contentClass, {'rounded-lg !rounded-tl-none shadow-[0px_-2px_24px_0px_rgba(0,0,0,0.075)] z-20':tabStyle === 'shadow'}]">
       <slot name="content" :active-tab="tabs[activeTabIndex]">
         {{ tabs[activeTabIndex]?.content }}
       </slot>
@@ -110,7 +139,7 @@ interface Tab {
 const props = defineProps<{
   tabs: Tab[];
   defaultActiveIndex?: number;
-  tabStyle: "rounded" | "border" | "design";
+  tabStyle: "rounded" | "border" | "design" | "shadow";
   contentClass?: string[] | string;
   tabSize?: "sm" | "md";
   tabAlign?: "start" | "justify" | "end";