v-sistec-features 1.23.2 → 1.25.0

package/src/DatatableVue/components/VDataTable.vue

@@ -68,11 +68,11 @@
           </button>
         </div>
         <div class="table-responsive" v-else-if="items">
-          <div v-if="items.length > 0">
+          <div v-if="hasItems || options.show_header_when_empty">
             <table class="table table-vcenter table-selectable" :class="options.class_table">
               <thead>
 
-                <draggable v-model="draggableColumns" tag="tr" item-key="header" :animation="400"
+                <draggable v-model="draggableColumns" tag="tr" item-key="id" :animation="400"
                   ghost-class="ghost-item" drag-class="dragging-item" @start="isDraggingColumns = true"
                   @end="() => onDragEnd()">
 
@@ -86,9 +86,9 @@
 
                   <template #item="{ element: col }">
                     <v-th-data-table :header="col.header" :class_column="col.class_column"
-                      :use_ordering="col.use_ordering" :orderings_state="orderings_state[col.header] || 'none'"
-                      @toggleOrderingState="() => toggleOrderingState(col.header)" :locked="false" :col="col">
-                      
+                      :use_ordering="col.use_ordering" :orderings_state="orderings_state[col.id] || 'none'"
+                      @toggleOrderingState="() => toggleOrderingState(col.id)" :locked="false" :col="col">
+
                     </v-th-data-table>
                   </template>
 
@@ -96,9 +96,9 @@
 
                     <template v-for="col in lockedColumns" :key="col.field || col.header">
                       <v-th-data-table :header="col.header" :class_column="col.class_column"
-                        :use_ordering="col.use_ordering" :orderings_state="orderings_state[col.header] || 'none'"
-                        @toggleOrderingState="() => toggleOrderingState(col.header)" :col="col" locked>
-                        
+                        :use_ordering="col.use_ordering" :orderings_state="orderings_state[col.id] || 'none'"
+                        @toggleOrderingState="() => toggleOrderingState(col.id)" :col="col" locked>
+
                       </v-th-data-table>
 
                     </template>
@@ -107,114 +107,119 @@
               </thead>
 
               <tbody>
-                <template v-for="(item, index) in items" :key="item[options.item_key]">
-                  <TransitionGroup tag="tr" :name="isDraggingColumns ? 'column-move' : ''">
-                    <td v-if="options.use_expandable_items" class="w-1">
-                      <slot name="expand-button" :item="item" :index="index" :is-expanded="is_item_expanded(item)"
-                        :expand_item_toggle="expand_item_toggle">
-                        <button type="button" class="btn-clean btn-icon-anim"
-                          :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>
-
-                          </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>
-                          </template>
-
-                        </button>
-                      </slot>
-                    </td>
-                    <td v-if="options.use_checkbox" class="w-1">
-                      <input class="form-check-input m-0" type="checkbox" :checked="isSelected(item)"
-                        @change="toggleItemSelection(item)" aria-label="Selecionar este item" />
-                    </td>
-
-                    <td v-for="(col, index) in renderedColumns" :key="col.field || col.header" :class="col.class_row">
-                      <component v-if="col.bodySlot" :is="col.bodySlot" :item="item" :index="index"
-                        :is-selected="isSelected(item)" />
-                      <span @click="col.click ? col.click(item) : null" :class="computeClasses(col, item)"
-                        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="computeClasses(col, item)">
-                        <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="computeClasses(col, item)"
-                        v-else-if="col.type === 'html'" v-html="getSubItem(col.field, item)">
-                      </div>
-
-                      <div @click="col.click ? col.click(item) : null" :class="computeClasses(col, item)"
-                        v-else-if="col.type === 'img'">
-
-                        <div v-if="getSubItem(col.field, item)" v-bind="col.deactivate_img_preview ? {
-                          class: 'container-img'
-                        } :
-                          {
-                            onMouseover: (event) => handleMouseOver(event, getSubItem(col.field, item)),
-                            onMousemove: handleMouseMove,
-                            onMouseleave: handleMouseLeave,
-                            class: 'container-img container-img-preview'
-                          }">
-
-                          <img class="img-tamanho" :src="getSubItem(col.field, item)" />
-                          <img class="img-tamanho-cover" :src="getSubItem(col.field, item)" />
-                          <div class="bg-img"></div>
+                <template v-if="hasItems">
+                  <template v-for="(item, index) in items" :key="item[options.item_key]">
+                    <TransitionGroup tag="tr" :name="isDraggingColumns ? 'column-move' : ''">
+                      <td v-if="options.use_expandable_items" class="w-1">
+                        <slot name="expand-button" :item="item" :index="index" :is-expanded="is_item_expanded(item)"
+                          :expand_item_toggle="expand_item_toggle">
+                          <button type="button" class="btn-clean btn-icon-anim"
+                            :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>
+
+                            </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>
+                            </template>
+
+                          </button>
+                        </slot>
+                      </td>
+                      <td v-if="options.use_checkbox" class="w-1">
+                        <input class="form-check-input m-0" type="checkbox" :checked="isSelected(item)"
+                          @change="toggleItemSelection(item)" aria-label="Selecionar este item" />
+                      </td>
+
+                      <td v-for="(col, index) in renderedColumns" :key="col.field || col.header" :class="col.class_row">
+                        <component v-if="col.bodySlot" :is="col.bodySlot" :item="item" :index="index"
+                          :is-selected="isSelected(item)" />
+                        <span @click="col.click ? col.click(item) : null" :class="computeClasses(col, item)"
+                          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="computeClasses(col, item)">
+                          <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="computeClasses(col, item)"
+                          v-else-if="col.type === 'html'" v-html="getSubItem(col.field, item)">
                         </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>
