plugin-ui-for-kzt 0.0.16 → 0.0.18

package/src/components/BaseModal/BaseModal.vue

@@ -0,0 +1,189 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-for="modal in modals"
+      :key="modal.id"
+      v-show="modal.isOpen"
+      class="base-modal__overlay"
+      @click.self="handleOverlayClick(modal.id)"
+    >
+      <div class="base-modal" @click.stop>
+        <div class="base-modal__wrapper">
+          <base-icon
+            v-if="modal.props?.closable"
+            name="close-circle"
+            class="base-modal__close"
+            size="custom"
+            @click="handleClose(modal.id)"
+          />
+          <div class="base-modal__content">
+            <component :is="modal.component" v-if="modal.component" :modal-props="modal.props" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useModalStore } from '../../store/modal';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+
+const modalStore = useModalStore();
+
+const modals = computed(() => modalStore.modals);
+
+const handleClose = (id: string) => {
+  modalStore.closeModal(id);
+};
+
+const handleOverlayClick = (id: string) => {
+  const topModal = modals.value[modals.value.length - 1];
+  if (topModal?.id === id && topModal.props?.closable) {
+    handleClose(id);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+.base-modal {
+  background: var(--primary-black-white);
+  border-radius: var(--corner-radius-m);
+  overflow: hidden;
+  min-width: 335px;
+  transform: scale(0.7);
+  animation: slideIn 0.3s ease forwards;
+  margin: 0 20px;
+  max-height: 90vh;
+
+  @media #{$tablet} {
+    min-width: 588px;
+  }
+
+  &__wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    min-height: 224px;
+    height: 100%;
+    padding: 24px;
+
+    @media #{$mobile-landscape} {
+      padding: 56px 68px;
+      min-height: 332px;
+    }
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    color: var(--primary-text-primary);
+    font: var(--typography-l-medium);
+
+    @media #{$mobile-landscape} {
+      font: var(--typography-h4-medium);
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--primary-gray-600);
+
+    &:hover {
+      color: var(--primary-black-900);
+    }
+
+    @media #{$mobile-landscape} {
+      width: 48px;
+      height: 48px;
+    }
+  }
+
+  &__content {
+    max-height: 70vh;
+    overflow-y: auto;
+    color: var(--primary-text-tertiary);
+    font: var(--typography-text-s-regular);
+
+    @media #{$mobile-landscape} {
+      font: var(--typography-text-l-regular);
+    }
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    flex-grow: 1;
+    gap: 24px;
+    width: 100%;
+    margin-top: 24px;
+
+    :deep(.base-button) {
+      width: 100%;
+    }
+  }
+}
+
+// Анимации
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: scale(0.7);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOut {
+  to {
+    transform: scale(0.7);
+    opacity: 0;
+  }
+}
+
+.base-modal-leave-active {
+  animation: slideOut 0.3s ease reverse;
+}
+</style>

package/src/components/BaseOpenedListItem/BaseOpenedListItem.vue

@@ -98,7 +98,7 @@ const actualComponent = computed(() => {
         width: 100%;
         height: 100%;
         text-align: left;
-        transition: all var(--ui-transition);
+        transition: all var(--transition);
 
         @include hover {
             background: var(--primary-black-100);
@@ -157,7 +157,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-s);
-                height: 14px;
+                height: 40px;
                 padding: var(--spacing-s) var(--spacing-2l);
             }
 
@@ -177,7 +177,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-m);
-                height: 24px;
+                height: 48px;
                 padding: var(--spacing-m) var(--spacing-2l);
             }
 
@@ -197,7 +197,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-l);
-                height: 24px;
+                height: 60px;
                 padding: var(--spacing-2l) var(--spacing-l);
             }
 

package/src/components/BasePagination/BasePagination.vue

@@ -1,85 +1,85 @@
 <template>
-    <nav class="base-pagination" :class="classList">
-      <base-button
+<nav class="base-pagination" :class="classList">
+    <base-button
         v-if="type === 'numbers'"
         class="base-pagination__nav base-pagination__nav--prev"
         :disabled="currentPage === 1"
         :size="props.size"
         color="quaternary"
         @click="goToPage(currentPage - 1)"
-      >
-        <base-icon
-          name="arrow-left"
-          :size="props.size"
-          color="currentColor"
-        />
+    >
+    <base-icon
+        name="arrow-left"
+        :size="props.size"
+        color="currentColor"
+    />
         <slot name="previousTextButton">Назад</slot>
-      </base-button>
+    </base-button>
 
-      <ul class="base-pagination__list">
-        <template v-if="props.type === 'numbers'">
-          <li
+    <ul class="base-pagination__list">
+    <template v-if="props.type === 'numbers'">
+        <li
             v-for="page in displayedPages"
             :key="page"
             class="base-pagination__item"
-          >
+        >
             <div v-if="page === 'ellipsis'" class="base-pagination__ellipsis">
-              ...
+                ...
             </div>
             <base-button
