v-sistec-features 1.22.3 → 1.23.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-sistec-features",
   "private": false,
-  "version": "1.22.3",
+  "version": "1.23.2",
   "author": "Márlon Bento Azevedo (https://github.com/marlon-bento)",
   "repository": {
     "type": "git",
@@ -57,18 +57,12 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/commit-analyzer": "^13.0.1",
-    "@semantic-release/exec": "^7.1.0",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^11.0.6",
-    "@semantic-release/npm": "^12.0.2",
-    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@release-it/conventional-changelog": "^11.0.1",
     "@types/node": "^24.6.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
+    "release-it": "^20.2.1",
     "sass-embedded": "^1.93.2",
-    "semantic-release": "^24.2.9",
     "typescript": "~5.9.3",
     "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.4",
@@ -79,7 +73,7 @@
     "@tabler/core": "^1.4.0",
     "pinia": "^2.1.0 || ^3.0.0",
     "v-api-fetch": "^1.6.0",
-    "v-required": "^2.1.0",
+    "v-required": "^2.5.0",
     "v3-infinite-loading": "^1.3.2",
     "vue-toastification": "^2.0.0-rc.5"
   }

package/src/DatatableVue/components/VColumn.vue

@@ -3,12 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import { inject, onMounted, useSlots, defineSlots } from 'vue';
+import { inject, onMounted, useSlots } from 'vue';
 import { dataTableApiKey } from '../keys';
 
 defineSlots<{
   // props para o slot body 
   body?: (props: { item: any }) => any,
+  col_header?: (props: { col: any, locked: boolean }) => any,
+  col_header_midle?: (props: { col: any, locked: boolean }) => any,
 }>();
 interface VColumnProps {
   field?: string | null;
@@ -113,9 +115,15 @@ onMounted(() => {
     class_rules: props.class_rules,
 
     bodySlot: slots.body,
+    // colHeaderSlot é para o slot do header da coluna, que pode ser usado para colocar ícone de ordenação ou qualquer outra coisa que o usuário queira colocar no header da coluna
+    colHeaderSlot: slots.col_header,
+    // colHeaderMidleSlot é para o slot do header da coluna, mas ele fica entre o texto do header e o ícone de ordenação, para o usuário colocar coisas entre eles
+    colHeaderMidleSlot: slots.col_header_midle,
     ...(props.type === 'text' && { limite_text: Number(props.limite_text) }),
     ...(props.type === 'img' && { deactivate_img_preview: props.deactivate_img_preview }),
     ...(props.type === 'date' && { format: props.format }),
+    
   });
+  
 });
 </script>

package/src/DatatableVue/components/VDataTable.vue

@@ -75,6 +75,7 @@
                 <draggable v-model="draggableColumns" tag="tr" item-key="header" :animation="400"
                   ghost-class="ghost-item" drag-class="dragging-item" @start="isDraggingColumns = true"
                   @end="() => onDragEnd()">
+
                   <template #header>
                     <th v-if="options.use_expandable_items"></th>
                     <th v-if="options.use_checkbox" class="w-1">
@@ -84,115 +85,27 @@
                   </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>
-
+                    <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">
+                      
+                    </v-th-data-table>
                   </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>
+                      <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>
+                        
+                      </v-th-data-table>
 
                     </template>
                   </template>
                 </draggable>
-
               </thead>
+
               <tbody>
                 <template v-for="(item, index) in items" :key="item[options.item_key]">
                   <TransitionGroup tag="tr" :name="isDraggingColumns ? 'column-move' : ''">
@@ -243,10 +156,10 @@
                       <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>
                         <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="computeClasses(col, item)"
                         v-else-if="col.type === 'html'" v-html="getSubItem(col.field, item)">
@@ -336,6 +249,7 @@ import { useExpandedItem } from '../composables/useExpandedItem';
 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,
@@ -532,6 +446,7 @@ function onDragEnd() {
 function addColumn(colConfig: ColumnConfiguration): void {
   columns.value.push(colConfig);
 }
+
 provide(dataTableApiKey, { addColumn });
 
 
@@ -575,6 +490,7 @@ function limiteText(text: string | null, limite: number | null): string | null {
 }
 
 function toggleOrderingState(header: string) {
+
   // desabilita todos que não são o header clicado
   for (const key in orderings_state.value) {
     if (key !== header) {

package/src/DatatableVue/components/VThDataTable.vue

@@ -0,0 +1,107 @@
+<template>
+  <th :class="class_all">
+    <div :class="{ 'header-ordering': use_ordering }">
+      
+      <component
+        v-if="hasCustomHeader"
+        :is="col.colHeaderSlot"
+        v-bind="{ col: props.col, locked: props.locked }"
+      ></component>
+      
+      <template v-else>
+        <span>
+          {{ props.header }}
+        </span>
+
+        <component
+          v-if="col.colHeaderMidleSlot"
+          :is="col.colHeaderMidleSlot"
+          v-bind="{ col: props.col, locked: props.locked }"
+        ></component>
+
+        <span v-if="use_ordering" @click="emit('toggleOrderingState')" class="ms-2 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>
+        </span>
+      </template>
+
+    </div>
+  </th>
+</template>
+
+<script setup lang="ts">
+import { computed, Comment, Fragment, Text } from 'vue';
+
+const props = defineProps<{
+  header: string;
+  class_column: string;
+  locked: boolean;
+  use_ordering: boolean;
+  orderings_state: 'none' | 'increasing' | 'decreasing';
+  col: any;
+}>();
+
+const class_all = computed(() => {
+  return {
+    'header-draggable': !props.locked,
+    'header-locked': props.locked,
+    [props.class_column]: true,
+  }
+})
+
+const emit = defineEmits<{
+  toggleOrderingState: [void];
+}>();
+
+// Função robusta para verificar se todos os nós gerados são apenas comentários (v-if false)
+// para evitar falsos positivos, também verifica se são nós de texto vazios ou apenas espaços em branco, e trata recursivamente fragmentos
+// quando isso for vazio significa que não tem nada no slot então ele mostra a versão padrão do header
+// se tiver algo ele sobrescreve o header padrão
+const isEmptySlot = (vnodes: any[]): boolean => {
+  if (!vnodes || vnodes.length === 0) return true;
+  return vnodes.every(vnode => {
+    if (vnode.type === Comment) return true;
+    if (vnode.type === Text && typeof vnode.children === 'string' && !vnode.children.trim()) return true;
+    if (vnode.type === Fragment || vnode.type === Symbol.for('v-fgt') || String(vnode.type) === 'Symbol(Fragment)') {
+      return isEmptySlot(vnode.children as any[]);
+    }
+    return false;
+  });
+};
+
+const hasCustomHeader = computed(() => {
+  if (!props.col || !props.col.colHeaderSlot) return false;
+  // Executa a função do slot original e analisa a árvore
+  const vnodes = props.col.colHeaderSlot({ col: props.col, locked: props.locked });
+  return !isEmptySlot(vnodes);
+});
+</script>
+<style scoped></style>

package/src/DatatableVue/keys.ts

@@ -10,6 +10,8 @@ export interface ColumnConfiguration {
   class_item: string;
   transform_function: ((value: any) => any) | null;
   bodySlot?: Slot;
+  colHeaderSlot?: Slot;
+  colHeaderMidleSlot?: Slot;
   limite_text?: number;
   deactivate_img_preview?: boolean;
   format?: 'complete' | 'simple';