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

package/src/components/alerts/EUIAlerts.stories.ts

@@ -0,0 +1,217 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIAlerts from "./EUIAlerts.vue"; // Adjust the path if necessary
+import { CalendarDaysIcon } from "@heroicons/vue/24/outline";
+
+const meta = {
+  title: "Components/Alerts",
+  component: EUIAlerts,
+  tags: ["autodocs"],
+  argTypes: {
+    ...{
+      showAlert: {
+        control: "boolean",
+        description: "Controls the visibility of the alert.",
+        defaultValue: true,
+      },
+      alertType: {
+        control: {
+          type: "select",
+          options: ["Default", "Warning", "Success", "Error"],
+        },
+        description:
+          'Determines the style and icon of the alert. Options are "Default", "Warning", "Success", and "Error".',
+      },
+      heading: {
+        control: "text",
+        description: "The title text displayed in the alert header.",
+      },
+      textMessage: {
+        control: "text",
+        description:
+          "Additional information about the alert. This text appears below the title.",
+      },
+      alertIcon: {
+        control: "text",
+        description:
+          "An optional custom icon to display. This can be a Vue component, a string, or a function.",
+      },
+      closeIcon: {
+        control: "boolean",
+        description:
+          "If set to true, shows a close icon to allow dismissing the alert.",
+      },
+      actionItems: {
+        control: "boolean",
+        description:
+          'If set to true, displays action buttons (e.g., "View status" and "Dismiss") within the alert.',
+      },
+      "update:showAlert": {
+        action: "update:showAlert",
+        description: "Emitted to update the visibility of the alert.",
+      },
+      alertAction: {
+        action: "alertAction",
+        description: "Emitted when the action button is clicked.",
+      },
+      alertDismiss: {
+        action: "alertDismiss",
+        description: "Emitted when the alert is dismissed.",
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An alert component that displays messages with various styles (Default, Warning, Success, Error). It supports custom titles, descriptions, icons, and optional action buttons.",
+      },
+    },
+  },
+} satisfies Meta<typeof EUIAlerts>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default button story with default slot content
+export const Default: Story = {
+  argTypes: {
+    alertType: {
+      control: "select",
+      options: ["Default", "Warning", "Success", "Error"],
+    },
+    alertIcon: {
+      control: "text",
+    },
+  },
+  args: {
+    alertType: "Default",
+    showAlert: true,
+    heading: "Default Alert",
+    textMessage: "This is a default alert message.",
+  },
+  render: (args) => ({
+    components: { EUIAlerts },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAlerts v-bind="args"></EUIAlerts>`,
+  }),
+};
+
+export const onlyTitle: Story = {
+  args: {
+    alertType: "Success",
+    heading: "Your account activated",
+  },
+  render: (args) => ({
+    components: { EUIAlerts },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAlerts v-bind="args"></EUIAlerts>`,
+  }),
+};
+
+export const UseCustomIcon: Story = {
+  args: {
+    alertType: "Success",
+    heading: "Send Icon here",
+    alertIcon: CalendarDaysIcon,
+  },
+  render: (args) => ({
+    components: { EUIAlerts, CalendarDaysIcon },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAlerts v-bind="args"></EUIAlerts>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+      <EUIAlerts
+        alertType="Success"
+        heading="Send Icon here"
+        :alertIcon="CalendarDaysIcon"
+      >
+    </EUIAlerts>
+  </template>`,
+      },
+    },
+  },
+};
+
+export const EnableClose: Story = {
+  args: {
+    alertType: "Default",
+    heading: "Close Icon Boolean enabled",
+    closeIcon: true,
+  },
+  render: (args) => ({
+    components: { EUIAlerts },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAlerts v-bind="args"></EUIAlerts>`,
+  }),
+};
+
+export const UseSlots: Story = {
+  args: {
+    alertType: "Warning",
+    alertIcon: CalendarDaysIcon,
+  },
+  render: (args) => ({
+    components: { EUIAlerts },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAlerts v-bind="args">
+                  <template #title> Custom Header here</template>
+                  <template #content><p class="text-sm font-normal"> Custom message here Are you sure you want to deactivate your account?.</p></template>
+                  <template #actionButtons>
+                    <div class="mt-4">
+                      <button type="button"
+                          class="rounded-md px-3 py-1.5 text-sm font-medium bg-black text-white focus:outline-none focus:ring-2 focus:ring-offset-2"
+                        >
+                          View status
+                        </button>
+                        <button
+                          type="button"
+                          class="ml-3 rounded-md px-3 py-1.5 bg-white text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
+                        >
+                          Dismiss
+                        </button>
+                    </div>
+                  </template>
+                </EUIAlerts>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+      <EUIAlerts>
+                  <template #icon> <CalendarDaysIcon class="text-current size-5" aria-hidden="true" /></template>
+                  <template #title> Custom Header here</template>
+                  <template #content><p class="text-sm font-normal"> Custom message here Are you sure you want to deactivate your account?.</p></template>
+                  <template #actionButtons>
+                  <div>
+                    <button type="button"
+                        class="rounded-md px-3 py-1.5 text-sm font-medium bg-black text-white focus:outline-none focus:ring-2 focus:ring-offset-2"
+                      >
+                        View status
+                      </button>
+                      <button
+                        type="button"
+                        class="ml-3 rounded-md px-3 py-1.5 bg-white text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
+                      >
+                        Dismiss
+                      </button>
+                  </div>
+                </template>
+                </EUIAlerts>
+  </template>`,
+      },
+    },
+  },
+};

package/src/components/alerts/EUIAlerts.vue

@@ -0,0 +1,194 @@
+<template>
+  <transition
+    enter-active-class="transition duration-300 ease-out transform"
+    enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+    enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+    leave-active-class="transition duration-100 ease-in"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div v-if="showAlert" :class="['p-4 rounded-md', alertsClass.bgColor]">
+      <div
+        :class="[closeIcon && !textMessage ? 'items-center pr-2 flex' : 'flex']"
+      >
+        <div class="shrink-0">
+          <slot name="icon">
+            <component
+              :is="alertIcon || alertsClass.leftIcon?.icon"
+              :class="['size-5', alertsClass.leftIcon?.color]"
+              aria-hidden="true"
+            />
+          </slot>
+        </div>
+        <div class="ml-3">
+          <h3 :class="['text-sm font-medium', alertsClass.titleColor]">
+            <slot name="title">{{ heading || "Alert Title" }}</slot>
+          </h3>
+
+           <slot name="content">
+            <div v-if="textMessage" :class="['mt-2 text-sm', alertsClass.textColor]">
+              {{ textMessage || "your description here..." }}
+            </div>
+           </slot>
+
+          <slot name="actionButtons">
+            <div v-if="actionItems" class="mt-4">
+              <div class="-mx-2 -my-1.5 flex">
+                  <button
+                    type="button"
+                    :class="[
+                      'rounded-md  px-3 py-1.5 text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2',
+                      alertsClass.btnPrimary,
+                    ]"
+                    @click="onAction"
+                  >
+                    View status
+                  </button>
+                  <button
+                    type="button"
+                    :class="[
+                      'ml-3 rounded-md px-3 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
+                      alertsClass.btnTertiary,
+                    ]"
+                    @click="onClose"
+                  >
+                    Dismiss
+                  </button>
+                </div>
+            </div>
+          </slot>
+        </div>
+        <div class="pl-3 ml-auto">
+          <slot name="xclose">
+            <div v-if="closeIcon" class="-mx-1.5 -my-1.5 pt-1">
+              <button
+                type="button"
+                :class="[
+                  'inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2',
+                  alertsClass.btnClose,
+                ]"
+                @click="onClose()"
+              >
+                <span class="sr-only">Dismiss</span>
+                <XMarkIcon class="size-5" aria-hidden="true" />
+              </button>
+            </div>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { computed, toRefs, type PropType } from "vue";
+import {
+  ExclamationTriangleIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  XMarkIcon,
+} from "@heroicons/vue/24/solid";
+
+const props = defineProps({
+  showAlert: {
+    type: Boolean,
+    default: true,
+  },
+  heading: {
+    type: String,
+    default: "",
+  },
+  textMessage: {
+    type: String,
+    default: "",
+  },
+  alertType: {
+    type: String as PropType<"Default" | "Warning" | "Success" | "Error">,
+    default: "Default",
+  },
+  alertIcon: {
+    type: [String, Object, Function],
+    default: "",
+  },
+  actionItems: Boolean,
+  closeIcon: Boolean,
+});
+const { showAlert } = toRefs(props);
+const emits = defineEmits(["update:showAlert", "alertAction", "alertDismiss"]);
+const onAction = () => {
+  emits("alertAction", true);
+  emits("update:showAlert", false);
+};
+const onClose = () => {
+  emits("alertDismiss", false);
+  emits("update:showAlert", false);
+};
+
+const alertsClass = computed(() => {
+  const iconClasses = {
+    Default: {
+      bgColor: "bg-blue-50",
+      leftIcon: {
+        icon: CheckCircleIcon,
+        color: "text-blue-400",
+      },
+      titleColor: "text-blue-800",
+      textColor: "text-blue-700",
+      btnPrimary:
+        "bg-blue-700 hover:bg-blue-800 focus:ring-blue-600 focus:ring-offset-blue-50",
+      btnTertiary:
+        "text-blue-500 bg-blue-50 hover:bg-blue-100 focus:ring-blue-600 focus:ring-offset-blue-50",
+      btnClose:
+        "bg-blue-50 text-blue-500 hover:bg-blue-100 focus:ring-blue-600 focus:ring-offset-blue-50",
+    },
+    Warning: {
+      bgColor: "bg-yellow-50",
+      leftIcon: {
+        icon: ExclamationTriangleIcon,
+        color: "text-yellow-400",
+      },
+      titleColor: "text-yellow-800",
+      textColor: "text-yellow-700",
+      btnPrimary:
+        "bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-600 focus:ring-offset-yellow-50",
+      btnTertiary:
+        "text-yellow-500 bg-yellow-50 hover:bg-yellow-100 focus:ring-yellow-600 focus:ring-offset-yellow-50",
+      btnClose:
+        "bg-yellow-50 text-yellow-500 hover:bg-yellow-100 focus:ring-yellow-600 focus:ring-offset-yellow-50",
+    },
+    Success: {
+      bgColor: "bg-green-50",
+      leftIcon: {
+        icon: CheckCircleIcon,
+        color: "text-green-400",
+      },
+      titleColor: "text-green-800",
+      textColor: "text-green-700",
+      btnPrimary:
+        "bg-green-700 hover:bg-green-800 focus:ring-green-600 focus:ring-offset-green-50",
+      btnTertiary:
+        "text-green-500 bg-green-50 hover:bg-green-100 focus:ring-green-600 focus:ring-offset-green-50",
+      btnClose:
+        "bg-green-50 text-green-500 hover:bg-green-100 focus:ring-green-600 focus:ring-offset-green-50",
+    },
+    Error: {
+      bgColor: "bg-red-50",
+      leftIcon: {
+        icon: XCircleIcon,
+        color: "text-red-400",
+      },
+      titleColor: "text-red-800",
+      textColor: "text-red-700",
+      btnPrimary:
+        "bg-red-700 hover:bg-red-800 focus:ring-red-600 focus:ring-offset-red-50",
+      btnTertiary:
+        "text-red-500 bg-red-50 hover:bg-red-100 focus:ring-red-600 focus:ring-offset-red-50",
+      btnClose:
+        "bg-red-50 text-red-500 hover:bg-red-100 focus:ring-red-600 focus:ring-offset-red-50",
+    },
+  };
+  return iconClasses[props.alertType] || "";
+});
+</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

@@ -50,3 +50,4 @@ export { default as EUISearchExpand } from "./searchexpand/EUISearchExpand.vue";
 export { default as EUISearchToggle } from "./searchexpand/EUISearchToggle.vue";
 
 export { default as EUIBreadcrumb } from "./breadcrumb/EUIBreadcrumb.vue";
+export { default as EUIAlerts } from "./alerts/EUIAlerts.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,
   },