@drax/crud-vue 3.46.0 → 3.48.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.46.0",
+  "version": "3.48.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -26,8 +26,8 @@
   "dependencies": {
     "@drax/common-front": "^3.29.0",
     "@drax/crud-front": "^3.21.0",
-    "@drax/crud-share": "^3.46.0",
-    "@drax/media-vue": "^3.46.0"
+    "@drax/crud-share": "^3.48.0",
+    "@drax/media-vue": "^3.48.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "a90e6d81ea836f1f921c7baf6f149b82a0aced38"
+  "gitHead": "455427fd48fc742af2e301ab85af2d48e5b2da16"
 }

package/src/components/Crud.vue

@@ -9,6 +9,9 @@ import CrudRouteForm from "./CrudRouteForm.vue";
 import CrudNotify from "./CrudNotify.vue";
 import CrudDialog from "./CrudDialog.vue";
 import CrudAiButton from "./buttons/CrudAiButton.vue";
+import CrudDialogNextButton from "./buttons/CrudDialogNextButton.vue";
+import CrudDialogPrevButton from "./buttons/CrudDialogPrevButton.vue";
+import CrudOpenRouteFormButton from "./buttons/CrudOpenRouteFormButton.vue";
 import CrudAi from "./CrudAi.vue";
 import {useCrud} from "../composables/UseCrud";
 import {useDisplay} from 'vuetify'
