@afeefa/vue-app 0.0.132 → 0.0.133

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

@@ -1 +1 @@
-0.0.132
+0.0.133

package/package.json

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

package/src/components/ADatePicker.vue

@@ -1,38 +1,44 @@
 <template>
-  <v-menu
-    v-model="menu"
-    :close-on-content-click="false"
-    transition="scale-transition"
-    offset-y
-    min-width="auto"
-  >
-    <template #activator="{ on, attrs }">
-      <v-text-field
-        ref="input"
-        :value="formattedDate"
-        :label="label"
-        :style="cwm_widthStyle"
-        v-bind="{...$attrs, ...attrs, dense, outlined}"
-        :rules="validationRules"
-        :error-messages="errorMessages"
-        :readonly="type === 'month'"
-        v-on="on"
-        @input="dateInputChanged"
-        @click:clear="clearDate"
-        @click.native="on.click"
-      />
-    </template>
-
-    <v-date-picker
-      v-if="menu"
-      :value="date"
-      no-title
-      :type="type"
-      v-bind="$attrs"
-      :first-day-of-week="1"
-      @input="dateChanged"
+  <div :class="['a-date-picker', {'type--month': type === 'month'}]">
+    <v-text-field
+      ref="input"
+      :value="formattedDate"
+      :label="label"
+      :placeholder="type === 'month' ? '' : 'DD.MM.JJJJ'"
+      :style="cwm_widthStyle"
+      v-bind="{...$attrs, dense, outlined}"
+      :error-messages="errorMessages"
+      append-icon="$calendarIcon"
+      :readonly="type === 'month'"
+      :clearable="clearable"
+      @input="dateInputChanged"
+      @click:clear="clearDate"
+      @click:append="open"
+      @mouseup="openIfMonth"
     />
-  </v-menu>
+
+    <v-overlay
+      :value="isOpen"
+      :z-index="299"
+      :opacity="0"
+    />
+
+    <div :class="popUpCssClass">
+      <div
+        v-if="isOpen"
+        class="popUpContent elevation-6"
+      >
+        <v-date-picker
+          :value="date"
+          no-title
+          :type="type"
+          v-bind="$attrs"
+          :first-day-of-week="1"
+          @input="dateChanged"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 
@@ -40,22 +46,22 @@
 import { Component, Mixins, Watch } from '@a-vue'
 import { formatDate } from '@a-vue/utils/format-date'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
+import { UsesPositionServiceMixin } from '../services/position/UsesPositionServiceMixin'
+import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
+import { PositionConfig } from '../services/PositionService'
+import { randomCssClass } from '../utils/random'
 
 @Component({
   props: ['value', 'validator', 'type', {dense: true, outlined: true}]
 })
