@drax/crud-vue 3.47.0 → 3.48.0

package/package.json

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

package/src/components/Crud.vue

@@ -9,6 +9,9 @@ import CrudRouteForm from "./CrudRouteForm.vue";
 import CrudNotify from "./CrudNotify.vue";
 import CrudDialog from "./CrudDialog.vue";
 import CrudAiButton from "./buttons/CrudAiButton.vue";
+import CrudDialogNextButton from "./buttons/CrudDialogNextButton.vue";
+import CrudDialogPrevButton from "./buttons/CrudDialogPrevButton.vue";
+import CrudOpenRouteFormButton from "./buttons/CrudOpenRouteFormButton.vue";
 import CrudAi from "./CrudAi.vue";
 import {useCrud} from "../composables/UseCrud";
 import {useDisplay} from 'vuetify'
@@ -240,31 +243,25 @@ watch(dialog, (value) => {
         :operation="operation"
     >
       <template #toolbar-actions>
-        <v-btn
+        <crud-open-route-form-button
             v-if="canOpenRouteCrudForm"
             id="crud-open-route-form-button"
             class="crud__open-route-form-button"
-            icon="mdi-open-in-new"
-            variant="text"
             @click="openRouteCrudForm"
         />
 
-        <v-btn
+        <crud-dialog-prev-button
             v-if="canNavigateItems"
             id="crud-dialog-prev-button"
             class="crud__dialog-prev-button"
-            icon="mdi-chevron-left"
-            variant="text"
             :disabled="!canNavigatePrev"
             @click="navigateView(-1)"
         />
 
-        <v-btn
+        <crud-dialog-next-button
             v-if="canNavigateItems"
             id="crud-dialog-next-button"
             class="crud__dialog-next-button"
-            icon="mdi-chevron-right"
-            variant="text"
             :disabled="!canNavigateNext"
             @click="navigateView(1)"
         />

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'
@@ -26,10 +28,12 @@ function toggleExpanded() {
     <template v-slot:activator="{ props }">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
-          icon="mdi-robot-outline"
+          :icon="buttonConfig.icon"
           :id="$attrs.id || 'crud-ai-button'"
           class="crud-ai-button mr-1"
-          variant="text"
+          :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 },
@@ -28,9 +30,11 @@ const {
         id="crud-columns-button"
         class="crud-columns-button"
         icon
-        variant="text"
+        :variant="buttonConfig.variant"
+        :rounded="buttonConfig.rounded"
+        :color="buttonConfig.color"
       >
-        <v-icon id="crud-columns-button-icon" class="crud-columns-button__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>

package/src/components/buttons/CrudCreateButton.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 
 const {t} = useI18n()
+const buttonConfig = useCrudButtonConfig("create")
 </script>
 
 <template>
@@ -9,10 +11,12 @@ const {t} = useI18n()
     <template v-slot:activator="{ props }">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
-             icon="mdi-plus"
+             :icon="buttonConfig.icon"
              :id="$attrs.id || 'crud-create-button'"
              class="crud-create-button mr-1"
-             variant="text"
+             :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)
 
@@ -42,10 +44,12 @@ const emit = defineEmits(['created'])
     <template v-slot:activator="{ props }">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
-             icon="mdi-plus"
+             :icon="buttonConfig.icon"
              :id="$attrs.id || 'crud-create-on-the-fly-button'"
              class="crud-create-on-the-fly-button mr-1"
-             variant="text"
+             :variant="buttonConfig.variant"
+             :rounded="buttonConfig.rounded"
+             :color="buttonConfig.color"
              @click="openDialog"
       >
       </v-btn>

package/src/components/buttons/CrudDeleteButton.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 
 const {t} = useI18n()
+const buttonConfig = useCrudButtonConfig("delete")
 </script>
 
 <template>
@@ -9,11 +11,12 @@ const {t} = useI18n()
     <template v-slot:activator="{ props}">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
-          icon="mdi-delete"
+          :icon="buttonConfig.icon"
           :id="$attrs.id || 'crud-delete-button'"
           class="crud-delete-button mr-1"
-          variant="text"
-          color="red"
+          :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},
@@ -25,9 +27,11 @@ const {
               :disabled="exportLoading"
               id="crud-export-button"
               class="crud-export-button mr-1"
-              variant="text"
+              :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')}}

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,6 +18,7 @@ let dynamicFiltersEnable = computed({
 })
 
 const {t} = useI18n()
+const buttonConfig = useCrudButtonConfig("filter")
 </script>
 
 <template>
@@ -25,10 +27,12 @@ const {t} = useI18n()
       <template v-slot:activator="{ props }">
         <v-btn
             v-bind="{ ...$attrs, ...props }"
-            :icon="dynamicFiltersEnable ? 'mdi-filter-off' : 'mdi-filter' "
+            :icon="dynamicFiltersEnable ? buttonConfig.activeIcon : buttonConfig.icon"
             id="crud-filter-button"
             class="crud-filter-button mr-1"
-            variant="text"
+            :variant="buttonConfig.variant"
+            :rounded="buttonConfig.rounded"
+            :color="buttonConfig.color"
             @click="dynamicFiltersEnable = !dynamicFiltersEnable"
         >
         </v-btn>

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()
 
@@ -69,12 +71,14 @@ const totalCount = computed(() => {
   <div id="crud-group-by-wrapper" class="crud-group-by-wrapper">
     <v-btn
       id="crud-group-by-button"
-      class="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 id="crud-group-by-button-icon" class="crud-group-by-button__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>

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},
 })
@@ -55,9 +57,11 @@ function onFileChange(event: Event) {
               :disabled="importLoading"
               id="crud-import-button"
               class="crud-import-button mr-1"
-              variant="text"
+              :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')}}

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,7 +1,9 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 
 const {t} = useI18n()
+const buttonConfig = useCrudButtonConfig("refresh")
 </script>
 
 <template>
@@ -9,10 +11,12 @@ const {t} = useI18n()
     <template v-slot:activator="{ props }">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
-          icon="mdi-refresh"
+          :icon="buttonConfig.icon"
           :id="$attrs.id || 'crud-refresh-button'"
           class="crud-refresh-button mr-1"
-          variant="text"
+          :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},
@@ -227,11 +229,13 @@ function onMenuUpdate(value: boolean) {
       <v-btn
           v-bind="activatorProps"
           id="crud-saved-queries-button"
-          class="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 id="crud-saved-queries-button-icon" class="crud-saved-queries-button__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>

package/src/components/buttons/CrudUpdateButton.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 const {t} = useI18n()
+const buttonConfig = useCrudButtonConfig("update")
 </script>
 
 <template>
@@ -8,11 +10,12 @@ const {t} = useI18n()
     <template v-slot:activator="{ props}">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
-          icon="mdi-pencil"
+          :icon="buttonConfig.icon"
           :id="$attrs.id || 'crud-update-button'"
           class="crud-update-button mr-1"
-          variant="text"
-          color="blue"
+          :variant="buttonConfig.variant"
+          :rounded="buttonConfig.rounded"
+          :color="buttonConfig.color"
           slim
       >
       </v-btn>

package/src/components/buttons/CrudViewButton.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
+import {useCrudButtonConfig} from "../../config/CrudButtonConfig";
 const {t} = useI18n()
+const buttonConfig = useCrudButtonConfig("view")
 </script>
 
 <template>
@@ -8,11 +10,12 @@ const {t} = useI18n()
     <template v-slot:activator="{ props}">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
-          icon="mdi-magnify"
+          :icon="buttonConfig.icon"
           :id="$attrs.id || 'crud-view-button'"
           class="crud-view-button mr-1"
-          variant="text"
-          color="teal"
+          :variant="buttonConfig.variant"
+          :rounded="buttonConfig.rounded"
+          :color="buttonConfig.color"
           slim
       >
       </v-btn>

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() {

package/src/index.ts

@@ -16,6 +16,9 @@ import CrudNotify from "./components/CrudNotify.vue";
 import CrudSearch from "./components/CrudSearch.vue";
 import CrudAutocomplete from "./components/CrudAutocomplete.vue";
 import CrudRefDisplay from "./components/CrudRefDisplay.vue";
+import CrudDialogNextButton from "./components/buttons/CrudDialogNextButton.vue";
+import CrudDialogPrevButton from "./components/buttons/CrudDialogPrevButton.vue";
+import CrudOpenRouteFormButton from "./components/buttons/CrudOpenRouteFormButton.vue";
 import CrudSavedQueriesButton from "./components/buttons/CrudSavedQueriesButton.vue";
 import CrudRefreshButton from "./components/buttons/CrudRefreshButton.vue";
 import EntityCombobox from "./components/combobox/EntityCombobox.vue";
@@ -28,6 +31,20 @@ import {useFilterIcon} from "./composables/UseFilterIcon";
 import {useFormUtils} from "./composables/UseFormUtils";
 import {useInputErrorI18n} from "./composables/UseInputErrorI18n";
 import {EntityCrud} from "./cruds/EntityCrud";
+import {
+    configureCrudButtons,
+    crudButtonDefaultStyles,
+    crudButtonsConfig,
+    getCrudButtonConfig,
+    resetCrudButtonsConfig,
+    useCrudButtonConfig,
+    type CrudButtonName,
+    type CrudButtonGlobalStyle,
+    type CrudButtonRounded,
+    type CrudButtonStyle,
+    type CrudButtonVariant,
+    type CrudButtonsConfig
+} from "./config/CrudButtonConfig";
 
 
 export {
@@ -46,6 +63,9 @@ export {
     CrudSearch,
     CrudAutocomplete,
     CrudRefDisplay,
+    CrudDialogNextButton,
+    CrudDialogPrevButton,
+    CrudOpenRouteFormButton,
     CrudSavedQueriesButton,
     CrudRefreshButton,
     CrudFilters,
@@ -58,8 +78,20 @@ export {
     useInputErrorI18n,
     useFilterIcon,
     useCrudRefDisplay,
+    configureCrudButtons,
+    resetCrudButtonsConfig,
+    getCrudButtonConfig,
+    useCrudButtonConfig,
+    crudButtonDefaultStyles,
+    crudButtonsConfig,
     EntityCrud,
     useEntityStore,
-    EntityCombobox
+    EntityCombobox,
+    type CrudButtonName,
+    type CrudButtonGlobalStyle,
+    type CrudButtonRounded,
+    type CrudButtonStyle,
+    type CrudButtonVariant,
+    type CrudButtonsConfig
 
 }