plugin-ui-for-kzt 0.0.23 → 0.0.27

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):

package/src/components/BaseSelect/BaseSelect.vue

@@ -98,6 +98,7 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import type { ICoreSelectProps, TSelectValue, ICoreSelectBaseProps, ICoreSelectOption, ISelectSlotProps } from '../../types/input';
 import BaseDropdown from '../BaseDropdown/BaseDropdown.vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
 import BaseOpenedListItem from '../BaseOpenedListItem/BaseOpenedListItem.vue';
 import { useKitSize } from '../../composables/kit/size';
 import { useKitState } from '../../composables/kit/state';
@@ -222,6 +223,10 @@ defineSlots<{
     border-radius: var(--corner-radius-m);
   }
 
+  &__header_value {
+    color: var(--primary-text-primary);
+  }
+
   &__placeholder {
     @include text-clamp(1);
 
@@ -257,7 +262,7 @@ defineSlots<{
 
   &.--small-size {
     #{$select} {
-      &__header_value {
+      &__header_value, &__placeholder {
         font: var(--typography-text-m-regular);
       }
 
@@ -280,7 +285,7 @@ defineSlots<{
 
   &.--medium-size {
     #{$select} {
-      &__header_value {
+      &__header_value, &__placeholder {
         font: var(--typography-text-m-regular);
       }
 
@@ -298,7 +303,7 @@ defineSlots<{
 
   &.--large-size {
     #{$select} {
-      &__header_value {
+      &__header_value, &__placeholder {
         font: var(--typography-text-l-regular);
       }