@afeefa/vue-app 0.0.81 → 0.0.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- 0.0.81
1
+ 0.0.83
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@afeefa/vue-app",
3
- "version": "0.0.81",
3
+ "version": "0.0.83",
4
4
  "description": "",
5
5
  "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
6
6
  "license": "MIT",
@@ -14,6 +14,7 @@
14
14
  :style="cwm_widthStyle"
15
15
  v-bind="{...$attrs, ...attrs}"
16
16
  :rules="validationRules"
17
+ :error-messages="errorMessages"
17
18
  :readonly="type === 'month'"
18
19
  v-on="on"
19
20
  @input="dateInputChanged"
@@ -45,10 +46,13 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
45
46
  export default class ADatePicker extends Mixins(ComponentWidthMixin) {
46
47
  value_ = null
47
48
  menu = false
49
+ errorMessages = []
48
50
 
49
51
  created () {
50
52
  if (this.value) {
51
53
  this.value_ = this.value
54
+ } else {
55
+ this.value_Changed() // force validation if date is null
52
56
  }
53
57
  this.$emit('input', this.value_)
54
58
  }
@@ -65,6 +69,21 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
65
69
  this.value_ = this.value
66
70
  }
67
71
 
72
+ @Watch('value_')
73
+ value_Changed () { // validate on any change
74
+ this.errorMessages = []
75
+ if (this.validator) {
76
+ const rules = this.validator.getRules(this.label)
77
+ for (const rule of rules) {
78
+ const message = rule(this.value_)
79
+ if (typeof message === 'string') {
80
+ this.errorMessages.push(message)
81
+ break
82
+ }
83
+ }
84
+ }
85
+ }
86
+
68
87
  get date () {
69
88
  return this.value_
70
89
  ? this.value_.toISOString().substr(0, this.type === 'month' ? 7 : 10)
@@ -112,23 +131,15 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
112
131
  }
113
132
 
114
133
  get validationRules () {
115
- const dateFormat = v => {
116
- if (v && !this.isDate(v)) {
117
- return 'Das Datum sollte das Format TT.MM.JJJJ haben.'
118
- }
119
- return true
120
- }
121
-
122
- let rules = []
123
- if (this.validator) {
124
- rules = this.validator.getRules(this.label)
125
- }
126
-
127
134
  if (this.type !== 'month') {
128
- rules.push(dateFormat)
135
+ const dateFormat = v => {
136
+ if (v && !this.isDate(v)) {
137
+ return 'Das Datum sollte das Format TT.MM.JJJJ haben.'
138
+ }
139
+ return true
140
+ }
141
+ return [dateFormat]
129
142
  }
130
-
131
- return rules
132
143
  }
133
144
  }
134
145
  </script>