@drax/crud-vue 3.18.1 → 3.19.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.18.1",
+  "version": "3.19.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^3.11.0",
+    "@drax/common-front": "^3.19.0",
     "@drax/crud-front": "^3.11.0",
-    "@drax/crud-share": "^3.17.0",
-    "@drax/media-vue": "^3.18.1"
+    "@drax/crud-share": "^3.19.0",
+    "@drax/media-vue": "^3.19.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "241f90094f420bdbe8c998d0ccb89aff433db022"
+  "gitHead": "bf445c10758ee014b45c2d76d6fddd5c578c738f"
 }

package/src/components/Crud.vue

@@ -17,9 +17,10 @@ const {entity} = defineProps({
 })
 
 const {
-  onView, onCreate, onEdit, onDelete, resetCrudStore,
+  onCreate, onEditAt, onDeleteAt, resetCrudStore,
   operation, dialog, notify, message, doExport, doImport,
-  prepareFilters, prepareSort, form
+  prepareFilters, prepareSort, form,
+  onViewAt, navigateView, canNavigateItems, canNavigatePrev, canNavigateNext
 } = useCrud(entity);
 
 const {hasPermission} = useAuth()
@@ -70,11 +71,11 @@ watch(dialog, (value) => {
           :is="listComponent"
           :entity="entity"
           @create="onCreate"
-          @edit="onEdit"
-          @delete="onDelete"
+          @edit="onEditAt"
+          @delete="onDeleteAt"
           @export="doExport"
           @import="doImport"
-          @view="onView"
+          @view="onViewAt"
       >
 
         <template v-slot:toolbar-left>
@@ -120,8 +121,8 @@ watch(dialog, (value) => {
         </template>
 
 
-        <template v-slot:item.actions="{item}">
-          <slot name="item.actions" v-bind="{item}">
+        <template v-slot:item.actions="{item, index}">
+          <slot name="item.actions" v-bind="{item, index}">
           </slot>
         </template>
 
@@ -144,6 +145,22 @@ watch(dialog, (value) => {
         :operation="operation"
     >
       <template #toolbar-actions>
+        <v-btn
+            v-if="canNavigateItems"
+            icon="mdi-chevron-left"
+            variant="text"
+            :disabled="!canNavigatePrev"
+            @click="navigateView(-1)"
+        />
+
+        <v-btn
+            v-if="canNavigateItems"
+            icon="mdi-chevron-right"
+            variant="text"
+            :disabled="!canNavigateNext"
+            @click="navigateView(1)"
+        />
+
         <crud-ai-button
             v-if="entity.isAiAssistable && ['create', 'edit'].includes(operation) && hasPermission('ai:promptCrud')"
             :entity="entity"

package/src/components/CrudActiveFilters.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n'
 import { useFilterIcon } from '../composables/UseFilterIcon'
 import CrudRefDisplay from "./CrudRefDisplay.vue";
 import {formatDate} from "@drax/common-front"
+import {isRangeOperator, normalizeDateRangeValue} from "../helpers/CrudRangeFilters";
 
 const { t} = useI18n()
 
@@ -36,6 +37,13 @@ const activeFilters = computed<any[]>(() => {
         return null
       }
 
+      if (isRangeOperator(filterDef)) {
+        const rangeValue = normalizeDateRangeValue(filter.value)
+        if (!rangeValue.from && !rangeValue.to) {
+          return null
+        }
+      }
+
       return {
         ...filterDef,
         value: filter.value,
@@ -50,9 +58,20 @@ const getFilterLabel = (filter: any) => {
   return label
 }
 
+const formatRangeDate = (value: string | Date) => {
+  return formatDate(value instanceof Date ? value.toISOString() : value)
+}
+
 
 
 const getFilterValue = (filter: any) => {
+  if (isRangeOperator(filter)) {
+    const rangeValue = normalizeDateRangeValue(filter.value)
+    const from = rangeValue.from ? formatRangeDate(rangeValue.from) : t('crud.from')
+    const to = rangeValue.to ? formatRangeDate(rangeValue.to) : t('crud.to')
+    return `${from} - ${to}`
+  }
+
   switch (filter.type) {
     case 'date':
       return formatDate(filter.value)

package/src/components/CrudFieldRange.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import {computed, type PropType} from "vue";
+import type {ValidationRule} from "vuetify";
+import {VDateInput} from "vuetify/labs/VDateInput";
+import type {IEntityCrud, IEntityCrudFilter} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
+import {normalizeDateRangeValue} from "../helpers/CrudRangeFilters";
+
+const {t} = useI18n()
+
+const valueModel = defineModel<any>({type: [Object], default: null})
+
+const {
+  name,
+  label,
+  field,
+  readonly,
+  errorMessages,
+  rules,
+  density,
+  variant,
+  clearable,
+  hideDetails,
+  singleLine,
+  hint,
+  persistentHint,
+  placeholder,
+  persistentPlaceholder,
+  prependIcon,
+  appendIcon,
+  prependInnerIcon,
+  appendInnerIcon,
+  onInput
+} = defineProps({
+  name: {type: String, required: true},
+  label: {type: String, required: true},
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+  field: {type: Object as PropType<IEntityCrudFilter>, required: true},
+  readonly: {type: Boolean, default: false},
+  hideDetails: {type: Boolean, default: false},
+  hint: {type: String, required: false},
+  persistentHint: {type: Boolean, default: false},
+  placeholder: {type: String, required: false},
+  persistentPlaceholder: {type: Boolean, default: false},
+  errorMessages: {type: Array as PropType<string[]>, default: null, required: false},
+  onInput: {type: Function as PropType<Function>, required: false},
+  rules: {type: Array as PropType<ValidationRule[]>, required: false},
+  density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
+  variant: {
+    type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>,
+    default: 'filled'
+  },
+  singleLine: {type: Boolean, default: false},
+  clearable: {type: Boolean, default: false},
+  prependIcon: {type: String, default: ''},
+  prependInnerIcon: {type: String, default: ''},
+  appendIcon: {type: String, default: ''},
+  appendInnerIcon: {type: String, default: ''},
+})
+
+const emit = defineEmits(['updateValue'])
+
+const rangeValueModel = computed({
+  get() {
+    return normalizeDateRangeValue(valueModel.value)
+  },
+  set(value) {
+    valueModel.value = normalizeDateRangeValue(value)
+  }
+})
+
+function normalizeDateValue(value: any, endOfDay = false) {
+  if (!value) {
+    return null
+  }
+
+  const date = value instanceof Date ? new Date(value) : new Date(value)
+
+  if (Number.isNaN(date.getTime())) {
+    return null
+  }
+
+  if (endOfDay) {
+    date.setHours(23, 59, 59, 0)
+  }
+
+  return date
+}
+
+function updateRangeValue(bound: 'from' | 'to', rawValue: any) {
+  const nextValue = {
+    ...normalizeDateRangeValue(rangeValueModel.value),
+    [bound]: normalizeDateValue(rawValue, bound === 'to' && !!field.endOfDay)
+  }
+
+  const fromDate = normalizeDateValue(nextValue.from)
+  const toDate = normalizeDateValue(nextValue.to)
+
+  if (fromDate && toDate && fromDate > toDate) {
+    if (bound === 'from') {
+      nextValue.to = normalizeDateValue(nextValue.from, !!field.endOfDay)
+    } else {
+      nextValue.from = normalizeDateValue(nextValue.to)
+    }
+  }
+
+  rangeValueModel.value = nextValue
+
+  if(onInput && typeof onInput === 'function'){
+    onInput(nextValue)
+  }
+
+  emit('updateValue')
+}
+
+const rangeFromModel = computed({
+  get() {
+    return rangeValueModel.value.from
+  },
+  set(value) {
+    updateRangeValue('from', value)
+  }
+})
+
+const rangeToModel = computed({
+  get() {
+    return rangeValueModel.value.to
+  },
+  set(value) {
+    updateRangeValue('to', value)
+  }
+})
+
+const rangeFromMax = computed(() => {
+  return rangeValueModel.value.to ?? field.max
+})
+
+const rangeToMin = computed(() => {
+  return rangeValueModel.value.from ?? undefined
+})
+
+const fromInnerIcon = computed(() => {
+  return prependInnerIcon || 'mdi-calendar-start'
+})
+
+const toInnerIcon = computed(() => {
+  return appendInnerIcon || 'mdi-calendar-end'
+})
+</script>
+
+<template>
+  <v-row dense>
+    <v-col cols="12" sm="6">
+      <v-date-input
+          :name="`${name}_from`"
+          :label="`${label} ${t('crud.from')}`"
+          :hint="hint ?? field.hint"
+          :persistent-hint="persistentHint ?? field.persistentHint"
+          :placeholder="placeholder ?? field.placeholder"
+          :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
+          v-model="rangeFromModel"
+          :readonly="readonly"
+          :error-messages="errorMessages"
+          :rules="rules"
+          :density="density"
+          :variant="variant"
+          :clearable="clearable"
+          :hide-details="hideDetails"
+          :single-line="singleLine"
+          @click:clear="() => updateRangeValue('from', null)"
+          :prepend-icon="prependIcon"
+          :append-icon="appendIcon"
+          :prepend-inner-icon="fromInnerIcon"
+          :append-inner-icon="appendInnerIcon"
+          :max="rangeFromMax"
+          @input="onInput"
+      />
+    </v-col>
+
+    <v-col cols="12" sm="6">
+      <v-date-input
+          :name="`${name}_to`"
+          :label="`${label} ${t('crud.to')}`"
+          :hint="hint ?? field.hint"
+          :persistent-hint="persistentHint ?? field.persistentHint"
+          :placeholder="placeholder ?? field.placeholder"
+          :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
+          v-model="rangeToModel"
+          :readonly="readonly"
+          :error-messages="errorMessages"
+          :rules="rules"
+          :density="density"
+          :variant="variant"
+          :clearable="clearable"
+          :hide-details="hideDetails"
+          :single-line="singleLine"
+          @click:clear="() => updateRangeValue('to', null)"
+          :prepend-icon="prependIcon"
+          :append-icon="appendIcon"
+          :prepend-inner-icon="toInnerIcon"
+          :append-inner-icon="appendInnerIcon"
+          :min="rangeToMin"
+          :max="field.max"
+          @input="onInput"
+      >
+        <template v-if="field.endOfDay && field.showEndOfDayChip !== false" v-slot:append-inner>
+          <v-chip size="small">23:59</v-chip>
+        </template>
+      </v-date-input>
+    </v-col>
+  </v-row>
+</template>

package/src/components/CrudFilters.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {computed, type PropType} from "vue";
 import CrudFormField from "./CrudFormField.vue";
+import CrudFieldRange from "./CrudFieldRange.vue";
 import type {IEntityCrud, IEntityCrudFilter} from "@drax/crud-share";
 import {useAuth} from "@drax/identity-vue";
 import {useFilterIcon} from "../composables/UseFilterIcon";
@@ -18,6 +19,10 @@ const aFields = computed(() => {
   return entity.filters.filter((field:IEntityCrudFilter) => !field.permission || hasPermission(field.permission))
 })
 
+function isRangeFilter(filter: IEntityCrudFilter) {
+  return filter.type === 'date' && filter.operator === 'range'
+}
+
 function filter() {
   emit('applyFilter')
 }
@@ -51,8 +56,21 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
           >
 
             <slot :name="`filter.${filter.name}`" v-bind="{filter, filterIndex: index}">
+              <crud-field-range
+                  v-if="filter && valueModel[index] !== undefined && isRangeFilter(filter)"
+                  :name="filter.name"
+                  :label="filter.label"
+                  :entity="entity"
+                  :field="filter"
+                  v-model="valueModel[index].value"
+                  :clearable="true"
+                  density="compact"
+                  variant="outlined"
+                  hide-details
+                  @updateValue="onUpdateValue"
+              />
               <crud-form-field
-                  v-if="filter && valueModel[index] !== undefined"
+                  v-else-if="filter && valueModel[index] !== undefined"
                   :field="filter"
                   :entity="entity"
                   v-model="valueModel[index].value"

package/src/components/CrudFormField.vue

@@ -82,7 +82,6 @@ const inputErrors = computed(() => {
 
 defineEmits(['updateValue'])
 
-
 const hasHideDetails = computed(() => {
   if (readonly) {
     return true

package/src/components/CrudList.vue

@@ -206,24 +206,24 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
     </template>
 
 
-    <template v-slot:item.actions="{item}">
+    <template v-slot:item.actions="{item, index}">
 
-      <slot name="item.actions" v-bind="{item}">
+      <slot name="item.actions" v-bind="{item, index}">
       </slot>
 
       <crud-view-button
           v-if="entity.isViewable && hasPermission(entity.permissions.view)"
-          @click="$emit('view', item)"
+          @click="$emit('view', item, index)"
       />
 
       <crud-update-button
           v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
-          @click="$emit('edit', item)"
+          @click="$emit('edit', item, index)"
       />
 
       <crud-delete-button
           v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
-          @click="$emit('delete', item)"
+          @click="$emit('delete', item, index)"
       />
 
     </template>

package/src/components/CrudListGallery.vue

@@ -199,7 +199,7 @@ onMounted(() => {
 
       <!-- 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"
+        <v-col v-for="(item, index) in items" :key="item.id || item.uuid || item.name || Math.random()" cols="12" sm="6" md="4"
                xl="3">
 
 
@@ -231,22 +231,22 @@ onMounted(() => {
               <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 name="item.actions" v-bind="{item, index}">
                 </slot>
 
                 <crud-view-button
                     v-if="entity.isViewable && hasPermission(entity.permissions.view)"
-                    @click="$emit('view', item)"
+                    @click="$emit('view', item, index)"
                 />
 
                 <crud-update-button
                     v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
-                    @click="$emit('edit', item)"
+                    @click="$emit('edit', item, index)"
                 />
 
                 <crud-delete-button
                     v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
-                    @click="$emit('delete', item)"
+                    @click="$emit('delete', item, index)"
                 />
               </v-card-actions>
             </v-card>

package/src/components/CrudListTable.vue

@@ -218,24 +218,24 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
     </template>
 
 
-    <template v-slot:item.actions="{item}">
+    <template v-slot:item.actions="{item, index}">
 
-      <slot name="item.actions" v-bind="{item}">
+      <slot name="item.actions" v-bind="{item, index}">
       </slot>
 
       <crud-view-button
           v-if="entity.isViewable && hasPermission(entity.permissions.view)"
-          @click="$emit('view', item)"
+          @click="$emit('view', item, index)"
       />
 
       <crud-update-button
           v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
-          @click="$emit('edit', item)"
+          @click="$emit('edit', item, index)"
       />
 
       <crud-delete-button
           v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
-          @click="$emit('delete', item)"
+          @click="$emit('delete', item, index)"
       />
 
     </template>

package/src/composables/UseCrud.ts

@@ -6,15 +6,19 @@ import type {
     IEntityCrudOperation
 } from "@drax/crud-share";
 import {useCrudStore} from "../stores/UseCrudStore";
-import {computed, nextTick, toRaw} from "vue";
+import {computed, nextTick, toRaw, watch} from "vue";
 import getItemId from "../helpers/getItemId";
 import {useI18n} from "vue-i18n";
 import {useRouter} from "vue-router";
+import {createCrudFilterValue, expandRangeFilters} from "../helpers/CrudRangeFilters";
 
 
 export function useCrud(entity: IEntityCrud) {
 
     const store = useCrudStore(entity?.name)
+    const navigationOperations = (entity as IEntityCrud & {
+        navigationOperations?: Exclude<IEntityCrudOperation, null>[]
+    }).navigationOperations ?? ['view']
 
     const router = useRouter();
 
@@ -48,6 +52,18 @@ export function useCrud(entity: IEntityCrud) {
         }
     })
 
+    const currentViewIndex = computed({
+        get() {
+            return store.currentViewIndex
+        }, set(value) {
+            store.setCurrentViewIndex(value)
+        }
+    })
+
+    const canNavigateItems = computed(() => {
+        return operation.value !== null && navigationOperations.includes(operation.value)
+    })
+
     const operation = computed({
         get() {
             return store.operation
@@ -233,23 +249,97 @@ export function useCrud(entity: IEntityCrud) {
     })
 
     const prepareDynamicFilters = computed(() => {
-        return store.dynamicFilters.map((filter: IEntityCrudFilter) => {
+        return expandRangeFilters(store.dynamicFilters.map((filter: IEntityCrudFilter) => {
             return {
                 field: filter.name,
                 operator: filter.operator,
                 value: filter.value
             }
-        }) as IDraxFieldFilter[]
+        })) as IDraxFieldFilter[]
     })
 
 
     const getAllFilters = computed(() =>{
         return [
-            ...store.filters,
+            ...expandRangeFilters(store.filters),
             ...prepareDynamicFilters.value
         ]  as IDraxFieldFilter[]
     })
 
+    function resolveViewIndex(item: Record<string, any>, index?: number | null) {
+        if (typeof index === 'number' && index >= 0) {
+            return index
+        }
+
+        const itemIdentifier = entity.identifier ? item?.[entity.identifier] : getItemId(item)
+
+        if (itemIdentifier !== undefined && itemIdentifier !== null) {
+            return items.value.findIndex((currentItem: Record<string, any>) => {
+                const currentIdentifier = entity.identifier ? currentItem?.[entity.identifier] : getItemId(currentItem)
+                return currentIdentifier === itemIdentifier
+            })
+        }
+
+        return items.value.findIndex((currentItem: Record<string, any>) => currentItem === item)
+    }
+
+    function openItemAt(operation: Exclude<IEntityCrudOperation, null>, item: Record<string, any>, index?: number) {
+        const resolvedIndex = resolveViewIndex(item, index)
+        currentViewIndex.value = resolvedIndex >= 0 ? resolvedIndex : null
+
+        switch (operation) {
+            case 'view':
+                onView(item)
+                return
+            case 'edit':
+                onEdit(item)
+                return
+            case 'delete':
+                onDelete(item)
+                return
+        }
+    }
+
+    function onViewAt(item: Record<string, any>, index?: number) {
+        openItemAt('view', item, index)
+    }
+
+    function onEditAt(item: Record<string, any>, index?: number) {
+        openItemAt('edit', item, index)
+    }
+
+    function onDeleteAt(item: Record<string, any>, index?: number) {
+        openItemAt('delete', item, index)
+    }
+
+    const canNavigatePrev = computed(() => {
+        return canNavigateItems.value
+            && currentViewIndex.value !== null
+            && currentViewIndex.value > 0
+    })
+
+    const canNavigateNext = computed(() => {
+        return canNavigateItems.value
+            && currentViewIndex.value !== null
+            && currentViewIndex.value < items.value.length - 1
+    })
+
+    function navigateView(direction: -1 | 1) {
+        if (currentViewIndex.value === null || operation.value === null || !canNavigateItems.value) {
+            return
+        }
+
+        const nextIndex = currentViewIndex.value + direction
+        const nextItem = items.value[nextIndex]
+
+        if (!nextItem) {
+            return
+        }
+
+        currentViewIndex.value = nextIndex
+        openItemAt(operation.value, nextItem, nextIndex)
+    }
+
 
     async function doPaginate() {
         store.setLoading(true)
@@ -524,7 +614,7 @@ export function useCrud(entity: IEntityCrud) {
             (filter: IEntityCrudFilter) =>
                 ({
                     field: filter.name,
-                    value: filter.default ? filter.default : null,
+                    value: createCrudFilterValue(filter),
                     operator: (filter.operator ? filter.operator : 'eq')
                 })
         ) as IDraxFieldFilter[]
@@ -552,13 +642,21 @@ export function useCrud(entity: IEntityCrud) {
         await doPaginate()
     }
 
+    watch(dialog, (value) => {
+        if (!value) {
+            currentViewIndex.value = null
+        }
+    })
+
 
     return {
         doPaginate, doExport, doImport, doUpdate, doCreate, doDelete,
         onView, onCreate, onEdit, onDelete, onCancel, onSubmit, resetCrudStore,
+        onViewAt, onEditAt, onDeleteAt, navigateView, resolveViewIndex, openItemAt,
         dialog,  notify, error, paginationError, message, formValid,
         form, getForm, setForm,
         operation, getOperation, setOperation,
+        currentViewIndex, canNavigateItems, canNavigatePrev, canNavigateNext,
         loading, itemsPerPage, page, sortBy, search, totalItems, items,
         prepareFilters, filters, clearFilters, applyFilters, prepareSort,
         exportFiles, importFiles, exportLoading, importLoading, exportListVisible, importListVisible, exportError, importError,

package/src/composables/UseDynamicFilters.ts

@@ -171,6 +171,9 @@ export function useDynamicFilters(
                 if (['ref','array.ref'].includes(filter.type) && ['gt', 'gte', 'lt', 'lte', 'like'].includes(op.value)) {
                     return false
                 }
+                if (['date'].includes(filter.type) && ['in', 'nin', 'like'].includes(op.value)) {
+                    return false
+                }
                 return true
             })
         }

package/src/composables/UseFilterIcon.ts

@@ -24,6 +24,8 @@ export function useFilterIcon() {
           return 'mdi-not-equal'
         case 'like':
           return 'mdi-contain'
+        case 'range':
+          return 'mdi-arrow-expand-horizontal'
         default:
           return 'mdi-equal'
       }

package/src/cruds/EntityCrud.ts

@@ -2,8 +2,9 @@ import type {
   IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
   IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
   IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFieldVariant, IDraxFieldFilter,
-  IEntityCrudOnInput
+  IEntityCrudOnInput, IEntityCrudOperation
 } from "@drax/crud-share";
+import {createCrudFilterValue} from "../helpers/CrudRangeFilters";
 
 
 
@@ -138,7 +139,7 @@ class EntityCrud implements IEntityCrud {
   get formFilters(): IDraxFieldFilter[] {
     return this.filters.map(
       (filter: IEntityCrudFilter) =>
-        ({field: filter.name, value: filter.default ? filter.default : null, operator: (filter.operator ? filter.operator : 'eq')})
+        ({field: filter.name, value: createCrudFilterValue(filter), operator: (filter.operator ? filter.operator : 'eq')})
     ) as IDraxFieldFilter[]
   }
 
@@ -346,6 +347,10 @@ class EntityCrud implements IEntityCrud {
     return false
   }
 
+  get navigationOperations(): IEntityCrudOperation[] {
+    return ['view']
+  }
+
 }
 
 export default EntityCrud;

package/src/helpers/CrudRangeFilters.test.ts

@@ -0,0 +1,52 @@
+import {describe, expect, it} from "vitest";
+import {
+    createCrudFilterValue,
+    createEmptyDateRangeValue,
+    expandRangeFilters,
+    normalizeDateRangeValue
+} from "./CrudRangeFilters";
+
+describe('CrudRangeFilters', () => {
+    it('creates an empty range value by default', () => {
+        expect(createEmptyDateRangeValue()).toEqual({from: null, to: null})
+    })
+
+    it('normalizes invalid range values to an empty range', () => {
+        expect(normalizeDateRangeValue(null)).toEqual({from: null, to: null})
+        expect(normalizeDateRangeValue('2026-01-01')).toEqual({from: null, to: null})
+    })
+
+    it('uses an empty object for range filters without default', () => {
+        expect(createCrudFilterValue({
+            name: 'birthdate',
+            type: 'date',
+            label: 'birthdate',
+            default: undefined,
+            operator: 'range'
+        })).toEqual({from: null, to: null})
+    })
+
+    it('expands range filters into gte and lte filters', () => {
+        const from = new Date('2026-01-10T00:00:00.000Z')
+        const to = new Date('2026-01-20T00:00:00.000Z')
+
+        expect(expandRangeFilters([{
+            field: 'birthdate',
+            operator: 'range',
+            value: {from, to}
+        }])).toEqual([
+            {field: 'birthdate', operator: 'gte', value: from},
+            {field: 'birthdate', operator: 'lte', value: to}
+        ])
+    })
+
+    it('omits empty range bounds when expanding', () => {
+        expect(expandRangeFilters([{
+            field: 'birthdate',
+            operator: 'range',
+            value: {from: null, to: '2026-01-20'}
+        }])).toEqual([
+            {field: 'birthdate', operator: 'lte', value: '2026-01-20'}
+        ])
+    })
+})

package/src/helpers/CrudRangeFilters.ts

@@ -0,0 +1,84 @@
+import type {IDraxFieldFilter, IEntityCrudFilter} from "@drax/crud-share";
+
+interface ICrudDateRangeValue {
+    from: Date | string | null
+    to: Date | string | null
+}
+
+function createEmptyDateRangeValue(): ICrudDateRangeValue {
+    return {
+        from: null,
+        to: null
+    }
+}
+
+function isRangeOperator(filter?: Pick<IEntityCrudFilter, 'operator'> | Pick<IDraxFieldFilter, 'operator'> | null): boolean {
+    return filter?.operator === 'range'
+}
+
+function normalizeDateRangeValue(value: any): ICrudDateRangeValue {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return createEmptyDateRangeValue()
+    }
+
+    return {
+        from: value.from ?? null,
+        to: value.to ?? null
+    }
+}
+
+function createCrudFilterValue(filter: IEntityCrudFilter) {
+    if (filter.operator === 'range') {
+        if (filter.default === undefined) {
+            return createEmptyDateRangeValue()
+        }
+
+        return normalizeDateRangeValue(filter.default)
+    }
+
+    return filter.default !== undefined ? filter.default : null
+}
+
+function expandRangeFilters(filters: Array<IDraxFieldFilter | IEntityCrudFilter>): IDraxFieldFilter[] {
+    return filters.flatMap((filter) => {
+        if (!isRangeOperator(filter)) {
+            return [{
+                field: 'field' in filter ? filter.field : filter.name,
+                operator: filter.operator ? filter.operator : 'eq',
+                value: filter.value
+            }]
+        }
+
+        const rangeValue = normalizeDateRangeValue(filter.value)
+        const fieldName = 'field' in filter ? filter.field : filter.name
+        const expandedFilters: IDraxFieldFilter[] = []
+
+        if (rangeValue.from !== null && rangeValue.from !== undefined && rangeValue.from !== '') {
+            expandedFilters.push({
+                field: fieldName,
+                operator: 'gte',
+                value: rangeValue.from
+            })
+        }
+
+        if (rangeValue.to !== null && rangeValue.to !== undefined && rangeValue.to !== '') {
+            expandedFilters.push({
+                field: fieldName,
+                operator: 'lte',
+                value: rangeValue.to
+            })
+        }
+
+        return expandedFilters
+    })
+}
+
+export {
+    createCrudFilterValue,
+    createEmptyDateRangeValue,
+    expandRangeFilters,
+    isRangeOperator,
+    normalizeDateRangeValue
+}
+
+export type {ICrudDateRangeValue}

package/src/index.ts

@@ -2,6 +2,7 @@ import Crud from "./components/Crud.vue";
 import CrudDialog from "./components/CrudDialog.vue";
 import CrudForm from "./components/CrudForm.vue";
 import CrudFormField from "./components/CrudFormField.vue";
+import CrudFieldRange from "./components/CrudFieldRange.vue";
 import CrudFormList from "./components/CrudFormList.vue";
 import CrudList from "./components/CrudList.vue";
 import CrudListTable from "./components/CrudListTable.vue";
@@ -26,6 +27,7 @@ export {
     CrudDialog,
     CrudForm,
     CrudFormField,
+    CrudFieldRange,
     CrudFormList,
     CrudList,
     CrudListTable,

package/src/stores/UseCrudStore.ts

@@ -5,6 +5,7 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
     state: () => (
         {
             operation: null as IEntityCrudOperation,
+            currentViewIndex: null as number | null,
             dialog: false as boolean,
             form: {} as any,
             formValid: {} as any,
@@ -79,6 +80,9 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
         setOperation(operation: IEntityCrudOperation) {
             this.operation = operation
         },
+        setCurrentViewIndex(index: number | null) {
+            this.currentViewIndex = index
+        },
         setDialog(dialog: boolean) {
             this.dialog = dialog
         },