plugin-ui-for-kzt 0.0.22 → 0.0.25

package/src/components/BaseToast/README.md

@@ -0,0 +1,103 @@
+# Компонент `BaseToast` и Плагин `ToastPlugin`
+
+Компонент `BaseToast` — это универсальный компонент уведомлений (тостов) для отображения кратких сообщений пользователю с поддержкой различных типов (инфо, успех, предупреждение, ошибка) и кастомизацией. Плагин `ToastPlugin` интегрирует компонент в приложение Vue.js, предоставляя удобный API для управления тостами через глобальный объект `$toast`.
+
+## Использование
+
+### Базовый пример
+Используйте composable `useToast` для вызова тостов из любого компонента:
+
+```vue
+<template>
+  <div>
+    <base-button @click="openToast">Показать тост</base-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from '../composables/useToast';
+
+const toast = useToast();
+
+const openToast = () => {
+  toast.show('toast-1', {
+    title: 'Успех',
+    type: 'success',
+    description: 'Операция выполнена успешно!',
+    showIcon: true,
+    closable: true,
+    primaryActionText: 'Подтвердить',
+    secondaryActionText: 'Отмена',
+  });
+};
+</script>
+```
+
+### API
+#### Методы
+- **`$toast.show(id: string, props: IBaseToastProps)`**: Показывает новый тост.
+  - `id`: Уникальный идентификатор тоста (тосты с одинаковым `id` заменяют друг друга).
+  - `props`: Объект с настройками тоста (см. ниже).
+- **`$toast.hide(id: string)`**: Скрывает тост по указанному `id`.
+- **`$toast.clear()`**: Удаляет все тосты.
+
+#### Свойства `IBaseToastProps`
+- `title: string` (обязательно): Заголовок тоста.
+- `type?: 'info' | 'success' | 'warning' | 'error'`: Тип тоста (по умолчанию `'info'`).
+- `withBackground?: boolean`: Добавляет цветной фон в зависимости от типа (по умолчанию `false`).
+- `description?: string`: Описание тоста.
+- `showIcon?: boolean`: Показывать иконку (по умолчанию `true`).
+- `closable?: boolean`: Показывать кнопку закрытия (по умолчанию `true`).
+- `primaryActionText?: string`: Текст для основной кнопки действия.
+- `secondaryActionText?: string`: Текст для вторичной кнопки действия.
+- `duration?: number`: Время отображения в миллисекундах (по умолчанию рассчитывается: 5000 мс для текста ≤ 80 символов, 10000 мс для > 80 символов).
+
+### Примеры
+
+#### Тост с кастомным временем
+```typescript
+toast.show('toast-custom', {
+  title: 'Кастомный тост',
+  type: 'warning',
+  description: 'Это сообщение покажется на 3 секунды.',
+  duration: 3000,
+});
+```
+
+#### Тост с действиями
+```typescript
+toast.show('toast-action', {
+  title: 'Действие',
+  type: 'info',
+  primaryActionText: 'Подтвердить',
+  secondaryActionText: 'Отмена',
+  onPrimaryAction: () => console.log('Подтверждено'),
+  onSecondaryAction: () => console.log('Отменено'),
+});
+```
+
+#### Замена тоста
+```typescript
+toast.show('toast-1', { title: 'Тост 1', type: 'success' });
+toast.show('toast-1', { title: 'Тост 2', type: 'success' }); // Заменит первый тост
+```
+
+#### Несколько тостов
+```typescript
+toast.show('toast-info', { title: 'Инфо', type: 'info' });
+toast.show('toast-success', { title: 'Успех', type: 'success' });
+```
+Тосты отображаются в колонке (максимум 4 на десктопе, 3 на мобильных).
+
+
+### Анимации
+Анимации `slideIn` и `slideOut` определены в `BaseToast.vue`. Их можно переопределить, добавив собственные `@keyframes` в глобальные стили.
+
+## Поведение
+
+- **Позиционирование**: Тосты отображаются в правом верхнему углу экрана (`top: 20px`, `right: 20px`) с максимальной шириной 620px на десктопе. На мобильных устройствах (ширина ≤ 768px) растягиваются на всю ширину с отступами 8px.
+- **Автозакрытие**: По умолчанию 5 секунд для сообщений ≤ 80 символов, 10 секунд для > 80 символов. Можно задать кастомное время через `duration`.
+- **Замена тостов**: Тосты с одинаковым `id` заменяют друг друга. Тосты с разными `id` отображаются в колонке.
+- **Ограничение**: Максимум 4 тоста на десктопе, 3 на мобильных. При превышении удаляется самый старый тост.
+- **Закрытие**: Тосты закрываются при нажатии на кнопку закрытия (если `closable`), по истечении времени или при смене страницы (событие `popstate`).
+

