edvoyui-component-library-test-flight 0.0.33 → 0.0.35

package/dist/table/EUITable.vue.d.ts

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

package/package.json

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

package/src/assets/scss/body.scss

@@ -13,3 +13,13 @@ html, body {
 .eui {
   @apply font-normal text-base text-purple-600;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

package/src/components/HelloWorld.vue

@@ -9,11 +9,9 @@
 <style lang="scss"></style>
 
 <!-- Development code here -->
-<!-- <template>
+<!--  <template>
   <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
     <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
-
-
     <Delete />
     <div class="grid gap-4 sm:grid-cols-2 place-items-start">
       <div
@@ -281,7 +279,7 @@
       </div>
 
        <div
-        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1 z-[calc(infinity)]"
       >
         <span
           class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
@@ -294,7 +292,8 @@
     </pre>
          <div class="inline-flex items-center gap-4">
       <EUIMultiDropdown title="dropdown" :menu-items="menubar" />
-      <EUIMultiDropdown title="dropdown" class-name="px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200" @subMenuItem="handleSubMenuItem" @menuItem="handleMenuItem">
+
+      <EUIMultiDropdown class-name="px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200" @subMenuItem="handleSubMenuItem" @menuItem="handleMenuItem" @action-item="addAction">
         <template #dropdownName="{ open }">
             <span>My Students</span>
             <ChevronDownStroke :class="open ? 'text-gray-900 rotate-180' : 'text-gray-500'"
@@ -302,6 +301,9 @@
               aria-hidden="true"
             />
           </template>
+          <template #actionName>
+             + Add Custom Filter
+          </template>
       </EUIMultiDropdown>
     </div>
       </div>
@@ -938,7 +940,7 @@ const onPageChange = (offsetData: number) => {
   console.log("@changePage:", offsetData);
    setTimeout(() => {
     loading.value = false
-  }, 500);
+  }, 800);
 };
 
 // TODO: Multi dropdown menu clicked access
@@ -951,6 +953,10 @@ const handleMenuItem = (item:any) => {
   console.log('Menu clicked:', item)
 }
 
+const addAction = (e:Event) => {
+  console.log("Action Item clicked:" + e)
+}
+
 const handleSubMenuItem = (subItem:any) => {
   console.log("Submenu item clicked:", subItem);
 }

package/src/components/datepicker/EUIDatepicker.stories.ts

