@afeefa/vue-app 0.0.63 → 0.0.66

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

@@ -1 +1 @@
-0.0.63
+0.0.66

package/package.json

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

package/src/components/ABreadcrumbs.vue

@@ -1,19 +1,38 @@
 <template>
-  <div class="d-flex flex-wrap align-center">
-    <div
-      v-for="(breadcrumb, index) in breadcrumbs"
-      :key="index"
-      class="item mr-2 d-flex align-center"
-    >
-      <v-icon>$chevronRightIcon</v-icon>
-
-      <router-link
-        :to="breadcrumb.to"
-        :exact="true"
+  <div class="a-breadcrumbs d-flex align-start gap-2 mr-4">
+    <div :class="['breadcrumbs d-flex align-center', {'flex-wrap': wrapBreadcrumbs_}]">
+      <div
+        v-for="(breadcrumb, index) in breadcrumbs"
+        :key="index"
+        class="item mr-2 d-flex align-center"
       >
-        {{ getItemTitle(breadcrumb.title) }}
-      </router-link>
+        <v-icon v-if="index > 0">
+          $chevronRightIcon
+        </v-icon>
+
+        <router-link
+          :to="breadcrumb.to"
+          :exact="true"
+        >
+          {{ breadcrumb.title }}
+        </router-link>
+      </div>
     </div>
+
+    <v-avatar
+      v-if="expandVisible"
+      class="expand"
+      color="#EEE"
+      size="1.3rem"
+      @click="wrapBreadcrumbs"
+    >
+      <a-icon>$caret{{ wrapBreadcrumbs_ ? 'Up' : 'Down' }}Icon</a-icon>
+    </v-avatar>
+
+    <div
+      v-else
+      class="expandDummy"
+    />
   </div>
 </template>
 
@@ -28,6 +47,8 @@ export default class ABreadcrumbs extends Vue {
   breadcrumbs = []
   titleCache = {}
   lastRoute = null
+  expandVisible = false
+  wrapBreadcrumbs_ = false
 
   created () {
     this.$events.on(SaveEvent.STOP_SAVING, this.afterSave)
@@ -101,20 +122,46 @@ export default class ABreadcrumbs extends Vue {
     }
 
     this.breadcrumbs = breadcrumbs
+    this.wrapBreadcrumbs_ = false
+
+    this.scrollBreadcrumbs()
+  }
+
+  scrollBreadcrumbs () {
+    this.$nextTick(() => {
+      const objDiv = this.$el.querySelector('.breadcrumbs')
+      if (objDiv.scrollWidth > objDiv.offsetWidth) {
+        objDiv.scrollLeft = objDiv.scrollWidth
+        this.expandVisible = true
+      } else {
+        objDiv.scrollLeft = 0
+        this.expandVisible = false
+      }
+    })
   }
 
-  getItemTitle (title) {
-    // title = title.concat(title).concat(title)
-    if (title.length > 20) {
-      title = title.slice(0, 10).trim() + '...' + title.slice(-10).trim()
+  wrapBreadcrumbs () {
+    this.wrapBreadcrumbs_ = !this.wrapBreadcrumbs_
+    if (this.wrapBreadcrumbs_) {
+      const objDiv = this.$el.querySelector('.breadcrumbs')
+      objDiv.scrollLeft = 0
+    } else {
+      this.scrollBreadcrumbs()
     }
-    return title.toUpperCase()
   }
 }
 </script>
 
 
 <style lang="scss" scoped>
+.a-breadcrumbs {
+  overflow: hidden;
+}
+
+.breadcrumbs {
+  overflow: hidden;
+}
+
 .item {
   white-space: nowrap;
 
@@ -130,4 +177,14 @@ export default class ABreadcrumbs extends Vue {
     }
   }
 }
+
+.expand {
+  cursor: pointer;
+  margin-top: 1px;
+}
+
+.expandDummy {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 </style>

package/src/components/ADatePicker.vue

@@ -13,7 +13,7 @@
         :label="label"
         :style="cwm_widthStyle"
         readonly
-        v-bind="attrs"
+        v-bind="{...$attrs, ...attrs}"
         :rules="validationRules"
         v-on="on"
         @click.native="on.click"

package/src/components/AIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <v-icon
-    :class="{isButton}"
+    :class="{button}"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -13,17 +13,14 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['button']
+  props: [{button: false}]
 })
 export default class AIcon extends Vue {
-  get isButton () {
-    return this.button !== undefined
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-.v-icon:not(.isButton)::after {
+.v-icon:not(.button)::after {
   background: none;
 }
 </style>

package/src/components/AIconButton.vue

@@ -1,12 +1,11 @@
 <template>
   <v-btn
-    small
     v-bind="$attrs"
     v-on="$listeners"
   >
     <v-icon
       left
-      class="mr-0"
+      class="mr-1"
     >
       {{ icon }}
     </v-icon>

package/src/components/AModal.vue

@@ -7,6 +7,8 @@
     v-bind="$attrs"
     :contentClass="modalId"
     transition="v-fade-transition"
+    :persistent="true"
+    :no-click-animation="true"
     @click:outside="cancel"
     @keydown.esc="cancel"
   >
@@ -41,7 +43,7 @@ import { getZIndex } from 'vuetify/lib/util/helpers'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['show', 'title', 'triggerClass', 'anchorPosition']
+  props: ['show', 'title', 'beforeClose', 'triggerClass', 'anchorPosition']
 })
 export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentWidthMixin) {
   modalId = randomCssClass(10)
@@ -83,7 +85,15 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
    * and emit a visibility event
    */
   @Watch('show')
-  showChanged () {
+  async showChanged () {
+    // check if a modal is allowed to be closed
+    if (this.modal && !this.show && this.beforeClose) {
+      const result = await this.beforeClose()
+      if (!result) {
+        return
+      }
+    }
+
     this.modal = this.show
   }
 
@@ -121,7 +131,15 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
     this.urp_registerPositionWatcher(this.position)
   }
 
-  cancel () {
+  async cancel () {
+    // check if a modal is allowed to be closed
+    if (this.modal && this.beforeClose) {
+      const result = await this.beforeClose()
+      if (!result) {
+        return
+      }
+    }
+
     this.modal = false
   }
 

package/src/components/ARichTextArea.vue

@@ -4,85 +4,84 @@
       v-if="editor"
       class="menu-bar"
     >
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('bold')}]"
-        @click="editor.chain().focus().toggleBold().run()"
-      >
-        <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()"
-      >
-        <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()"
-      >
-        <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>
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('bold')}]"
+          @click="editor.chain().focus().toggleBold().run()"
+        >
+          <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()"
+        >
+          <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()"
+        >
+          <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"
+          :disabled="initialValue === editor.getHTML()"
+          @click="editor.chain().focus().undo().run()"
+        >
+          <v-icon>{{ undoIcon }}</v-icon>
+        </v-btn>
+      </div>
+
+      <div>
+        <slot name="buttons" />
+      </div>
     </div>
 
     <editor-content
