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

package/src/components/searchexpand/EUISearchExpand.vue

@@ -1,4 +1,5 @@
 <template>
+
   <div class="relative rounded-full size-10">
     <div class="absolute top-0 right-0">
       <div
@@ -18,37 +19,11 @@
             <SearchBigZoomIn
               class="absolute text-current size-6 top-2 left-2"
             />
-
-            <button
-              v-if="isExpanded"
-              :class="
-                inputValue ? '  absolute inset-y-0 right-3  ' : ' hidden '
-              "
-              @click="(searchQuery=''), emit('update:modelValue', '')"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="size-5"
-              >
-                <!--         <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
- -->
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M6 18 18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-
             <input
               v-if="isExpanded"
               v-model="searchQuery"
               ref="input"
-              :type="type === 'search' ? 'text' : type"
+              type="search"
               placeholder="Search here..."
               class="h-10 text-sm font-medium text-gray-900 bg-transparent w-80 ps-10 pe-2 focus:outline-none"
               autocomplete="off"
@@ -63,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, PropType, ref, toRefs, watch } from "vue";
+import { onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
 import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
 
 const props = defineProps({
@@ -75,12 +50,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  type: {
-    type: String as PropType<
-      "text" | "number" | "email" | "password" | "search" 
-    >,
-    default: "text",
-  },
 });
 const { searchSync } = toRefs(props);
 const emit = defineEmits(["update:modelValue"]);
@@ -95,10 +64,6 @@ function expandInput() {
   input?.value?.focus();
 }
 
-const inputValue = computed(() => {
-  return props.modelValue === 0 ? true : !!props.modelValue;
-});
-
 function closeInput() {
   if (!searchQuery.value) {
     isExpanded.value = false;
@@ -114,15 +79,11 @@ function handleOutsideClick(event: MouseEvent) {
   }
 }
 
-watch(
-  searchSync,
-  (newVal) => {
-    if (!newVal) {
-      closeInput();
-    }
-  },
-  { immediate: true, deep: true }
-);
+watch(searchSync, (newVal) => {
+  if (!newVal) {
+    closeInput();
+  }
+}, {immediate: true, deep:true});
 
 onMounted(() => {
   document.addEventListener("click", handleOutsideClick);

package/src/components/select/EUISelect.vue

@@ -45,11 +45,7 @@
       @open="open"
     >
       <!-- :clearable="isUseCustomSelect ? clearable : undefined" -->
-      <!-- Allow parent to override header slot -->
-      <template v-if="$slots.header" #header>
-        <slot name="header"></slot>
-      </template>
-      <template v-if="inputFilled && !$slots.header" #header>
+      <template v-if="inputFilled" #header>
         <div
           :class="[
             inputValue
@@ -63,14 +59,7 @@
           {{ startCaseText(label) || "Select" }}
         </div>
       </template>
-
-
-      <!-- Allow parent to override selected-option slot -->
-      <template v-if="$slots['selected-option']" #selected-option="slotProps">
-        <slot name="selected-option" v-bind="slotProps as Record<string, any>"></slot>
-      </template>
-
-      <template v-if="!$slots['selected-option']" #selected-option="item">
+      <template #selected-option="item">
         <div
           :class="
             isUseCustomSelect
@@ -88,17 +77,10 @@
             "
             :alt="item[fieldName]"
           />
-          {{
-            isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName]
-          }}
+          {{ isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName] }}
         </div>
       </template>
-
-      <!-- Allow parent to override option slot -->
-      <template v-if="$slots.option" #option="option">
-        <slot name="option" v-bind="option  as Record<string, any>"></slot> <!-- Passing the 'option' data -->
-      </template>
-      <template v-else #option="item">
+      <template #option="item">
         <div class="flex items-center">
           <img
             v-if="(item as any).iconlink"
@@ -107,30 +89,17 @@
             :alt="item[fieldName]"
           />
 
-          {{
-            isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName]
-          }}
+          {{ isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName] }}
         </div>
       </template>
