plugin-ui-for-kzt 0.0.23 → 0.0.25

package/src/assets/icons/loading-page-success.svg

@@ -0,0 +1,5 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="56" rx="28" fill="#12B76A"/>
+<path d="M28 46.3333C38.0833 46.3333 46.3333 38.0833 46.3333 28C46.3333 17.9166 38.0833 9.66663 28 9.66663C17.9166 9.66663 9.66663 17.9166 9.66663 28C9.66663 38.0833 17.9166 46.3333 28 46.3333Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.2084 28L25.3967 33.1883L35.7917 22.8116" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/loading-page-warning.svg

@@ -0,0 +1,6 @@
+<svg width="57" height="56" viewBox="0 0 57 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="56" height="56" rx="28" fill="#FC9700"/>
+<path d="M28.5 46.3333C38.5833 46.3333 46.8333 38.0833 46.8333 28C46.8333 17.9166 38.5833 9.66663 28.5 9.66663C18.4166 9.66663 10.1666 17.9166 10.1666 28C10.1666 38.0833 18.4166 46.3333 28.5 46.3333Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.5 18.8334V28.9167" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.4893 37.1666H28.5057" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/more-dots.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.6665 10.1667C17.6665 9.25 16.9165 8.5 15.9998 8.5C15.0832 8.5 14.3332 9.25 14.3332 10.1667C14.3332 11.0833 15.0832 11.8333 15.9998 11.8333C16.9165 11.8333 17.6665 11.0833 17.6665 10.1667Z" fill="currentColor"/>
+<path d="M17.6665 21.8333C17.6665 20.9167 16.9165 20.1667 15.9998 20.1667C15.0832 20.1667 14.3332 20.9167 14.3332 21.8333C14.3332 22.75 15.0832 23.5 15.9998 23.5C16.9165 23.5 17.6665 22.75 17.6665 21.8333Z" fill="currentColor"/>
+<path d="M17.6665 16C17.6665 15.0833 16.9165 14.3333 15.9998 14.3333C15.0832 14.3333 14.3332 15.0833 14.3332 16C14.3332 16.9167 15.0832 17.6667 15.9998 17.6667C16.9165 17.6667 17.6665 16.9167 17.6665 16Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/time-table.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0002 24.3333C11.9752 24.3333 8.7085 21.0667 8.7085 17.0417C8.7085 13.0167 11.9752 9.75 16.0002 9.75C20.0252 9.75 23.2918 13.0167 23.2918 17.0417" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 12.6667V16.8333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5 7.66667H18.5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.8335 20.1667V23.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.3335 20.1667V23.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/toast-error.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5099 5.85L13.5699 2.42C12.5999 1.86 11.3999 1.86 10.4199 2.42L4.48992 5.85C3.51992 6.41 2.91992 7.45 2.91992 8.58V15.42C2.91992 16.54 3.51992 17.58 4.48992 18.15L10.4299 21.58C11.3999 22.14 12.5999 22.14 13.5799 21.58L19.5199 18.15C20.4899 17.59 21.0899 16.55 21.0899 15.42V8.58C21.0799 7.45 20.4799 6.42 19.5099 5.85ZM11.2499 7.75C11.2499 7.34 11.5899 7 11.9999 7C12.4099 7 12.7499 7.34 12.7499 7.75V13C12.7499 13.41 12.4099 13.75 11.9999 13.75C11.5899 13.75 11.2499 13.41 11.2499 13V7.75ZM12.9199 16.63C12.8699 16.75 12.7999 16.86 12.7099 16.96C12.5199 17.15 12.2699 17.25 11.9999 17.25C11.8699 17.25 11.7399 17.22 11.6199 17.17C11.4899 17.12 11.3899 17.05 11.2899 16.96C11.1999 16.86 11.1299 16.75 11.0699 16.63C11.0199 16.51 10.9999 16.38 10.9999 16.25C10.9999 15.99 11.0999 15.73 11.2899 15.54C11.3899 15.45 11.4899 15.38 11.6199 15.33C11.9899 15.17 12.4299 15.26 12.7099 15.54C12.7999 15.64 12.8699 15.74 12.9199 15.87C12.9699 15.99 12.9999 16.12 12.9999 16.25C12.9999 16.38 12.9699 16.51 12.9199 16.63Z" fill="#F04438"/>
+</svg>

