@afeefa/vue-app 0.0.53 → 0.0.56

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

@@ -1 +1 @@
-0.0.53
+0.0.56

package/package.json

@@ -1,20 +1,13 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.53",
+  "version": "0.0.56",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",
-  "scripts": {
-    "typings": "tsc"
-  },
   "devDependencies": {
-    "core-js": "^3.9.1",
-    "typescript": "^4.2.3",
-    "vue": "^2.6.12",
+    "core-js": "^3.21.1",
+    "vue": "^2.6.14",
     "vue-class-component": "^7.2.6",
     "vue-property-decorator": "^9.1.2"
-  },
-  "dependencies": {
-    "moment": "^2.29.1"
   }
 }

package/src/api-resources/ApiActions.js

@@ -228,14 +228,38 @@ export class RemoveAction {
 }
 
 export class ListAction {
+  action = null
   request = null
+  params = {}
+  fields = {}
+  filters = {}
   events = true
 
+  setAction (action) {
+    this.action = action
+    return this
+  }
+
   setRequest (request) {
     this.request = request
     return this
   }
 
+  setParams (params) {
+    this.params = params
+    return this
+  }
+
+  setFields (fields) {
+    this.fields = fields
+    return this
+  }
+
+  setFilters (filters) {
+    this.filters = filters
+    return this
+  }
+
   noEvents (noEvents) {
     this.events = noEvents === undefined ? false : !noEvents
     return this
@@ -246,6 +270,13 @@ export class ListAction {
       eventBus.dispatch(new LoadingEvent(LoadingEvent.START_LOADING))
     }
 
+    if (!this.request) {
+      this.request = this.action.createRequest()
+        .params(this.params)
+        .fields(this.fields)
+        .filters(this.filters)
+    }
+
     const result = await this.request.send()
 
     if (result.error) {

package/src/components/AAlert.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 import { AlertEvent } from './alert/AlertEvent'
 
 @Component

package/src/components/AAutocomplete.vue

@@ -18,7 +18,7 @@
 
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch } from '@a-vue'
 import { Model } from '@afeefa/api-resources-client'
 import { debounce } from '@a-vue/utils/debounce'
 

package/src/components/ABadge.vue

@@ -7,7 +7,7 @@
 
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch } from '@a-vue'
 
 @Component({
   props: ['content']

package/src/components/ABreadcrumbs.vue

@@ -19,7 +19,7 @@
 
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch } from '@a-vue'
 import { SaveEvent } from './save-indicator/SaveEvent'
 import { routeConfigPlugin } from '@a-vue/plugins/route-config/RouteConfigPlugin'
 

package/src/components/ACheckbox.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-checkbox
+    ref="checkbox"
+    v-bind="$attrs"
+    :inputValue="$attrs.value"
+    @change="$emit('input', $event || false)"
+  />
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: ['validator']
+})
+export default class ACheckbox extends Vue {
+  created () {
+    this.init()
+  }
+
+  async init () {
+    if (this.validator) {
+      this.$nextTick(() => {
+        this.$refs.checkbox.validate(true)
+      })
+    }
+  }
+
+  get validationRules () {
+    const label = this.$attrs.label
+    return (this.validator && this.validator.getRules(label)) || []
+  }
+}
+</script>

package/src/components/AContextMenu.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Watch } from '@a-vue'
 import { UsesPositionServiceMixin } from '../services/position/UsesPositionServiceMixin'
 import { Positions, PositionConfig } from '../services/PositionService'
 import { randomCssClass } from '../utils/random'
