plugin-ui-for-kzt 0.0.22 → 0.0.25

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