@@ -137,6 +140,8 @@ watch(dialog, (value) => {
 <template>
   <crud-route-form
       v-if="isRouteCrudForm"
+      :id="`crud-route-form-${entity.name}`"
+      class="crud__route-form"
       :entity="entity"
       @created="item => emit('created', item)"
       @updated="item => emit('updated', item)"
@@ -150,11 +155,13 @@ watch(dialog, (value) => {
     </template>
   </crud-route-form>
 
-  <v-container v-else :fluid="entity.containerFluid" class="mt-5">
-    <v-card :class="entity.cardClass" :density="entity.cardDensity">
+  <v-container v-else :id="`crud-container-${entity.name}`" :fluid="entity.containerFluid" class="crud mt-5">
+    <v-card :id="`crud-card-${entity.name}`" :class="['crud__card', entity.cardClass]" :density="entity.cardDensity">
 
       <component
           :is="listComponent"
+          :id="`crud-list-component-${entity.name}`"
+          class="crud__list"
           :entity="entity"
           @create="onCreate"
           @edit="onEditAt"
@@ -229,36 +236,40 @@ watch(dialog, (value) => {
     </v-card>
 
     <crud-dialog
+        :id="`crud-dialog-${entity.name}`"
+        class="crud__dialog"
         v-model="dialog"
         :entity="entity"
         :operation="operation"
     >
       <template #toolbar-actions>
-        <v-btn
+        <crud-open-route-form-button
             v-if="canOpenRouteCrudForm"
-            icon="mdi-open-in-new"
-            variant="text"
+            id="crud-open-route-form-button"
+            class="crud__open-route-form-button"
             @click="openRouteCrudForm"
         />
 
-        <v-btn
+        <crud-dialog-prev-button
             v-if="canNavigateItems"
-            icon="mdi-chevron-left"
-            variant="text"
+            id="crud-dialog-prev-button"
+            class="crud__dialog-prev-button"
             :disabled="!canNavigatePrev"
             @click="navigateView(-1)"
         />
 
-        <v-btn
+        <crud-dialog-next-button
             v-if="canNavigateItems"
-            icon="mdi-chevron-right"
-            variant="text"
+            id="crud-dialog-next-button"
+            class="crud__dialog-next-button"
             :disabled="!canNavigateNext"
             @click="navigateView(1)"
         />
 
         <crud-ai-button
             v-if="entity.isAiAssistable && ['create', 'edit'].includes(operation) && hasPermission('ai:promptCrud')"
+            id="crud-ai-toggle-button"
+            class="crud__ai-toggle-button"
             :entity="entity"
             v-model="aiExpanded"
         />
@@ -267,6 +278,8 @@ watch(dialog, (value) => {
       <slot name="tools">
         <crud-ai
             v-if="entity.isAiAssistable && ['create', 'edit'].includes(operation) && hasPermission('ai:promptCrud')"
+            id="crud-ai"
+            class="crud__ai"
             :entity="entity"
             v-model="aiExpanded"
             @apply="applyAiSuggestions"
@@ -277,6 +290,8 @@ watch(dialog, (value) => {
       <slot name="form" v-bind="{form, operation}">
 
         <crud-form
+            id="crud-form-dialog"
+            class="crud__form"
             :entity="entity"
             @created="item => emit('created', item)"
             @updated="item => emit('updated', item)"
@@ -295,7 +310,7 @@ watch(dialog, (value) => {
 
     </crud-dialog>
 
-    <crud-notify v-model="notify" :message="message"></crud-notify>
+    <crud-notify id="crud-notify" class="crud__notify" v-model="notify" :message="message"></crud-notify>
   </v-container>
 </template>
 

package/src/components/CrudActiveFilters.vue

@@ -122,16 +122,18 @@ const emit = defineEmits(['filterRemoved', 'filtersCleared'])
 </script>
 
 <template>
-  <v-card v-if="activeFilters.length > 0" flat class="mb-2">
-    <v-card-text class="py-2">
-      <div class="d-flex align-center flex-wrap ga-2">
-        <span class="text-caption text-medium-emphasis">
-          <v-icon size="x-small">mdi-filter</v-icon> {{ t('crud.activeFilters') }}:
+  <v-card v-if="activeFilters.length > 0" id="crud-active-filters" flat class="crud-active-filters mb-2">
+    <v-card-text id="crud-active-filters-content" class="crud-active-filters__content py-2">
+      <div id="crud-active-filters-list" class="crud-active-filters__list d-flex align-center flex-wrap ga-2">
+        <span id="crud-active-filters-label" class="crud-active-filters__label text-caption text-medium-emphasis">
+          <v-icon id="crud-active-filters-icon" class="crud-active-filters__icon" size="x-small">mdi-filter</v-icon> {{ t('crud.activeFilters') }}:
         </span>
 
         <v-chip
           v-for="filter in activeFilters"
           :key="filter.index"
+          :id="`crud-active-filter-${filter.index}`"
+          class="crud-active-filters__chip"
           closable
           size="small"
           color="primary"
@@ -139,15 +141,15 @@ const emit = defineEmits(['filterRemoved', 'filtersCleared'])
           @click:close="removeFilter(filter.index)"
         >
 
-          <span class="font-weight-medium">{{ getFilterLabel(filter) }}</span>
-          <v-icon :icon="filterIcon(filter)" size="x-small" class="mx-1" />
-          <span v-if="['ref','array.ref'].includes(filter.type)">
+          <span class="crud-active-filters__chip-label font-weight-medium">{{ getFilterLabel(filter) }}</span>
+          <v-icon :icon="filterIcon(filter)" size="x-small" class="crud-active-filters__chip-icon mx-1" />
+          <span v-if="['ref','array.ref'].includes(filter.type)" class="crud-active-filters__chip-ref-value">
             <crud-ref-display
                 :ref-display="filter.refDisplay"
                 :value="filter.value"
                 :entity="entity.getRef(filter.ref)" />
           </span>
-          <span v-else>{{ getFilterValue(filter) }}</span>
+          <span v-else class="crud-active-filters__chip-value">{{ getFilterValue(filter) }}</span>
 
           <v-tooltip
             v-if="filter.endOfDay"

package/src/components/CrudAi.vue

@@ -300,32 +300,36 @@ watch(prompt, () => {
 
 <template>
   <v-expand-transition>
-    <div v-if="expanded" class="mb-4">
-      <v-card variant="tonal" class="crud-ai-panel">
-        <v-card-text>
-          <div class="d-flex align-center mb-4">
-            <div class="text-subtitle-1">{{ subtitle }}</div>
+    <div v-if="expanded" id="crud-ai-panel-wrapper" class="crud-ai-panel-wrapper mb-4">
+      <v-card id="crud-ai-panel" variant="tonal" class="crud-ai-panel">
+        <v-card-text id="crud-ai-content" class="crud-ai-panel__content">
+          <div id="crud-ai-header" class="crud-ai-panel__header d-flex align-center mb-4">
+            <div id="crud-ai-subtitle" class="crud-ai-panel__subtitle text-subtitle-1">{{ subtitle }}</div>
             <v-spacer />
-            <v-btn icon="mdi-close" variant="text" @click="expanded = false" />
+            <v-btn id="crud-ai-close-button" class="crud-ai-panel__close-button" icon="mdi-close" variant="text" @click="expanded = false" />
           </div>
 
           <v-alert
               v-if="error"
+              id="crud-ai-error"
               type="error"
               variant="tonal"
-              class="mb-4"
+              class="crud-ai-panel__error mb-4"
               :text="error"
           />
 
           <v-alert
               v-if="editableFields.length === 0"
+              id="crud-ai-empty-fields-warning"
               type="warning"
               variant="tonal"
-              class="mb-4"
+              class="crud-ai-panel__empty-fields-warning mb-4"
               :text="te('ai.noEditableFields') ? t('ai.noEditableFields') : 'No hay campos editables disponibles para asistir con IA.'"
           />
 
           <v-textarea
+              id="crud-ai-prompt"
+              class="crud-ai-panel__prompt"
               v-model="prompt"
               rows="3"
               auto-grow
@@ -334,8 +338,10 @@ watch(prompt, () => {
               :placeholder="te('ai.promptPlaceholder') ? t('ai.promptPlaceholder') : 'Ejemplo: completá este formulario para un producto premium orientado a pequeñas empresas.'"
           />
 
-          <div class="d-flex justify-end mt-2">
+          <div id="crud-ai-prompt-actions" class="crud-ai-panel__prompt-actions d-flex justify-end mt-2">
             <v-btn
+                id="crud-ai-generate-button"
+                class="crud-ai-panel__generate-button"
                 color="primary"
                 variant="flat"
                 :loading="loading"
@@ -346,54 +352,59 @@ watch(prompt, () => {
             </v-btn>
           </div>
 
-          <v-card v-if="response" variant="outlined" class="mt-6">
-            <v-card-title>
+          <v-card v-if="response" id="crud-ai-preview" variant="outlined" class="crud-ai-panel__preview mt-6">
+            <v-card-title id="crud-ai-preview-title" class="crud-ai-panel__preview-title">
               {{ te('ai.preview') ? t('ai.preview') : 'Vista previa' }}
             </v-card-title>
 
-            <v-card-text>
+            <v-card-text id="crud-ai-preview-content" class="crud-ai-panel__preview-content">
               <v-alert
                   v-if="response.message"
+                  id="crud-ai-response-message"
                   variant="tonal"
                   type="info"
-                  class="mb-4"
+                  class="crud-ai-panel__response-message mb-4"
                   :text="response.message"
               />
 
               <v-alert
                   v-if="changedEntries.length === 0"
+                  id="crud-ai-no-changes"
                   variant="tonal"
                   type="info"
+                  class="crud-ai-panel__no-changes"
                   :text="te('ai.noChanges') ? t('ai.noChanges') : 'La IA no propuso cambios aplicables para este formulario.'"
               />
 
-              <v-list v-else lines="three">
+              <v-list v-else id="crud-ai-changes-list" class="crud-ai-panel__changes-list" lines="three">
                 <v-list-item
                     v-for="entry in changedEntries"
                     :key="entry.field.name"
-                    class="px-0"
+                    :id="`crud-ai-change-${entry.field.name}`"
+                    class="crud-ai-panel__change px-0"
                 >
-                  <v-list-item-title>
+                  <v-list-item-title class="crud-ai-panel__change-title">
                     {{ entry.field.label || entry.field.name }}
                   </v-list-item-title>
-                  <div class="mt-1 preview-block">
+                  <div class="crud-ai-panel__change-preview mt-1 preview-block">
                     <template v-if="showCurrentValues">
-                      <div class="text-caption text-medium-emphasis">Actual</div>
-                      <pre class="value-preview">{{ formatValue(entry.currentValue) }}</pre>
+                      <div class="crud-ai-panel__current-label text-caption text-medium-emphasis">Actual</div>
+                      <pre class="crud-ai-panel__current-value value-preview">{{ formatValue(entry.currentValue) }}</pre>
                     </template>
-                    <div class="text-caption text-medium-emphasis mt-2">Sugerido</div>
-                    <pre class="value-preview">{{ formatValue(entry.suggestedValue) }}</pre>
+                    <div class="crud-ai-panel__suggested-label text-caption text-medium-emphasis mt-2">Sugerido</div>
+                    <pre class="crud-ai-panel__suggested-value value-preview">{{ formatValue(entry.suggestedValue) }}</pre>
                   </div>
                 </v-list-item>
               </v-list>
 
-              <div v-if="(response.warnings || []).length > 0" class="mt-4">
+              <div v-if="(response.warnings || []).length > 0" id="crud-ai-warnings" class="crud-ai-panel__warnings mt-4">
                 <v-alert
                     v-for="warning in response.warnings || []"
                     :key="warning"
+                    :id="`crud-ai-warning-${warning.replace(/[^a-zA-Z0-9_-]/g, '-')}`"
                     variant="tonal"
                     type="warning"
-                    class="mb-3"
+                    class="crud-ai-panel__warning mb-3"
                     :text="warning"
                 />
               </div>
@@ -401,12 +412,14 @@ watch(prompt, () => {
           </v-card>
         </v-card-text>
 
-        <v-card-actions v-if="response">
+        <v-card-actions v-if="response" id="crud-ai-actions" class="crud-ai-panel__actions">
           <v-spacer />
-          <v-btn variant="text" @click="expanded = false">
+          <v-btn id="crud-ai-cancel-button" class="crud-ai-panel__cancel-button" variant="text" @click="expanded = false">
             {{ t('action.cancel') }}
           </v-btn>
           <v-btn
+              id="crud-ai-apply-button"
+              class="crud-ai-panel__apply-button"
               color="primary"
               variant="flat"
               :disabled="changedEntries.length === 0"

package/src/components/CrudAutocomplete.vue

@@ -109,6 +109,8 @@ defineEmits(['updateValue'])
 
   <v-select
       v-if="noFilter"
+      :id="`crud-autocomplete-select-${field.name}`"
+      class="crud-autocomplete crud-autocomplete--select"
       v-model="valueModel"
       :label="label ? label : field.label"
       :placeholder="label ? label : field.label"
@@ -143,12 +145,14 @@ defineEmits(['updateValue'])
   >
 
     <template v-if="addOnTheFly" v-slot:append>
-      <crud-create-on-the-fly-button :entity="entity" @created="onCreated"></crud-create-on-the-fly-button>
+      <crud-create-on-the-fly-button :id="`crud-autocomplete-create-${field.name}`" class="crud-autocomplete__create-button" :entity="entity" @created="onCreated"></crud-create-on-the-fly-button>
     </template>
 
     <template v-slot:item="{ props: itemProps, item }">
       <v-list-item
           v-bind="itemProps"
+          :id="`crud-autocomplete-select-item-${field.name}-${item.raw[itemValue]}`"
+          class="crud-autocomplete__item"
           density="compact"
           :title="item.raw[itemTitle]"
           :color="item.raw?.color"
@@ -159,6 +163,8 @@ defineEmits(['updateValue'])
 
     <template v-slot:selection="{item}">
       <v-chip tile density="compact"
+              :id="`crud-autocomplete-select-selection-${field.name}-${item.raw[itemValue]}`"
+              class="crud-autocomplete__selection-chip"
               :color="item.raw?.color"
               :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       >
@@ -171,6 +177,8 @@ defineEmits(['updateValue'])
 
   <v-autocomplete
       v-else
+      :id="`crud-autocomplete-input-${field.name}`"
+      class="crud-autocomplete crud-autocomplete--filterable"
       v-model="valueModel"
       :label="label ? label : field.label"
       :placeholder="label ? label : field.label"
@@ -206,12 +214,14 @@ defineEmits(['updateValue'])
   >
 
     <template v-if="addOnTheFly" v-slot:append>
-      <crud-create-on-the-fly-button :entity="entity" @created="onCreated"></crud-create-on-the-fly-button>
+      <crud-create-on-the-fly-button :id="`crud-autocomplete-create-${field.name}`" class="crud-autocomplete__create-button" :entity="entity" @created="onCreated"></crud-create-on-the-fly-button>
     </template>
 
     <template v-slot:item="{ props: itemProps, item }">
       <v-list-item
           v-bind="itemProps"
+          :id="`crud-autocomplete-item-${field.name}-${item.raw[itemValue]}`"
+          class="crud-autocomplete__item"
           density="compact"
           :title="item.raw[itemTitle]"
           :color="item.raw?.color"
@@ -222,6 +232,8 @@ defineEmits(['updateValue'])
 
     <template v-slot:selection="{item}">
       <v-chip tile density="compact"
+              :id="`crud-autocomplete-selection-${field.name}-${item.raw[itemValue]}`"
+              class="crud-autocomplete__selection-chip"
               :color="item.raw?.color"
               :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       >

package/src/components/CrudDialog.vue

@@ -32,19 +32,19 @@ const title = computed(() => {
 </script>
 
 <template>
-  <v-dialog v-model="dialog"
+  <v-dialog id="crud-dialog" class="crud-dialog" v-model="dialog"
             :z-index="entity.dialogZindex"
             :fullscreen="fullscreen === undefined ?  entity.dialogFullscreen : fullscreen"
             :max-width="maxWidth === undefined ? entity.dialogMaxWidth : maxWidth"
   >
-    <v-card>
-      <v-toolbar>
-        <v-toolbar-title>{{title}}</v-toolbar-title>
+    <v-card id="crud-dialog-card" class="crud-dialog__card">
+      <v-toolbar id="crud-dialog-toolbar" class="crud-dialog__toolbar">
+        <v-toolbar-title id="crud-dialog-title" class="crud-dialog__title">{{title}}</v-toolbar-title>
         <v-spacer></v-spacer>
         <slot name="toolbar-actions"></slot>
-        <v-btn icon @click="dialog = false"><v-icon>mdi-close</v-icon></v-btn>
+        <v-btn id="crud-dialog-close-button" class="crud-dialog__close-button" icon @click="dialog = false"><v-icon>mdi-close</v-icon></v-btn>
       </v-toolbar>
-      <v-card-text>
+      <v-card-text id="crud-dialog-content" class="crud-dialog__content">
         <slot></slot>
       </v-card-text>
     </v-card>

package/src/components/CrudExportList.vue

@@ -17,20 +17,21 @@ const {
 <template>
   <v-card
       v-if="exportListVisible"
+      id="crud-export-list"
       :loading="exportLoading"
-      class="ma-3" density="compact" variant="outlined" color="secondary"
+      class="crud-export-list ma-3" density="compact" variant="outlined" color="secondary"
   >
-    <v-card-title>
+    <v-card-title id="crud-export-list-title" class="crud-export-list__title">
       {{ t('action.exports') }}
 
     </v-card-title>
-    <v-card-text>
-      <v-alert v-if="exportError" type="error">
+    <v-card-text id="crud-export-list-content" class="crud-export-list__content">
+      <v-alert v-if="exportError" id="crud-export-list-error" class="crud-export-list__error" type="error">
         {{ t('error.crud.export') }}
       </v-alert>
       <template v-else>
         <slot name="export-table" :exportFiles="exportFiles">
-          <v-table density="compact">
+          <v-table id="crud-export-list-table" class="crud-export-list__table" density="compact">
             <thead>
               <tr>
                 <th>Link</th>
@@ -39,10 +40,10 @@ const {
               </tr>
             </thead>
             <tbody>
-              <tr v-for="exportFile in exportFiles">
-                <td><a :href="exportFile.url" target="_blank">{{ exportFile.url }}</a></td>
-                <td>{{ exportFile.rowCount }}</td>
-                <td>{{ exportFile.time }}</td>
+              <tr v-for="(exportFile, index) in exportFiles" :id="`crud-export-list-row-${index}`" class="crud-export-list__row">
+                <td class="crud-export-list__url-cell"><a :id="`crud-export-list-link-${index}`" class="crud-export-list__link" :href="exportFile.url" target="_blank">{{ exportFile.url }}</a></td>
+                <td class="crud-export-list__row-count-cell">{{ exportFile.rowCount }}</td>
+                <td class="crud-export-list__time-cell">{{ exportFile.time }}</td>
               </tr>
             </tbody>
           </v-table>
@@ -50,10 +51,10 @@ const {
       </template>
     </v-card-text>
 
-    <v-card-actions>
+    <v-card-actions id="crud-export-list-actions" class="crud-export-list__actions">
       <v-spacer></v-spacer>
-      <v-btn @click="exportFiles = []" :loading="exportLoading">{{ t('action.clear') }}</v-btn>
-      <v-btn @click="exportListVisible=false">{{ t('action.close') }}</v-btn>
+      <v-btn id="crud-export-list-clear-button" class="crud-export-list__clear-button" @click="exportFiles = []" :loading="exportLoading">{{ t('action.clear') }}</v-btn>
+      <v-btn id="crud-export-list-close-button" class="crud-export-list__close-button" @click="exportListVisible=false">{{ t('action.close') }}</v-btn>
     </v-card-actions>
   </v-card>
 </template>

package/src/components/CrudFieldRange.vue

@@ -149,9 +149,11 @@ const toInnerIcon = computed(() => {
 </script>
 
 <template>
-  <v-row dense>
-    <v-col cols="12" sm="6">
+  <v-row :id="`crud-field-range-${name}`" class="crud-field-range" dense>
+    <v-col :id="`crud-field-range-from-column-${name}`" class="crud-field-range__from-column" cols="12" sm="6">
       <v-date-input
+          :id="`crud-field-range-from-${name}`"
+          class="crud-field-range__from-input"
           :name="`${name}_from`"
           :label="`${label} ${t('crud.from')}`"
           :hint="hint ?? field.hint"
@@ -177,8 +179,10 @@ const toInnerIcon = computed(() => {
       />
     </v-col>
 
-    <v-col cols="12" sm="6">
+    <v-col :id="`crud-field-range-to-column-${name}`" class="crud-field-range__to-column" cols="12" sm="6">
       <v-date-input
+          :id="`crud-field-range-to-${name}`"
+          class="crud-field-range__to-input"
           :name="`${name}_to`"
           :label="`${label} ${t('crud.to')}`"
           :hint="hint ?? field.hint"
@@ -204,7 +208,7 @@ const toInnerIcon = computed(() => {
           @input="onInput"
       >
         <template v-if="field.endOfDay && field.showEndOfDayChip !== false" v-slot:append-inner>
-          <v-chip size="small">23:59</v-chip>
+          <v-chip :id="`crud-field-range-end-of-day-${name}`" class="crud-field-range__end-of-day-chip" size="small">23:59</v-chip>
         </template>
       </v-date-input>
     </v-col>

package/src/components/CrudFilters.vue

@@ -44,10 +44,12 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
 </script>
 
 <template>
-  <v-card flat >
-        <v-row dense class="mt-1">
+  <v-card id="crud-filters" class="crud-filters" flat >
+        <v-row id="crud-filters-row" class="crud-filters__row mt-1" dense>
           <v-col v-for="(filter,index) in aFields"
                  :key="filter.name"
+                 :id="`crud-filter-column-${filter.name}`"
+                 class="crud-filters__column"
                  :cols="filter.cols ? filter.cols : 12"
                  :sm="filter.sm ? filter.sm : 6"
                  :md="filter.md ? filter.md : 6"
@@ -58,6 +60,8 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
             <slot :name="`filter.${filter.name}`" v-bind="{filter, filterIndex: index}">
               <crud-field-range
                   v-if="filter && valueModel[index] !== undefined && isRangeFilter(filter)"
+                  :id="`crud-filter-range-${filter.name}`"
+                  class="crud-filters__range-field"
                   :name="filter.name"
                   :label="filter.label"
                   :entity="entity"
@@ -71,6 +75,8 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
               />
               <crud-form-field
                   v-else-if="filter && valueModel[index] !== undefined"
+                  :id="`crud-filter-field-${filter.name}`"
+                  class="crud-filters__field"
                   :field="filter"
                   :entity="entity"
                   v-model="valueModel[index].value"

package/src/components/CrudFiltersAction.vue

@@ -22,10 +22,10 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
 
 <template>
 
-    <v-card-actions  class="pb-0">
+    <v-card-actions id="crud-filters-actions" class="crud-filters-actions pb-0">
       <v-spacer />
-      <v-btn  variant="text" density="compact" :class="entity.cleanFilterClass" @click="clear">{{ t('action.clear') }}</v-btn>
-      <v-btn variant="flat" density="compact" :class="entity.applyFilterClass"  @click="filter">
+      <v-btn id="crud-filters-clear-button" variant="text" density="compact" :class="['crud-filters-actions__clear-button', entity.cleanFilterClass]" @click="clear">{{ t('action.clear') }}</v-btn>
+      <v-btn id="crud-filters-apply-button" variant="flat" density="compact" :class="['crud-filters-actions__apply-button', entity.applyFilterClass]"  @click="filter">
         {{ t('action.filter') }}
       </v-btn>
     </v-card-actions>

package/src/components/CrudFiltersDynamic.vue

@@ -96,14 +96,17 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
 </script>
 
 <template>
-  <v-row dense class="mt-4">
+  <v-row id="crud-dynamic-filters" class="crud-dynamic-filters mt-4" dense>
     <v-col v-for="(filter,index) in aFields"
            :key="filter.name"
-           cols="12" class="tdash"
+           :id="`crud-dynamic-filter-${index}`"
+           cols="12" class="crud-dynamic-filters__item tdash"
     >
-      <v-row >
-        <v-col cols="12" sm="4">
+      <v-row :id="`crud-dynamic-filter-row-${index}`" class="crud-dynamic-filters__item-row">
+        <v-col :id="`crud-dynamic-filter-field-column-${index}`" class="crud-dynamic-filters__field-column" cols="12" sm="4">
           <v-select
+              :id="`crud-dynamic-filter-field-select-${index}`"
+              class="crud-dynamic-filters__field-select"
               :items="selectableFields"
               v-model="getDynamicFilter(index)!.name"
               :label="t('crud.field')"
@@ -113,8 +116,10 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
               @update:modelValue="(_v:string) => updateDynamicField(index, true)"
           />
         </v-col>
-        <v-col cols="12" sm="3">
+        <v-col :id="`crud-dynamic-filter-operator-column-${index}`" class="crud-dynamic-filters__operator-column" cols="12" sm="3">
           <v-select
+              :id="`crud-dynamic-filter-operator-select-${index}`"
+              class="crud-dynamic-filters__operator-select"
               :items="getDynamicOperations(index)"
               v-model="getDynamicFilter(index)!.operator"
               :label="t('crud.operator')"
@@ -124,9 +129,11 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
               @update:modelValue="(_v:string) => updateDynamicField(index)"
           />
         </v-col>
-        <v-col cols="10" sm="4">
+        <v-col :id="`crud-dynamic-filter-value-column-${index}`" class="crud-dynamic-filters__value-column" cols="10" sm="4">
           <crud-form-field
               v-if="dynamicValueRequired(index)"
+              :id="`crud-dynamic-filter-value-field-${index}`"
+              class="crud-dynamic-filters__value-field"
               :field="filter"
               :entity="entity"
               v-model="getDynamicFilter(index)!.value"
@@ -138,10 +145,11 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
               @updateValue="onUpdateValue"
           />
         </v-col>
-        <v-col cols="2" sm="1">
+        <v-col :id="`crud-dynamic-filter-delete-column-${index}`" class="crud-dynamic-filters__delete-column" cols="2" sm="1">
           <v-btn @click="deleteFilter(index)"
+                 :id="`crud-dynamic-filter-delete-button-${index}`"
                  icon="mdi-delete"
-                 class="mr-1"
+                 class="crud-dynamic-filters__delete-button mr-1"
                  variant="text"
                  color="red"
           >
@@ -152,8 +160,8 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
 
     </v-col>
 
-    <v-col cols="12">
-      <v-btn size="small" variant="outlined" color="primary" @click="addFilter">+ {{ t('action.addFilter') }}</v-btn>
+    <v-col id="crud-dynamic-filters-add-column" class="crud-dynamic-filters__add-column" cols="12">
+      <v-btn id="crud-dynamic-filters-add-button" class="crud-dynamic-filters__add-button" size="small" variant="outlined" color="primary" @click="addFilter">+ {{ t('action.addFilter') }}</v-btn>
     </v-col>
 
   </v-row>