v-sistec-features 1.5.0 → 1.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-sistec-features",
   "private": false,
-  "version": "1.5.0",
+  "version": "1.6.1",
   "author": "Márlon Bento Azevedo (https://github.com/marlon-bento)",
   "repository": {
     "type": "git",
@@ -46,7 +46,9 @@
   "peerDependencies": {
     "@tabler/icons-vue": "^3.35.0",
     "vue": "^3.2.0",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "^4.1.0",
+    "v-api-fetch": "^1.3.0",
+    "v-required": "^2.0.2"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",

package/src/DatatableVue/components/PaginationDatatable.vue

@@ -5,13 +5,14 @@ import { computed } from "vue";
 // 1. DEFINIÇÃO DE TIPOS E INTERFACES 
 // =======================================================
 interface PaginationObject {
-  current_page: number;
+  current_page: number; // Este é o valor da API (pode ser 0 ou 1 para a primeira pág)
   count: number;
   limit_per_page: number;
 }
 interface PaginationProps {
   pagination: PaginationObject;
   filtering?: boolean;
+  page_starts_at?: number; // 0 ou 1, define o que a API espera para a primeira página
 }
 
 // =======================================================
@@ -19,6 +20,7 @@ interface PaginationProps {
 // =======================================================
 const props = withDefaults(defineProps<PaginationProps>(), {
   filtering: false,
+  page_starts_at: 0 // Padrão para API base 0
 });
 const emit = defineEmits<{
   (e: 'tradePage'): void
@@ -33,8 +35,8 @@ const total_pages = computed<number>(() => {
 });
 
 const next = computed(() => {
-  return props.pagination.current_page + 1 < total_pages.value
-    ? props.pagination.current_page + 1
+  return paginaAtual.value < total_pages.value
+    ? paginaAtual.value
     : null;
 });
 
@@ -44,19 +46,19 @@ const nextPage = (): void => {
   emit("tradePage");
 };
 const setPage = (newPage: number): void => {
-  props.pagination.current_page = newPage - 1;
+  props.pagination.current_page = newPage + (props.page_starts_at - 1);
   emit("tradePage");
 };
 const lastPage = (): void => {
-  props.pagination.current_page = total_pages.value - 1;
+  props.pagination.current_page = total_pages.value + (props.page_starts_at - 1);
   emit("tradePage");
 };
 const firstPage = (): void => {
-  props.pagination.current_page = 0;
+  props.pagination.current_page = props.page_starts_at;
   emit("tradePage");
 };
 const prevPage = (): void => {
-  if (props.pagination.current_page > 0) {
+  if (props.pagination.current_page > props.page_starts_at) {
     props.pagination.current_page--;
     emit("tradePage");
   }
@@ -65,7 +67,9 @@ const prevPage = (): void => {
 // =======================================================
 // 4. LÓGICA DE GERAÇÃO DE PÁGINAS
 // =======================================================
-
+const paginaAtual = computed(() => {
+  return props.pagination.current_page - (props.page_starts_at - 1);
+});
 /**
  * @description Computa um array com os números das páginas e as reticências a serem exibidas.
  * Ex: [1, 2, '...', 10, 11, 12, '...', 33, 34]
@@ -75,15 +79,15 @@ const paginasParaExibir = computed(() => {
   if (total_pages.value <= 7) {
     return Array.from({ length: total_pages.value }, (_, i) => i + 1);
   }
+  
 
-  const paginaAtual = props.pagination.current_page + 1;
   const total = total_pages.value;
 
   // O conjunto de páginas visíveis sempre inclui as 2 primeiras, 2 últimas,
   // a atual e suas duas vizinhas. O Set cuida de remover duplicatas.
   const paginasEssenciais = new Set([
     1, 2,                           // Sempre mostra as 2 primeiras
-    paginaAtual - 1, paginaAtual, paginaAtual + 1, // Mostra a atual e vizinhas
+    paginaAtual.value - 1, paginaAtual.value, paginaAtual.value + 1, // Mostra a atual e vizinhas
     total - 1, total                // Sempre mostra as 2 últimas
   ]);
 
@@ -133,27 +137,27 @@ const svg_uma_seta = `
       Mostrando de
       {{
         props.pagination.count !== 0
-          ? props.pagination.limit_per_page * props.pagination.current_page + 1
+          ? props.pagination.limit_per_page * (paginaAtual - 1) + 1
           : 0
       }}
       até
       {{
-        props.pagination.limit_per_page * (props.pagination.current_page + 1) < props.pagination.count ?
-          props.pagination.limit_per_page * (props.pagination.current_page + 1) : props.pagination.count }} de {{
+        props.pagination.limit_per_page * (paginaAtual) < props.pagination.count ?
+          props.pagination.limit_per_page * (paginaAtual) : props.pagination.count }} de {{
           props.pagination.count }} registros </span>
         <div class="d-flex align-items-center gap-2" v-if="total_pages > 0">
           <div class="d-flex">
-            <button class="btn btn-estilo" @click.prevent="firstPage" :disabled="props.pagination.current_page === 0" v-html="svg_duas_setas">
+            <button class="btn btn-estilo" @click.prevent="firstPage" :disabled="paginaAtual === 1" v-html="svg_duas_setas">
             </button>
-            <button class="btn btn-estilo" @click.prevent="prevPage" :disabled="props.pagination.current_page === 0" v-html="svg_uma_seta">
+            <button class="btn btn-estilo" @click.prevent="prevPage" :disabled="paginaAtual === 1" v-html="svg_uma_seta">
             </button>
           </div>
 
           <div class="d-flex  gap-2">
             <template v-for="(pagina, index) in paginasParaExibir" :key="index">
               <button v-if="typeof pagina === 'number'"
-                :class="props.pagination.current_page + 1 == pagina ? 'page-select' : ''" class="page-estilo"
-                @click.prevent="setPage(pagina)" :disabled="props.pagination.current_page + 1 == pagina">
+                :class="paginaAtual == pagina ? 'page-select' : ''" class="page-estilo"
+                @click.prevent="setPage(pagina)" :disabled="paginaAtual == pagina">
                 {{ pagina }}
               </button>
               <span v-else class="m-0 p-0">...</span>

package/src/DatatableVue/components/SearchDatatable.vue

@@ -15,9 +15,14 @@
             <input type="text" class="form-control ms-1" id="inputSearchLaudos" v-model="modelSearch"
                 @keyup.enter="$emit('search')" placeholder="Buscar...">
 
-            <span v-if="modelSearch" @click="cleanSearch()" class=" inputClose" 
-                title="Limpar pesquisa">
-            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+            <span v-if="modelSearch" @click="cleanSearch()" class=" inputClose" title="Limpar pesquisa">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    class="icon icon-tabler icons-tabler-outline icon-tabler-x">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M18 6l-12 12" />
+                    <path d="M6 6l12 12" />
+                </svg>
             </span>
             <span v-else class="input-icon-addon">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
@@ -30,19 +35,24 @@
         </div>
         <div v-if="item_use.includes(2)" class="dropdown-menu">
             <template v-for="(filter, index) in props.list_filter" :key="index">
-                <router-link v-if="'type' in filter ? filter.type === 1 : false" :to="filter?.to"
+                <router-link v-if="('type' in filter ? filter.type === 1 : false) && ('visible' in filter ? filter.visible : true)" :to="filter?.to"
                     class="dropdown-item cursor-pointer">
                     {{ filter.text }}
                 </router-link>
-                <a v-else-if="'type' in filter ? filter.type === 2 : true"
+                <a v-else-if="('type' in filter ? filter.type === 2 : true) && ('visible' in filter ? filter.visible : true)"
                     @click.prevent="tradeFilter(String(filter.value))" class="dropdown-item cursor-pointer"
                     :class="modelFilter === filter?.value ? 'bg-info text-dark selected' : ''">
                     {{ filter.text }}
                 </a>
+                <a v-else-if="('type' in filter ? filter.type === 3 : true) && ('visible' in filter ? filter.visible : true)" @click.prevent="clickItem(filter)"
+                    class="dropdown-item cursor-pointer"
+                    :class="filter?.active ? 'bg-info text-dark selected' : ''"
+                    >
+                    {{ filter.text }}
+                </a>
             </template>
         </div>
     </div>
-
 </template>
 <script setup lang="ts">
 import { computed, watch } from 'vue';
@@ -83,6 +93,8 @@ const props = withDefaults(defineProps<SearchProps>(), {
     // até o momento existem 2 items: 1 (search) e 2 (filter)
     item_use: () => [1, 2], // se não for passado, assume que é para todos os itens
     // até o momento existem 2 items: 1 (search) e 2 (filter)
+
+    click: null,
 });
 
 const emit = defineEmits(['update:search', 'update:filter', "search"])
@@ -128,10 +140,20 @@ function tradeFilter(newFilter: string): void {
         modelFilter.value = newFilter;
     }
 }
+
 function cleanSearch(): void {
     modelSearch.value = ""
     emit('search'); // emite o evento de busca para atualizar a lista
 }
+
+function clickItem(filter: any): void {
+    if (filter.click && typeof filter.click === 'function') {
+        filter.click();
+    } else {
+        console.error("O filtro selecionado não possui uma função de clique válida.");
+    }
+}
+
 </script>
 <style scoped>
 .inputClose {

package/src/DatatableVue/components/VColumn.vue

@@ -20,6 +20,10 @@ interface VColumnProps {
   click?: Function | null;
   // bloqueia a coluna para não ser movida
   locked?: boolean;
+  use_ordering?: boolean;
+  param_ordering?: string;
+  decreasing_value?: string;
+  increasing_value?: string;
 }
 const props = withDefaults(defineProps<VColumnProps>(), {
   field: null,
@@ -46,6 +50,11 @@ const props = withDefaults(defineProps<VColumnProps>(), {
   transform_function:  null ,
   click: null,
   locked: false,
+
+  use_ordering: false,
+  param_ordering: '',
+  decreasing_value: '',
+  increasing_value: '',
 });
 
 const slots = useSlots();
@@ -91,6 +100,10 @@ onMounted(() => {
     click: props.click,
     transform_function: props.transform_function,
     locked: props.locked,
+    use_ordering: props.use_ordering,
+    param_ordering: props.param_ordering,
+    decreasing_value: props.decreasing_value,
+    increasing_value: props.increasing_value,
 
     bodySlot: slots.body,
     ...(props.type === 'text' && { limite_text: Number(props.limite_text) }),

package/src/DatatableVue/components/VDataTable.vue

@@ -23,12 +23,16 @@
           <Search v-model:search="pagination.search" v-model:filter="pagination.filter" :list_filter="props.list_filter"
             :item_use="item_use" @search="reSearch" />
         </div>
+        <slot name="item-selected-info" :selected_items="selected_items" :clearSelection="() => selected_items = []">
+          <div v-if="(props.use_checkbox && selected_items.length > 0) && !props.deactivate_selected_info"
+            class="alert alert-cyan d-flex justify-content-center align-items-center py-2" role="alert">
+            <h4 class="alert-title m-0"> <strong>Itens Selecionados:</strong> <span class="badge bg-azure text-azure-fg">{{ selected_items.length }}</span></h4>
+            <a class=" cursor-pointer " @click="selected_items = []">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
+              Limpar Seleção</a>
+          </div>
+        </slot>
 
-        <div v-if="props.use_checkbox && selected_items.length > 0"
-          class="alert alert-cyan d-flex justify-content-center align-items-center py-3" role="alert">
-          <h4 class="alert-title m-0"> <strong>Itens Selecionados:</strong> {{ selected_items.length }}</h4>
-          <button class="btn   btn-outline-danger  ms-3 bold " @click="selected_items = []">Limpar Seleção</button>
-        </div>
         <template v-if="showLoadingState">
           <template v-if="props.custom_loading">
             <component :is="props.custom_loading" />
@@ -156,16 +160,110 @@
                   </template>
 
                   <template #item="{ element: col }">
-                    <th class="header-draggable" :class="col.class_column">
-                      {{ col.header }}
-                    </th>
+                    <template v-if="col.use_ordering">
+                      <th class="header-draggable" :class="col.class_column">
+                        <div class="header-ordering">
+                          <span>{{ col.header }}</span>
+
+                          <span @click="() => toggleOrderingState(col.header)" class="ms-2 cursor-pointer">
+                            <svg v-if="!orderings_state[col.header] || orderings_state[col.header] === 'none'"
+                              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                              <path d="m3 8 4-4 4 4"></path>
+                              <path d="m11 16-4 4-4-4"></path>
+                              <path d="M7 4v16"></path>
+                              <path d="M15 8h6"></path>
+                              <path d="M15 16h6"></path>
+                              <path d="M13 12h8"></path>
+                            </svg>
+
+
+                            <svg v-else-if="orderings_state[col.header] === 'decreasing'"
+                              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                              <path d="m3 16 4 4 4-4"></path>
+                              <path d="M7 20V4"></path>
+                              <path d="M11 4h10"></path>
+                              <path d="M11 8h7"></path>
+                              <path d="M11 12h4"></path>
+                            </svg>
+
+                            <svg v-else-if="orderings_state[col.header] === 'increasing'"
+                              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                              <path d="m3 8 4-4 4 4"></path>
+                              <path d="M7 4v16"></path>
+                              <path d="M11 12h4"></path>
+                              <path d="M11 16h7"></path>
+                              <path d="M11 20h10"></path>
+                            </svg>
+
+                          </span>
+                        </div>
+
+                      </th>
+                    </template>
+                    <template v-else>
+                      <th class="header-draggable" :class="col.class_column">
+                        {{ col.header }}
+                      </th>
+                    </template>
+
                   </template>
 
                   <template #footer>
                     <template v-for="col in lockedColumns" :key="col.field || col.header">
-                      <th class="header-locked" :class="col.class_column">
-                        {{ col.header }}
-                      </th>
+                      <template v-if="col.use_ordering">
+                        <th class="header-locked header-ordering" :class="col.class_column">
+                          <div class="header-ordering">
+                            <span>{{ col.header }}</span>
+
+                            <span @click="() => toggleOrderingState(col.header)" class="ms-2 cursor-pointer">
+                              <svg v-if="!orderings_state[col.header] || orderings_state[col.header] === 'none'"
+                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path d="m3 8 4-4 4 4"></path>
+                                <path d="m11 16-4 4-4-4"></path>
+                                <path d="M7 4v16"></path>
+                                <path d="M15 8h6"></path>
+                                <path d="M15 16h6"></path>
+                                <path d="M13 12h8"></path>
+                              </svg>
+
+
+                              <svg v-else-if="orderings_state[col.header] === 'decreasing'"
+                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path d="m3 16 4 4 4-4"></path>
+                                <path d="M7 20V4"></path>
+                                <path d="M11 4h10"></path>
+                                <path d="M11 8h7"></path>
+                                <path d="M11 12h4"></path>
+                              </svg>
+
+                              <svg v-else-if="orderings_state[col.header] === 'increasing'"
+                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path d="m3 8 4-4 4 4"></path>
+                                <path d="M7 4v16"></path>
+                                <path d="M11 12h4"></path>
+                                <path d="M11 16h7"></path>
+                                <path d="M11 20h10"></path>
+                              </svg>
+                            </span>
+                          </div>
+                        </th>
+                      </template>
+
+                      <template v-else>
+                        <th class="header-locked" :class="col.class_column">
+                          {{ col.header }}
+                        </th>
+                      </template>
+
                     </template>
                   </template>
                 </draggable>
@@ -188,10 +286,10 @@
                     <span @click="col.click ? col.click(item) : null" v-else-if="col.type === 'date'"
                       :class="col.class_item + (col.click ? ' cursor-pointer' : '')">
                       <span v-if="col.format === 'complete'">{{ new Date(getSubItem(col.field, item)).toLocaleString()
-                        }}</span>
+                      }}</span>
                       <span v-if="col.format === 'simple'"> {{ new Date(getSubItem(col.field,
                         item)).toLocaleDateString()
-                      }} </span>
+                        }} </span>
                     </span>
                     <div @click="col.click ? col.click(item) : null"
                       :class="col.class_item + (col.click ? ' cursor-pointer' : '')" v-else-if="col.type === 'html'"
@@ -232,7 +330,8 @@
     </div>
     <slot name="pagination" :pagination="pagination" :tradePage="fetchDataWithDelay" :error="error">
       <div v-if="!error && pagination.count > 0" class="px-3" :class="props.class_pagination">
-        <PaginationDatatable :filtering="true" :pagination="pagination" @tradePage="fetchDataWithDelay" />
+        <PaginationDatatable :page_starts_at="props.page_starts_at" :filtering="true" :pagination="pagination"
+          @tradePage="fetchDataWithDelay" />
       </div>
     </slot>
 
@@ -316,10 +415,14 @@ interface VDataTableProps {
   item_key?: string;
 
   limit_per_page?: number;
+  page_starts_at?: number;
+  deactivate_selected_info?: boolean;
+
 }
 
 interface ExposedFunctions {
   execute: () => void;
+  reSearch: () => void;
   pagination: Ref<PaginationObject>;
   default_params: Record<string, any>;
   selected_items: Ref<T[]>;
@@ -359,6 +462,8 @@ const props = withDefaults(defineProps<VDataTableProps>(), {
   first_text_page_size: 'Mostrar',
   second_text_page_size: 'registros',
   limit_per_page: 5,
+  page_starts_at: 0,
+  deactivate_selected_info: false,
 });
 
 
@@ -367,6 +472,7 @@ const props = withDefaults(defineProps<VDataTableProps>(), {
 // =======================================================
 
 
+const orderings_state = ref<Record<string, 'none' | 'increasing' | 'decreasing'>>({});
 const columns = ref<ColumnConfiguration[]>([]);
 const items = ref<T[]>([]) as Ref<T[]>;
 const totalItems = ref<number>(0);
@@ -378,36 +484,45 @@ const delayTimer = ref<ReturnType<typeof setTimeout> | null>(null);
 
 /*--------- definição de páginação ---------------*/
 const pagination = ref<PaginationObject>({
-  current_page: 0, // pagina atual
+  current_page: props.page_starts_at, // pagina atual
   count: 0,  // total de itens
   limit_per_page: props.limit_per_page, // limite de itens por página
   search: '', // termo de busca
   filter: '', // filtro selecionado
 })
 
+const urlReativa = computed(() => {
+  pagination.value.current_page = props.page_starts_at;
+  return props.endpoint;
+});
 // =======================================================
 // 3. LÓGICA DA API (useFetch)
 // =======================================================
-const { data: response, pending, error, execute, attempt } = props.fetch(props.endpoint, {
+const { data: response, pending, error, execute, attempt } = props.fetch(urlReativa, {
   params: () => {
-
     if (props.deactivate_default_params) {
       if (props.add_params && typeof props.add_params === 'function') {
-        return props.add_params();
+        return {
+          ...props.add_params(),
+          ...params_ordering.value
+        };
       }
       return {
         ...props.add_params,
+        ...params_ordering.value
       };
     }
     else if (props.add_params && typeof props.add_params === 'function') {
       return {
         ...default_params.value,
         ...props.add_params(),
+        ...params_ordering.value
       }
     }
     return {
       ...default_params.value,
       ...props.add_params,
+      ...params_ordering.value
     };
   },
   retry: props.retry_attempts,
@@ -446,6 +561,24 @@ const item_use = computed<number[]>(() => {
   }
   return use;
 });
+const params_ordering = computed(() => {
+  const objectOrdering: Record<string, any> = {};
+  for (const col of columns.value) {
+    if (col.use_ordering) {
+      if (orderings_state.value[col.header] === 'increasing') {
+        objectOrdering[col.param_ordering] = col.increasing_value || 'increasing';
+      } else if (orderings_state.value[col.header] === 'decreasing') {
+        objectOrdering[col.param_ordering] = col.decreasing_value || 'decreasing';
+      } else {
+        continue;
+      }
+    } else {
+      continue;
+    }
+  }
+
+  return objectOrdering;
+});
 
 const default_params = computed<Record<string, any>>(() => ({
   [props.page_param_name]: pagination.value.current_page + 1,
@@ -573,7 +706,7 @@ function fetchDataWithDelay(): void {
 }
 
 function reSearch(): void {
-  pagination.value.current_page = 0;
+  pagination.value.current_page = props.page_starts_at;
   fetchDataWithDelay();
 }
 
@@ -583,8 +716,7 @@ const changePageSize = (event: Event): void => {
   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();
+    reSearch();
   }
 };
 
@@ -617,32 +749,49 @@ function limiteText(text: string | null, limite: number | null): string | null {
   return text;
 }
 
+function toggleOrderingState(header: string) {
+  // desabilita todos que não são o header clicado
+  for (const key in orderings_state.value) {
+    if (key !== header) {
+      orderings_state.value[key] = 'none';
+    }
+  }
+
+  const currentState = orderings_state.value[header] || 'none';
+  if (currentState === 'none') {
+    orderings_state.value[header] = 'increasing';
+  } else if (currentState === 'increasing') {
+    orderings_state.value[header] = 'decreasing';
+  } else {
+    orderings_state.value[header] = 'none';
+  }
+
+  reSearch();
+}
+
+
 // =======================================================
 // 7. EXPOSE E CICLO DE VIDA
 // =======================================================
 function set_limit_per_page(newLimit: number): void {
   if (newLimit > 0) {
     pagination.value.limit_per_page = newLimit;
-    pagination.value.current_page = 0;
-    fetchDataWithDelay();
+    reSearch();
   } else {
     console.warn("O limite deve ser um número maior que zero.");
   }
 }
 function set_search(newSearch: string): void {
   pagination.value.search = newSearch;
-  pagination.value.current_page = 0;
-  fetchDataWithDelay();
+  reSearch();
 }
 function set_filter(newFilter: string): void {
   pagination.value.filter = newFilter;
-  pagination.value.current_page = 0;
-  fetchDataWithDelay();
+  reSearch();
 }
 function set_page(newPage: number): void {
-  if (newPage >= 1 && newPage <= Math.ceil(pagination.value.count / pagination.value.limit_per_page)) {
-    pagination.value.current_page = newPage - 1;
-    fetchDataWithDelay();
+  if (newPage >= 0 && newPage <= Math.ceil(pagination.value.count / pagination.value.limit_per_page)) {
+    reSearch();
   } else {
     console.warn("Número de página inválido.");
   }
@@ -652,6 +801,7 @@ defineExpose<
   ExposedFunctions
 >({
   execute: fetchDataWithDelay,
+  reSearch:reSearch,
   pagination: readonly(pagination),
   set_limit_per_page: set_limit_per_page,
   set_search: set_search,
@@ -835,6 +985,7 @@ $max-width-preview: 250px;
   cursor: grab;
 }
 
+
 /*
   Animações para movimentação de colunas
 */
@@ -846,4 +997,10 @@ $max-width-preview: 250px;
 .column-move-leave-active {
   transition: all 0.4s ease;
 }
+
+
+.header-ordering {
+  display: flex;
+  justify-content: space-between;
+}
 </style>

package/src/DatatableVue/keys.ts

@@ -15,6 +15,10 @@ export interface ColumnConfiguration {
   format?: 'complete' | 'simple';
   click: Function | null;
   locked: boolean;
+  use_ordering: boolean;
+  param_ordering: string;
+  decreasing_value: string;
+  increasing_value: string;
 }
 
 // A API que o VDataTable "fornece" para os filhos