WIP создал и интегрировал с беком карточку адреса формы создания, заменил кнопки на BaseButton

src/components/TheSidebar.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
+import TheButtonSidebar from "@/components/base/BaseSidebarButton";
 
 export default {
   name: "TheSidebar",

src/components/base/BaseButton.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   button.base-button.text-base(
     :disabled="disabled",
-    :class="{'rounded': rounded, 'outlined': outlined, 'secondary': secondary}"
+    :class="{'rounded': rounded, 'outlined': outlined, 'secondary': secondary, 'confirm': confirm, 'added': added}"
     :style="{height: size + 'px', minWidth: size + 'px'}"
     )
     .button-container
@@ -23,7 +23,9 @@
 export default {
   name: "BaseButton",
   props: {
+    confirm: Boolean,
     outlined: Boolean,
+    added: Boolean,
     rounded: Boolean,
     disabled: Boolean,
     split: Boolean,
@@ -72,7 +74,6 @@ export default {
   &:disabled, &[disabled]
     background-color: var(--btn-blue-color-disabled)
     border: 1px solid var(--btn-blue-color-disabled)
-
 .rounded
   padding: 0
   border-radius: 50%
@@ -94,6 +95,13 @@ export default {
     border: 1px solid var(--btn-blue-color-1)
     color: var(--btn-blue-color-1)
 
+.added
+  border: 2px solid var(--btn-blue-color)
+  &:hover
+    border: none
+    background-color: var(--btn-blue-color)
+    color: var(--default-white)
+
 .secondary
   background-color: var(--btn-blue-sec-color)
   border: 1px solid var(--btn-blue-sec-color)
@@ -107,6 +115,17 @@ export default {
     border: 1px solid var(--btn-blue-sec-color)
     color: var(--btn-blue-color)
 
+.confirm
+  border-color: var(--btn-blue-color)
+  border: 2px solid var(--btn-blue-color)
+  &:hover
+    border: none
+    background-color: var(--btn-blue-color)
+    color: var(--default-white)
+  &:active
+    background-color: var(--btn-light-green-color)
+    color: var(--btn-green-color)
+
 .button-container
   display: flex
   gap: 8px

src/components/base/buttons/BaseButtonOk.vue

@@ -1,45 +0,0 @@
-<template lang="pug">
-  button.button-ok.flex.items-center.justify-center.cursor-pointer.text-xs.box-border(:style="{width:size + 'px', height:size + 'px'}" :class="{change:darkStyle}")
-    .flex.w-fit.h-fit
-      span.icon-ok.leading-none(:style="{fontSize:iconSize + 'px'}")
-</template>
-
-<script>
-export default {
-  name: "BaseButtonOk",
-  props: {
-    size: {
-      default: 24,
-    },
-    iconSize: {
-      default: 14,
-    },
-    darkStyle: {
-      default: false,
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.button-ok
-  color: var(--btn-blue-color)
-  border: 1.5px solid var(--btn-blue-color-3)
-  border-radius: 50%
-  &:hover
-    border: none
-    background-color: var(--btn-blue-color-3)
-  &:active
-    border: none
-    background-color: var(--btn-light-green-color)
-    color: var(--btn-green-color)
-.change
-  border-color: var(--btn-blue-color)
-  &:hover
-    border: none
-    background-color: var(--btn-blue-color)
-    color: var(--default-white)
-  &:active
-    background-color: var(--btn-light-green-color)
-    color: var(--btn-green-color)
-</style>

src/components/base/buttons/BaseButtonPlus.vue

@@ -1,38 +0,0 @@
-<template lang="pug">
-  button.flex.items-center.justify-center.cursor-pointer.button-plus.text-xs.box-border(:style="{width:size + 'px', height:size + 'px'}" :class="{change:withBorder}")
-    .flex.w-fit.h-fit
-      span.icon-plus.leading-none(:style="{fontSize:iconSize + 'px'}")
-</template>
-
-<script>
-export default {
-  name: "BaseButtonPlus",
-  props: {
-    size: {
-      default: 24,
-    },
-    iconSize: {
-      default: 14,
-    },
-    withBorder: {
-      default: false,
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.button-plus
-  outline: none
-  border: none
-  color: var(--btn-blue-color)
-  border-radius: 50%
-.change
-  background-color: var(--btn-blue-color-0)
-  color: var(--btn-blue-color)
-  border: 1.5px solid var(--btn-blue-color)
-  &:hover
-    border: none
-    background-color: var(--btn-blue-color)
-    color: var(--default-white)
-</style>

src/components/base/buttons/BaseCreateButton.vue

@@ -1,54 +0,0 @@
-<template lang="pug">
-  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" :class="iconPosition")
-      span.icon-plus(:style="{fontSize:iconSize + 'px'}")
-    span.text-base.font-semibold(:class="textStyled") {{text}}
-</template>
-
-<script>
-export default {
-  name: "BaseCreateButton",
-  props: {
-    text: {
-      default: "Создать",
-    },
-    withIcon: {
-      default: false,
-    },
-    iconPosition: {
-      default: "left",
-    },
-    iconSize: {
-      default: 13,
-    },
-    textStyled: {
-      default: "normal",
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.button
-  border: none
-  color: var(--default-white)
-  background-color: var(--btn-blue-color)
-  border-radius: 4px
-  &:hover
-    opacity: 0.7
-  &:active
-    opacity: 1
-    background-color: var(--font-dark-blue-color)
-.left
-  order: -1
-.right
-  order: 1
-  padding-top: 1px
-  border-left: 1px solid var(--bg-white-color-0)
-  padding-left: 14px
-  height: 24px
-  align-items: center
-.createEvent
-  font-weight: 500
-  padding-right: 2px
-</style>

src/components/base/buttons/BaseExportButton.vue

@@ -1,28 +0,0 @@
-<template lang="pug">
-  button.button.flex.gap-x-2.px-6.box-border(class="py-2.5")
-    .icon-download.text(v-if="withIcon || onlyIcon")
-    span.text-base.font-semibold(v-if="!onlyIcon" ) Сохранить
-</template>
-
-<script>
-export default {
-  name: "BaseExportButton",
-  props: {
-    withIcon: {
-      default: false,
-    },
-    onlyIcon: {
-      default: false,
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.button
-  border: 2px solid var(--btn-blue-color)
-  border-radius: 4px
-  color: var(--btn-blue-color)
-  &:hover
-    opacity: 0.7
-</style>

src/components/base/buttons/BaseOpenButton.vue

@@ -1,21 +0,0 @@
-<template lang="pug">
-  button.cursor-pointer.icon-long-arrow.open-button.text-xs.pt-1
-</template>
-
-<script>
-export default {
-  name: "OpenButton",
-};
-</script>
-
-<style lang="sass" scoped>
-.open-button
-  outline: none
-  border: none
-  width: 24px
-  height: 24px
-  max-height: 24px
-  color: var(--btn-blue-color)
-  background-color: var(--bg-ligth-blue-color)
-  border-radius: 50%
-</style>