@@ -140,7 +140,7 @@ export default class AContextMenu extends Mixins(UsesPositionServiceMixin) {
 .popUpContent {
   min-height: 2.2rem;
   position: absolute;
-  z-index: 200;
+  z-index: 400;
   display: block;
   background-color: white;
   padding: 0.5rem;

package/src/components/AContextMenuItem.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['to']
@@ -29,7 +29,7 @@ export default class AContextMenuItem extends Vue {
     this.contextMenu.close()
     if (this.to) {
       this.$router.push(this.to)
-        .catch(() => null) // prevent duplicated navigation
+        .catch(() => null) // prevent duplicated navigation warning
     } else {
       this.$emit('click')
     }

package/src/components/ADatePicker.vue

@@ -29,7 +29,7 @@
 
 
 <script>
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Watch } from '@a-vue'
 import { formatDate } from '@a-vue/utils/format-date'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 

package/src/components/ADialog.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Watch } from '@a-vue'
 import { DialogEvent } from './dialog/DialogEvent'
 import { PositionConfig } from '../services/PositionService'
 import { UsesPositionServiceMixin } from '../services/position/UsesPositionServiceMixin'
@@ -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/AGrid.vue

@@ -6,7 +6,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['fullWidth', 'gap', 'hGap', 'vGap', 'cols', 'even', 'breakMobile']
@@ -91,6 +91,7 @@ export default class AGrid extends Vue {
       grid-template-columns: repeat(5, 1fr);
     }
   }
+
   &.breakMobile {
     @media (max-width: 900px), (orientation : portrait) {
       grid-template-columns: 1fr;

package/src/components/AIcon.vue

@@ -10,7 +10,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['button']

package/src/components/AIconButton.vue

@@ -16,7 +16,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['icon', 'text']

package/src/components/ALoadingIndicator.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch } from '@a-vue'
 
 @Component({
   props: ['isLoading']

package/src/components/AModal.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Watch } from '@a-vue'
 import { PositionConfig } from '../services/PositionService'
 import { UsesPositionServiceMixin } from '@a-vue/services/position/UsesPositionServiceMixin'
 import { randomCssClass } from '../utils/random'

package/src/components/APagination.vue

@@ -13,7 +13,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['content']

package/src/components/ARadioGroup.vue

@@ -18,7 +18,7 @@
 
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch } from '@a-vue'
 
 @Component({
   props: ['options', 'validator']

package/src/components/ARichTextArea.vue

@@ -0,0 +1,257 @@
+<template>
+  <div :class="['a-rich-text-editor a-text-input', {'a-text-input-focused': focus}]">
+    <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()"
+      >
+        <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>
+
+    <editor-content
+      :editor="editor"
+      :class="['a-rich-text-editor', {focus}]"
+    />
+  </div>
+</template>
+
+
+<script>
+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'],
+  components: {
+    EditorContent
+  }
+})
+export default class ARichTextArea extends Vue {
+  editor = null
+  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
+  }
+
+  mounted () {
+    if (this.validator) {
+      this.$refs.input.validate(true)
+    }
+
+    this.editor = new Editor({
+      content: this.internalValue,
+      extensions: [
+        StarterKit
+      ],
+      onUpdate: () => {
+        this.$emit('input', this.editor.getHTML())
+      },
+      onFocus: ({ editor, event }) => {
+        this.focus = true
+      },
+      onBlur: ({ editor, event }) => {
+        this.focus = false
+      }
+    })
+
+    this.editor.commands.setContent(this.internalValue, false)
+  }
+
+  beforeDestroy () {
+    this.editor.destroy()
+  }
+
+  @Watch('value')
+  valueChanged () {
+    this.internalValue = this.value
+
+    const isSame = this.editor.getHTML() === this.internalValue
+    if (!isSame) {
+      this.editor.commands.setContent(this.internalValue, false)
+    }
+  }
+
+  get validationRules () {
+    const label = this.$attrs.label
+    return (this.validator && this.validator.getRules(label)) || []
+  }
+
+  get counter () {
+    if (!this.validator) {
+      return false
+    }
+    return this.validator.getParams().max || false
+  }
+}
+</script>
+
+
+<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 {
+      outline: none;
+    }
+  }
+}
+
+.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/ARow.vue

@@ -6,7 +6,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['fullWidth', 'gap', 'start', 'stretch', 'center', 'vertical', 'right']

package/src/components/ASaveIndicator.vue

@@ -14,7 +14,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 import { SaveEvent } from './save-indicator/SaveEvent'
 
 @Component