v-sistec-features 1.4.1 → 1.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-sistec-features",
   "private": false,
-  "version": "1.4.1",
+  "version": "1.6.0",
   "author": "Márlon Bento Azevedo (https://github.com/marlon-bento)",
   "repository": {
     "type": "git",
@@ -45,7 +45,8 @@
   },
   "peerDependencies": {
     "@tabler/icons-vue": "^3.35.0",
-    "vue": "^3.2.0"
+    "vue": "^3.2.0",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
@@ -65,8 +66,8 @@
     "vue-tsc": "^3.1.0"
   },
   "dependencies": {
+    "@formkit/drag-and-drop": "^0.5.3",
     "@tabler/core": "^1.4.0",
-    "v3-infinite-loading": "^1.3.2",
-    "vue": "^3.2.0"
+    "v3-infinite-loading": "^1.3.2"
   }
 }

package/src/DatatableVue/components/VColumn.vue

@@ -18,6 +18,12 @@ interface VColumnProps {
   limite_text?: number | string | null;
   transform_function?: ((value: any) => any) | null;
   click?: Function | null;
+  // bloqueia a coluna para não ser movida
+  locked?: boolean;
+  use_ordering?: boolean;
+  param_ordering?: string;
+  decreasing_value?: string;
+  increasing_value?: string;
 }
 const props = withDefaults(defineProps<VColumnProps>(), {
   field: null,
@@ -43,6 +49,12 @@ const props = withDefaults(defineProps<VColumnProps>(), {
   /* recebe função para alterar o que é mostrado */
   transform_function:  null ,
   click: null,
+  locked: false,
+
+  use_ordering: false,
+  param_ordering: '',
+  decreasing_value: '',
+  increasing_value: '',
 });
 
 const slots = useSlots();
@@ -87,6 +99,11 @@ onMounted(() => {
     class_item: props.class_item,
     click: props.click,
     transform_function: props.transform_function,
+    locked: props.locked,
+    use_ordering: props.use_ordering,
+    param_ordering: props.param_ordering,
+    decreasing_value: props.decreasing_value,
+    increasing_value: props.increasing_value,
 
     bodySlot: slots.body,
     ...(props.type === 'text' && { limite_text: Number(props.limite_text) }),

package/src/DatatableVue/components/VDataTable.vue

@@ -136,7 +136,7 @@
           <div v-if="items.length > 0">
             <table class="table table-vcenter table-selectable" :class="props.class_table">
               <thead>
-                <tr>
+                <!-- <tr>
                   <th v-if="props.use_checkbox" class="w-1">
                     <input class="form-check-input m-0" type="checkbox" ref="selectAllCheckbox"
                       @change="toggleSelectAll" aria-label="Selecionar todos os itens na página" />
@@ -144,15 +144,134 @@
                   <th v-for="col in columns" :key="col.field || col.header" :class="col.class_column">
                     {{ col.header }}
                   </th>
-                </tr>
+                </tr> -->
+
+                <draggable v-model="draggableColumns" tag="tr" item-key="header" :animation="400"
+                  ghost-class="ghost-item" drag-class="dragging-item">
+                  <template #header>
+                    <th v-if="props.use_checkbox" class="w-1">
+                      <input class="form-check-input m-0" type="checkbox" ref="selectAllCheckbox"
+                        @change="toggleSelectAll" aria-label="Selecionar todos os itens na página" />
+                    </th>
+                  </template>
+
+                  <template #item="{ element: col }">
+                    <template v-if="col.use_ordering">
+                      <th class="header-draggable" :class="col.class_column">
+                        <div class="header-ordering">
+                          <span>{{ col.header }}</span>
+
+                          <span @click="() => toggleOrderingState(col.header)" class="ms-2 cursor-pointer">
+                            <svg v-if="!orderings_state[col.header] || orderings_state[col.header] === '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="orderings_state[col.header] === '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="orderings_state[col.header] === '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>
+
+                          </span>
+                        </div>
+
+                      </th>
+                    </template>
+                    <template v-else>
+                      <th class="header-draggable" :class="col.class_column">
+                        {{ col.header }}
+                      </th>
+                    </template>
+
+                  </template>
+
+                  <template #footer>
+                    <template v-for="col in lockedColumns" :key="col.field || col.header">
+                      <template v-if="col.use_ordering">
+                        <th class="header-locked header-ordering" :class="col.class_column">
+                          <div class="header-ordering">
+                            <span>{{ col.header }}</span>
+
+                            <span @click="() => toggleOrderingState(col.header)" class="ms-2 cursor-pointer">
+                              <svg v-if="!orderings_state[col.header] || orderings_state[col.header] === '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="orderings_state[col.header] === '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="orderings_state[col.header] === '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>
+                            </span>
+                          </div>
+                        </th>
+                      </template>
+
+                      <template v-else>
+                        <th class="header-locked" :class="col.class_column">
+                          {{ col.header }}
+                        </th>
+                      </template>
+
+                    </template>
+                  </template>
+                </draggable>
+
               </thead>
               <tbody>
-                <tr v-for="item in items" :key="item[props.item_key]">
+                <TransitionGroup tag="tr" v-for="item in items" :key="item[props.item_key]" name="column-move">
                   <td v-if="props.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 in columns" :key="col.field || col.header" :class="col.class_row">
+                  <td v-for="col in renderedColumns" :key="col.field || col.header" :class="col.class_row">
                     <component v-if="col.bodySlot" :is="col.bodySlot" :item="item" :is-selected="isSelected(item)" />
                     <span @click="col.click ? col.click(item) : null"
                       :class="col.class_item + (col.click ? ' cursor-pointer' : '')" v-else-if="col.type === 'text'">
@@ -163,10 +282,10 @@
                     <span @click="col.click ? col.click(item) : null" v-else-if="col.type === 'date'"
                       :class="col.class_item + (col.click ? ' cursor-pointer' : '')">
                       <span v-if="col.format === 'complete'">{{ new Date(getSubItem(col.field, item)).toLocaleString()
-                      }}</span>
+                        }}</span>
                       <span v-if="col.format === 'simple'"> {{ new Date(getSubItem(col.field,
                         item)).toLocaleDateString()
-                        }} </span>
+                      }} </span>
                     </span>
                     <div @click="col.click ? col.click(item) : null"
                       :class="col.class_item + (col.click ? ' cursor-pointer' : '')" v-else-if="col.type === 'html'"
