@drax/crud-vue 0.5.4 → 0.5.8

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.4",
+  "version": "0.5.8",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,9 +24,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.5.4",
+    "@drax/common-front": "^0.5.5",
     "@drax/crud-front": "^0.5.3",
-    "@drax/crud-share": "^0.5.4"
+    "@drax/crud-share": "^0.5.5"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -63,5 +63,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "6db0bebb2df9edecd2c3caa7288fb5c7001c4243"
+  "gitHead": "22d4554627c707a23cfd0b138b8eb0fb91f809ab"
 }

package/src/components/Crud.vue

@@ -12,7 +12,7 @@ const {entity} = defineProps({
 })
 
 const {
-  onView, onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
+  onView, onCreate, onEdit, onDelete, onCancel, onSubmit, resetCrudStore,
   operation, dialog, form, notify, error, message, doExport,
   prepareFilters
 } = useCrud(entity);
@@ -38,9 +38,16 @@ onBeforeMount(() => {
       >
         <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}">
-            {{ value }}
+            {{ (Array.isArray(value) && value.length > 0) || !Array.isArray(value) ? value : '' }}
           </slot>
         </template>
+
+
+        <template v-slot:item.actions="{item}">
+          <slot name="item.actions" v-bind="{item}">
+          </slot>
+        </template>
+
       </crud-list>
     </v-card>
 

package/src/components/CrudDialog.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import {computed} from "vue";
 import type {PropType} from "vue";
 import type {IEntityCrud, IEntityCrudOperation} from "@drax/crud-share";
 const dialog = defineModel({type: Boolean, default: false})
 import {useI18n} from "vue-i18n";
 const {t,te} = useI18n()
 
-defineProps({
+const {operation,entity } = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
   operation: {type: String as PropType<IEntityCrudOperation>}
 })
@@ -14,13 +15,25 @@ defineEmits(
     ['submit', 'close']
 )
 
+const title = computed(() => {
+
+
+
+  if(te('operation.'+operation)){
+    const entityNameLocale = t(entity.name.toLowerCase()+'.entity')
+    return t('operation.'+operation,{entity: entityNameLocale })
+  }else{
+    return operation
+  }
+})
+
 </script>
 
 <template>
   <v-dialog v-model="dialog" :fullscreen="entity.dialogFullscreen">
     <v-card>
       <v-toolbar>
-        <v-toolbar-title>{{entity.name}} {{te('action.'+operation) ? t('action.'+operation) : operation}}</v-toolbar-title>
+        <v-toolbar-title>{{title}}</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn icon @click="dialog = false"><v-icon>mdi-close</v-icon></v-btn>
       </v-toolbar>

package/src/components/CrudForm.vue

@@ -68,6 +68,7 @@ const  {
       <v-card-text v-if="error">
         <v-alert color="error">{{ te(error) ? t(error) : error }}</v-alert>
       </v-card-text>
+
       <v-card-text>
         <template v-for="field in fields" :key="field.name">
           <crud-form-field

package/src/components/CrudFormField.vue

@@ -39,7 +39,7 @@ if(!field){
 const name = computed(() => index > 0 ? `${field.name}_${index}` : field.name)
 
 const label = computed(() => {
-  const i18n = `${entity.name}.fields.${field.name}`
+  const i18n = `${entity.name}.field.${field.name}`
   return te(i18n) ? t(i18n) : field.label
 })
 

package/src/components/CrudList.vue

@@ -37,7 +37,7 @@ const actions: IEntityCrudHeader[] = [{
 }]
 const tHeaders: IEntityCrudHeader[] = entity.headers.map(header => ({
   ...header,
-  title: te(`${entity.name.toLowerCase()}.fields.${header.title}`) ? t(`${entity.name.toLowerCase()}.fields.${header.title}`) : header.title
+  title: te(`${entity.name.toLowerCase()}.field.${header.title}`) ? t(`${entity.name.toLowerCase()}.field.${header.title}`) : header.title
 }))
 
 const headers: IEntityCrudHeader[] = [...tHeaders, ...actions]
@@ -47,7 +47,7 @@ defineExpose({
   doPaginate
 });
 
-defineEmits(['import', 'export', 'create', 'update', 'delete', 'view'])
+defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
 </script>
 
@@ -70,7 +70,7 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view'])
   >
     <template v-slot:top>
       <v-toolbar density="compact">
-        <v-toolbar-title>{{ entity.name }}</v-toolbar-title>
+        <v-toolbar-title>{{ te(`${entity.name.toLowerCase()}.crud`) ? t(`${entity.name.toLowerCase()}.crud`) : entity.name }}</v-toolbar-title>
         <v-spacer></v-spacer>
 
         <crud-import-button
@@ -123,6 +123,10 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view'])
 
 
     <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)"
@@ -136,6 +140,7 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view'])
           v-if="entity.isDeletable && hasPermission(entity.permissions.delete)"
           @click="$emit('delete', item)"
       />
+
     </template>
 
   </v-data-table-server>

package/src/composables/UseCrud.ts

@@ -96,7 +96,9 @@ export function useCrud(entity: IEntityCrud) {
 
     entity.fields.filter(field => field.type === 'array.ref')
         .forEach(field => {
-          item[field.name] = item[field.name].map(((i:any) => i?._id ? i._id : i))
+          if(item[field.name] && Array.isArray(item[field.name])){
+            item[field.name] = item[field.name].map(((i:any) => i?._id ? i._id : i))
+          }
         })
 
     return item