@drax/crud-vue 0.26.0 → 0.28.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.26.0",
+  "version": "0.28.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,16 +24,16 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.26.0",
-    "@drax/crud-front": "^0.26.0",
-    "@drax/crud-share": "^0.26.0",
-    "@drax/media-vue": "^0.26.0"
+    "@drax/common-front": "^0.28.0",
+    "@drax/crud-front": "^0.28.0",
+    "@drax/crud-share": "^0.28.0",
+    "@drax/media-vue": "^0.28.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
     "vue": "^3.5.7",
     "vue-i18n": "^9.14.0",
-    "vuetify": "^3.7.2"
+    "vuetify": "^3.9.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.8.2"
   },
-  "gitHead": "e4b5e941f7d847b340cd290d650100caf1bebf0b"
+  "gitHead": "062c6d15dbbf8b6e337869549ab0bdbc27200a9e"
 }

package/src/EntityCrud.ts

@@ -30,7 +30,8 @@ class EntityCrud implements IEntityCrud {
                 key: 'actions',
                 sortable: false,
                 align: 'center',
-                minWidth: '190px'
+                minWidth: '190px',
+                fixed:  'end'
             },
         ]
     }
@@ -211,6 +212,42 @@ class EntityCrud implements IEntityCrud {
         return true
     }
 
+    get containerFluid(){
+        return false
+    }
+
+    get cardDensity() : 'default' | 'comfortable' | 'compact' {
+        return 'default'
+    }
+
+    get cardClass() : string {
+        return 'rounded-xl'
+    }
+
+    get toolbarDensity() : 'default' | 'comfortable' | 'compact' {
+        return 'default'
+    }
+
+    get toolbarClass() : string {
+        return 'bg-primary'
+    }
+
+    get tableDensity() : 'default' | 'comfortable' | 'compact' {
+        return 'default'
+    }
+
+    get headerProps(){
+        return { class: 'bg-primary' }
+    }
+
+    get tableStriped() : null | 'odd' | 'even' {
+        return 'even'
+    }
+
+    get footerClass(){
+        return 'bg-primary'
+    }
+
 
 }
 

package/src/components/Crud.vue

@@ -22,14 +22,14 @@ onBeforeMount(() => {
   prepareFilters()
 })
 
-const emit = defineEmits(['created', 'updated', 'deleted', 'viewed','canceled'])
+const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled'])
 
 
 </script>
 
 <template>
-  <v-container fluid class="mt-5">
-    <v-card>
+  <v-container :fluid="entity.containerFluid" class="mt-5">
+    <v-card :class="entity.cardClass" :density="entity.cardDensity">
 
       <crud-list
           :entity="entity"
@@ -50,6 +50,16 @@ const emit = defineEmits(['created', 'updated', 'deleted', 'viewed','canceled'])
           </slot>
         </template>
 
+        <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>
+
         <template v-for="header in entity.headers" :key="header.key" v-slot:[`item.${header.key}`]="{item, value}">
           <slot :name="`item.${header.key}`" v-bind="{item, value}">
             {{ (Array.isArray(value) && value.length > 0) || !Array.isArray(value) ? value : '' }}

package/src/components/CrudFilters.vue

@@ -76,17 +76,21 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
                  :lg="filter.lg ? filter.lg : 4"
                  :xl="filter.xl ? filter.xl : 3"
           >
-            <crud-form-field
-                :field="filter"
-                :entity="entity"
-                v-model="valueModel[index].value"
-                :clearable="true"
-                density="compact"
-                variant="outlined"
-                :prepend-inner-icon="icon(filter)"
-                hide-details  disable-rules
-                @updateValue="onUpdateValue"
-            />
+
+            <slot :name="`filter.${filter.name}`" v-bind="{filter, filterIndex: index}">
+              <crud-form-field
+                  :field="filter"
+                  :entity="entity"
+                  v-model="valueModel[index].value"
+                  :clearable="true"
+                  density="compact"
+                  variant="outlined"
+                  :prepend-inner-icon="icon(filter)"
+                  hide-details  disable-rules
+                  @updateValue="onUpdateValue"
+              />
+            </slot>
+
           </v-col>
 
         </v-row>

package/src/components/CrudFormField.vue

@@ -310,7 +310,7 @@ defineEmits(['updateValue'])
         :append-inner-icon="appendInnerIcon"
 
     >
-      <template v-if="field.endOfDay" v-slot:append-inner>
+      <template v-if="field.endOfDay && field.showEndOfDayChip !== false" v-slot:append-inner>
         <v-chip size="small">23:59</v-chip>
       </template>
     </v-date-input>

package/src/components/CrudList.vue

@@ -53,7 +53,9 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
 <template>
   <v-data-table-server
-      class="border"
+      :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]"
@@ -68,8 +70,15 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
       item-value="name"
       @update:options="doPaginate"
   >
+
+    <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 density="compact">
+      <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>
@@ -101,7 +110,7 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
           :entity="entity"
       />
 
-      <v-card>
+      <v-card variant="flat">
         <v-card-text v-if="entity.searchEnable">
           <crud-search
               v-model="search"
@@ -110,23 +119,36 @@ 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()"
-          />
+              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}"
+            >
+              <slot v-if="$slots[`filter.${iFilter.name}`]"
+                    :name="`filter.${iFilter.name}`"
+                    v-bind="{filter, filterIndex}"
+              />
+            </template>
+          </crud-filters>
         </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 :name="`item.${header.key}`" v-bind="{item, value}">
+      <slot v-if="$slots[`item.${header.key}`]" :name="`item.${header.key}`" v-bind="{item, value}">
         {{ value }}
       </slot>
     </template>

package/src/components/buttons/CrudCreateButton.vue

@@ -12,7 +12,6 @@ const {t} = useI18n()
              icon="mdi-plus"
              class="mr-1"
              variant="text"
-             color="primary"
       >
       </v-btn>
     </template>

package/src/components/buttons/CrudUpdateButton.vue

@@ -11,7 +11,7 @@ const {t} = useI18n()
           icon="mdi-pencil"
           class="mr-1"
           variant="text"
-          color="primary"
+          color="blue"
           slim
       >
       </v-btn>

package/src/components/buttons/CrudViewButton.vue

@@ -11,7 +11,7 @@ const {t} = useI18n()
           icon="mdi-magnify"
           class="mr-1"
           variant="text"
-          color="secondary"
+          color="teal"
           slim
       >
       </v-btn>

package/src/composables/UseCrud.ts

@@ -226,6 +226,7 @@ export function useCrud(entity: IEntityCrud) {
 
     function onCreate() {
         store.setForm(entity.form)
+        store.resetErrors()
         store.setOperation("create")
         openDialog()
     }

package/src/stores/UseCrudStore.ts

@@ -42,6 +42,11 @@ export const useCrudStore = defineStore('CrudStore', {
                     }
                 }
             }
+        },
+        getFilterIndex(state: any) {
+            return (filterName: string) => {
+                return state.filters.findIndex((filter: any) => filter.field === filterName)
+            }
         }
 
     },