@drax/crud-vue 2.7.0 → 2.8.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.7.0",
+  "version": "2.8.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,9 +24,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^2.6.0",
+    "@drax/common-front": "^2.8.0",
     "@drax/crud-front": "^2.0.0",
-    "@drax/crud-share": "^2.4.0",
+    "@drax/crud-share": "^2.8.0",
     "@drax/media-vue": "^2.2.1"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "6914eb5bfd532fb5e510b95c7d17b5b2ada8b07d"
+  "gitHead": "3adeb31ee60eb83c92137dc28162f9226cab06c1"
 }

package/src/EntityCrud.ts

@@ -1,10 +1,11 @@
 import type {
   IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
   IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
-  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFormFilter, IEntityCrudFieldVariant
+  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFieldVariant, IDraxFieldFilter
 } from "@drax/crud-share";
 
 
+
 class EntityCrud implements IEntityCrud {
 
   name: string = ''
@@ -125,11 +126,11 @@ class EntityCrud implements IEntityCrud {
   }
 
 
-  get formFilters(): IEntityCrudFormFilter[] {
+  get formFilters(): IDraxFieldFilter[] {
     return this.filters.map(
       (filter: IEntityCrudFilter) =>
         ({field: filter.name, value: filter.default ? filter.default : null, operator: (filter.operator ? filter.operator : 'eq')})
-    ) as IEntityCrudFormFilter[]
+    ) as IDraxFieldFilter[]
   }
 
   get refs(): IEntityCrudRefs {
@@ -138,7 +139,7 @@ class EntityCrud implements IEntityCrud {
 
   getRef(ref: string): IEntityCrud {
     if (!this.refs.hasOwnProperty(ref)) {
-      throw new Error("Ref not found: " + ref)
+      throw new Error("Ref not found: " + ref + " Refs Available: " + Object.getOwnPropertyNames(this.refs).join(", "))
     }
 
     return this.refs[ref] as IEntityCrud
@@ -238,6 +239,14 @@ class EntityCrud implements IEntityCrud {
     return true
   }
 
+   get filtersEnable(){
+    return true
+  }
+
+  get dynamicFiltersEnable(){
+    return true
+  }
+
   get filterButtons() {
     return true
   }

package/src/components/Crud.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import {onBeforeMount, type PropType} from "vue";
+import {computed, onBeforeMount, type PropType} from "vue";
 import type {IEntityCrud} from "@drax/crud-share";
-import CrudList from "./CrudList.vue";
+import CrudListTable from "./CrudListTable.vue";
+import CrudListGallery from "./CrudListGallery.vue";
 import CrudForm from "./CrudForm.vue";
 import CrudNotify from "./CrudNotify.vue";
 import CrudDialog from "./CrudDialog.vue";
 import {useCrud} from "../composables/UseCrud";
+import {useDisplay} from 'vuetify'
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
@@ -24,6 +26,22 @@ onBeforeMount(() => {
 
 const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled'])
 
+const listComponent = computed(() => {
+  const listMode = entity?.listMode
+  switch (listMode){
+    case 'responsive':
+      return xs.value ? CrudListGallery : CrudListTable
+    case 'gallery':
+      return CrudListGallery
+    case 'table':
+      return CrudListTable
+    default:
+      return xs.value ? CrudListGallery : CrudListTable
+  }
+})
+
+const {xs} = useDisplay()
+
 
 </script>
 
@@ -31,7 +49,8 @@ const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled']
   <v-container :fluid="entity.containerFluid" class="mt-5">
     <v-card :class="entity.cardClass" :density="entity.cardDensity">
 
-      <crud-list
+      <component
+          :is="listComponent"
           :entity="entity"
           @create="onCreate"
           @edit="onEdit"
@@ -66,13 +85,18 @@ const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled']
           </slot>
         </template>
 
+        <template  v-slot:item="{item}">
+          <slot name="item" v-bind="{item}">
+          </slot>
+        </template>
+
 
         <template v-slot:item.actions="{item}">
           <slot name="item.actions" v-bind="{item}">
           </slot>
         </template>
 
-      </crud-list>
+      </component>
     </v-card>
 
     <crud-dialog

package/src/components/CrudActiveFilters.vue

@@ -3,7 +3,7 @@ import { computed,  type PropType } from 'vue'
 import type { IEntityCrud } from '@drax/crud-share'
 import { useCrudStore } from '../stores/UseCrudStore'
 import { useI18n } from 'vue-i18n'
-import { useFilterIcon } from '../composables/useFilterIcon'
+import { useFilterIcon } from '../composables/UseFilterIcon'
 import CrudRefDisplay from "./CrudRefDisplay.vue";
 import {formatDate} from "@drax/common-front"
 
@@ -92,7 +92,7 @@ const removeFilter = (index: number) => {
   const filterDef = props.entity.filters[index]
 
   // Resetear al valor por defecto
-  filter.value = filterDef.default
+  filter.value = filterDef?.default
 
   // Emitir evento para aplicar filtros
   emit('filterRemoved')

package/src/components/CrudAutocomplete.vue

@@ -146,14 +146,14 @@ defineEmits(['updateValue'])
           :title="item.raw[itemTitle]"
           :color="item.raw?.color"
           :base-color="item.raw?.color"
-          :prepend-icon="item.raw?.icon"
+          :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       />
     </template>
 
     <template v-slot:selection="{item}">
       <v-chip tile density="compact"
               :color="item.raw?.color"
-              :prepend-icon="item.raw?.icon"
+              :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       >
         {{ item.raw[itemTitle] }}
       </v-chip>
@@ -203,14 +203,14 @@ defineEmits(['updateValue'])
           :title="item.raw[itemTitle]"
           :color="item.raw?.color"
           :base-color="item.raw?.color"
-          :prepend-icon="item.raw?.icon"
+          :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       />
     </template>
 
     <template v-slot:selection="{item}">
       <v-chip tile density="compact"
               :color="item.raw?.color"
-              :prepend-icon="item.raw?.icon"
+              :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       >
         {{ item.raw[itemTitle] }}
       </v-chip>

package/src/components/CrudFilters.vue

@@ -2,18 +2,16 @@
 import {computed, type PropType} from "vue";
 import CrudFormField from "./CrudFormField.vue";
 import type {IEntityCrud, IEntityCrudFilter} from "@drax/crud-share";
-import {useI18n} from "vue-i18n";
 import {useAuth} from "@drax/identity-vue";
-import {useFilterIcon} from "../composables/useFilterIcon";
+import {useFilterIcon} from "../composables/UseFilterIcon";
 
-const {t} = useI18n()
 const valueModel = defineModel({type: [Object]})
 const {hasPermission} = useAuth()
 const {filterIcon} = useFilterIcon()
 
-const {entity, actionButtons} = defineProps({
+const {entity, autoFilter} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  actionButtons: {type: Boolean, default: false},
+  autoFilter: {type: Boolean, default: false}
 })
 
 const aFields = computed(() => {
@@ -24,13 +22,15 @@ function filter() {
   emit('applyFilter')
 }
 
+/*
 function clear() {
   emit('clearFilter')
 }
+*/
 
 function onUpdateValue(){
-  if(!actionButtons){
-    emit('applyFilter')
+  if(autoFilter){
+    filter()
   }
 }
 
@@ -69,14 +69,6 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
 
         </v-row>
 
-    <v-card-actions v-if="actionButtons" class="pb-0">
-      <v-spacer />
-      <v-btn  variant="text" density="compact" :class="entity.cleanFilterClass" @click="clear">{{ t('action.clear') }}</v-btn>
-      <v-btn variant="flat" density="compact" :class="entity.applyFilterClass"  @click="filter">
-        {{ t('action.filter') }}
-      </v-btn>
-    </v-card-actions>
-
   </v-card>
 </template>
 

package/src/components/CrudFiltersAction.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+import type {PropType} from "vue";
+import type {IEntityCrud} from "@drax/crud-share";
+const {t} = useI18n()
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+})
+
+function filter() {
+  emit('applyFilter')
+}
+
+function clear() {
+  emit('clearFilter')
+}
+
+const emit = defineEmits(['applyFilter', 'clearFilter'])
+
+</script>
+
+<template>
+
+    <v-card-actions  class="pb-0">
+      <v-spacer />
+      <v-btn  variant="text" density="compact" :class="entity.cleanFilterClass" @click="clear">{{ t('action.clear') }}</v-btn>
+      <v-btn variant="flat" density="compact" :class="entity.applyFilterClass"  @click="filter">
+        {{ t('action.filter') }}
+      </v-btn>
+    </v-card-actions>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudFiltersDynamic.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import {computed, type PropType} from "vue";
+import CrudFormField from "./CrudFormField.vue";
+import type {IEntityCrud, IEntityCrudFilter} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
+import {useAuth} from "@drax/identity-vue";
+import {useFilterIcon} from "../composables/UseFilterIcon";
+import {useCrudStore} from "../stores/UseCrudStore";
+import {useEntityStore} from "../stores/UseEntityStore";
+
+const {t, te} = useI18n()
+const valueModel = defineModel({type: [Object]})
+const {hasPermission} = useAuth()
+const {filterIcon} = useFilterIcon()
+
+
+const {entity, autoFilter} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+  autoFilter: {type: Boolean, default: false}
+})
+
+const store = useCrudStore(entity?.name)
+const entityStore = useEntityStore();
+const storeEntity = entityStore.entities.find((e: any) => e.name === entity.name)
+
+const aFields = computed(() => {
+  return store.dynamicFilters
+      .filter((field: IEntityCrudFilter) => !field.permission || hasPermission(field.permission))
+})
+
+const dynamicFilter = computed(() => {
+  return (index: string | number) => {
+    return store.dynamicFilters[index]
+  }
+})
+
+function filter() {
+  emit('applyFilter')
+}
+
+/*
+function clear() {
+  emit('clearFilter')
+}
+*/
+
+function onUpdateValue() {
+  if (autoFilter) {
+    filter()
+  }
+}
+
+const fieldI18n = computed(() => {
+  return (field: IEntityCrudFilter) => {
+    return te(entity.name.toLowerCase() + ".field." + field.name) ? t(entity.name.toLowerCase() + ".field." + field.name) : field.label
+  }
+})
+
+const selectableFields = computed(() => {
+  return storeEntity ? storeEntity.fields
+      .filter((f: any) => !['fullFile', 'object', 'array.object'].includes(f.type))
+      .map((f: any) => ({title: fieldI18n.value(f), value: f.name})) : []
+})
+
+function normalizeFieldType(type: string) :string{
+  if (type === 'array.ref') return 'ref';
+  if (type === 'array.string') return 'string';
+  if (type === 'longString') return 'string';
+  if (type === 'array.number') return 'number';
+  if (type === 'array.enum') return 'enum';
+  return type;
+}
+
+function onUpdateField(index: string | number, val: string){
+
+  const field = storeEntity.fields.find((e: any) => e.name === val)
+  dynamicFilter.value(index).value = null
+
+  if (!field) return
+
+  if(field.ref){
+    dynamicFilter.value(index).ref = field.ref
+  }
+  if(field.refDisplay){
+    dynamicFilter.value(index).refDisplay = field.refDisplay
+  }
+  if(field.enum){
+    dynamicFilter.value(index).enum = field.enum
+  }
+  if(field.type){
+    dynamicFilter.value(index).type = normalizeFieldType(field.type)
+
+    if(field.type === 'boolean'){
+      dynamicFilter.value(index).value = false
+    }
+
+  }
+}
+
+const operations = [
+  {title: t('operation.equals'), value: 'eq'},
+  {title: t('operation.notEquals'), value: 'ne'},
+  {title: t('operation.contains'), value: 'like'},
+  {title: t('operation.greaterThan'), value: 'gt'},
+  {title: t('operation.lessThan'), value: 'lt'},
+  {title: t('operation.greaterThanOrEqual'), value: 'gte'},
+  {title: t('operation.lessThanOrEqual'), value: 'lte'},
+ // {title: t('operation.in'), value: 'in'},
+ // {title: t('operation.notIn'), value: 'nin'},
+]
+
+function removeFilter(index: string | number){
+  store.removeDynamicFilter(index)
+}
+
+function addFilter() {
+  const filter: IEntityCrudFilter = {
+    default: undefined,
+    label: "",
+    name: '',
+    operator: 'eq',
+    type: 'string',
+    permission: '',
+    value: ''
+  }
+  store.addDynamicFilter(filter)
+}
+
+
+const emit = defineEmits(['applyFilter', 'clearFilter'])
+
+</script>
+
+<template>
+  <v-row dense class="mt-4">
+    <v-col v-for="(filter,index) in aFields"
+           :key="filter.name"
+           cols="12" class="tdash"
+    >
+      <v-row >
+        <v-col cols="12" sm="4">
+          <v-select
+              :items="selectableFields"
+              v-model="dynamicFilter(index).name"
+              :label="t('crud.field')"
+              density="compact"
+              variant="outlined"
+              hide-details
+              @update:modelValue="(v:string) => onUpdateField(index, v)"
+          />
+        </v-col>
+        <v-col cols="12" sm="3">
+          <v-select
+              :items="operations"
+              v-model="dynamicFilter(index).operator"
+              :label="t('crud.operator')"
+              density="compact"
+              variant="outlined"
+              hide-details
+          />
+        </v-col>
+        <v-col cols="10" sm="4">
+          <crud-form-field
+              :field="filter"
+              :entity="entity"
+              v-model="dynamicFilter(index).value"
+              :clearable="true"
+              density="compact"
+              variant="outlined"
+              :prepend-inner-icon="filterIcon(filter)"
+              hide-details
+              @updateValue="onUpdateValue"
+          />
+        </v-col>
+        <v-col cols="2" sm="1">
+          <v-btn @click="removeFilter(index)"
+                 icon="mdi-delete"
+                 class="mr-1"
+                 variant="text"
+                 color="red"
+          >
+          </v-btn>
+        </v-col>
+      </v-row>
+
+
+    </v-col>
+
+    <v-col cols="12">
+      <v-btn size="small" variant="outlined" color="primary" @click="addFilter">+ {{ t('action.addFilter') }}</v-btn>
+    </v-col>
+
+  </v-row>
+
+</template>
+
+<style scoped>
+.tdash{
+  border-bottom-width: 0.5px;
+  border-bottom-color: lightgray;
+  border-bottom-style: dashed;
+  margin-bottom: 10px;
+}
+</style>

package/src/components/CrudList.vue

@@ -16,6 +16,8 @@ import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
 import CrudFilters from "./CrudFilters.vue";
 import { useCrudColumns } from "../composables/UseCrudColumns";
+import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
+import CrudFiltersAction from "./CrudFiltersAction.vue";
 
 const {t, te} = useI18n()
 const {hasPermission} = useAuth()
@@ -133,25 +135,45 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
         <v-card-text class="pt-0">
           <slot name="filters" v-bind="{filters}"></slot>
 
-          <crud-filters
-              v-if="!$slots.filters"
-              :entity="entity"
-              v-model="filters"
-              :action-buttons="entity.filterButtons"
-              @clearFilter="clearFilters()"
-              @applyFilter="applyFilters()"
-          >
-
-            <template v-for="iFilter in entity.filters"
-                      :key="iFilter.name"
-                      v-slot:[`filter.${iFilter.name}`]="{filter, filterIndex}"
+          <v-card variant="flat" v-if="!$slots.filters">
+
+            <crud-filters
+                v-if="entity.filtersEnable"
+                :entity="entity"
+                v-model="filters"
+                :auto-filter="!entity.filterButtons"
+                @clearFilter="clearFilters()"
+                @applyFilter="applyFilters()"
+            >
+
+              <template v-for="iFilter in entity.filters"
+                        :key="iFilter.name"
+                        v-slot:[`filter.${iFilter.name}`]="{filter, filterIndex}"
+              >
+                <slot v-if="$slots[`filter.${iFilter.name}`]"
+                      :name="`filter.${iFilter.name}`"
+                      v-bind="{filter, filterIndex}"
+                />
+              </template>
+            </crud-filters>
+
+            <crud-filters-dynamic
+                v-if="entity.dynamicFiltersEnable"
+                :entity="entity"
+                v-model="filters"
+                :auto-filter="!entity.filterButtons"
+                @clearFilter="clearFilters()"
+                @applyFilter="applyFilters()"
             >
-              <slot v-if="$slots[`filter.${iFilter.name}`]"
-                    :name="`filter.${iFilter.name}`"
-                    v-bind="{filter, filterIndex}"
-              />
-            </template>
-          </crud-filters>
+            </crud-filters-dynamic>
+
+            <crud-filters-action v-if="entity.filterButtons"
+                                 :entity="entity"
+                                 @clearFilter="clearFilters()"
+                                 @applyFilter="applyFilters()"
+            ></crud-filters-action>
+          </v-card>
+
         </v-card-text>
 
       </v-card>

package/src/components/CrudListGallery.vue

@@ -0,0 +1,300 @@
+<script setup lang="ts">
+import type {PropType} from 'vue'
+import {onMounted} from 'vue'
+import {useAuth} from '@drax/identity-vue'
+import CrudSearch from "./CrudSearch.vue";
+import {useCrud} from "../composables/UseCrud";
+import CrudExportButton from "./buttons/CrudExportButton.vue";
+import CrudImportButton from "./buttons/CrudImportButton.vue";
+import CrudCreateButton from "./buttons/CrudCreateButton.vue";
+import CrudUpdateButton from "./buttons/CrudUpdateButton.vue";
+import CrudDeleteButton from "./buttons/CrudDeleteButton.vue";
+import CrudViewButton from "./buttons/CrudViewButton.vue";
+import CrudGroupByButton from "./buttons/CrudGroupByButton.vue";
+import CrudColumnsButton from "./buttons/CrudColumnsButton.vue";
+import CrudExportList from "./CrudExportList.vue";
+import type {IEntityCrud} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
+import CrudFilters from "./CrudFilters.vue";
+import {useCrudColumns} from "../composables/UseCrudColumns";
+import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
+import CrudFiltersAction from "./CrudFiltersAction.vue";
+
+const {t, te} = useI18n()
+const {hasPermission} = useAuth()
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+})
+
+const {
+  loading, itemsPerPage, page, search, totalItems, items,
+  doPaginate, filters, applyFilters, clearFilters, paginationError
+} = useCrud(entity)
+
+// Usar el composable de columnas
+const {filteredHeaders} = useCrudColumns(entity)
+
+
+defineExpose({
+  doPaginate
+});
+
+defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
+
+onMounted(() => {
+  doPaginate()
+});
+
+</script>
+
+<template>
+  <div v-if="hasPermission(entity.permissions.view)" class="d-flex flex-column h-100 pb-4">
+    <!-- Toolbar -->
+    <v-toolbar :class="entity.toolbarClass" :density="entity.toolbarDensity">
+      <v-toolbar-title>
+        {{ te(`${entity.name.toLowerCase()}.crud`) ? t(`${entity.name.toLowerCase()}.crud`) : entity.name }}
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+
+      <slot name="toolbar">
+      </slot>
+
+      <crud-import-button
+          :entity="entity"
+          @import="(v:any) => $emit('import', v)"
+      />
+
+      <crud-export-button
+          :entity="entity"
+          @export="(v:any) => $emit('export',v)"
+      />
+
+      <crud-group-by-button
+          v-if="entity.isGroupable"
+          :entity="entity"
+      />
+
+      <crud-columns-button
+          v-if="entity.isColumnSelectable"
+          :entity="entity"
+      />
+
+      <crud-create-button
+          v-if="entity.isCreatable"
+          :entity="entity"
+          @click="$emit('create')"
+      />
+    </v-toolbar>
+
+    <crud-export-list
+        :entity="entity"
+    />
+
+    <v-card variant="flat">
+      <v-card-text v-if="entity.searchEnable">
+        <crud-search
+            v-model="search"
+        />
+      </v-card-text>
+
+      <v-card-text class="pt-0">
+        <slot name="filters" v-bind="{filters}"></slot>
+
+        <v-card variant="flat" v-if="!$slots.filters">
+
+          <crud-filters
+              v-if="entity.filtersEnable"
+              :entity="entity"
+              v-model="filters"
+              :auto-filter="!entity.filterButtons"
+              @clearFilter="clearFilters()"
+              @applyFilter="applyFilters()"
+          >
+
+            <template v-for="iFilter in entity.filters"
+                      :key="iFilter.name"
+                      v-slot:[`filter.${iFilter.name}`]="{filter, filterIndex}"
+            >
+              <slot v-if="$slots[`filter.${iFilter.name}`]"
+                    :name="`filter.${iFilter.name}`"
+                    v-bind="{filter, filterIndex}"
+              />
+            </template>
+          </crud-filters>
+
+          <crud-filters-dynamic
+              v-if="entity.dynamicFiltersEnable"
+              :entity="entity"
+              v-model="filters"
+              :auto-filter="!entity.filterButtons"
+              @clearFilter="clearFilters()"
+              @applyFilter="applyFilters()"
+          >
+          </crud-filters-dynamic>
+
+          <crud-filters-action v-if="entity.filterButtons"
+                               :entity="entity"
+                               @clearFilter="clearFilters()"
+                               @applyFilter="applyFilters()"
+          ></crud-filters-action>
+        </v-card>
+
+      </v-card-text>
+
+    </v-card>
+
+    <v-divider></v-divider>
+
+    <!-- CONTENT GALLERY -->
+    <v-container fluid class="flex-grow-1 position-relative pa-4">
+      <v-overlay :model-value="loading" contained class="align-center justify-center bg-transparent" scrim="transparent"
+                 persistent z-index="4">
+        <v-progress-circular indeterminate color="primary"></v-progress-circular>
+      </v-overlay>
+
+      <v-alert
+          v-if="paginationError"
+          variant="tonal"
+          class="w-100 mb-4"
+          prominent
+          type="error"
+          :text="te(paginationError) ? t(paginationError) : paginationError"
+      />
+      <v-alert v-else-if="!loading && items.length === 0" variant="tonal" class="w-100 mb-4" type="info"
+               :text="te('crud.noData') ? t('crud.noData') : 'No data'"/>
+
+      <!-- GALLERY GRIDS -->
+      <v-row v-if="items.length > 0">
+        <v-col v-for="item in items" :key="item.id || item.uuid || item.name || Math.random()" cols="12" sm="6" md="4"
+               xl="3">
+
+
+            <v-card class="h-100 d-flex flex-column hover-card" elevation="2" border>
+              <slot name="item" v-bind="{item}">
+              <v-card-text class="field-grid">
+                <template v-for="header in filteredHeaders.filter(h => h.key !=='actions')" :key="header.key">
+
+                  <div class="field-label font-weight-regular text-grey-darken-2">
+                    {{
+                      te(`${entity.name.toLowerCase()}.${header.key}`) ? t(`${entity.name.toLowerCase()}.${header.key}`) : (header.title || header.key)
+                    }}
+                  </div>
+
+                  <div class="field-value font-weight-medium">
+                    <slot v-if="$slots[`item.${header.key}`]" :name="`item.${header.key}`"
+                          v-bind="{item, value: item[header.key]}">
+                      {{ item[header.key] }}
+                    </slot>
+                    <template v-else>
+                      {{ item[header.key] }}
+                    </template>
+                  </div>
+
+                </template>
+              </v-card-text>
+              </slot>
+
+              <v-divider></v-divider>
+
+              <v-card-actions class="bg-grey-lighten-4 py-2 px-4 d-flex justify-end flex-wrap gap-2">
+                <slot name="item.actions" v-bind="{item}">
+                </slot>
+
+                <crud-view-button
+                    v-if="entity.isViewable && hasPermission(entity.permissions.view)"
+                    @click="$emit('view', item)"
+                />
+
+                <crud-update-button
+                    v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
+                    @click="$emit('edit', item)"
+                />
+
+                <crud-delete-button
+                    v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
+                    @click="$emit('delete', item)"
+                />
+              </v-card-actions>
+            </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <!-- FOOTER WITH ALIGNED PAGINATION -->
+    <v-divider></v-divider>
+    <div :class="['d-flex align-center justify-space-between flex-wrap px-4 py-3 bg-surface', entity.footerClass]">
+      <div class="d-flex align-center mb-2 mb-sm-0">
+        <span class="text-body-2 mr-2 text-white">{{
+            te('crud.itemsPerPage') ? t('crud.itemsPerPage') : 'Items per page:'
+          }}</span>
+        <v-select
+            v-model="itemsPerPage"
+            :items="[5, 10, 20, 50]"
+            variant="outlined"
+            density="compact"
+            hide-details
+            class="pagination-select"
+            @update:model-value="doPaginate"
+        ></v-select>
+      </div>
+
+      <v-pagination
+          v-model="page"
+          :length="Math.ceil(totalItems / itemsPerPage) || 1"
+          :total-visible="5"
+          density="comfortable"
+          active-color="primary"
+          @update:model-value="doPaginate"
+      ></v-pagination>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hover-card {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.hover-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+
+.pagination-select {
+  width: 90px;
+}
+
+.truncate-label {
+  white-space: nowrap;
+  min-width: fit-content;
+}
+
+.field-grid {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: 14px;
+  row-gap: 8px;
+  align-items: start;
+}
+
+.field-label {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.field-value {
+  text-align: left;
+  word-break: break-word;
+}
+
+.field-label::after {
+  content: ":";
+  margin-left: 6px;
+}
+
+</style>

package/src/components/CrudListTable.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import type {PropType} from 'vue'
+import {useAuth} from '@drax/identity-vue'
+import CrudSearch from "./CrudSearch.vue";
+import {useCrud} from "../composables/UseCrud";
+import CrudExportButton from "./buttons/CrudExportButton.vue";
+import CrudImportButton from "./buttons/CrudImportButton.vue";
+import CrudCreateButton from "./buttons/CrudCreateButton.vue";
+import CrudUpdateButton from "./buttons/CrudUpdateButton.vue";
+import CrudDeleteButton from "./buttons/CrudDeleteButton.vue";
+import CrudViewButton from "./buttons/CrudViewButton.vue";
+import CrudGroupByButton from "./buttons/CrudGroupByButton.vue";
+import CrudColumnsButton from "./buttons/CrudColumnsButton.vue";
+import CrudExportList from "./CrudExportList.vue";
+import type {IEntityCrud} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
+import CrudFilters from "./CrudFilters.vue";
+import { useCrudColumns } from "../composables/UseCrudColumns";
+import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
+import CrudFiltersAction from "./CrudFiltersAction.vue";
+
+const {t, te} = useI18n()
+const {hasPermission} = useAuth()
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+})
+
+const {
+  loading, itemsPerPage, page, sortBy, search, totalItems, items,
+  doPaginate, filters, applyFilters, clearFilters, paginationError
+} = useCrud(entity)
+
+// Usar el composable de columnas
+const { filteredHeaders } = useCrudColumns(entity)
+
+
+defineExpose({
+  doPaginate
+});
+
+defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
+
+</script>
+
+<template>
+  <v-data-table-server
+      :density="entity.tableDensity"
+      :striped="entity.tableStriped"
+      :header-props="entity.headerProps"
+      v-if="hasPermission(entity.permissions.view)"
+      v-model:items-per-page="itemsPerPage"
+      :items-per-page-options="[5, 10, 20, 50]"
+      v-model:page="page"
+      v-model:sort-by="sortBy"
+      :headers="filteredHeaders"
+      :items="items"
+      :items-length="totalItems"
+      :loading="loading"
+      :search="search"
+      :multi-sort="false"
+      item-value="name"
+      @update:options="doPaginate"
+  >
+
+    <template v-slot:no-data>
+      <v-alert
+          v-if="paginationError"
+          variant="tonal"
+          class="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' " />
+    </template>
+
+    <template v-slot:bottom>
+      <v-data-table-footer :class="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>
+          {{ te(`${entity.name.toLowerCase()}.crud`) ? t(`${entity.name.toLowerCase()}.crud`) : entity.name }}
+        </v-toolbar-title>
+        <v-spacer></v-spacer>
+
+        <slot name="toolbar">
+
+        </slot>
+
+        <crud-import-button
+            :entity="entity"
+            @import="(v:any) => $emit('import', v)"
+        />
+
+        <crud-export-button
+            :entity="entity"
+            @export="(v:any) => $emit('export',v)"
+        />
+
+        <crud-group-by-button
+            v-if="entity.isGroupable"
+            :entity="entity"
+        />
+
+        <crud-columns-button
+            v-if="entity.isColumnSelectable"
+            :entity="entity"
+        />
+
+        <crud-create-button
+            v-if="entity.isCreatable"
+            :entity="entity"
+            @click="$emit('create')"
+        />
+
+      </v-toolbar>
+
+      <crud-export-list
+          :entity="entity"
+      />
+
+      <v-card variant="flat">
+        <v-card-text v-if="entity.searchEnable">
+          <crud-search
+              v-model="search"
+          />
+        </v-card-text>
+
+        <v-card-text class="pt-0">
+          <slot name="filters" v-bind="{filters}"></slot>
+
+          <v-card variant="flat" v-if="!$slots.filters">
+
+            <crud-filters
+                v-if="entity.filtersEnable"
+                :entity="entity"
+                v-model="filters"
+                :auto-filter="!entity.filterButtons"
+                @clearFilter="clearFilters()"
+                @applyFilter="applyFilters()"
+            >
+
+              <template v-for="iFilter in entity.filters"
+                        :key="iFilter.name"
+                        v-slot:[`filter.${iFilter.name}`]="{filter, filterIndex}"
+              >
+                <slot v-if="$slots[`filter.${iFilter.name}`]"
+                      :name="`filter.${iFilter.name}`"
+                      v-bind="{filter, filterIndex}"
+                />
+              </template>
+            </crud-filters>
+
+            <crud-filters-dynamic
+                v-if="entity.dynamicFiltersEnable"
+                :entity="entity"
+                v-model="filters"
+                :auto-filter="!entity.filterButtons"
+                @clearFilter="clearFilters()"
+                @applyFilter="applyFilters()"
+            >
+            </crud-filters-dynamic>
+
+            <crud-filters-action v-if="entity.filterButtons"
+                                 :entity="entity"
+                                 @clearFilter="clearFilters()"
+                                 @applyFilter="applyFilters()"
+            ></crud-filters-action>
+          </v-card>
+
+        </v-card-text>
+
+      </v-card>
+
+      <v-divider></v-divider>
+
+
+
+    </template>
+
+
+    <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}">
+        {{ value }}
+      </slot>
+    </template>
+
+
+    <template v-slot:item.actions="{item}">
+
+      <slot name="item.actions" v-bind="{item}">
+      </slot>
+
+      <crud-view-button
+          v-if="entity.isViewable && hasPermission(entity.permissions.view)"
+          @click="$emit('view', item)"
+      />
+
+      <crud-update-button
+          v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
+          @click="$emit('edit', item)"
+      />
+
+      <crud-delete-button
+          v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
+          @click="$emit('delete', item)"
+      />
+
+    </template>
+
+  </v-data-table-server>
+</template>
+
+<style scoped>
+
+</style>

package/src/composables/UseCrud.ts

@@ -1,13 +1,22 @@
-import type {IDraxPaginateResult, IEntityCrud} from "@drax/crud-share";
+import type {
+    IDraxFieldFilter,
+    IDraxPaginateResult,
+    IEntityCrud,
+    IEntityCrudFilter,
+} from "@drax/crud-share";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {computed, nextTick, toRaw} from "vue";
 import getItemId from "../helpers/getItemId";
 import {useI18n} from "vue-i18n";
+import {useRouter} from "vue-router";
+import type {IEntityCrudFilterDynamic} from "@drax/crud-share/types/interfaces/IEntityCrudFilterDynamic";
 
 export function useCrud(entity: IEntityCrud) {
 
     const store = useCrudStore(entity?.name)
 
+    const router = useRouter();
+
     const {t: $t, te: $te} = useI18n()
 
     const exportError = computed({
@@ -33,6 +42,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setDialog(value)
         }
     })
+
     const operation = computed({
         get() {
             return store.operation
@@ -40,6 +50,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setOperation(value)
         }
     })
+
     const form = computed({
         get() {
             return store.form
@@ -47,6 +58,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setForm(value)
         }
     })
+
     const formValid = computed({
         get() {
             return store.formValid
@@ -54,6 +66,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setFormValid(value)
         }
     })
+
     const notify = computed({
         get() {
             return store.notify
@@ -61,6 +74,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setNotify(value)
         }
     })
+
     const error = computed({
         get() {
             return store.error
@@ -68,6 +82,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setError(value)
         }
     })
+
     const message = computed({
         get() {
             return store.message
@@ -75,6 +90,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setMessage(value)
         }
     })
+
     const loading = computed({
         get() {
             return store.loading
@@ -82,6 +98,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setLoading(value)
         }
     })
+
     const itemsPerPage = computed({
         get() {
             return store.itemsPerPage
@@ -89,6 +106,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setItemsPerPage(value)
         }
     })
+
     const page = computed({
         get() {
             return store.page
@@ -96,6 +114,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setPage(value)
         }
     })
+
     const sortBy = computed({
         get() {
             return store.sortBy
@@ -103,6 +122,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setSortBy(value)
         }
     })
+
     const search = computed({
         get() {
             return store.search
@@ -110,6 +130,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setSearch(value)
         }
     })
+
     const totalItems = computed({
         get() {
             return store.totalItems
@@ -117,6 +138,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setTotalItems(value)
         }
     })
+
     const items = computed({
         get() {
             return store.items
@@ -124,6 +146,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setItems(value)
         }
     })
+
     const exportFiles = computed({
         get() {
             return store.exportFiles
@@ -131,6 +154,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setExportFiles(value)
         }
     })
+
     const exportLoading = computed({
         get() {
             return store.exportLoading
@@ -138,6 +162,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setExportLoading(value)
         }
     })
+
     const exportListVisible = computed({
         get() {
             return store.exportListVisible
@@ -145,6 +170,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setExportListVisible(value)
         }
     })
+
     const filters = computed({
         get() {
             return store.filters
@@ -153,6 +179,24 @@ export function useCrud(entity: IEntityCrud) {
         }
     })
 
+    const prepareDynamicFilters = computed(() => {
+        return store.dynamicFilters.map((filter: IEntityCrudFilterDynamic) => {
+            return {
+                field: filter.name,
+                operator: filter.operator,
+                value: filter.value
+            }
+        }) as IDraxFieldFilter[]
+    })
+
+
+    const getAllFilters = computed(() =>{
+        return [
+            ...store.filters,
+            ...prepareDynamicFilters.value
+        ]  as IDraxFieldFilter[]
+    })
+
 
     async function doPaginate() {
         store.setLoading(true)
@@ -165,7 +209,7 @@ export function useCrud(entity: IEntityCrud) {
                 orderBy: store.sortBy[0]?.key,
                 order: store.sortBy[0]?.order,
                 search: store.search,
-                filters: store.filters
+                filters: getAllFilters.value
             })
             store.setItems(r.items)
             store.setTotalItems(r.total)
@@ -204,7 +248,7 @@ export function useCrud(entity: IEntityCrud) {
                 orderBy: store.sortBy[0]?.key,
                 order: store.sortBy[0]?.order,
                 search: store.search,
-                filters: store.filters
+                filters: getAllFilters.value
             })
 
             if (r && r.url) {
@@ -325,6 +369,9 @@ export function useCrud(entity: IEntityCrud) {
                 await doPaginate()
                 closeDialog()
                 store.showMessage("Entity created successfully!")
+                if(entity.redirectOnCreate){
+                    router.push(entity.redirectOnCreate(item))
+                }
                 return {status: 'created', item: item}
             }
             throw new Error("provider.create not implemented")
@@ -395,7 +442,17 @@ export function useCrud(entity: IEntityCrud) {
     }
 
     function prepareFilters() {
-        store.setFilters(entity.formFilters)
+
+        const staticFilters : IDraxFieldFilter[] = entity.filters.map(
+            (filter: IEntityCrudFilter) =>
+                ({
+                    field: filter.name,
+                    value: filter.default ? filter.default : null,
+                    operator: (filter.operator ? filter.operator : 'eq')
+                })
+        ) as IDraxFieldFilter[]
+
+        store.setFilters(staticFilters)
     }
 
     async function clearFilters() {

package/src/index.ts

@@ -12,6 +12,7 @@ import EntityCombobox from "./components/combobox/EntityCombobox.vue";
 import {useCrudStore} from "./stores/UseCrudStore";
 import {useEntityStore} from "./stores/UseEntityStore";
 import {useCrud} from "./composables/UseCrud";
+import {useFilterIcon} from "./composables/UseFilterIcon";
 import {useFormUtils} from "./composables/UseFormUtils";
 import {useInputErrorI18n} from "./composables/UseInputErrorI18n";
 import {EntityCrud} from "./EntityCrud";
@@ -32,6 +33,7 @@ export {
     useFormUtils,
     useCrudStore,
     useInputErrorI18n,
+    useFilterIcon,
     EntityCrud,
     useEntityStore,
     EntityCombobox

package/src/stores/UseCrudStore.ts

@@ -13,6 +13,7 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
             error: '' as string,
             paginationError: '' as string,
             filters: [] as IDraxFieldFilter[],
+            dynamicFilters: [] as IDraxFieldFilter[],
             items: [] as any[],
             totalItems: 0 as number,
             itemsPerPage: 10 as number,
@@ -134,6 +135,21 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
                 this.filters[index].value = value
             }
         },
+        addDynamicFilter(filter: IDraxFieldFilter) {
+            this.dynamicFilters.push(filter)
+        },
+        removeDynamicFilter(index: number) {
+            this.dynamicFilters.splice(index, 1)
+        },
+        setDynamicFilters(filters: IDraxFieldFilter[]) {
+            this.dynamicFilters = filters
+        },
+        setDynamicFilterValue(name:string, value:any) {
+            const index = this.getFilterIndex(name)
+            if (index >= 0) {
+                this.dynamicFilters[index].value = value
+            }
+        },
         setVisibleColumns(columns: string[]) {
             this.visibleColumns = columns
         },