@drax/crud-vue 0.14.3 → 0.14.4

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.14.3",
+  "version": "0.14.4",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "6638957752a86713df6545de62664b083393cc45"
+  "gitHead": "d16e928bedeaaedf04229ec2db917e67d0eb117c"
 }

package/src/components/Crud.vue

@@ -13,7 +13,7 @@ const {entity} = defineProps({
 
 const {
   onView, onCreate, onEdit, onDelete, resetCrudStore,
-  operation, dialog, form, notify, error, message, doExport,
+  operation, dialog, notify, error, message, doExport,
   prepareFilters
 } = useCrud(entity);
 
@@ -71,10 +71,7 @@ const emit = defineEmits(['created', 'updated', 'deleted', 'viewed','canceled'])
 
       <slot name="form">
         <crud-form
-            v-model="form"
             :entity="entity"
-            :error="error"
-            :readonly="operation === 'delete'"
             @created="item => emit('created', item)"
             @updated="item => emit('updated', item)"
             @deleted="emit('deleted')"

package/src/components/CrudForm.vue

@@ -4,7 +4,7 @@ import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
 import {useFormUtils} from "../composables/UseFormUtils";
 import {getItemId} from "../helpers/getItemId";
 import CrudFormField from "./CrudFormField.vue";
-import {computed, defineEmits, defineModel, defineProps, ref} from "vue";
+import {computed, defineEmits, defineProps, ref} from "vue";
 import type {PropType} from "vue";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {useCrud} from "../composables/UseCrud";
@@ -13,14 +13,12 @@ import {useAuth} from '@drax/identity-vue'
 const {hasPermission} = useAuth()
 const {t, te} = useI18n()
 
-const valueModel = defineModel({type: [Object]})
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  readonly: {type: Boolean, default: false}
 })
 
-const {onSubmit, onCancel, operation, error} = useCrud(entity)
+const {onSubmit, onCancel, operation, error, form} = useCrud(entity)
 
 const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled'])
 
@@ -57,7 +55,7 @@ async function submit() {
     }
   }
 
-  let result = await onSubmit(valueModel.value)
+  let result = await onSubmit(form.value)
 
   switch (result.status) {
     case "created":
@@ -92,13 +90,14 @@ const {
   <v-form ref="formRef" @submit.prevent>
     <v-card flat>
 
-      <v-card-subtitle v-if="getItemId(valueModel)">ID: {{ getItemId(valueModel) }}</v-card-subtitle>
+      <v-card-subtitle v-if="getItemId(form)">ID: {{ getItemId(form) }}</v-card-subtitle>
 
       <v-card-text v-if="error">
         <v-alert color="error">{{ te(error) ? t(error) : error }}</v-alert>
       </v-card-text>
 
       <v-card-text>
+
         <v-row>
           <v-col
               v-for="field in aFields"
@@ -113,9 +112,9 @@ const {
               <crud-form-field
                   :field="field"
                   :entity="entity"
-                  v-model="valueModel[field.name]"
+                  v-model="form[field.name]"
                   :clearable="false"
-                  :readonly="readonly || field.readonly"
+                  :readonly="['delete','view'].includes(operation) || field.readonly"
                   :variant="variant"
                   :prepend-inner-icon="field?.prependInnerIcon"
                   :prepend-icon="field?.prependIcon"

package/src/composables/UseCrud.ts

@@ -224,20 +224,20 @@ export function useCrud(entity: IEntityCrud) {
 
 
     function onCreate() {
-        store.setOperation("create")
         store.setForm(entity.form)
+        store.setOperation("create")
         openDialog()
     }
 
     function onEdit(item: object) {
-        store.setOperation("edit")
         store.setForm(cast({...item}))
+        store.setOperation("edit")
         openDialog()
     }
 
     function onDelete(item: object) {
-        store.setOperation("delete")
         store.setForm(cast({...item}))
+        store.setOperation("delete")
         openDialog()
     }