@afeefa/vue-app 0.0.166 → 0.0.168

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

@@ -1 +1 @@
-0.0.166
+0.0.168

package/package.json

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

package/src/components/ADatePicker.vue

@@ -52,7 +52,7 @@ import { PositionConfig } from '../services/PositionService'
 import { randomCssClass } from '../utils/random'
 
 @Component({
-  props: ['value', 'validator', 'type', {dense: true, outlined: true}]
+  props: ['value', 'validator', 'type', {dense: true, outlined: true, focus: false}]
 })
 export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositionServiceMixin, CancelOnEscMixin) {
   value_ = null
@@ -65,6 +65,8 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
   }
 
   mounted () {
+    this.setFocus()
+
     this.validate()
   }
 
@@ -74,6 +76,11 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
     this.validate()
   }
 
+  @Watch('focus')
+  focusChanged () {
+    this.setFocus()
+  }
+
   get clearable () {
     if (this.validator && this.validator.getParam('filled')) {
       return false
@@ -182,11 +189,15 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
       return null
     }
 
+    return this.dateToString(this.value_).substr(0, this.type === 'month' ? 7 : 10)
+  }
+
+  dateToString (date) {
     // format date to v-date-picker compatible string: https://stackoverflow.com/a/29774197
-    const offset = this.value_.getTimezoneOffset()
-    let date = new Date(this.value_.getTime() - (offset * 60 * 1000))
-    date = date.toISOString().substr(0, this.type === 'month' ? 7 : 10)
-    return date
+    // respecting and adding local time zone time shift to the utc iso string
+    const offset = date.getTimezoneOffset()
+    date = new Date(date.getTime() - (offset * 60 * 1000))
+    return date.toISOString()
   }
 
   get label () {
@@ -208,15 +219,16 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
       this.dateChanged(null)
     } else if (this.validateTextInput(value)) {
       const [day, month, year] = value.split('.')
-      this.dateChanged(new Date(year + '-' + month + '-' + day))
+      const date = new Date(year + '-' + month + '-' + day)
+      this.dateChanged(this.dateToString(date).split('T')[0])
     }
   }
 
-  dateChanged (date) {
+  dateChanged (date) { // date is a yyyy-mm or yyyy-mm-dd string
     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.
+      // 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 dateStringThatGetsConvertedToLocalDate = date + 'T00:00'
       this.value_ = new Date(dateStringThatGetsConvertedToLocalDate)
     } else {
@@ -287,6 +299,17 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
     }
     return []
   }
+
+  setFocus (force = false) {
+    const focus = this.focus || force // set focus if this.focus or else if forced from outside
+    if (focus) {
+      // if run in a v-dialog, the dialog background would
+      // steal the focus without requestAnimationFrame
+      requestAnimationFrame(() => {
+        this.$el.querySelector('input').focus()
+      })
+    }
+  }
 }
 </script>
 

package/src-admin/components/FlyingContextContainer.vue

@@ -76,7 +76,6 @@ export default class FlyingContextContainer extends Vue {
 
     this.visible = !!container.children.length
     const isOpening = mutationRecords.length === 1 && mutationRecords[0].addedNodes.length === 1 // only 1 record ... and this one is 'added'
-    console.log(mutationRecords)
 
     const el = document.documentElement