@afeefa/vue-app 0.0.109 → 0.0.111

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

@@ -1 +1 @@
-0.0.109
+0.0.111

package/README.md

@@ -1,3 +1,7 @@
 # @afeefa/vue-app
 
 Force push :-);
+
+## Documentation
+
+* [Components / AModal](docs/components/amodal.md)

package/docs/components/amodal.md

@@ -0,0 +1,19 @@
+# AModal
+
+It's a Modal capsule for vuetifys Modals. Whats the magic about it?
+
+The Modal is by default relatively positioned near its activator.
+
+## Properties
+
+* show
+* icon
+* title
+* beforeClose
+* anchorPosition
+* screenCentered
+
+
+### screenCentered
+
+if set to true the Modal is positioned in the middle of the Viewport, like in vuetify's default beavior.

package/package.json

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

package/src/api-resources/ApiAction.js

@@ -10,6 +10,7 @@ export class ApiAction extends ApiResourcesApiAction {
   _dispatchGlobalSaveEvents = false
   _minDuration = 100
   _startTime = 0
+  _showError = true
 
   id (id) {
     this.param('id', id)
@@ -21,6 +22,11 @@ export class ApiAction extends ApiResourcesApiAction {
     return this
   }
 
+  hideError () {
+    this._showError = false
+    return this
+  }
+
   dispatchGlobalLoadingEvents (dispatch = true) {
     this._dispatchGlobalLoadingEvents = dispatch
     return this

package/src/api-resources/DeleteAction.js

@@ -27,10 +27,12 @@ export class DeleteAction extends ApiAction {
   }
 
   processError (result) {
-    eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
-      headline: 'Die Daten konnten nicht gelöscht werden.',
-      message: result.message,
-      detail: result.detail
-    }))
+    if (this._showError) {
+      eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
+        headline: 'Die Daten konnten nicht gelöscht werden.',
+        message: result.message,
+        detail: result.detail
+      }))
+    }
   }
 }

package/src/api-resources/GetAction.js

@@ -9,10 +9,12 @@ export class GetAction extends ApiAction {
   }
 
   processError (result) {
-    eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
-      headline: 'Die Daten konntent nicht geladen werden.',
-      message: result.message,
-      detail: result.detail
-    }))
+    if (this._showError) {
+      eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
+        headline: 'Die Daten konntent nicht geladen werden.',
+        message: result.message,
+        detail: result.detail
+      }))
+    }
   }
 }

package/src/api-resources/SaveAction.js

@@ -17,10 +17,12 @@ export class SaveAction extends ApiAction {
   }
 
   processError (result) {
-    eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
-      headline: 'Die Daten konnten nicht gespeichert werden.',
-      message: result.message,
-      detail: result.detail
-    }))
+    if (this._showError) {
+      eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
+        headline: 'Die Daten konnten nicht gespeichert werden.',
+        message: result.message,
+        detail: result.detail
+      }))
+    }
   }
 }

package/src/components/AAutocomplete.vue

@@ -11,7 +11,7 @@
     no-filter
 
     :rules="validationRules"
-    v-bind="$attrs"
+    v-bind="{...$attrs, dense, outlined}"
     v-on="$listeners"
   />
 </template>
@@ -23,7 +23,7 @@ import { Model } from '@afeefa/api-resources-client'
 import { debounce } from '@a-vue/utils/debounce'
 
 @Component({
-  props: ['items', 'validator', 'defaultValue', 'selectedItemText', 'debounce']
+  props: ['items', 'validator', 'defaultValue', 'selectedItemText', 'debounce', {dense: true, outlined: true}]
 })
 export default class AAutocomplete extends Vue {
   isLoading = false

package/src/components/ADatePicker.vue

@@ -12,7 +12,7 @@
         :value="formattedDate"
         :label="label"
         :style="cwm_widthStyle"
-        v-bind="{...$attrs, ...attrs}"
+        v-bind="{...$attrs, ...attrs, dense, outlined}"
         :rules="validationRules"
         :error-messages="errorMessages"
         :readonly="type === 'month'"
@@ -41,7 +41,7 @@ import { formatDate } from '@a-vue/utils/format-date'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['value', 'validator', 'type']
+  props: ['value', 'validator', 'type', {dense: true, outlined: true}]
 })
 export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   value_ = null
