@afeefa/vue-app 0.0.313 → 0.0.315

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

@@ -1 +1 @@
-0.0.313
+0.0.315

package/package.json

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

package/src/components/ADatePicker.vue

@@ -2,7 +2,7 @@
   <div :class="['a-date-picker', {'type--month': type === 'month'}]">
     <v-text-field
       ref="input"
-      :value="formattedDate"
+      :value="displayedInputValue"
       :label="label"
       :placeholder="type === 'month' ? '' : 'DD.MM.JJJJ'"
       :style="cwm_widthStyle"
@@ -11,7 +11,9 @@
       append-icon="$calendarIcon"
       :readonly="type === 'month'"
       :clearable="clearable"
-      @input="dateInputChanged"
+      @input="onTextInput"
+      @focus="onInputFocus"
+      @blur="onInputBlur"
       @click:clear="clearDate"
       @click:append="open"
       @mouseup="openIfMonth"
@@ -56,6 +58,8 @@ import { randomCssClass } from '../utils/random'
 })
 export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositionServiceMixin, CancelOnEscMixin) {
   value_ = null
+  inputFocused = false
+  actualInputValue = null
   errorMessages = []
   popUpId = randomCssClass(10)
   isOpen = false
@@ -74,6 +78,8 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
   valueChanged () {
     this.value_ = this.value
     this.validate()
+
+    this.$emit('change', this.value)
   }
 
   @Watch('focus')
@@ -81,11 +87,6 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
     this.setFocus()
   }
 
