@afeefa/vue-app 0.0.53 → 0.0.56

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

@@ -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>
@@ -56,7 +58,8 @@
 
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+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 'vue-property-decorator'
 export default class EditModal extends Vue {
   show_ = false
 
+  undoIcon = mdiRotateLeft
+
   /**
    * visiblility changes from outside
    * this will trigger the show_ watcher,

package/src/components/form/FormFieldMixin.js

@@ -1,6 +1,5 @@
+import { Component, Vue } from '@a-vue'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
-import { apiResources } from '@afeefa/api-resources-client'
-import { Component, Vue } from 'vue-property-decorator'
 
 @Component({
   props: ['name', 'label']
@@ -17,7 +16,7 @@ export class FormFieldMixin extends Vue {
   }
 
   get modelType () {
-    return apiResources.getType(this.model.type)
+    return this.$apiResources.getType(this.model.type)
   }
 
   get field () {

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

@@ -0,0 +1,18 @@
+<template>
+  <a-checkbox
+    v-model="model[name]"
+    :label="label || name"
+    :validator="validator"
+    v-bind="$attrs"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import { Component, Mixins } from '@a-vue'
+import { FormFieldMixin } from '../FormFieldMixin'
+
+@Component
+export default class FormFieldCheckbox extends Mixins(FormFieldMixin) {
+}
+</script>

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

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component

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

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component

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

@@ -0,0 +1,14 @@
+<template>
+  <a-rich-text-area
+    v-model="model[name]"
+  />
+</template>
+
+<script>
+import { Component, Mixins } from '@a-vue'
+import { FormFieldMixin } from '../FormFieldMixin'
+
+@Component
+export default class FormFieldRichTextArea extends Mixins(FormFieldMixin) {
+}
+</script>

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

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component({

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

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component

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

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 import { ComponentWidthMixin } from '../../mixins/ComponentWidthMixin'
 

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

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component

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

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component

package/src/components/index.js

@@ -2,8 +2,10 @@ import Vue from 'vue'
 
 import EditForm from './form/EditForm'
 import EditModal from './form/EditModal'
+import FormFieldCheckbox from './form/fields/FormFieldCheckbox'
 import FormFieldDate from './form/fields/FormFieldDate'
 import FormFieldRadioGroup from './form/fields/FormFieldRadioGroup'
+import FormFieldRichTextArea from './form/fields/FormFieldRichTextArea'
 import FormFieldSearchSelect from './form/fields/FormFieldSearchSelect'
 import FormFieldSelect from './form/fields/FormFieldSelect'
 import FormFieldSelect2 from './form/fields/FormFieldSelect2'
@@ -18,7 +20,9 @@ Vue.component('EditForm', EditForm)
 Vue.component('EditModal', EditModal)
 Vue.component('FormFieldText', FormFieldText)
 Vue.component('FormFieldTextArea', FormFieldTextArea)
+Vue.component('FormFieldRichTextArea', FormFieldRichTextArea)
 Vue.component('FormFieldRadioGroup', FormFieldRadioGroup)
+Vue.component('FormFieldCheckbox', FormFieldCheckbox)
 Vue.component('FormFieldDate', FormFieldDate)
 Vue.component('FormFieldSearchSelect', FormFieldSearchSelect)
 Vue.component('FormFieldSelect', FormFieldSelect)

package/src/components/list/ListFilterMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['name', 'label']

package/src/components/list/ListFilterRow.vue

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

package/src/components/list/ListViewMixin.js

@@ -1,13 +1,12 @@
+import { Component, Vue, Watch } from '@a-vue'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
-import { propsWithDefaults } from '@a-vue/utils/props-helper'
 import { ListViewModel } from '@afeefa/api-resources-client'
-import { Component, Vue, Watch } from 'vue-property-decorator'
 
 import { CurrentRouteFilterSource } from './CurrentRouteFilterSource'
 import { FilterSourceType } from './FilterSourceType'
 
 @Component({
-  ...propsWithDefaults([
+  props: [
     'models', 'meta', // given, if already loaded
     'listViewConfig',
     'filterHistoryKey',
@@ -17,7 +16,7 @@ import { FilterSourceType } from './FilterSourceType'
       events: true,
       history: true
     }
-  ])
+  ]
 })
 export class ListViewMixin extends Vue {
   LIST_VIEW = true
@@ -93,6 +92,10 @@ export class ListViewMixin extends Vue {
     this.load()
   }
 
+  reload () {
+    this.load()
+  }
+
   resetFilters () {
     this.listViewModel.resetFilters()
   }

package/src/components/list/filters/ListFilterPage.vue

@@ -27,7 +27,7 @@
 
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { ListFilterMixin } from '../ListFilterMixin'
 
 @Component({

package/src/components/list/filters/ListFilterSearch.vue

@@ -12,7 +12,7 @@
 
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { ListFilterMixin } from '../ListFilterMixin'
 
 @Component

package/src/components/list/filters/ListFilterSelect.vue

@@ -13,7 +13,7 @@
 
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { ListFilterMixin } from '../ListFilterMixin'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 

package/src/components/mixins/ClickOutsideMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 import { getZIndex } from 'vuetify/lib/util/helpers'
 
 @Component

package/src/components/mixins/ComponentWidthMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['maxWidth', 'width']

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="searchSelectList">
+  <div :class="['searchSelectList', {isLoading}]">
     <template v-if="models_.length">
       <a-table v-bind="$attrs">
         <a-table-header
@@ -13,6 +13,7 @@
           v-for="model in models_"
           :key="model.id"
           small
+          :class="{selected: isSelected(model)}"
         >
           <slot
             name="row"
@@ -38,11 +39,11 @@
 
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
 
 @Component({
-  props: ['q']
+  props: ['q', 'selectedItems']
 })
 export default class SearchSelectList extends Mixins(ListViewMixin) {
   get hasHeader () {
@@ -58,16 +59,25 @@ export default class SearchSelectList extends Mixins(ListViewMixin) {
     }
   }
 
+  isSelected (model) {
+    return !!this.selectedItems.find(i => i.equals(model))
+  }
+
   _filtersInitialized () {
     if (this.q) {
       this.filters.q.value = this.q
     }
+    this.$emit('update:filters', this.filters)
   }
 }
 </script>
 
 
 <style scoped lang="scss">
+.isLoading {
+  opacity: .6;
+}
+
 .notFound {
   padding: 0 .5rem .3rem;
 }

package/src/components/vue/Component.js

@@ -0,0 +1,46 @@
+import { Component as VueComponent } from 'vue-property-decorator'
+
+const Component = function (options) {
+  if (options.props) {
+    options.props = propsWithDefaults(options.props)
+  }
+  return VueComponent(options)
+}
+
+Component.registerHooks = VueComponent.registerHooks
+
+export { Component }
+
+function propsWithDefaults (props) {
+  if (props && typeof props === 'object' && props.constructor === Object) {
+    return props
+  }
+
+  const normalizedProps = {}
+
+  for (const prop of props) {
+    if (typeof prop === 'object') {
+      Object.keys(prop).forEach(subProp => {
+        const value = prop[subProp]
+        // property: []
+        if (Array.isArray(value)) {
+          normalizedProps[subProp] = {
+            default () { // must be a function according to vue spec
+              return value
+            }
+          }
+        // 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, ...
+        } else {
+          normalizedProps[subProp] = { default: value }
+        }
+      })
+    } else {
+      normalizedProps[prop] = null
+    }
+  }
+
+  return normalizedProps
+}

package/src/index.js

@@ -0,0 +1,4 @@
+import './styles/vue-app.scss'
+
+export { Mixins, Vue, Watch } from 'vue-property-decorator'
+export { Component } from '@a-vue/components/vue/Component'

package/src/plugins/api-resources/ApiResourcesPlugin.js

@@ -1,6 +1,18 @@
 import { apiResources } from '@afeefa/api-resources-client'
 
 class ApiResourcesPlugin {
+  apiResources = apiResources
+
+  register (models, apis) {
+    apiResources
+      .registerModels(models)
+      .registerApis(apis)
+  }
+
+  schemasLoaded () {
+    return apiResources.schemasLoaded()
+  }
+
   install (Vue) {
     Object.defineProperty(Vue.prototype, '$apiResources', {
       get () {