@@ -195,6 +195,49 @@ const datepickerRange = ref([new Date(), new Date(new Date().setDate(new Date().
   },
 };
 
+export const RangeUsingMultiCalender: Story = {
+  args: {
+    placeholder: "Choose your date range...",
+    label: "Datepicker",
+    range: true,
+    multiCalendars: true,
+    required: true,
+    readonly: false,
+    disabled: false,
+    errors: {
+      message: "Enter valid date format",
+    },
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const startDate = new Date();
+      const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
+      const datepicker = ref([startDate, endDate]);
+      return { args, datepicker };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" v-model="datepicker" /></div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<script lang="ts" setup>
+const datepickerRange = ref([new Date(), new Date(new Date().setDate(new Date().getDate() + 7))]);
+</script>
+<template>
+<EUIDatepicker
+  v-model="datepickerRange"
+  label="Datepicker"
+  placeholder="Select Date here..."
+  :range="true"
+  :multiCalendars="true"
+/>
+</template>`,
+      },
+    },
+  },
+};
+
 export const TimeOnly: Story = {
   args: {
     placeholder: "Select your time",

package/src/components/datepicker/EUIDatepicker.vue

@@ -185,6 +185,8 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
 <style lang="scss">
 .dp__theme_light {
     --dp-primary-color: rgba(139, 92, 246, 1);
+    --dp-row-margin: 2px 0;
+    --dp-cell-size: 36px;
   }
 
 .eui-datepicker {
@@ -230,6 +232,15 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
     @apply text-sm font-medium;
   }
   .dp__cell_inner {
+    height: var(--dp-cell-size);
+    width: var(--dp-cell-size);
     @apply text-sm font-normal;
+
+  }
+  .dp__month_year_wrap {
+    @apply text-sm font-semibold;
+  }
+  .dp__calendar_row {
+    margin: var(--dp-row-margin);
   }
 </style>

package/src/components/dropdown/EUIMultiDropdown.stories.ts

@@ -185,3 +185,109 @@ const handleSubMenuItem = (subItem: any) => {
       },
     },
   });
+
+export const UseActionitem = Template.bind({});
+(UseActionitem.args = {
+  title: "My Students",
+  className:
+    "px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200",
+  menuItems: [
+    { text: "All Students" },
+    { text: "My Students" },
+    { text: "Genie Completed Students" },
+    {
+      text: "Standard Filter",
+      subMenu: [
+        { text: "UKI Fair" },
+        { text: "Germany Q4' 24" },
+        { text: "Edvoy Express" },
+        { text: "Q1 2025 Pipeline" },
+      ],
+    },
+    {
+      text: "Custom Filter",
+      subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
+      enableAction: true,
+    },
+  ],
+}),
+  (UseActionitem.parameters = {
+    docs: {
+      source: {
+        code: `<script lang="ts" setup>
+        const menuItems = [
+  {
+    "text": "All Students"
+  },
+  {
+    "text": "My Students"
+  },
+  {
+    "text": "Genie Completed Students"
+  },
+  {
+    "text": "Standard Filter",
+    "subMenu": [
+      {
+        "text": "UKI Fair"
+      },
+      {
+        "text": "Germany Q4' 24"
+      },
+      {
+        "text": "Edvoy Express"
+      },
+      {
+        "text": "Q1 2025 Pipeline"
+      }
+    ]
+  },
+  {
+    "text": "Custom Filter",
+    "subMenu": [
+      {
+        "text": "Application Intakes"
+      },
+      {
+        "text": "New Students"
+      }
+    ]
+  }
+];
+
+const handleMenuItem = (item: any) => {
+  console.log("Menu clicked:", item);
+};
+
+const handleSubMenuItem = (subItem: any) => {
+  console.log("Submenu item clicked:", subItem);
+};
+
+const addAction = (e:Event) => {
+  console.log("Action Item clicked:" + e)
+}
+</script>
+<template>
+  <EUIMultiDropdown :menu-items="menuItems" @menuItem="handleMenuItem" @subMenuItem="handleSubMenuItem" @action-item="addAction">
+    <template #dropdownName="{ open }">
+      <span>{{ title }}</span>
+      <ChevronDownStroke
+        :class="open ? '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"
+      />
+    </template>
+    <template #menu="{menuitem}">
+      {{menuitem.text}}
+    </template>
+    <template #actionName>
+        + Add Custom Filter
+    </template>
+    <template #submenu="{subItem}">
+      {{subItem.text}}
+    </template>
+  </EUIMultiDropdown>
+</template>`,
+      },
+    },
+  });

package/src/components/dropdown/EUIMultiDropdown.vue

@@ -38,6 +38,9 @@
         <!-- 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-36 max-w-64 w-max">
           <div class="p-2 bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300">
+            <div v-if="item.enableAction" class="px-4 py-2 mb-2 -mx-2 -mt-2 text-sm font-medium text-gray-900 bg-purple-100 rounded-t-lg" @click.prevent="$emit('actionItem', 'action')">
+              <slot name="actionName">{{ 'Action Name' }}</slot>
+             </div>
               <div
                 v-for="subItem in item.subMenu"
                 :key="subItem.text"
@@ -64,6 +67,7 @@ import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
 interface MenuItem {
   text: string;
   subMenu?: MenuItem[];
+  enableAction?:boolean;
 }
 
 defineProps({
@@ -95,7 +99,8 @@ defineProps({
         subMenu: [
           { text: "Application Intakes" },
           { text: "New Students" }
-        ]
+        ],
+        enableAction: true
       }
     ]
   },
@@ -106,7 +111,7 @@ const isOpen = ref(false);
 const activeMenuItem = ref<string | null>(null);
 const dropdownButton = ref<HTMLElement | null>(null);
 
-defineEmits(['subMenuItem', 'menuItem'])
+defineEmits(['subMenuItem', 'menuItem', 'actionItem'])
 
 const toggleDropdown = () => {
   isOpen.value = !isOpen.value;

package/src/components/table/EUITable.vue

@@ -1,12 +1,11 @@
 <template>
   <div>
-     <template v-if="loading">
-        <div :class="['overflow-hidden relative z-0 isolate bg-white backdrop-blur border border-gray-200 rounded-xl transition-colors duration-150 ease-in-out', tableHeight ? tableHeight : 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]']">
-          <div class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0">
-            <EUICircleLoader />
-          </div>
-        </div>
-      </template>
+    <Transition name="fade" mode="out-in">
+      <div v-if="loading" :class="['overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl border border-gray-50', tableHeight ? tableHeight : 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]']">
+      <div class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0">
+        <EUICircleLoader />
+      </div>
+    </div>
     <div v-else class="relative w-full mx-auto overflow-hidden">
       <div
         id="student-table"
@@ -178,6 +177,7 @@
         </template>
       </div>
     </div>
+    </Transition>
   </div>
 </template>