-              v-else
-              class="base-pagination__page"
-              :class="{ 'base-pagination__page--active': page === currentPage }"
-              :size="props.size"
-              :color="isActiveButtonColor(page)"
-              @click="typeof page === 'number' && goToPage(page)"
+                v-else
+                class="base-pagination__page"
+                :class="{ 'base-pagination__page--active': page === currentPage }"
+                :size="props.size"
+                :color="isActiveButtonColor(page)"
+                @click="typeof page === 'number' && goToPage(page)"
             >
-              {{ page }}
+                {{ page }}
             </base-button>
-          </li>
-        </template>
+        </li>
+    </template>
 
-        <template v-else>
-          <li
+    <template v-else>
+        <li
             v-for="index in Math.min(totalPages, 3)"
             :key="index"
             class="base-pagination__item"
-          >
-            <div
-              :class="[
-                {
-                    'base-pagination__dot': props.type === 'dots' || props.type === 'dotsWithBackground',
-                    'base-pagination__dash': props.type === 'dashes' || props.type === 'dashesWithBackground',
-                    'base-pagination__dot--active': (props.type === 'dots' || props.type === 'dotsWithBackground') && index === currentPage,
-                    'base-pagination__dash--active': (props.type === 'dashes' || props.type === 'dashesWithBackground') && index === currentPage,
-                },
-              ]"
-              @click="goToPage(index)"
-            ></div>
-          </li>
-        </template>
-      </ul>
-
-      <base-button
-        v-if="type ==='numbers'"
+        >
+        <div
+            :class="[
+            {
+                'base-pagination__dot': props.type === 'dots' || props.type === 'dotsWithBackground',
+                'base-pagination__dash': props.type === 'dashes' || props.type === 'dashesWithBackground',
+                'base-pagination__dot--active': (props.type === 'dots' || props.type === 'dotsWithBackground') && index === currentPage,
+                'base-pagination__dash--active': (props.type === 'dashes' || props.type === 'dashesWithBackground') && index === currentPage,
+            },
+            ]"
+            @click="goToPage(index)"
+        ></div>
+        </li>
+    </template>
+    </ul>
+
+    <base-button
+        v-if="type === 'numbers'"
         class="base-pagination__nav base-pagination__nav--next"
         color="quaternary"
         :size="props.size"
         :disabled="currentPage === totalPages"
         @click="goToPage(currentPage + 1)"
-      >
+    >
         <slot name="nextTextButton">Вперёд</slot>
         <base-icon
-          name="arrow-right"
-          :size="props.size"
-          color="currentColor"
+            name="arrow-right"
+            :size="props.size"
+            color="currentColor"
         />
-      </base-button>
-    </nav>
+    </base-button>
+</nav>
 </template>
-  
+
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { TPaginationProps } from '../../types/pagination';
 import { useKitSize } from '../../composables/kit/size';
 import BaseButton from '../BaseButton/BaseButton.vue';
@@ -98,6 +98,19 @@ const emit = defineEmits(['update:currentPage']);
 
 const currentPage = ref(props.currentPage);
 
