WIP Переделаны селект и инпуты

src/components/base/BaseInputTime.vue

@@ -1,25 +1,21 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-4.box-border(
-    class="py-2.5"
-    :style="{ minWidth: widthInput + 'px' }"
-  )
-    input.input.w-full.outline-0.not-italic.cursor-text(
-      :value="value"
-      type="time"
-      @input="$emit('update:value', $event.target.value)"
-      :placeholder="placeholder"
-      :maxlength="maxLength"
-    )
-    .slot(v-if="withIcon" :class="iconPosition")
-      slot.cursor-pointer
+  .flex.flex-col.gap-y-2
+    .label.font-semibold.text-xxs.opacity-40(v-if="label") {{ label }}
+    .input-wrapper.flex.gap-x-2.px-4.box-border.py-2.h-10
+      input.input.w-full.outline-0.not-italic.cursor-text(
+        v-model="value"
+        type="time"
+        :placeholder="placeholder"
+      )
+      .slot(v-if="withIcon" :class="iconPosition")
+        slot.cursor-pointer
 </template>
 
 <script>
 export default {
   name: "BaseInputTime",
   props: {
-    maxLength: Number,
-    value: String,
+    modelValue: String,
     withIcon: {
       default: false,
     },
@@ -27,7 +23,18 @@ export default {
       default: "right",
     },
     placeholder: String,
-    widthInput: Number,
+    label: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
   },
 };
 </script>
@@ -41,6 +48,7 @@ export default {
   border-radius: 4px
   background-color: var(--default-white)
   color: var(--font-black-color)
+  border: 1.5px solid var(--border-light-grey-color)
 input::-webkit-calendar-picker-indicator
   cursor: pointer
 </style>