@afeefa/vue-app 0.0.212 → 0.0.214

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

@@ -1 +1 @@
-0.0.212
+0.0.214

package/package.json

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

package/src/components/ATimePicker.vue

@@ -15,6 +15,7 @@
         dense
         outlined
         hide-details
+        :error-messages="error ? ['error'] : []"
         @wheel.prevent="onWheelHour"
         @focus="focusHour = true"
         @blur="updateHoursAndMinute"
@@ -49,6 +50,7 @@
         dense
         outlined
         hide-details
+        :error-messages="error ? ['error'] : []"
         @wheel.prevent="onWheelMinute"
         @focus="focusMinute = true"
         @blur="updateHoursAndMinute"
@@ -73,7 +75,7 @@ import formatHour from '@a-vue/utils/format-hour'
 import formatMinutes from '@a-vue/utils/format-minutes'
 
 @Component({
-  props: ['value']
+  props: ['value', {error: false}]
 })
 export default class ATimePicker extends Vue {
   currentDate = null
@@ -91,14 +93,12 @@ export default class ATimePicker extends Vue {
 
   @Watch('value')
   valueChanged () {
-    let date = new Date(this.value)
-    if (this.currentHour) {
-      date = moment(date).hours(this.currentHour).toDate()
-    }
-    if (this.currentMinutes) {
-      date = moment(date).minutes(this.currentMinutes).toDate()
+    // filter out inner changes loop
+    if (this.value.getTime() === this.currentDate.getTime()) {
+      return
     }
-    this.currentDate = date
+
+    this.currentDate = this.value
 
     this.initHourAndMinutes()
   }
@@ -216,12 +216,17 @@ export default class ATimePicker extends Vue {
     }
   }
 
+  ::v-deep() svg {
+    width: 28px;
+    height: 28px;
+  }
+
   .up {
-    margin-bottom: -1px;
+    margin-bottom: -5px;
   }
 
   .down {
-    margin-top: -3px;
+    margin-top: -7px;
   }
 
   .hourMinutesSeparator {

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

@@ -1,40 +1,12 @@
 <template>
-  <v-menu
-    ref="menu"
-    v-model="menu"
-    :close-on-content-click="false"
-    :nudge-right="40"
-    :return-value.sync="model[name]"
-    transition="scale-transition"
-    offset-y
-    max-width="290px"
-    min-width="290px"
-  >
-    <template #activator="{ on, attrs }">
-      <v-text-field
-        v-model="model[name]"
-        :label="label || name"
-        prepend-icon="mdi-clock-time-four-outline"
-        readonly
-        dense
-        outlined
-        v-bind="attrs"
-        v-on="on"
-      />
-    </template>
-    <v-time-picker
-      v-if="menu"
-      ref="timePicker"
-      v-model="model[name]"
-      :validator="validator"
-      v-bind="$attrs"
-      full-width
-      scrollable
-      format="24hr"
-      v-on="$listeners"
-      @click:minute="$refs.menu.save(model[name])"
-    />
-  </v-menu>
+  <a-time-picker
+    v-model="model[name]"
+    class="timePicker"
+    :label="label || name"
+    :validator="validator"
+    v-bind="$attrs"
+    v-on="$listeners"
+  />
 </template>
 
 <script>
@@ -43,9 +15,5 @@ import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component
 export default class FormFieldTime extends Mixins(FormFieldMixin) {
-  menu = false
-  validate () {
-    this.$refs.timePicker.validate()
-  }
 }
 </script>