v-sistec-features 1.26.4 → 1.27.0

package/package.json

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

package/src/DatatableVue/components/SearchDatatable.vue

@@ -1,37 +1,22 @@
 <template>
 
 
-    <a v-if="item_use.includes(2)" href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown"
+    <a @click.prevent v-if="item_use.includes(2)" href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown"
         title="Pesquisas Prédefinidas">
-        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter" 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>
-            <path
-                d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z">
-            </path>
-        </svg>
+        <!-- filter -->
+        <component :is="icons.search.filter" />
     </a>
     <div class="input-icon">
         <input type="text" class="form-control ms-1" id="inputSearchVDataTable" v-model="modelSearch"
             @keyup.enter="searchEnter" :placeholder="placeholder_search">
 
         <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>
+            <!-- clear -->
+            <component :is="icons.search.clear" />
         </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"
-                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
-                <path d="M21 21l-6 -6"></path>
-            </svg>
+            <!-- lupa -->
+            <component :is="icons.search.loupe" />
         </span>
     </div>
     <div v-if="item_use.includes(2)" class="dropdown-menu">
@@ -58,6 +43,9 @@
 </template>
 <script setup lang="ts">
 import { computed, watch } from 'vue';
+import {buildIcons} from '@/utils/svgFactory'
+import { svgs } from '@/DatatableVue/style/svgs'
+const icons = buildIcons(svgs)
 interface SearchProps {
     search: string;
     filter?: string;

package/src/DatatableVue/components/VColumnManager.vue

@@ -0,0 +1,53 @@
+<template>
+    <div v-if="use_column_manager" :class="[
+        { 'dropdown d-inline-block ms-2': !disable_class_column_manager_default },
+        class_column_manager_dropdown
+    ]">
+        <button :class="[
+            { 'btn  dropdown-toggle': !disable_class_column_manager_default },
+            class_column_manager_button
+        ]" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Gerenciar Colunas visíveis">
+            <component :is="icons.column_manager" />
+        </button>
+        <div class="dropdown-menu dropdown-menu-end p-3 shadow-sm" :class="[
+            { 'dropdown-menu dropdown-menu-end p-3 shadow-sm': !disable_class_column_manager_default },
+            class_column_manager_dropdown_menu
+        ]" 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>
+
+</template>
+<script setup lang="ts">
+import { buildIcons } from '@/utils/svgFactory'
+import { svgs } from '@/DatatableVue/style/svgs'
+const icons = buildIcons(svgs)
+
+interface SearchProps {
+    columns_list?: any[];
+    use_column_manager?: boolean;
+    toggleColumnVisibility?: (columnId: string) => void;
+    class_column_manager_dropdown?: string;
+    class_column_manager_dropdown_menu?: string;
+    class_column_manager_button?: string;
+    disable_class_column_manager_default?: boolean;
+}
+withDefaults(defineProps<SearchProps>(), {
+    columns_list: () => [],
+    use_column_manager: false,
+    toggleColumnVisibility: () => { },
+    class_column_manager_dropdown: '',
+    class_column_manager_dropdown_menu: '',
+    class_column_manager_button: '',
+    disable_class_column_manager_default: false
+});
+
+
+</script>

package/src/DatatableVue/components/VDataTable.vue

@@ -20,8 +20,9 @@
 
           </slot>
 
-          <Teleport v-if="isMounted" :to="options.search_teleport || 'body'" :disabled="!options.search_teleport">
-            <div class="dropdown d-flex">
+
+          <div class="dropdown d-flex">
+            <Teleport v-if="isMounted" :to="options.search_teleport || 'body'" :disabled="!options.search_teleport">
               <Search v-if="!options.disable_search" v-model:search="pagination.search"
                 v-model:filter="pagination.filter" :list_filter="options.list_filter" :item_use="item_use"
                 @search="reSearch" :deactivate_search_on_clear="options.deactivate_search_on_clear"
@@ -36,17 +37,19 @@
                   </slot>
                 </template>
               </Search>
