v-sistec-features 1.26.3 → 1.27.0

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

@@ -2,48 +2,81 @@ import type { Ref, ComputedRef, Component, MaybeRefOrGetter } from 'vue';
 import type { PaginationObject } from '../keys';
 
 export type { PaginationObject } from '../keys';
-export interface VDataTableProps {
+
+
+/*
+Tipagem para configurações de API.
+Por que é usada: Isola as propriedades responsáveis por buscar e interpretar os dados do backend.
+*/
+export interface ApiProps {
   /* configuração do useApiFetch */
   fetch: Function;
-  fetch_name?: string;
   endpoint: string;
-  /* tipos de loading pré-definidos*/
-  type_loading?: 'placeholder' | 'spiner-table' | 'spiner';
-  /*recebe um component para loading*/
-  custom_loading?: Component | null;
-  /* retira os params default da requisição */
-  deactivate_default_params?: boolean;
+  fetch_name?: string;
+  /* usado para pegar os dados do useApiFetch */
+  data_key?: string;
+  total_key?: string;
   /* nomes dos parâmetros para passar para o backend */
   filter_param_name?: string;
   search_param_name?: string;
   page_param_name?: string;
   page_size_param_name?: string;
-  add_params?: Object | Function;
-
-  /* usado para pegar os dados do useApiFetch */
-  data_key?: string;
-  total_key?: string;
-
-  /* filtros que irão ser usados */
-  list_filter?: any[];
-  /* mudar o que está escrito no select de mudança de items_per_page*/
-  first_text_page_size?: string;
-  second_text_page_size?: string;
-
+  add_params?: Record<string, any> | (() => Record<string, any>);
+  /* retira os params default da requisição */
+  deactivate_default_params?: boolean;
+  disable_request?: MaybeRefOrGetter<boolean>;
+}
 
-  /* props para estilizar o vdatatable */
-  class_table?: string;
+/**
+ * =====================================================
+ *  Tipagem para classes CSS.
+ *  Por que é usada: Agrupa as opções de estilização estrutural do datatable.
+ * =====================================================
+ * **/
+export interface ColumnManagerClass{
+    class_column_manager_dropdown?: string;
+    class_column_manager_dropdown_menu?: string;
+    class_column_manager_button?: string;
+    disable_class_column_manager_default?: boolean;
+}
+export interface PaginationClass{
+  class_pagination?: string;
+}
+export interface BodyClass{
   class_content?: string;
   class_container?: string;
-  class_pagination?: string;
+}
+export interface TableClass{
+  class_table?: string;
+}
+export interface FiltersClass{
   class_filters?: string;
   class_page_size?: string;
+}
+/*
+Tipagem para classes CSS.
+Por que é usada: Agrupa as opções de estilização estrutural do datatable.
+*/
+export type ClassProps = (
+  ColumnManagerClass & 
+  PaginationClass & 
+  BodyClass & 
+  TableClass & 
+  FiltersClass
+);
 
-  /*
+/*
+Tipagem para o comportamento principal.
+Por que é usada: Controla limites, tempos de carregamento, armazenamento de estado e identificadores.
+*/
+export interface BehaviorProps {
+  limit_per_page?: number;
+  page_starts_at?: number;
+    /*
   * tempo mínimo em ms para mostrar o loading para evitar telas piscando
 */
   min_loading_delay?: number;
-  /* 
+    /* 
   - Número de tentativas automáticas em caso de falha.
   - 1 significa que a requisição será feita apenas uma vez, sem retentativas.
   - Valor padrão é 3.
@@ -51,37 +84,84 @@ export interface VDataTableProps {
   retry_attempts?: number;
   // Atraso em milissegundos entre cada tentativa
   retry_delay?: number;
+  immediate?: boolean;
+  // Propriedade para ativar a persistência de configuração da tabela no localstorage
+  storage_id?: string;
+  use_column_manager?: boolean;
+  show_header_when_empty?: boolean;
+  // Define qual propriedade do item será usada como chave única para a seleção.
+  item_key?: string;
+  /* tipos de loading pré-definidos*/
+  type_loading?: 'placeholder' | 'spiner-table' | 'spiner';
+  /*recebe um component para loading*/
+  custom_loading?: Component | null;
+}
 
+/*
+Tipagem para regras de busca.
+Por que é usada: Define propriedades dos filtros, placeholders e teleports de pesquisa.
+*/
+export interface SearchProps {
+  /* filtros que irão ser usados */
+  list_filter?: any[];
+  placeholder_search?: string;
+  disable_search?: boolean;
+  deactivate_search_empty?: boolean;
+  deactivate_search_on_clear?: boolean;
+}
+/*
+Tipagem para regras de paginação.
+Por que é usada: Define os textos exibidos e o local de renderização da paginação.
+*/
+export interface PaginationProps {
+  first_text_page_size?: string;
+  second_text_page_size?: string;
+}
+/*
+Tipagem para regras de movimentação de itens
+*/
+export interface TeleportsProps {
+  /*teleports para o search e para a paginação*/
+  search_teleport?: string | HTMLElement | null;
+  // Aceita string (seletor) OU HTMLElement (ref direto) OU null
+  pagination_teleport?: string | HTMLElement | null;
+  extra_actions_teleport?: string | HTMLElement | null;
+  column_manager_teleport?: string | HTMLElement | null;
+}
+/*
+Tipagem para recursos extras.
+Por que é usada: Habilita checkboxes e itens expansíveis na tabela.
+*/
+export interface ExtraFeaturesProps {
   // Ativa a funcionalidade de seleção com checkboxes
   use_checkbox?: boolean;
+  deactivate_selected_info?: boolean;
   use_expandable_items?: boolean;
   close_expanded_item_on_expand_new?: boolean;
   scroll_to_expanded_item?: boolean;
-
   type_animation_expand?: 'fade' | 'expand' | 'none';
   deactivate_animation_expand?: boolean;
   type_button_expand?: 'arrow' | 'plus';
-  deactivate_search_empty?: boolean;
+}
 
-  // Define qual propriedade do item será usada como chave única para a seleção.
-  item_key?: string;
+/*
+Tipagem consolidada de propriedades do VDataTable.
+Por que é usada: Une todas as categorias lógicas através de interseção, fornecendo uma interface plana para o Vue, preservando a retrocompatibilidade com versões anteriores da aplicação.
+*/
+export type VDataTableProps = (
+  ApiProps &
+  ClassProps &
+  BehaviorProps &
+  SearchProps &
+  PaginationProps &
+  ExtraFeaturesProps &
+  TeleportsProps
+);
 
-  limit_per_page?: number;
-  page_starts_at?: number;
-  deactivate_selected_info?: boolean;
-  immediate?: boolean;
-  placeholder_search?: string;
-  deactivate_search_on_clear?: boolean;
-  disable_search?: boolean;
-  disable_request?: MaybeRefOrGetter<boolean>;
-  // Aceita string (seletor) OU HTMLElement (ref direto) OU null
-  pagination_teleport?: string | HTMLElement | null;
-  search_teleport?: string | HTMLElement | null;
-  show_header_when_empty?: boolean;
-  // Propriedade para ativar a persistência de configuração da tabela no localstorage
-  storage_id?: string;
-  use_column_manager?: boolean;
-}
+/*
+Tipagem consolidada de propriedades do VDataTable com valores padrão.
+Por que é usada: Fornece uma interface completa para o Vue, incluindo todas as propriedades obrigatórias e opcionais, com valores padrão definidos.
+*/
 export type DataTablePropsWithDefaults = VDataTableProps & {
     // Strings
     fetch_name: string;

package/src/core/plugin.ts

@@ -29,7 +29,7 @@ import '../assets/v-required-style.css'
 import Toast, { type PluginOptions as ToastPluginOptions } from "vue-toastification";
 import "vue-toastification/dist/index.css";
 
-import { DATA_TABLE_CONFIG, type DataTableGlobalConfig } from '@/config/datatableConfig';
+import { DATA_TABLE_CONFIG, type DataTableGlobalConfig } from '@/DatatableVue/config/datatableConfig';
 export interface SistecOptions {
   dataTable?: DataTableGlobalConfig; // Configurações opcionais da tabela
   toast?: ToastPluginOptions;        // Configurações opcionais do Toast

package/src/utils/svgFactory.ts

@@ -0,0 +1,99 @@
+/*
+========
+Arquivo responsável por converter strings de SVGs puros em componentes funcionais do Vue.
+Ele recebe um objeto aninhado contendo strings de SVGs e retorna um espelho desse objeto, mas com as strings substituídas por componentes renderizáveis, preservando classes e atributos dinâmicos, com tipagem genérica mapeada.
+========
+*/
+import { h } from 'vue';
+import type { FunctionalComponent, VNode } from 'vue';
+
+const parser = new DOMParser();
+
+/*
+Tipo que define a estrutura base de entrada.
+Por que é usada: Garante que o objeto passado siga o padrão de chaves contendo strings ou outros objetos.
+*/
+export type SvgSource = {
+  [key: string]: string | SvgSource;
+};
+
+/*
+Tipo genérico recursivo que espelha a estrutura exata do objeto de entrada.
+Por que é usada: Mapeia as chaves literais (como 'search', 'filter') do objeto de origem para que o TypeScript saiba exatamente quais propriedades existem, evitando o erro de propriedades indefinidas.
+*/
+export type IconTree<T> = {
+  [K in keyof T]: T[K] extends string
+    ? FunctionalComponent
+    : T[K] extends object
+    ? IconTree<T[K]>
+    : never;
+};
+
+/*
+Função que converte uma string de SVG em um componente Vue.
+Recebe: Uma string (stringSvg) contendo a marcação XML do SVG.
+Devolve: Um componente funcional do Vue que renderiza o SVG.
+Por que é usada: Permite que SVGs brutos sejam usados diretamente no template do Vue com suporte a atributos dinâmicos.
+*/
+const stringParaComponente = (stringSvg: string): FunctionalComponent => {
+  const doc = parser.parseFromString(stringSvg, 'image/svg+xml');
+  const root = doc.documentElement;
+
+  if (root.tagName.toLowerCase() !== 'svg') {
+    return () => h('span', {
+      style: {
+        backgroundColor: 'red',
+        color: 'white',
+        padding: '2px 4px',
+        textAlign: 'center',
+      }
+    }, 'Icon Error');
+  }
+
+  const atributosPadrao: Record<string, string> = {};
+  for (const attr of root.attributes) {
+    atributosPadrao[attr.name] = attr.value;
+  }
+
+  const conteudoInterno = root.innerHTML;
+
+  return (props: any, { attrs }: any): VNode => {
+    const classeOriginal = atributosPadrao.class || '';
+    const classeRecebida = (attrs.class as string) || ''; 
+
+    const classeCombinada = [classeOriginal, classeRecebida].filter(Boolean).join(' ');
+
+    const { class: _, ...restoPadrao } = atributosPadrao;
+    const { class: __, ...restoAttrs } = attrs;
+
+    return h('svg', {
+      ...restoPadrao, 
+      ...props,
+      ...restoAttrs,   
+      class: classeCombinada, 
+      innerHTML: conteudoInterno
+    });
+  };
+};
+
+/*
+Função que constrói a árvore de componentes de ícones dinamicamente.
+Recebe: Um objeto genérico (objetoOrigem) contendo as strings de SVGs organizadas.
+Devolve: Um objeto com a mesmíssima estrutura da entrada (inferida pelo TypeScript), contendo os componentes funcionais do Vue.
+Por que é usada: Processa um dicionário de ícones garantindo o autocompletar exato de cada chave no editor.
+*/
+export const buildIcons = <T extends Record<string, any>>(objetoOrigem: T): IconTree<T> => {
+  const resultado: any = {};
+
+  for (const chave in objetoOrigem) {
+    const valor = objetoOrigem[chave];
+
+    if (typeof valor === 'string') {
+      resultado[chave] = stringParaComponente(valor);
+    } else if (typeof valor === 'object' && valor !== null) {
+      resultado[chave] = buildIcons(valor);
+    }
+  }
+
+  return resultado as IconTree<T>;
+};

package/src/DatatableVue/components/VExtraActions.vue

@@ -1,47 +0,0 @@
-<template>
-    <div v-if="use_column_manager" class="dropdown d-inline-block ms-2">
-        <button class="btn  dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"
-            title="Gerenciar Colunas visíveis">
-            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-columns" width="24" height="24"
-                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
-                stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <path d="M4 6l5.5 0" />
-                <path d="M4 10l5.5 0" />
-                <path d="M4 14l5.5 0" />
-                <path d="M4 18l5.5 0" />
-                <path d="M14.5 6l5.5 0" />
-                <path d="M14.5 10l5.5 0" />
-                <path d="M14.5 14l5.5 0" />
-                <path d="M14.5 18l5.5 0" />
-            </svg>
-        </button>
-        <div class="dropdown-menu dropdown-menu-end p-3 shadow-sm" style="min-width: 220px; z-index: 1050;">
-            <h6 class="dropdown-header text-uppercase fw-bold mb-2">Exibir Colunas</h6>
-            <div class="d-flex flex-column gap-2">
-                <label v-for="coluna in columns_list" :key="coluna.id" class="form-check cursor-pointer m-0">
-                    <input class="form-check-input" type="checkbox" :checked="coluna.visible" :disabled="coluna.locked"
-                        @change="toggleColumnVisibility(coluna.id)">
-                    <span class="form-check-label user-select-none">{{ coluna.header }}</span>
-                </label>
-            </div>
-        </div>
-    </div>
-    <slot name="extra-actions">
-
-    </slot>
-</template>
-<script setup lang="ts">
-interface SearchProps {
-    columns_list?: any[];
-    use_column_manager?: boolean;
-    toggleColumnVisibility?: (columnId: string) => void;
-}
-withDefaults(defineProps<SearchProps>(), {
-    columns_list: () => [],
-    use_column_manager: false,
-    toggleColumnVisibility: () => { }
-});
-
-
-</script>