@drax/crud-vue 0.5.3 → 0.5.5

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.3",
+  "version": "0.5.5",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,9 +24,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.5.1",
+    "@drax/common-front": "^0.5.5",
     "@drax/crud-front": "^0.5.3",
-    "@drax/crud-share": "^0.5.3"
+    "@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": "56ea5a743bce196d6322ae6c26ea5b041450d7a3"
+  "gitHead": "c89751dd8eb2ede7d565b596f698c2b83e0c2fed"
 }

package/src/EntityCrud.ts

@@ -40,6 +40,14 @@ class EntityCrud implements IEntityCrud{
     ]
   }
 
+  get createFields(){
+    return this.fields
+  }
+
+  get updateFields(){
+    return this.fields
+  }
+
   get filters():IEntityCrudFilter[]{
     return [
       {name: '_id', type: 'string', label: 'ID', default: '', operator: 'eq' },
@@ -104,6 +112,10 @@ class EntityCrud implements IEntityCrud{
       return field && this.rules[field] && this.rules[field].length > 0 ? this.rules[field] : undefined
   }
 
+  get isViewable(){
+    return true
+  }
+
   get isEditable(){
     return true
   }

package/src/components/Crud.vue

@@ -12,7 +12,7 @@ const {entity} = defineProps({
 })
 
 const {
-  onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
+  onView, onCreate, onEdit, onDelete, onCancel, onSubmit, resetCrudStore,
   operation, dialog, form, notify, error, message, doExport,
   prepareFilters
 } = useCrud(entity);
@@ -34,12 +34,20 @@ onBeforeMount(() => {
           @edit="onEdit"
           @delete="onDelete"
           @export="doExport"
+          @view="onView"
       >
         <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/CrudAutocomplete.vue

@@ -3,16 +3,20 @@ import {debounce} from "@drax/common-front"
 import { type PropType, type Ref} from "vue";
 import {ref, onBeforeMount} from "vue";
 import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
-import {VDateInput} from "vuetify/lib/labs/VDateInput";
 
 const valueModel = defineModel<string | string[]>({type: [String, Array], required: false})
 
 const {entity, multiple} = defineProps({
   entity: {type: Object as PropType<IEntityCrud|undefined>, required: true},
   field: {type: Object as PropType<IEntityCrudField>, required: true},
+  prependIcon: {type: String},
+  prependInnerIcon: {type: String},
+  appendIcon: {type: String},
+  appendInnerIcon: {type: String},
   multiple: {type: Boolean, default: false},
   chips: {type: Boolean, default: false},
   closableChips: {type: Boolean, default: true},
+  readonly: {type: Boolean, default: false},
   clearable: {type: Boolean, default: true},
   label: {type: String},
   itemValue: {type: [String], default: '_id'},
@@ -34,63 +38,59 @@ const items: Ref<Array<any>> = ref([])
 
 const debouncedSearch = debounce(search, 300)
 
-onBeforeMount(async () => {
-  if(valueModel.value && valueModel.value.length > 0){
-
-    if(multiple && Array.isArray(valueModel.value) ){
-      items.value = valueModel.value
-
-      // valueModel.value = valueModel.value.map((item:any) => item._id)
-      await findByIds(valueModel.value)
-    }else if(!Array.isArray(valueModel.value)){
-      // items.value = [valueModel.value]
-      await findByIds([valueModel.value])
-    }
-
-
-
-  }
-})
-
-async function findByIds(ids: Array<string> = []) {
+async function search(value: any) {
   try{
+    loading.value = true
     if(!entity){
       throw new Error('Entity is required')
     }
-    if(!entity.provider){
-      throw new Error('Provider is not defined')
-    }
-    if (typeof entity.provider.findByIds !== 'function') {
-      throw new Error('Provider does not have a findByIds method');
+    if(!entity.provider.search){
+      throw new Error('Provider does not have a search method')
     }
-    loading.value = true
-    items.value = await entity.provider.findByIds(ids)
+    items.value = await entity.provider.search(value)
   }catch (e){
     console.error(e)
   }finally{
     loading.value = false
   }
+
 }
 
+onBeforeMount(async () => {
 
-async function search(value: any) {
+  await search('')
+  await checkIds()
+})
+
+async function checkIds(ids: Array<string> = []) {
   try{
-    loading.value = true
-    if(!entity){
-      throw new Error('Entity is required')
-    }
-    if(!entity.provider.search){
-      throw new Error('Provider does not have a search method')
+
+    if(valueModel.value) {
+      let ids = Array.isArray(valueModel.value) ? valueModel.value : [valueModel.value]
+      for (let id of ids) {
+        if (!items.value.some((item: any) => item._id === id)) {
+          if (!entity) {
+            throw new Error('CrudAutocomplete Entity is required')
+          }
+          if (!entity.provider) {
+            throw new Error('CrudAutocomplete Provider is not defined')
+          }
+          if (typeof entity.provider.findById !== 'function') {
+            throw new Error('CrudAutocomplete Provider does not have a findById method');
+          }
+          let item = await entity.provider.findById(id)
+          items.value.push(item)
+        }
+      }
     }
-    items.value = await entity.provider.search(value)
   }catch (e){
     console.error(e)
-  }finally{
-    loading.value = false
   }
-
 }
 
+
+
+
 defineEmits(['updateValue'])
 
 </script>
@@ -108,6 +108,7 @@ defineEmits(['updateValue'])
       :item-title="itemTitle"
       :loading="loading"
       :rules="rules"
+      :readonly="readonly"
       :density="density"
       :variant="variant"
       :hide-details="hideDetails"
@@ -116,6 +117,10 @@ defineEmits(['updateValue'])
       :error-messages="errorMessages"
       @update:search="debouncedSearch"
       @update:modelValue="$emit('updateValue')"
+      :prepend-icon="prependIcon"
+      :append-icon="appendIcon"
+      :prepend-inner-icon="prependInnerIcon"
+      :append-inner-icon="appendInnerIcon"
   ></v-autocomplete>
 </template>
 

package/src/components/CrudDialog.vue

@@ -1,27 +1,39 @@
 <script setup lang="ts">
-import type {TOperation} from "../interfaces/TOperation";
+import {computed} from "vue";
 import type {PropType} from "vue";
-import type {IEntityCrud} from "@drax/crud-share";
+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<TOperation>}
+  operation: {type: String as PropType<IEntityCrudOperation>}
 })
 
 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/CrudFilters.vue

@@ -39,6 +39,7 @@ const emit = defineEmits(['filter', 'clear','updateValue'])
                 :field="filter"
                 :entity="entity"
                 v-model="valueModel[index].value"
+                :clearable="true"
                 density="compact"
                 variant="outlined"
                 hide-details single-line disable-rules

package/src/components/CrudForm.vue

@@ -1,26 +1,43 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
-import  {ref} from "vue";
-import CrudFormField from "./CrudFormField.vue";
-import type {TOperation} from "../interfaces/TOperation";
-import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
+import type {IEntityCrud, IEntityCrudOperation} from "@drax/crud-share";
+import {useFormUtils} from "../composables/UseFormUtils";
+import CrudFormField from "./CrudFormField.vue";
+import {computed, defineEmits, defineModel, defineProps, ref} from "vue";
+import type { PropType} from "vue";
 import {useCrudStore} from "../stores/UseCrudStore";
-const {t,te} = useI18n()
-const store = useCrudStore()
-const valueModel = defineModel({type: [Object]})
 
 
-const {entity} = defineProps({
+const {t, te} = useI18n()
+
+const valueModel = defineModel({type: [Object]})
+
+const {entity, operation} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  operation: {type: String as PropType<TOperation>, required: true},
+  operation: {type: String as PropType<IEntityCrudOperation>, required: true},
   readonly: {type: Boolean, default: false},
   error: {type: String, required: false},
 })
 
+const emit = defineEmits(['submit', 'cancel'])
+
+const store = useCrudStore()
+
 const valid = ref()
 const formRef = ref()
 
+const fields = computed(() => {
+  if(operation === 'create') {
+    return entity.createFields
+  }else if(operation === 'edit') {
+    return entity.updateFields
+  }else if(operation === 'delete') {
+    return entity.updateFields
+  }else if(operation === 'view') {
+    return entity.updateFields
+  }
+})
+
 async function submit() {
   store.resetErrors()
   await formRef.value.validate()
@@ -35,7 +52,10 @@ function cancel() {
   emit('cancel')
 }
 
-const emit = defineEmits(['submit', 'cancel'])
+const  {
+  variant, submitColor, readonly
+} = useFormUtils(operation)
+
 
 </script>
 
@@ -48,12 +68,20 @@ const emit = defineEmits(['submit', 'cancel'])
       <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 entity.fields" :key="field.name">
+        <template v-for="field in fields" :key="field.name">
           <crud-form-field
               :field="field"
               :entity="entity"
               v-model="valueModel[field.name]"
+              :clearable="false"
+              :readonly="readonly"
+              :variant="variant"
+              :prepend-inner-icon="field?.prependInnerIcon"
+              :prepend-icon="field?.prependIcon"
+              :append-icon="field?.appendIcon"
+              :append-inner-icon="field?.appendInnerIcon"
           />
         </template>
       </v-card-text>
@@ -61,7 +89,7 @@ const emit = defineEmits(['submit', 'cancel'])
       <v-card-actions>
         <v-spacer></v-spacer>
         <v-btn variant="text" color="grey" @click="cancel">{{ t('action.cancel') }}</v-btn>
-        <v-btn variant="flat" color="primary" @click="submit">
+        <v-btn variant="flat" v-if="operation != 'view'" :color="submitColor" @click="submit">
           {{ operation ? t('action.' + operation) : t('action.sent') }}
         </v-btn>
       </v-card-actions>

package/src/components/CrudFormField.vue

@@ -16,10 +16,14 @@ const valueModel = defineModel<any>({type: [String, Number, Boolean, Object, Arr
 const {index, entity, field, disableRules} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
   field: {type: Object as PropType<IEntityCrudField|IEntityCrudFilter|undefined>, required: true},
+  prependIcon: {type: String, default: ''},
+  prependInnerIcon: {type: String, default: ''},
+  appendIcon: {type: String, default: ''},
+  appendInnerIcon: {type: String, default: ''},
   readonly: {type: Boolean, default: false},
   hideDetails: {type: Boolean, default: false},
   singleLine: {type: Boolean, default: false},
-  clearable: {type: Boolean, default: true},
+  clearable: {type: Boolean, default: false},
   disableRules: {type: Boolean, default: false},
   index: {type: Number, default: 0},
   density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
@@ -35,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
 })
 
@@ -69,9 +73,12 @@ defineEmits(['updateValue'])
         :clearable="clearable"
         :hide-details="hideDetails"
         :single-line="singleLine"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
         @update:modelValue="$emit('updateValue')"
-    >
-    </v-text-field>
+    />
 
     <v-text-field
         v-if="field.type === 'number'"
@@ -88,10 +95,13 @@ defineEmits(['updateValue'])
         :hide-details="hideDetails"
         :single-line="singleLine"
         @update:modelValue="$emit('updateValue')"
-    >
-    </v-text-field>
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
+    />
 
-    <v-checkbox
+    <v-switch
         v-if="field.type === 'boolean'"
         :name="name"
         :label="label"
@@ -105,8 +115,12 @@ defineEmits(['updateValue'])
         :hide-details="hideDetails"
         :single-line="singleLine"
         @update:modelValue="$emit('updateValue')"
-    >
-    </v-checkbox>
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
+        color="primary"
+    />
 
 
     <v-date-input
@@ -117,8 +131,6 @@ defineEmits(['updateValue'])
         v-model="valueModel"
         :readonly="readonly"
         :error-messages="inputErrors"
-        prepend-inner-icon="mdi-calendar"
-        prepend-icon=""
         :rules="rules"
         :density="density"
         :variant="variant"
@@ -126,6 +138,10 @@ defineEmits(['updateValue'])
         :hide-details="hideDetails"
         :single-line="singleLine"
         @update:modelValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
     />
 
     <crud-autocomplete
@@ -138,10 +154,15 @@ defineEmits(['updateValue'])
         :rules="rules"
         :density="density"
         :variant="variant"
+        :readonly="readonly"
         :clearable="clearable"
         :hide-details="hideDetails"
         :single-line="singleLine"
         @updateValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
     />
 
     <v-card v-if="field.type === 'object'" class="mt-3" variant="flat" border>
@@ -159,6 +180,10 @@ defineEmits(['updateValue'])
             :hide-details="hideDetails"
             :single-line="singleLine"
             @updateValue="$emit('updateValue')"
+            :prepend-icon="prependIcon"
+            :append-icon="appendIcon"
+            :prepend-inner-icon="prependInnerIcon"
+            :append-inner-icon="appendInnerIcon"
         ></crud-form-field>
       </v-card-text>
 
@@ -182,6 +207,10 @@ defineEmits(['updateValue'])
         :single-line="singleLine"
         :rules="rules"
         @update:modelValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
     >
     </v-combobox>
 
@@ -202,6 +231,10 @@ defineEmits(['updateValue'])
         :hide-details="hideDetails"
         :single-line="singleLine"
         @updateValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
     />
 
 
@@ -222,6 +255,10 @@ defineEmits(['updateValue'])
         :single-line="singleLine"
         :rules="rules"
         @update:modelValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
     >
     </v-combobox>
 

package/src/components/CrudFormList.vue

@@ -2,7 +2,6 @@
 import type {PropType} from "vue";
 import CrudFormField from "./CrudFormField.vue";
 import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
-import {VDateInput} from "vuetify/lib/labs/VDateInput";
 
 const valueModel = defineModel({type: Array, default: () => []});
 

package/src/components/CrudList.vue

@@ -8,6 +8,7 @@ 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 CrudExportList from "./CrudExportList.vue";
 import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
@@ -31,12 +32,12 @@ const actions: IEntityCrudHeader[] = [{
   title: t('action.actions'),
   key: 'actions',
   sortable: false,
-  align: 'end',
-  minWidth: '140px'
+  align: 'center',
+  minWidth: '190px'
 }]
 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]
@@ -46,6 +47,8 @@ defineExpose({
   doPaginate
 });
 
+defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
+
 </script>
 
 <template>
@@ -67,7 +70,7 @@ defineExpose({
   >
     <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
@@ -120,6 +123,15 @@ defineExpose({
 
 
     <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 && hasPermission(entity.permissions.update)"
           @click="$emit('edit', item)"
@@ -128,6 +140,7 @@ defineExpose({
           v-if="entity.isDeletable && hasPermission(entity.permissions.delete)"
           @click="$emit('delete', item)"
       />
+
     </template>
 
   </v-data-table-server>

package/src/components/buttons/CrudViewButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
+</script>
+
+<template>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props}">
+      <v-btn
+          v-bind="{ ...$attrs, ...props }"
+          icon="mdi-magnify"
+          class="mr-1"
+          variant="text"
+          color="secondary"
+          slim
+      >
+      </v-btn>
+    </template>
+      {{ t('action.view')}}
+  </v-tooltip>
+</template>
+
+<style scoped>
+
+</style>

package/src/composables/UseCrud.ts

@@ -83,13 +83,6 @@ export function useCrud(entity: IEntityCrud) {
 
 
 
-
-  function onCreate() {
-    store.setOperation("create")
-    store.setForm(entity.form)
-    store.setDialog(true)
-  }
-
   function cast(item: any){
     entity.fields.filter(field => field.type === 'date')
         .forEach(field => {
@@ -98,31 +91,44 @@ export function useCrud(entity: IEntityCrud) {
 
     entity.fields.filter(field => field.type === 'ref')
         .forEach(field => {
-          item[field.name] = item[field.name]._id
+          item[field.name] = item[field.name]?._id ? item[field.name]._id : item[field.name]
         })
 
     entity.fields.filter(field => field.type === 'array.ref')
         .forEach(field => {
-          item[field.name] = item[field.name].map(((i:any) => i._id))
+          item[field.name] = item[field.name].map(((i:any) => i?._id ? i._id : i))
         })
 
     return item
   }
 
+  function onView(item: object) {
+    store.setOperation("view")
+    store.setForm(cast({...item}))
+    openDialog()
+  }
+
+
+  function onCreate() {
+    store.setOperation("create")
+    store.setForm(entity.form)
+    openDialog()
+  }
+
   function onEdit(item: object) {
     store.setOperation("edit")
     store.setForm(cast({...item}))
-    store.setDialog(true)
+    openDialog()
   }
 
   function onDelete(item: object) {
     store.setOperation("delete")
     store.setForm(cast({...item}))
-    store.setDialog(true)
+    openDialog()
   }
 
   function onCancel() {
-    store.setDialog(false)
+    closeDialog()
     store.setError("")
     store.setInputErrors(null)
   }
@@ -130,6 +136,9 @@ export function useCrud(entity: IEntityCrud) {
   function onSubmit(formData: any) {
     store.setInputErrors(null)
     switch (store.operation) {
+      case "view":
+        closeDialog()
+        break
       case "create":
         doCreate(formData)
         break
@@ -142,11 +151,19 @@ export function useCrud(entity: IEntityCrud) {
     }
   }
 
+  function openDialog() {
+    store.setDialog(true)
+  }
+
+  function closeDialog() {
+    store.setDialog(false)
+  }
+
   async function doCreate(formData: any) {
     try {
       await entity?.provider.create(formData)
       await doPaginate()
-      store.setDialog(false)
+      closeDialog()
       store.showMessage("Entity created successfully!")
     } catch (e: any) {
       if(e.inputErrors){
@@ -162,7 +179,7 @@ export function useCrud(entity: IEntityCrud) {
     try {
       await entity?.provider.update(formData._id, formData)
       await doPaginate()
-      store.setDialog(false)
+      closeDialog()
       store.showMessage("Entity updated successfully!")
     } catch (e: any) {
       console.log("inputErrors", e.inputErrors)
@@ -179,7 +196,7 @@ export function useCrud(entity: IEntityCrud) {
     try {
       await entity?.provider.delete(formData._id)
       await doPaginate()
-      store.setDialog(false)
+      closeDialog()
       store.showMessage("Entity deleted successfully!")
     } catch (e: any) {
       store.setError(e.message || "An error occurred while deleting the entity")
@@ -198,7 +215,7 @@ export function useCrud(entity: IEntityCrud) {
 
 
   return {
-    doPaginate, doExport, onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
+    doPaginate, doExport, onView, onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
     operation, dialog, form, notify, error, message, formValid,
     loading, itemsPerPage, page, sortBy, search, totalItems, items,
     prepareFilters,filters,

package/src/composables/UseFormUtils.ts

@@ -0,0 +1,42 @@
+import type {IEntityCrudOperation} from "@drax/crud-share";
+import {computed} from "vue";
+
+
+export function useFormUtils(operation:IEntityCrudOperation) {
+
+    const readonly = computed(() => {
+        return operation === 'delete' || operation === 'view';
+    })
+
+    const submitColor = computed(() => {
+        if(operation === 'create') {
+            return 'primary'
+        }else if(operation === 'edit') {
+            return 'primary'
+        }else if(operation === 'delete') {
+            return 'red'
+        }else if(operation === 'view') {
+            return 'secondary'
+        }
+    })
+
+    const variant = computed(() => {
+        if(operation === 'create') {
+            return 'filled'
+        }else if(operation === 'edit') {
+            return 'filled'
+        }else if(operation === 'delete') {
+            return 'underlined'
+        }else if(operation === 'view') {
+            return 'underlined'
+        }
+    })
+
+
+
+    return {
+        readonly,
+        variant,
+        submitColor,
+    }
+}

package/src/index.ts

@@ -8,6 +8,7 @@ import CrudNotify from "./components/CrudNotify.vue";
 import CrudSearch from "./components/CrudSearch.vue";
 import {useCrudStore} from "./stores/UseCrudStore";
 import {useCrud} from "./composables/UseCrud";
+import {useFormUtils} from "./composables/UseFormUtils";
 import {EntityCrud} from "./EntityCrud";
 
 
@@ -21,6 +22,7 @@ export {
     CrudNotify,
     CrudSearch,
     useCrud,
+    useFormUtils,
     useCrudStore,
     EntityCrud
 

package/src/stores/UseCrudStore.ts

@@ -1,10 +1,10 @@
 import {defineStore} from "pinia";
-import type {TOperation} from "../interfaces/TOperation";
+import type {IEntityCrudOperation} from "@drax/crud-share";
 
 export const useCrudStore = defineStore('CrudStore', {
     state: () => (
         {
-            operation: null as TOperation,
+            operation: null as IEntityCrudOperation,
             dialog: false as boolean,
             form: {} as any,
             formValid: {} as any,
@@ -36,7 +36,7 @@ export const useCrudStore = defineStore('CrudStore', {
       }
     },
     actions: {
-        setOperation(operation: TOperation) {
+        setOperation(operation: IEntityCrudOperation) {
             this.operation = operation
         },
         setDialog(dialog: boolean) {

package/src/interfaces/TOperation.ts

@@ -1,6 +0,0 @@
-type TOperation = "create" | "edit" | "delete" | null
-
-
-export type {
-  TOperation
-}