package/src/components/BaseTooltip/BaseTooltip.vue

@@ -32,6 +32,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import type { ITooltipProps } from '../../types/tooltip';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
 
 const props = withDefaults(defineProps<ITooltipProps>(), {
   position: 'top',

package/src/components/BaseUpload/BaseUpload.vue

@@ -111,10 +111,12 @@ import BaseIcon from '../BaseIcon/BaseIcon.vue';
 import { useModal } from '../../composables/useModal';
 import type { UploadedFile, IpropsUpload } from '../../types/uploadedFile.d';
 import ImageModal from './ImageModal.vue';
+import CropModal from './CropModal.vue';
 
 const props = withDefaults(defineProps<IpropsUpload>(), {
   multiple: true,
   maxFileSize: 25 * 1024 * 1024, // 25 MB в байтах
+  enableCrop: false,
 });
 
 const emit = defineEmits(['update:files']);
@@ -141,6 +143,11 @@ const triggerFileInput = () => {
   fileInput.value?.click();
 };
 
+const isImageFile = (file: File) => {
+  const fileExtension = `.${file.name.split('.').pop()?.toLowerCase() || ''}`;
+  return mediaExtensions.includes(fileExtension);
+};
+
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement;
   const files = target.files;
@@ -161,7 +168,11 @@ const handleFileUpload = (event: Event) => {
         return;
       }
 
-      uploadedFiles.value.push({ name: file.name, size: file.size, file });
+      if (props.enableCrop && isImageFile(file)) {
+        openCropModal(file);
+      } else {
+        uploadedFiles.value.push({ name: file.name, size: file.size, file });
+      }
     });
 
     isUploading.value = false;
@@ -169,6 +180,29 @@ const handleFileUpload = (event: Event) => {
   }
 };
 
+const openCropModal = (file: File) => {
+  const imageUrl = URL.createObjectURL(file);
+  
+  modal.open('crop-modal', {
+    closable: false,
+    imageUrl,
+    fileName: file.name,
+    cancelText: props.cropTexts?.cancel,
+    confirmText: props.cropTexts?.confirm,
+    onConfirm: (croppedFile: File) => {
+      uploadedFiles.value.push({
+        name: croppedFile.name, 
+        size: croppedFile.size, 
+        file: croppedFile 
+      });
+      URL.revokeObjectURL(imageUrl);
+    },
+    onCancel: () => {
+      URL.revokeObjectURL(imageUrl);
+    }
+  }, CropModal);
+};
+
 const removeFile = (index: number, isMedia: boolean) => {
   const files = isMedia ? mediaFiles.value : otherFiles.value;
   const globalIndex = uploadedFiles.value.indexOf(files[index]);
@@ -355,7 +389,7 @@ gap: var(--spacing-l);
 }
 
 &__error {
-    color: var(--primary-red-500);
+    color: var(--error-red);
     margin-top: 0.5rem;
     font-size: var(--typography-text-s-regular);
 }

