WIP Добавлена возможность редактирования данных клиента таблицы

src/components/TheSidebar.vue

@@ -2,14 +2,14 @@
   .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border
     .flex.flex-col.gap-y-6
       the-button-sidebar(id="home" path="#/")
-        .icon-home
+        .icon-home.icon
       the-button-sidebar(id="calendar" path="#/calendar")
-        .icon-calendar-2
+        .icon-calendar-2.icon
       the-button-sidebar(id="user" path="#/clients")
-        .icon-person-2
+        .icon-person-2.icon
     .flex.text-4xl.flex-col.gap-y-6
       the-button-sidebar(id="settings" path="#/settings")
-        .icon-settings
+        .icon-settings.icon
 </template>
 
 <script>
@@ -27,4 +27,6 @@ export default {
   min-width: 80px
   background-color: var(--default-white)
   border-top-right-radius: 4px
+.icon
+  min-width: 44px
 </style>

src/components/base/BaseAddingNetwork.vue

@@ -0,0 +1,27 @@
+<template lang="pug">
+  .flex(class="gap-x-1.5")
+    base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="value.kind")
+    base-input.input-info.w-full(v-model:value="value.username" :id="value.id" placeholder="Ссылкa")
+</template>
+
+<script>
+import BaseSelect from "@/components/base/BaseSelect";
+import BaseInput from "@/components/base/BaseInput";
+export default {
+  name: "TableAddingNetwork",
+  components: { BaseInput, BaseSelect },
+  props: {
+    value: Object,
+    listAddingNetworks: Array,
+  },
+};
+</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.text-base.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
+    input.w-full.outline-0.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :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>
@@ -38,4 +38,5 @@ export default {
 .input-wrapper
   border: 2px solid var(--border-light-grey-color)
   border-radius: 4px
+  background-color: var(--default-white)
 </style>

src/components/base/BasePopup.vue

@@ -0,0 +1,32 @@
+<template lang="pug">
+  .flex.flex-col.items-end.absolute
+    .corner
+    .popup-wrapper.flex.flex-col.gap-y-3.p-4.h-fit(:style="{ width : width + 'px' }")
+      slot
+</template>
+
+<script>
+export default {
+  name: "BasePopup",
+  props: {
+    width: Number,
+    top: Number,
+    right: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.popup-wrapper
+  border-radius: 4px 0 4px 4px
+  background-color: var(--default-white)
+  box-shadow: var(--default-shadow)
+  z-index: 1
+.corner
+  width: 8px
+  height: 8px
+  border-top-left-radius: 100%
+  background-color: var(--default-white)
+  z-index: 2
+  overflow: hidden
+</style>

src/components/base/BaseSelect.vue

@@ -1,11 +1,14 @@
 <template lang="pug">
-  .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'}")
+  .flex.justify-between.box-border.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.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}")
+      .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}}
+        .absolute.options(v-show="isSelectOpen" :id="id" :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}}
+      .not-italic.select.cursor-pointer.w-full(v-if="forNetworks" :class="optionData")
+        .absolute.options(v-show="isSelectOpen" :id="id" :style="{ minWidth : widthSelect + 'px'}")
+          .not-italic.option.pl-4.py-1(v-for="responsible in listData" @click="(e) => chooseOption(e)" :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}")
 </template>
 
 <script>
@@ -23,6 +26,7 @@ export default {
     optionData: String,
     listData: Array,
     chooseOption: Function,
+    forNetworks: Boolean,
   },
   data() {
     return {
@@ -33,9 +37,6 @@ export default {
     openSelect() {
       this.isSelectOpen = !this.isSelectOpen;
     },
-    closeSelect() {
-      this.isSelectOpen = false;
-    },
   },
 };
 </script>
@@ -46,7 +47,7 @@ export default {
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
   &.border
-    background-color: rgba(255, 255, 255, 0)
+    background-color: var(--default-white)
     border: 2px solid var(--border-light-grey-color)
 .select
   appearance: none
@@ -60,9 +61,14 @@ export default {
 .options
   z-index: 3
   width: max-content
-  background-color: var(--bg-ligth-blue-color)
+  background-color: var(--default-white)
+  border: 2px solid var(--border-light-grey-color)
+  border-top: none
+  border-radius: 0 0 4px 4px
+  left: -18px
 .option
   color: var(--font-black-color)
+  border-bottom: 1px solid var(--border-light-grey-color)
   &:hover
     background-color: var(--btn-blue-color)
 .select-form-separator