WIP настроил создание ДУЛ для нового клиента, поправил "Основное" и "ДУЛ" по макету

src/components/base/BaseAddingNetwork.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
   .flex.w-full(class="gap-x-1.5")
-    base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
-    base-input.input-info.w-full(v-model:value="value.username" placeholder="Ссылкa")
+    .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-input.w-full(v-model:value="value.username" placeholder="Ссылкa")
 </template>
 
 <script>
@@ -11,6 +12,7 @@ export default {
   name: "TableAddingNetwork",
   components: { BaseInput, BaseSelect },
   props: {
+    saveNetworkId: Function,
     selectedOption: String,
     value: Object,
     listAddingNetworks: Array,
@@ -18,12 +20,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass" scoped>
-.icon
-  color: var(--font-dark-blue-color)
-  width: 48px
-  height: 42px
-  border: 2px solid var(--border-light-grey-color)
-  border-radius: 4px
-</style>

src/components/base/BaseInput.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
-    input.w-full.outline-0.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
+    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>
@@ -37,4 +37,9 @@ export default {
   border: 2px solid var(--border-light-grey-color)
   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/BaseSelect.vue

@@ -5,7 +5,7 @@
     :style="{ minWidth : widthSelect + 'px'}"
     )
     .relative.flex.flex-col
-      .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}}
+      .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks" :class="{default:!isSelectedOption}") {{isSelectedOption || !defaultOption ? optionData : defaultOption}}
         .absolute.options(
           v-show="isSelectOpen"
           :id="id"
@@ -14,7 +14,7 @@
           )
           .not-italic.option.pl-4.py-1(
             v-for="responsible in listData"
-            @click="(e) => chooseOption(e)"
+            @click="(e) => selectOption(e)"
             :key="responsible"
             :id="responsible"
             ) {{responsible}}
@@ -26,7 +26,7 @@
           :style="{ minWidth : widthSelect + 'px'}")
           .flex.not-italic.option.justify-center.py-1.text-xl(
             v-for="responsible in listData"
-            @click="chooseOption"
+            @click="(e) => chooseOption(e)"
             :key="responsible.network"
             :id="responsible.network"
             :class="responsible.icon"
@@ -39,6 +39,7 @@
 export default {
   name: "BaseSelect",
   props: {
+    defaultOption: String,
     id: String,
     styleBorder: {
       default: false,
@@ -55,12 +56,17 @@ export default {
   data() {
     return {
       isSelectOpen: false,
+      isSelectedOption: false,
     };
   },
   methods: {
     openSelect() {
       this.isSelectOpen = !this.isSelectOpen;
     },
+    selectOption(e) {
+      this.chooseOption(e);
+      this.isSelectedOption = true;
+    },
   },
 };
 </script>
@@ -77,8 +83,10 @@ export default {
   appearance: none
   border: none
   outline: none
-  color: var(--font-black-color-1)
+  color: var(--font-dark-blue-color)
   background-color: var(--font-black-color-0)
+  &.default
+    color: var(--font-black-color-1)
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none