package/src/components/BaseUpload/CropModal.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="crop-modal">
+    <div class="crop-modal__container">
+      <div class="crop-modal__body">
+        <div class="crop-modal__cropper-container">
+          <Cropper
+              ref="cropperRef"
+              class="crop-modal__cropper"
+              :src="modalProps.imageUrl"
+              :stencil-props="{
+              aspectRatio: NaN,
+              movable: true,
+              resizable: true,
+            }"
+              :resize-image="{
+              adjustStencil: false
+            }"
+          />
+        </div>
+      </div>
+
+      <div class="crop-modal__footer">
+        <base-button
+            color="secondary"
+            size="small"
+            @click="handleCancel"
+            class="crop-modal__button"
+        >
+          {{ modalProps.cancelText || 'Отменить' }}
+        </base-button>
+
+        <base-button
+            color="primary"
+            size="small"
+            @click="handleConfirm"
+            class="crop-modal__button"
+        >
+          {{ modalProps.confirmText || 'Применить' }}
+        </base-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import {Cropper} from 'vue-advanced-cropper';
+import 'vue-advanced-cropper/dist/style.css';
+import BaseButton from '../BaseButton/BaseButton.vue';
+import {useModal} from '../../composables/useModal';
+
+interface CropModalProps {
+  modalProps: {
+    imageUrl: string;
+    fileName: string;
+    onConfirm: (croppedFile: File) => void;
+    onCancel: () => void;
+    cancelText?: string;
+    confirmText?: string;
+  };
+}
+
+const props = defineProps<CropModalProps>();
+const modal = useModal();
+
+const cropperRef = ref();
+
+const handleCancel = () => {
+  props.modalProps.onCancel();
+  modal.close('crop-modal');
+};
+
+const handleConfirm = () => {
+  if (!cropperRef.value) return;
+
+  const {canvas} = cropperRef.value.getResult();
+
+  if (canvas) {
+    canvas.toBlob((blob: Blob | null) => {
+      if (blob) {
+        const croppedFile = new File([blob], props.modalProps.fileName, {
+          type: 'image/jpeg',
+          lastModified: Date.now(),
+        });
+
+        props.modalProps.onConfirm(croppedFile);
+        modal.close('crop-modal');
+      }
+    }, 'image/jpeg', 0.9);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.crop-modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 588px;
+  max-height: 776px;
+
+  @media #{$mobile-max-576} {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  &__container {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  &__body {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__cropper-container {
+    height: 500px;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+
+    @media #{$mobile-max-375} {
+      overflow: unset;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    gap: var(--spacing-xl);
+    justify-content: space-between;
+    padding: var(--spacing-xl);
+    background-color: var(--primary-black-white);
+
+    @media #{$mobile-max-576} {
+      flex-direction: column;
+      justify-content: center;
+      gap: var(--spacing-l);
+    }
+  }
+
+  &__button {
+    min-width: 258px;
+
+    @media #{$mobile-landscape} {
+      min-width: unset;
+      width: 100%;
+    }
+  }
+}
+
+::v-deep(.vue-advanced-cropper__background) {
+  background: rgba(0, 0, 0, 0.3);
+  width: 100%;
+}
+
+::v-deep(.vue-advanced-cropper__foreground) {
+  border-color: var(--primary-blue);
+  background: rgba(0, 0, 0, 0.3);
+}
+
+::v-deep(.vue-simple-handler) {
+  background: var(--primary-blue);
+  border-color: white;
+}
+
+::v-deep(.vue-simple-handler:hover) {
+  background: var(--primary-blue-deep);
+}
+
+::v-deep(.vue-simple-line) {
+  border-color: var(--primary-blue);
+}
+</style>
+
+<style lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-modal:has(.crop-modal) {
+  @media screen and (max-width: 375px) {
+    max-height: unset !important;
+    height: 100vh !important;
+  }
+}
+
+.base-modal__content:has(.crop-modal) {
+  width: 100% !important;
+
+  @media screen and (max-width: 375px) {
+    overflow-y: unset !important;
+  }
+}
+
+.base-modal__wrapper:has(.crop-modal) {
+  padding: 0 !important;
+
+  @media #{$mobile-max-767} {
+    padding: 0 !important;
+  }
+
+  @media screen and (max-width: 375px) {
+    justify-content: start !important;
+  }
+}
+</style>

package/src/composables/useToast.ts

@@ -0,0 +1,10 @@
+import { inject } from 'vue';
+import type {  IToastApi } from '../types/toast';
+
+export function useToast() {
+    const toast = inject<IToastApi>('$toast');
+    if (!toast) {
+        throw new Error('toast plugin is not installed');
+    }
+    return toast;
+}

package/src/index.ts

@@ -1,10 +1,8 @@
 import { createPinia } from "pinia";
-import DataTable from "./components/DataTable/DataTable.vue";
-import Tooltip from "./components/Tooltip/Tooltip.vue";
-import Spinner from "./components/Spinner/Spinner.vue";
 import ModalPlugin from "./plugins/modalPlugin";
 import { useModal } from "./composables/useModal";
