@drax/crud-vue 3.46.0 → 3.47.0

package/src/components/CrudListTable.vue

@@ -50,6 +50,8 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
 <template>
   <v-data-table-server
+      :id="`crud-list-table-${entity.name}`"
+      class="crud-list-table"
       :density="entity.tableDensity"
       :striped="entity.tableStriped"
       :header-props="entity.headerProps"
@@ -71,25 +73,26 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
     <template v-slot:no-data>
       <v-alert
           v-if="paginationError"
+          id="crud-list-table-pagination-error"
           variant="tonal"
-          class="w-100 ma-2"
+          class="crud-list-table__pagination-error w-100 ma-2"
           style="width: 100%; min-width: 100%"
           prominent
           type="error"
           :text="te(paginationError) ? t(paginationError) : paginationError"
       />
-      <v-alert v-else variant="tonal"  class="w-100 ma-2 " type="info" :text="te('crud.noData') ? t('crud.noData') : 'No data' " />
+      <v-alert v-else id="crud-list-table-no-data" variant="tonal"  class="crud-list-table__no-data w-100 ma-2 " type="info" :text="te('crud.noData') ? t('crud.noData') : 'No data' " />
     </template>
 
     <template v-slot:bottom>
-      <v-data-table-footer :class="entity.footerClass"
+      <v-data-table-footer id="crud-list-table-footer" :class="['crud-list-table__footer', entity.footerClass]"
                            :items-per-page-options="[5, 10, 20, 50]"
       ></v-data-table-footer>
     </template>
 
     <template v-slot:top>
-      <v-toolbar :class="entity.toolbarClass" :density="entity.toolbarDensity">
-        <v-toolbar-title>
+      <v-toolbar id="crud-list-table-toolbar" :class="['crud-list-table__toolbar', entity.toolbarClass]" :density="entity.toolbarDensity">
+        <v-toolbar-title id="crud-list-table-title" class="crud-list-table__title">
           {{ te(`${entity.name.toLowerCase()}.crud`) ? t(`${entity.name.toLowerCase()}.crud`) : entity.name }}
         </v-toolbar-title>
         <v-spacer></v-spacer>
@@ -100,30 +103,42 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
         <crud-saved-queries-button
             v-if="entity.isSavedQueriesEnabled"
+            id="crud-list-table-saved-queries-button"
+            class="crud-list-table__saved-queries-button"
             :entity="entity"
         />
 
 
         <crud-import-button
+            id="crud-list-table-import-button"
+            class="crud-list-table__import-button"
             :entity="entity"
             @import="(file:any, format:any) => $emit('import', file, format)"
         />
 
         <crud-export-button
+            id="crud-list-table-export-button"
+            class="crud-list-table__export-button"
             :entity="entity"
             @export="(v:any) => $emit('export',v)"
         />
 
         <crud-group-by-button
             v-if="entity.isGroupable"
+            id="crud-list-table-group-by-button"
+            class="crud-list-table__group-by-button"
             :entity="entity"
         />
 
         <crud-filter-button
+            id="crud-list-table-filter-button"
+            class="crud-list-table__filter-button"
             :entity="entity" />
 
         <crud-columns-button
             v-if="entity.isColumnSelectable"
+            id="crud-list-table-columns-button"
+            class="crud-list-table__columns-button"
             :entity="entity"
         />
 
@@ -134,11 +149,15 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
         <crud-refresh-button
             v-if="entity.isRefreshable !== false"
+            id="crud-list-table-refresh-button"
+            class="crud-list-table__refresh-button"
             @click="doPaginate"
         />
 
         <crud-create-button
             v-if="entity.isCreatable"
+            id="crud-list-table-create-button"
+            class="crud-list-table__create-button"
             :entity="entity"
             @click="$emit('create')"
         />
@@ -150,6 +169,8 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
       </v-toolbar>
 
       <crud-export-list
+          id="crud-list-table-export-list"
+          class="crud-list-table__export-list"
           :entity="entity"
       >
         <template #export-table="{ exportFiles }">
@@ -158,6 +179,8 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
       </crud-export-list>
 
       <crud-import-list
+          id="crud-list-table-import-list"
+          class="crud-list-table__import-list"
           :entity="entity"
       >
         <template #import-table="{ importFiles }">
