edvoyui-component-library-test-flight 0.0.125 → 0.0.127

package/dist/tabs/EUITabs.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=script&setup=true&lang.ts";
-import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=475560d8&lang.css";
+import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=5c1fa5b2&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.125",
+  "version": "0.0.127",
   "type": "module",
   "files": [
     "dist/",

package/src/components/table/UTable.scss

@@ -12,12 +12,12 @@
     100% 20px;
   background-attachment: local, local, scroll, scroll, local, scroll;
 
-  table {
+  & > table {
     @apply table table-auto border-separate border-spacing-0 box-border w-full;
-    thead {
+  & > thead {
       @apply sticky top-0 left-0 z-20 before:-bottom-px before:left-0 before:absolute before:h-px before:w-full before:bg-gray-300 rounded-xl;
-      tr {
-        th {
+     & > tr {
+       & > th {
           @apply bg-gray-50 text-sm text-gray-700 text-left first-letter:uppercase border border-b-0 border-l-0 border-solid border-gray-200/50 whitespace-nowrap last-of-type:rounded-tr-lg first-of-type:rounded-tl-lg first:border-l last:border-r font-bold snap-start snap-always h-10;
           transition: all 0.15s ease-out;
           &:first-of-type.checkable {
@@ -26,8 +26,8 @@
         }
       }
     }
-    tbody {
-      tr:not(.norecords) {
+  & > tbody {
+    & > tr:not(.norecords, .row-expanded) {
         @apply transition-all duration-100 ease-in-out last:mb-px;
         &:hover {
           transition: all 0.15s ease-out;
@@ -46,6 +46,10 @@
           }
         }
       }
+
+      & > tr.row-expanded {
+        @apply bg-gray-50;
+      }
     }
   }
 }

package/src/components/table/UTable.vue

@@ -19,10 +19,10 @@
       <div v-else class="relative max-w-full mx-auto overflow-hidden">
         <div
           :class="[
-            'ui-table scrollbar--hide overscroll-auto',
+            'ui-table scrollbar--auto',
             computedItems.length === 0
               ? 'overflow-hidden pointer-events-none'
-              : 'overflow-auto',
+              : 'overflow-scroll',
             tableHeight
               ? tableHeight
               : 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]',
@@ -182,7 +182,7 @@
                   </td>
                 </tr>
                 <template v-if="tableExpanded">
-                  <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
+                  <slot name="expanded" :row="row" :rowIndex="rowIndex" :headerLength="headers.length"></slot>
                 </template>
               </template>
               <template v-else-if="computedItems.length === 0">

package/src/components/table/UTableview.vue

@@ -1,55 +1,145 @@
 <template>
-    <div>
-        <!-- <pre class="text-[0.5rem] p-2 border border-gray-300 rounded-lg max-h-72 overflow-y-auto">{{ selectedRows.map(x => x?._id)}}</pre> -->
-        <UTable :checkable="true"
-          :table-loading="loading"
-          v-model:selectedRows.sync="selectedRows"
-          paginated
-          :checked-rows.sync="checkedRows"
-          backend-pagination
-          :per-page="limit"
-          :headers="studentHeader"
-          :items="studentData"
-          :total="studentData.length"
-          :default-sort-direction="defaultSortOrder"
-          default-sort=""
-          :current-page="offset"
-          table-height="h-[calc(100svh-15rem)] max-h-[calc(100svh-15rem)]"
-          @changePage="onPageChange"
-          @sort="onSort"
-          @mouseenter="select"
-          @mouseleave="(selectedIndex = null), (selected = null)">
-            <template #[`item.firstName`]="{ row, rowIndex }">
-              <div class="space-y-0.5">
-                <div class="block text-sm font-medium leading-snug">
-                  {{rowIndex + capitalizeText(row?.firstName) + " " + capitalizeText(row?.lastName) }}
-                </div>
-                <div class="text-xs font-medium text-gray-900 leading-[normal]">
-                  {{ row?.referenceId }}
-                </div>
-              </div>
-            </template>
-            <template #[`item.activeUser`]="{ row, rowIndex }">
-              {{ rowIndex }}
-              {{ row?.activeUser?.user?.firstName }}
-              {{ row?.activeUser?.user?.lastName }}
-            </template>
-      </UTable>
-    </div>
+  <div>
+    <!-- <pre class="text-[0.5rem] p-2 border border-gray-300 rounded-lg max-h-72 overflow-y-auto">{{ selectedRows.map(x => x?._id)}}</pre> -->
+    <UTable
+      :checkable="true"
+      :table-loading="loading"
+      v-model:selectedRows.sync="selectedRows"
+      paginated
+      :checked-rows.sync="checkedRows"
+      backend-pagination
+      :per-page="limit"
+      :headers="studentHeader"
+      :items="studentData"
+      :total="studentData.length"
+      :default-sort-direction="defaultSortOrder"
+      default-sort=""
+      :current-page="offset"
+      table-height="h-[calc(100svh-15rem)] max-h-[calc(100svh-15rem)]"
+      :table-expanded="true"
+      @changePage="onPageChange"
+      @sort="onSort"
+      @mouseenter="select"
+      @mouseleave="(selectedIndex = null), (selected = null)"
+    >
+      <template #[`item.firstName`]="{ row, rowIndex }">
+        <div class="space-y-0.5">
+          <div class="block text-sm font-medium leading-snug">
+            {{
+              rowIndex +
+              capitalizeText(row?.firstName) +
+              " " +
+              capitalizeText(row?.lastName)
+            }}
+          </div>
+          <div class="text-xs font-medium text-gray-900 leading-[normal]">
+            {{ row?.referenceId }}
+          </div>
+        </div>
+      </template>
+      <template #[`item.lifecycleStage`]="{ row, rowIndex }">
+        <div :key="rowIndex">
+          <div>{{ row?.lifecycleStage }}</div>
+          <button
+            type="button"
+            class="inline-flex items-center gap-2 py-0.5 text-xs font-medium text-gray-700 bg-gray-300 outline-none ps-2 pe-0.5 rounded-3xl focus:outline-none"
+            @click="rowToggle(rowIndex)"
+          >
+            Foundation
+            <span
+              class="inline-flex items-center text-xss font-bold gap-1 ps-2 pe-1 py-0.5 bg-gray-100 rounded-3xl min-w-7"
+              >2 <ChevronBigDown class="transition-all duration-300 ease-in-out transform size-3" :class="activeRowIndex === rowIndex ? '-rotate-180': 'rotate-0'" />
+            </span>
+          </button>
+        </div>
+      </template>
+
+      <template #[`item.activeUser`]="{ row, rowIndex }">
+        {{ rowIndex }}
+        {{ row?.activeUser?.user?.firstName }}
+        {{ row?.activeUser?.user?.lastName }}
+      </template>
+
+      <template #expanded="{ row, rowIndex, headerLength }">
+        <tr v-if="rowIndex === activeRowIndex" class="row-expanded" :key="`${row}-${rowIndex}-val`">
+          <td :colspan="headerLength">
+            <table
+              class="px-12 border-separate table-auto max-w-max border-spacing-x-0 border-spacing-y-2"
+            >
+              <tr
+                class="rounded-lg group bg-white hover:bg-violet-50 hover:ring-1 ring-violet-300 hover:shadow-[0px_1px_2px_0px_#4B55631A,0px_2px_2px_0px_#4B556314]"
+              >
+                <td
+                  v-for="(data, idx) in sqlApplication"
+                  :key="`data-${idx}`"
+                  class="py-2.5 px-3 text-sm text-gray-700 w-40"
+                  :class="
+                    idx === 0
+                      ? 'rounded-l-lg'
+                      : idx === sqlApplication.length - 1
+                      ? 'rounded-r-lg'
+                      : ''
+                  "
+                >
+                  {{ data }}
+                </td>
+              </tr>
+
+              <tr
+                class="rounded-lg group bg-white hover:bg-violet-50 hover:ring-1 ring-violet-300 hover:shadow-[0px_1px_2px_0px_#4B55631A,0px_2px_2px_0px_#4B556314]"
+              >
+                <td
+                  v-for="(data, idx) in sqlApplication"
+                  :key="`data-${idx}`"
+                  class="py-2.5 px-3 text-sm text-gray-700 w-40"
+                  :class="
+                    idx === 0
+                      ? 'rounded-l-lg'
+                      : idx === sqlApplication.length - 1
+                      ? 'rounded-r-lg'
+                      : ''
+                  "
+                >
+                  {{ data }}
+                </td>
+              </tr>
+
+              <tr
+                class="rounded-lg group bg-white hover:bg-violet-50 hover:ring-1 ring-violet-300 hover:shadow-[0px_1px_2px_0px_#4B55631A,0px_2px_2px_0px_#4B556314]"
+              >
+                <td
+                  v-for="(data, idx) in sqlApplication"
+                  :key="`data-${idx}`"
+                  class="py-2.5 px-3 text-sm text-gray-700 w-40"
+                  :class="
+                    idx === 0
+                      ? 'rounded-l-lg'
+                      : idx === sqlApplication.length - 1
+                      ? 'rounded-r-lg'
+                      : ''
+                  "
+                >
+                  {{ data }}
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+      </template>
+    </UTable>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref} from 'vue';
-import UTable from './UTable.vue';
-import {
-  studentData,
-  studentHeader,
-} from "../../data/table";
-import { capitalizeText } from '../../utils/lodash';
+import { ref } from "vue";
+import UTable from "./UTable.vue";
+import { studentData, studentHeader } from "../../data/table";
+import { capitalizeText } from "../../utils/lodash";
+import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
 
 //TODO: Dashboard Table
-const selectedRows = ref([])
-const loading = ref(false)
+const selectedRows = ref([]);
+const loading = ref(false);
 const checkedRows = ref([]);
 const defaultSortOrder = ref("asc");
 const limit = ref(5);
@@ -63,7 +153,7 @@ const select = (_item: any, index: any) => {
 
 const onSort = (field: string, order: string) => {
   const modifier = order === "desc" ? -1 : 1;
-  studentData.sort((a:any, b:any) => {
+  studentData.sort((a: any, b: any) => {
     if (a[field] < b[field]) return -1 * modifier;
     if (a[field] > b[field]) return 1 * modifier;
     return 0;
@@ -72,15 +162,23 @@ const onSort = (field: string, order: string) => {
 
 const onPageChange = (offsetData: number) => {
   offset.value = offsetData;
-  loading.value = true
+  loading.value = true;
   console.log("@changePage:", offsetData);
-   setTimeout(() => {
-    loading.value = false
+  setTimeout(() => {
+    loading.value = false;
   }, 800);
 };
 
-</script>
+const sqlApplication = ref(["Application 1", "Ready to Apply", "Mar 2025"]);
 
-<style scoped>
+const activeRowIndex = ref()
+const rowToggle = (index:any) => {
+  if(activeRowIndex.value === index){
+    activeRowIndex.value = null
+  } else {
+    activeRowIndex.value = index
+  }
+}
+</script>
 
-</style>
+<style scoped></style>

package/src/components/tabs/EUITabs.vue

@@ -205,12 +205,14 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (event: "update:activeTab", activeTab: Tab): void;
+  (event: "update:defaultActiveIndex", defaultActiveIndex: number): void;
 }>();
 
 const activeTabIndex = ref(props.defaultActiveIndex ?? 0);
 
 const selectTab = (index: number) => {
   activeTabIndex.value = index;
+  emit("update:defaultActiveIndex", activeTabIndex.value );
   emit("update:activeTab", props.tabs[activeTabIndex.value]);
 };
 
@@ -218,6 +220,8 @@ watch(
   () => props.defaultActiveIndex,
   (newIndex) => {
     activeTabIndex.value = newIndex ?? 0;
+  },{
+    immediate:true
   }
 );
 </script>

package/src/data/table.ts

@@ -582,7 +582,7 @@ export const studentHeader = [
   {
     value: "lifecycleStage",
     name: "Lifecycle",
-    width: 120,
+    width: 180,
     sortable: true,
   },
   {

package/src/style.scss

@@ -32,119 +32,155 @@
         @apply bg-gray-300;
       }
     }
-  }
-}
 
-@layer base {
-    html {
-        font-family: "Inter", "Gilroy", -apple-system, system-ui, sans-serif;
-    }
-    @font-face {
-        font-family: "Gilroy";
-        src: url("./assets/fonts/gilroy/GilroyRegular/font.woff2") format("woff2"),
-          url("./assets/fonts/gilroy/GilroyRegular/font.woff") format("woff");
-        font-weight: 400;
-        font-style: normal;
-        font-display: swap;
-      }
-      @font-face {
-        font-family: "Gilroy";
-        src: url("./assets/fonts/gilroy/GilroyMedium/font.woff2") format("woff2"),
-          url("./assets/fonts/gilroy/GilroyMedium/font.woff") format("woff");
-        font-weight: 500;
-        font-style: normal;
-        font-display: swap;
-      }
-      @font-face {
-        font-family: "Gilroy";
-        src: url("./assets/fonts/gilroy/GilroySemiBold/font.woff2") format("woff2"),
-          url("./assets/fonts/gilroy/GilroySemiBold/font.woff") format("woff");
-        font-weight: 600;
-        font-style: normal;
-        font-display: swap;
-      }
-      @font-face {
-        font-family: "Gilroy";
-        src: url("./assets/fonts/gilroy/GilroyBold/font.woff2") format("woff2"),
-          url("./assets/fonts/gilroy/GilroyBold/font.woff") format("woff");
-        font-weight: 700;
-        font-style: normal;
-        font-display: swap;
-      }
-      @font-face {
-        font-family: "Gilroy";
-        src: url("./assets/fonts/gilroy/GilroyExtraBold/font.woff2") format("woff2"),
-          url("./assets/fonts/gilroy/GilroyExtraBold/font.woff") format("woff");
-        font-weight: 800;
-        font-style: normal;
-        font-display: swap;
-      }
-      @font-face {
-        font-family: "Gilroy";
-        src: url("./assets/fonts/gilroy/GilroyBoldItalic/font.woff2") format("woff2"),
-          url("./assets/fonts/gilroy/GilroyBoldItalic/font.woff") format("woff");
-        font-weight: 900;
-        font-style: italic;
-        font-display: swap;
+    &--auto {
+      @apply hover:overflow-scroll transition duration-200 ease-in overflow-auto overscroll-auto;
+      scrollbar-color: transparent transparent;
+      &::-webkit-scrollbar-track,
+      &::-webkit-scrollbar-thumb {
+        visibility: hidden;
+        transition: 0.3s all linear;
       }
-      @font-face {
-        font-family: "Gilroy";
-        src: url("./assets/fonts/gilroy/GilroyExtraBold/font.woff2") format("woff2"),
-          url("./assets/fonts/gilroy/GilroyExtraBold/font.woff") format("woff");
-        font-weight: 900;
-        font-style: normal;
-        font-display: swap;
+       &::-webkit-scrollbar-button {
+        display: none;
       }
 
-      @font-face {
-        font-family: "Inter";
-        font-style: italic;
-        font-weight: 400;
-        font-display: swap;
-        src: url("./assets/fonts/inter/Inter-Italic.woff2?v=3.19") format("woff2"),
-          url("./assets/fonts/inter/Inter-Italic.woff?v=3.19") format("woff");
+      &:hover {
+        scrollbar-color: initial;
+        &::-webkit-scrollbar-track,
+        &::-webkit-scrollbar-thumb {
+          visibility: visible;
+        }
+        &::-webkit-scrollbar {
+          @apply size-[0.1875rem];
+        }
+        &::-webkit-scrollbar-track {
+          @apply bg-inherit rounded-full;
+        }
+        &::-webkit-scrollbar-thumb {
+           @apply bg-gray-700/50 rounded-3xl;
+        }
+        &:hover::-webkit-scrollbar-thumb {
+          @apply bg-gradient-to-b from-gray-100 to-gray-900 rounded-3xl;
+        }
       }
+    }
+  }
+}
 
-      @font-face {
-        font-family: "Inter";
-        font-style: normal;
-        font-weight: 500;
-        font-display: swap;
-        src: url("./assets/fonts/inter/Inter-Medium.woff2?v=3.19") format("woff2"),
-          url("./assets/fonts/inter/Inter-Medium.woff?v=3.19") format("woff");
-      }
-      @font-face {
-        font-family: "Inter";
-        font-style: italic;
-        font-weight: 500;
-        font-display: swap;
-        src: url("../fonts/inter/Inter-MediumItalic.woff2?v=3.19") format("woff2"),
-          url("../fonts/inter/Inter-MediumItalic.woff?v=3.19") format("woff");
-      }
+@layer base {
+  html {
+    font-family: "Inter", "Gilroy", -apple-system, system-ui, sans-serif;
+  }
+  @font-face {
+    font-family: "Gilroy";
+    src: url("./assets/fonts/gilroy/GilroyRegular/font.woff2") format("woff2"),
+      url("./assets/fonts/gilroy/GilroyRegular/font.woff") format("woff");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Gilroy";
+    src: url("./assets/fonts/gilroy/GilroyMedium/font.woff2") format("woff2"),
+      url("./assets/fonts/gilroy/GilroyMedium/font.woff") format("woff");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Gilroy";
+    src: url("./assets/fonts/gilroy/GilroySemiBold/font.woff2") format("woff2"),
+      url("./assets/fonts/gilroy/GilroySemiBold/font.woff") format("woff");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Gilroy";
+    src: url("./assets/fonts/gilroy/GilroyBold/font.woff2") format("woff2"),
+      url("./assets/fonts/gilroy/GilroyBold/font.woff") format("woff");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Gilroy";
+    src: url("./assets/fonts/gilroy/GilroyExtraBold/font.woff2") format("woff2"),
+      url("./assets/fonts/gilroy/GilroyExtraBold/font.woff") format("woff");
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Gilroy";
+    src: url("./assets/fonts/gilroy/GilroyBoldItalic/font.woff2")
+        format("woff2"),
+      url("./assets/fonts/gilroy/GilroyBoldItalic/font.woff") format("woff");
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Gilroy";
+    src: url("./assets/fonts/gilroy/GilroyExtraBold/font.woff2") format("woff2"),
+      url("./assets/fonts/gilroy/GilroyExtraBold/font.woff") format("woff");
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+  }
 
-      @font-face {
-        font-family: "Inter";
-        font-style: normal;
-        font-weight: 600;
-        font-display: swap;
-        src: url("./assets/fonts/inter/Inter-SemiBold.woff2?v=3.19") format("woff2"),
-          url("./assets/fonts/inter/Inter-SemiBold.woff?v=3.19") format("woff");
-      }
-      @font-face {
-        font-family: "Inter";
-        font-style: italic;
-        font-weight: 600;
-        font-display: swap;
-        src: url("./assets/fonts/inter/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
-          url("./assets/fonts/inter/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
-      }
+  @font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url("./assets/fonts/inter/Inter-Italic.woff2?v=3.19") format("woff2"),
+      url("./assets/fonts/inter/Inter-Italic.woff?v=3.19") format("woff");
+  }
 
-      @font-face {
-        font-family: "Inter";
-        font-style: normal;
-        font-weight: 700;
-        font-display: swap;
-        src: url("./assets/fonts/inter/Inter-Bold.woff2?v=3.19") format("woff2"),
-          url("./assets/fonts/inter/Inter-Bold.woff?v=3.19") format("woff");
-      }
-}
+  @font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("./assets/fonts/inter/Inter-Medium.woff2?v=3.19") format("woff2"),
+      url("./assets/fonts/inter/Inter-Medium.woff?v=3.19") format("woff");
+  }
+  @font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url("../fonts/inter/Inter-MediumItalic.woff2?v=3.19") format("woff2"),
+      url("../fonts/inter/Inter-MediumItalic.woff?v=3.19") format("woff");
+  }
+
+  @font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url("./assets/fonts/inter/Inter-SemiBold.woff2?v=3.19") format("woff2"),
+      url("./assets/fonts/inter/Inter-SemiBold.woff?v=3.19") format("woff");
+  }
+  @font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url("./assets/fonts/inter/Inter-SemiBoldItalic.woff2?v=3.19")
+        format("woff2"),
+      url("./assets/fonts/inter/Inter-SemiBoldItalic.woff?v=3.19")
+        format("woff");
+  }
+
+  @font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url("./assets/fonts/inter/Inter-Bold.woff2?v=3.19") format("woff2"),
+      url("./assets/fonts/inter/Inter-Bold.woff?v=3.19") format("woff");
+  }
+}