-
-      <!-- Allow parent to override spinner slot -->
-      <template v-if="$slots.spinner" #spinner="{ loading: _loading }">
-        <slot name="spinner" :loading="_loading || loading"></slot>
-      </template>
-      <template v-else #spinner="{ loading: _loading }">
+      <template #spinner="{ loading: _loading }">
         <div
           v-if="loading || _loading"
           style="border-left-color: rgba(107, 30, 190, 0.71)"
           class="vs__spinner"
         />
       </template>
-
-      <!-- Allow parent to override list-header slot -->
-      <template v-if="$slots['list-header']" #list-header>
-        <slot name="list-header"></slot>
-      </template>
-
-      <template v-else-if="isSelectAll" #list-header>
+      <template v-if="isSelectAll" #list-header>
         <div v-if="items.length !== selected?.length">
           <button
             class="w-full px-6 py-2 text-sm font-medium text-gray-600 transition duration-75 hover:font-bold hover:text-gray-900 text-start"
@@ -140,13 +109,7 @@
           </button>
         </div>
       </template>
-
-      <!-- Allow parent to override open-indicator slot -->
-      <template v-if="$slots['open-indicator']" #open-indicator="attributes">
-        <slot name="open-indicator" v-bind="attributes as Record<string, any>"></slot>
-      </template>
-
-      <template v-else #open-indicator="{ attributes }">
+      <template #open-indicator="{ attributes }">
         <span v-bind="attributes as Record<string, any>"
           ><ChevronBigDown class="text-current size-6"
         /></span>
@@ -317,10 +280,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  fieldName: {
+  fieldName:{
     type: String,
-    default: "name",
-  },
+    default: 'name',
+  }
 });
 
 const {
@@ -335,7 +298,7 @@ const {
   isStartCaseText,
   isSelectAll,
   required,
-  fieldName,
+  fieldName
 } = toRefs(props);
 const emit = defineEmits([
   "update:modelValue",
@@ -344,8 +307,7 @@ const emit = defineEmits([
   "deselected",
   "search",
   "tag",
-  "selectedOption",
-  "open",
+  "selectedOption",'open'
 ]);
 
 const selectAll = (e: Event) => {
@@ -548,9 +510,12 @@ const selectedLimit = () => {
   }
 };
 
-const open = () => {
-  emit("open");
-};
+
+const open=()=>{
+  emit('open')
+
+}
+
 </script>
 <style lang="scss">
 .scrollbar {

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/EUITable.vue

@@ -33,7 +33,7 @@
             <thead
               class="sticky top-0 left-0 z-20 bg-gray-100 before:-bottom-px before:left-0 before:absolute before:h-px before:w-full before:bg-gray-300"
             >
-              <tr >
+              <tr>
                 <template v-if="checkable">
                   <th class="checkable">
                     <EUITableCheckbox
@@ -148,7 +148,7 @@
                       isScrolled && headerIndex === 0 ? stickyClass.body : '',
                       activeRowIndex==rowIndex?'!bg-purple-50 !ring-1 !ring-purple-100 !ring-inset':''
                     ]"
-                    
+
                   >
                     <slot
                       :name="`item.${header?.value}`"
@@ -263,7 +263,7 @@ const props = defineProps({
   defaultSortDirection: { type: String, default: "asc" },
   search: { type: String, default: "" },
   perPage: { type: Number, default: 5 },
-  
+
   activeRowIndex: { type: Number, default: null },
   currentPage: { type: Number, default: 0 },
   total: { type: Number, default: 0 },

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/components/table/UTable.vue

@@ -153,7 +153,7 @@
                   v-for="(header, headerIndex) in headers"
                     :key="headerIndex"
                     :style="bodyStyle(header)"
-                    :class="[isScrolled && headerIndex === 0 ? stickyClass.body : null]"
+                    :class="[isScrolled && headerIndex === 0 ? stickyClass.body : null,{'!bg-purple-100': activeRowIndex==rowIndex}]"
                   >
                     <slot
                       :name="`item.${header?.value}`"

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;
       }
     }
   }

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/selectSearch/EUISelectSearch.vue.d.ts

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

package/dist/selectSearch/EUISelectSearch.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUISelectSearch.vue.d.ts","sourceRoot":"","sources":["../../src/components/selectSearch/EUISelectSearch.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oIAAoI,CAAC;AAC3J,cAAc,oIAAoI,CAAC;AACnJ,eAAe,SAAS,CAAC"}