@afeefa/vue-app 0.0.52 → 0.0.55

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

@@ -1 +1 @@
-0.0.52
+0.0.55

package/package.json

@@ -1,20 +1,13 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.52",
+  "version": "0.0.55",
   "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'

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,121 @@
+<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') }"
+        @click="editor.chain().focus().toggleBold().run()"
+      >
+        bold
+        <a-mdi-icon />
+      </button>
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('italic') }"
+        @click="editor.chain().focus().toggleItalic().run()"
+      >
+        italic
+      </button>
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('strike') }"
+        @click="editor.chain().focus().toggleStrike().run()"
+      >
+        strike
+      </button>
+    </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'
+
+@Component({
+  props: ['value', 'validator'],
+  components: {
+    EditorContent
+  }
+})
+export default class ARichTextArea extends Vue {
+  editor = null
+  internalValue = null
+  focus = false
+
+  created () {
+    this.internalValue = this.value
+  }
+
+  mounted () {
+    if (this.validator) {
+      this.$refs.input.validate(true)
+    }
+
+    this.editor = new Editor({
+      content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
+      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;
+    }
+  }
+}
+</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

package/src/components/ASearchSelect.vue

@@ -16,6 +16,7 @@
       <div
         v-if="isOpen"
         class="controls"
+        :style="cwm_widthStyle"
       >
         <div class="background elevation-6" />
 
@@ -44,14 +45,17 @@
     <div :class="listCssClass">
       <search-select-list
         v-if="isOpen"
-        v-bind="listConfig"
+        :listViewConfig="listViewConfig"
         :q="q"
+        :selectedItems="selectedItems"
         :events="false"
         :history="false"
         :filterSource="filterSource"
         :loadOnlyIfKeyword="_loadOnlyIfKeyword"
+        :filters.sync="filters"
         :count.sync="count"
         :isLoading.sync="isLoading"
+        :style="cwm_widthStyle"
       >
         <template #header>
           <div />
@@ -60,19 +64,11 @@
         </template>
 
         <template #row="{ model }">
-          <v-icon
-            :color="model.getIcon().color"
-            size="1.5rem"
-            v-text="model.getIcon().icon"
-          />
-
           <slot
             name="row"
             :model="model"
             :on="{ click: selectHandler(model) }"
           />
-
-          <div class="lastColumn" />
         </template>
 
         <template #not-found="{ filters }">
@@ -88,7 +84,7 @@
 
 
 <script>
-import { Component, Watch, Mixins } from 'vue-property-decorator'
+import { Component, Watch, Mixins } from '@a-vue'
 import { UsesPositionServiceMixin } from '../services/position/UsesPositionServiceMixin'
 import { PositionConfig } from '../services/PositionService'
 import { randomCssClass } from '../utils/random'
@@ -96,15 +92,25 @@ import { FilterSourceType } from '@a-vue/components/list/FilterSourceType'
 import SearchSelectFilters from './search-select/SearchSelectFilters'
 import SearchSelectList from './search-select/SearchSelectList'
 import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
+import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['listConfig', 'q', 'width', 'closeOnSelect', 'loadOnlyIfKeyword'],
+  props: [
+    'listViewConfig',
+    'q',
+    'width',
+    'closeOnSelect',
+    'loadOnlyIfKeyword',
+    {
+      selectedItems: []
+    }
+  ],
   components: {
     SearchSelectFilters,
     SearchSelectList
   }
 })
-export default class ASearchSelect extends Mixins(UsesPositionServiceMixin, CancelOnEscMixin) {
+export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPositionServiceMixin, CancelOnEscMixin) {
   selectId = randomCssClass(10)
   isOpen = false
   items_ = []
@@ -196,7 +202,7 @@ export default class ASearchSelect extends Mixins(UsesPositionServiceMixin, Canc
         p
           .anchorTop()
           .targetBottom()
-          .diffY('-1rem')
+          .diffY('-.5rem')
       })
       .onPosition(this.onListPositionChanged)
 
@@ -307,24 +313,34 @@ export default class ASearchSelect extends Mixins(UsesPositionServiceMixin, Canc
 }
 
 .controls {
-  min-width: 400px;
+  width: 400px;
   position: absolute;
   z-index: 300;
   display: block;
-  padding: 0 0.5rem;
+  padding: 0 .5rem;
+
+  ::v-deep .a-row {
+    overflow: unset;
+  }
 }
 
 .searchSelectList {
-  min-width: 400px;
+  width: 400px;
   position: absolute;
   z-index: 301;
 
   max-height: 40vh;
   overflow-y: auto;
+  overflow-x: hidden;
   overscroll-behavior: contain;
 
-  ::v-deep .a-table-row > * {
-    cursor: pointer;
+  ::v-deep .a-table-row {
+    &:not(.selected) {
+      cursor: pointer;
+    }
+    &.selected {
+      pointer-events: none;
+    }
   }
 }
 

package/src/components/ASelect.vue

@@ -12,7 +12,7 @@
 
 
 <script>
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Watch } from '@a-vue'
 import { Model } from '@afeefa/api-resources-client'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 

package/src/components/ATable.vue

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

package/src/components/ATableHeader.vue

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

package/src/components/ATableRow.vue

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

package/src/components/ATextArea.vue

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

package/src/components/ATextField.vue

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

package/src/components/form/EditForm.vue

@@ -8,14 +8,14 @@
     <slot
       :changed="changed"
       :valid="valid"
+      :model="model"
     />
   </v-form>
 </template>
 
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
-import { apiResources } from '@afeefa/api-resources-client'
+import { Component, Vue, Watch } from '@a-vue'
 
 @Component({
   props: ['model']
@@ -52,9 +52,5 @@ export default class EditForm extends Vue {
   changedChanged () {
     this.$emit('update:changed', this.changed)
   }
-
-  get type () {
-    return apiResources.getType(this.model.type)
-  }
 }
 </script>

package/src/components/form/EditModal.vue

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