-import ToasterPlugin, { useToast } from "./plugins/toasterPlugin";
+import { useToast } from "./composables/useToast";
+import ToastPlugin from "./plugins/toastPlugin";
 import "./sprite"; // Импортируем иконки для генерации спрайта
 import "./styles/root.scss";
 import BaseIcon from "./components/BaseIcon/BaseIcon.vue";
@@ -36,15 +34,17 @@ import BaseBadge from "./components/BaseBadge/BaseBadge.vue";
 import BaseTag from "./components/BaseTag/BaseTag.vue";
 import BaseBadgeGroup from "./components/BaseBadge/BaseBadgeGroup.vue";
 import BaseField from "./components/BaseField/BaseField.vue";
+import BaseToast from "./components/BaseToast/BaseToast.vue";
+import BasePageLoader from "./components/BasePageLoader/BasePageLoader.vue";
+import BaseTabs from "./components/BaseTabs/BaseTabs.vue";
+import BaseTable from "./components/BaseTable/BaseTable.vue";
+import BaseDefaultPages from "./components/BaseDefaultPages/BaseDefaultPages.vue";
 
 const components = {
   BaseModal,
   BaseTag,
   BaseBadge,
   BaseBadgeGroup,
-  DataTable,
-  Tooltip,
-  Spinner,
   BaseIcon,
   BaseBreadCrumbs,
   BaseButton,
@@ -69,7 +69,12 @@ const components = {
   BaseChips,
   BaseSwiper,
   BaseUpload,
-  BaseField
+  BaseField,
+  BaseToast,
+  BasePageLoader,
+  BaseTabs,
+  BaseTable,
+  BaseDefaultPages
 };
 
 // Функция для загрузки sprite.svg
@@ -118,7 +123,7 @@ export default {
     loadSprite();
 
     app.use(ModalPlugin);
-    app.use(ToasterPlugin);
+    app.use(ToastPlugin);
   },
 };
 