+watch(
+    () => props.currentPage,
+    (newPage) => {
+        if (newPage !== currentPage.value) {
+        currentPage.value = newPage;
+        }
+    }
+);
+
+watch(currentPage, (newPage) => {
+    emit('update:currentPage', newPage);
+});
+
 const { sizeClassList } = useKitSize(props);
 
 const displayedPages = computed(() => {
@@ -152,22 +165,21 @@ const isActiveButtonColor = (page: string | number) => {
 const classList = computed(() => [
 sizeClassList.value,
 `base-pagination--${props.type}`,
-`--color-${props.color}`
+`--color-${props.color}`,
 ]);
 
 const goToPage = (page: number) => {
-if (page >= 1 && page <= props.totalPages) {
-    currentPage.value = page;
-    emit('update:currentPage', page);
-}
+    if (page >= 1 && page <= props.totalPages) {
+        currentPage.value = page;
+    }
 };
 </script>
-  
+
 <style lang="scss" scoped>
-  @import '@/styles/variables';
-  @import '@/styles/root';
-  
-  .base-pagination {
+@import '@/styles/variables';
+@import '@/styles/root';
+
+.base-pagination {
     $pagination: &;
 
     display: flex;
@@ -175,48 +187,49 @@ if (page >= 1 && page <= props.totalPages) {
     gap: var(--spacing-s);
 
     &__list {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-s);
-      list-style: none;
-      padding: 0;
-      margin: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-s);
+        list-style: none;
+        padding: 0;
+        margin: 0;
     }
-  
+
     &__item {
-      display: flex;
+        display: flex;
     }
-  
+
     &__page {
-      transition: all 0.2s ease;
-  
-      &--active {
-        cursor: default;
-      }
+        transition: all 0.2s ease;
+
+        &--active {
+            cursor: default;
+        }
     }
-  
+
     &__ellipsis {
-      cursor: default;
+        cursor: default;
     }
-  
+
     &__nav {
-      cursor: pointer;
-      transition: all 0.2s ease;
+        cursor: pointer;
+        transition: all 0.2s ease;
     }
 
     &__dot {
         border-radius: 50%;
     }
 
-    &__dot, &__dash {
+    &__dot,
+    &__dash {
         cursor: pointer;
         transition: all 0.2s ease;
     }
 
     &.--small-size {
-      #{$pagination}__page {
-        width: 40px;
-      }
+        #{$pagination}__page {
+            width: 40px;
+        }
     }
 
     &.--medium-size {
@@ -235,7 +248,8 @@ if (page >= 1 && page <= props.totalPages) {
             border-radius: var(--corner-radius-3xs);
         }
 
-        &.base-pagination--dotsWithBackground, &.base-pagination--dashesWithBackground {
+        &.base-pagination--dotsWithBackground,
+        &.base-pagination--dashesWithBackground {
             .base-pagination__list {
                 padding: var(--spacing-s);
                 gap: var(--spacing-m);
@@ -260,18 +274,18 @@ if (page >= 1 && page <= props.totalPages) {
             border-radius: var(--corner-radius-xxs);
         }
 
-        &.base-pagination--dotsWithBackground, &.base-pagination--dashesWithBackground {
+        &.base-pagination--dotsWithBackground,
+        &.base-pagination--dashesWithBackground {
             .base-pagination__list {
                 padding: var(--spacing-m);
                 gap: var(--spacing-l);
                 border-radius: var(--corner-radius-l);
             }
         }
-
     }
 
-    &--dotsWithBackground, &--dashesWithBackground {
-        /* Стили с фоном */
+    &--dotsWithBackground,
+    &--dashesWithBackground {
         &.base-pagination {
             width: fit-content;
 
@@ -280,12 +294,13 @@ if (page >= 1 && page <= props.totalPages) {
             }
 
             &.--color-primary {
-                .base-pagination__list {
-                    background: var(--primary-blue-700);
-                }
+                    .base-pagination__list {
+                        background: var(--primary-blue-700);
+                    }
 
-                .base-pagination__dot, .base-pagination__dash {
-                    background: var(--primary-blue-500);
+                    .base-pagination__dot,
+                    .base-pagination__dash {
+                        background: var(--primary-blue-500);
 
                     &--active {
                         background: var(--primary-black-white);
@@ -293,55 +308,60 @@ if (page >= 1 && page <= props.totalPages) {
                 }
             }
 
-            &.--color-secondary {
-                .base-pagination__list {
-                    background: var(--primary-blue-50);
-                }
+        &.--color-secondary {
+            .base-pagination__list {
+                background: var(--primary-blue-50);
+            }
 
-                .base-pagination__dot, .base-pagination__dash {
-                    background: var(--primary-blue-200);
+            .base-pagination__dot,
+            .base-pagination__dash {
+                background: var(--primary-blue-200);
 
-                    &--active {
-                        background: var(--primary-blue);
-                    }
+                &--active {
+                    background: var(--primary-blue);
                 }
             }
+        }
 
-            &.--color-white {
+        &.--color-white {
                 .base-pagination__list {
                     background: #fff;
                 }
 
-                .base-pagination__dot, .base-pagination__dash {
+                .base-pagination__dot,
+                .base-pagination__dash {
                     background: var(--primary-black-300);
 
-                    &--active {
-                        background: var(--primary-black-900);
-                    }
+                &--active {
+                    background: var(--primary-black-900);
                 }
             }
+        }
 
-            &.--color-black {
+        &.--color-black {
                 .base-pagination__list {
                     background: #000;
                 }
 
-                .base-pagination__dot, .base-pagination__dash {
+                .base-pagination__dot,
+                .base-pagination__dash {
                     background: var(--primary-black-500);
 
-                    &--active {
-                        background: var(--primary-black-white);
-                    }
+                &--active {
+                    background: var(--primary-black-white);
                 }
             }
         }
+        }
     }
 
-    &--dots, &--dashes {
+    &--dots,
+    &--dashes {
         &.--color-primary {
-            .base-pagination__dot, .base-pagination__dash {
+            .base-pagination__dot,
+            .base-pagination__dash {
                 background: var(--primary-blue-200);
-    
+
                 &--active {
                     background: var(--primary-blue);
                 }
@@ -349,19 +369,21 @@ if (page >= 1 && page <= props.totalPages) {
         }
 
         &.--color-secondary {
-            .base-pagination__dot, .base-pagination__dash {
+            .base-pagination__dot,
+            .base-pagination__dash {
                 background: var(--primary-blue-500);
-    
+
                 &--active {
-                    background: var(--primary-black-white);
+                background: var(--primary-black-white);
                 }
             }
         }
 
         &.--color-white {
-            .base-pagination__dot, .base-pagination__dash {
+            .base-pagination__dot,
+            .base-pagination__dash {
                 background: var(--primary-black-300);
-    
+
                 &--active {
                     background: var(--primary-black-900);
                 }
@@ -369,9 +391,10 @@ if (page >= 1 && page <= props.totalPages) {
         }
 
         &.--color-black {
-            .base-pagination__dot, .base-pagination__dash {
+            .base-pagination__dot,
+            .base-pagination__dash {
                 background: var(--primary-black-500);
-    
+
                 &--active {
                     background: var(--primary-black-white);
                 }