-                  </TransitionGroup>
-                  <Transition :name="'expand-item-' + options.type_animation_expand"
-                    :css="!options.deactivate_animation_expand">
-                    <!-- mostra uma linha após cada item -->
-                    <tr :id="'expand-item-' + item[options.item_key]" v-if="is_item_expanded(item)"
-                      class="expanded-item-row">
-                      <!-- se estiver usando checkbox existe uma coluna a mais -->
-                      <td :colspan="colspanExpandItems()">
-                        <slot name="after-row" :item="item">
+                        <div @click="col.click ? col.click(item) : null" :class="computeClasses(col, item)"
+                          v-else-if="col.type === 'img'">
 
-                        </slot>
+                          <div v-if="getSubItem(col.field, item)" v-bind="col.deactivate_img_preview ? {
+                            class: 'container-img'
+                          } :
+                            {
+                              onMouseover: (event) => handleMouseOver(event, getSubItem(col.field, item)),
+                              onMousemove: handleMouseMove,
+                              onMouseleave: handleMouseLeave,
+                              class: 'container-img container-img-preview'
+                            }">
+
+                            <img class="img-tamanho" :src="getSubItem(col.field, item)" />
+                            <img class="img-tamanho-cover" :src="getSubItem(col.field, item)" />
+                            <div class="bg-img"></div>
+                          </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>
-                  </Transition>
+                    </TransitionGroup>
+                    <Transition :name="'expand-item-' + options.type_animation_expand"
+                      :css="!options.deactivate_animation_expand">
+                      <!-- mostra uma linha após cada item -->
+                      <tr :id="'expand-item-' + item[options.item_key]" v-if="is_item_expanded(item)"
+                        class="expanded-item-row">
+                        <!-- se estiver usando checkbox existe uma coluna a mais -->
+                        <td :colspan="colspanExpandItems()">
+                          <slot name="after-row" :item="item">
+
+                          </slot>
 
+                        </td>
+                      </tr>
+                    </Transition>
 
+
+                  </template>
                 </template>
 
+
               </tbody>
             </table>
           </div>
-          <div v-else-if="first_fetch === false">
+          <div v-if="!hasItems && first_fetch === false">
             <slot name="idle-state">
 
             </slot>
           </div>
-          <div v-else class="text-center p-4 text-secondary">
+          <div v-else-if="!hasItems" class="text-center p-4 text-secondary">
             <p class="m-0">Nenhum item encontrado.</p>
           </div>
         </div>
@@ -250,6 +255,7 @@ import { useDataTableFetch } from '../composables/useDataTableFetch';
 import { useCheckBox } from '../composables/useCheckBox.ts';
 import VDataTableLoading from './VDataTableLoading.vue';
 import VThDataTable from './VThDataTable.vue';
