v-sistec-features 1.10.5 → 1.11.0

package/package.json

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

package/src/DatatableVue/components/VDataTable.vue

@@ -22,10 +22,8 @@
 
           <Search v-model:search="pagination.search" v-model:filter="pagination.filter" :list_filter="props.list_filter"
             :item_use="item_use" @search="reSearch" :deactivate_search_on_clear="props.deactivate_search_on_clear"
-            :placeholder_search="props.placeholder_search"
-            :deactivate_search_empty="props.deactivate_search_empty"
-            @clicked-clear-search="$emit('clickedClearSearch')"
-            />
+            :placeholder_search="props.placeholder_search" :deactivate_search_empty="props.deactivate_search_empty"
+            @clicked-clear-search="$emit('clickedClearSearch')" />
         </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"
@@ -165,7 +163,10 @@
                 </tr> -->
 
                 <draggable v-model="draggableColumns" tag="tr" item-key="header" :animation="400"
-                  ghost-class="ghost-item" drag-class="dragging-item">
+                  ghost-class="ghost-item" drag-class="dragging-item"
+                  @start="isDraggingColumns = true"
+                  @end="() => onDragEnd()"
+                  >
                   <template #header>
                     <th v-if="props.use_expandable_items"></th>
                     <th v-if="props.use_checkbox" class="w-1">
@@ -286,7 +287,7 @@
               </thead>
               <tbody>
                 <template v-for="item in items" :key="item[props.item_key]">
-                  <TransitionGroup tag="tr" name="column-move">
+                  <TransitionGroup tag="tr" :name="isDraggingColumns ? 'column-move' : ''" >
                     <td v-if="props.use_expandable_items" class="w-1">
                       <slot name="expand-button" :item="item" :is-expanded="is_item_expanded(item)"
                         :expand_item_toggle="expand_item_toggle">
@@ -369,7 +370,7 @@
                   <Transition :name="'expand-item-' + props.type_animation_expand"
                     :css="!props.deactivate_animation_expand">
                     <!-- mostra uma linha após cada item -->
-                    <tr v-if="is_item_expanded(item)" class="">
+                    <tr :id="'expand-item-' + item[props.item_key]" v-if="is_item_expanded(item)" class="">
                       <!-- se estiver usando checkbox existe uma coluna a mais -->
                       <td :colspan="colspanExpandItems()">
                         <slot name="after-row" :item="item">
@@ -421,6 +422,7 @@ import Search from './SearchDatatable.vue';
 import { useImagePreview } from '../composables/useImagePreview';
 import { dataTableApiKey, type ColumnConfiguration } from '../keys';
 import draggable from 'vuedraggable';