package/src/assets/icons/toast-info.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM11.25 8C11.25 7.59 11.59 7.25 12 7.25C12.41 7.25 12.75 7.59 12.75 8V13C12.75 13.41 12.41 13.75 12 13.75C11.59 13.75 11.25 13.41 11.25 13V8ZM12.92 16.38C12.87 16.51 12.8 16.61 12.71 16.71C12.61 16.8 12.5 16.87 12.38 16.92C12.26 16.97 12.13 17 12 17C11.87 17 11.74 16.97 11.62 16.92C11.5 16.87 11.39 16.8 11.29 16.71C11.2 16.61 11.13 16.51 11.08 16.38C11.03 16.26 11 16.13 11 16C11 15.87 11.03 15.74 11.08 15.62C11.13 15.5 11.2 15.39 11.29 15.29C11.39 15.2 11.5 15.13 11.62 15.08C11.86 14.98 12.14 14.98 12.38 15.08C12.5 15.13 12.61 15.2 12.71 15.29C12.8 15.39 12.87 15.5 12.92 15.62C12.97 15.74 13 15.87 13 16C13 16.13 12.97 16.26 12.92 16.38Z" fill="#0096D7"/>
+</svg>

package/src/assets/icons/toast-success.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="#12B76A"/>
+</svg>

package/src/assets/icons/toast-warning.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.76 15.92L15.36 4.4C14.5 2.85 13.31 2 12 2C10.69 2 9.49998 2.85 8.63998 4.4L2.23998 15.92C1.42998 17.39 1.33998 18.8 1.98998 19.91C2.63998 21.02 3.91998 21.63 5.59998 21.63H18.4C20.08 21.63 21.36 21.02 22.01 19.91C22.66 18.8 22.57 17.38 21.76 15.92ZM11.25 9C11.25 8.59 11.59 8.25 12 8.25C12.41 8.25 12.75 8.59 12.75 9V14C12.75 14.41 12.41 14.75 12 14.75C11.59 14.75 11.25 14.41 11.25 14V9ZM12.71 17.71C12.66 17.75 12.61 17.79 12.56 17.83C12.5 17.87 12.44 17.9 12.38 17.92C12.32 17.95 12.26 17.97 12.19 17.98C12.13 17.99 12.06 18 12 18C11.94 18 11.87 17.99 11.8 17.98C11.74 17.97 11.68 17.95 11.62 17.92C11.56 17.9 11.5 17.87 11.44 17.83C11.39 17.79 11.34 17.75 11.29 17.71C11.11 17.52 11 17.26 11 17C11 16.74 11.11 16.48 11.29 16.29C11.34 16.25 11.39 16.21 11.44 16.17C11.5 16.13 11.56 16.1 11.62 16.08C11.68 16.05 11.74 16.03 11.8 16.02C11.93 15.99 12.07 15.99 12.19 16.02C12.26 16.03 12.32 16.05 12.38 16.08C12.44 16.1 12.5 16.13 12.56 16.17C12.61 16.21 12.66 16.25 12.71 16.29C12.89 16.48 13 16.74 13 17C13 17.26 12.89 17.52 12.71 17.71Z" fill="#FC9700"/>
+</svg>

package/src/assets/icons/trash-table.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5 10.9833C20.725 10.7083 17.9333 10.5667 15.15 10.5667C13.5 10.5667 11.85 10.65 10.2 10.8167L8.5 10.9833" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.0835 10.1417L13.2668 9.05C13.4002 8.25833 13.5002 7.66667 14.9085 7.66667H17.0918C18.5002 7.66667 18.6085 8.29167 18.7335 9.05833L18.9168 10.1417" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.7087 13.6168L21.167 22.0084C21.0753 23.3168 21.0003 24.3334 18.6753 24.3334H13.3253C11.0003 24.3334 10.9253 23.3168 10.8337 22.0084L10.292 13.6168" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6084 19.75H17.3834" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.9165 16.4167H18.0832" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/BaseChips/BaseChips.vue

