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

src/components/base/BaseInput.vue

@@ -1,20 +1,16 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
-    :class="{'border-none': borderNone, 'date-input': dateInput}",
-    :style="{ minWidth: widthInput + 'px' }"
-  )
-    input.input.w-full.outline-0.not-italic(
-      :class="{date:type === 'date'}",
-      :value="value",
-      :type="type",
-      @input="$emit('update:value', $event.target.value)",
-      :placeholder="placeholder",
-      :maxLength="maxLength",
-      :max="maxDate",
-      :disabled="disabled"
+  .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-10px(
+      :class="{'border-none': borderNone}"
     )
-    .slot(v-if="withIcon", :class="iconPosition")
-      slot.cursor-pointer
+      input.input.w-full.outline-0.not-italic(
+        v-model="value",
+        :placeholder="placeholder",
+        :disabled="disabled"
+      )
+      .slot(v-if="withIcon", :class="iconPosition")
+        slot.cursor-pointer
 </template>
 
 <script>
@@ -22,11 +18,7 @@
 export default {
   name: "BaseInput",
   props: {
-    type: {
-      default: "text",
-    },
-    maxLength: Number,
-    value: String,
+    modelValue: String,
     withIcon: {
       default: false,
     },
@@ -34,11 +26,20 @@ export default {
       default: "right",
     },
     placeholder: String,
-    widthInput: Number,
     borderNone: Boolean,
     disabled: Boolean,
-    maxDate: String,
-    dateInput: Boolean,
+    label: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
   },
 };
 </script>
@@ -55,12 +56,10 @@ export default {
   background-color: var(--default-white)
   color: var(--font-black-color)
   height: 40px
-.date
-  background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
-  &::-webkit-calendar-picker-indicator
-    opacity: 0
 .border-none
   border: none
 .input
   background-color: inherit
+.label
+  color: var(--font-black-color)
 </style>