@drax/crud-vue 3.46.0 → 3.48.0

package/src/components/CrudForm.vue

@@ -168,22 +168,24 @@ const onlyView = computed(()=> {
 </script>
 
 <template>
-  <v-form ref="formRef" @submit.prevent>
-    <v-card flat>
+  <v-form id="crud-form" class="crud-form" ref="formRef" @submit.prevent>
+    <v-card id="crud-form-card" class="crud-form__card" flat>
 
-      <v-card-subtitle v-if="getItemId(form)">ID: {{ getItemId(form) }}</v-card-subtitle>
+      <v-card-subtitle v-if="getItemId(form)" id="crud-form-id" class="crud-form__id">ID: {{ getItemId(form) }}</v-card-subtitle>
 
-      <v-card-text v-if="error">
-        <v-alert color="error">{{ te(error) ? t(error) : error }}</v-alert>
+      <v-card-text v-if="error" id="crud-form-error-content" class="crud-form__error-content">
+        <v-alert id="crud-form-error-alert" class="crud-form__error-alert" color="error">{{ te(error) ? t(error) : error }}</v-alert>
       </v-card-text>
 
-      <v-card-text>
+      <v-card-text id="crud-form-content" class="crud-form__content">
 
         <!--GENERAL-->
-        <v-row>
+        <v-row id="crud-form-general-fields" class="crud-form__general-fields">
           <v-col
               v-for="field in generalFields"
               :key="field.name"
+              :id="`crud-form-general-field-column-${field.name}`"
+              class="crud-form__general-field-column"
               :cols="field.cols ? field.cols : 12"
               :sm="field.sm ? field.sm : undefined"
               :md="field.md ? field.md : undefined"
@@ -201,6 +203,8 @@ const onlyView = computed(()=> {
             >
 
               <crud-form-field
+                  :id="`crud-form-general-field-${field.name}`"
+                  class="crud-form__general-field"
                   :field="field"
                   :entity="entity"
                   v-model="form[field.name]"
@@ -226,22 +230,24 @@ const onlyView = computed(()=> {
         </v-row>
 
         <!--TAB-->
-        <v-card class="mt-4" variant="outlined" v-if="entity.tabs && entity.tabs.length > 0">
+        <v-card id="crud-form-tabs-card" class="crud-form__tabs-card mt-4" variant="outlined" v-if="entity.tabs && entity.tabs.length > 0">
 
-            <v-tabs v-model="tabSelected">
-              <v-tab v-for="tab in entity.tabs" :value="tab" :key="tab">
-                <span  :class="tabInputErrors(tab) ? 'text-red' : ''">
+            <v-tabs id="crud-form-tabs" class="crud-form__tabs" v-model="tabSelected">
+              <v-tab v-for="tab in entity.tabs" :id="`crud-form-tab-${tab}`" class="crud-form__tab" :value="tab" :key="tab">
+                <span :id="`crud-form-tab-label-${tab}`" :class="['crud-form__tab-label', tabInputErrors(tab) ? 'text-red' : '']">
                 {{ te(tab) ? t(tab) : tab }}
                 </span>
               </v-tab>
             </v-tabs>
-          <v-card-text>
-            <v-tabs-window v-model="tabSelected">
-              <v-tabs-window-item v-for="tab in entity.tabs" :value="tab">
-                <v-row class="pt-3">
+          <v-card-text id="crud-form-tabs-content" class="crud-form__tabs-content">
+            <v-tabs-window id="crud-form-tabs-window" class="crud-form__tabs-window" v-model="tabSelected">
+              <v-tabs-window-item v-for="tab in entity.tabs" :id="`crud-form-tab-panel-${tab}`" class="crud-form__tab-panel" :value="tab">
+                <v-row class="crud-form__tab-fields pt-3">
                   <v-col
                       v-for="field in tabFields(tab)"
                       :key="field.name"
+                      :id="`crud-form-tab-field-column-${tab}-${field.name}`"
+                      class="crud-form__tab-field-column"
                       :cols="field.cols ? field.cols : 12"
                       :sm="field.sm ? field.sm : undefined"
                       :md="field.md ? field.md : undefined"
@@ -261,6 +267,8 @@ const onlyView = computed(()=> {
 
 
                       <crud-form-field
+                          :id="`crud-form-tab-field-${tab}-${field.name}`"
+                          class="crud-form__tab-field"
                           :field="field"
                           :entity="entity"
                           v-model="form[field.name]"
@@ -288,14 +296,14 @@ const onlyView = computed(()=> {
         </v-card>
 
         <!--MENU-->
-        <v-row v-if="entity.menus && entity.menus.length > 0">
-          <v-col cols="12" sm="4" md="3">
-            <v-card variant="outlined">
-              <v-card-text :style="{ maxHeight: menuMaxHeight, overflowY: 'auto' }">
-                <v-list v-model="menuSelected">
-                  <v-list-item v-for="menu in entity.menus" rounded="shaped" :value="menu" @click="menuSelected = menu">
-                    <v-list-item-title>
-                    <span :class="menuInputErrors(menu) ? 'text-red' : ''">
+        <v-row v-if="entity.menus && entity.menus.length > 0" id="crud-form-menu-layout" class="crud-form__menu-layout">
+          <v-col id="crud-form-menu-nav-column" class="crud-form__menu-nav-column" cols="12" sm="4" md="3">
+            <v-card id="crud-form-menu-nav-card" class="crud-form__menu-nav-card" variant="outlined">
+              <v-card-text id="crud-form-menu-nav-content" class="crud-form__menu-nav-content" :style="{ maxHeight: menuMaxHeight, overflowY: 'auto' }">
+                <v-list id="crud-form-menu-list" class="crud-form__menu-list" v-model="menuSelected">
+                  <v-list-item v-for="menu in entity.menus" :id="`crud-form-menu-item-${menu}`" class="crud-form__menu-item" rounded="shaped" :value="menu" @click="menuSelected = menu">
+                    <v-list-item-title class="crud-form__menu-item-title">
+                    <span :id="`crud-form-menu-label-${menu}`" :class="['crud-form__menu-label', menuInputErrors(menu) ? 'text-red' : '']">
                         {{ te(menu) ? t(menu) : menu }}
                       </span>
 
@@ -305,13 +313,15 @@ const onlyView = computed(()=> {
               </v-card-text>
             </v-card>
           </v-col>
-          <v-col cols="12" sm="8" md="9">
-            <v-card v-if="menuSelected" variant="outlined">
-              <v-card-text>
-                <v-row>
+          <v-col id="crud-form-menu-fields-column" class="crud-form__menu-fields-column" cols="12" sm="8" md="9">
+            <v-card v-if="menuSelected" id="crud-form-menu-fields-card" class="crud-form__menu-fields-card" variant="outlined">
+              <v-card-text id="crud-form-menu-fields-content" class="crud-form__menu-fields-content">
+                <v-row id="crud-form-menu-fields" class="crud-form__menu-fields">
                   <v-col
                       v-for="field in menuFields(menuSelected)"
                       :key="field.name"
+                      :id="`crud-form-menu-field-column-${menuSelected}-${field.name}`"
+                      class="crud-form__menu-field-column"
                       :cols="field.cols ? field.cols : 12"
                       :sm="field.sm ? field.sm : undefined"
                       :md="field.md ? field.md : undefined"
@@ -328,6 +338,8 @@ const onlyView = computed(()=> {
                         }"
                     >
                       <crud-form-field
+                          :id="`crud-form-menu-field-${menuSelected}-${field.name}`"
+                          class="crud-form__menu-field"
                           :field="field"
                           :entity="entity"
                           v-model="form[field.name]"
@@ -356,18 +368,19 @@ const onlyView = computed(()=> {
 
       </v-card-text>
 
-      <v-card-actions>
+      <v-card-actions id="crud-form-actions" class="crud-form__actions">
         <v-spacer></v-spacer>
-        <v-btn variant="text" :class="entity.cancelBtnFormClass" @click="cancel">
+        <v-btn id="crud-form-cancel-button" variant="text" :class="['crud-form__cancel-button', entity.cancelBtnFormClass]" @click="cancel">
           {{ operation == 'view' ? t('action.close') : t('action.cancel') }}
         </v-btn>
-        <v-btn variant="flat" v-if="operation != 'view'" :class="entity.submitBtnFormClass" @click="submit" :loading="store.loading">
+        <v-btn id="crud-form-submit-button" variant="flat" v-if="operation != 'view'" :class="['crud-form__submit-button', entity.submitBtnFormClass]" @click="submit" :loading="store.loading">
           {{ operation ? t('action.'+operation) : t('action.sent') }}
         </v-btn>
         <v-btn
+            id="crud-form-submit-and-return-button"
             variant="flat"
             v-if="showSubmitAndReturn && ['create', 'edit'].includes(operation || '')"
-            :class="entity.submitBtnFormClass"
+            :class="['crud-form__submit-and-return-button', entity.submitBtnFormClass]"
             @click="submitAndReturn"
             :loading="store.loading"
         >

package/src/components/CrudFormField.vue

@@ -95,9 +95,11 @@ const hasHideDetails = computed(() => {
 
 <template>
 
-  <div v-if="field && field.type && (!field.permission || hasPermission(field.permission) )">
+  <div v-if="field && field.type && (!field.permission || hasPermission(field.permission) )" :id="`crud-form-field-${name}`" :class="['crud-form-field', `crud-form-field--${field.type.replace(/\./g, '-')}`]">
     <v-text-field
         v-if="field.type === 'string'"
+        :id="`crud-form-field-string-${name}`"
+        class="crud-form-field__string-input"
         type="text"
         :name="name"
         :label="label"
@@ -124,6 +126,8 @@ const hasHideDetails = computed(() => {
 
     <v-textarea
         v-if="field.type === 'longString'"
+        :id="`crud-form-field-long-string-${name}`"
+        class="crud-form-field__long-string-input"
         :rows="field.rows || 5"
         type="text"
         :name="name"
@@ -151,6 +155,8 @@ const hasHideDetails = computed(() => {
 
     <v-text-field
         v-if="field.type === 'password'"
+        :id="`crud-form-field-password-${name}`"
+        class="crud-form-field__password-input"
         :name="name"
         :label="label"
         :hint="hint ?? field.hint"
@@ -179,6 +185,8 @@ const hasHideDetails = computed(() => {
 
     <v-combobox
         v-if="field.type === 'enum' && !field.noFilter"
+        :id="`crud-form-field-enum-combobox-${name}`"
+        class="crud-form-field__enum-combobox"
         :name="name"
         :label="label"
         :hint="hint ?? field.hint"
@@ -211,6 +219,8 @@ const hasHideDetails = computed(() => {
 
     <v-select
         v-if="field.type === 'select'"
+        :id="`crud-form-field-select-${name}`"
+        class="crud-form-field__select"
         :name="name"
         :label="label"
         :hint="hint ?? field.hint"
@@ -244,6 +254,8 @@ const hasHideDetails = computed(() => {
       <template v-slot:item="{ props: itemProps, item }">
         <v-list-item
             v-bind="itemProps"
+            :id="`crud-form-field-select-item-${name}-${item.raw.value}`"
+            class="crud-form-field__select-item"
             density="compact"
             :title="item.raw.title"
             :color="item.raw.color"
@@ -253,7 +265,7 @@ const hasHideDetails = computed(() => {
       </template>
 
       <template v-slot:selection="{item}">
-        <v-chip tile density="compact" :color="item.raw.color" :prepend-icon="item.raw.icon">{{
+        <v-chip tile density="compact" :id="`crud-form-field-select-selection-${name}-${item.raw.value}`" class="crud-form-field__select-selection-chip" :color="item.raw.color" :prepend-icon="item.raw.icon">{{
             item.raw.title
           }}
         </v-chip>
@@ -263,6 +275,8 @@ const hasHideDetails = computed(() => {
 
     <v-select
         v-if="field.type === 'enum' && field.noFilter"
+        :id="`crud-form-field-enum-select-${name}`"
+        class="crud-form-field__enum-select"
         :name="name"
         :label="label"
         :hint="hint ?? field.hint"
@@ -291,6 +305,8 @@ const hasHideDetails = computed(() => {
 
     <v-text-field
         v-if="field.type === 'number'"
+        :id="`crud-form-field-number-${name}`"
+        class="crud-form-field__number-input"
         type="number"
         :name="name"
         :label="label"
@@ -317,6 +333,8 @@ const hasHideDetails = computed(() => {
 
     <media-field
         v-if="field.type === 'file'"
+        :id="`crud-form-field-file-${name}`"
+        class="crud-form-field__file-input"
         :name="name"
         :label="label"
         v-model.number="valueModel"
@@ -339,6 +357,8 @@ const hasHideDetails = computed(() => {
 
     <media-full-field
         v-if="field.type === 'fullFile'"
+        :id="`crud-form-field-full-file-${name}`"
+        class="crud-form-field__full-file-input"
         :name="name"
         :label="label"
         v-model.number="valueModel"
@@ -361,6 +381,8 @@ const hasHideDetails = computed(() => {
 
     <v-switch
         v-if="field.type === 'boolean'"
+        :id="`crud-form-field-boolean-${name}`"
+        class="crud-form-field__boolean-switch"
         :name="name"
         :label="label"
         :hint="hint ?? field.hint"
@@ -388,6 +410,8 @@ const hasHideDetails = computed(() => {
 
     <v-date-input
         v-if="field.type === 'date'"
+        :id="`crud-form-field-date-${name}`"
+        class="crud-form-field__date-input"
         :name="name"
         :label="label"
         :hint="hint ?? field.hint"
@@ -422,12 +446,14 @@ const hasHideDetails = 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-form-field-date-end-of-day-${name}`" class="crud-form-field__end-of-day-chip" size="small">23:59</v-chip>
       </template>
     </v-date-input>
 
     <crud-autocomplete
         v-if="field.type === 'ref'"
+        :id="`crud-form-field-ref-${name}`"
+        class="crud-form-field__ref-autocomplete"
         :entity="entity.getRef(field.ref)"
         :field="field"
         v-model="valueModel"
@@ -455,14 +481,16 @@ const hasHideDetails = computed(() => {
         :on-input="onInput"
     />
 
-    <v-card v-if="field.type === 'object'" class="mt-3" variant="flat" border>
+    <v-card v-if="field.type === 'object'" :id="`crud-form-field-object-${name}`" class="crud-form-field__object-card mt-3" variant="flat" border>
 
-      <v-card-title class="text-h5">{{ field.label }}</v-card-title>
-      <v-card-text>
+      <v-card-title :id="`crud-form-field-object-title-${name}`" class="crud-form-field__object-title text-h5">{{ field.label }}</v-card-title>
+      <v-card-text :id="`crud-form-field-object-content-${name}`" class="crud-form-field__object-content">
 
-        <v-row dense>
-          <v-col cols="12" v-for="oField in field.objectFields">
+        <v-row :id="`crud-form-field-object-row-${name}`" class="crud-form-field__object-row" dense>
+          <v-col :id="`crud-form-field-object-column-${name}-${oField.name}`" class="crud-form-field__object-column" cols="12" v-for="oField in field.objectFields">
             <crud-form-field
+                :id="`crud-form-field-object-field-${name}-${oField.name}`"
+                class="crud-form-field__object-field"
 
                 :entity="entity"
                 :field="oField"
@@ -490,6 +518,8 @@ const hasHideDetails = computed(() => {
 
     <v-combobox
         v-if="field.type === 'array.string'"
+        :id="`crud-form-field-array-string-${name}`"
+        class="crud-form-field__array-string-combobox"
         type="text"
         :name="name"
         :label="label"
@@ -525,6 +555,8 @@ const hasHideDetails = computed(() => {
 
     <v-combobox
         v-if="field.type === 'array.enum'"
+        :id="`crud-form-field-array-enum-${name}`"
+        class="crud-form-field__array-enum-combobox"
         type="text"
         :name="name"
         :label="label"
@@ -562,6 +594,8 @@ const hasHideDetails = computed(() => {
 
     <crud-autocomplete
         v-if="field.type === 'array.ref'"
+        :id="`crud-form-field-array-ref-${name}`"
+        class="crud-form-field__array-ref-autocomplete"
         :entity="entity.getRef(field.ref)"
         :field="field"
         :item-title="field?.refDisplay"
@@ -593,6 +627,8 @@ const hasHideDetails = computed(() => {
 
     <v-combobox
         v-if="field.type === 'array.number'"
+        :id="`crud-form-field-array-number-${name}`"
+        class="crud-form-field__array-number-combobox"
         type="number"
         :name="name"
         :label="label"
@@ -628,6 +664,8 @@ const hasHideDetails = computed(() => {
 
     <crud-form-list
         v-if="field.type === 'array.object'"
+        :id="`crud-form-field-array-object-${name}`"
+        class="crud-form-field__array-object-list"
         :entity="entity"
         :field="field"
         v-model="valueModel"
@@ -642,6 +680,8 @@ const hasHideDetails = computed(() => {
 
     <crud-form-record
         v-if="field.type === 'record'"
+        :id="`crud-form-field-record-${name}`"
+        class="crud-form-field__record"
         :entity="entity"
         :field="field"
         v-model="valueModel"

package/src/components/CrudFormList.vue

@@ -172,15 +172,16 @@ function clearDragState() {
 </script>
 
 <template>
-  <v-card class="mt-3" variant="flat" border>
+  <v-card :id="`crud-form-list-${field.name}`" class="crud-form-list mt-3" variant="flat" border>
 
-    <v-card-title class="text-h5">{{ label }}</v-card-title>
+    <v-card-title :id="`crud-form-list-title-${field.name}`" class="crud-form-list__title text-h5">{{ label }}</v-card-title>
 
     <!--ACCORDION-->
-    <v-card-text v-if="field.arrayObjectUI === 'accordion' || xs">
-      <v-expansion-panels>
+    <v-card-text v-if="field.arrayObjectUI === 'accordion' || xs" :id="`crud-form-list-accordion-${field.name}`" class="crud-form-list__accordion">
+      <v-expansion-panels :id="`crud-form-list-accordion-panels-${field.name}`" class="crud-form-list__accordion-panels">
         <v-expansion-panel v-for="(item,index) in valueModel" :key="index"
-                           :class="{'crud-form-list--drag-over': dragOverIndex === index}"
+                           :id="`crud-form-list-accordion-item-${field.name}-${index}`"
+                           :class="['crud-form-list__accordion-item', {'crud-form-list--drag-over': dragOverIndex === index}]"
                            :draggable="isSortable"
                            @dragstart="onDragStart(index)"
                            @dragenter.prevent="onDragEnter(index)"
@@ -188,28 +189,31 @@ function clearDragState() {
                            @drop.prevent="onDrop(index)"
                            @dragend="clearDragState">
 
-          <v-expansion-panel-title>
-            <v-icon v-if="isSortable" class="mr-2" size="small">mdi-drag</v-icon>
-            <v-chip class="mr-2" :color="hasError(index) ? 'red':'teal'">{{ index }}</v-chip>
+          <v-expansion-panel-title class="crud-form-list__accordion-title">
+            <v-icon v-if="isSortable" class="crud-form-list__drag-icon mr-2" size="small">mdi-drag</v-icon>
+            <v-chip class="crud-form-list__index-chip mr-2" :color="hasError(index) ? 'red':'teal'">{{ index }}</v-chip>
             {{ getItemTitle(index) }}
 
             <template v-slot:actions="{expanded}">
-              <v-icon>{{ expanded ? "mdi-menu-down" : "mdi-menu-up" }}</v-icon>
+              <v-icon class="crud-form-list__expand-icon">{{ expanded ? "mdi-menu-down" : "mdi-menu-up" }}</v-icon>
 
               <v-btn v-if="!readonly" variant="text" @click="removeItem(index)" density="compact"
-                     class="text-red text--darken-3">
+                     :id="`crud-form-list-accordion-remove-${field.name}-${index}`"
+                     class="crud-form-list__remove-button text-red text--darken-3">
                 <v-icon>mdi-close</v-icon>
               </v-btn>
             </template>
 
           </v-expansion-panel-title>
 
-          <v-expansion-panel-text>
-            <v-row>
+          <v-expansion-panel-text class="crud-form-list__accordion-content">
+            <v-row class="crud-form-list__fields-row">
               <template v-for="key in Object.keys(item as Record<string, any>)" :key="key">
-                <v-col cols="12">
+                <v-col :id="`crud-form-list-accordion-field-column-${field.name}-${index}-${key}`" class="crud-form-list__field-column" cols="12">
                   <crud-form-field
                       v-if="hasField(key)"
+                      :id="`crud-form-list-accordion-field-${field.name}-${index}-${key}`"
+                      class="crud-form-list__field"
                       :entity="entity"
                       :field="getField(key)"
                       v-model="(valueModel[index] as any)[key]"
@@ -230,7 +234,7 @@ function clearDragState() {
           </v-expansion-panel-text>
 
         </v-expansion-panel>
-        <v-btn icon @click="addItem" class="text-blue text--darken-3">
+        <v-btn :id="`crud-form-list-accordion-add-${field.name}`" icon @click="addItem" class="crud-form-list__add-button text-blue text--darken-3">
           <v-icon>mdi-plus</v-icon>
         </v-btn>
 
@@ -238,28 +242,29 @@ function clearDragState() {
     </v-card-text>
 
     <!--CHIPS-->
-    <v-card-text v-else-if="field.arrayObjectUI === 'chips' ">
-      <v-row dense>
+    <v-card-text v-else-if="field.arrayObjectUI === 'chips' " :id="`crud-form-list-chips-${field.name}`" class="crud-form-list__chips">
+      <v-row class="crud-form-list__chips-row" dense>
         <v-col cols="12" sm="12" md="12">
           <v-card variant="flat">
             <v-card-text>
-              <v-btn color="primary" rounded="xl" @click="addItem"
-                     class="text-blue text--darken-3 float-left mt-1 mr-2">
+              <v-btn :id="`crud-form-list-chips-add-${field.name}`" color="primary" rounded="xl" @click="addItem"
+                     class="crud-form-list__chips-add-button text-blue text--darken-3 float-left mt-1 mr-2">
                 <v-icon>mdi-plus</v-icon>
                 {{ label }}
               </v-btn>
 
 
-              <v-chip-group v-model="indexSelected"
+              <v-chip-group :id="`crud-form-list-chip-group-${field.name}`" class="crud-form-list__chip-group" v-model="indexSelected"
                             :style="{ maxHeight: menuMaxHeight, overflowY: 'auto' }"
                             direction="horizontal"
 
               >
 
                 <v-chip v-for="(item,index) in valueModel" :key="index"
+                        :id="`crud-form-list-chip-${field.name}-${index}`"
                         :value="index" @click="menuSelect(item, index)"
                         :draggable="isSortable"
-                        :class="{'crud-form-list--drag-over': dragOverIndex === index}"
+                        :class="['crud-form-list__chip', {'crud-form-list--drag-over': dragOverIndex === index}]"
                         @dragstart="onDragStart(index)"
                         @dragenter.prevent="onDragEnter(index)"
                         @dragover.prevent
@@ -270,7 +275,7 @@ function clearDragState() {
                   {{ getItemTitle(index) || (index) }}
 
                   <template v-slot:append>
-                    <v-btn variant="text" class="ml-2" density="compact"
+                    <v-btn variant="text" :id="`crud-form-list-chip-remove-${field.name}-${index}`" class="crud-form-list__chip-remove-button ml-2" density="compact"
                            icon="mdi-close-circle"
                            @click="removeItem(index)"
                     ></v-btn>
@@ -283,13 +288,15 @@ function clearDragState() {
           </v-card>
         </v-col>
         <v-col cols="12" sm="12" md="12">
-          <v-card v-if="itemSelected" variant="flat">
+          <v-card v-if="itemSelected" :id="`crud-form-list-chips-fields-card-${field.name}`" class="crud-form-list__chips-fields-card" variant="flat">
             <v-card-text>
               <v-row>
                 <template v-for="key in Object.keys(itemSelected as Record<string, any>)" :key="key">
-                  <v-col cols="12">
+                  <v-col :id="`crud-form-list-chips-field-column-${field.name}-${key}`" class="crud-form-list__field-column" cols="12">
                     <crud-form-field
                         v-if="hasField(key)"
+                        :id="`crud-form-list-chips-field-${field.name}-${key}`"
+                        class="crud-form-list__field"
                         :entity="entity"
                         :field="getField(key)"
                         v-model="(itemSelected as any)[key]"
@@ -313,14 +320,15 @@ function clearDragState() {
     </v-card-text>
 
     <!--MENU-->
-    <v-card-text v-else>
-      <v-row>
+    <v-card-text v-else :id="`crud-form-list-menu-${field.name}`" class="crud-form-list__menu">
+      <v-row class="crud-form-list__menu-row">
         <v-col cols="12" sm="4" md="3">
           <v-card variant="outlined">
             <v-card-text>
-              <v-list v-model="itemSelected" :style="{ maxHeight: menuMaxHeight, overflowY: 'auto' }">
+              <v-list :id="`crud-form-list-menu-list-${field.name}`" class="crud-form-list__menu-list" v-model="itemSelected" :style="{ maxHeight: menuMaxHeight, overflowY: 'auto' }">
                 <v-list-item v-for="(item,index) in valueModel" :key="index" rounded="shaped"
-                             :class="{'crud-form-list--drag-over': dragOverIndex === index}"
+                             :id="`crud-form-list-menu-item-${field.name}-${index}`"
+                             :class="['crud-form-list__menu-item', {'crud-form-list--drag-over': dragOverIndex === index}]"
                              :value="item" @click="menuSelect(item, index)"
                              :draggable="isSortable"
                              @dragstart="onDragStart(index)"
@@ -330,34 +338,38 @@ function clearDragState() {
                              @dragend="clearDragState"
                 >
                   <template v-slot:append>
-                    <v-icon v-if="isSortable" size="small" class="mr-2">mdi-drag</v-icon>
+                    <v-icon v-if="isSortable" size="small" class="crud-form-list__drag-icon mr-2">mdi-drag</v-icon>
                     <v-btn size="x-small" variant="text" color="red" icon="mdi-delete"
+                           :id="`crud-form-list-menu-remove-${field.name}-${index}`"
+                           class="crud-form-list__remove-button"
                            @click="removeItem(index)"
 
                     />
                   </template>
                   <v-list-item-title>
-                    <v-chip class="mr-2" :color="hasError(index) ? 'red':'teal'">{{ index }}</v-chip>
+                    <v-chip class="crud-form-list__index-chip mr-2" :color="hasError(index) ? 'red':'teal'">{{ index }}</v-chip>
                     {{ getItemTitle(index) }}
                   </v-list-item-title>
                 </v-list-item>
 
               </v-list>
 
-              <v-btn variant="text" @click="addItem" class="text-blue text--darken-3 float-right my-2">
+              <v-btn :id="`crud-form-list-menu-add-${field.name}`" variant="text" @click="addItem" class="crud-form-list__add-button text-blue text--darken-3 float-right my-2">
                 <v-icon>mdi-plus</v-icon>
               </v-btn>
             </v-card-text>
           </v-card>
         </v-col>
         <v-col cols="12" sm="8" md="9">
-          <v-card v-if="itemSelected" variant="outlined">
+          <v-card v-if="itemSelected" :id="`crud-form-list-menu-fields-card-${field.name}`" class="crud-form-list__menu-fields-card" variant="outlined">
             <v-card-text>
               <v-row>
                 <template v-for="key in Object.keys(itemSelected as Record<string, any>)" :key="key">
-                  <v-col cols="12">
+                  <v-col :id="`crud-form-list-menu-field-column-${field.name}-${key}`" class="crud-form-list__field-column" cols="12">
                     <crud-form-field
                         v-if="hasField(key)"
+                        :id="`crud-form-list-menu-field-${field.name}-${key}`"
+                        class="crud-form-list__field"
                         :entity="entity"
                         :field="getField(key)"
                         v-model="(itemSelected as any)[key]"

package/src/components/CrudFormRecord.vue

@@ -90,18 +90,20 @@ defineEmits(['updateValue'])
 </script>
 
 <template>
-  <div class="record-field">
-    <v-card variant="flat" border class="mt-3">
-      <v-card-title class="text-h5">{{ field.label }}</v-card-title>
-      <v-card-text>
-        <div v-if="localEntries.length === 0" class="text-center py-4">
-          <p class="text-grey">{{ t('common.noData') || 'No data' }}</p>
+  <div :id="`crud-form-record-${field.name}`" class="crud-form-record record-field">
+    <v-card :id="`crud-form-record-card-${field.name}`" variant="flat" border class="crud-form-record__card mt-3">
+      <v-card-title :id="`crud-form-record-title-${field.name}`" class="crud-form-record__title text-h5">{{ field.label }}</v-card-title>
+      <v-card-text :id="`crud-form-record-content-${field.name}`" class="crud-form-record__content">
+        <div v-if="localEntries.length === 0" :id="`crud-form-record-empty-${field.name}`" class="crud-form-record__empty text-center py-4">
+          <p class="crud-form-record__empty-text text-grey">{{ t('common.noData') || 'No data' }}</p>
         </div>
 
-        <div v-for="entry in localEntries" :key="entry.id" class="record-entry mb-3">
-          <v-row dense>
-            <v-col cols="12" sm="5">
+        <div v-for="entry in localEntries" :key="entry.id" :id="`crud-form-record-entry-${field.name}-${entry.id}`" class="crud-form-record__entry record-entry mb-3">
+          <v-row :id="`crud-form-record-entry-row-${field.name}-${entry.id}`" class="crud-form-record__entry-row" dense>
+            <v-col :id="`crud-form-record-key-column-${field.name}-${entry.id}`" class="crud-form-record__key-column" cols="12" sm="5">
               <v-text-field
+                  :id="`crud-form-record-key-field-${field.name}-${entry.id}`"
+                  class="crud-form-record__key-field"
                   :model-value="entry.key"
                   :label="t('common.key') || 'Key'"
                   :density="density"
@@ -112,8 +114,10 @@ defineEmits(['updateValue'])
                   outlined
               />
             </v-col>
-            <v-col cols="12" sm="5">
+            <v-col :id="`crud-form-record-value-column-${field.name}-${entry.id}`" class="crud-form-record__value-column" cols="12" sm="5">
               <v-text-field
+                  :id="`crud-form-record-value-field-${field.name}-${entry.id}`"
+                  class="crud-form-record__value-field"
                   :model-value="entry.value"
                   :label="t('common.value') || 'Value'"
                   :density="density"
@@ -124,9 +128,11 @@ defineEmits(['updateValue'])
                   outlined
               />
             </v-col>
-            <v-col cols="12" sm="2" class="d-flex align-center">
+            <v-col :id="`crud-form-record-actions-column-${field.name}-${entry.id}`" cols="12" sm="2" class="crud-form-record__actions-column d-flex align-center">
               <v-btn
                   v-if="!readonly"
+                  :id="`crud-form-record-delete-button-${field.name}-${entry.id}`"
+                  class="crud-form-record__delete-button"
                   icon="mdi-delete"
                   size="small"
                   color="error"
@@ -141,6 +147,8 @@ defineEmits(['updateValue'])
 
         <v-btn
             v-if="!readonly"
+            :id="`crud-form-record-add-button-${field.name}`"
+            class="crud-form-record__add-button"
             prepend-icon="mdi-plus"
             color="primary"
             variant="tonal"