@drax/crud-vue 3.1.0 → 3.2.1

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.1.0",
+  "version": "3.2.1",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -26,8 +26,8 @@
   "dependencies": {
     "@drax/common-front": "^3.0.0",
     "@drax/crud-front": "^3.0.0",
-    "@drax/crud-share": "^3.1.0",
-    "@drax/media-vue": "^3.1.0"
+    "@drax/crud-share": "^3.2.0",
+    "@drax/media-vue": "^3.2.1"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "262ea8f861c84ca1ad4d555545c5a94b95dbf25e"
+  "gitHead": "f6c0a2464fdd61b2434d85a097ad23bdbb1d7954"
 }

package/src/EntityCrud.ts

@@ -1,7 +1,8 @@
 import type {
   IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
   IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
-  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFieldVariant, IDraxFieldFilter
+  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFieldVariant, IDraxFieldFilter,
+  IEntityCrudOnInput
 } from "@drax/crud-share";
 
 
@@ -149,10 +150,20 @@ class EntityCrud implements IEntityCrud {
     return {}
   }
 
+
+
   getRule(field: string | undefined): Array<Function> | undefined {
     return field && this.rules[field] && this.rules[field].length > 0 ? this.rules[field] : undefined
   }
 
+  get onInputs(): IEntityCrudOnInput {
+    return {}
+  }
+
+  getOnInput(field: string | undefined): Function | undefined {
+    return (field && this.onInputs[field] && typeof this.onInputs[field] === 'function')  ? this.onInputs[field] : undefined
+  }
+
   get isViewable() {
     return true
   }

package/src/components/CrudAutocomplete.vue

@@ -27,6 +27,7 @@ const {entity, multiple} = defineProps({
   hint: {type: String},
   persistentHint: {type: Boolean, default: false},
   rules: {type: Array as PropType<any>, default: () => []},
+  onInput: {type: Function as PropType<Function>, required: false},
   errorMessages: {type: Array as PropType<string[]>, default: () => []},
   hideDetails: {type: Boolean, default: false},
   singleLine: {type: Boolean, default: false},
@@ -128,11 +129,17 @@ defineEmits(['updateValue'])
       :single-line="singleLine"
       :clearable="clearable"
       :error-messages="errorMessages"
-      @update:modelValue="$emit('updateValue')"
+      @update:modelValue="v => {
+        if(onInput && typeof onInput === 'function'){
+            onInput(v)
+        }
+        $emit('updateValue')
+      }"
       :prepend-icon="prependIcon"
       :append-icon="appendIcon"
       :prepend-inner-icon="prependInnerIcon"
       :append-inner-icon="appendInnerIcon"
+      @input="onInput"
   >
 
     <template v-if="addOnTheFly" v-slot:append>
@@ -185,11 +192,17 @@ defineEmits(['updateValue'])
       :clearable="clearable"
       :error-messages="errorMessages"
       @update:search="debouncedSearch"
-      @update:modelValue="$emit('updateValue')"
+      @update:modelValue="v => {
+        if(onInput && typeof onInput === 'function'){
+            onInput(v)
+        }
+        $emit('updateValue')
+      }"
       :prepend-icon="prependIcon"
       :append-icon="appendIcon"
       :prepend-inner-icon="prependInnerIcon"
       :append-inner-icon="appendInnerIcon"
+      @input="onInput"
   >
 
     <template v-if="addOnTheFly" v-slot:append>

package/src/components/CrudForm.vue

@@ -132,6 +132,12 @@ const rules = computed(() => {
   }
 })
 
+const onInput = computed(() => {
+  return (fieldName: string) => {
+    return entity?.getOnInput(fieldName) as Function || undefined
+  }
+})
+
 const onlyView = computed(()=> {
   return ['delete','view'].includes(operation?.value)
 })
