WIP Распарсила полученные данные

src/components/base/BaseInput.vue

@@ -1,7 +1,17 @@
 <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(:class="{date:type === 'date'}" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
-    .slot(v-if="withIcon" :class="iconPosition")
+  .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
+    :class="{'border-none': borderNone}"
+    :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"
+    )
+    .slot(v-if="withIcon", :class="iconPosition")
       slot.cursor-pointer
 </template>
 
@@ -24,6 +34,7 @@ export default {
       default: "Поиск",
     },
     widthInput: Number,
+    borderNone: Boolean,
   },
 };
 </script>
@@ -42,4 +53,6 @@ export default {
   background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
   &::-webkit-calendar-picker-indicator
     opacity: 0
+.border-none
+  border: none
 </style>

src/components/base/BaseInputDate.vue

@@ -0,0 +1,50 @@
+<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.date(
+      :value="value"
+      type="date"
+      @input="$emit('update:value', $event.target.value)"
+      :placeholder="placeholder"
+      :maxlength="maxLength"
+    )
+    .slot(v-if="withIcon" :class="iconPosition")
+      slot.cursor-pointer
+</template>
+
+<script>
+export default {
+  name: "BaseInputDate",
+  props: {
+    maxLength: Number,
+    value: String,
+    withIcon: {
+      default: false,
+    },
+    iconPosition: {
+      default: "right",
+    },
+    placeholder: {
+      default: "Поиск",
+    },
+    widthInput: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.left
+  order: -1
+.right
+  order: 1
+.input-wrapper
+  border-radius: 4px
+  background-color: var(--default-white)
+  color: var(--font-dark-blue-color)
+.date
+  background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
+  &::-webkit-calendar-picker-indicator
+    opacity: 0
+</style>

src/components/base/BaseInputTime.vue

@@ -0,0 +1,46 @@
+<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(
+      :value="value"
+      type="time"
+      @input="$emit('update:value', $event.target.value)"
+      :placeholder="placeholder"
+      :maxlength="maxLength"
+    )
+    .slot(v-if="withIcon" :class="iconPosition")
+      slot.cursor-pointer
+</template>
+
+<script>
+export default {
+  name: "BaseInputTime",
+  props: {
+    maxLength: Number,
+    value: String,
+    withIcon: {
+      default: false,
+    },
+    iconPosition: {
+      default: "right",
+    },
+    placeholder: {
+      default: "Поиск",
+    },
+    widthInput: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.left
+  order: -1
+.right
+  order: 1
+.input-wrapper
+  border-radius: 4px
+  background-color: var(--default-white)
+  color: var(--font-dark-blue-color)
+</style>

src/components/base/OldBaseSelect.vue

@@ -72,7 +72,7 @@ export default {
           }
           return elem.match(reg);
         });
-        filteredList.length === 0 ? this.closeSelect() : this.openSelect();
+        if (filteredList.length === 0) this.closeSelect();
         return filteredList;
       }
       return this.listData;
@@ -100,7 +100,7 @@ export default {
   border-radius: 4px
   width: fit-content
   color: var(--font-dark-blue-color)
-  background-color: var(--bg-ligth-blue-color)
+  background-color: var(--default-white)
   &.border
     background-color: var(--default-white)
     border: 2px solid var(--border-light-grey-color)