@@ -52,7 +52,7 @@ const classList = computed(() => [
         overflow: hidden;
         cursor: pointer;
         height: 100%;
-        width: fit-content;
+        width: 100%;
         background: var(--primary-black-200);
         color: var(--primary-black-800);
         transition: all var(--transition);
@@ -80,6 +80,8 @@ const classList = computed(() => [
         display: flex;
         align-items: center;
         justify-content: center;
+        width: 100%;
+        height: 100%;
     }
 
     &.--is-active {

package/src/components/BaseDefaultPages/BaseDefaultPages.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="base-default-pages">
+        <div class="base-default-pages__wrapper">
+                <div 
+                    class="base-default-pages__image-container"
+                    :class="imageContainer"    
+                >
+                    <img 
+                        :src="imagePath"
+                        alt="image"
+                        class="base-default-pages__image"
+                    />
+                </div>
+            <div class="base-default-pages__content">
+                <div class="base-default-pages__text-wrapper">
+                    <h1 class="base-default-pages__title">{{ title }}</h1>
+                    <p class="base-default-pages__description">{{ description }}</p>
+                </div>
+                <base-button
+                    size="medium"
+                    color="primary"
+                    class="base-default-pages__button"
+                    @click="$emit('click-button')"
+                >
+                    {{ buttonText }}
+                </base-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseButton from '../BaseButton/BaseButton.vue';
+import type { IDefaultPagesProps } from '../../types/default-pages';
+
+const props = defineProps<IDefaultPagesProps>(); 
+
+const imagePath = computed(()=> require(`@/assets/${props.type}.png`))
+const imageContainer = computed<string[]>(()=> [
+    `base-default-pages__image-container--${props.type}`
+])
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-default-pages {
+    &,
+    &__wrapper,
+    &__text-wrapper,
+    &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        width: 100%;
+        height: 100%;
+    }
+
+    &__wrapper {
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-l);
+        max-width: 996px;
+        background: var(--bg-light);
+        padding: var(--spacing-l) 0;
+
+        @media #{$tablet} {
+            gap: 0;
+        }
+    }
+
+    &__title {
+        font: var(--typography-h3-medium);
+        color: var(--primary-text-primary);
+
+        @media #{$tablet} {
+            font: var(--typography-h1-medium);
+        }
+    }
+
+    &__description {
+        font: var(--typography-text-m-regular);
+        color: var(--primary-text-tertiary);
+
+        @media #{$tablet} {
+            font: var(--typography-h4-regular);
+        }
+    }
+
+    &__text-wrapper {
+        gap: var(--spacing-s);
+    }
+
+    &__content {
+        gap: var(--spacing-2xl);
+    }
+
+    &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    &__image-container {
+        width: 100%;
+        height: 100%;
+    }
+
+    &__image-container--tech-work {
+        max-width: 334px;
+        max-height: 345px;
+
+        @media #{$tablet} {
+            max-width: 595px;
+            max-height: 614px;
+        }
+    }
+
+    &__image-container--404 {
+        max-width: 335px;
+        max-height: 249px;
+
+        @media #{$tablet} {
+            max-width: 996px;
+            max-height: 614px;
+        }
+    }
+
+    &__button {
+        width: 100%;
+
+        @media #{$tablet} {
+            max-width: 335px;
+        }
+    }
+}
+</style>

package/src/components/BaseDefaultPages/README.md

