@drax/crud-vue 3.46.0 → 3.48.0

package/src/components/buttons/CrudGroupByButton.vue

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

package/src/components/buttons/CrudImportButton.vue

@@ -4,8 +4,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("import")
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
 })
@@ -37,33 +39,37 @@ 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"
-              variant="text"
+              id="crud-import-button"
+              class="crud-import-button mr-1"
+              :variant="buttonConfig.variant"
+              :rounded="buttonConfig.rounded"
+              :color="buttonConfig.color"
               :loading="importLoading"
-              icon="mdi-database-import-outline"
+              :icon="buttonConfig.icon"
           ></v-btn>
         </template>
         {{ 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/CrudOpenRouteFormButton.vue

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

package/src/components/buttons/CrudRefreshButton.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("refresh")
 </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"
-          variant="text"
+          :icon="buttonConfig.icon"
+          :id="$attrs.id || 'crud-refresh-button'"
+          class="crud-refresh-button mr-1"
+          :variant="buttonConfig.variant"
+          :rounded="buttonConfig.rounded"
+          :color="buttonConfig.color"
       >
       </v-btn>
     </template>

package/src/components/buttons/CrudSavedQueriesButton.vue

@@ -8,10 +8,12 @@ import {useCrudColumns} from "../../composables/UseCrudColumns";
 import {CrudSavedQueryProvider} from "@drax/crud-front";
 import {useAuth, useAuthStore} from "@drax/identity-vue";
 import {createCrudFilterValue} from "../../helpers/CrudRangeFilters";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 
 const {t, te} = useI18n();
 const {hasPermission} = useAuth();
 const authStore = useAuthStore();
+const buttonConfig = useCrudButtonConfig("savedQueries");
 
 const props = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
@@ -216,6 +218,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 +228,27 @@ function onMenuUpdate(value: boolean) {
     <template #activator="{ props: activatorProps }">
       <v-btn
           v-bind="activatorProps"
+          id="crud-saved-queries-button"
+          class="crud-saved-queries-button mr-1"
           icon
-          variant="text"
+          :variant="buttonConfig.variant"
+          :rounded="buttonConfig.rounded"
+          :color="buttonConfig.color"
       >
-        <v-icon>mdi-content-save-cog</v-icon>
+        <v-icon id="crud-saved-queries-button-icon" class="crud-saved-queries-button__icon">{{ buttonConfig.icon }}</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 +259,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 +281,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 +299,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 +313,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 +341,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

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

package/src/components/buttons/CrudViewButton.vue

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

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)"
 

package/src/config/CrudButtonConfig.ts

@@ -0,0 +1,104 @@
+import {computed, reactive} from "vue";
+
+export type CrudButtonName =
+    "ai"
+    | "columns"
+    | "create"
+    | "createOnTheFly"
+    | "delete"
+    | "dialogNext"
+    | "dialogPrev"
+    | "export"
+    | "filter"
+    | "groupBy"
+    | "import"
+    | "openRouteForm"
+    | "refresh"
+    | "savedQueries"
+    | "update"
+    | "view";
+
+export type CrudButtonRounded = boolean | string | number;
+export type CrudButtonVariant = "flat" | "text" | "elevated" | "outlined" | "plain" | "tonal";
+
+export interface CrudButtonStyle {
+    icon?: string;
+    activeIcon?: string;
+    variant?: CrudButtonVariant;
+    rounded?: CrudButtonRounded;
+    color?: string;
+}
+
+export type CrudButtonGlobalStyle = Pick<CrudButtonStyle, "variant" | "rounded" | "color">;
+
+export type CrudButtonsConfig = {
+    defaults?: CrudButtonGlobalStyle;
+    buttons?: Partial<Record<CrudButtonName, CrudButtonStyle>>;
+};
+
+const crudButtonDefaultStyles: Record<CrudButtonName, CrudButtonStyle> = {
+    ai: {icon: "mdi-robot-outline", variant: "text"},
+    columns: {icon: "mdi-view-column", variant: "text"},
+    create: {icon: "mdi-plus", variant: "text"},
+    createOnTheFly: {icon: "mdi-plus", variant: "text"},
+    delete: {icon: "mdi-delete", variant: "text", color: "red"},
+    dialogNext: {icon: "mdi-chevron-right", variant: "text"},
+    dialogPrev: {icon: "mdi-chevron-left", variant: "text"},
+    export: {icon: "mdi-database-export-outline", variant: "text"},
+    filter: {icon: "mdi-filter", activeIcon: "mdi-filter-off", variant: "text"},
+    groupBy: {icon: "mdi-chart-bar", variant: "text"},
+    import: {icon: "mdi-database-import-outline", variant: "text"},
+    openRouteForm: {icon: "mdi-open-in-new", variant: "text"},
+    refresh: {icon: "mdi-refresh", variant: "text"},
+    savedQueries: {icon: "mdi-content-save-cog", variant: "text"},
+    update: {icon: "mdi-pencil", variant: "text", color: "blue"},
+    view: {icon: "mdi-magnify", variant: "text", color: "teal"},
+};
+
+const crudButtonsConfig = reactive<Required<CrudButtonsConfig>>({
+    defaults: {},
+    buttons: {},
+});
+
+export function configureCrudButtons(config: CrudButtonsConfig) {
+    if (config.defaults) {
+        Object.assign(crudButtonsConfig.defaults, config.defaults);
+    }
+
+    if (config.buttons) {
+        Object.entries(config.buttons).forEach(([buttonName, buttonConfig]) => {
+            if (!buttonConfig) {
+                return;
+            }
+
+            const key = buttonName as CrudButtonName;
+            crudButtonsConfig.buttons[key] = {
+                ...(crudButtonsConfig.buttons[key] || {}),
+                ...buttonConfig,
+            };
+        });
+    }
+}
+
+export function resetCrudButtonsConfig() {
+    Object.keys(crudButtonsConfig.defaults).forEach((key) => {
+        delete crudButtonsConfig.defaults[key as keyof CrudButtonGlobalStyle];
+    });
+    Object.keys(crudButtonsConfig.buttons).forEach((key) => {
+        delete crudButtonsConfig.buttons[key as CrudButtonName];
+    });
+}
+
+export function getCrudButtonConfig(buttonName: CrudButtonName): CrudButtonStyle {
+    return {
+        ...crudButtonDefaultStyles[buttonName],
+        ...crudButtonsConfig.defaults,
+        ...(crudButtonsConfig.buttons[buttonName] || {}),
+    };
+}
+
+export function useCrudButtonConfig(buttonName: CrudButtonName) {
+    return computed(() => getCrudButtonConfig(buttonName));
+}
+
+export {crudButtonDefaultStyles, crudButtonsConfig};

package/src/cruds/EntityCrud.ts

@@ -287,24 +287,24 @@ class EntityCrud implements IEntityCrud {
     return false
   }
 
-  get cardDensity(): 'default' | 'comfortable' | 'compact' {
-    return 'default'
+  get cardDensity(): 'default' | 'comfortable' | 'compact' | undefined {
+    return undefined
   }
 
   get cardClass(): string {
-    return 'rounded-xl'
+    return ''
   }
 
-  get toolbarDensity(): 'default' | 'comfortable' | 'compact' {
-    return 'default'
+  get toolbarDensity(): 'default' | 'comfortable' | 'compact' | undefined  {
+    return undefined
   }
 
   get toolbarClass(): string {
     return 'bg-primary'
   }
 
-  get tableDensity(): 'default' | 'comfortable' | 'compact' {
-    return 'default'
+  get tableDensity(): 'default' | 'comfortable' | 'compact' | undefined  {
+    return undefined
   }
 
   get headerProps() {