@@ -165,20 +188,24 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
         </template>
       </crud-import-list>
 
-      <v-card variant="flat">
-        <v-card-text v-if="entity.searchEnable">
+      <v-card id="crud-list-table-controls" class="crud-list-table__controls" variant="flat">
+        <v-card-text v-if="entity.searchEnable" id="crud-list-table-search-section" class="crud-list-table__search-section">
           <crud-search
+              id="crud-list-table-search"
+              class="crud-list-table__search"
               v-model="search"
           />
         </v-card-text>
 
-        <v-card-text class="pt-0">
+        <v-card-text id="crud-list-table-filters-section" class="crud-list-table__filters-section pt-0">
           <slot name="filters" v-bind="{filters}"></slot>
 
-          <v-card variant="flat" v-if="!$slots.filters">
+          <v-card id="crud-list-table-default-filters" class="crud-list-table__default-filters" variant="flat" v-if="!$slots.filters">
 
             <crud-filters
                 v-if="entity.filtersEnable"
+                id="crud-list-table-filters"
+                class="crud-list-table__filters"
                 :entity="entity"
                 v-model="filters"
                 :auto-filter="!entity.filterButtons"
@@ -199,6 +226,8 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
             <crud-filters-dynamic
                 v-if="isDynamicFiltersEnable"
+                id="crud-list-table-dynamic-filters"
+                class="crud-list-table__dynamic-filters"
                 :entity="entity"
                 v-model="filters"
                 :auto-filter="!entity.filterButtons"
@@ -208,6 +237,8 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
             </crud-filters-dynamic>
 
             <crud-filters-action v-if="entity.filterButtons"
+                                 id="crud-list-table-filters-actions"
+                                 class="crud-list-table__filters-actions"
                                  :entity="entity"
                                  @clearFilter="clearFilters()"
                                  @applyFilter="applyFilters()"
@@ -218,7 +249,7 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
       </v-card>
 
-      <v-divider></v-divider>
+      <v-divider id="crud-list-table-toolbar-divider" class="crud-list-table__toolbar-divider"></v-divider>
 
 
 
@@ -228,6 +259,8 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
     <template v-for="header in entity.headers" :key="header.key" v-slot:[`item.${header.key}`]="{item, value}">
       <slot v-if="$slots[`item.${header.key}`]" :name="`item.${header.key}`" v-bind="{item, value}">
         <crud-row-value
+            :id="`crud-list-table-row-value-${header.key}`"
+            class="crud-list-table__row-value"
             :title="header.title || header.key"
             :value="value"
         />
@@ -242,16 +275,22 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
       <crud-view-button
           v-if="entity.isViewable && hasPermission(entity.permissions.view)"
+          :id="`crud-list-table-row-view-button-${index}`"
+          class="crud-list-table__row-view-button"
           @click="$emit('view', item, index)"
       />
 
       <crud-update-button
           v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
+          :id="`crud-list-table-row-update-button-${index}`"
+          class="crud-list-table__row-update-button"
           @click="$emit('edit', item, index)"
       />
 
       <crud-delete-button
           v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
+          :id="`crud-list-table-row-delete-button-${index}`"
+          class="crud-list-table__row-delete-button"
           @click="$emit('delete', item, index)"
       />
 

package/src/components/CrudNotify.vue

