@afeefa/vue-app 0.0.96 → 0.0.98

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

@@ -1 +1 @@
-0.0.96
+0.0.98

package/package.json

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

package/src/components/ADatePicker.vue

@@ -58,10 +58,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   }
 
   mounted () {
-    if (this.validator) {
-      this.$refs.input.validate(true)
-    }
-    this.$refs.input.validate(true)
+    this.validate()
   }
 
   @Watch('value')
@@ -71,6 +68,10 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
 
   @Watch('value_')
   value_Changed () { // validate on any change
+    this.validateDateValue()
+  }
+
+  validateDateValue () {
     this.errorMessages = []
     if (this.validator) {
       const rules = this.validator.getRules(this.label)
@@ -130,6 +131,10 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
     return formatDate(new Date(date))
   }
 
+  validate () {
+    this.validateDateValue()
+  }
+
   get validationRules () {
     if (this.type !== 'month') {
       const dateFormat = v => {

package/src/components/ARichTextArea.vue

@@ -80,10 +80,10 @@
         <v-btn
           small
           class="menu-button"
-          :class="{ 'is-active': editorFocus && editorSelectionIs('#0000FF')}"
+          :class="{ 'is-active': editorFocus && editor.isActive('highlight', { color: '#6161FF' })}"
           title="blau"
           color="blue--text"
-          @click="editorSelectionIs('#0000FF') ? editor.chain().focus().unsetColor().run() : editor.chain().focus().setColor('#0000FF').run()"
+          @click="editor.chain().focus().toggleHighlight({ color: '#6161FF' }).run()"
         >
           <v-icon>$paletteIcon</v-icon>
         </v-btn>
@@ -91,10 +91,10 @@
         <v-btn
           small
           class="menu-button"
-          :class="{ 'is-active': editorFocus && editorSelectionIs('#FF0000')}"
+          :class="{ 'is-active': editorFocus && editor.isActive('highlight', { color: '#FF0000' })}"
           title="rot"
           color="red--text"
-          @click="editorSelectionIs('#FF0000') ? editor.chain().focus().unsetColor().run() : editor.chain().focus().setColor('#FF0000').run()"
+          @click="editor.chain().focus().toggleHighlight({ color: '#FF0000' }).run()"
         >
           <v-icon>$paletteIcon</v-icon>
         </v-btn>
@@ -141,7 +141,7 @@ import {
   mdiRotateRight
 } from '@mdi/js'
 import { Color } from '@tiptap/extension-color'
-import TextStyle from '@tiptap/extension-text-style'
+import Highlight from '@tiptap/extension-highlight'
 
 @Component({
   props: ['value', 'validator', 'focus'],
@@ -183,7 +183,7 @@ export default class ARichTextArea extends Vue {
       autofocus: this.focus ? 'end' : false,
       extensions: [
         StarterKit,
-        TextStyle,
+        Highlight.configure({ multicolor: true }),
         Color
       ],
       onUpdate: () => {
@@ -204,10 +204,6 @@ export default class ARichTextArea extends Vue {
     this.editor.destroy()
   }
 
-  editorSelectionIs (color) {
-    return this.editor.isActive('textStyle', { color: color })
-  }
-
   /**
    * reset the text area to disable the undo button
    * e.g. after saving the form while keeping it open

package/src/components/form/EditForm.vue

@@ -32,10 +32,15 @@ export default class EditForm extends Vue {
   lastJson = null
   forcedUnchange = false
 
+
   created () {
     this.reset()
   }
 
+  validate () {
+    this.$refs.form.validate()
+  }
+
   getField = name => {
     const modelType = this.$apiResources.getType(this.model.type)
     const update = !!this.model.id

package/src/components/form/FormFieldMixin.js

@@ -100,9 +100,7 @@ export class FormFieldMixin extends Vue {
   get validator () {
     const validator = this.field.getValidator()
     if (this.additionalRules) {
-      this.additionalRules.forEach(validate => {
-        validator.addRule(validate)
-      })
+      validator.setAdditionalRules(this.additionalRules)
     }
     return this.field.getValidator()
   }

package/src/components/form/fields/FormFieldDate.vue

@@ -1,9 +1,11 @@
 <template>
   <a-date-picker
+    ref="datePicker"
     v-model="model[name]"
     :label="label || name"
     :validator="validator"
     v-bind="$attrs"
+    v-on="$listeners"
   />
 </template>
 
@@ -13,5 +15,8 @@ import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component
 export default class FormFieldDate extends Mixins(FormFieldMixin) {
+  validate () {
+    this.$refs.datePicker.validate()
+  }
 }
 </script>

package/src/services/escape/CascadingWindowEventDispatcher.js

@@ -5,6 +5,7 @@
  */
 
 class CascadingWindowEventDispatcher {
+  windowListeners = {}
   listeners = {}
 
   addEventListener (event, listener) {
@@ -12,9 +13,7 @@ class CascadingWindowEventDispatcher {
       this.listeners[event] = []
     }
 
-    if (!this.listeners[event].length) {
-      this.listeners[event] = []
-
+    if (!this.windowListeners[event]) {
       window.addEventListener(event, e => {
         for (const listener of this.listeners[event]) {
           const result = listener(e)
@@ -23,6 +22,8 @@ class CascadingWindowEventDispatcher {
           }
         }
       })
+
+      this.windowListeners[event] = true
     }
 
     this.listeners[event].unshift(listener)