@drax/crud-vue 3.1.0 → 3.2.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.1.0",
+  "version": "3.2.0",
   "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.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "262ea8f861c84ca1ad4d555545c5a94b95dbf25e"
+  "gitHead": "8446a621e05bc1f4fd080c814a3ebdd7ae8a626b"
 }

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/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

@@ -23,7 +23,7 @@ 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 +43,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'},
@@ -120,6 +121,7 @@ const hasHideDetails = computed(()=>{
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        @input="onInput"
         @update:modelValue="$emit('updateValue')"
     />
 
@@ -146,6 +148,7 @@ const hasHideDetails = computed(()=>{
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        @input="onInput"
         @update:modelValue="$emit('updateValue')"
     />
 
@@ -169,10 +172,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"
+        @input="onInput"
+        @update:modelValue="$emit('updateValue')"
     />
 
 

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]) {