+import { useExpandedItem } from '../composables/useExpandedItem';
 
 const {
   isHovering,
@@ -468,6 +470,8 @@ const props = withDefaults(defineProps<VDataTableProps>(), {
   placeholder_search: "Buscar...",
   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',
@@ -487,10 +491,11 @@ const columns = ref<ColumnConfiguration[]>([]);
 const items = ref<T[]>([]) as Ref<T[]>;
 const totalItems = ref<number>(0);
 const selected_items = ref<T[]>([]) as Ref<T[]>;
-const expanded_items = ref<any[]>([]);
 const selectAllCheckbox = ref<HTMLInputElement | null>(null);
 const isDelaying = ref<boolean>(false);
 const delayTimer = ref<ReturnType<typeof setTimeout> | null>(null);
+// só ativa animação de arrastar colunas quando estiver arrastando
+const isDraggingColumns = ref(false);
 
 /*--------- definição de páginação ---------------*/
 const pagination = ref<PaginationObject>({
@@ -505,6 +510,18 @@ const urlReativa = computed(() => {
   pagination.value.current_page = props.page_starts_at;
   return props.endpoint;
 });
+
+const { 
+  expanded_items, 
+  expand_item_toggle,
+  is_item_expanded 
+} = useExpandedItem(
+  props.close_expanded_item_on_expand_new, 
+  props.item_key,
+  props.deactivate_animation_expand,
+  props.scroll_to_expanded_item
+);
+
 // =======================================================
 // 3. LÓGICA DA API (useFetch)
 // =======================================================
@@ -658,7 +675,11 @@ watch(response, (newResponse: any) => {
 // =======================================================
 // 6. MÉTODOS
 // =======================================================
-
+function onDragEnd() {
+  setTimeout(() => {
+    isDraggingColumns.value = false;
+  }, 500);
+}
 // Função para marcar ou desmarcar todos os itens da página atual
 function toggleSelectAll(): void {
   const pageItems = items.value;
@@ -811,19 +832,9 @@ function set_page(newPage: number): void {
     console.warn("Número de página inválido.");
   }
 }
-function expand_item_toggle(item: any): void {
-  const identifier_item = item[props.item_key];
-  const index = expanded_items.value.findIndex(expandedItem => expandedItem === identifier_item);
-  if (index > -1) {
-    expanded_items.value.splice(index, 1); // Remove se já existe
-  } else {
-    expanded_items.value.push(identifier_item); // Adiciona se não existe  
-  }
-}
-function is_item_expanded(item: any): boolean {
-  const identifier_item = item[props.item_key];
-  return expanded_items.value.some(expandedItem => expandedItem === identifier_item);
-}
+
+
+
 function close_all_expanded_items(): void {
   expanded_items.value = [];
 }

package/src/DatatableVue/composables/useExpandedItem.ts

@@ -0,0 +1,77 @@
+import { ref, nextTick } from 'vue';
+
+export function useExpandedItem(
+    close_expanded_item_on_expand_new: boolean,
+    item_key: string,
+    deactivate_animation_expand?: boolean,
+    scroll_to_expanded_item?: boolean
+) {
+    const expanded_items = ref<any[]>([]);
+
+    function close_all_expanded_items() {
+        expanded_items.value = [];
+    }
+
+    function is_item_expanded(item: any): boolean {
+        const identifier_item = item[item_key];
+        return expanded_items.value.some((expandedItem: any) => expandedItem === identifier_item);
+    }
+
+    function expand_item_toggle(item: any): void {
+        const identifier_item = item[item_key];
+
+        // 1. Verificamos se já existe
+        const index = expanded_items.value.findIndex((expandedItem: any) => expandedItem === identifier_item);
+        const is_already_expanded = index > -1;
+
+        // 2. Lógica para fechar o item expandido ao abrir um novo
+        if (close_expanded_item_on_expand_new) {
+            close_all_expanded_items();
+
+            if (!is_already_expanded) {
+                expanded_items.value.push(identifier_item);
+                if (scroll_to_expanded_item){
+                    scrollToExpadedItem(identifier_item);
+                }
+            }
+        }
+        // 3. Lógica padrão (multiplos)
+        else {
+            if (is_already_expanded) {
+                expanded_items.value.splice(index, 1);
+            } else {
+                expanded_items.value.push(identifier_item);
+                if (scroll_to_expanded_item){
+                    scrollToExpadedItem(identifier_item);
+                }
+                
+            }
+        }
+    }
+    function scrollToExpadedItem(identifier_item: any): void {
+        nextTick(() => {
+            if (deactivate_animation_expand) {
+
+                const rowElements: HTMLElement | null = document.querySelector('#expand-item-' + identifier_item)
+                if (rowElements) {
+                    rowElements.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+                return;
+            } else {
+                setTimeout(() => {
+                    const rowElements: HTMLElement | null = document.querySelector('#expand-item-' + identifier_item)
+                    if (rowElements) {
+                        rowElements.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    }
+                }, 600); // espera a animação terminar
+            }
+        });
+
+    }
+    return {
+        expanded_items,
+        is_item_expanded,
+        expand_item_toggle,
+        close_all_expanded_items
+    };
+}

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

@@ -55,6 +55,9 @@ export interface VDataTableProps {
   // Ativa a funcionalidade de seleção com checkboxes
   use_checkbox?: 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';