v-sistec-features 1.17.7 → 1.18.0-beta.2

package/src/DatatableVue/components/VDataTableLoading.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="loading-container">
+    <template v-if="props.custom_loading">
+        <component :is="props.custom_loading" />
+    </template>
+    <template v-else>
+        <table class="table table-vcenter table-selectable" :class="props.class_table">
+            <thead>
+                <tr>
+                    <th v-for="col in columns" :key="col.field || col.header" :class="col.class_column">
+                        {{ col.header }}
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <template v-if="props.type_loading === 'placeholder'">
+                    <tr v-for="n in pagination.limit_per_page" :key="'placeholder-' + n" class="placeholder-glow">
+                        <td v-for="col in columns" :key="col.field || col.header" :class="col.class_row">
+                            <span v-if="col.bodySlot">
+                                <span class="placeholder col-8"></span>
+                            </span>
+                            <span :class="col.class_item" v-else-if="col.type === 'text'">
+                                <span class="placeholder col-8"></span>
+                            </span>
+                            <span v-else-if="col.type === 'date'">
+                                <span class="placeholder col-9"></span>
+                            </span>
+                            <div :class="col.class_item" v-else-if="col.type === 'html'">
+                                <div class="placeholder col-12"></div>
+                            </div>
+
+                            <div :class="col.class_item" v-else-if="col.type === 'img'">
+                                <div class="placeholder placeholder-img"></div>
+                            </div>
+
+                            <span class="text-danger erro-custom-container" v-else>tipo <span
+                                    class="badge bg-orange text-white erro-custom-text">{{ col.type }}</span> não
+                                suportado
+                            </span>
+                        </td>
+                    </tr>
+                </template>
+                <template v-else-if="props.type_loading === 'spiner-table'">
+                    <tr v-for="n in pagination.limit_per_page" :key="'placeholder-' + n">
+                        <td v-for="col in columns" :key="col.field || col.header" :class="col.class_row">
+                            <span v-if="col.bodySlot">
+                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                            </span>
+                            <span :class="col.class_item" v-else-if="col.type === 'text'">
+                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                            </span>
+                            <span v-else-if="col.type === 'date'">
+                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                            </span>
+                            <div :class="col.class_item" v-else-if="col.type === 'html'">
+                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                            </div>
+
+                            <div class="" :class="col.class_item" v-else-if="col.type === 'img'">
+                                <span class="placeholder-img d-flex justify-content-center align-items-center">
+                                    <span class="spinner-border spinner-border-sm" role="status"
+                                        aria-hidden="true"></span>
+                                </span>
+                            </div>
+
+                            <span class="text-danger erro-custom-container" v-else>tipo <span
+                                    class="badge bg-orange text-white erro-custom-text">{{ col.type }}</span> não
+                                suportado
+                            </span>
+                        </td>
+                    </tr>
+
+                </template>
+                <template v-else-if="props.type_loading === 'spiner'">
+                    <tr v-for="n in pagination.limit_per_page" :key="n">
+                        <td :colspan="columns.length" class="text-center p-0" style="border-bottom: none;">
+                            <div v-if="n === Math.floor(pagination.limit_per_page / 2) + 1"
+                                class="d-flex flex-column justify-content-center align-items-center"
+                                style="height: 6rem;">
+                                <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
+                                </div>
+                                <span class="mt-2">Carregando...</span>
+                            </div>
+                            <div v-else style="height: 3rem;"></div>
+                        </td>
+                    </tr>
+                </template>
+
+            </tbody>
+        </table>
+    </template>
+
+    <div v-if="attempt && attempt.current > 1" class="p-3 text-center text-secondary">
+        A conexão falhou. Tentando novamente... (Tentativa {{ attempt.current }} de {{ attempt.total }})
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ColumnConfiguration } from '../keys'; 
+import type { PaginationObject } from '@/DataPageVue/types/v-data-page.ts';
+interface AttemptObject {
+    current: number;
+    total: number;
+}
+
+const props = defineProps<{
+    columns: ColumnConfiguration[];
+    limit: number;
+    type_loading: string;
+    custom_loading?: any;
+    class_table?: string;
+    attempt?: AttemptObject | null;
+    pagination: PaginationObject;
+}>();
+</script>
+
+<style lang="scss" scoped>
+
+$max-width-img: 40px;
+
+.placeholder-img {
+  width: $max-width-img;
+  height: $max-width-img;
+  border-radius: 4px;
+}
+
+.erro-custom-container {
+  display: inline-block;
+  padding: 0.2em 0.6em;
+  border-radius: 4px;
+  background-color: #ffffff;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.erro-custom-text {
+  font-size: 0.8em;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+</style>

package/src/DatatableVue/composables/useCheckBox.ts

@@ -0,0 +1,89 @@
+import { ref, watch, computed, type Ref, } from 'vue';
+import type { DataTablePropsWithDefaults } from '../types/v-data-table'; // Ajuste o caminho conforme necessário
+
+export function useCheckBox<T extends Record<string, any>>(
+    props: DataTablePropsWithDefaults,
+    items: Ref<T[]>,
+) {
+const selectAllCheckbox = ref<HTMLInputElement | null>(null);
+const selected_items = ref<T[]>([]) as Ref<T[]>;
+// Helper para verificar se um item está selecionado, comparando pela chave única
+const isSelected = (item: T): boolean => {
+  const key = props.item_key;
+  return selected_items.value.some(selectedItem => selectedItem[key] === item[key]);
+};
+
+// Controla o estado do checkbox "selecionar todos"
+const selectAllState = computed<boolean | 'indeterminate'>(() => {
+  if (!items.value.length) return false;
+  const selectedOnPageCount = items.value.filter(item => isSelected(item)).length;
+  if (selectedOnPageCount === 0) return false;
+  if (selectedOnPageCount === items.value.length) return true;
+  return 'indeterminate';
+});
+
+// computed que mostra se pelo menos um item está selecionado
+const atLeastOneSelected = computed<boolean>(() => selected_items.value.length > 0);
+
+
+// observa o estado e atualiza a propriedade 'indeterminate'
+watch([selectAllState, selectAllCheckbox], ([newState]) => {
+  if (selectAllCheckbox.value) {
+    if (newState === '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"
+    } else {
+      selectAllCheckbox.value.checked = newState; // Define o estado marcado/desmarcado
+      selectAllCheckbox.value.indeterminate = false; // Remove o "traço"
+    }
+  }
+}, {
+  immediate: true,
+  flush: 'post'
+});
+// Função para marcar ou desmarcar todos os itens da página atual
+function toggleSelectAll(): void {
+  const pageItems = items.value;
+  if (!pageItems.length) return;
+
+  // Usa a propriedade computada para saber o estado atual
+  const currentState = selectAllState.value;
+
+  // Se TODOS ou ALGUNS estiverem selecionados, o clique irá LIMPAR a seleção da página.
+  if (currentState === true || currentState === 'indeterminate') {
+    const pageItemKeys = pageItems.map(item => item[props.item_key]);
+    selected_items.value = selected_items.value.filter(
+      selectedItem => !pageItemKeys.includes(selectedItem[props.item_key])
+    );
+  }
+  // Se NENHUM estiver selecionado, o clique irá SELECIONAR TODOS da página.
+  else { // currentState é false
+    pageItems.forEach(item => {
+      if (!isSelected(item)) {
+        selected_items.value.push(item);
+      }
+    });
+  }
+}
+
+// Função para marcar ou desmarcar um item individual
+function toggleItemSelection(item: T): void {
+  const key = props.item_key;
+  const index = selected_items.value.findIndex(selectedItem => selectedItem[key] === item[key]);
+
+  if (index > -1) {
+    selected_items.value.splice(index, 1); // Remove se já existe
+  } else {
+    selected_items.value.push(item); // Adiciona se não existe
+  }
+}
+
+    return {
+selectAllCheckbox,
+selected_items,
+ isSelected, selectAllState,
+  atLeastOneSelected, toggleSelectAll, toggleItemSelection
+
+    };
+}

package/src/DatatableVue/composables/useDataTableFetch.ts

@@ -0,0 +1,116 @@
+import { ref, computed, type Ref } from 'vue';
+import type { PaginationObject, DataTablePropsWithDefaults } from '../types/v-data-table'; // Ajuste o caminho conforme necessário
+import { type ColumnConfiguration } from '../keys';
+
+
+export function useDataTableFetch<T>(
+    props: DataTablePropsWithDefaults,
+    pagination: Ref<PaginationObject>,
+    columns: Ref<ColumnConfiguration[]>,
+    orderings_state: Ref<Record<string, 'none' | 'increasing' | 'decreasing'>>,
+    emit: (event: 'beforeFetch' | 'afterFetch') => void,
+    close_all_expanded_items: () => void
+
+) {
+    const items = ref<T[]>([]) as Ref<T[]>;
+
+    const urlReativa = computed(() => {
+        pagination.value.current_page = props.page_starts_at;
+        return props.endpoint;
+    });
+
+    const default_params = computed<Record<string, any>>(() => ({
+        [props.page_param_name]: pagination.value.current_page + 1,
+        [props.page_size_param_name]: pagination.value.limit_per_page,
+        [props.search_param_name]: pagination.value.search || "",
+        [props.filter_param_name]: pagination.value.filter || "",
+    }));
+
+    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';
+                } 
+            } 
+        }
+
+        return objectOrdering;
+    });
+    const { data: response, pending, error, execute, attempt } = props.fetch(urlReativa, {
+        disable_request: () => props.disable_request,
+        params: () => {
+            const isFunction = typeof props.add_params === 'function';
+            let extraParams = {};
+
+            if (isFunction) {
+                const getParams = props.add_params as () => Record<string, any>;
+                extraParams = getParams();
+            } else {
+                extraParams = props.add_params || {};
+            }
+            if (props.deactivate_default_params) {
+                return {
+                    ...extraParams,
+                    ...params_ordering.value
+                };
+            }
+            return {
+                ...default_params.value,
+                ...props.add_params,
+                ...params_ordering.value
+            };
+        },
+        retry: props.retry_attempts,
+        retryDelay: props.retry_delay,
+        paramsReactives: false,
+        immediate: false,
+    }, props.fetch_name);
+
+    const isDelaying = ref<boolean>(false);
+    const delayTimer = ref<ReturnType<typeof setTimeout> | null>(null);
+    const first_fetch = ref<boolean>(false);
+    // para controlar a exibição do loading
+    const showLoadingState = computed<boolean>(() => {
+    return (pending.value || isDelaying.value)
+    });
+    // Função que gerencia o delay e a chamada da API
+    async function fetchDataWithDelay(): Promise<void> {
+        // agora já fez pelo menos a primeira busca então marca como true
+        if (!first_fetch.value) first_fetch.value = true;
+        // Limpa timer anterior, se houver
+        if (delayTimer.value) clearTimeout(delayTimer.value);
+
+        isDelaying.value = true;
+
+        delayTimer.value = setTimeout(() => {
+            isDelaying.value = false;
+        }, props.min_loading_delay);
+        close_all_expanded_items();
+        emit('beforeFetch');
+        await execute(); // Executa a busca de dados original do useApiFetch
+        emit('afterFetch');
+    }
+
+    function reSearch(): void {
+        pagination.value.current_page = props.page_starts_at;
+        fetchDataWithDelay();
+    }
+    return {
+        items,
+        pending,
+        error,
+        execute,
+        response,
+        attempt,
+        default_params,
+        fetchDataWithDelay,
+        reSearch,
+        showLoadingState,
+        first_fetch
+
+    };
+}

