@afeefa/vue-app 0.0.81 → 0.0.83

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.81
+0.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.81",
+  "version": "0.0.83",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/components/ADatePicker.vue

@@ -14,6 +14,7 @@
         :style="cwm_widthStyle"
         v-bind="{...$attrs, ...attrs}"
         :rules="validationRules"
+        :error-messages="errorMessages"
         :readonly="type === 'month'"
         v-on="on"
         @input="dateInputChanged"
@@ -45,10 +46,13 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   value_ = null
   menu = false
+  errorMessages = []
 
   created () {
     if (this.value) {
       this.value_ = this.value
+    } else {
+      this.value_Changed() // force validation if date is null
     }
     this.$emit('input', this.value_)
   }
@@ -65,6 +69,21 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
     this.value_ = this.value
   }
 
+  @Watch('value_')
+  value_Changed () { // validate on any change
+    this.errorMessages = []
+    if (this.validator) {
+      const rules = this.validator.getRules(this.label)
+      for (const rule of rules) {
+        const message = rule(this.value_)
+        if (typeof message === 'string') {
+          this.errorMessages.push(message)
+          break
+        }
+      }
+    }
+  }
+
   get date () {
     return this.value_
       ? this.value_.toISOString().substr(0, this.type === 'month' ? 7 : 10)
@@ -112,23 +131,15 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   }
 
   get validationRules () {
-    const dateFormat = v => {
-      if (v && !this.isDate(v)) {
-        return 'Das Datum sollte das Format TT.MM.JJJJ haben.'
-      }
-      return true
-    }
-
-    let rules = []
-    if (this.validator) {
-      rules = this.validator.getRules(this.label)
-    }
-
     if (this.type !== 'month') {
-      rules.push(dateFormat)
+      const dateFormat = v => {
+        if (v && !this.isDate(v)) {
+          return 'Das Datum sollte das Format TT.MM.JJJJ haben.'
+        }
+        return true
+      }
+      return [dateFormat]
     }
-
-    return rules
   }
 }
 </script>