@@ -0,0 +1,128 @@
+# 📚 Документация компонента **BaseDefaultPages.vue**
+
+> **Назначение** – единый «шаблон страниц» (404, технические работы и т.п.), который выводит заголовок, описание, кнопку и сопутствующую иллюстрацию.  
+> Компонент полностью стилизован через BEM‑классы, использует переменные CSS (см. `variables.scss` и `root.scss`) и поддерживает адаптивную разметку.
+
+## <a name="api-компонента"></a>API компонента
+
+### <a name="пропсы"></a>Пропсы
+
+| Prop          | Тип                                 | Обязательность | Описание                                                                                       | Пример значения |
+|--------------|--------------------------------------|----------------|------------------------------------------------------------------------------------------------|-----------------|
+| `title`      | `string`                             | **да**         | Текст заголовка ( `<h1>` ).                                                                    | `"Ошибка 404"` |
+| `description`| `string`                             | **да**         | Текст описания под заголовком ( `<p>` ).                                                       | `"Неправильно набранный адрес..."` |
+| `buttonText` | `string`                             | **да**         | Текст кнопки **BaseButton**.                                                                   | `"На главную"` |
+| `type`       | `'tech-work' \| '404'`               | **да**         | Ключ, который определяет: <br>· Какой PNG‑файл будет подгружен (`tech-work.png` / `404.png`).<br>· Какой BEM‑модификатор будет добавлен к контейнеру изображения (`base-default-pages__image-container--tech-work` / `...--404`). | `'404'` |
+
+> **Тип `type`** жестко ограничен перечислением. При добавлении нового типа необходимо расширить тип и добавить соответствующие стили/изображения (см. раздел **[Как добавить новый тип страницы]**).
+
+### <a name="тип-iddefaultpagesprops"></a>Тип `IDefaultPagesProps`
+
+```ts
+/**
+ * Параметры компонента BaseDefaultPages.
+ *
+ * @property {string} title         Заголовок страницы.
+ * @property {string} description   Описание (подзаголовок).
+ * @property {string} buttonText    Текст кнопки.
+ * @property {'tech-work'|'404'} type  Тип страницы, определяющий изображение и размеры.
+ */
+export interface IDefaultPagesProps {
+    title: string;
+    description: string;
+    buttonText: string;
+    type: 'tech-work' | '404';
+}
+```
+
+### <a name="вычисляемые-свойства"></a>Внутренние вычисляемые свойства
+
+| Свойство | Тип | Описание |
+|----------|------|----------|
+| `imagePath` | `ComputedRef<string>` | Генерирует путь к изображению: `require('@/assets/${props.type}.png')`. При смене `type` автоматически меняет изображение. |
+| `imageContainer` | `ComputedRef<string[]>` | Возвращает массив CSS‑классов, включающий модификатор: `['base-default-pages__image-container--${props.type}']`. Позволяет менять размеры контейнера в зависимости от типа. |
+
+---
+
+## <a name="пример-использования"></a>Пример использования
+
+```vue
+<!-- DemoPage.vue -->
+<template>
+  <div class="demo-page">
+    <h1>Plugin UI KZT – Компоненты</h1>
+
+    <section class="pages-list">
+      <!-- 404 -->
+      <BaseDefaultPages v-bind="data404" @click-button="goHome" />
+
+      <!-- Технические работы -->
+      <BaseDefaultPages v-bind="dataTechWork" @click-button="goHome" />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import BaseDefaultPages from '@/components/BaseDefaultPages/BaseDefaultPages.vue';
+
+const data404 = ref({
+  title: 'Ошибка 404',
+  description:
+    'Неправильно набранный адрес, или такой страницы больше не существует',
+  buttonText: 'На главную',
+  type: '404',
+});
+
+const dataTechWork = ref({
+  title: 'Технические работы',
+  description: 'Приносим свои извинения, попробуйте зайти позже',
+  buttonText: 'На главную',
+  type: 'tech-work',
+});
+
+// Пример простого навигационного обратного вызова
+const goHome = () => {
+  // например, router.push('/')
+  console.log('Перенаправление на главную');
+};
+</script>
+
+<style scoped lang="scss">
+.demo-page {
+  padding: var(--spacing-l);
+}
+.pages-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xl);
+}
+</style>
+
+## <a name="как-добавить-новый-тип-страницы"></a>Как добавить новый тип страницы
+
+1. **Добавьте PNG‑файл** в каталог `src/assets/` с именем `<new-type>.png` (например, `maintenance.png`).  
+2. **Обновите тип пропса** в `IDefaultPagesProps`:
+
+   ```ts
+   export interface IDefaultPagesProps {
+     // …
+     type: 'tech-work' | '404' | 'maintenance';
+   }
+   ```
+
+3. **Создайте/добавьте модификатор** в SCSS:
+
+   ```scss
+   .base-default-pages__image-container--maintenance {
+     max-width: 400px;
+     max-height: 300px;
+
+     @media #{$tablet} {
+       max-width: 800px;
+       max-height: 600px;
+     }
+   }
+   ```
+
+4. **(Опционально) Добавьте адаптивные стили** для заголовка/описания, если требуется особый дизайн.  

package/src/components/BaseOpenedListItem/BaseOpenedListItem.vue

@@ -157,7 +157,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-s);
-                height: 40px;
+                min-height: 40px;
                 padding: var(--spacing-s) var(--spacing-2l);
             }
 
@@ -177,7 +177,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-m);
-                height: 48px;
+                min-height: 48px;
                 padding: var(--spacing-m) var(--spacing-2l);
             }
 
@@ -197,7 +197,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-l);
-                height: 60px;
+                min-height: 60px;
                 padding: var(--spacing-2l) var(--spacing-l);
             }
 

package/src/components/BasePageLoader/BasePageLoader.vue

@@ -0,0 +1,211 @@
+<template>
+    <div class="base-page-loader" :class="classList" :aria-busy="loading">
+        <div class="base-page-loader__overlay" :class="{ 'base-page-loader__overlay--modal': modal }"></div>
+        <div class="base-page-loader__wrapper">
+            <div class="base-page-loader__icon-container">
+                <transition-group name="icon-fade" tag="div">
+                    <base-icon
+                        v-if="loading"
+                        key="loading"
+                        class="base-page-loader__icon base-page-loader__icon--animation"
+                        size="custom"
+                        name="loading-page-default"
+                    />
+                    <base-icon
+                        v-else-if="iconType"
+                        key="status"
+                        class="base-page-loader__icon base-page-loader__icon--after-loading"
+                        size="custom"
+                        :name="iconName"
+                    />
+                </transition-group>
+            </div>
+            <transition name="icon-fade">
+                <div v-if="message" class="base-page-loader__message">
+                    {{ message }}
+                </div>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import { useKitSize } from '../../composables/kit/size';
+import type { TPageLoaderProps } from '../../types/loading-page';
+
+const props = withDefaults(defineProps<TPageLoaderProps>(), {
+    size: 'medium',
+    loading: true,
+    message: '',
+    modal: false,
+});
+
+const { sizeClassList } = useKitSize(props);
+
+const classList = computed(() => [
+    ...sizeClassList.value,
+    'base-page-loader',
+    { '--modal': props.modal },
+]);
+
+const iconName = computed(() => {
+    switch (props.iconType) {
+        case 'success':
+            return 'loading-page-success';
+        case 'warning':
+            return 'loading-page-warning';
+        case 'error':
+            return 'loading-page-error';
+        default:
+            return 'loading-page-success';
+    }
+});
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-page-loader {
+    $loader: &;
+
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+
+    &__overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 1;
+    }
+
+    &__wrapper {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        width: auto;
+        min-width: 120px;
+    }
+
+    &__icon-container {
+        position: relative;
+        width: 56px;
+        height: 56px;
+    }
+
+    &__icon {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        &--animation {
+            animation: loader-circle 1s linear infinite;
+        }
+    }
+
+    &__message {
+        font: var(--typography-text-m-regular);
+        color: var(--primary-text-primary);
+        text-align: center;
+    }
+
+    &.--small-size {
+        #{$loader}__icon-container {
+            width: 32px;
+            height: 32px;
+        }
+
+        #{$loader}__icon {
+            width: 32px;
+            height: 32px;
+        }
+
+        #{$loader}__message {
+            font: var(--typography-text-s-regular);
+        }
+    }
+
+    &.--medium-size {
+        #{$loader}__icon-container {
+            width: 48px;
+            height: 48px;
+        }
+
+        #{$loader}__icon {
+            width: 48px;
+            height: 48px;
+        }
+
+        #{$loader}__message {
+            font: var(--typography-text-m-regular);
+        }
+    }
+
+    &.--large-size {
+        #{$loader}__icon-container {
+            width: 56px;
+            height: 56px;
+        }
+
+        #{$loader}__icon {
+            width: 56px;
+            height: 56px;
+        }
+
+        #{$loader}__message {
+            font: var(--typography-text-l-regular);
+        }
+    }
+
+    &.--modal {
+        #{$loader}__overlay {
+            background: rgba(0, 0, 0, 0.7);
+        }
+
+        #{$loader}__wrapper {
+            background: var(--bg-light);
+            border-radius: 20px;
+            padding: 48px 120px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        }
+    }
+}
+
+@keyframes loader-circle {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.icon-fade-enter-active,
+.icon-fade-leave-active {
+    transition: opacity 0.3s ease;
+}
+
+.icon-fade-enter-from,
+.icon-fade-leave-to {
+    opacity: 0;
+}
+
+.icon-fade-enter-to,
+.icon-fade-leave-from {
+    opacity: 1;
+}
+</style>

package/src/components/BasePageLoader/README.md

@@ -0,0 +1,80 @@
+BasePageLoader — это переиспользуемый Vue 3 компонент для отображения индикатора загрузки с опциональным оверлеем, текстом и иконками состояния. Компонент предназначен для показа процесса загрузки и результатов (успех, предупреждение, ошибка) с плавными анимациями.
+
+Оверлей: Полупрозрачный фон, покрывающий всё пространство компонента, с возможностью настройки для модального режима.
+Иконки: Показывает анимированную иконку загрузки во время loading: true и иконку состояния (success, warning, error) при loading: false.
+Анимации: Плавное переключение иконок с использованием opacity для избежания "прыжков".
+Сообщение: Опциональный текст, отображаемый под иконкой, с плавным появлением/исчезновением.
+Модальный режим: Поддержка отображения контента в виде модального окна с белым фоном и тенью.
+Размеры: Поддержка трех размеров (small, medium, large) для иконок.
+
+
+Пропсы
+
+size - string - medium
+Размер компонента: small, medium, large. Влияет на размер иконки и текста.
+
+loading - boolean - true
+Показывает иконку загрузки, если true, или иконку состояния, если false.
+
+iconType - TIconType ( success | error | warning ) - success
+Тип иконки состояния, отображаемой после загрузки.
+
+message - string - ''
+Опциональный текст сообщения, отображаемый под иконкой.
+
+modal - boolean - false
+Включает модальный режим с белым фоном и тенью для контента.
+
+
+Использование
+Базовый пример
+<template>
+  <div style="width: 100%; height: 400px;">
+    <BasePageLoader
+      :loading="isLoading"
+      iconType="success"
+      message="Processing your request..."
+      size="large"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import BasePageLoader from './BasePageLoader.vue';
+
+const isLoading = ref(true);
+
+// Симуляция завершения загрузки
+setTimeout(() => {
+  isLoading.value = false;
+}, 3000);
+</script>
+
+Модальный режим
+<template>
+  <div style="width: 100%; height: 400px;">
+    <BasePageLoader
+      :loading="isLoading"
+      iconType="error"
+      message="An error occurred"
+      size="medium"
+      :modal="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import BasePageLoader from './BasePageLoader.vue';
+
+const isLoading = ref(true);
+
+setTimeout(() => {
+  isLoading.value = false;
+}, 3000);
+</script>
+
+
+Модальный режим
+В модальном режиме (modal: true):