+
 const globalConfig = inject(DATA_TABLE_CONFIG, {});
 const {
   isHovering,
@@ -288,6 +294,7 @@ const props = withDefaults(defineProps<VDataTableProps>(), {
   disable_search: false,
   pagination_teleport: null,
   search_teleport: null,
+  show_header_when_empty: false,
 });
 const options = computed(() => {
   return {
@@ -326,6 +333,7 @@ const options = computed(() => {
     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,
   };
 });
 const emit = defineEmits(['tradePage', 'beforeFetch', 'afterFetch', 'clickedClearSearch']);
@@ -386,22 +394,49 @@ const {
 
 // colunas TRAVADAS (apenas leitura)
 const lockedColumns = computed(() =>
-  columns.value.filter(c => c.locked)
+  columns.value.filter(c => c.locked && c.visible !== false)
 );
 // 'v-model' para as colunas ARRASTÁVEIS (com get/set)
 const draggableColumns = computed({
   get() {
-    return columns.value.filter(c => !c.locked);
+    return columns.value.filter(c => !c.locked && c.visible !== false);
   },
   set(newUnlockedOrder) {
-    const locked = lockedColumns.value;
-    columns.value = [...newUnlockedOrder, ...locked];
+    const locked = columns.value.filter(c => c.locked);
+    const hidden = columns.value.filter(c => !c.locked && c.visible === false);
+    columns.value = [...newUnlockedOrder, ...hidden, ...locked];
   }
 });
 // colunas RENDERIZADAS (ordem final)
 const renderedColumns = computed(() => {
   return [...draggableColumns.value, ...lockedColumns.value];
 });
+/*
+Variável que mapeia as colunas cadastradas.
+Usada para entregar ao componente pai as informações de cabeçalho, campo, se a coluna é opcional e se está visível atualmente.
+*/
+const columns_list = computed(() => {
+  return columns.value.map(col => ({
+    id: col.id,
+    header: col.header,
+    field: col.field,
+    start_hidden: !!col.start_hidden, // Converte para booleano, caso seja undefined
+    visible: col.visible !== false,
+    locked: col.locked
+  }));
+});
+/*
+Função que inverte o estado de visibilidade de uma coluna específica.
+Recebe: id (string), que é o identificador único da coluna.
+Devolve: nada (void).
+Por que é usada: Permite ao usuário exibir ou ocultar uma coluna dinamicamente (como as opcionais) diretamente pela interface externa da tabela.
+*/
+function toggleColumnVisibility(id: string): void {
+  const coluna = columns.value.find(c => c.id === id);
+  if (coluna) {
+    coluna.visible = !coluna.visible;
+  }
+}
 
 const item_use = computed<number[]>(() => {
   let use = [1]
@@ -411,8 +446,10 @@ const item_use = computed<number[]>(() => {
   return use;
 });
 
-
-
+//tem pelo menos um item
+const hasItems = computed(() => {
+  return items.value.length > 0
+});
 
 
 // =======================================================
@@ -489,22 +526,22 @@ function limiteText(text: string | null, limite: number | null): string | null {
   return text;
 }
 
-function toggleOrderingState(header: string) {
+function toggleOrderingState(id: string) {
 
   // desabilita todos que não são o header clicado
   for (const key in orderings_state.value) {
-    if (key !== header) {
+    if (key !== id) {
       orderings_state.value[key] = 'none';
     }
   }
 
-  const currentState = orderings_state.value[header] || 'none';
+  const currentState = orderings_state.value[id] || 'none';
   if (currentState === 'none') {
-    orderings_state.value[header] = 'increasing';
+    orderings_state.value[id] = 'increasing';
   } else if (currentState === 'increasing') {
-    orderings_state.value[header] = 'decreasing';
+    orderings_state.value[id] = 'decreasing';
   } else {
-    orderings_state.value[header] = 'none';
+    orderings_state.value[id] = 'none';
   }
 
   reSearch();
@@ -587,7 +624,9 @@ defineExpose<ExposedFunctions<T>>({
   atLeastOneSelected,
   expand_item_toggle,
   close_all_expanded_items,
-  selectAllCheckbox
+  selectAllCheckbox,
+  toggleColumnVisibility,
+  columns_list,
 });
 
 onMounted(() => {
@@ -608,258 +647,5 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.table-responsive {
-  overflow-x: auto;
-}
-
-.state-feedback {
-  padding: 1rem;
-  text-align: center;
-}
-
-.state-feedback.error {
-  color: red;
-}
-
-.pagination-controls {
-  margin-top: 1rem;
-  display: flex;
-  justify-content: space-between;
-}
-
-$max-width-img: 40px;
-
-
-.container-img {
-  aspect-ratio: 1;
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-  max-width: $max-width-img;
-  min-width: $max-width-img;
-
-  .img-tamanho-cover {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 0;
-    opacity: 0.5;
-    filter: blur(4px);
-  }
-
-  .img-tamanho {
-    object-fit: contain;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-  }
-
-  &.container-img-preview {
-    cursor: pointer;
-
-    &:hover {
-      border-style: dashed;
-      border-color: var(--tblr-primary);
-      border-width: 2px;
-      transition: border-width 0.15s ease-in-out;
-
-      .img-tamanho {
-        opacity: 0.3;
-      }
-    }
-  }
-}
-
-.bg-img {
-  background-color: #0000004d;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-
-$max-width-preview: 250px;
-
-.image-preview-container {
-  position: fixed;
-
-  z-index: 9999;
-
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  padding: 5px;
-
-  pointer-events: none;
-  transition: opacity 0.2s ease-in-out;
-
-  .image-preview-large {
-    display: block;
-    max-width: $max-width-preview;
-
-    max-height: $max-width-preview;
-    border-radius: 4px;
-  }
-}
-
-.form-check-input {
-  border-width: 1px !important;
-  border-color: rgba(0, 0, 0, 0.391) !important;
-  width: 17px;
-  height: 17px;
-}
-
-[data-bs-theme=dark] .form-check-input {
-  border-color: rgba(255, 255, 255, 0.374) !important;
-}
-
-
-
-/*
-  Estilos para arrastar e soltar colunas
-*/
-
-.ghost-item {
-  opacity: 0.5;
-  background: var(--tblr-primary-lt, #e6f0ff);
-  border-radius: 8px;
-}
-
-.dragging-item {
-  cursor: grabbing;
-  background: var(--tblr-primary);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  opacity: 0.5;
-  background-color: var(--tblr-primary-bg-subtle);
-  filter: grayscale(0) invert(0);
-}
-
-.header-draggable {
-  cursor: grab;
-}
-
-
-/*
-  Animações para movimentação de colunas
-*/
-.column-move-move {
-  transition: transform 0.4s ease;
-}
-
-.column-move-enter-active,
-.column-move-leave-active {
-  transition: all 0.4s ease;
-}
-
-
-.header-ordering {
-  display: flex;
-  justify-content: space-between;
-}
-
-
-
-
-
-
-
-
-
-
-/* 1. Animação de entrada para novos itens */
-.expand-item-expand-enter-active {
-  transition: all 0.5s ease;
-}
-
-.expand-item-expand-enter-from {
-  opacity: 0;
-  transform: scaleY(0.3) translateY(-30px);
-  /* Começa em cima e desce */
-}
-
-.expand-item-expand-enter-to {
-  opacity: 1;
-  transform: scaleY(1);
-  transform: translateY(0);
-}
-
-/* 2. Animação de saída para itens removidos*/
-.expand-item-expand-leave-active {
-  transition: all 0.4s ease;
-}
-
-.expand-item-expand-leave-to {
-  opacity: 0;
-  transform: scaleY(0.3) translateY(-30px);
-  /* Desliza para  cima e desaparece */
-}
-
-
-
-.expand-item-fade-enter-active,
-.expand-item-fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.expand-item-fade-enter-from,
-.expand-item-fade-leave-to {
-  opacity: 0;
-}
-
-
-
-
-
-.btn-clean {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  border-radius: 4px;
-  transition: background-color 0.2s ease;
-  background: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-}
-
-
-.icon-transition-arrow {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
-  color: var(--tblr-primary, #206bc4);
-}
-
-
-.is-expanded .icon-transition-arrow {
-  transform: rotate(90deg);
-}
-
-
-.icon-transition-plus {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
-  color: var(--tblr-primary, #206bc4);
-}
-
-.icon-transition-plus .vertical-line {
-  transform-origin: center;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
-}
-
-.is-expanded .icon-transition-plus {
-  transform: rotate(180deg);
-}
-
-.is-expanded .icon-transition-plus .vertical-line {
-  transform: scaleY(0);
-  opacity: 0;
-}
+@use '@/DatatableVue/style/scss/VDataTable.scss';
 </style>

package/src/DatatableVue/composables/useDataTableFetch.ts

@@ -30,9 +30,9 @@ export function useDataTableFetch<T>(
         const objectOrdering: Record<string, any> = {};
         for (const col of columns.value) {
             if (col.use_ordering) {
-                if (orderings_state.value[col.header] === 'increasing') {
+                if (orderings_state.value[col.id] === 'increasing') {
                     objectOrdering[col.param_ordering] = col.increasing_value || 'increasing';
-                } else if (orderings_state.value[col.header] === 'decreasing') {
+                } else if (orderings_state.value[col.id] === 'decreasing') {
                     objectOrdering[col.param_ordering] = col.decreasing_value || 'decreasing';
                 } 
             } 

package/src/DatatableVue/keys.ts

@@ -22,6 +22,10 @@ export interface ColumnConfiguration {
   decreasing_value: string;
   increasing_value: string;
   class_rules?: Record<string, (item: any) => boolean>;
+  start_hidden?: boolean;
+  // não é prop, é uma propriedade interna do VDataTable para controlar a visibilidade da coluna
+  visible?: boolean; 
+  id: string; // ID único da coluna, gerado internamente pelo VDataTable
 }
 
 // A API que o VDataTable "fornece" para os filhos