v-sistec-features 1.3.1 → 1.3.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-sistec-features",
   "private": false,
-  "version": "1.3.1",
+  "version": "1.3.3",
   "author": "Márlon Bento Azevedo (https://github.com/marlon-bento)",
   "repository": {
     "type": "git",

package/src/DataPageVue/components/VDataPage.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { readonly, ref, isRef, computed, watch, onMounted, nextTick, type Component, type Ref, type WatchSource } from 'vue';
+import { readonly, ref, isRef, computed, watch, nextTick, type Component, type Ref, type WatchSource } from 'vue';
 import InfiniteLoading from "v3-infinite-loading";
 import PaginationDatatable from './PaginationDatatable.vue';
 // import Search from './SearchDatatable.vue';
@@ -102,7 +102,6 @@ interface VDataPageProps {
     page_starts_at: number;
     element_id?: string;
     watch?: WatchSource[];
-    scroll_on_trade_page?: boolean;
 }
 
 interface ExposedFunctions {
@@ -116,6 +115,7 @@ interface ExposedFunctions {
 
 
 }
+const emit = defineEmits(['tradePage', 'beforeFetch', 'afterFetch']);
 
 // =======================================================
 // 1. DEFINIÇÃO DE PROPS COM VALORES PADRÃO
@@ -150,7 +150,6 @@ const props = withDefaults(defineProps<VDataPageProps>(), {
     type_fetch: 'pagination',
     page_starts_at: 0,
     element_id: '',
-    scroll_on_trade_page: false,
     watch: () => []
 });
 
@@ -222,13 +221,6 @@ const { data: response, pending: _pending, error, execute, attempt: _attempt } =
 // =======================================================
 // 4. PROPRIEDADES COMPUTADAS
 // =======================================================
-// const item_use = computed<number[]>(() => {
-//     let use = [1]
-//     if (props.list_filter.length > 0) {
-//         use.push(2)
-//     }
-//     return use;
-// });
 
 const default_params = computed<Record<string, any>>(() => ({
     [props.page_param_name]: pagination.value.current_page + 1,
@@ -276,16 +268,24 @@ async function fetchDataWithDelay(): Promise<void> {
     delayTimer.value = setTimeout(() => {
         isDelaying.value = false;
     }, props.min_loading_delay);
+    if (props.type_fetch === 'infinite-scroll') {
+        return execute();
+    } else if (props.type_fetch === 'pagination') {
+        emit("beforeFetch")
+        await execute();
+        emit("afterFetch")
+    }
 
-    return execute(); // Executa a busca de dados original do useApiFetch
 }
 async function initDataInfinite() {
     items.value = [];
     items_infinite.value = [];
 
     pagination.value.current_page = props.page_starts_at;
-
+    emit("beforeFetch")
     await fetchDataWithDelay();
+    emit("afterFetch")
+
 
     nextTick(() => {
         items_infinite.value.push(...items.value);
@@ -295,25 +295,6 @@ async function initDataInfinite() {
     });
 }
 
-
-// function reSearch(): void {
-//     pagination.value.current_page = 0;
-//     fetchDataWithDelay();
-// }
-
-// const changePageSize = (event: Event): void => {
-//     const target = event.target as HTMLInputElement;
-//     const newSize = parseInt(target.value, 10);
-//     if (newSize > 0) {
-//         pagination.value.limit_per_page = newSize;
-//         pagination.value.limit_per_page = newSize; // Atualiza o limite de itens por página
-//         pagination.value.current_page = 0;
-//         fetchDataWithDelay();
-//     }
-// };
-
-
-
 // =======================================================
 // 7. EXPOSE E CICLO DE VIDA
 // =======================================================
@@ -357,23 +338,6 @@ defineExpose<
     default_params
 });
 
-onMounted(() => {
-    nextTick(() => {
-
-        /* 
-        * executar dentro do nextTick para garantir que o pai já tem acesso ao 
-        * ref que foi exposto
-        */
-        if (first_fetch.value && props.type_fetch === 'infinite-scroll') {
-            initDataInfinite();
-            first_fetch.value = false;
-        } else if (first_fetch.value && props.type_fetch === 'pagination') {
-            fetchDataWithDelay();
-            first_fetch.value = false;
-        }
-
-    })
-});
 const proxima_pagina = computed(() => {
     return response.value?.[props.next_page_response_name] || null
 })
@@ -493,10 +457,7 @@ if (props.watch && Array.isArray(props.watch)) {
     });
 }
 watch(() => pagination.value.current_page, () => {
-    //scrola para o topo da página ao mudar de página
-    if (props.type_fetch === 'pagination' && props.scroll_on_trade_page) {
-        window.scrollTo({ top: 0, behavior: 'auto' })
-    }
+    emit("tradePage")
 });
 if (watchSources.length > 0) {
     if (props.type_fetch === 'pagination') {
@@ -505,14 +466,44 @@ if (watchSources.length > 0) {
             fetchDataWithDelay();
         }, { deep: true });
     } else if (props.type_fetch === 'infinite-scroll') {
-        watch(watchSources, () =>{
+        watch(watchSources, () => {
             dadosInicializados.value = false;
             initDataInfinite();
-        } , { deep: true });
+        }, { deep: true });
     }
 
 }
-
+const on_mounted_called = ref<boolean>(false);
+watch(
+    () => props.add_params,
+    () => {
+        if (!on_mounted_called.value) {
+            on_mounted_called.value = true;
+            nextTick(() => {
+                /* 
+                * executar dentro do nextTick para garantir que o pai já tem acesso ao 
+                * ref que foi exposto
+                */
+                if (first_fetch.value && props.type_fetch === 'infinite-scroll') {
+                    initDataInfinite();
+                    first_fetch.value = false;
+                } else if (first_fetch.value && props.type_fetch === 'pagination') {
+                    fetchDataWithDelay();
+                    first_fetch.value = false;
+                }
+            })
+        } else {
+            if (props.type_fetch === 'pagination') {
+                pagination.value.current_page = props.page_starts_at;
+                fetchDataWithDelay();
+            } else if (props.type_fetch === 'infinite-scroll') {
+                dadosInicializados.value = false;
+                initDataInfinite();
+            }
+        }
+    },
+    { deep: true, immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>

package/src/DatatableVue/components/VDataTable.vue

@@ -8,8 +8,9 @@
             <div class="text-secondary">
               {{ props.first_text_page_size }}
               <div class="mx-2 d-inline-block">
-                <input class="form-control form-control-sm" @change="changePageSize" v-model.lazy="pagination.limit_per_page" min="1"
-                  size="3" aria-label="Número de registros por página" type="number" />
+                <input class="form-control form-control-sm" @change="changePageSize"
+                  v-model.lazy="pagination.limit_per_page" min="1" size="3" aria-label="Número de registros por página"
+                  type="number" />
               </div>
               {{ props.second_text_page_size }}
             </div>
@@ -154,24 +155,26 @@
                   <td v-for="col in columns" :key="col.field || col.header" :class="col.class_row">
                     <component v-if="col.bodySlot" :is="col.bodySlot" :item="item" :is-selected="isSelected(item)" />
                     <span @click="col.click ? col.click(item) : null"
-                    :class="col.class_item + (col.click ? ' cursor-pointer' : '') " v-else-if="col.type === 'text'">
+                      :class="col.class_item + (col.click ? ' cursor-pointer' : '')" v-else-if="col.type === 'text'">
                       {{
                         limiteText(getSubItem(col.field, item, col.transform_function), col.limite_text ?? null)
                       }}</span>
 
                     <span @click="col.click ? col.click(item) : null" v-else-if="col.type === 'date'"
-                      :class="col.class_item + (col.click ? ' cursor-pointer' : '') "
-                    >
+                      :class="col.class_item + (col.click ? ' cursor-pointer' : '')">
                       <span v-if="col.format === 'complete'">{{ new Date(getSubItem(col.field, item)).toLocaleString()
                       }}</span>
                       <span v-if="col.format === 'simple'"> {{ new Date(getSubItem(col.field,
                         item)).toLocaleDateString()
                         }} </span>
                     </span>
-                    <div @click="col.click ? col.click(item) : null" :class="col.class_item + (col.click ? ' cursor-pointer' : '') " v-else-if="col.type === 'html'" v-html="getSubItem(col.field, item)">
+                    <div @click="col.click ? col.click(item) : null"
+                      :class="col.class_item + (col.click ? ' cursor-pointer' : '')" v-else-if="col.type === 'html'"
+                      v-html="getSubItem(col.field, item)">
                     </div>
 
-                    <div @click="col.click ? col.click(item) : null" :class="col.class_item + (col.click ? ' cursor-pointer' : '') " v-else-if="col.type === 'img'">
+                    <div @click="col.click ? col.click(item) : null"
+                      :class="col.class_item + (col.click ? ' cursor-pointer' : '')" v-else-if="col.type === 'img'">
 
                       <div v-if="getSubItem(col.field, item)" v-bind="col.deactivate_img_preview ? {
                         class: 'container-img'
@@ -219,7 +222,7 @@
 </template>
 
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { readonly,ref, provide, computed, watch, onMounted, nextTick, type Component, type Ref, type ComputedRef } from 'vue';
+import { readonly, ref, provide, computed, watch, nextTick, type Component, type Ref, type ComputedRef } from 'vue';
 
 import PaginationDatatable from './PaginationDatatable.vue';
 import Search from './SearchDatatable.vue';
@@ -441,7 +444,6 @@ const atLeastOneSelected = computed<boolean>(() => selected_items.value.length >
 watch([selectAllState, selectAllCheckbox], ([newState]) => {
   if (selectAllCheckbox.value) {
     if (newState === 'indeterminate') {
-      console.log("entrei no indeterminate")
       // Se o estado for indeterminado:
       selectAllCheckbox.value.checked = false; // Ele não está "marcado"
       selectAllCheckbox.value.indeterminate = true; // Ele está com o "traço"
@@ -540,7 +542,7 @@ const changePageSize = (event: Event): void => {
     pagination.value.limit_per_page = newSize; // Atualiza o limite de itens por página
     pagination.value.current_page = 0;
     fetchDataWithDelay();
-  } 
+  }
 };
 
 function getSubItem(field: string | null, item: T, transform_function: ((value: any) => any) | null = null): any {
@@ -580,7 +582,7 @@ function set_limit_per_page(newLimit: number): void {
     pagination.value.limit_per_page = newLimit;
     pagination.value.current_page = 0;
     fetchDataWithDelay();
-  }else {
+  } else {
     console.warn("O limite deve ser um número maior que zero.");
   }
 }
@@ -616,17 +618,23 @@ defineExpose<
   selected_items,
   atLeastOneSelected,
 });
+const on_mounted_called = ref<boolean>(false);
+watch(
+  () => props.add_params,
+  () => {
+    if (!on_mounted_called.value) {
+      on_mounted_called.value = true;
+      // esperar até existir os exposes
+      nextTick(() => {
+        reSearch();
+      });
+    } else {
+      reSearch();
+    }
+  },
+  { deep: true, immediate: true }
+)
 
-onMounted(() => {
-  nextTick(() => {
-
-    /* 
-    * executar dentro do nextTick para garantir que o pai já tem acesso ao 
-    * ref que foi exposto
-    */
-    fetchDataWithDelay();
-  })
-});
 </script>
 
 <style lang="scss" scoped>