@afeefa/vue-app 0.0.64 → 0.0.67

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

@@ -1 +1 @@
-0.0.64
+0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.64",
+  "version": "0.0.67",
   "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/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/form/EditForm.vue

@@ -28,11 +28,17 @@ 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)
@@ -66,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

package/src/components/form/EditModal.vue

@@ -125,6 +125,8 @@ export default class EditModal extends Vue {
    * hook to allow to leave a just created (saved) model
    */
   ignoreChangesOnClose () {
+    // this.$refs.form.forceUnchanged()
+    console.info('TODO switch form to forceUnchanged')
     this.ignoreChangesOnClose_ = true
   }
 }

package/src/components/form/FormFieldMixin.js

@@ -70,10 +70,19 @@ export class FormFieldMixin extends Vue {
 
     if (field.hasOptions()) {
       const options = field.getOptions()
-      return Object.keys(options).map(value => ({
-        itemText: options[value],
-        itemValue: value
-      }))
+      return options.map((value, index) => {
+        if (typeof value === 'object') { // object option
+          return {
+            itemText: value.title,
+            itemValue: value.value
+          }
+        } else { // scalar option
+          return {
+            itemText: value,
+            itemValue: index
+          }
+        }
+      })
     }
   }
 

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

@@ -1,7 +1,9 @@
 <template>
-  <a-rich-text-area
-    v-model="model[name]"
-  />
+  <a-rich-text-area v-model="model[name]">
+    <template #buttons>
+      <slot name="buttons" />
+    </template>
+  </a-rich-text-area>
 </template>
 
 <script>

package/src/components/list/ListViewMixin.js

@@ -11,6 +11,7 @@ import { FilterSourceType } from './FilterSourceType'
     'listAction',
     'filterHistoryKey',
     'loadOnlyIfKeyword',
+    'checkBeforeLoad',
     {
       filterSource: FilterSourceType.QUERY_STRING,
       events: true,
@@ -64,9 +65,16 @@ export class ListViewMixin extends Vue {
       .on('change', this.filtersChanged) // listen to change
 
     this._filtersInitialized()
+    this.$emit('update:filters', this.filters)
+    this.$emit('update:listViewModel', this.listViewModel)
 
     if (this.models) {
       this.$emit('update:count', this.meta_.count_search)
+
+      this.$emit('onLoad', {
+        models: this.models_,
+        meta: this.meta_
+      })
     } else {
       this.load()
     }
@@ -113,6 +121,16 @@ export class ListViewMixin extends Vue {
   }
 
   async load () {
+    if (this.checkBeforeLoad) {
+      const canLoad = await this.checkBeforeLoad()
+      if (!canLoad) {
+        if (this.meta_.used_filters) {
+          this.listViewModel.initFromUsedFilters(this.meta_.used_filters, this.meta_.count_search)
+        }
+        return
+      }
+    }
+
     if (this._loadOnlyIfKeyword && !this.filters.q.value) {
       this.models_ = []
       this.meta_ = {}
@@ -132,7 +150,7 @@ export class ListViewMixin extends Vue {
 
     if (!models) { // error happened
       this.isLoading = false
-      this.$emit('update:isLoading', this.isLoading)
+      this.$emit('update:isLoading', false)
       return
     }
 
@@ -144,8 +162,13 @@ export class ListViewMixin extends Vue {
     }
 
     this.isLoading = false
-    this.$emit('update:isLoading', this.isLoading)
+    this.$emit('update:isLoading', false)
 
     this.$emit('update:count', this.meta_.count_search)
+
+    this.$emit('onLoad', {
+      models,
+      meta
+    })
   }
 }

package/src/components/mixins/ClickOutsideMixin.js

@@ -25,10 +25,14 @@ export class ClickOutsideMixin extends Vue {
     // popup clicked
     const thisIndex = getZIndex(this.$el)
     const targetIndex = getZIndex(e.target)
-    if (targetIndex > thisIndex) {
+    if (targetIndex > 10 && targetIndex > thisIndex) { // sidebar === 6
       return
     }
 
+    this.com_onClickOutside()
     this.$emit('click:outside')
   }
+
+  com_onClickOutside () {
+  }
 }

package/src/components/search-select/SearchSelectList.vue

@@ -67,7 +67,6 @@ export default class SearchSelectList extends Mixins(ListViewMixin) {
     if (this.q) {
       this.filters.q.value = this.q
     }
-    this.$emit('update:filters', this.filters)
   }
 }
 </script>

package/src/components/vue/Component.js

@@ -32,9 +32,16 @@ function propsWithDefaults (props) {
         // property: { some object }, should be a normal vue props object
         } else if (value && typeof value === 'object' && value.constructor === Object) {
           normalizedProps[subProp] = value
-        // property: true, null, ...
+        // property: true, false, null, ...
         } else {
-          normalizedProps[subProp] = { default: value }
+          if (typeof value === 'boolean') {
+            normalizedProps[subProp] = {
+              type: Boolean,
+              default: value
+            }
+          } else {
+            normalizedProps[subProp] = { default: value }
+          }
         }
       })
     } else {

package/src/events.js

@@ -1,3 +1,4 @@
+export { BaseEvent } from './plugins/event-bus/BaseEvent'
 export { LoadingEvent } from './components/loading-indicator/LoadingEvent'
 export { SaveEvent } from './components/save-indicator/SaveEvent'
 export { AlertEvent } from './components/alert/AlertEvent'