package/src/DatatableVue/composables/useExpandedItem.ts

@@ -8,7 +8,8 @@ export function useExpandedItem(
 ) {
     const expanded_items = ref<any[]>([]);
 
-    function close_all_expanded_items() {
+
+    function close_all_expanded_items(): void {
         expanded_items.value = [];
     }
 

package/src/DatatableVue/types/v-data-table.ts

@@ -75,7 +75,56 @@ export interface VDataTableProps {
 
   disable_request?: MaybeRefOrGetter<boolean>;
 }
+export type DataTablePropsWithDefaults = VDataTableProps & {
+    // Strings
+    fetch_name: string;
+    type_loading: string;
+    filter_param_name: string;
+    search_param_name: string;
+    page_param_name: string;
+    page_size_param_name: string;
+    data_key: string;
+    total_key: string;
+    item_key: string;
+    first_text_page_size: string;
+    second_text_page_size: string;
+    placeholder_search: string;
+    type_animation_expand: string;
+    type_button_expand: string;
 
+    // Classes CSS (Strings)
+    class_table: string;
+    class_content: string;
+    class_container: string;
+    class_pagination: string;
+    class_filters: string;
+    class_page_size: string;
+
+    // Numbers
+    min_loading_delay: number;
+    retry_attempts: number;
+    retry_delay: number;
+    limit_per_page: number;
+    page_starts_at: number;
+
+    // Booleans
+    deactivate_default_params: boolean;
+    use_checkbox: boolean;
+    deactivate_selected_info: boolean;
+    immediate: boolean;
+    deactivate_search_on_clear: boolean;
+    use_expandable_items: boolean;
+    close_expanded_item_on_expand_new: boolean;
+    scroll_to_expanded_item: boolean;
+    deactivate_animation_expand: boolean;
+    deactivate_search_empty: boolean;
+    disable_request: MaybeRefOrGetter<boolean>;
+
+    // Complex Types (Arrays/Objects/Functions) 
+    add_params: Record<string, any> | (() => Record<string, any>);
+    list_filter: any[]; 
+    custom_loading: any | null; 
+};
 export interface ExposedFunctions<T extends Record<string, any>> {
   execute: () => void;
   reSearch: () => void;
@@ -89,4 +138,5 @@ export interface ExposedFunctions<T extends Record<string, any>> {
   set_page: (newPage: number) => void;
   expand_item_toggle: (item: any) => void;
   close_all_expanded_items: () => void;
+  selectAllCheckbox: Ref<HTMLInputElement | null>;
 }

package/src/config/datatableConfig.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey } from 'vue';
+import type { VDataTableProps } from '@/DatatableVue/types/v-data-table';
+
+//o Partial para dizer que no global não precisamos passar TUDO
+export type DataTableGlobalConfig = Partial<VDataTableProps>;
+
+// A chave para o provide/inject
+export const DATA_TABLE_CONFIG: InjectionKey<DataTableGlobalConfig> = Symbol('DataTableConfig');

package/src/core/plugin.ts

@@ -26,10 +26,16 @@ import '@tabler/core/dist/css/tabler-themes.min.css'
 import * as Tabler from '@tabler/core/dist/js/tabler.min.js';
 import vRequired from "v-required"
 import '../assets/v-required-style.css'
-import Toast from "vue-toastification";
+import Toast, { type PluginOptions as ToastPluginOptions } from "vue-toastification";
 import "vue-toastification/dist/index.css";
 
-const options_toast = {
+import { DATA_TABLE_CONFIG, type DataTableGlobalConfig } from '@/config/datatableConfig';
+export interface SistecOptions {
+  dataTable?: DataTableGlobalConfig; // Configurações opcionais da tabela
+  toast?: ToastPluginOptions;        // Configurações opcionais do Toast
+}
+
+const defaultToastOptions: ToastPluginOptions = {
   transition: "Vue-Toastification__bounce",
   maxToasts: 20,
   newestOnTop: true,
@@ -38,14 +44,22 @@ const options_toast = {
 
 const SistecPlugin = {
   // até o momento não usamos opções nem o app, mas deixei aqui caso precise no futuro
-  install: (app: App, _options?: any) => {
+  install: (app: App, options: SistecOptions = {}) => {
     // Disponibiliza o Tabler globalmente
     (window as any).bootstrap = Tabler;
 
+
+
     // futuros upgrades podem ser feitos aqui
     // Ex: app.component('MeuComponente', MeuComponente);
     app.directive('required', vRequired);
-    app.use(Toast, options_toast);
+    // Aqui um merge: Opções do usuário > Padrão do Sistec
+    const finalToastOptions = { ...defaultToastOptions, ...options.toast };
+    app.use(Toast, finalToastOptions);
+    // CONFIGURAÇÃO DO DATATABLE
+    // Se o usuário passou configurações goblais de tabela, fazemos o provide AQUI.
+    const tableConfig = options.dataTable || {}; 
+    app.provide(DATA_TABLE_CONFIG, tableConfig);
   }
 };
 export { SistecPlugin };