@drax/crud-vue 3.46.0 → 3.48.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

@@ -3,6 +3,7 @@ import type {PropType} from "vue";
 import {computed} from "vue";
 import {useI18n} from "vue-i18n";
 import type {IEntityCrud} from "@drax/crud-share";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 
 const expanded = defineModel<boolean>({default: false})
 
@@ -11,6 +12,7 @@ defineProps({
 })
 
 const {t, te} = useI18n()
+const buttonConfig = useCrudButtonConfig("ai")
 
 const tooltip = computed(() => {
   return te('action.aiAssist') ? t('action.aiAssist') : 'Asistencia IA'
@@ -22,13 +24,16 @@ 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"
-          variant="text"
+          :icon="buttonConfig.icon"
+          :id="$attrs.id || 'crud-ai-button'"
+          class="crud-ai-button mr-1"
+          :variant="buttonConfig.variant"
+          :rounded="buttonConfig.rounded"
+          :color="buttonConfig.color"
           @click="toggleExpanded"
       />
     </template>

package/src/components/buttons/CrudColumnsButton.vue

@@ -3,8 +3,10 @@ import type { PropType } from 'vue'
 import type { IEntityCrud } from '@drax/crud-share'
 import { useI18n } from 'vue-i18n'
 import { useCrudColumns } from '../../composables/UseCrudColumns'
+import { useCrudButtonConfig } from '../../config/CrudButtonConfig'
 
 const { t } = useI18n()
+const buttonConfig = useCrudButtonConfig('columns')
 
 const props = defineProps({
   entity: { type: Object as PropType<IEntityCrud>, required: true },
@@ -21,27 +23,33 @@ 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"
+        :variant="buttonConfig.variant"
+        :rounded="buttonConfig.rounded"
+        :color="buttonConfig.color"
       >
-        <v-icon>mdi-view-column</v-icon>
+        <v-icon id="crud-columns-button-icon" class="crud-columns-button__icon">{{ buttonConfig.icon }}</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 +59,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 +77,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

@@ -1,17 +1,22 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 
 const {t} = useI18n()
+const buttonConfig = useCrudButtonConfig("create")
 </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"
-             variant="text"
+             :icon="buttonConfig.icon"
+             :id="$attrs.id || 'crud-create-button'"
+             class="crud-create-button mr-1"
+             :variant="buttonConfig.variant"
+             :rounded="buttonConfig.rounded"
+             :color="buttonConfig.color"
       >
       </v-btn>
     </template>

package/src/components/buttons/CrudCreateOnTheFlyButton.vue

@@ -6,8 +6,10 @@ import CrudForm from "../CrudForm.vue";
 import CrudDialog from "../CrudDialog.vue";
 import {useCrudStore} from "../../stores/UseCrudStore";
 import {useCrud} from "../../composables/UseCrud";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 
 const {t} = useI18n()
+const buttonConfig = useCrudButtonConfig("createOnTheFly")
 
 const dialog = ref(false)
 
@@ -38,13 +40,16 @@ 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"
-             variant="text"
+             :icon="buttonConfig.icon"
+             :id="$attrs.id || 'crud-create-on-the-fly-button'"
+             class="crud-create-on-the-fly-button mr-1"
+             :variant="buttonConfig.variant"
+             :rounded="buttonConfig.rounded"
+             :color="buttonConfig.color"
              @click="openDialog"
       >
       </v-btn>
@@ -53,12 +58,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

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 
 const {t} = useI18n()
+const buttonConfig = useCrudButtonConfig("delete")
 </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"
-          variant="text"
-          color="red"
+          :icon="buttonConfig.icon"
+          :id="$attrs.id || 'crud-delete-button'"
+          class="crud-delete-button mr-1"
+          :variant="buttonConfig.variant"
+          :rounded="buttonConfig.rounded"
+          :color="buttonConfig.color"
       >
       </v-btn>
     </template>

package/src/components/buttons/CrudDialogNextButton.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
+
+defineOptions({inheritAttrs: false})
+
+const buttonConfig = useCrudButtonConfig("dialogNext")
+</script>
+
+<template>
+  <v-btn
+      v-bind="$attrs"
+      :id="$attrs.id || 'crud-dialog-next-button'"
+      class="crud-dialog-next-button"
+      :icon="buttonConfig.icon"
+      :variant="buttonConfig.variant"
+      :rounded="buttonConfig.rounded"
+      :color="buttonConfig.color"
+  />
+</template>

package/src/components/buttons/CrudDialogPrevButton.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
+
+defineOptions({inheritAttrs: false})
+
+const buttonConfig = useCrudButtonConfig("dialogPrev")
+</script>
+
+<template>
+  <v-btn
+      v-bind="$attrs"
+      :id="$attrs.id || 'crud-dialog-prev-button'"
+      class="crud-dialog-prev-button"
+      :icon="buttonConfig.icon"
+      :variant="buttonConfig.variant"
+      :rounded="buttonConfig.rounded"
+      :color="buttonConfig.color"
+  />
+</template>

package/src/components/buttons/CrudExportButton.vue

@@ -3,8 +3,10 @@ import type {PropType} from "vue";
 import type {IEntityCrud} from "@drax/crud-share"
 import {useCrud} from "../../composables/UseCrud";
 import {useI18n} from "vue-i18n";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 
 const {t} = useI18n()
+const buttonConfig = useCrudButtonConfig("export")
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
@@ -16,26 +18,29 @@ 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"
-              variant="text"
+              id="crud-export-button"
+              class="crud-export-button mr-1"
+              :variant="buttonConfig.variant"
+              :rounded="buttonConfig.rounded"
+              :color="buttonConfig.color"
               :loading="exportLoading"
-              icon="mdi-database-export-outline"
+              :icon="buttonConfig.icon"
           ></v-btn>
         </template>
         {{ t('action.export')}}
       </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

@@ -4,6 +4,7 @@ import {computed} from "vue";
 import type {PropType} from "vue";
 import type {IEntityCrud} from "@drax/crud-share";
 import {useCrudStore} from "../../stores/UseCrudStore";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
@@ -17,17 +18,21 @@ let dynamicFiltersEnable = computed({
 })
 
 const {t} = useI18n()
+const buttonConfig = useCrudButtonConfig("filter")
 </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"
-            variant="text"
+            :icon="dynamicFiltersEnable ? buttonConfig.activeIcon : buttonConfig.icon"
+            id="crud-filter-button"
+            class="crud-filter-button mr-1"
+            :variant="buttonConfig.variant"
+            :rounded="buttonConfig.rounded"
+            :color="buttonConfig.color"
             @click="dynamicFiltersEnable = !dynamicFiltersEnable"
         >
         </v-btn>