@afeefa/vue-app 0.0.55 → 0.0.56

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

@@ -1 +1 @@
-0.0.55
+0.0.56

package/package.json

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

package/src/components/ADialog.vue

@@ -132,6 +132,8 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin) {
     if (!Array.isArray(anchor)) {
       if (typeof anchor === 'string') {
         anchor = [document.documentElement, anchor]
+      } else if (typeof anchor === 'object') { // dom element or vue ref
+        anchor = [anchor]
       } else {
         anchor = [document.documentElement]
       }

package/src/components/ARichTextArea.vue

@@ -1,28 +1,88 @@
 <template>
   <div :class="['a-rich-text-editor a-text-input', {'a-text-input-focused': focus}]">
-    <div v-if="editor">
-      <button
-        type="button"
-        :class="{ 'is-active': editor.isActive('bold') }"
+    <div
+      v-if="editor"
+      class="menu-bar"
+    >
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('bold')}]"
         @click="editor.chain().focus().toggleBold().run()"
       >
-        bold
-        <a-mdi-icon />
-      </button>
-      <button
-        type="button"
-        :class="{ 'is-active': editor.isActive('italic') }"
+        <v-icon>{{ boldIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('italic')}]"
         @click="editor.chain().focus().toggleItalic().run()"
       >
-        italic
-      </button>
-      <button
-        type="button"
-        :class="{ 'is-active': editor.isActive('strike') }"
+        <v-icon>{{ italicIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', 'strike', {'is-active': focus && editor.isActive('strike')}]"
         @click="editor.chain().focus().toggleStrike().run()"
       >
-        strike
-      </button>
+        <v-icon>{{ strikeIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 1})}]"
+        @click="editor.chain().focus().toggleHeading({level: 1}).run()"
+      >
+        <v-icon>{{ h1Icon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 2})}]"
+        @click="editor.chain().focus().toggleHeading({level: 2}).run()"
+      >
+        <v-icon>{{ h2Icon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('bulletList')}]"
+        @click="editor.chain().focus().toggleBulletList().run()"
+      >
+        <v-icon>{{ ulIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('orderedList')}]"
+        @click="editor.chain().focus().toggleOrderedList().run()"
+      >
+        <v-icon>{{ olIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('blockquote')}]"
+        @click="editor.chain().focus().toggleBlockquote().run()"
+      >
+        <v-icon>{{ commentIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        class="menu-button"
+        @click="editor.chain().focus().undo().run()"
+      >
+        <v-icon>{{ undoIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        class="menu-button"
+        @click="editor.chain().focus().redo().run()"
+      >
+        <v-icon>{{ redoIcon }}</v-icon>
+      </v-btn>
     </div>
 
     <editor-content
@@ -37,6 +97,18 @@
 import { Component, Vue, Watch } from '@a-vue'
 import { Editor, EditorContent } from '@tiptap/vue-2'
 import StarterKit from '@tiptap/starter-kit'
+import {
+  mdiFormatBold,
+  mdiFormatItalic,
+  mdiFormatStrikethroughVariant,
+  mdiFormatHeader1,
+  mdiFormatHeader2,
+  mdiFormatListBulleted,
+  mdiFormatListNumbered,
+  mdiFormatQuoteClose,
+  mdiRotateLeft,
+  mdiRotateRight
+} from '@mdi/js'
 
 @Component({
   props: ['value', 'validator'],
@@ -49,6 +121,17 @@ export default class ARichTextArea extends Vue {
   internalValue = null
   focus = false
 
+  boldIcon = mdiFormatBold
+  italicIcon = mdiFormatItalic
+  strikeIcon = mdiFormatStrikethroughVariant
+  h1Icon = mdiFormatHeader1
+  h2Icon = mdiFormatHeader2
+  ulIcon = mdiFormatListBulleted
+  olIcon = mdiFormatListNumbered
+  commentIcon = mdiFormatQuoteClose
+  undoIcon = mdiRotateLeft
+  redoIcon = mdiRotateRight
+
   created () {
     this.internalValue = this.value
   }
@@ -59,7 +142,7 @@ export default class ARichTextArea extends Vue {
     }
 
     this.editor = new Editor({
-      content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
+      content: this.internalValue,
       extensions: [
         StarterKit
       ],
@@ -118,4 +201,57 @@ export default class ARichTextArea extends Vue {
     }
   }
 }
+
+.menu-bar {
+  margin: -.2rem 0 .5rem -.2rem;
+}
+
+.menu-button {
+  padding: 0 !important;
+  width: 30px !important;
+  height: 32px !important;
+  min-width: unset !important;
+  text-align: center;
+  font-size: 1rem;
+  background: white !important;
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+
+  ::v-deep .v-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+
+  &.strike {
+    ::v-deep .v-icon {
+      width: 15px;
+    }
+  }
+
+  svg {
+    width: unset;
+  }
+
+  &.is-active {
+    background: #ECECEC !important;
+  }
+}
+
+::v-deep .ProseMirror {
+  min-height: 200px;
+
+  > :last-child {
+    margin: 0;
+  }
+
+  li p {
+    margin: 0;
+  }
+
+  ul {
+    margin: 16px 0;
+  }
+}
 </style>

package/src/components/form/EditModal.vue

@@ -21,7 +21,7 @@
 
       <template #default="{changed, valid}">
         <a-row
-          class="mt-8 mb-2 gap-4"
+          class="mt-8 mb-1 pb-1 gap-4"
           right
         >
           <v-btn
@@ -31,23 +31,25 @@
             Schließen
           </v-btn>
 
-          <v-btn
-            small
-            :disabled="!changed || !valid"
-            color="green white--text"
-            @click="save"
-          >
-            Speichern
-          </v-btn>
+          <a-row gap="2">
+            <v-btn
+              small
+              :disabled="!changed || !valid"
+              color="green white--text"
+              @click="save"
+            >
+              Speichern
+            </v-btn>
 
-          <v-btn
-            v-if="changed"
-            small
-            text
-            @click="reset"
-          >
-            Zurücksetzen
-          </v-btn>
+            <v-icon
+              v-if="changed"
+              small
+              text
+              @click="reset"
+            >
+              {{ undoIcon }}
+            </v-icon>
+          </a-row>
         </a-row>
       </template>
     </edit-form>
@@ -57,6 +59,7 @@
 
 <script>
 import { Component, Vue, Watch } from '@a-vue'
+import { mdiRotateLeft} from '@mdi/js'
 
 @Component({
   props: ['model', 'title', 'show']
@@ -64,6 +67,8 @@ import { Component, Vue, Watch } from '@a-vue'
 export default class EditModal extends Vue {
   show_ = false
 
+  undoIcon = mdiRotateLeft
+
   /**
    * visiblility changes from outside
    * this will trigger the show_ watcher,

package/src-components/AMdiIcon.vue

@@ -1,11 +1,15 @@
 <template>
-  <div>ICON</div>
+  <div>TEST</div>
 </template>
 
 
 <script>
-export default {
+import { Component, Vue } from '@a-vue'
 
+@Component({
+  props: ['name']
+})
+export default class Splash extends Vue {
 }
 </script>