@afeefa/vue-app 0.0.352 → 0.0.353

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

@@ -1 +1 @@
-0.0.352
+0.0.353

package/package.json

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

package/src/components/ATimePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="timePicker">
+  <div :class="['timePicker', {nullable}]">
     <div :class="['timeInput inputField', {focus: focusHour}]">
       <div
         class="up iconButton"
@@ -15,6 +15,7 @@
         dense
         outlined
         hide-details
+        placeholder="HH"
         :error-messages="error ? ['error'] : []"
         @wheel.prevent="onWheelHour"
         @focus="focusHour = true"
@@ -50,6 +51,7 @@
         dense
         outlined
         hide-details
+        placeholder="MM"
         :error-messages="error ? ['error'] : []"
         @wheel.prevent="onWheelMinute"
         @focus="focusMinute = true"
@@ -65,6 +67,20 @@
         </a-icon>
       </div>
     </div>
+
+    <div
+      v-if="nullable && currentDate"
+      class="clear"
+    >
+      <a-icon
+        color="primary"
+        class="iconButton"
+        title="Zeit löschen"
+        @click="clear"
+      >
+        $closeCircleIcon
+      </a-icon>
+    </div>
   </div>
 </template>
 
@@ -75,7 +91,7 @@ import formatHour from '@a-vue/utils/format-hour'
 import formatMinutes from '@a-vue/utils/format-minutes'
 
 @Component({
-  props: ['value', {error: false}]
+  props: ['value', {error: false}, {nullable: false}]
 })
 export default class ATimePicker extends Vue {
   currentDate = null
@@ -86,23 +102,48 @@ export default class ATimePicker extends Vue {
   focusMinute = false
 
   created () {
-    this.currentDate = new Date(this.value)
+    this.currentDate = this.toDate(this.value)
 
     this.initHourAndMinutes()
   }
 
   @Watch('value')
   valueChanged () {
+    const value = this.toDate(this.value)
+
     // filter out inner changes loop
-    if (this.value.getTime() === this.currentDate.getTime()) {
+    if (value?.getTime() === this.currentDate?.getTime()) {
       return
     }
 
-    this.currentDate = this.value
+    this.currentDate = value
 
     this.initHourAndMinutes()
   }
 
+  // an empty value must not become a date: new Date(null) is the epoch,
+  // which renders as 01:00 in any timezone east of UTC
+  toDate (value) {
+    return value ? new Date(value) : null
+  }
+
+  clear () {
+    const hadValue = !!this.currentDate
+
+    this.currentDate = null
+
+    this.initHourAndMinutes()
+
+    if (hadValue) {
+      this.$emit('input', null)
+    }
+  }
+
+  // a picker without a value starts counting/typing at midnight
+  get dateOrMidnight () {
+    return this.currentDate || moment().startOf('day').toDate()
+  }
+
   onWheelHour (wheelEvent) {
     if (!this.focusHour) {
       return
@@ -125,11 +166,18 @@ export default class ATimePicker extends Vue {
     }
   }
 
+  // a nullable picker shows its placeholder instead of a made up 00:00
   get formattedHour () {
+    if (!this.currentDate) {
+      return this.nullable ? '' : '00'
+    }
     return formatHour(this.currentDate)
   }
 
   get formattedMinutes () {
+    if (!this.currentDate) {
+      return this.nullable ? '' : '00'
+    }
     return formatMinutes(this.currentDate)
   }
 
@@ -159,37 +207,55 @@ export default class ATimePicker extends Vue {
   }
 
   updateHoursAndMinute () {
+    this.focusMinute = false
+    this.focusHour = false
+
+    const nothingEntered = !this.currentHour && !this.currentMinutes
+
+    // clearing both fields is the way back to no time at all
+    if (this.nullable) {
+      if (nothingEntered) {
+        this.clear()
+        return
+      }
+    } else if (!this.currentDate && !Number(this.currentHour) && !Number(this.currentMinutes)) {
+      // without a value, mere focussing must not produce a 00:00
+      this.initHourAndMinutes()
+      return
+    }
+
+    let date = this.dateOrMidnight
+
     if (this.hourValid) {
-      this.currentDate = moment(this.currentDate).hours(this.currentHour).toDate()
+      date = moment(date).hours(this.currentHour).toDate()
     }
 
     if (this.minutesValid) {
-      this.currentDate = moment(this.currentDate).minutes(this.currentMinutes).toDate()
+      date = moment(date).minutes(this.currentMinutes).toDate()
     }
 
-    this.focusMinute = false
-    this.focusHour = false
+    this.currentDate = date
 
     this.dispatchDate()
   }
 
   hourUp () {
-    this.currentDate = moment(this.currentDate).add(1, 'hours').toDate()
+    this.currentDate = moment(this.dateOrMidnight).add(1, 'hours').toDate()
     this.dispatchDate()
   }
 
   hourDown () {
-    this.currentDate = moment(this.currentDate).subtract(1, 'hours').toDate()
+    this.currentDate = moment(this.dateOrMidnight).subtract(1, 'hours').toDate()
     this.dispatchDate()
   }
 
   minutesUp () {
-    this.currentDate = moment(this.currentDate).add(15, 'minutes').toDate()
+    this.currentDate = moment(this.dateOrMidnight).add(15, 'minutes').toDate()
     this.dispatchDate()
   }
 
   minutesDown () {
-    this.currentDate = moment(this.currentDate).subtract(15, 'minutes').toDate()
+    this.currentDate = moment(this.dateOrMidnight).subtract(15, 'minutes').toDate()
     this.dispatchDate()
   }
 
@@ -232,6 +298,24 @@ export default class ATimePicker extends Vue {
   .hourMinutesSeparator {
     padding: 0 .4em;
   }
+
+  // the HH/MM placeholder needs a bit more room than two digits
+
+  &.nullable .v-input ::v-deep(input) {
+    width: 30px;
+  }
+
+  // only present along with a value, so it takes no room while empty
+
+  .clear {
+    display: flex;
+    padding-left: .3em;
+
+    ::v-deep() svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
 }
 
 .v-input ::v-deep(input) {