ayanova/src/components/duration-control.vue

@@ -1,44 +1,59 @@
 <template>
   <div>
+    <span class="v-label v-label--active theme--light">
+      {{ label }}
+    </span>
     <template v-if="!readonly">
-      <v-text-field
-        v-if="showDays"
-        :value="days"
-        @input="handleDaysInput"
-        :readonly="readonly"
-        :disabled="disabled"
-        :label="$ay.t('TimeSpanDays')"
-        type="number"
-        :data-cy="!!$ay.dev ? 'durationdays:' + testId : false"
-      ></v-text-field>
-      <v-text-field
-        :value="hours"
-        @input="handleHoursInput"
-        :readonly="readonly"
-        :disabled="disabled"
-        :label="$ay.t('TimeSpanHours')"
-        type="number"
-        :data-cy="!!$ay.dev ? 'durationhours:' + testId : false"
-      ></v-text-field>
-      <v-text-field
-        :value="minutes"
-        @input="handleMinutesInput"
-        :readonly="readonly"
-        :disabled="disabled"
-        :label="$ay.t('TimeSpanMinutes')"
-        type="number"
-        :data-cy="!!$ay.dev ? 'durationminutes:' + testId : false"
-      ></v-text-field>
-      <v-text-field
-        v-if="showSeconds"
-        :value="seconds"
-        @input="handleSecondsInput"
-        :readonly="readonly"
-        :disabled="disabled"
-        :label="$ay.t('TimeSpanSeconds')"
-        type="number"
-        :data-cy="!!$ay.dev ? 'durationseconds:' + testId : false"
-      ></v-text-field>
+      <v-row>
+        <!-- <v-col cols="12"> -->
+        <v-col cols="3">
+          <v-text-field
+            v-if="showDays"
+            :value="days"
+            @input="handleDaysInput"
+            :readonly="readonly"
+            :disabled="disabled"
+            :label="$ay.t('TimeSpanDays')"
+            type="number"
+            :data-cy="!!$ay.dev ? 'durationdays:' + testId : false"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="3">
+          <v-text-field
+            :value="hours"
+            @input="handleHoursInput"
+            :readonly="readonly"
+            :disabled="disabled"
+            :label="$ay.t('TimeSpanHours')"
+            type="number"
+            :data-cy="!!$ay.dev ? 'durationhours:' + testId : false"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="3">
+          <v-text-field
+            :value="minutes"
+            @input="handleMinutesInput"
+            :readonly="readonly"
+            :disabled="disabled"
+            :label="$ay.t('TimeSpanMinutes')"
+            type="number"
+            :data-cy="!!$ay.dev ? 'durationminutes:' + testId : false"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="3">
+          <v-text-field
+            v-if="showSeconds"
+            :value="seconds"
+            @input="handleSecondsInput"
+            :readonly="readonly"
+            :disabled="disabled"
+            :label="$ay.t('TimeSpanSeconds')"
+            type="number"
+            :data-cy="!!$ay.dev ? 'durationseconds:' + testId : false"
+          ></v-text-field>
+        </v-col>
+        <!-- </v-col> -->
+      </v-row>
     </template>
     <template v-else>
       <v-text-field
@@ -48,6 +63,9 @@
         disabled
       ></v-text-field>
     </template>
+    <p v-show="error" class="form__error v-messages theme--light error--text">
+      {{ error }}
+    </p>
   </div>
 </template>
 <script>