+            </Teleport>
+            <Teleport v-if="isMounted" :to="options.column_manager_teleport || 'body'" :disabled="!options.column_manager_teleport">
+              <VColumnManager :use_column_manager="options.use_column_manager" :columns_list="columns_list"
+                :toggleColumnVisibility="toggleColumnVisibility"
+                :disable_class_column_manager_default="options.disable_class_column_manager_default"
+                >
+              </VColumnManager>
+            </Teleport>
+            <Teleport v-if="isMounted" :to="options.extra_actions_teleport || 'body'" :disabled="!options.extra_actions_teleport">
+              <slot name="extra-actions"></slot>
+            </Teleport>
+          </div>
 
-              <VExtraActions :use_column_manager="options.use_column_manager" :columns_list="columns_list"
-                :toggleColumnVisibility="toggleColumnVisibility">
-                <template #extra-actions>
-                  <slot name="extra-actions">
-                  </slot>
-                </template>
-              </VExtraActions>
-            </div>
-
-          </Teleport>
         </div>
         <slot name="item-selected-info" :selected_items="selected_items" :clearSelection="() => selected_items = []">
           <div v-if="(options.use_checkbox && selected_items.length > 0) && !options.deactivate_selected_info"
@@ -55,17 +58,9 @@
                 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>
+              <component :is="icons.checkbox.clear" />
+              Limpar Seleção
+            </a>
           </div>
         </slot>
 
@@ -134,24 +129,11 @@
                             :class="{ 'is-expanded': is_item_expanded(item) }" @click="expand_item_toggle(item)">
 
                             <template v-if="options.type_button_expand === 'arrow'">
-                              <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-chevron-right icon-transition-arrow">
-                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                <path d="M9 6l6 6l-6 6" />
-                              </svg>
-
+                              <component :is="icons.expand.arrow" />
                             </template>
 
                             <template v-else>
-                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
-                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                stroke-linejoin="round" class="icon icon-transition-plus">
-                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                <path d="M12 5l0 14" class="vertical-line" />
-                                <path d="M5 12l14 0" />
-                              </svg>
+                              <component :is="icons.expand.plus" />
                             </template>
 
                           </button>
@@ -260,26 +242,28 @@
 
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { VDataTableProps, ExposedFunctions, PaginationObject } from '../types/v-data-table.ts';
-import { readonly, ref, provide, computed, watch, nextTick, inject, onMounted } from 'vue';
-import { DATA_TABLE_CONFIG } from '@/config/datatableConfig'
+import { readonly, ref, provide, computed, watch, nextTick, onMounted } from 'vue';
 import PaginationDatatable from '@/Pagination/Pagination.vue';
 import Search from './SearchDatatable.vue';
-import VExtraActions from './VExtraActions.vue';
+import VColumnManager from './VColumnManager.vue';
 import { useImagePreview } from '../composables/useImagePreview';
 import { dataTableApiKey, type ColumnConfiguration } from '../keys';
 import draggable from 'vuedraggable';
 import { useExpandedItem } from '../composables/useExpandedItem';
 import { useDataTableFetch } from '../composables/useDataTableFetch';
-import { useCheckBox } from '../composables/useCheckBox.ts';
+import { useCheckBox } from '../composables/useCheckBox';
+import { useDataTableConfig } from '../composables/useDataTableConfig';
 import VDataTableLoading from './VDataTableLoading.vue';
 import VThDataTable from './VThDataTable.vue';
-
+import { buildIcons } from '@/utils/svgFactory'
+import { svgs } from '@/DatatableVue/style/svgs'
+const icons = buildIcons(svgs)
 /* 
 Variável responsável por indicar se o componente já foi totalmente montado no DOM.
 Por que é usada: Impede que o componente Teleport tente enviar elementos para uma div que ainda não foi renderizada, evitando quebras na aplicação.
 */
 const isMounted = ref(false);