@@ -153,6 +153,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
 <style lang="scss" scoped>
 :deep(.v-select__slot) {
   cursor: pointer;
+
   input {
     cursor: pointer;
   }

package/src/components/AGrid.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="['a-grid', colsClass, gapClass, evenClass, breakMobileClass]">
+  <div
+    :style="{display: displayStyle}"
+    :class="['a-grid', colsClass, gapClass, evenClass, breakMobileClass]"
+  >
     <slot />
   </div>
 </template>
@@ -10,7 +13,7 @@ import { Component, Mixins } from '@a-vue'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['gap', 'hGap', 'vGap', 'cols', {even: false}, 'breakMobile']
+  props: ['gap', 'hGap', 'vGap', 'cols', {inline: false, even: false}, 'breakMobile']
 })
 export default class AGrid extends Mixins(ComponentWidthMixin) {
   get breakMobileClass () {
@@ -19,6 +22,10 @@ export default class AGrid extends Mixins(ComponentWidthMixin) {
     }
   }
 
+  get displayStyle () {
+    return this.inline ? 'inline-grid' : 'grid'
+  }
+
   get colsClass () {
     const cols = this.cols || 2
     return 'cols-' + cols
@@ -53,11 +60,10 @@ export default class AGrid extends Mixins(ComponentWidthMixin) {
 
 <style scoped lang="scss">
 .a-grid {
-  display: grid;
-
   @for $i from 1 through 8 {
     &.cols-#{$i} {
       grid-template-columns: repeat(#{$i}, auto);
+
       &.even {
         grid-template-columns: repeat(#{$i}, 1fr);
       }
@@ -67,6 +73,7 @@ export default class AGrid extends Mixins(ComponentWidthMixin) {
   &.breakMobile {
     @media (max-width: 900px), (orientation : portrait) {
       grid-template-columns: 1fr;
+
       &.even {
         grid-template-columns: 1fr;
       }

package/src/components/AModal.vue

@@ -14,7 +14,7 @@
     <template #activator="{ on }">
       <div
         style="width: max-content;"
-        :class="[activatorClass, triggerClass]"
+        :class="activatorClass"
         v-on="on"
       >
         <slot name="activator" />
@@ -56,7 +56,7 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
 
 @Component({
-  props: ['show', 'icon', 'title', 'beforeClose', 'triggerClass', 'anchorPosition']
+  props: ['show', 'icon', 'title', 'beforeClose', 'anchorPosition', 'screenCentered']
 })
 export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentWidthMixin, CancelOnEscMixin) {
   modalId = randomCssClass(10)
@@ -121,7 +121,9 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
   @Watch('modal')
   modalChanged () {
     if (this.modal) {
-      this.setPosition()
+      if (!this.screenCentered) {
+        this.setPosition()
+      }
     } else {
       this.removeTransientAnchor()
     }
@@ -204,13 +206,12 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
 
 :deep(.v-dialog) {
   position: absolute;
-  top: 0;
-  left: 0;
   margin: 0;
 
   transition: none;
 
   &.v-fade-transition {
+
     &-enter-active, &-leave, &-leave-to {
       transition: opacity .3s ease;
     }

package/src/components/ASelect.vue

@@ -5,7 +5,7 @@
     :items="items_"
     :valueComparator="compareValues"
     :style="cwm_widthStyle"
-    v-bind="$attrs"
+    v-bind="{...$attrs, dense, outlined}"
     v-on="$listeners"
   />
 </template>
@@ -17,7 +17,7 @@ import { Model } from '@afeefa/api-resources-client'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['validator', 'defaultValue', 'items']
+  props: ['validator', 'defaultValue', 'items', {dense: true, outlined: true}]
 })
 export default class ASelect extends Mixins(ComponentWidthMixin) {
   items_ = []
@@ -96,3 +96,10 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
   }
 }
 </script>
+
+
+<style lang="scss" scoped>
+.v-text-field :deep(.v-input__icon--clear) { // always show clear icon, https://github.com/vuetifyjs/vuetify/pull/15876
+  opacity: 1;
+}
+</style>

package/src/components/ATextArea.vue

@@ -3,7 +3,7 @@
     ref="input"
     :rules="validationRules"
     :counter="counter"
-    v-bind="$attrs"
+    v-bind="{...$attrs, dense, outlined}"
     v-on="$listeners"
   />
 </template>
@@ -13,7 +13,7 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['validator']
+  props: ['validator', {dense: true, outlined: true}]
 })
 export default class ATextArea extends Vue {
   mounted () {

package/src/components/ATextField.vue

@@ -1,45 +1,142 @@
 <template>
   <v-text-field
     ref="input"
-    :type="type"
-    :autocomplete="autocomplete"
-    :rules="validationRules"
+    v-model="internalValue"
     :counter="counter"
     :style="cwm_widthStyle"
-    v-bind="$attrs"
-    v-on="$listeners"
-    @click:append="showPassword = !showPassword"
+    :error-messages="errorMessages"
+    v-bind="attrs"
+    @input="inputChanged"
+    @keyup.esc="clear"
+    @click:clear="clear"
+    v-on="listeners"
   />
 </template>
 
 
 <script>
-import { Component, Watch, Mixins } from '@a-vue'
+import { Component, Watch, Mixins, Inject } from '@a-vue'
 import { debounce } from '@a-vue/utils/debounce'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['debounce', 'validator', {focus: false, password: false, number: false}]
+  props: ['value', 'debounce', 'validator', 'rules', {dense: true, outlined: true, focus: false, number: false}]
 })
 export default class ATextField extends Mixins(ComponentWidthMixin) {
   $hasOptions = ['counter']
 
-  showPassword = false
+  @Inject({ from: 'form', default: null }) form
+
+  internalValue = null
+  errorMessages = []
+  debounceInputFunction = null
 
   created () {
-    if (this.debounce) {
-      this.$listeners.input = debounce(value => {
-        this.$emit('input', value)
-      }, this.debounce, value => value)
-    }
+    this.form && this.form.register(this)
+
+    this.setInternalValue(this.value)
   }
 
   mounted () {
     this.setFocus()
 
-    if (this.validator) {
-      this.$refs.input.validate(true)
+    this.$emit('input:internal', this.internalValue)
+    this.validate()
+  }
+
+  setInternalValue (value) {
+    if (typeof value === 'number') {
+      value = value.toString()
     }
+    this.internalValue = value || ''
+  }
+
+  @Watch('value')
+  valueChanged () {
+    this.setInternalValue(this.value)
+  }
+
+  get listeners () {
+    // remove input from nested listening
+    // let clients listend to only THIS component
+    const listeners = {...this.$listeners}
+    delete listeners.input
+    return listeners
+  }
+
+  get attrs () {
+    // remove 'rules' from being passed to v-text-field
+    const attrs = {...this.$attrs}
+    delete attrs.rules
+
+    attrs.dense = this.dense
+    attrs.outlined = this.outlined
+    return attrs
+  }
+
+  clear () {
+    if (this.$attrs.clearable || this.escClearable) {
+      this.setInternalValue('')
+      this.validate()
+      this.$emit('input', this.emptyValue)
+    }
+  }
+
+  inputChanged () {
+    this.$emit('input:internal', this.internalValue)
+
+    const valid = this.validate()
+    if (!valid) {
+      return
+    }
+
+    const value = this.stringToNumber(this.internalValue)
+
+    if (this.debounce) {
+      if (!this.debounceInputFunction) {
+        this.debounceInputFunction = debounce(value => {
+          this.$emit('input', value)
+        }, this.debounce, value => value) // fire immediately if !value (click clearable-x)
+      }
+      this.debounceInputFunction(value)
+    } else {
+      this.$emit('input', value)
+    }
+  }
+
+  stringToNumber (value) {
+    if (this.treatAsNumericValue) {
+      if (!value) {
+        value = null
+      } else {
+        value = this.internalValue.match(/^\d*(.\d+)?$/) ? parseFloat(this.internalValue) : NaN
+      }
+    }
+    return value
+  }
+
+  get type () {
+    return this.$attrs.type || 'text'
+  }
+
+  get treatAsNumericValue () {
+    return this.type === 'number' || this.number
+  }
+
+  validate () {
+    const rules = this.validationRules
+    let errorMessage = null
+    for (const rule of rules) {
+      const value = this.stringToNumber(this.internalValue)
+      const result = rule(value)
+      if (result !== true) {
+        errorMessage = result
+        break
+      }
+    }
+
+    this.errorMessages = [errorMessage].filter(e => e)
+    return !this.errorMessages.length
   }
 
   @Watch('focus')
@@ -58,49 +155,42 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
     }
   }
 
-  get type () {
-    if (this.password && !this.showPassword) {
-      return 'password'
-    }
-    return 'text'
-  }
-
-  get appendIcon () {
-    if (this.password) {
-      return this.showPassword ? '$eyeIcon' : '$eyeOffIcon'
-    }
-    return null
-  }
-
-  get autocomplete () {
-    if (this.password) {
-      return 'new-password'
-    }
-    return null
-  }
-
   get validationRules () {
+    if (this.$attrs.rules) {
+      return this.$attrs.rules
+    }
     const label = this.$attrs.label
     return (this.validator && this.validator.getRules(label)) || []
   }
 
   get counter () {
     if (!this.$has.counter) {
-      return false
+      return null
     }
 
     if (!this.validator) {
-      return false
+      return null
     }
 
-    return (!this.number && this.validator.getParams().max) || false
+    return this.validator.getMaxValueLength()
+  }
+
+  get emptyValue () {
+    if (this.validator) {
+      return this.validator.getEmptyValue()
+    }
+    return null
   }
 }
 </script>
 
 
 <style lang="scss" scoped>
-.v-input:not(.v-input--is-focused) :deep(.v-counter) {
+.v-input:not(.v-input--is-focused) :deep(.v-counter) { // hide counter when not focused
   display: none;
 }
+
+.v-text-field :deep(.v-input__icon--clear) { // always show clear icon, https://github.com/vuetifyjs/vuetify/pull/15876
+  opacity: 1;
+}
 </style>

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

@@ -1,12 +1,10 @@
 <template>
   <a-text-field
-    :value="internalValue"
+    v-model="model[name]"
     :label="label || name"
     :validator="validator"
     v-bind="$attrs"
     v-on="$listeners"
-    @input="textFieldValueChanged"
-    @blur="onBlur"
   />
 </template>
 
@@ -14,71 +12,7 @@
 import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
-@Component({
-  props: [{emptyNull: false}]
-})
+@Component
 export default class FormFieldText extends Mixins(FormFieldMixin) {
-  internalValue = ''
-
-  created () {
-    this.setInternalValue(this.model[this.name])
-    this.$watch(() => this.model[this.name], value => {
-      this.setInternalValue(value)
-    })
-  }
-
-  onBlur () {
-    this.setInternalValue(this.model[this.name], true)
-  }
-
-  textFieldValueChanged (value) {
-    this.internalValue = value
-
-    // cast to number
-    if (this.isNumber) {
-      value = Number(value)
-      if (isNaN(value)) {
-        return // do not set anything to the model
-      }
-    }
-
-    // set model value to null if empty
-    if (this.emptyNull) {
-      if (this.isNumber) {
-        if (value === 0) {
-          value = null
-        }
-      } else {
-        if (!value) {
-          value = null
-        }
-      }
-    }
-
-    this.model[this.name] = value
-    this.$emit('input', value)
-  }
-
-  setInternalValue (value, reset = false) {
-    if (this.isNumber) {
-      // reset text field if value is null but keep leading 0 (allows for copy and paste)
-      if (value === null) {
-        if (!reset && this.internalValue === '0') {
-          value = '0'
-        } else {
-          value = ''
-        }
-      }
-    } else { // null string should be ''
-      if (!value) {
-        value = ''
-      }
-    }
-    this.internalValue = value
-  }
-
-  get isNumber () {
-    return this.$attrs.number === ''
-  }
 }
 </script>

package/src/components/index.js

@@ -15,7 +15,6 @@ import NestedEditForm from './form/NestedEditForm'
 import ListFilterPage from './list/filters/ListFilterPage'
 import ListFilterSearch from './list/filters/ListFilterSearch'
 import ListFilterSelect from './list/filters/ListFilterSelect'
-import ListFilterRow from './list/ListFilterRow'
 
 Vue.component('EditForm', EditForm)
 Vue.component('NestedEditForm', NestedEditForm)
@@ -31,5 +30,4 @@ Vue.component('FormFieldSelect', FormFieldSelect)
 Vue.component('FormFieldSelect2', FormFieldSelect2)
 Vue.component('ListFilterPage', ListFilterPage)
 Vue.component('ListFilterSearch', ListFilterSearch)
-Vue.component('ListFilterRow', ListFilterRow)
 Vue.component('ListFilterSelect', ListFilterSelect)

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

@@ -1,7 +1,5 @@
 <template>
-  <a-row
-    gap="8"
-  >
+  <a-row gap="8">
     <a-pagination
       v-if="count && numPages > 1"
       v-model="filter.value"
@@ -20,6 +18,7 @@
       :items="pageSizeFilter.options"
       :defaultValue="pageSizeFilter.defaultValue"
       :clearable="!pageSizeFilter.hasDefaultValueSet()"
+      hide-details
     />
   </a-row>
 </template>
@@ -54,7 +53,7 @@ export default class ListFilterPage extends Mixins(ListFilterMixin) {
 
 <style lang="scss" scoped>
 .v-select {
-  max-width: 100px;
+  max-width: 150px;
 }
 
 .pageNumber {

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

@@ -6,6 +6,7 @@
     :debounce="500"
     v-bind="$attrs"
     clearable
+    hide-details
     @keyup.esc="clearValue"
   />
 </template>

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

@@ -7,6 +7,7 @@
     itemValue="itemValue"
     :clearable="filter.value !== filter.defaultValue"
     :defaultValue="filter.defaultValue"
+    hide-details
     v-bind="$attrs"
   />
 </template>

package/src/index.js

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

package/src-admin/bootstrap.js

@@ -70,5 +70,5 @@ export async function bootstrap ({ apis, models, routing, authService, getTransl
         splash
       }
     })
-  }, 500)
+  }, 300)
 }

package/src-admin/components/controls/SearchSelectFormField.vue

@@ -76,7 +76,7 @@
       </template>
 
       <template #filters>
-        <list-filter-row>
+        <a-row gap="4">
           <list-filter-search
             :focus="true"
             maxWidth="100%"
@@ -87,7 +87,7 @@
             :has="{page_size: false, page_number: true}"
             :totalVisible="0"
           />
-        </list-filter-row>
+        </a-row>
       </template>
 
       <template #row="{ model, on }">

package/src/components/list/ListFilterRow.vue

@@ -1,26 +0,0 @@
-<template>
-  <a-row
-    :gap="gap || 4"
-    class="mb-0"
-  >
-    <slot />
-  </a-row>
-</template>
-
-
-<script>
-import { Component, Vue } from '@a-vue'
-
-@Component({
-  props: ['gap']
-})
-export default class ListFilterRow extends Vue {
-}
-</script>
-
-
-<style scoped lang="scss">
-:deep(.v-text-field__details) {
-  display: none;
-}
-</style>