edvoyui-component-library-test-flight 0.0.103 → 0.0.104

package/dist/table/UCheckbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UCheckbox.vue.d.ts","sourceRoot":"","sources":["../../src/components/table/UCheckbox.vue"],"names":[],"mappings":"AACA,cAAc,4FAA4F,CAAC;AA6B3G,OAAO,qGAAqG,CAAC;;AAE7G,wBAAiF"}
+{"version":3,"file":"UCheckbox.vue.d.ts","sourceRoot":"","sources":["../../src/components/table/UCheckbox.vue"],"names":[],"mappings":"AACA,cAAc,4FAA4F,CAAC;AA4B3G,OAAO,qGAAqG,CAAC;;AAE7G,wBAAiF"}

package/package.json

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

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

@@ -6,8 +6,13 @@ import {
   EUIStudentPagination,
   EUIDashboardTable,
   EUIPagination,
+  UTable,
+  UCheckbox,
+  GrowthTable,
 } from "..";
 import {
+  growthTableData,
+  growthTableHeaders,
   studentData,
   studentHeader,
   tableData,
@@ -128,15 +133,15 @@ export const StudentTable: Story = {
   },
   render: (args) => ({
     components: {
-      EUITable,
-      EUITableCheckbox,
+      UTable,
+      UCheckbox,
       EUIPageLimit,
       EUIStudentPagination,
     },
     setup() {
       return { args };
     },
-    template: `<EUITable v-bind="args">
+    template: `<UTable v-bind="args">
                   <template #item.firstName="{ row, rowIndex }">
                    <div class="space-y-0.5">
                     <div class="block text-sm font-medium leading-snug">
@@ -151,7 +156,7 @@ export const StudentTable: Story = {
                     {{ row?.activeUser?.user?.firstName }}
                     {{ row?.activeUser?.user?.lastName }}
                   </template>
-              </EUITable>`,
+              </UTable>`,
   }),
 };
 
@@ -192,4 +197,104 @@ export const DashboardTable: Story = {
                 </template>
           </EUIDashboardTable>`,
   }),
+};
+
+export const NormalTable: Story = {
+  args: {
+    headers: studentHeader,
+    items: studentData,
+    checkable: true,
+    paginated: true,
+    perPage: 10,
+    total: studentData.length,
+    currentPage: 1,
+  },
+  render: (args) => ({
+    components: {
+      EUITable,
+      EUITableCheckbox,
+      EUIPageLimit,
+      EUIStudentPagination,
+    },
+    setup() {
+      return { args };
+    },
+    template: `<EUITable v-bind="args">
+                  <template #item.firstName="{ row, rowIndex }">
+                   <div class="space-y-0.5">
+                    <div class="block text-sm font-medium leading-snug">
+                      {{row?.firstName + " " + row?.lastName }}
+                    </div>
+                    <div class="text-xs font-medium text-gray-900 leading-[normal]">
+                      {{ row?.referenceId }}
+                    </div>
+                  </div>
+                  </template>
+                  <template #item.activeUser="{ row, rowIndex }">
+                    {{ row?.activeUser?.user?.firstName }}
+                    {{ row?.activeUser?.user?.lastName }}
+                  </template>
+              </EUITable>`,
+  }),
+};
+
+export const DashboardGrowthTable: Story = {
+  args: {
+    checkable: true,
+    paginated: true,
+    perPage: 10,
+    total: studentData.length,
+    currentPage: 1,
+    headers: growthTableHeaders,
+    items: growthTableData,
+  },
+  render: (args) => ({
+    components: {
+      GrowthTable,
+      EUITableCheckbox,
+      EUIPageLimit,
+      EUIPagination,
+    },
+    setup() {
+      return { args };
+    },
+    template: `<GrowthTable v-bind="args">
+                  <template #item.firstName="{ row, rowIndex }">
+                   <div class="space-y-0.5">
+                    <div class="block text-sm font-medium leading-snug">
+                      {{row?.firstName + " " + row?.lastName }}
+                    </div>
+                    <div class="text-xs font-medium text-gray-900 leading-[normal]">
+                      {{ row?.referenceId }}
+                    </div>
+                  </div>
+                  </template>
+
+                  <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" >{{ 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">{{ 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" >{{ 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" >{{ 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">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+    </GrowthTable>`,
+  }),
 };

package/src/components/table/UCheckbox.vue

@@ -2,7 +2,6 @@
   <label :class="classes">
     <input
       v-model="selected"
-      data-test="checkbox-toggle"
       type="checkbox"
       :value="value"
       v-bind="attrs"
@@ -101,26 +100,33 @@ export default {
 .ui-checkbox {
   @apply inline-flex items-center cursor-pointer;
   &__input {
-    @apply w-5 h-5 flex-shrink-0 border border-solid border-gray-200 bg-white appearance-none inline-block select-none cursor-pointer align-middle rounded relative;
+    @apply w-5 h-5 flex-shrink-0 border border-solid border-gray-200 bg-white appearance-none inline-block select-none cursor-pointer align-middle rounded relative before:content-[''] before:transform before:translate-x-1/2 before:-translate-y-1/2 before:z-[-1] before:absolute before:top-1/2 before:right-1/2 before:block before:size-9 before:rounded-full before:bg-violet-100 before:opacity-0 before:transition-opacity hover:before:opacity-75;
     &::after {
-      @apply absolute hidden border-solid inset-x-0 top-0 m-auto w-1.5 h-2.5 bottom-0.5;
+      @apply absolute hidden border-solid inset-x-0 top-0 m-auto w-1.5 h-2.5 bottom-0.5 scale-100;
       content: "";
-      border-width: 0 3px 3px 0;
+      border-width: 0 2px 2px 0;
       -webkit-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
       transform: rotate(45deg);
+      transform: translate3d(0, 1, 0);
+      transition: all 0.2s ease;
     }
     &:hover {
-      @apply bg-purple-100 border-purple-200;
+      @apply bg-purple-100 border-purple-500;
     }
     &:checked {
-      @apply bg-white border-purple-600;
+      transition: all 0.3s ease;
+      transform: translate3d(0, 1, 0);
+      @apply bg-purple-700 border-purple-700;
       &::after {
-        @apply block border-purple-700;
+        @apply block border-white;
+      }
+      &:focus {
+        @apply bg-purple-700;
       }
     }
     &:focus {
-      @apply outline-none border-2 border-purple-700 bg-purple-100;
+      @apply outline-none border-2 border-purple-700 bg-purple-200;
     }
     &:disabled {
       @apply bg-gray-300 border-gray-100 cursor-not-allowed;

package/src/style.scss

@@ -29,7 +29,7 @@
         @apply bg-transparent rounded-full;
       }
       &:hover::-webkit-scrollbar-thumb {
-        @apply bg-gray-400;
+        @apply bg-gray-300;
       }
     }
   }