@afeefa/vue-app 0.0.55 → 0.0.58

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

@@ -1 +1 @@
-0.0.55
+0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.55",
+  "version": "0.0.58",
   "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/list/filters/ListFilterSelect.vue

@@ -17,7 +17,9 @@ import { Component, Mixins } from '@a-vue'
 import { ListFilterMixin } from '../ListFilterMixin'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 
-@Component
+@Component({
+  props: ['itemTitle', 'itemValue']
+})
 export default class ListFilterSelect extends Mixins(ListFilterMixin) {
   items = null
 
@@ -60,10 +62,20 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
 
     return [
       ...this.createOptions(),
-      ...models.map(model => ({
-        itemTitle: model.name,
-        itemValue: model.id
-      }))
+      ...models.map(model => {
+        let itemValue
+        if (this.itemValue) {
+          itemValue = this.itemValue(model)
+        } else if (model.value !== undefined) {
+          itemValue = model.value
+        } else {
+          itemValue = model.id
+        }
+        return {
+          itemTitle: (this.itemTitle && this.itemTitle(model)) || model.name || model.title,
+          itemValue
+        }
+      })
     ]
   }
 

package/src-admin/components/list/ListView.vue

@@ -28,6 +28,7 @@
           <a-table-row
             v-for="model in models_"
             :key="model.id"
+            :class="getModelClass(model)"
           >
             <v-icon
               v-if="$has.icon"
@@ -49,6 +50,7 @@
         <div
           v-for="model in models_"
           :key="model.id"
+          :class="getModelClass(model)"
         >
           <slot
             name="model"
@@ -73,7 +75,9 @@ import { Component, Watch, Mixins } from '@a-vue'
 import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
 import { LoadingEvent } from '@a-vue/events'
 
-@Component
+@Component({
+  props: ['modelClass']
+})
 export default class ListView extends Mixins(ListViewMixin) {
   $hasOptions = ['icon']
 
@@ -89,6 +93,10 @@ export default class ListView extends Mixins(ListViewMixin) {
     this.$emit('update:isLoading', this.isLoading)
   }
 
+  getModelClass (model) {
+    return this.modelClass && this.modelClass(model)
+  }
+
   setFilter (name, value) {
     this.filters[name].value = value
   }

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>