@afeefa/vue-app 0.0.135 → 0.0.137

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

@@ -1 +1 @@
-0.0.135
+0.0.137

package/package.json

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

package/src/components/ADatePicker.vue

@@ -75,7 +75,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
   }
 
   get clearable () {
-    if (this.validator && this.validator.param('null') === false) {
+    if (this.validator && this.validator.getParam('filled')) {
       return false
     }
     return true

package/src/components/ARichTextArea.vue

@@ -235,7 +235,7 @@ export default class ARichTextArea extends Vue {
     if (!this.validator) {
       return false
     }
-    return this.validator.getParams().max || false
+    return this.validator.getParam('max') || false
   }
 
   get currentValueStripped () {

package/src/components/ATextArea.vue

@@ -31,7 +31,7 @@ export default class ATextArea extends Vue {
     if (!this.validator) {
       return false
     }
-    return this.validator.getParams().max || false
+    return this.validator.getParam('max') || false
   }
 }
 </script>

package/src/components/ATextField.vue

@@ -9,6 +9,7 @@
     @input="inputChanged"
     @keyup.esc="clear"
     @click:clear="clear"
+    @blur="sanitizeInternalValue"
     v-on="listeners"
   />
 </template>
@@ -54,12 +55,17 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
 
   @Watch('value')
   valueChanged () {
+    const value = this.textFieldValueToModelValue()
+    if (value === this.value) {
+      // return if sanitized textfield value === model value
+      return
+    }
     this.setInternalValue(this.value)
   }
 
   get listeners () {
-    // remove input from nested listening
-    // let clients listend to only THIS component
+    // remove @input from nested listening
+    // let clients listen to only THIS component
     const listeners = {...this.$listeners}
     delete listeners.input
     return listeners
@@ -76,11 +82,15 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
     return attrs
   }
 
-  clear () {
+  clear (event) {
     if (this.clearable) {
+      // empty value if value exists
+      if (this.internalValue) {
+        event.stopPropagation()
+      }
       this.setInternalValue('')
-      this.$emit('input', this.emptyValue)
-      this.validate()
+      this.$emit('input:internal', '')
+      this.$emit('input', this.emptyModelValue)
       this.$emit('clear')
     }
   }
@@ -89,12 +99,11 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
     this.$emit('input:internal', this.internalValue)
 
     const valid = this.validate()
-
     if (!valid) {
       return
     }
 
-    const value = this.stringToNumber(this.internalValue)
+    const value = this.textFieldValueToModelValue()
 
     // NaN means: wrong numerical value AND no validator present
     // otherwise validator would return validate() -> false
@@ -114,30 +123,11 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
     }
   }
 
-  stringToNumber (value) {
-    if (this.treatAsNumericValue) {
-      if (!value) {
-        value = null
-      } else {
-        value = this.internalValue.match(/^-?\d*(\.\d+)?$/) ? parseFloat(this.internalValue) : NaN
-      }
-    }
-    return value
-  }
-
-  get type () {
-    return this.$attrs.type || 'text'
-  }
-
-  get treatAsNumericValue () {
-    return this.type === 'number' || this.number
-  }
-
   validate () {
+    const value = this.textFieldValueToModelValue()
     const rules = this.validationRules
     let errorMessage = null
     for (const rule of rules) {
-      const value = this.stringToNumber(this.internalValue)
       const result = rule(value)
       if (result !== true) {
         errorMessage = result
@@ -155,6 +145,49 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
     this.setFocus()
   }
 
+  sanitizeInternalValue () {
+    const sanitizedValue = this.getSanitizedInternalValue()
+    this.setInternalValue(sanitizedValue)
+  }
+
+  getSanitizedInternalValue () {
+    return this.getSanitizedValue(this.internalValue)
+  }
+
+  getSanitizedValue (value) {
+    if (this.validator) {
+      const sanitizers = this.validator.getSanitizers()
+      for (const sanitizer of sanitizers) {
+        value = sanitizer(value)
+      }
+    }
+    return value
+  }
+
+  textFieldValueToModelValue () {
+    const sanitizedValue = this.getSanitizedInternalValue()
+    return this.stringToNumber(sanitizedValue)
+  }
+
+  stringToNumber (value) {
+    const textFieldType = this.$attrs.type || 'text'
+    const treatAsNumericValue = textFieldType === 'number' || this.number
+
+    if (treatAsNumericValue) {
+      if (!value) {
+        value = null
+      } else {
+        value = this.internalValue.match(/^-?\d*(\.\d+)?$/) ? parseFloat(this.internalValue) : NaN
+      }
+    } else {
+      if (!value) {
+        value = this.emptyModelValue
+      }
+    }
+
+    return value
+  }
+
   setFocus (force = false) {
     const focus = this.focus || force // set focus if this.focus or else if forced from outside
     if (focus) {
@@ -186,9 +219,9 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
     return this.validator.getMaxValueLength()
   }
 
-  get emptyValue () {
+  get emptyModelValue () {
     if (this.validator) {
-      return this.validator.getEmptyValue()
+      return this.getSanitizedValue('')
     }
     return null
   }

package/src/components/form/FormFieldMixin.js

@@ -64,7 +64,7 @@ export class FormFieldMixin extends Vue {
 
       const options = []
 
-      if (!this.validator || !this.validator.getParams().filled) {
+      if (!this.validator || !this.validator.getParam('filled')) {
         options.push({
           itemText: 'Keine Auswahl',
           itemValue: null

package/src-admin/components/App.vue

@@ -252,6 +252,7 @@ export default class App extends Vue {
   width: 100%;
   left: 0;
   top: 0;
+  height:40px;
   padding: .2rem 1.1rem;
   background-color: white;
 }