@@ -177,6 +183,7 @@ const onlyView = computed(()=> {
                   :preview="field?.preview"
                   :previewHeight="field?.previewHeight"
                   :rules="rules(field.name)"
+                  :on-input="onInput(field.name)"
                   :hint="field.hint"
                   :persistent-hint="field.persistentHint"
                   :placeholder="field.placeholder"
@@ -226,6 +233,7 @@ const onlyView = computed(()=> {
                           :append-icon="field?.appendIcon"
                           :append-inner-icon="field?.appendInnerIcon"
                           :rules="rules(field.name)"
+                          :on-input="onInput(field.name)"
                           :hint="field.hint"
                           :persistent-hint="field.persistentHint"
                           :placeholder="field.placeholder"
@@ -284,6 +292,7 @@ const onlyView = computed(()=> {
                           :append-icon="field?.appendIcon"
                           :append-inner-icon="field?.appendInnerIcon"
                           :rules="rules(field.name)"
+                          :on-input="onInput(field.name)"
                           :hint="field.hint"
                           :persistent-hint="field.persistentHint"
                           :placeholder="field.placeholder"

package/src/components/CrudFormField.vue

@@ -16,14 +16,13 @@ import MediaField from "@drax/media-vue/src/components/MediaField.vue";
 import MediaFullField from "@drax/media-vue/src/components/MediaFullField.vue";
 
 
-
 const {t, te} = useI18n()
 
 const {hasPermission} = useAuth()
 
 const valueModel = defineModel<any>({type: [String, Number, Boolean, Object, Array], default: false})
 
-const {index, entity, field, parentField, errorMessages, rules, readonly, hideDetails} = defineProps({
+const {index, entity, field, parentField, errorMessages, rules, onInput, readonly, hideDetails} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
   field: {type: Object as PropType<IEntityCrudField | IEntityCrudFilter | undefined>, required: true},
   prependIcon: {type: String, default: ''},
@@ -43,6 +42,7 @@ const {index, entity, field, parentField, errorMessages, rules, readonly, hideDe
   previewHeight: {type: String, default: '100px'},
   parentField: {type: String, default: null, required: 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},
   index: {type: Number, default: null, required: false},
   density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
@@ -69,11 +69,10 @@ const label = computed(() => {
 })
 
 
-
 const storeErrorMessages = computed(() => {
       let sIndex = (index != null && index >= 0) ? `${index}.` : ''
       let name = parentField ? `${parentField}.${sIndex}${field.name}` : field.name
-      return store.getFieldInputErrors(name).map((error: string) =>te(error) ? t(error) : error)
+      return store.getFieldInputErrors(name).map((error: string) => te(error) ? t(error) : error)
     }
 )
 
@@ -84,10 +83,10 @@ const inputErrors = computed(() => {
 defineEmits(['updateValue'])
 
 
-const hasHideDetails = computed(()=>{
-  if(readonly){
+const hasHideDetails = computed(() => {
+  if (readonly) {
     return true
-  }else{
+  } else {
     return hideDetails ?? field.hideDetails
   }
 
@@ -120,6 +119,7 @@ const hasHideDetails = computed(()=>{
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        @input="onInput"
         @update:modelValue="$emit('updateValue')"
     />
 
@@ -147,6 +147,7 @@ const hasHideDetails = computed(()=>{
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
         @update:modelValue="$emit('updateValue')"
+        @input="onInput"
     />
 
     <v-text-field
@@ -169,10 +170,11 @@ const hasHideDetails = computed(()=>{
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
-        @update:modelValue="$emit('updateValue')"
         :type="show ? 'text' : 'password'"
         :append-inner-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
         @click:append-inner="show = !show"
+        @update:modelValue="$emit('updateValue')"
+        @input="onInput"
     />
 
 
@@ -194,12 +196,17 @@ const hasHideDetails = computed(()=>{
         :hide-details="hasHideDetails"
         :single-line="singleLine"
         :rules="rules"
-        @update:modelValue="$emit('updateValue')"
+        @update:modelValue="v => {
+          if(onInput && typeof onInput === 'function'){
+              onInput(v)
+          }
+          $emit('updateValue')
+        }"
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
-
+        @input="onInput"
     >
     </v-combobox>
 
@@ -223,12 +230,17 @@ const hasHideDetails = computed(()=>{
         :hide-details="hasHideDetails"
         :single-line="singleLine"
         :rules="rules"
-        @update:modelValue="$emit('updateValue')"
+        @update:modelValue="v => {
+          if(onInput && typeof onInput === 'function'){
+              onInput(v)
+          }
+          $emit('updateValue')
+        }"
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
-
+        @input="onInput"
     >
       <template v-slot:item="{ props: itemProps, item }">
         <v-list-item
@@ -242,7 +254,10 @@ const hasHideDetails = computed(()=>{
       </template>
 
       <template v-slot:selection="{item}">
-        <v-chip tile density="compact" :color="item.raw.color" :prepend-icon="item.raw.icon">{{ item.raw.title }}</v-chip>
+        <v-chip tile density="compact" :color="item.raw.color" :prepend-icon="item.raw.icon">{{
+            item.raw.title
+          }}
+        </v-chip>
       </template>
     </v-select>
 
@@ -270,11 +285,11 @@ const hasHideDetails = computed(()=>{
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        @input="onInput"
     >
     </v-select>
 
 
-
     <v-text-field
         v-if="field.type === 'number'"
         type="number"
@@ -298,6 +313,7 @@ const hasHideDetails = computed(()=>{
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        @input="onInput"
     />
 
     <media-field
@@ -367,6 +383,7 @@ const hasHideDetails = computed(()=>{
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
         color="primary"
+        @input="onInput"
     />
 
 
@@ -375,7 +392,8 @@ const hasHideDetails = computed(()=>{
         :name="name"
         :label="label"
         :hint="hint ?? field.hint"
-        :persistent-hint="persistentHint ?? field.persistentHint" :placeholder="placeholder ?? field.placeholder" :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
+        :persistent-hint="persistentHint ?? field.persistentHint" :placeholder="placeholder ?? field.placeholder"
+        :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
         v-model="valueModel"
         :readonly="readonly"
         :error-messages="inputErrors"
@@ -391,6 +409,9 @@ const hasHideDetails = computed(()=>{
             date.setHours(23, 59, 59, 0)
             valueModel = date
           }
+          if(onInput && typeof onInput === 'function'){
+            onInput(v)
+          }
           $emit('updateValue')
         }"
         @click:clear="() => {valueModel = null;  $emit('updateValue');} "
@@ -399,6 +420,7 @@ const hasHideDetails = computed(()=>{
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
         :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>
@@ -431,6 +453,7 @@ const hasHideDetails = computed(()=>{
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
         :add-on-the-fly="field?.addOnTheFly"
+        :on-input="onInput"
     />
 
     <v-card v-if="field.type === 'object'" class="mt-3" variant="flat" border>
@@ -439,7 +462,7 @@ const hasHideDetails = computed(()=>{
       <v-card-text>
 
         <v-row dense>
-          <v-col cols="12"  v-for="oField in field.objectFields">
+          <v-col cols="12" v-for="oField in field.objectFields">
             <crud-form-field
 
                 :entity="entity"
@@ -487,11 +510,17 @@ const hasHideDetails = computed(()=>{
         :hide-details="hasHideDetails"
         :single-line="singleLine"
         :rules="rules"
-        @update:modelValue="$emit('updateValue')"
+        @update:modelValue="v => {
+          if(onInput && typeof onInput === 'function'){
+              onInput(v)
+          }
+          $emit('updateValue')
+        }"
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        @input="onInput"
     >
     </v-combobox>
 
@@ -517,11 +546,17 @@ const hasHideDetails = computed(()=>{
         :hide-details="hasHideDetails"
         :single-line="singleLine"
         :rules="rules"
-        @update:modelValue="$emit('updateValue')"
+        @update:modelValue="v => {
+          if(onInput && typeof onInput === 'function'){
+              onInput(v)
+          }
+          $emit('updateValue')
+        }"
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        @input="onInput"
     >
     </v-combobox>
 
@@ -553,6 +588,7 @@ const hasHideDetails = computed(()=>{
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
         :add-on-the-fly="field?.addOnTheFly"
+        :on-input="onInput"
     />
 
 
@@ -565,7 +601,7 @@ const hasHideDetails = computed(()=>{
         :persistent-hint="persistentHint ?? field.persistentHint"
         :placeholder="placeholder ?? field.placeholder"
         :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
-        v-model   ="valueModel"
+        v-model="valueModel"
         :multiple="true"
         :chips="true"
         :readonly="readonly"
@@ -576,11 +612,17 @@ const hasHideDetails = computed(()=>{
         :hide-details="hasHideDetails"
         :single-line="singleLine"
         :rules="rules"
-        @update:modelValue="$emit('updateValue')"
+        @update:modelValue="v => {
+          if(onInput && typeof onInput === 'function'){
+              onInput(v)
+          }
+          $emit('updateValue')
+        }"
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        @input="onInput"
     >
     </v-combobox>
 

package/src/stores/UseCrudStore.ts

@@ -39,6 +39,14 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
         }
     ),
     getters: {
+        getFieldValue(state: any) {
+            return (fieldName: string) => {
+                if (fieldName && state.form[fieldName]) {
+                    return state.form[fieldName]
+                }
+                return undefined
+            }
+        },
         getFieldInputErrors(state: any) {
             return (fieldName: string) => {
                 if (state.inputErrors && state.inputErrors[fieldName]) {