edvoyui-component-library-test-flight 0.0.30 → 0.0.32

package/package.json

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

package/src/components/HelloWorld.vue

@@ -13,8 +13,8 @@
   <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
     <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
 
-    <Delete />
 
+    <Delete />
     <div class="grid gap-4 sm:grid-cols-2 place-items-start">
       <div
         class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
@@ -827,6 +827,7 @@
             <div class="py-4">
       <EUITable
         :checkable="true"
+        :table-loading="loading"
         paginated
         :checked-rows.sync="checkedRows"
         backend-pagination
@@ -837,6 +838,7 @@
         :default-sort-direction="defaultSortOrder"
         default-sort=""
         :current-page="offset"
+        @changePage="onPageChange"
         @sort="onSort"
         @mouseenter="select"
         @mouseleave="(selectedIndex = null), (selected = null)"
@@ -896,9 +898,9 @@ import { capitalizeText } from "../utils/lodash";
 import ChevronDownStroke from '../assets/svg/ChevronDownStroke.vue';
 import EUIMultiDropdown from './dropdown/EUIMultiDropdown.vue';
 import Delete from "./delete.vue";
-
 const mobileNumber = ref("+91 8667444951");
 const datepicker = ref(new Date());
+const loading = ref(false)
 
 const form = reactive({
   input: "Lorem ipsum dolor sit",
@@ -930,6 +932,15 @@ const onSort = (field: string, order: string) => {
   });
 };
 
+const onPageChange = (offsetData: number) => {
+  offset.value = offsetData;
+  loading.value = true
+  console.log("@changePage:", offsetData);
+   setTimeout(() => {
+    loading.value = false
+  }, 500);
+};
+
 // TODO: Multi dropdown menu clicked access
 const menubar = ref([
   { text: "Students" },

package/src/components/datepicker/EUIDatepicker.vue

@@ -138,18 +138,19 @@ const { modelValue, isUtc, clearIcon } = toRefs(props);
 
 // const datepicker = ref( props.modelValue ? props.modelValue : props.timePicker ? time.value : props.range ? [startDate.value, endDate.value] : startDate.value);
 
-const datepicker = ref(props.modelValue)
+const datepicker = ref(props.modelValue || (props.range ? [] : null))
 
 //Date clear
 watch(
   () => props.modelValue,
   (newValue) => {
-    if (!newValue || newValue.length === 0) {
-      datepicker.value = [];
+    if (newValue === null || newValue === undefined || (Array.isArray(newValue) && newValue.length === 0)) {
+      datepicker.value = props.range ? [] : null;;
     } else {
       datepicker.value = newValue;
     }
-  }
+  },
+  { immediate: true }
 );
 
 watch(

package/src/components/delete.vue

@@ -33,6 +33,7 @@
         :icon="CalendarIcon"
         iconType="startIcon"
       />
+      <EUIButton @click="resetFilter">Reset</EUIButton>
     </div>
 
     <div>
@@ -165,7 +166,8 @@ import EUITable from "./table/EUITable.vue";
 import EUITooltip from "./tooltip/EUITooltip.vue";
 import EUISearch from "./searchInput/EUISearch.vue";
 import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
-import { CalculatorIcon, CalendarIcon } from "@heroicons/vue/24/solid";
+import { CalendarIcon } from "@heroicons/vue/24/solid";
+import EUIButton from "./button/EUIButton.vue";
 
 // TODO: Datepicker
 const datepickerRange = ref([
@@ -215,6 +217,10 @@ const onSort = (field: string, order: string) => {
     return 0;
   });
 };
+
+const resetFilter = () => {
+  datepickerRange.value  = []
+}
 </script>
 
 <style scoped></style> -->

package/src/components/table/EUITable.vue

@@ -1,6 +1,13 @@
 <template>
   <div>
-    <div class="relative w-full mx-auto overflow-hidden">
+     <template v-if="loading">
+        <div :class="['overflow-hidden relative z-0 isolate bg-white backdrop-blur border border-gray-200 rounded-xl transition-colors duration-150 ease-in-out', tableHeight ? tableHeight : 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]']">
+          <div class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0">
+            <EUICircleLoader />
+          </div>
+        </div>
+      </template>
+    <div v-else class="relative w-full mx-auto overflow-hidden">
       <div
         id="student-table"
         :class="['overflow-auto scrollbar--thin overscroll-none', tableHeight ? tableHeight : 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]']"
@@ -88,20 +95,8 @@
             </tr>
           </thead>
           <tbody>
-            <template v-if="loading">
-              <tr class="norecords">
-                <td :colspan="headers.length">
-                  <div
-                    class="flex items-center justify-center min-h-96"
-                  >
-                    <EUICircleLoader />
-                  </div>
-                </td>
-              </tr>
-            </template>
-
             <template
-              v-else-if="computedItems.length > 0"
+              v-if="computedItems.length > 0"
               v-for="(row, rowIndex) in computedItems"
               :key="`table-row-${rowIndex}`"
             >