WIP Поправила форму создания, заменила селекты

src/components/base/BaseAddingNetwork.vue

@@ -1,16 +1,16 @@
 <template lang="pug">
   .flex.w-full(class="gap-x-1.5")
     .flex(:id="value.id" @click="(e) => saveNetworkId(e)")
-      base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
+      base-select-networks(:style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
     base-input.w-full(v-model:value="value.username" placeholder="Ссылкa")
 </template>
 
 <script>
-import BaseSelect from "@/components/base/OldBaseSelect";
+import BaseSelectNetworks from "@/components/base/BaseSelectNetworks";
 import BaseInput from "@/components/base/BaseInput";
 export default {
   name: "TableAddingNetwork",
-  components: { BaseInput, BaseSelect },
+  components: { BaseInput, BaseSelectNetworks },
   props: {
     saveNetworkId: {
       type: Function,

src/components/base/BaseCustomSelect.vue

@@ -0,0 +1,118 @@
+<template lang="pug">
+  .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
+    @click="open = !open",
+    :class="{'open': open, 'border-none': borderNone}",
+  )
+    .placeholder.text-base.flex.items-center(
+      :class="{'value-color': value.label || placeholderOpacity}"
+    ) {{ value.label || placeholder }}
+    .flex.items-center
+      .select-form-separator.cursor-pointer.mr-4(v-if="separator")
+      span.icon-down-arrow.open-icon.flex.text-xsm(:class="{'open': open }")
+    base-options(
+      v-if="open",
+    )
+      .items-container.mt-1(
+        @click="closeOptions",
+        v-click-outside="leaveSelect"
+      )
+        .item.py-2.px-4.cursor-pointer(
+          v-for="item in items",
+          :key="item.id"
+          @click="clickItem(item.id, item.label)"
+        ) {{ item.label }}
+</template>
+
+<script>
+import BaseOptions from "@/components/base/BaseOptions.vue";
+export default {
+  name: "BaseCustomSelect",
+  components: { BaseOptions },
+  props: {
+    placeholder: String,
+    modelValue: Object,
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    borderNone: Boolean,
+    separator: Boolean,
+    placeholderOpacity: Boolean,
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      open: false,
+    };
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  methods: {
+    clickItem(id, label) {
+      this.value = {
+        id: id,
+        label: label,
+      };
+    },
+    leaveSelect() {
+      this.open = false;
+    },
+    closeOptions(e) {
+      e.stopPropagation();
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.base-select
+  width: 100%
+  border: 1.5px solid #D3D4DC
+  border-radius: 4px
+  background-color: white
+  user-select: none
+  &.open
+    border: 1.5px solid #4772F2
+.items-container
+  box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
+  border-radius: 4px
+  background-color: white
+.placeholder
+  color: #090A15
+  opacity: 0.5
+  text-overflow: ellipsis
+  overflow: hidden
+.item
+  border-bottom: 0.5px solid #D3D4DC
+  color: #090A15
+  &:hover
+   background-color: rgba(215, 217, 255, 0.25)
+  &:last-child
+    border-bottom: none
+.open-icon
+  &.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
+.select-form-separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+</style>

src/components/base/BaseOptions.vue

@@ -0,0 +1,31 @@
+<template lang="pug">
+  .base-options(:style="styles")
+    slot
+</template>
+
+<script>
+export default {
+  name: "BaseOptions",
+  computed: {
+    parent() {
+      return this.$parent.$el;
+    },
+    parentSize() {
+      return this.parent?.getBoundingClientRect();
+    },
+    styles() {
+      return {
+        top: this.parentSize.height + "px",
+        left: "-1px",
+        minWidth: this.parentSize.width + "px",
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.base-options
+  position: absolute
+  z-index: 10
+</style>

src/components/base/BaseSelectNetworks.vue

@@ -1,27 +1,9 @@
 <template lang="pug">
-  .flex.box-border.container.items-center.cursor-pointer.relative(
+  .flex.box-border.container.items-center.cursor-pointer.justify-center.relative(
     @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")
-      input.text-base.select.cursor-pointer(
-          :size="sizeInput"
-          v-model="optionData"
-          :placeholder="placeholder"
-          :disabled="disabled"
-          @input="sendData"
-        )
-      .absolute.options.top-12.left-0(
-        v-show="isSelectOpen"
-        :id="id"
-        )
-        .option.px-4.py-1(
-          v-for="data in filteredListData"
-          @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'")
+    .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(:class="optionData, 'px-2.5'")
       .absolute.options.top-11.left-0(
         v-show="isSelectOpen"
         :id="id")
@@ -33,12 +15,11 @@
           :class="data.icon"
           )
     .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}")
 </template>
 
 <script>
 export default {
-  name: "OldBaseSelect",
+  name: "BaseSelectNetworks",
   props: {
     id: String,
     styleBorder: {
@@ -48,7 +29,6 @@ export default {
     optionData: String,
     listData: Array,
     chooseOption: Function,
-    forNetworks: Boolean,
     placeholder: {
       type: String,
       default: "",
@@ -61,36 +41,10 @@ export default {
       isSelectOpen: false,
     };
   },
-  computed: {
-    filteredListData() {
-      if (!this.disabled && this.optionData) {
-        let filteredList = [];
-        filteredList = this.listData.filter((elem) => {
-          let reg = new RegExp(`${this.optionData}`, "img");
-          if (elem.name) {
-            return elem.name.match(reg);
-          }
-          return elem.match(reg);
-        });
-        if (filteredList.length === 0) this.closeSelect();
-        return filteredList;
-      }
-      return this.listData;
-    },
-  },
   methods: {
     changeSelect() {
       this.isSelectOpen = !this.isSelectOpen;
     },
-    openSelect() {
-      this.isSelectOpen = true;
-    },
-    closeSelect() {
-      this.isSelectOpen = false;
-    },
-    sendData(e) {
-      this.$emit("changeInput", e.target.value);
-    },
   },
 };
 </script>