@@ -11,11 +11,13 @@ defineProps({
 
 <template>
 
-  <v-snackbar v-model="valueModel" :timeout="timeout" :color="color" >
+  <v-snackbar id="crud-notify" class="crud-notify" v-model="valueModel" :timeout="timeout" :color="color" >
     {{message}}
 
     <template v-slot:actions>
       <v-btn
+        id="crud-notify-close-button"
+        class="crud-notify__close-button"
         icon="mdi-close"
         variant="text"
         @click="valueModel = false"

package/src/components/CrudRefDisplay.vue

@@ -41,6 +41,6 @@ watch(
 </script>
 
 <template>
-  <span v-if="loading">...</span>
-  <span v-else>{{display}}</span>
+  <span v-if="loading" id="crud-ref-display-loading" class="crud-ref-display crud-ref-display--loading">...</span>
+  <span v-else id="crud-ref-display-value" class="crud-ref-display crud-ref-display--value">{{display}}</span>
 </template>

package/src/components/CrudRouteForm.vue

@@ -163,12 +163,14 @@ async function prepareRouteForm() {
 </script>
 
 <template>
-  <v-container :fluid="entity.containerFluid" class="mt-5">
-    <v-card :class="entity.cardClass" :density="entity.cardDensity">
-      <v-progress-linear v-if="store.loading" indeterminate/>
+  <v-container :id="`crud-route-form-container-${entity.name}`" :fluid="entity.containerFluid" class="crud-route-form mt-5">
+    <v-card :id="`crud-route-form-card-${entity.name}`" :class="['crud-route-form__card', entity.cardClass]" :density="entity.cardDensity">
+      <v-progress-linear v-if="store.loading" id="crud-route-form-loading" class="crud-route-form__loading" indeterminate/>
 
-      <v-card-actions class="justify-start pa-2 pb-0">
+      <v-card-actions id="crud-route-form-actions" class="crud-route-form__actions justify-start pa-2 pb-0">
         <v-btn
+            id="crud-route-form-back-button"
+            class="crud-route-form__back-button"
             prepend-icon="mdi-arrow-left"
             variant="text"
             @click="goToList"
@@ -179,6 +181,8 @@ async function prepareRouteForm() {
 
       <crud-form
           v-if="formReady || store.error"
+          id="crud-route-form-form"
+          class="crud-route-form__form"
           :entity="entity"
           show-submit-and-return
           @created="created"

package/src/components/CrudRowValue.vue

@@ -33,24 +33,25 @@ const openFullTextDialog = () => {
 <template>
   <span
       v-if="isLongString"
-      class="d-inline-block text-truncate crud-row-value__truncated"
+      id="crud-row-value-truncated"
+      class="crud-row-value crud-row-value--truncated d-inline-block text-truncate crud-row-value__truncated"
       @click="openFullTextDialog"
   >
     {{ displayValue }}
   </span>
-  <span v-else>{{ displayValue }}</span>
+  <span v-else id="crud-row-value-text" class="crud-row-value crud-row-value--text">{{ displayValue }}</span>
 
-  <v-dialog v-model="fullTextDialog" max-width="720">
-    <v-card>
-      <v-card-title class="text-wrap">
+  <v-dialog id="crud-row-value-dialog" class="crud-row-value-dialog" v-model="fullTextDialog" max-width="720">
+    <v-card id="crud-row-value-dialog-card" class="crud-row-value-dialog__card">
+      <v-card-title id="crud-row-value-dialog-title" class="crud-row-value-dialog__title text-wrap">
         {{ title }}
       </v-card-title>
-      <v-card-text class="crud-row-value__dialog-text">
+      <v-card-text id="crud-row-value-dialog-text" class="crud-row-value-dialog__text crud-row-value__dialog-text">
         {{ displayValue }}
       </v-card-text>
-      <v-card-actions>
+      <v-card-actions id="crud-row-value-dialog-actions" class="crud-row-value-dialog__actions">
         <v-spacer />
-        <v-btn variant="text" @click="fullTextDialog = false">
+        <v-btn id="crud-row-value-dialog-close-button" class="crud-row-value-dialog__close-button" variant="text" @click="fullTextDialog = false">
           {{ te('action.close') ? t('action.close') : 'Close' }}
         </v-btn>
       </v-card-actions>

package/src/components/CrudSearch.vue

@@ -28,8 +28,9 @@ function clear() {
 
 <template>
   <v-text-field v-model="input"
+                id="crud-search-input"
                 density="compact"
-                class="mr-2"
+                class="crud-search-input mr-2"
                 variant="outlined"
                 append-inner-icon="mdi-magnify"
                 :label="t('action.search')"

package/src/components/buttons/CrudAiButton.vue

@@ -22,12 +22,13 @@ function toggleExpanded() {
 </script>
 
 <template>
-  <v-tooltip location="top">
+  <v-tooltip :id="`${$attrs.id || 'crud-ai-button'}-tooltip`" class="crud-ai-button__tooltip" location="top">
     <template v-slot:activator="{ props }">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
           icon="mdi-robot-outline"
-          class="mr-1"
+          :id="$attrs.id || 'crud-ai-button'"
+          class="crud-ai-button mr-1"
           variant="text"
           @click="toggleExpanded"
       />

package/src/components/buttons/CrudColumnsButton.vue

@@ -21,27 +21,31 @@ const {
 </script>
 
 <template>
-  <v-menu offset-y :close-on-content-click="false">
+  <v-menu id="crud-columns-menu" class="crud-columns-menu" offset-y :close-on-content-click="false">
     <template v-slot:activator="{ props }">
       <v-btn
         v-bind="props"
+        id="crud-columns-button"
+        class="crud-columns-button"
         icon
         variant="text"
       >
-        <v-icon>mdi-view-column</v-icon>
+        <v-icon id="crud-columns-button-icon" class="crud-columns-button__icon">mdi-view-column</v-icon>
         <v-tooltip activator="parent" location="bottom">
           {{ t('crud.columns.select') }}
         </v-tooltip>
       </v-btn>
     </template>
-    <v-list>
-      <v-list-subheader>
+    <v-list id="crud-columns-list" class="crud-columns-menu__list">
+      <v-list-subheader id="crud-columns-title" class="crud-columns-menu__title">
         {{ t('crud.columns.title') }}
       </v-list-subheader>
 
-      <v-list-item>
-        <div class="d-flex gap-2">
+      <v-list-item id="crud-columns-bulk-actions" class="crud-columns-menu__bulk-actions">
+        <div id="crud-columns-bulk-actions-content" class="crud-columns-menu__bulk-actions-content d-flex gap-2">
           <v-btn
+            id="crud-columns-select-all-button"
+            class="crud-columns-menu__select-all-button"
             size="small"
             variant="text"
             color="primary"
@@ -51,6 +55,8 @@ const {
             {{ t('crud.columns.selectAll') }}
           </v-btn>
           <v-btn
+            id="crud-columns-deselect-all-button"
+            class="crud-columns-menu__deselect-all-button"
             size="small"
             variant="text"
             color="primary"
@@ -67,15 +73,19 @@ const {
       <v-list-item
         v-for="column in availableColumns"
         :key="column.key"
+        :id="`crud-columns-item-${column.key}`"
+        class="crud-columns-menu__item"
         @click="toggleColumn(column.key)"
       >
         <template v-slot:prepend>
           <v-checkbox-btn
+            :id="`crud-columns-checkbox-${column.key}`"
+            class="crud-columns-menu__checkbox"
             :model-value="column.visible"
             @click.stop="toggleColumn(column.key)"
           ></v-checkbox-btn>
         </template>
-        <v-list-item-title>{{ column.title }}</v-list-item-title>
+        <v-list-item-title class="crud-columns-menu__item-title">{{ column.title }}</v-list-item-title>
       </v-list-item>
     </v-list>
   </v-menu>

package/src/components/buttons/CrudCreateButton.vue

@@ -5,12 +5,13 @@ const {t} = useI18n()
 </script>
 
 <template>
-  <v-tooltip location="top">
+  <v-tooltip :id="`${$attrs.id || 'crud-create-button'}-tooltip`" class="crud-create-button__tooltip" location="top">
     <template v-slot:activator="{ props }">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
              icon="mdi-plus"
-             class="mr-1"
+             :id="$attrs.id || 'crud-create-button'"
+             class="crud-create-button mr-1"
              variant="text"
       >
       </v-btn>

package/src/components/buttons/CrudCreateOnTheFlyButton.vue

@@ -38,12 +38,13 @@ const emit = defineEmits(['created'])
 </script>
 
 <template>
-  <v-tooltip location="top">
+  <v-tooltip :id="`${$attrs.id || 'crud-create-on-the-fly-button'}-tooltip`" class="crud-create-on-the-fly-button__tooltip" location="top">
     <template v-slot:activator="{ props }">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
              icon="mdi-plus"
-             class="mr-1"
+             :id="$attrs.id || 'crud-create-on-the-fly-button'"
+             class="crud-create-on-the-fly-button mr-1"
              variant="text"
              @click="openDialog"
       >
@@ -53,12 +54,16 @@ const emit = defineEmits(['created'])
   </v-tooltip>
 
   <crud-dialog
+      id="crud-create-on-the-fly-dialog"
+      class="crud-create-on-the-fly-dialog"
       v-model="dialog"
       :entity="entity"
       operation="create"
       :fullscreen="false"
   >
     <crud-form
+        id="crud-create-on-the-fly-form"
+        class="crud-create-on-the-fly-form"
         :entity="entity"
         @created="onCreated"
         @canceled="onCanceled"

package/src/components/buttons/CrudDeleteButton.vue

@@ -5,12 +5,13 @@ const {t} = useI18n()
 </script>
 
 <template>
-  <v-tooltip location="top">
+  <v-tooltip :id="`${$attrs.id || 'crud-delete-button'}-tooltip`" class="crud-delete-button__tooltip" location="top">
     <template v-slot:activator="{ props}">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
           icon="mdi-delete"
-          class="mr-1"
+          :id="$attrs.id || 'crud-delete-button'"
+          class="crud-delete-button mr-1"
           variant="text"
           color="red"
       >

package/src/components/buttons/CrudExportButton.vue

@@ -16,14 +16,15 @@ const {
 </script>
 
 <template>
-  <v-menu v-if="entity.isExportable">
+  <v-menu v-if="entity.isExportable" id="crud-export-menu" class="crud-export-menu">
     <template v-slot:activator="{ props: mp }">
-      <v-tooltip location="top">
+      <v-tooltip id="crud-export-button-tooltip" class="crud-export-button__tooltip" location="top">
         <template v-slot:activator="{ props: tp }">
           <v-btn
               v-bind="{...mp, ...tp}"
               :disabled="exportLoading"
-              class="mr-1"
+              id="crud-export-button"
+              class="crud-export-button mr-1"
               variant="text"
               :loading="exportLoading"
               icon="mdi-database-export-outline"
@@ -33,9 +34,9 @@ const {
       </v-tooltip>
 
     </template>
-    <v-list>
-      <v-list-item v-for="format in entity.exportFormats" @click="$emit('export', format)">
-        <v-list-item-title>{{format}}</v-list-item-title>
+    <v-list id="crud-export-format-list" class="crud-export-menu__list">
+      <v-list-item v-for="format in entity.exportFormats" :id="`crud-export-format-${format}`" class="crud-export-menu__item" @click="$emit('export', format)">
+        <v-list-item-title class="crud-export-menu__item-title">{{format}}</v-list-item-title>
       </v-list-item>
     </v-list>
 

package/src/components/buttons/CrudFilterButton.vue

@@ -20,13 +20,14 @@ const {t} = useI18n()
 </script>
 
 <template>
-  <div v-if="entity.dynamicFiltersEnable">
-    <v-tooltip location="top">
+  <div v-if="entity.dynamicFiltersEnable" id="crud-filter-button-wrapper" class="crud-filter-button-wrapper">
+    <v-tooltip id="crud-filter-button-tooltip" class="crud-filter-button__tooltip" location="top">
       <template v-slot:activator="{ props }">
         <v-btn
             v-bind="{ ...$attrs, ...props }"
             :icon="dynamicFiltersEnable ? 'mdi-filter-off' : 'mdi-filter' "
-            class="mr-1"
+            id="crud-filter-button"
+            class="crud-filter-button mr-1"
             variant="text"
             @click="dynamicFiltersEnable = !dynamicFiltersEnable"
         >

package/src/components/buttons/CrudGroupByButton.vue

@@ -66,25 +66,29 @@ const totalCount = computed(() => {
 </script>
 
 <template>
-  <div>
+  <div id="crud-group-by-wrapper" class="crud-group-by-wrapper">
     <v-btn
+      id="crud-group-by-button"
+      class="crud-group-by-button"
       icon
       variant="text"
       @click="openDialog"
     >
-      <v-icon>mdi-chart-bar</v-icon>
+      <v-icon id="crud-group-by-button-icon" class="crud-group-by-button__icon">mdi-chart-bar</v-icon>
       <v-tooltip activator="parent" location="bottom">
         {{ t('crud.groupBy.button') }}
       </v-tooltip>
     </v-btn>
 
-    <v-dialog v-model="dialog" max-width="800" >
-      <v-card>
-        <v-card-title class="d-flex align-center">
-          <v-icon class="mr-2">mdi-chart-bar</v-icon>
+    <v-dialog id="crud-group-by-dialog" class="crud-group-by-dialog" v-model="dialog" max-width="800" >
+      <v-card id="crud-group-by-card" class="crud-group-by-dialog__card">
+        <v-card-title id="crud-group-by-title" class="crud-group-by-dialog__title d-flex align-center">
+          <v-icon id="crud-group-by-title-icon" class="crud-group-by-dialog__title-icon mr-2">mdi-chart-bar</v-icon>
           {{ t('crud.groupBy.title') }}
           <v-spacer></v-spacer>
           <v-btn
+            id="crud-group-by-close-button"
+            class="crud-group-by-dialog__close-button"
             icon
             variant="text"
             @click="resetAndClose"
@@ -96,11 +100,13 @@ const totalCount = computed(() => {
 
         <v-divider></v-divider>
 
-        <v-card-text>
-          <crud-active-filters :entity="entity"></crud-active-filters>
+        <v-card-text id="crud-group-by-config" class="crud-group-by-dialog__config">
+          <crud-active-filters id="crud-group-by-active-filters" class="crud-group-by-dialog__active-filters" :entity="entity"></crud-active-filters>
           <v-divider></v-divider>
 
           <v-select
+            id="crud-group-by-fields-select"
+            class="crud-group-by-dialog__fields-select"
             v-model="selectedFields"
             :items="availableFields"
             item-title="label"
@@ -116,12 +122,13 @@ const totalCount = computed(() => {
           <!-- Selector de formato de fecha -->
           <v-select
             v-if="hasDateFields"
+            id="crud-group-by-date-format-select"
             v-model="dateFormat"
             :items="dateFormatOptions"
             :label="t('crud.groupBy.dateFormatLabel')"
             density="compact"
             variant="outlined"
-            class="mt-4"
+            class="crud-group-by-dialog__date-format-select mt-4"
             :menu-props="{ zIndex: 3000 }"
           >
             <template v-slot:prepend-inner>
@@ -134,9 +141,11 @@ const totalCount = computed(() => {
 
         <v-divider></v-divider>
 
-        <v-card-actions>
+        <v-card-actions id="crud-group-by-actions" class="crud-group-by-dialog__actions">
           <v-spacer></v-spacer>
           <v-btn
+            id="crud-group-by-apply-button"
+            class="crud-group-by-dialog__apply-button"
             color="primary"
             variant="flat"
             @click="handleGroupBy"
@@ -148,20 +157,22 @@ const totalCount = computed(() => {
         </v-card-actions>
         <v-divider class="mb-4"></v-divider>
         <!-- Tabla de resultados -->
-        <v-card-text v-if="groupByData.length > 0">
+        <v-card-text v-if="groupByData.length > 0" id="crud-group-by-results" class="crud-group-by-dialog__results">
 
 
-          <div class="d-flex align-center mb-3">
-            <v-icon class="mr-2">mdi-table</v-icon>
-            <span class="text-h6">{{ t('crud.groupBy.results') }}</span>
+          <div id="crud-group-by-results-header" class="crud-group-by-dialog__results-header d-flex align-center mb-3">
+            <v-icon id="crud-group-by-results-icon" class="crud-group-by-dialog__results-icon mr-2">mdi-table</v-icon>
+            <span id="crud-group-by-results-title" class="crud-group-by-dialog__results-title text-h6">{{ t('crud.groupBy.results') }}</span>
             <v-spacer></v-spacer>
-            <v-chip color="primary" variant="flat" size="small">
+            <v-chip id="crud-group-by-total-chip" class="crud-group-by-dialog__total-chip" color="primary" variant="flat" size="small">
               {{ t('crud.groupBy.total') }}: {{ totalCount }}
             </v-chip>
           </div>
 
 
           <v-data-table
+            id="crud-group-by-results-table"
+            class="crud-group-by-dialog__results-table"
             :headers="headers"
             :items="groupByData"
             density="compact"
@@ -191,7 +202,9 @@ const totalCount = computed(() => {
             <!-- Formato especial para el count -->
             <template v-slot:item.count="{ value }">
               <v-chip color="primary" size="small" variant="flat">
+                <span class="crud-group-by-dialog__count-value">
                 {{ value }}
+                </span>
               </v-chip>
             </template>
           </v-data-table>