@@ -119,6 +118,7 @@ import {
 export default class ARichTextArea extends Vue {
   editor = null
   internalValue = null
+  initialValue = null
   focus = false
 
   boldIcon = mdiFormatBold
@@ -133,6 +133,7 @@ export default class ARichTextArea extends Vue {
   redoIcon = mdiRotateRight
 
   created () {
+    this.initialValue = this.value
     this.internalValue = this.value
   }
 
@@ -158,14 +159,20 @@ export default class ARichTextArea extends Vue {
         this.$emit('blur')
       }
     })
-
-    this.editor.commands.setContent(this.internalValue, false)
   }
 
   beforeDestroy () {
     this.editor.destroy()
   }
 
+  /**
+   * reset the text area to disable the undo button
+   * e.g. after saving the form while keeping it open
+   */
+  reset () {
+    this.initialValue = this.value
+  }
+
   @Watch('value')
   valueChanged () {
     this.internalValue = this.value
@@ -192,10 +199,6 @@ export default class ARichTextArea extends Vue {
 
 
 <style lang="scss" scoped>
-.v-input:not(.v-input--is-focused) ::v-deep .v-counter {
-  display: none;
-}
-
 .a-rich-text-editor {
   ::v-deep .ProseMirror {
     &-focused {
@@ -205,9 +208,12 @@ export default class ARichTextArea extends Vue {
 }
 
 .menu-bar {
+  display: flex;
+  justify-content: space-between;
   margin: -.2rem 0 .5rem -.2rem;
 }
 
+.menu-bar .v-btn,
 .menu-button {
   padding: 0 !important;
   width: 30px !important;
@@ -239,6 +245,10 @@ export default class ARichTextArea extends Vue {
   &.is-active {
     background: #ECECEC !important;
   }
+
+  &[disabled] {
+    background: none !important;
+  }
 }
 
 ::v-deep .ProseMirror {

package/src/components/ARow.vue

@@ -58,13 +58,6 @@ export default class ARow extends Vue {
 <style scoped lang="scss">
 .a-row {
   display: flex;
-  overflow: hidden;
-  @media (max-width: 900px), (orientation : portrait) {
-    flex-wrap: wrap;
-    & > * {
-      flex: 0 0 auto;
-    }
-  }
 
   &.full {
     width: 100%;

package/src/components/ATableRow.vue

@@ -62,6 +62,10 @@ export default class ATableRow extends Vue {
     }
   }
 
+  &.selectable {
+    cursor: pointer;
+  }
+
   &:hover, &.selected {
     background: #F4F4F4;
   }

package/src/components/flying-context/FlyingContextEvent.js

@@ -0,0 +1,5 @@
+import { BaseEvent } from '@a-vue/plugins/event-bus/BaseEvent'
+
+export class FlyingContextEvent extends BaseEvent {
+  static HIDE_ALL = 'FlyingContextEvent:hide-all'
+}

package/src/components/form/EditForm.vue

@@ -4,9 +4,10 @@
     autocomplete="off"
   >
     <slot
+      name="form"
       :changed="changed"
       :valid="valid"
-      :model="modelToEdit"
+      :modelToEdit="modelToEdit"
     />
   </v-form>
 </template>
@@ -27,16 +28,22 @@ export default class EditForm extends Vue {
   modelToEdit = null
   valid = false
   lastJson = null
+  forcedUnchange = false
 
   created () {
     this.reset()
   }
 
+  forceUnchanged () {
+    this.forcedUnchange = true
+    this.$emit('update:changed', false)
+  }
+
   reset () {
     if (this.createModelToEdit) {
       this.modelToEdit = this.createModelToEdit(this.model)
-    } else {
-      this.modelToEdit = this.model
+    } else if (this.model) {
+      this.modelToEdit = this.model.cloneForEdit()
     }
     this.lastJson = this.json
   }
@@ -65,6 +72,9 @@ export default class EditForm extends Vue {
   }
 
   get changed () {
+    if (this.forcedUnchange) {
+      return false
+    }
     // console.log(this.json)
     // console.log(this.lastJson)
     return this.json !== this.lastJson