edvoyui-component-library-test-flight 0.0.27 → 0.0.29

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

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

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=60a9ff29&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/table/EUITable.vue?vue&type=style&index=0&scoped=c13405e0&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.27",
+  "version": "0.0.29",
   "type": "module",
   "files": [
     "dist/",

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

@@ -39,6 +39,15 @@ const meta = {
         "Enables date range selection, allowing users to pick a start and end date.",
       defaultValue: false,
     },
+    multiCalendars: {
+      control: "boolean",
+      description: "Enables date range selection across multiple calendars.",
+      defaultValue: false,
+      table: {
+        type: { summary: "boolean" }, // Specifies the type in the docs table
+        defaultValue: { summary: "false" }, // Default value displayed in the table
+      },
+    },
     timePicker: {
       control: "boolean",
       description: "Allows time selection in addition to the date if true.",

package/src/components/datepicker/EUIDatepicker.vue

@@ -64,6 +64,7 @@
       auto-apply
       :hide-input-icon="true"
       position="left"
+      :multi-calendars="multiCalendars"
       />
     </div>
     <EUIErrorMessage :errors="errors" :name="name" />
@@ -119,6 +120,7 @@ const props = defineProps({
   disabled:Boolean,
   required: Boolean,
   range:Boolean,
+  multiCalendars:Boolean,
   inputFilled: {
     type:Boolean,
     default: false
@@ -170,7 +172,7 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
 <style lang="scss">
 .dp__theme_light {
     --dp-primary-color: rgba(139, 92, 246, 1);
-}
+  }
 
 .eui-datepicker {
   @apply min-w-56;
@@ -187,7 +189,6 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
         right: v-bind(clearIconRight);
     }
   }
-
   &.normal {
     .dp__main {
       .dp__input {
@@ -198,21 +199,24 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
       }
     }
   }
-
   .dp__range_end,
   .dp__range_start,
   .dp__active_date {
     background-color: var(--dp-primary-color);
     color: #fff;
   }
-
   .dp__today {
     border-color: var(--dp-primary-color);
   }
-
   .dp__action_select:hover {
     background-color: var(--dp-primary-color);
     color: #fff;
   }
 }
+  .dp__calendar_header {
+    @apply text-sm font-medium;
+  }
+  .dp__cell_inner {
+    @apply text-sm font-normal;
+  }
 </style>

package/src/components/delete.vue

@@ -21,6 +21,20 @@
 
 
     <div class="grid max-w-3xl gap-4 mx-auto mb-6 sm:grid-cols-3">
+
+        <div>
+      <EUIDatepicker
+        v-model:modelValue="datepickerRange"
+        label="Datepicker Range multi"
+        placeholder="Select Date here..."
+        :range="true"
+        :multi-calendars="true"
+        required
+        :icon="CalendarIcon"
+        iconType="startIcon"
+      />
+    </div>
+
     <div>
       <EUIDatepicker
         v-model:modelValue="datepickerRange"

package/src/components/table/EUIDashboardTable.vue

@@ -3,7 +3,7 @@
     <div class="relative w-full mx-auto overflow-hidden">
       <div
         id="dashboard-table"
-        class="overflow-auto max-h-[calc(100svh-13rem)] scrollbar--thin overscroll-none"
+        :class="['overflow-auto scrollbar--thin overscroll-none', tableHeight ? tableHeight : 'h-[calc(100svh-13rem)] max-h-[calc(100svh-13rem)]']"
         ref="tableContainer"
         @scroll="handleScroll"
       >
@@ -63,7 +63,7 @@
               <tr class="norecords">
                 <td :colspan="headers.length">
                   <div
-                    class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
+                    class="flex items-center justify-center min-h-96"
                   >
                     <EUICircleLoader />
                   </div>
@@ -114,10 +114,9 @@
                 <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
               </template>
             </template>
-
-            <template v-if="computedItems.length === 0">
+            <template v-else-if="computedItems.length === 0">
               <tr class="norecords">
-                <td :colspan="headers.length">
+                <td :colspan="checkable === true ? headers.length + 1 : headers.length">
                   <div
                     class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
                   >
@@ -216,7 +215,12 @@ const props = defineProps({
     default: () => () => false,
   },
   isRowCheckable: { type: Function, default: () => true },
-  tableLoading: { type: Boolean, default: true },
+  tableHeight: {
+    type: String,
+    required: false,
+    default: ""
+  },
+  tableLoading: { type: Boolean, default: false },
 });
 const {
   defaultSort,
@@ -238,9 +242,7 @@ const currentSortDir = ref(defaultSortDirection.value);
 const newCheckedRows = ref([...checkedRows.value]);
 const newCurrentPage = ref(currentPage.value);
 const lastCheckedRowIndex = ref();
-
 const limit = ref(props.perPage);
-
 const loading = computed(() => props.tableLoading);
 
 // Computed Property

package/src/components/table/EUITable.stories.ts

@@ -16,7 +16,7 @@ import {
 
 // Meta configuration for the EUItabs stories
 const meta = {
-  title: "Component/Table",
+  title: "Components/Table",
   component: EUITable,
   tags: ["autodocs"],
   argTypes: {
@@ -73,6 +73,11 @@ const meta = {
       description:
         "CSS height of the table (e.g., 'h-[calc(100svh-20rem)] max-h-[calc(100svh-20rem)]')",
     },
+    tableLoading: {
+      control: "boolean",
+      description:
+        "Controls the visibility of the table loader. Set to `true` to show the loading state.",
+    },
   },
 } satisfies Meta<typeof EUITable>;
 

package/src/components/table/EUITable.vue

@@ -88,7 +88,20 @@
             </tr>
           </thead>
           <tbody>
+            <template v-if="loading">
+              <tr class="norecords">
+                <td :colspan="headers.length">
+                  <div
+                    class="flex items-center justify-center min-h-96"
+                  >
+                    <EUICircleLoader />
+                  </div>
+                </td>
+              </tr>
+            </template>
+
             <template
+              v-else-if="computedItems.length > 0"
               v-for="(row, rowIndex) in computedItems"
               :key="`table-row-${rowIndex}`"
             >
@@ -123,9 +136,8 @@
                 <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
               </template>
             </template>
-          </tbody>
-          <tbody v-if="computedItems.length === 0">
-            <tr class="norecords">
+            <template v-else-if="computedItems.length === 0">
+              <tr class="norecords">
               <td :colspan="checkable === true ? headers.length + 1 : headers.length">
                 <div
                   class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
@@ -134,7 +146,9 @@
                 </div>
               </td>
             </tr>
+            </template>
           </tbody>
+
         </table>
       </div>
       <div
@@ -179,6 +193,7 @@ import EUITableCheckbox from "./EUITableCheckbox.vue";
 import EUIPageLimit from "./EUIPageLimit.vue";
 import EUIStudentPagination from "./EUIStudentPagination.vue";
 import { capitalizeText } from "../../utils/lodash";
+import EUICircleLoader from "../loader/EUICircleLoader.vue";
 
 interface Header {
   value: string;
@@ -216,6 +231,7 @@ const props = defineProps({
     required: false,
     default: ""
   },
+  tableLoading: { type: Boolean, default: false },
 });
 
 const {
@@ -233,14 +249,13 @@ const {
   customIsChecked,
 } = toRefs(props);
 
-
-
 const currentSort = ref(defaultSort.value);
 const currentSortDir = ref(defaultSortDirection.value);
 const newCheckedRows = ref([...checkedRows.value]);
 const newCurrentPage = ref(currentPage.value);
 const lastCheckedRowIndex = ref();
 const limit = ref(props.perPage);
+const loading = computed(() => props.tableLoading);
 
 // Computed Property
 const filteredItems = computed(() => {