@afeefa/vue-app 0.0.92 → 0.0.93

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

@@ -1 +1 @@
-0.0.92
+0.0.93

package/package.json

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

package/src/components/ARichTextArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['a-rich-text-editor a-text-input', {'a-text-input-focused': focus}]">
+  <div :class="['a-rich-text-editor a-text-input', {'a-text-input-focused': editorFocus}]">
     <div
       v-if="editor"
       class="menu-bar"
@@ -7,7 +7,7 @@
       <div>
         <v-btn
           small
-          :class="['menu-button', {'is-active': focus && editor.isActive('bold')}]"
+          :class="['menu-button', {'is-active': editorFocus && editor.isActive('bold')}]"
           title="fett"
           @click="editor.chain().focus().toggleBold().run()"
         >
@@ -16,7 +16,7 @@
 
         <v-btn
           small
-          :class="['menu-button', {'is-active': focus && editor.isActive('italic')}]"
+          :class="['menu-button', {'is-active': editorFocus && editor.isActive('italic')}]"
           title="kursiv"
           @click="editor.chain().focus().toggleItalic().run()"
         >
@@ -25,7 +25,7 @@
 
         <v-btn
           small
-          :class="['menu-button', 'strike', {'is-active': focus && editor.isActive('strike')}]"
+          :class="['menu-button', 'strike', {'is-active': editorFocus && editor.isActive('strike')}]"
           title="durchgestrichen"
           @click="editor.chain().focus().toggleStrike().run()"
         >
@@ -34,7 +34,7 @@
 
         <v-btn
           small
-          :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 1})}]"
+          :class="['menu-button', {'is-active': editorFocus && editor.isActive('heading', {level: 1})}]"
           title="überschrift 1"
           @click="editor.chain().focus().toggleHeading({level: 1}).run()"
         >
@@ -43,7 +43,7 @@
 
         <v-btn
           small
-          :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 2})}]"
+          :class="['menu-button', {'is-active': editorFocus && editor.isActive('heading', {level: 2})}]"
           title="pberschrift 2"
           @click="editor.chain().focus().toggleHeading({level: 2}).run()"
         >
@@ -52,7 +52,7 @@
 
         <v-btn
           small
-          :class="['menu-button', {'is-active': focus && editor.isActive('bulletList')}]"
+          :class="['menu-button', {'is-active': editorFocus && editor.isActive('bulletList')}]"
           title="punkt-liste"
           @click="editor.chain().focus().toggleBulletList().run()"
         >
@@ -61,7 +61,7 @@
 
         <v-btn
           small
-          :class="['menu-button', {'is-active': focus && editor.isActive('orderedList')}]"
+          :class="['menu-button', {'is-active': editorFocus && editor.isActive('orderedList')}]"
           title="nummerierte liste"
           @click="editor.chain().focus().toggleOrderedList().run()"
         >
@@ -70,7 +70,7 @@
 
         <v-btn
           small
-          :class="['menu-button', {'is-active': focus && editor.isActive('blockquote')}]"
+          :class="['menu-button', {'is-active': editorFocus && editor.isActive('blockquote')}]"
           title="zitat"
           @click="editor.chain().focus().toggleBlockquote().run()"
         >
@@ -80,10 +80,10 @@
         <v-btn
           small
           class="menu-button"
-          :class="{ 'is-active': editor.isActive('textStyle', { color: '#0000FF' })}"
-          title="rot"
-          color="red--text"
-          @click="editor.chain().focus().setColor('#0000FF').run()"
+          :class="{ 'is-active': editorFocus && editorSelectionIs('#0000FF')}"
+          title="blau"
+          color="blue--text"
+          @click="editorSelectionIs('#0000FF') ? editor.chain().focus().unsetColor().run() : editor.chain().focus().setColor('#0000FF').run()"
         >
           <v-icon>$paletteIcon</v-icon>
         </v-btn>
@@ -91,10 +91,10 @@
         <v-btn
           small
           class="menu-button"
-          :class="{ 'is-active': editor.isActive('textStyle', { color: '#FF0000' })}"
-          title="blau"
-          color="blue--text"
-          @click="editor.chain().focus().setColor('#FF0000').run()"
+          :class="{ 'is-active': editorFocus && editorSelectionIs('#FF0000')}"
+          title="rot"
+          color="red--text"
+          @click="editorSelectionIs('#FF0000') ? editor.chain().focus().unsetColor().run() : editor.chain().focus().setColor('#FF0000').run()"
         >
           <v-icon>$paletteIcon</v-icon>
         </v-btn>
