edvoyui-component-library-test-flight 0.0.136 → 0.0.138

package/src/components/table/GrowthTable.vue

@@ -65,17 +65,18 @@
                       }}</template>
                       <div
                         v-else
-                        class="bg-violet-600 text-white rounded-[0.625rem] px-3 py-2"
+                        class="bg-violet-600 text-white rounded-[0.625rem] px-3 py-2 w-full"
                       >
                         <div class="mb-2">
                           {{
                             capitalizeText(header?.text ?? header.name ?? "")
                           }}
                         </div>
-                        <div class="space-x-3">
+                        <div class="flex items-center justify-start max-w-full gap-4">
                           <span
                             v-for="(data, idx) in header?.activeYear"
                             :key="`year_${idx}`"
+                            class="min-w-9"
                             >{{ data }}</span
                           >
                         </div>
@@ -83,7 +84,7 @@
                     </slot>
                     <slot name="headerOptionalItem"></slot>
                     <SortArrow
-                      v-if="header?.sortable"
+                      v-if="header?.sortable && !header?.activeYear"
                       :class="[
                         'transform duration-100 transition-all',
                         currentSort === header.value
@@ -552,7 +553,7 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
     tfoot tr {
       @apply snap-x snap-mandatory;
       th {
-        @apply snap-always snap-start last-of-type:rounded-r-xl first-of-type:rounded-l-xl;
+        @apply snap-always snap-start last-of-type:rounded-r-xl first-of-type:rounded-l-xl font-semibold;
         &:first-of-type.empty {
           @apply table-cell min-h-10 px-2 max-w-[45px] w-[45px] sticky left-0 top-0 z-20 bg-[#FEF3C7];
         }

package/src/components/table/GrowthTableView.vue

@@ -1,6 +1,6 @@
 <!-- <template>
   <div class="max-w-screen-xl mx-auto">
-    <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>
+    <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>
     <GrowthTable
       checkable
       paginated
@@ -19,55 +19,55 @@
       @mouseleave="(selectedIndex = null), (selected = null)"
     >
 
-          <template #[`item.active_allagents`]="{ row, rowIndex }">
-        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
-           <span v-for="(data, idx) in row?.active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+      <template #[`item.active_allagents`]="{ row, rowIndex }">
+        <div class=" bg-violet-100 px-3 rounded-[0.625rem] w-full py-2 h-full flex items-center gap-4 justify-start">
+           <span v-for="(data, idx) in row?.active_allagents" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
         </div>
       </template>
       <template #[`item.active_active_allagents`]="{ row, rowIndex }">
-        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
-           <span v-for="(data, idx) in row?.active_active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+<div class="flex flex-row items-start gap-4 justify-between bg-violet-50 px-3 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_active_allagents" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
         </div>
       </template>
       <template #[`item.active_dormant`]="{ row, rowIndex }">
-        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
-           <span v-for="(data, idx) in row?.active_dormant" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        <div class="flex flex-row items-start gap-4 justify-between bg-violet-50 px-3 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_dormant" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
         </div>
       </template>
       <template #[`item.totalDepositCount`]="{ row, rowIndex }">
-        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
-           <span v-for="(data, idx) in row?.totalDepositCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        <div class="flex flex-row items-start gap-4 justify-between bg-violet-50 px-3 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.totalDepositCount" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
         </div>
       </template>
       <template #[`item.totalStudentCount`]="{ row, rowIndex }">
-        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
-           <span v-for="(data, idx) in row?.totalStudentCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        <div class="flex flex-row items-start gap-4 justify-between bg-violet-50 px-3 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.totalStudentCount" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
         </div>
       </template>
 
 <template #[`footer.active_allagents`]="{ row, rowIndex }">
-        <div class="flex flex-row items-center gap-4 justify-between bg-[#FCD34D] pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
-           <span v-for="(data, idx) in row?.active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        <div class="flex items-center max-w-full gap-4 justify-start bg-[#FCD34D] px-3 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_allagents" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
         </div>
       </template>
       <template #[`footer.active_active_allagents`]="{ row, rowIndex }">
-        <div class="flex flex-row items-center gap-4 justify-between bg-[#FCD34D] pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
-           <span v-for="(data, idx) in row?.active_active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        <div class="flex items-center max-w-full gap-4 justify-start bg-[#FCD34D] px-3 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_active_allagents" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
         </div>
       </template>
       <template #[`footer.active_dormant`]="{ row, rowIndex }">
-        <div class="flex flex-row items-center gap-4 justify-between bg-[#FCD34D] pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
-           <span v-for="(data, idx) in row?.active_dormant" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        <div class="flex items-center max-w-full gap-4 justify-start bg-[#FCD34D] px-3 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_dormant" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
         </div>
       </template>
       <template #[`footer.totalDepositCount`]="{ row, rowIndex }">
-        <div class="flex flex-row items-center gap-4 justify-between bg-[#FCD34D] pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
-           <span v-for="(data, idx) in row?.totalDepositCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        <div class="flex items-center max-w-full gap-4 justify-start bg-[#FCD34D] px-3 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.totalDepositCount" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
         </div>
       </template>
       <template #[`footer.totalStudentCount`]="{ row, rowIndex }">
-        <div class="flex flex-row items-center gap-4 justify-between bg-[#FCD34D] pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
-           <span v-for="(data, idx) in row?.totalStudentCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        <div class="flex items-center max-w-full gap-4 justify-start bg-[#FCD34D] px-3 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.totalStudentCount" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
         </div>
       </template>
     </GrowthTable>

package/src/components/table/ResizeTableview.vue

@@ -0,0 +1,198 @@
+<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> -->
+    <ColumnResizeTable
+      :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">
+            <div>
+              <table
+                class="px-12 border-separate table-auto max-w-max border-spacing-x-0 border-spacing-y-2"
+              >
+                <tbody>
+                  <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>
+                </tbody>
+              </table>
+            </div>
+          </td>
+        </tr>
+      </template>
+    </ColumnResizeTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { studentData, studentHeader } from "../../data/table";
+import { capitalizeText } from "../../utils/lodash";
+import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
+import ColumnResizeTable from "./ColumnResizeTable.vue";
+
+//TODO: Dashboard Table
+const selectedRows = ref([]);
+const loading = ref(false);
+const checkedRows = ref([]);
+const defaultSortOrder = ref("asc");
+const limit = ref(5);
+const offset = ref(1);
+const selectedIndex = ref<{ index: string } | null>(null);
+const selected = ref<{ index: string } | null>(null);
+
+const select = (_item: any, index: any) => {
+  selectedIndex.value = index;
+};
+
+const onSort = (field: string, order: string) => {
+  const modifier = order === "desc" ? -1 : 1;
+  studentData.sort((a: any, b: any) => {
+    if (a[field] < b[field]) return -1 * modifier;
+    if (a[field] > b[field]) return 1 * modifier;
+    return 0;
+  });
+};
+
+const onPageChange = (offsetData: number) => {
+  offset.value = offsetData;
+  loading.value = true;
+  console.log("@changePage:", offsetData);
+  setTimeout(() => {
+    loading.value = false;
+  }, 1000);
+};
+
+const sqlApplication = ref(["Application 1", "Ready to Apply", "Mar 2025"]);
+
+const activeRowIndex = ref();
+const rowToggle = (index: any) => {
+  if (activeRowIndex.value === index) {
+    activeRowIndex.value = null;
+  } else {
+    activeRowIndex.value = index;
+  }
+};
+</script>
+
+<style scoped></style>

package/src/components/tooltip/EUITooltip.vue

@@ -1,7 +1,9 @@
 <template>
-  <div ref="tooltipContainer" class="relative">
+  <div ref="tooltipContainer" class="relative cursor-default size-max">
     <div @mouseover="showTooltip" @mouseleave="hideTooltip">
-      <slot />
+      <slot>
+        <InformationCircleIcon class="text-current size-5" />
+      </slot>
     </div>
 
     <div v-if="isVisible" ref="tooltip" class="tooltip">
@@ -12,6 +14,7 @@
 </template>
 
 <script setup lang="ts">
+import { InformationCircleIcon } from "@heroicons/vue/24/outline";
 import { createPopper, Instance } from "@popperjs/core";
 import { PropType, ref, nextTick } from "vue";
 
@@ -62,7 +65,7 @@ const createPopperInstance = () => {
 
 <style lang="scss" scoped>
 .tooltip {
-  @apply block z-50 p-2 text-sm text-white bg-gray-900 shadow-md ring-1 ring-slate-950 ring-inset rounded shadow-gray-100 max-w-64 min-w-64 text-start;
+  @apply block z-50 px-3 py-2 text-sm font-light text-white/90 bg-gray-900 shadow-md ring-inset ring-1 ring-gray-950 rounded-lg shadow-gray-100 max-w-xs min-w-0 size-max text-start break-all max-h-96;
 }
 .arrow,
 .arrow::before {

package/src/data/table.ts

@@ -566,6 +566,7 @@ export const studentHeader = [
     name: "Student Name",
     width: 250,
     sortable: true,
+    resizable: true,
   },
   {
     value: "country.name",
@@ -584,6 +585,7 @@ export const studentHeader = [
     name: "Lifecycle",
     width: 180,
     sortable: true,
+    resizable: true,
   },
   {
     value: "acquisition",
@@ -602,12 +604,14 @@ export const studentHeader = [
     name: "Email",
     width: 200,
     sortable: false,
+    resizable: true,
   },
   {
     value: "activeUser",
     name: "Counselor",
     width: 200,
     sortable: false,
+    resizable: true,
   },
 ];
 

package/dist/EUIButton.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUIButton.vue.d.ts","sourceRoot":"","sources":["../src/components/button/EUIButton.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wGAAwG,CAAC;AAC/H,cAAc,wGAAwG,CAAC;AACvH,OAAO,sGAAsG,CAAC;AAC9G,eAAe,SAAS,CAAC"}

package/dist/telephone/EUITelephone.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUITelephone.vue.d.ts","sourceRoot":"","sources":["../../src/components/telephone/EUITelephone.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,8GAA8G,CAAC;AACrI,cAAc,8GAA8G,CAAC;AAC7H,OAAO,4GAA4G,CAAC;AACpH,eAAe,SAAS,CAAC"}