-export default class ADatePicker extends Mixins(ComponentWidthMixin) {
+export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositionServiceMixin, CancelOnEscMixin) {
   value_ = null
-  menu = false
   errorMessages = []
+  popUpId = randomCssClass(10)
+  isOpen = false
 
   created () {
-    if (this.value) {
-      this.value_ = this.value
-    } else {
-      this.value_Changed() // force validation if date is null
-    }
-    this.$emit('input', this.value_)
+    this.value_ = this.value
   }
 
   mounted () {
@@ -65,27 +71,112 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   @Watch('value')
   valueChanged () {
     this.value_ = this.value
+    this.validate()
   }
 
-  @Watch('value_')
-  value_Changed () { // validate on any change
-    this.validateDateValue()
+  get clearable () {
+    if (this.validator && this.validator.param('null') === false) {
+      return false
+    }
+    return true
   }
 
-  validateDateValue () {
-    this.errorMessages = []
-    if (this.validator) {
-      const rules = this.validator.getRules(this.label)
-      for (const rule of rules) {
-        const message = rule(this.value_)
-        if (typeof message === 'string') {
-          this.errorMessages.push(message)
-          break
-        }
-      }
+  openIfMonth () {
+    if (this.type === 'month') {
+      this.open()
     }
   }
 
+  open () {
+    window.addEventListener('mousedown', this.onClickOutside)
+
+    const container = this.getContainer()
+
+    container.appendChild(this.popUp)
+    this.positionize()
+
+    this.isOpen = true
+
+    this.coe_watchCancel()
+
+    this.$emit('open')
+  }
+
+  close () {
+    if (!this.isOpen) {
+      return
+    }
+
+    this.urp_unregisterPositionWatchers()
+
+    window.removeEventListener('mousedown', this.onClickOutside)
+
+    this.$el.appendChild(this.popUp)
+
+    this.isOpen = false
+
+    this.coe_unwatchCancel()
+
+    this.$emit('close')
+  }
+
+  positionize () {
+    const position = new PositionConfig()
+      .setAnchor(this.$refs.input, '.v-input__slot')
+      .setTarget(
+        document.documentElement,
+        '.' + this.popUpCssClass + ' .popUpContent'
+      )
+      .targetTop()
+      .anchorBottom()
+      .diffY('.5rem')
+      .alternativeY(p => {
+        p.targetBottom().anchorTop().diffY('-.5rem')
+      })
+
+    this.urp_registerPositionWatcher(position)
+  }
+
+  get popUpCssClass () {
+    return 'popUp-' + this.popUpId
+  }
+
+  getContainer () {
+    return document.querySelector('.v-application')
+  }
+
+  get popUp () {
+    const container = this.getContainer()
+    return container.querySelector('.' + this.popUpCssClass)
+  }
+
+  coe_cancelOnEsc () {
+    this.close()
+    return false // stop esc propagation
+  }
+
+  onClickOutside (e) {
+    const popUp = this.popUp
+
+    // no popup present
+    if (!popUp) {
+      return
+    }
+
+    // popup clicked
+    if (popUp.contains(e.target)) {
+      return
+    }
+
+    // activator clicked
+    const activator = this.$refs.input.$el
+    if (activator && activator.contains(e.target)) {
+      return
+    }
+
+    this.close()
+  }
+
   get date () {
     return this.value_
       ? this.value_.toISOString().substr(0, this.type === 'month' ? 7 : 10)
@@ -98,25 +189,28 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
 
   clearDate () {
     this.value_ = null
+    this.validate()
     this.$emit('input', this.value_)
   }
 
-  isDate (value) {
+  textInputIsDate (value) {
     return value && value.match(/^(3[01]|[12][0-9]|0?[1-9]).(1[012]|0?[1-9]).((?:19|20)\d{2})$/)
   }
 
   dateInputChanged (value) {
     if (!value) {
       this.dateChanged(null)
-    } else if (this.isDate(value)) {
+    } else if (this.validateTextInput(value)) {
       const [day, month, year] = value.split('.')
       this.dateChanged(new Date(year + '-' + month + '-' + day))
     }
   }
 
   dateChanged (date) {
-    this.menu = false
     this.value_ = date ? new Date(date) : null
+    this.validate()
+
+    this.close()
     this.$emit('input', this.value_)
   }
 
@@ -133,31 +227,68 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   }
 
   validate () {
-    this.validateDateValue()
+    this.errorMessages = []
+    if (this.validator) {
+      const rules = this.validator.getRules(this.label)
+      for (const rule of rules) {
+        const message = rule(this.value_)
+        if (typeof message === 'string') {
+          this.errorMessages.push(message)
+          break
+        }
+      }
+    }
   }
 
-  get validationRules () {
-    if (this.type !== 'month') {
-      const dateFormat = v => {
-        if (v && !this.isDate(v)) {
-          return 'Das Datum sollte das Format TT.MM.JJJJ haben.'
-        }
-        return true
+  validateTextInput (value) {
+    this.errorMessages = []
+    const rules = this.textInputValidationRules
+    for (const rule of rules) {
+      const message = rule(value)
+      if (typeof message === 'string') {
+        this.errorMessages.push(message)
+        break
       }
-      return [dateFormat]
     }
+    return !this.errorMessages.length
+  }
+
+  get textInputValidationRules () {
+    if (this.type === 'month') {
+      return []
+    }
+
+    return [v => {
+      if (v && !this.textInputIsDate(v)) {
+        return 'Das Datum sollte das Format TT.MM.JJJJ haben.'
+      }
+      return true
+    }]
+  }
+
+  get dateValidationRules () {
+    if (this.validator) {
+      return this.validator.getRules(this.label)
+    }
+    return []
   }
 }
 </script>
 
 
 <style lang="scss" scoped>
-:deep(.v-select__slot) {
-  cursor: pointer;
+.popUpContent {
+  min-height: 2.2rem;
+  position: absolute;
+  z-index: 400;
+  display: block;
+  background-color: white;
+  padding: .5rem;
+  transition: left .2s;
+}
 
-  input {
-    cursor: pointer;
-  }
+.a-date-picker.type--month :deep(input) {
+  cursor: pointer;
 }
 
 .v-text-field :deep(.v-input__icon--clear) { // always show clear icon, https://github.com/vuetifyjs/vuetify/pull/15876

package/src/components/form/EditModal.vue

@@ -41,7 +41,6 @@
           <edit-form-buttons
             :changed="changed"
             :valid="valid"
-            small
             angular
             :has="{reset: !!modelToEdit.id}"
             @save="$emit('save', modelToEdit, ignoreChangesOnClose, close)"