@@ -118,7 +118,7 @@
 
     <editor-content
       :editor="editor"
-      :class="['a-rich-text-editor', {focus}]"
+      :class="['a-rich-text-editor', {editorFocus}]"
     />
   </div>
 </template>
@@ -144,7 +144,7 @@ import { Color } from '@tiptap/extension-color'
 import TextStyle from '@tiptap/extension-text-style'
 
 @Component({
-  props: ['value', 'validator'],
+  props: ['value', 'validator', 'focus'],
   components: {
     EditorContent
   }
@@ -153,7 +153,7 @@ export default class ARichTextArea extends Vue {
   editor = null
   internalValue = null
   initialValue = null
-  focus = false
+  editorFocus = false
 
   boldIcon = mdiFormatBold
   italicIcon = mdiFormatItalic
@@ -171,13 +171,20 @@ export default class ARichTextArea extends Vue {
     this.internalValue = this.value
   }
 
+  changed () {
+    console.log('Changed')
+  }
+
   mounted () {
+    this.editorFocus = !!this.focus
+
     if (this.validator) {
       this.$refs.input.validate(true)
     }
 
     this.editor = new Editor({
       content: this.internalValue,
+      autofocus: this.focus ? 'end' : false,
       extensions: [
         StarterKit,
         TextStyle,
@@ -187,11 +194,11 @@ export default class ARichTextArea extends Vue {
         this.$emit('input', this.editor.getHTML())
       },
       onFocus: ({ editor, event }) => {
-        this.focus = true
+        this.editorFocus = true
         this.$emit('focus')
       },
       onBlur: ({ editor, event }) => {
-        this.focus = false
+        this.editorFocus = false
         this.$emit('blur')
       }
     })
@@ -201,6 +208,10 @@ 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
@@ -216,6 +227,10 @@ export default class ARichTextArea extends Vue {
     const isSame = this.editor.getHTML() === this.internalValue
     if (!isSame) {
       this.editor.commands.setContent(this.internalValue, false)
+      // witch reusing the editor component, we need to restore the focus state
+      if (this.focus && this.focus === true) {
+        this.editor.commands.focus('end')
+      }
     }
   }
 

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

@@ -1,5 +1,9 @@
 <template>
-  <a-rich-text-area v-model="model[name]">
+  <a-rich-text-area
+    v-model="model[name]"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
     <template #buttons>
       <slot name="buttons" />
     </template>

package/src-admin/components/form/RemoveButton.vue

@@ -4,14 +4,14 @@
       <v-btn
         :class="'a-btn-standard removeButton-' + dialogId"
         fab
-        small
         :color="(hover ? 'red' : 'grey lighten-3')"
         :title="title"
+        v-bind="{ small: isSmall, ...$attrs}"
         @click="remove"
       >
         <v-icon
           class="white--hover"
-          size="1.3rem"
+          :size="iconSize || '1.3rem'"
         >
           $trashCanIcon
         </v-icon>
@@ -44,13 +44,17 @@ import { DialogEvent } from '@a-vue/events'
 import { randomCssClass } from '@a-vue/utils/random'
 
 @Component({
-  props: ['title', 'message', 'info', 'itemTitle', 'protect']
+  props: ['iconSize', 'title', 'message', 'info', 'itemTitle', 'protect']
 })
 export default class EditPage extends Vue {
   dialogId = randomCssClass(10)
   removeKey = null
   removeConfirmed = null
 
+  get isSmall () {
+    return Object.keys(this.$attrs).filter(k => k.match(/x-small|default|large|x-large/)).length === 0
+  }
+
   async remove () {
     if (this.protect) {
       this.removeKey = [...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('')

package/src-admin/styles.scss

@@ -59,6 +59,10 @@
   opacity: .08;
 }
 
+.theme--light.v-input .error--text {
+  color: #616161 !important;
+}
+
 .theme--light.v-btn.v-btn--disabled,
 .theme--light.v-btn.v-btn--disabled span,
 .theme--light.v-btn.v-btn--disabled .v-icon,
@@ -66,6 +70,11 @@
   color: white !important;
 }
 
+.theme--light.v-btn:focus-visible {
+  outline: 2px solid #1976d2;
+}
+
+
 .theme--light.v-btn.v-btn--disabled.v-btn--has-bg {
   background-color: #EEEEEE !important;
 }