plugin-ui-for-kzt 0.0.62 → 0.0.63

package/src/components/BaseUpload/README.md

@@ -0,0 +1,126 @@
+# BaseUpload
+
+Компонент для загрузки файлов с поддержкой drag & drop, предпросмотра изображений и обрезки (crop).
+
+## Использование
+
+```vue
+<template>
+  <BaseUpload
+    :accepted-formats="['.pdf', '.docx', '.jpg', '.png']"
+    :multiple="true"
+    :max-file-size="25 * 1024 * 1024"
+    title="Перетащите или кликните для загрузки"
+    subtitle="Допустимый формат файлов: pdf, docx, jpeg до 25 MB"
+    @update:files="onFilesUpdate"
+    @download-file="onDownload"
+    @remove-file="onRemove"
+  />
+</template>
+```
+
+## Пропсы
+
+| Пропс            | Тип              | По умолчанию       | Обязательный | Описание                                                                 |
+|------------------|------------------|--------------------|:------------:|--------------------------------------------------------------------------|
+| `acceptedFormats`| `string[]`       | —                  | Да           | Список допустимых расширений файлов, например `['.pdf', '.jpg', '.png']` |
+| `title`          | `string`         | —                  | Да           | Заголовок зоны загрузки                                                  |
+| `subtitle`       | `string`         | —                  | Да           | Подзаголовок / описание зоны загрузки                                    |
+| `multiple`       | `boolean`        | `true`             | Нет          | Разрешить загрузку нескольких файлов одновременно                        |
+| `maxFileSize`    | `number`         | `26214400` (25 MB) | Нет          | Максимальный допустимый размер файла в байтах                            |
+| `enableCrop`     | `boolean`        | `false`            | Нет          | Включить обрезку изображений перед загрузкой                             |
+| `cropTexts`      | `CropTexts`      | —                  | Нет          | Тексты кнопок модального окна обрезки (`cancel`, `confirm`)              |
+| `files`          | `UploadedFile[]` | —                  | Нет          | Начальный список файлов (для внешнего управления состоянием)             |
+
+### Тип `CropTexts`
+
+```ts
+interface CropTexts {
+  cancel?: string;
+  confirm?: string;
+}
+```
+
+### Тип `UploadedFile`
+
+```ts
+interface UploadedFile {
+  name: string;
+  size: number;
+  file: File;
+}
+```
+
+## События
+
+| Событие         | Payload            | Описание                                                                                   |
+|-----------------|--------------------|--------------------------------------------------------------------------------------------|
+| `update:files`  | `UploadedFile[]`   | Вызывается при добавлении файла. Передаёт актуальный список всех загруженных файлов        |
+| `download-file` | `UploadedFile`     | Вызывается при клике на скачивание файла, у которого нет локального объекта `File` (ранее загруженные с сервера файлы) |
+| `remove-file`   | `UploadedFile`     | Вызывается при удалении файла, у которого нет `lastModified` (серверный файл)              |
+
+## Слоты
+
+| Слот          | Описание                              |
+|---------------|---------------------------------------|
+| `title`       | Переопределяет заголовок зоны загрузки |
+| `description` | Переопределяет описание зоны загрузки  |
+
+```vue
+<BaseUpload :accepted-formats="['.png']" title="" subtitle="">
+  <template #title>Загрузите аватар</template>
+  <template #description>PNG, до 5 MB</template>
+</BaseUpload>
+```
+
+## Поведение
+
+- **Drag & Drop** — файлы можно перетаскивать в зону загрузки. При наведении зона подсвечивается синим.
+- **Медиафайлы** (`.jpg`, `.jpeg`, `.png`, `.svg`) — отображаются в виде сетки миниатюр с кнопками предпросмотра (zoom) и удаления.
+- **Остальные файлы** — отображаются в виде списка с именем, размером и кнопками скачивания и удаления.
+- **Одиночный режим** (`multiple: false`) — при загрузке нового файла предыдущий заменяется автоматически.
+- **Обрезка** (`enableCrop: true`) — перед добавлением изображения открывается модальное окно `CropModal`.
+- **Валидация** — проверяется расширение файла и его размер. При ошибке под зоной загрузки отображается сообщение.
+- **Внешнее управление** — при передаче пропса `files` список файлов синхронизируется с внешним состоянием через `watch`.
+
+## Примеры
+
+### Только изображения с обрезкой
+
+```vue
+<BaseUpload
+  :accepted-formats="['.jpg', '.jpeg', '.png']"
+  :enable-crop="true"
+  :crop-texts="{ cancel: 'Отмена', confirm: 'Обрезать' }"
+  title="Загрузите фото"
+  subtitle="JPG, PNG до 5 MB"
+  @update:files="files = $event"
+/>
+```
+
+### Загрузка одного документа
+
+```vue
+<BaseUpload
+  :accepted-formats="['.pdf', '.docx']"
+  :multiple="false"
+  :max-file-size="10 * 1024 * 1024"
+  title="Прикрепите документ"
+  subtitle="PDF или DOCX до 10 MB"
+  @update:files="files = $event"
+/>
+```
+
+### С внешним управлением файлами
+
+```vue
+<BaseUpload
+  :accepted-formats="['.pdf']"
+  :files="initialFiles"
+  title="Загрузите файлы"
+  subtitle="PDF до 25 MB"
+  @update:files="onUpdate"
+  @download-file="onDownload"
+  @remove-file="onRemove"
+/>
+```