@@ -126,10 +131,7 @@ export {
   BaseModal,
   BaseBadgeGroup,
   BaseBadge,
-  DataTable,
   BaseTag,
-  Tooltip,
-  Spinner,
   useModal,
   useToast,
   BaseIcon,
@@ -156,5 +158,10 @@ export {
   BaseChips,
   BaseSwiper,
   BaseUpload,
-  BaseField
+  BaseField,
+  BaseToast,
+  BasePageLoader,
+  BaseTabs,
+  BaseTable,
+  BaseDefaultPages
 };

package/src/plugins/toastPlugin.ts

@@ -0,0 +1,100 @@
+import { createApp, h, provide, defineComponent } from 'vue';
+import { useToastStore } from '../store/toast';
+import BaseToast from '../components/BaseToast/BaseToast.vue';
+import { watch, ref } from 'vue';
+import type { IBaseToastProps } from '../types/toast';
+
+export default {
+  install(app: any) {
+    console.log('Installing ToastPlugin...');
+    const toastStore = useToastStore();
+
+    let toastContainer = document.querySelector('.toast-container');
+    if (!toastContainer) {
+      toastContainer = document.createElement('div');
+      toastContainer.classList.add('toast-container');
+      document.body.appendChild(toastContainer);
+    }
+
+    const $toast = {
+      show(id: string, props: IBaseToastProps) {
+        toastStore.addToast(id, props);
+      },
+      hide(id: string) {
+        toastStore.removeToast(id);
+      },
+      clear() {
+        toastStore.clearToasts();
+      },
+    };
+
+    app.config.globalProperties.$toast = $toast;
+    app.provide('$toast', $toast);
+
+    const ToastContainerComponent = defineComponent({
+      setup() {
+        provide('$toast', $toast);
+        const toasts = ref(toastStore.toasts);
+
+        watch(
+          () => toastStore.toasts,
+          (newToasts) => {
+            toasts.value = newToasts;
+          },
+          { deep: true }
+        );
+
+        return () =>
+          h(
+            'div',
+            { class: 'toast-container-inner', 'data-has-toasts': toasts.value.some(t => t.isOpen) },
+            h(
+              'transition-group',
+              { name: 'toast', tag: 'div' },
+              toasts.value.map(toast =>
+                h(
+                  BaseToast,
+                  {
+                    key: toast.id,
+                    ...toast.props,
+                    isOpen: toast.isOpen,
+                    onClose: () => toastStore.removeToast(toast.id),
+                    onPrimaryAction: () => toastStore.removeToast(toast.id),
+                    onSecondaryAction: () => toastStore.removeToast(toast.id),
+                  }
+                )
+              )
+            )
+          );
+      },
+    });
+
+    let toastApp = (toastContainer as any).__vue_app__;
+    if (!toastApp) {
+      toastApp = createApp(ToastContainerComponent);
+      toastApp.mount(toastContainer);
+      (toastContainer as any).__vue_app__ = toastApp;
+    }
+
+    window.addEventListener('popstate', () => {
+      toastStore.clearToasts();
+    });
+
+    const cleanup = () => {
+      toastApp.unmount();
+      window.removeEventListener('popstate', () => toastStore.clearToasts());
+      if (document.body.contains(toastContainer)) {
+        document.body.removeChild(toastContainer);
+      }
+    };
+
+    if (app.unmount) {
+      const originalUnmount = app.unmount;
+      app.unmount = function () {
+        cleanup();
+        originalUnmount.call(app);
+      };
+    }
+    app._container?.addEventListener('beforeunload', cleanup);
+  },
+};

package/src/store/toast.ts

@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia';
+import type { IBaseToastProps, IToast } from '../types/toast';
+
+export const useToastStore = defineStore('toast', {
+  state: () => ({
+    toasts: [] as IToast[],
+  }),
+  actions: {
+    addToast(id: string, props: IBaseToastProps) {
+      const messageLength = (props.title + (props.description || '')).length;
+      const duration = props.duration ?? (messageLength > 80 ? 10000 : 5000);
+
+      const existingToastIndex = this.toasts.findIndex(t => t.id === id);
+      if (existingToastIndex !== -1) {
+        const existingToast = this.toasts[existingToastIndex];
+        if (existingToast.timeoutId) {
+          clearTimeout(existingToast.timeoutId);
+        }
+        this.toasts.splice(existingToastIndex, 1);
+      }
+
+      const maxToasts = window.innerWidth <= 768 ? 3 : 4;
+      if (this.toasts.length >= maxToasts) {
+        const oldestToast = this.toasts.shift();
+        if (oldestToast?.timeoutId) {
+          clearTimeout(oldestToast.timeoutId);
+        }
+      }
+
+      const toast: IToast = { id, props, isOpen: true };
+      this.toasts.push(toast);
+
+      toast.timeoutId = window.setTimeout(() => {
+        this.removeToast(id);
+      }, duration);
+    },
+    removeToast(id: string) {
+      const index = this.toasts.findIndex(t => t.id === id);
+      if (index !== -1) {
+        this.toasts[index].isOpen = false;
+        setTimeout(() => {
+          const toast = this.toasts[index];
+          if (toast?.timeoutId) {
+            clearTimeout(toast.timeoutId);
+          }
+          this.toasts.splice(index, 1);
+        }, 300);
+      }
+    },
+    clearToasts() {
+      this.toasts.forEach(toast => {
+        if (toast.timeoutId) {
+          clearTimeout(toast.timeoutId);
+        }
+      });
+      this.toasts = [];
+    },
+  },
+});

package/src/styles/root.scss

@@ -1,4 +1,6 @@
 @import "./index.scss";
+@import "./toast.scss";
+
 :root {
     /* Primary colors */
     --primary-blue-deep: #0085BE;

package/src/styles/toast.scss

@@ -0,0 +1,36 @@
+.toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    z-index: 10000; // Высокий z-index для отображения поверх контента
+    max-width: 620px;
+  
+    @media (max-width: 768px) {
+      right: 8px;
+      left: 8px;
+    }
+  
+    .toast-container-inner {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+  
+      &[data-has-toasts='true'] {
+        display: flex;
+      }
+    }
+  }
+  
+  .toast-enter-active,
+  .toast-leave-active {
+    transition: all 0.3s ease;
+  }
+  
+  .toast-enter-from,
+  .toast-leave-to {
+    transform: translateY(100%);
+    opacity: 0;
+  }

package/src/types/default-pages.d.ts

@@ -0,0 +1,6 @@
+export interface IDefaultPagesProps {
+    title: string;
+    description: string;
+    buttonText: string;
+    type: 'tech-work' | '404'
+}