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

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

@@ -1,8 +1,6 @@
 <template>
   <div>
-  
-    <div class=" overflow-hidden overflow-x-scroll">
-      <div
+    <div
       v-if="tabStyle === 'design'"
       class="inline-flex flex-row items-center justify-start px-[0.25rem] min-h-[34px] mb-0.5 bg-gray-100 rounded-[0.625rem] ring-1 ring-gray-200/75 gap-2"
     >
@@ -16,7 +14,6 @@
       :class="[
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab ? ' rounded-t-lg !bg-[#EDE9FE] ' : '',
-          'flex-shrink-0'
         ]"
         role="tab"
         tabindex="-1"
@@ -83,7 +80,6 @@
             : 'border-transparent text-gray-500',
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-0'
         ]"
         @click="selectTab(tabindex)"
       >
@@ -119,7 +115,6 @@
             : 'border-transparent text-gray-500 z-0',
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-0'
         ]"
         @click="selectTab(tabindex)"
       >
@@ -133,6 +128,7 @@
         </slot>
       </button>
     </div>
+
     <div v-else class="flex items-center gap-1 p-2 transition-all duration-100">
       <button
         v-for="(tab, tabindex) in tabs"
@@ -149,7 +145,6 @@
             : 'border-white hover:bg-gray-50 text-gray-700',
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-0'
         ]"
         @click="selectTab(tabindex)"
       >
@@ -163,9 +158,6 @@
         </slot>
       </button>
     </div>
-    </div>
-
-  
     <slot name="content" :active-tab="tabs[activeTabIndex]">
       <div
         :class="[

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");
+  }
+}

package/dist/EUIButton.vue.d.ts

@@ -1,5 +0,0 @@
-import _sfc_main from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=script&setup=true&lang.ts";
-export * from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=script&setup=true&lang.ts";
-import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=style&index=0&lang.scss";
-export default _sfc_main;
-//# sourceMappingURL=EUIButton.vue.d.ts.map

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,wHAAwH,CAAC;AAC/I,cAAc,wHAAwH,CAAC;AACvI,OAAO,sHAAsH,CAAC;AAC9H,eAAe,SAAS,CAAC"}

package/dist/textArea/EUITextArea.vue.d.ts

@@ -1,4 +0,0 @@
-import _sfc_main from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/textArea/EUITextArea.vue?vue&type=script&setup=true&lang.ts";
-export * from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/textArea/EUITextArea.vue?vue&type=script&setup=true&lang.ts";
-export default _sfc_main;
-//# sourceMappingURL=EUITextArea.vue.d.ts.map

package/dist/textArea/EUITextArea.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUITextArea.vue.d.ts","sourceRoot":"","sources":["../../src/components/textArea/EUITextArea.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4HAA4H,CAAC;AACnJ,cAAc,4HAA4H,CAAC;AAC3I,eAAe,SAAS,CAAC"}