@@ -195,7 +314,7 @@
                     <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>
+                </TransitionGroup>
               </tbody>
             </table>
           </div>
@@ -203,10 +322,7 @@
             <p class="m-0">Nenhum item encontrado.</p>
           </div>
         </div>
-
       </div>
-
-
     </div>
     <slot name="pagination" :pagination="pagination" :tradePage="fetchDataWithDelay" :error="error">
       <div v-if="!error && pagination.count > 0" class="px-3" :class="props.class_pagination">
@@ -228,6 +344,7 @@ import PaginationDatatable from './PaginationDatatable.vue';
 import Search from './SearchDatatable.vue';
 import { useImagePreview } from '../composables/useImagePreview';
 import { dataTableApiKey, type ColumnConfiguration, type PaginationObject } from '../keys';
+import draggable from 'vuedraggable';
 
 const {
   isHovering,
@@ -344,6 +461,7 @@ const props = withDefaults(defineProps<VDataTableProps>(), {
 // =======================================================
 
 
+const orderings_state = ref<Record<string, 'none' | 'increasing' | 'decreasing'>>({});
 const columns = ref<ColumnConfiguration[]>([]);
 const items = ref<T[]>([]) as Ref<T[]>;
 const totalItems = ref<number>(0);
@@ -367,24 +485,29 @@ const pagination = ref<PaginationObject>({
 // =======================================================
 const { data: response, pending, error, execute, attempt } = props.fetch(props.endpoint, {
   params: () => {
-
     if (props.deactivate_default_params) {
       if (props.add_params && typeof props.add_params === 'function') {
-        return props.add_params();
+        return {
+          ...props.add_params(),
+          ...params_ordering.value
+        };
       }
       return {
         ...props.add_params,
+        ...params_ordering.value
       };
     }
     else if (props.add_params && typeof props.add_params === 'function') {
       return {
         ...default_params.value,
         ...props.add_params(),
+        ...params_ordering.value
       }
     }
     return {
       ...default_params.value,
       ...props.add_params,
+      ...params_ordering.value
     };
   },
   retry: props.retry_attempts,
@@ -396,6 +519,26 @@ const { data: response, pending, error, execute, attempt } = props.fetch(props.e
 // =======================================================
 // 4. PROPRIEDADES COMPUTADAS
 // =======================================================
+
+// colunas TRAVADAS (apenas leitura)
+const lockedColumns = computed(() =>
+  columns.value.filter(c => c.locked)
+);
+// 'v-model' para as colunas ARRASTÁVEIS (com get/set)
+const draggableColumns = computed({
+  get() {
+    return columns.value.filter(c => !c.locked);
+  },
+  set(newUnlockedOrder) {
+    const locked = lockedColumns.value;
+    columns.value = [...newUnlockedOrder, ...locked];
+  }
+});
+// colunas RENDERIZADAS (ordem final)
+const renderedColumns = computed(() => {
+  return [...draggableColumns.value, ...lockedColumns.value];
+});
+
 const item_use = computed<number[]>(() => {
   let use = [1]
   if (props.list_filter.length > 0) {
@@ -403,6 +546,24 @@ const item_use = computed<number[]>(() => {
   }
   return use;
 });
+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';
+      } else {
+        continue;
+      }
+    } else {
+      continue;
+    }
+  }
+
+  return objectOrdering;
+});
 
 const default_params = computed<Record<string, any>>(() => ({
   [props.page_param_name]: pagination.value.current_page + 1,
@@ -574,6 +735,27 @@ function limiteText(text: string | null, limite: number | null): string | null {
   return text;
 }
 
+function toggleOrderingState(header: string) {
+  // desabilita todos que não são o header clicado
+  for (const key in orderings_state.value) {
+    if (key !== header) {
+      orderings_state.value[key] = 'none';
+    }
+  }
+
+  const currentState = orderings_state.value[header] || 'none';
+  if (currentState === 'none') {
+    orderings_state.value[header] = 'increasing';
+  } else if (currentState === 'increasing') {
+    orderings_state.value[header] = 'decreasing';
+  } else {
+    orderings_state.value[header] = 'none';
+  }
+
+  reSearch();
+}
+
+
 // =======================================================
 // 7. EXPOSE E CICLO DE VIDA
 // =======================================================
@@ -766,4 +948,48 @@ $max-width-preview: 250px;
 [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;
+}
 </style>

package/src/DatatableVue/keys.ts

@@ -14,6 +14,11 @@ export interface ColumnConfiguration {
   deactivate_img_preview?: boolean;
   format?: 'complete' | 'simple';
   click: Function | null;
+  locked: boolean;
+  use_ordering: boolean;
+  param_ordering: string;
+  decreasing_value: string;
+  increasing_value: string;
 }
 
 // A API que o VDataTable "fornece" para os filhos