@drax/crud-vue 3.46.0 → 3.47.0

package/src/components/buttons/CrudImportButton.vue

@@ -37,22 +37,24 @@ function onFileChange(event: Event) {
 </script>
 
 <template>
-  <div v-if="entity.isImportable">
+  <div v-if="entity.isImportable" id="crud-import-button-wrapper" class="crud-import-button-wrapper">
     <input
         ref="fileInput"
-        class="d-none"
+        id="crud-import-file-input"
+        class="crud-import-button__file-input d-none"
         type="file"
         :accept="entity.importFormats.includes('CSV') && entity.importFormats.includes('JSON') ? '.csv,.json,application/json,text/csv' : entity.importFormats.includes('CSV') ? '.csv,text/csv' : '.json,application/json'"
         @change="onFileChange"
     />
-    <v-menu>
+    <v-menu id="crud-import-menu" class="crud-import-menu">
       <template v-slot:activator="{ props: mp }">
-      <v-tooltip location="top">
+      <v-tooltip id="crud-import-button-tooltip" class="crud-import-button__tooltip" location="top">
         <template v-slot:activator="{ props }">
           <v-btn
               v-bind="{...mp, ...props}"
               :disabled="importLoading"
-              class="mr-1"
+              id="crud-import-button"
+              class="crud-import-button mr-1"
               variant="text"
               :loading="importLoading"
               icon="mdi-database-import-outline"
@@ -61,9 +63,9 @@ function onFileChange(event: Event) {
         {{ t('action.import')}}
       </v-tooltip>
       </template>
-      <v-list>
-        <v-list-item v-for="format in entity.importFormats" @click="selectFormat(format)">
-          <v-list-item-title>{{ format }}</v-list-item-title>
+      <v-list id="crud-import-format-list" class="crud-import-menu__list">
+        <v-list-item v-for="format in entity.importFormats" :id="`crud-import-format-${format}`" class="crud-import-menu__item" @click="selectFormat(format)">
+          <v-list-item-title class="crud-import-menu__item-title">{{ format }}</v-list-item-title>
         </v-list-item>
       </v-list>
     </v-menu>

package/src/components/buttons/CrudRefreshButton.vue

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

package/src/components/buttons/CrudSavedQueriesButton.vue

@@ -216,6 +216,8 @@ function onMenuUpdate(value: boolean) {
 <template>
   <v-menu
       v-if="canViewSavedQueries"
+      id="crud-saved-queries-menu"
+      class="crud-saved-queries-menu"
       :model-value="menu"
       offset-y
       :close-on-content-click="false"
@@ -224,21 +226,25 @@ function onMenuUpdate(value: boolean) {
     <template #activator="{ props: activatorProps }">
       <v-btn
           v-bind="activatorProps"
+          id="crud-saved-queries-button"
+          class="crud-saved-queries-button"
           icon
           variant="text"
       >
-        <v-icon>mdi-content-save-cog</v-icon>
+        <v-icon id="crud-saved-queries-button-icon" class="crud-saved-queries-button__icon">mdi-content-save-cog</v-icon>
         <v-tooltip activator="parent" location="bottom">
           {{ title }}
         </v-tooltip>
       </v-btn>
     </template>
 
-    <v-list min-width="280">
-      <v-list-subheader>{{ title }}</v-list-subheader>
+    <v-list id="crud-saved-queries-list" class="crud-saved-queries-menu__list" min-width="280">
+      <v-list-subheader id="crud-saved-queries-title" class="crud-saved-queries-menu__title">{{ title }}</v-list-subheader>
 
       <v-list-item
           v-if="canCreateSavedQueries"
+          id="crud-saved-queries-save-item"
+          class="crud-saved-queries-menu__save-item"
           @click="openSaveDialog"
       >
         <template #prepend>
@@ -249,17 +255,19 @@ function onMenuUpdate(value: boolean) {
 
       <v-divider />
 
-      <v-list-item v-if="loading">
-        <v-progress-linear indeterminate />
+      <v-list-item v-if="loading" id="crud-saved-queries-loading-item" class="crud-saved-queries-menu__loading-item">
+        <v-progress-linear id="crud-saved-queries-loading" class="crud-saved-queries-menu__loading" indeterminate />
       </v-list-item>
 
-      <v-list-item v-else-if="savedQueries.length === 0">
-        <v-list-item-title class="text-medium-emphasis">{{ noQueriesText }}</v-list-item-title>
+      <v-list-item v-else-if="savedQueries.length === 0" id="crud-saved-queries-empty-item" class="crud-saved-queries-menu__empty-item">
+        <v-list-item-title class="crud-saved-queries-menu__empty-title text-medium-emphasis">{{ noQueriesText }}</v-list-item-title>
       </v-list-item>
 
       <v-list-item
           v-for="query in savedQueries"
           :key="query._id"
+          :id="`crud-saved-query-${query._id}`"
+          class="crud-saved-queries-menu__query-item"
           @click="applyQuery(query)"
       >
         <template #prepend>
@@ -269,6 +277,8 @@ function onMenuUpdate(value: boolean) {
         <template #append>
           <v-btn
               v-if="canDeleteQuery(query)"
+              :id="`crud-saved-query-delete-${query._id}`"
+              class="crud-saved-queries-menu__delete-button"
               icon
               variant="text"
               color="red"
@@ -285,11 +295,13 @@ function onMenuUpdate(value: boolean) {
     </v-list>
   </v-menu>
 
-  <v-dialog v-model="saveDialog" max-width="460">
-    <v-card>
-      <v-card-title>{{ saveTitle }}</v-card-title>
-      <v-card-text>
+  <v-dialog id="crud-saved-query-save-dialog" class="crud-saved-query-save-dialog" v-model="saveDialog" max-width="460">
+    <v-card id="crud-saved-query-save-card" class="crud-saved-query-save-dialog__card">
+      <v-card-title id="crud-saved-query-save-title" class="crud-saved-query-save-dialog__title">{{ saveTitle }}</v-card-title>
+      <v-card-text id="crud-saved-query-save-content" class="crud-saved-query-save-dialog__content">
         <v-text-field
+            id="crud-saved-query-name-field"
+            class="crud-saved-query-save-dialog__name-field"
             v-model="form.name"
             :label="te('crud.savedQueries.name') ? t('crud.savedQueries.name') : 'Name'"
             density="compact"
@@ -297,18 +309,22 @@ function onMenuUpdate(value: boolean) {
             autofocus
         />
         <v-switch
+            id="crud-saved-query-shared-switch"
+            class="crud-saved-query-save-dialog__shared-switch"
             v-model="form.shared"
             :label="te('crud.savedQueries.shared') ? t('crud.savedQueries.shared') : 'Shared'"
             color="primary"
             hide-details
         />
       </v-card-text>
-      <v-card-actions>
+      <v-card-actions id="crud-saved-query-save-actions" class="crud-saved-query-save-dialog__actions">
         <v-spacer />
-        <v-btn variant="text" @click="saveDialog = false">
+        <v-btn id="crud-saved-query-save-cancel-button" class="crud-saved-query-save-dialog__cancel-button" variant="text" @click="saveDialog = false">
           {{ te('action.cancel') ? t('action.cancel') : 'Cancel' }}
         </v-btn>
         <v-btn
+            id="crud-saved-query-save-submit-button"
+            class="crud-saved-query-save-dialog__submit-button"
             color="primary"
             variant="flat"
             :loading="saving"
@@ -321,18 +337,20 @@ function onMenuUpdate(value: boolean) {
     </v-card>
   </v-dialog>
 
-  <v-dialog v-model="deleteDialog" max-width="460">
-    <v-card>
-      <v-card-title>{{ deleteTitle }}</v-card-title>
-      <v-card-text>
+  <v-dialog id="crud-saved-query-delete-dialog" class="crud-saved-query-delete-dialog" v-model="deleteDialog" max-width="460">
+    <v-card id="crud-saved-query-delete-card" class="crud-saved-query-delete-dialog__card">
+      <v-card-title id="crud-saved-query-delete-title" class="crud-saved-query-delete-dialog__title">{{ deleteTitle }}</v-card-title>
+      <v-card-text id="crud-saved-query-delete-content" class="crud-saved-query-delete-dialog__content">
         {{ deleteConfirmText }}
       </v-card-text>
-      <v-card-actions>
+      <v-card-actions id="crud-saved-query-delete-actions" class="crud-saved-query-delete-dialog__actions">
         <v-spacer />
-        <v-btn variant="text" @click="deleteDialog = false">
+        <v-btn id="crud-saved-query-delete-cancel-button" class="crud-saved-query-delete-dialog__cancel-button" variant="text" @click="deleteDialog = false">
           {{ te('action.cancel') ? t('action.cancel') : 'Cancel' }}
         </v-btn>
         <v-btn
+            id="crud-saved-query-delete-confirm-button"
+            class="crud-saved-query-delete-dialog__confirm-button"
             color="red"
             variant="flat"
             :loading="deleting"

package/src/components/buttons/CrudUpdateButton.vue

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

package/src/components/buttons/CrudViewButton.vue

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

package/src/components/combobox/EntityCombobox.vue

@@ -17,6 +17,8 @@ const getEntityLabel = (entity: IEntityCrud) => {
 <template>
 
   <v-select
+  id="entity-combobox"
+  class="entity-combobox"
   :items="entityStore.entities"
   item-value="name"
   v-model="valueModel"
@@ -28,6 +30,8 @@ const getEntityLabel = (entity: IEntityCrud) => {
     <template v-slot:item="{ props: itemProps, item }">
       <v-list-item
           v-bind="itemProps"
+          :id="`entity-combobox-item-${(item.raw as IEntityCrud).name}`"
+          class="entity-combobox__item"
           density="compact"
           :title="getEntityLabel(item.raw as IEntityCrud)"