-const globalConfig = inject(DATA_TABLE_CONFIG, {});
+
 const {
   isHovering,
   previewSrc,
@@ -289,80 +273,11 @@ const {
   handleMouseLeave
 } = useImagePreview();
 
+// Apenas define as props! O que não for passado será undefined, ativando a cascata
+const props = defineProps<VDataTableProps>();
+// mescla a prop com o padrão e o global definido pelo usuario
+const { options } = useDataTableConfig(props);
 
-// =======================================================
-// 1. DEFINIÇÃO DE PROPS COM VALORES PADRÃO
-// =======================================================
-const props = withDefaults(defineProps<VDataTableProps>(), {
-  fetch_name: '',
-  custom_loading: null,
-  deactivate_default_params: false,
-
-  add_params: () => ({}),
-  list_filter: () => [],
-
-  use_checkbox: false,
-
-  deactivate_selected_info: false,
-  immediate: true,
-  deactivate_search_on_clear: false,
-  use_expandable_items: false,
-  close_expanded_item_on_expand_new: false,
-  scroll_to_expanded_item: false,
-  type_animation_expand: 'expand',
-  deactivate_animation_expand: false,
-  type_button_expand: 'arrow',
-  deactivate_search_empty: false,
-  disable_request: false,
-  disable_search: false,
-  pagination_teleport: null,
-  search_teleport: null,
-  show_header_when_empty: false,
-  storage_id: '',
-  use_column_manager: false,
-});
-const options = computed(() => {
-  return {
-    // Primeiro, espelha todas as props originais.
-    ...props,
-
-    // Agora SOBRESCREVEMOS as propriedades que precisam de lógica Global/Default
-    // (Prioridade para Prop, mas aceita Global)
-
-    // === TEXTOS ===
-    first_text_page_size: props.first_text_page_size ?? globalConfig.first_text_page_size ?? 'Mostrar',
-    second_text_page_size: props.second_text_page_size ?? globalConfig.second_text_page_size ?? 'registros',
-    placeholder_search: props.placeholder_search ?? globalConfig.placeholder_search ?? 'Buscar...',
-
-    // === CLASSES  ===
-    class_table: props.class_table || globalConfig.class_table || '',
-    class_pagination: props.class_pagination || globalConfig.class_pagination || '',
-    class_container: props.class_container || globalConfig.class_container || '',
-    class_content: props.class_content || globalConfig.class_content || '',
-    class_filters: props.class_filters || globalConfig.class_filters || '',
-    class_page_size: props.class_page_size || globalConfig.class_page_size || '',
-
-    // === CONFIGURAÇÃO DE API ===
-    filter_param_name: props.filter_param_name ?? globalConfig.filter_param_name ?? 'filter',
-    search_param_name: props.search_param_name ?? globalConfig.search_param_name ?? 'search',
-    page_param_name: props.page_param_name ?? globalConfig.page_param_name ?? 'page',
-    page_size_param_name: props.page_size_param_name ?? globalConfig.page_size_param_name ?? 'page_size',
-    page_starts_at: props.page_starts_at ?? globalConfig.page_starts_at ?? 0,
-    item_key: props.item_key ?? globalConfig.item_key ?? 'id',
-    data_key: props.data_key ?? globalConfig.data_key ?? 'results',
-    total_key: props.total_key ?? globalConfig.total_key ?? 'count',
-
-    // === COMPORTAMENTO ===
-    limit_per_page: props.limit_per_page ?? globalConfig.limit_per_page ?? 5,
-    type_loading: props.type_loading ?? globalConfig.type_loading ?? 'placeholder',
-    min_loading_delay: props.min_loading_delay ?? globalConfig.min_loading_delay ?? 600,
-    retry_attempts: props.retry_attempts ?? globalConfig.retry_attempts ?? 3,
-    retry_delay: props.retry_delay ?? globalConfig.retry_delay ?? 2000,
-    show_header_when_empty: props.show_header_when_empty ?? globalConfig.show_header_when_empty ?? false,
-    storage_id: props.storage_id ?? globalConfig.storage_id ?? '',
-    use_column_manager: props.use_column_manager ?? globalConfig.use_column_manager ?? false,
-  };
-});
 const emit = defineEmits(['tradePage', 'beforeFetch', 'afterFetch', 'clickedClearSearch']);
 
 // =======================================================

package/src/DatatableVue/components/VOrderingIcon.vue

@@ -1,35 +1,8 @@
 <template>
   <span v-if="use_ordering" @click="emit('toggle')" class="cursor-pointer">
-    <svg v-if="!props.orderings_state || props.orderings_state === '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="props.orderings_state === '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="props.orderings_state === '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>
+    <component v-if="!props.orderings_state || props.orderings_state === 'none'" :is="icons.ordering.default" />
+    <component v-else-if="props.orderings_state === 'decreasing'" :is="icons.ordering.decreasing" />
+    <component v-else-if="props.orderings_state === 'increasing'" :is="icons.ordering.increasing" />
   </span>
 </template>
 
@@ -39,6 +12,10 @@
 Componente interno de uso exclusivo do VDataTable para renderizar o ícone de ordenação.
 ========
 */
+import { buildIcons } from '@/utils/svgFactory'
+import { svgs } from '@/DatatableVue/style/svgs'
+const icons = buildIcons(svgs)
+
 const props = defineProps<{
   orderings_state?: 'none' | 'increasing' | 'decreasing';
   use_ordering?: boolean;

package/src/DatatableVue/composables/useDataTableConfig.ts

@@ -0,0 +1,37 @@
+/*
+========
+Responsável por mesclar as propriedades recebidas pelo componente VDataTable com a configuração global da aplicação.
+========
+*/
+import { computed, inject } from 'vue';
+import { DATA_TABLE_CONFIG } from '@/DatatableVue/config/datatableConfig';
+import type { VDataTableProps, DataTablePropsWithDefaults } from '../types/v-data-table';
+import { defaultDataTableConfig } from '@/DatatableVue/config/datatableDefaults';
+/*
+Função que gera as opções finais da tabela.
+Recebe: As propriedades (props) originais do componente.
+Devolve: Um objeto reativo (computed) com todas as propriedades mescladas com os valores globais.
+Por que é usada: Limpa o componente principal, isolando a lógica de fallback de configurações e facilitando a manutenção de novas propriedades.
+*/
+export function useDataTableConfig(props: VDataTableProps) {
+    const globalConfig = inject(DATA_TABLE_CONFIG, {});
+
+    const options = computed<DataTablePropsWithDefaults>(() => {
+        // 1. Filtramos as props do componente para remover tudo que for "undefined".
+        // Se não fizermos isso, uma prop undefined vai esmagar a configuração global na hora de mesclar.
+        const propsPassadasPeloUsuario = Object.fromEntries(
+            Object.entries(props).filter(([_, valor]) => valor !== undefined)
+        );
+
+        // 2. O Merge Dinâmico!
+        // A ordem importa! O que vem por último sobrescreve o anterior. 
+        // (Prop > Global > Default) 
+        return {
+            ...defaultDataTableConfig,       // 1º Camada: Prioridade Mínima (Valores Padrão)
+            ...globalConfig,                 // 2º Camada: Prioridade Média (Valores Globais definidos por quem usa o plugin)
+            ...propsPassadasPeloUsuario      // 3º Camada: Prioridade Máxima (O que o dev digitou na tela)
+        } as DataTablePropsWithDefaults;
+    });
+
+    return { options };
+}

package/src/{config → DatatableVue/config}/datatableConfig.ts

@@ -5,4 +5,4 @@ import type { VDataTableProps } from '@/DatatableVue/types/v-data-table';
 export type DataTableGlobalConfig = Partial<VDataTableProps>;
 
 // A chave para o provide/inject
-export const DATA_TABLE_CONFIG: InjectionKey<DataTableGlobalConfig> = Symbol('DataTableConfig');
+export const DATA_TABLE_CONFIG: InjectionKey<DataTableGlobalConfig> = Symbol('DataTableConfig');

package/src/DatatableVue/config/datatableDefaults.ts

@@ -0,0 +1,75 @@
+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>;
+/**
+ * nesse arquivo todas as props que não são obrigatórias ou seja que tem ?: definidas
+ * no typescript, são definidas aqui com valores default
+ * **/
+export const defaultDataTableConfig: DataTableGlobalConfig = {
+    // Configurações de API 
+
+    fetch_name: '',
+    custom_loading: null,
+    deactivate_default_params: false,
+
+    add_params: {},
+    list_filter: [],
+
+    use_checkbox: false,
+
+    deactivate_selected_info: false,
+    immediate: true,
+    deactivate_search_on_clear: false,
+    use_expandable_items: false,
+    close_expanded_item_on_expand_new: false,
+    scroll_to_expanded_item: false,
+    type_animation_expand: 'expand',
+    deactivate_animation_expand: false,
+    type_button_expand: 'arrow',
+    deactivate_search_empty: false,
+    disable_request: false,
+    disable_search: false,
+    pagination_teleport: null,
+    search_teleport: null,
+    extra_actions_teleport: null,
+    column_manager_teleport: null,
+
+    // Classes Estruturais Base
+    class_column_manager_dropdown: '',
+    class_column_manager_dropdown_menu: '',
+    class_column_manager_button: '',
+    disable_class_column_manager_default: false,
+
+    // === TEXTOS ===
+    first_text_page_size: 'Mostrar',
+    second_text_page_size: 'registros',
+    placeholder_search: 'Buscar...',
+
+    // === CLASSES  ===
+    class_table: '',
+    class_pagination: '',
+    class_container: '',
+    class_content: '',
+    class_filters: '',
+    class_page_size: '',
+
+    // === CONFIGURAÇÃO DE API ===
+    filter_param_name: 'filter',
+    search_param_name: 'search',
+    page_param_name: 'page',
+    page_size_param_name: 'page_size',
+    page_starts_at: 0,
+    item_key: 'id',
+    data_key: 'results',
+    total_key: 'count',
+
+    // === COMPORTAMENTO ===
+    limit_per_page: 5,
+    type_loading: 'placeholder',
+    min_loading_delay: 600,
+    retry_attempts: 3,
+    retry_delay: 2000,
+    show_header_when_empty: false,
+    storage_id: '',
+    use_column_manager: false,
+};  

package/src/DatatableVue/style/svgs.ts

@@ -0,0 +1,33 @@
+/* 
+========
+Arquivo responsável por armazenar as strings brutas de todos os SVGs utilizados pelo sistema.
+Ele exporta um objeto contendo as marcações XML dos ícones para serem processados pela fábrica de componentes.
+========
+*/
+
+import type { SvgSource } from '@/utils/svgFactory';
+
+/*
+Objeto que armazena as strings dos ícones SVG.
+Por que é usada: Centraliza os ícones do sistema. Usa o operador 'satisfies' para garantir a integridade estrutural sem perder o autocompletar das chaves literais (search, filter, etc) na tipagem estrita.
+*/
+export const svgs = {
+    search: {
+        filter: `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter" 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> <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z"> </path> </svg>`,
+        clear: `<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>`,
+        loupe: `<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"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path> <path d="M21 21l-6 -6"></path> </svg>`,
+    },
+    checkbox: {
+        clear :` <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> `,
+    },
+    expand: {
+        arrow: `<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-chevron-right icon-transition-arrow"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 6l6 6l-6 6" /></svg>`,
+        plus: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-transition-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 5l0 14" class="vertical-line" /><path d="M5 12l14 0" /></svg>`,
+    },
+    ordering: {
+        default: ` <svg 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> `,
+        decreasing:` <svg 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> `,
+        increasing:` <svg 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> `,
+    },
+    column_manager: ` <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> `,
+} satisfies SvgSource;