Merge branch 'master' into UC-29

src/components/base/BaseSelect.vue

@@ -1,38 +1,40 @@
 <template lang="pug">
-  .flex.box-border.w-full.container.items-center.cursor-pointer(
+  .flex.box-border.container.items-center.cursor-pointer.relative(
     @click="openSelect"
     :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
-    :style="{ minWidth : widthSelect + 'px'}"
     )
-    .relative.flex.flex-col
-      .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}}
-        .absolute.options(
-          v-show="isSelectOpen"
-          :id="id"
-          class="left-[-18px]"
-          :style="{ minWidth : widthSelect + 'px'}"
-          )
-          .not-italic.option.pl-4.py-1(
-            v-for="responsible in listData"
-            @click="(e) => chooseOption(e)"
-            :key="responsible"
-            :id="responsible"
-            ) {{responsible}}
-      .flex.not-italic.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData")
+    .flex.mr-2
+      input.text-base.select.cursor-pointer(
+          :size="sizeInput"
+          v-if="!forNetworks"
+          v-model="optionData"
+          :placeholder="placeholder"
+          disabled
+        ) 
+    .absolute.options.top-12.left-0(
+      v-show="isSelectOpen"
+      :id="id"
+      )
+      .option.px-4.py-1(
+        v-for="responsible in listData"
+        @click="(e) => chooseOption(e)"
+        :key="responsible"
+        :id="responsible"
+        ) {{responsible}}
+      .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData")
         .absolute.options.top-5(
           v-show="isSelectOpen"
           class="left-[-11px]"
-          :id="id"
-          :style="{ minWidth : widthSelect + 'px'}")
-          .flex.not-italic.option.justify-center.py-1.text-xl(
+          :id="id")
+          .flex.option.justify-center.py-1.text-xl(
             v-for="responsible in listData"
             @click="chooseOption"
             :key="responsible.network"
             :id="responsible.network"
             :class="responsible.icon"
             )
-    .select-form-separator.cursor-pointer(v-if="withSeparator")
-    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
+    .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>
@@ -43,14 +45,16 @@ export default {
     styleBorder: {
       default: false,
     },
-    widthSelect: Number,
-    withSeparator: {
-      default: false,
-    },
+    separator: Boolean,
     optionData: String,
     listData: Array,
     chooseOption: Function,
     forNetworks: Boolean,
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    sizeInput: Number,
   },
   data() {
     return {
@@ -69,6 +73,7 @@ export default {
 .container
   border-radius: 4px
   width: fit-content
+  color: var(--font-dark-blue-color)
   background-color: var(--bg-ligth-blue-color)
   &.border
     background-color: var(--default-white)
@@ -77,25 +82,25 @@ export default {
   appearance: none
   border: none
   outline: none
-  color: var(--font-black-color-1)
   background-color: var(--font-black-color-0)
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
   &.networks
     color: var(--font-dark-blue-color)
+  &::placeholder
+    color: var(--font-black-color-1)
 .options
   z-index: 3
-  width: max-content
   background-color: var(--default-white)
-  border: 2px solid var(--border-light-grey-color)
-  border-top: none
-  border-radius: 0 0 4px 4px
+  border-radius: 4px
+  box-shadow: var(--default-shadow)
+  width: 100%
 .option
   color: var(--font-black-color)
-  border-bottom: 1px solid var(--border-light-grey-color)
   &:hover
     background-color: var(--btn-blue-color)
+    color: var(--default-white)
 .select-form-separator
   background-color: var(--btn-blue-color-3)
   height: 24px
@@ -103,8 +108,6 @@ export default {
   border-radius: 1px
 .icon
   color: var(--font-dark-blue-color)
-  &:hover
-    color: var(--btn-blue-color)
   &.open
     transform: rotate(180deg)
 </style>