Добавил возможность добавления документов, поправил стили окна создания документов

src/pages/clients/components/TableCreatePackageDoc.vue

@@ -3,19 +3,22 @@
     .flex.flex.flex-col.gap-y-9
       span.font-bold.text-xl Создание пакета документов
       .flex.justify-center.items-center.gap-x-2
-        base-button(:size="32", :rounded="true")
+        base-button.button(:size="32", :rounded="true")
           span(v-if="!isServices") 1
           .icon-ok.text-xs(v-else)
         span(:style="{color: 'var(--btn-blue-color)'}") Основное
         .line.flex.mx-2
-        base-button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
+        base-button.button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
         span(:style="{color: isServices ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Услуги
     .base.flex.flex-col.gap-y-6(v-if="!isServices")
       .flex.flex-col.gap-y-6
         span.font-bold Основное
         .flex.flex-col(class="gap-y-1.5")
           .counter.font-semibold.text-smm Название пакета
-          base-input(v-model:value="packageDocs.packageName", placeholder="Введите название для пакета документов")
+          base-input(
+            v-model:value="packageDocs.packageName",
+            placeholder="Введите название для пакета документов"
+          )
             span.counter 
         .flex.gap-x-4
           .flex.flex-col.w-full(class="gap-y-1.5")
@@ -37,21 +40,41 @@
           .counter.text-smm Выберите подходищие из списка
         .services-wrapper.flex.flex-col.pt-4.px-4
           .flex.gap-x-2
-            base-input(:with-icon="true", icon-position="left", :width-input="310", placeholder="Поиск")
+            base-input(
+              :with-icon="true",
+              icon-position="left",
+              :width-input="310",
+              placeholder="Поиск"
+            )
               .counter.icon-search
             base-select.h-10(placeholder="Вид услуги")
-          .flex.items-center.px-11px.py-9px(:style="{borderBottom: '1px solid var(--btn-grey-color)'}")
+          .flex.items-center.px-11px.py-9px(
+            :style="{borderBottom: '1px solid var(--btn-grey-color)'}"
+          )
             .flex.items-center.gap-x-3
-              input.counter.w-4.h-4.checkbox.cursor-pointer(type="checkbox")
+              input.counter.w-4.h-4.checkbox.cursor-pointer(
+                type="checkbox",
+                @click="selectAll",
+                v-model="isAllServices"
+              )
               .counter.flex.p-2(:style="{width: '358px'}") Название услуги
             .counter Вид услуги
           .list-services.flex.flex-col.px-11px.py-9px
             .flex.items-center(v-for="service in services", :key="service.id")
               .flex.items-center.gap-x-3
-                input.w-4.h-4.checkbox.cursor-pointer(type="checkbox")
+                input.w-4.h-4.checkbox.cursor-pointer(
+                  type="checkbox",
+                  v-model="userIds",
+                  :value="service.id"
+                )
                 .flex.p-2(:style="{width: '358px'}") {{service.name}}
               .counter {{service.type}}
-  base-button.custom-button(v-if="!isServices", :disabled="disabledButton", :size="40", @click="changeServices")
+  base-button.custom-button(
+    v-if="!isServices",
+    :disabled="disabledButton",
+    :size="40",
+    @click="changeServices"
+  )
     span.font-semibold Далее
   base-button.custom-button(:size="40", v-else)
     span.font-semibold Создать пакет документов
@@ -71,6 +94,8 @@ export default {
       packageDocs: {
         packageName: "",
       },
+      isAllServices: false,
+      userIds: [],
       services: [
         { id: 1, name: "Создание сайта", type: "Разработка" },
         {
@@ -102,6 +127,12 @@ export default {
     changeServices() {
       this.isServices = !this.isServices;
     },
+    selectAll() {
+      this.userIds = [];
+      if (!this.isAllServices) {
+        this.services.forEach((el) => this.userIds.push(el.id));
+      }
+    },
   },
 };
 </script>
@@ -110,7 +141,7 @@ export default {
 .wrap
   width: 570px
   height: fit-content
-  min-height: 700px
+  min-height: 640px
 
 .services-wrapper
   border: 1px solid var(--btn-grey-color)
@@ -124,10 +155,18 @@ export default {
   border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px
 
+.button
+  &:hover
+    background-color: var(--btn-blue-color)
+    border: none
+
 .active-button
   background: var(--btn-grey-color)
   color: var(--font-dark-blue-color)
   border-color: var(--btn-grey-color)
+  &:hover
+    background-color: var(--btn-grey-color)
+    border: none
 
 .line
   width: 78px