Добавлена форма создания клиента

src/components/base/BaseInput.vue

@@ -1,17 +1,25 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5")
+  .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
     img.cursor-pointer( v-if="withIcon" :class="position" src="@/assets/icons/search-black.svg" alt="SearchTable")
-    input.input-search.outline-0.text-base.not-italic(placeholder="Искать")
+    input.w-full.outline-0.text-base.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder")
 </template>
 
 <script>
 export default {
   name: "BaseInput",
   props: {
+    type: {
+      default: "text",
+    },
+    value: String,
     withIcon: {
       default: false,
     },
     iconPosition: String,
+    placeholder: {
+      default: "Поиск",
+    },
+    widthInput: Number,
   },
   computed: {
     position() {
@@ -32,6 +40,4 @@ export default {
 .input-wrapper
   border: 2px solid var(--border-light-grey-color)
   border-radius: 4px
-.input-search
-  min-width: 220px
 </style>

src/components/base/BaseSelect.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-  .flex.gap-2.py-2.px-4.w-full.container.items-center.cursor-pointer(@click="selectOpen")
+  .flex.justify-between.px-4.w-full.container.items-center.cursor-pointer(@click="openSelect" class="py-2.5" :class="{border: styleBorder}" :style="{ minWidth : widthSelect + 'px'}")
     .relative.flex.flex-col
-      .not-italic.text-base.select.cursor-pointer(:style="{ minWidth : width}") {{optionData}}
-        .absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
-          .not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
-    .select-form-separator.cursor-pointer
-    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isOpen}")
+      .not-italic.text-base.select.cursor-pointer.w-full {{optionData}}
+        .absolute.options(v-show="isSelectOpen" :id="id")
+          .not-italic.text-base.option(v-for="(responsible, index) in listData" @click="(e) => chooseOption(e)" :key="index" :id="index") {{responsible}}
+    .select-form-separator.cursor-pointer(v-if="withSeparator" )
+    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isSelectOpen}")
 </template>
 
 <script>
@@ -13,12 +13,29 @@ export default {
   name: "BaseSelect",
   props: {
     id: String,
-    width: String,
+    styleBorder: {
+      default: false,
+    },
+    widthSelect: Number,
+    withSeparator: {
+      default: false,
+    },
     optionData: String,
     listData: Array,
     chooseOption: Function,
-    isOpen: Boolean,
-    selectOpen: Function,
+  },
+  data() {
+    return {
+      isSelectOpen: false,
+    };
+  },
+  methods: {
+    openSelect() {
+      this.isSelectOpen = !this.isSelectOpen;
+    },
+    closeSelect() {
+      this.isSelectOpen = false;
+    },
   },
 };
 </script>
@@ -28,6 +45,9 @@ export default {
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
+  &.border
+    background-color: rgba(255, 255, 255, 0)
+    border: 2px solid var(--border-light-grey-color)
 .select
   appearance: none
   border: none

src/components/base/buttons/BaseCreateButton.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  button.button.flex.gap-x-2.text-base.pt-3.pb-2.px-6
+  button.button.flex.w-fit.gap-x-2.text-base.pt-3.pb-2.px-6
     .flex.text-xs.w-fit.pt-1(v-if="withIcon")
       span.icon-plus
     span.text-base.font-semibold {{text}}