WIP Переделала передачу данных, исправила форму

src/components/base/BaseInput.vue

@@ -10,6 +10,7 @@
       @input="$emit('update:value', $event.target.value)"
       :placeholder="placeholder"
       :maxlength="maxLength"
+      :disabled="disabled"
     )
     .slot(v-if="withIcon", :class="iconPosition")
       slot.cursor-pointer
@@ -35,6 +36,7 @@ export default {
     },
     widthInput: Number,
     borderNone: Boolean,
+    disabled: Boolean,
   },
 };
 </script>
@@ -55,4 +57,6 @@ export default {
     opacity: 0
 .border-none
   border: none
+.input
+  background-color: inherit
 </style>

src/components/base/BaseSelect.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .base-select(@click="open = !open", :class="{'open': open }")
-    .placeholder.text-base {{ value || placeholder }}
+  .base-select(@click="open = !open", :class="{'open': open, 'border-none': borderNone}")
+    .placeholder.text-base(:class="{'value-color': value}") {{ value || placeholder }}
     span.icon-down-arrow.open-icon(:class="{'open': open }")
     base-menu(v-if="open")
       .items-container(@click="open = false", @mouseleave="leaveSelect")
@@ -19,6 +19,7 @@ export default {
       type: Array,
       default: () => [],
     },
+    borderNone: Boolean,
   },
   emits: ["update:modelValue"],
   data() {
@@ -86,4 +87,13 @@ export default {
   display: flex
   &.open
     transform: rotate(180deg)
+.separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+.border-none
+  border: none
+.value-color
+  opacity: 1
 </style>

src/components/base/OldBaseSelect.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
-  .flex.box-border.container.items-center.cursor-pointer.relative(
+  .flex.box-border.container.items-center.cursor-pointer.relative.py-10px.px-4.justify-between(
     @click="changeSelect"
-    :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
+    :class="{border: styleBorder }"
     )
-    .flex.mr-2(v-if="!forNetworks")
+    .flex.mr-2
       input.text-base.select.cursor-pointer(
           :size="sizeInput"
           v-model="optionData"
@@ -20,25 +20,14 @@
           @click="(e) => chooseOption(e)"
           :key="data.id || data"
           :id="data.id || data"
-          ) {{data.name || data}}
-    .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData, 'px-2.5'")
-      .absolute.options.top-11.left-0(
-        v-show="isSelectOpen"
-        :id="id")
-        .flex.option.justify-center.py-1.text-xl(
-          v-for="data in listData"
-          @click="(e) => chooseOption(e)"
-          :key="data.network"
-          :id="data.network"
-          :class="data.icon"
-          )
+          ) {{data.label || data}}
     .select-form-separator.cursor-pointer.mr-6px(v-if="separator")
-    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
+    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isSelectOpen}")
 </template>
 
 <script>
 export default {
-  name: "BaseSelect",
+  name: "OldBaseSelect",
   props: {
     id: String,
     styleBorder: {
@@ -48,7 +37,6 @@ export default {
     optionData: String,
     listData: Array,
     chooseOption: Function,
-    forNetworks: Boolean,
     placeholder: {
       type: String,
       default: "",
@@ -67,8 +55,8 @@ export default {
         let filteredList = [];
         filteredList = this.listData.filter((elem) => {
           let reg = new RegExp(`${this.optionData}`, "img");
-          if (elem.name) {
-            return elem.name.match(reg);
+          if (elem.label) {
+            return elem.lebel.match(reg);
           }
           return elem.match(reg);
         });