-  @Watch('formattedDate')
-  formattedDateChanged () {
-    this.$emit('displayedDateChanged', this.formattedDate)
-  }
-
   get clearable () {
     if (this.validator && this.validator.getParam('filled')) {
       return false
@@ -107,6 +108,8 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
     container.appendChild(this.popUp)
     this.positionize()
 
+    this.$el.querySelector('input').blur() // fokus entfernen, damit sofort formatiertes datum erscheint und nicht erst bei mousedown im popup
+
     this.isOpen = true
 
     this.coe_watchCancel()
@@ -211,6 +214,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
 
   clearDate () {
     this.value_ = null
+    this.actualInputValue = null // wenn fokussiert dann auf leer setzen
     this.validate()
     this.$emit('input', this.value_)
   }
@@ -219,44 +223,94 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
     return value && value.match(/^(3[01]|[12][0-9]|0?[1-9]).(1[012]|0?[1-9]).((?:19|20)\d{2})$/)
   }
 
-  dateInputChanged (value) {
+  onInputFocus (test) {
+    if (!this.errorMessages.length) { // ersetze content mit DD.MM.YYYY wenn nicht gerade fehlerhaftes Datum drin ist
+      this.actualInputValue = formatDate(this.value_)
+    }
+
+    this.inputFocused = true
+  }
+
+  onTextInput (value) {
+    this.actualInputValue = value
+  }
+
+  onInputBlur () {
+    let value = this.actualInputValue
     if (!value) {
       this.dateChanged(null)
-    } else if (this.validateTextInput(value)) {
-      const [day, month, year] = value.split('.')
-      const date = new Date(year + '-' + month + '-' + day)
-      this.dateChanged(this.dateToString(date).split('T')[0])
+    } else {
+      // If input is purely 4/6/8 digits, transform directly: 0104 -> 01.04.<thisYear>, 010426 -> 01.04.2026, 02052025 -> 02.05.2025
+      if (/^\d{4}$/.test(value) || /^\d{6}$/.test(value) || /^\d{8}$/.test(value)) {
+        const day = value.substr(0, 2)
+        const month = value.substr(2, 2)
+        const year = value.length === 4
+          ? new Date().getFullYear().toString()
+          : (value.length === 6
+              ? (2000 + parseInt(value.substr(4, 2), 10)).toString()
+              : value.substr(4, 4))
+        value = `${day.padStart(2, '0')}.${month.padStart(2, '0')}.${year}`
+      } else {
+        // also accept DD.MM.YY and expand to YYYY (covers inputs like '1.2.20')
+        const m = value.match(/^(\d{1,2})\.(\d{1,2})\.(\d{2})$/)
+        if (m) {
+          const day = m[1].padStart(2, '0')
+          const month = m[2].padStart(2, '0')
+          const year = (2000 + parseInt(m[3], 10)).toString()
+          value = `${day}.${month}.${year}`
+        }
+      }
+
+      if (this.validateTextInput(value)) {
+        const [day, month, year] = value.split('.')
+        const date = new Date(year + '-' + month + '-' + day)
+        this.dateChanged(this.dateToString(date).split('T')[0])
+      }
     }
+
+    this.inputFocused = false
   }
 
   dateChanged (date) { // date is a yyyy-mm or yyyy-mm-dd string
+    let newValue
     if (date) {
       // take given date string an create a local time date object
       // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format
       // > When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as local time.
       const timeString = this.value_ ? this.value_.toTimeString().split(' ')[0] : '00:00:00'
       const dateStringThatGetsConvertedToLocalDate = date + 'T' + timeString
-      this.value_ = new Date(dateStringThatGetsConvertedToLocalDate)
+      newValue = new Date(dateStringThatGetsConvertedToLocalDate)
     } else {
-      this.value_ = null
+      newValue = null
+    }
+
+    // bitte kein date dispatchen, wenn die werte gleich sind,
+    // weil hier ggf. das day-popup nicht oeffnet, da das input
+    // den fokus verliert
+    if (this.value_?.getTime() === newValue?.getTime()) {
+      return
     }
 
+    this.value_ = newValue
+
     this.validate()
 
     this.close()
     this.$emit('input', this.value_)
   }
 
-  get formattedDate () {
-    const date = this.value_
-    if (!date) {
-      return null
-    }
+  get displayedInputValue () {
     if (this.type === 'month') {
+      const date = this.value_
       const monthName = date.toLocaleString('default', { month: 'long' })
       return monthName + ' ' + date.getFullYear()
     }
-    return formatDate(date)
+
+    if (!this.value_ || this.inputFocused || this.errorMessages.length) {
+      return this.actualInputValue
+    }
+
+    return formatDate(this.value_, {day: 'short'})
   }
 
   validate () {
@@ -299,13 +353,6 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
     }]
   }
 
-  get dateValidationRules () {
-    if (this.validator) {
-      return this.validator.getRules(this.label)
-    }
-    return []
-  }
-
   setFocus (force = false) {
     const focus = this.focus || force // set focus if this.focus or else if forced from outside
     if (focus) {

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

@@ -8,7 +8,7 @@
     hide-details
     v-bind="$attrs"
     v-on="$listeners"
-    @displayedDateChanged="displayedDateChanged"
+    @change="dateChanged"
   />
 </template>
 
@@ -16,11 +16,16 @@
 <script>
 import { Component, Mixins } from '@a-vue'
 import { ListFilterMixin } from '../ListFilterMixin'
+import { formatDate } from '@a-vue/utils/format-date'
 
 @Component
 export default class ListFilterDate extends Mixins(ListFilterMixin) {
-  displayedDateChanged (formattedDate) {
-    this.displayValue = formattedDate
+  created () {
+    this.displayValue = formatDate(this.filter.value)
+  }
+
+  dateChanged (formattedDate) {
+    this.displayValue = formatDate(formattedDate)
   }
 }
 </script>

package/src/utils/format-date.js

@@ -9,7 +9,9 @@ export function formatDate (date, options = {}) {
     return ''
   }
 
-  const dayName = options.day ? date.toLocaleDateString('de-DE', { weekday: options.weekday || 'long' }) + ', ' : ''
+  const dayName = options.day
+    ? date.toLocaleDateString('de-DE', {weekday: typeof options.day === 'string' ? options.day : 'long'}) + ', '
+    : ''
 
   const month = addZero(date.getMonth() + 1)
   const day = addZero(date.getDate())