package/src/types/uploadedFile.d.ts

@@ -15,7 +15,15 @@ export interface IpropsUpload {
     maxFileSize?: number; // Максимальный размер файла в байтах
     enableCrop?: boolean; // Включить функциональность кропа для изображений
     cropTexts?: CropTexts; // Тексты для кнопок в модальном окне кропа
-    onUpload?: (files: UploadedFile[]) => void; // Callback при загрузке файлов
-    onError?: (error: string) => void; // Callback при ошибке загрузки
     files?: UploadedFile[];
+    title: string
+    subtitle: string;
+    texts?: {
+        upload?: string;       // 'Загрузить фото'
+        photo?: string;       // 'Загрузить фото'
+        documents?: string;         // 'Документы'
+        loadMore?: string;          // 'Загрузить ещё'
+        errorFormat?: string;       // used in error template
+        errorSize?: string;         // used in error template
+    }
 }

package/src/utils/viewPort.ts

@@ -0,0 +1,50 @@
+import { readonly, ref } from 'vue';
+
+export const breakpoints = {
+    mobile: 768,
+    desktop: 1200,
+};
+
+const isMobileRef = ref<boolean>(false);
+
+if (typeof window !== 'undefined') {
+    const mobileQuery = window.matchMedia(`(max-width: ${breakpoints.mobile}px)`);
+    const apply = (queryOrEvent: MediaQueryList | MediaQueryListEvent) =>
+        (isMobileRef.value =
+            'matches' in queryOrEvent
+                ? queryOrEvent.matches
+                : // @ts-ignore
+                ((queryOrEvent as MediaQueryListEvent).currentTarget?.matches ??
+                    false));
+
+    apply(mobileQuery);
+    mobileQuery.addEventListener?.('change', apply);
+    mobileQuery.addListener?.(apply);
+
+    // HMR cleanup
+    const cleanup = () => {
+        mobileQuery.removeEventListener?.('change', apply);
+        mobileQuery.removeListener?.(apply);
+    };
+
+    const webpackHot = (
+        import.meta as ImportMeta & {
+            webpackHot?: { dispose: (callback: () => void) => void };
+        }
+    )?.webpackHot;
+    if (webpackHot) {
+        webpackHot.dispose(cleanup);
+    } else {
+        const modAny =
+            typeof module !== 'undefined'
+                ? (module as NodeModule & {
+                    hot?: { dispose: (callback: () => void) => void };
+                })
+                : undefined;
+        if (modAny?.hot) {
+            modAny.hot.dispose(cleanup);
+        }
+    }
+}
+
+export const isMobile = readonly(isMobileRef);