plugin-ui-for-kzt 0.0.63 → 0.0.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BaseBadge/BaseBadge.vue.d.ts +1 -1
- package/dist/components/BaseUpload/BaseUpload.vue.d.ts +0 -4
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/BaseUpload/BaseUpload.vue +2 -2
- package/src/components/BaseUpload/README.md +38 -16
- package/src/types/uploadedFile.d.ts +2 -2
package/package.json
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
class="base-file-upload__content"
|
|
37
37
|
>
|
|
38
38
|
<p class="base-file-upload__title">
|
|
39
|
-
<slot name="title">{{
|
|
39
|
+
<slot name="title">{{ texts?.instructions }}</slot>
|
|
40
40
|
<base-icon
|
|
41
41
|
v-if="isMobile"
|
|
42
42
|
name="upload"
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
/>
|
|
45
45
|
</p>
|
|
46
46
|
<p class="base-file-upload__description">
|
|
47
|
-
<slot name="description">{{
|
|
47
|
+
<slot name="description">{{ texts?.allowableFormats }}</slot>
|
|
48
48
|
</p>
|
|
49
49
|
</div>
|
|
50
50
|
</div>
|
|
@@ -10,8 +10,10 @@
|
|
|
10
10
|
:accepted-formats="['.pdf', '.docx', '.jpg', '.png']"
|
|
11
11
|
:multiple="true"
|
|
12
12
|
:max-file-size="25 * 1024 * 1024"
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
:texts="{
|
|
14
|
+
instructions: 'Перетащите или кликните для загрузки',
|
|
15
|
+
allowableFormats: 'Допустимый формат файлов: pdf, docx, jpeg до 25 MB',
|
|
16
|
+
}"
|
|
15
17
|
@update:files="onFilesUpdate"
|
|
16
18
|
@download-file="onDownload"
|
|
17
19
|
@remove-file="onRemove"
|
|
@@ -24,14 +26,28 @@
|
|
|
24
26
|
| Пропс | Тип | По умолчанию | Обязательный | Описание |
|
|
25
27
|
|------------------|------------------|--------------------|:------------:|--------------------------------------------------------------------------|
|
|
26
28
|
| `acceptedFormats`| `string[]` | — | Да | Список допустимых расширений файлов, например `['.pdf', '.jpg', '.png']` |
|
|
27
|
-
| `
|
|
28
|
-
| `subtitle` | `string` | — | Да | Подзаголовок / описание зоны загрузки |
|
|
29
|
+
| `texts` | `IpropsUpload['texts']` | — | Нет | Тексты для отображения в зоне загрузки и сообщениях об ошибках |
|
|
29
30
|
| `multiple` | `boolean` | `true` | Нет | Разрешить загрузку нескольких файлов одновременно |
|
|
30
31
|
| `maxFileSize` | `number` | `26214400` (25 MB) | Нет | Максимальный допустимый размер файла в байтах |
|
|
31
32
|
| `enableCrop` | `boolean` | `false` | Нет | Включить обрезку изображений перед загрузкой |
|
|
32
33
|
| `cropTexts` | `CropTexts` | — | Нет | Тексты кнопок модального окна обрезки (`cancel`, `confirm`) |
|
|
33
34
|
| `files` | `UploadedFile[]` | — | Нет | Начальный список файлов (для внешнего управления состоянием) |
|
|
34
35
|
|
|
36
|
+
### Тип `texts`
|
|
37
|
+
|
|
38
|
+
```ts
|
|
39
|
+
texts?: {
|
|
40
|
+
instructions: string; // Текст заголовка зоны загрузки, например: 'Перетащите или кликните для загрузки'
|
|
41
|
+
allowableFormats: string; // Описание допустимых форматов, например: 'Допустимый формат файлов: {formats}'
|
|
42
|
+
upload?: string; // Текст кнопки/подсказки загрузки в плейсхолдере медиафайлов
|
|
43
|
+
photo?: string; // Подпись под кнопкой загрузки в плейсхолдере медиафайлов
|
|
44
|
+
documents?: string; // Заголовок секции документов
|
|
45
|
+
loadMore?: string; // Текст кнопки «Загрузить ещё» (мобильный режим)
|
|
46
|
+
errorFormat?: string; // Текст ошибки при недопустимом формате файла
|
|
47
|
+
errorSize?: string; // Текст ошибки при превышении размера файла
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
35
51
|
### Тип `CropTexts`
|
|
36
52
|
|
|
37
53
|
```ts
|
|
@@ -61,13 +77,13 @@ interface UploadedFile {
|
|
|
61
77
|
|
|
62
78
|
## Слоты
|
|
63
79
|
|
|
64
|
-
| Слот | Описание
|
|
65
|
-
|
|
66
|
-
| `title` | Переопределяет заголовок зоны загрузки |
|
|
67
|
-
| `description` | Переопределяет описание зоны загрузки
|
|
80
|
+
| Слот | Описание |
|
|
81
|
+
|---------------|-------------------------------------------------------------------------------|
|
|
82
|
+
| `title` | Переопределяет заголовок зоны загрузки (по умолчанию: `texts.instructions`) |
|
|
83
|
+
| `description` | Переопределяет описание зоны загрузки (по умолчанию: `texts.allowableFormats`) |
|
|
68
84
|
|
|
69
85
|
```vue
|
|
70
|
-
<BaseUpload :accepted-formats="['.png']"
|
|
86
|
+
<BaseUpload :accepted-formats="['.png']">
|
|
71
87
|
<template #title>Загрузите аватар</template>
|
|
72
88
|
<template #description>PNG, до 5 MB</template>
|
|
73
89
|
</BaseUpload>
|
|
@@ -76,7 +92,7 @@ interface UploadedFile {
|
|
|
76
92
|
## Поведение
|
|
77
93
|
|
|
78
94
|
- **Drag & Drop** — файлы можно перетаскивать в зону загрузки. При наведении зона подсвечивается синим.
|
|
79
|
-
- **Медиафайлы** (`.jpg`, `.jpeg`, `.png
|
|
95
|
+
- **Медиафайлы** (`.jpg`, `.jpeg`, `.png`) — отображаются в виде сетки миниатюр с кнопками предпросмотра (zoom) и удаления.
|
|
80
96
|
- **Остальные файлы** — отображаются в виде списка с именем, размером и кнопками скачивания и удаления.
|
|
81
97
|
- **Одиночный режим** (`multiple: false`) — при загрузке нового файла предыдущий заменяется автоматически.
|
|
82
98
|
- **Обрезка** (`enableCrop: true`) — перед добавлением изображения открывается модальное окно `CropModal`.
|
|
@@ -92,8 +108,10 @@ interface UploadedFile {
|
|
|
92
108
|
:accepted-formats="['.jpg', '.jpeg', '.png']"
|
|
93
109
|
:enable-crop="true"
|
|
94
110
|
:crop-texts="{ cancel: 'Отмена', confirm: 'Обрезать' }"
|
|
95
|
-
|
|
96
|
-
|
|
111
|
+
:texts="{
|
|
112
|
+
instructions: 'Загрузите фото',
|
|
113
|
+
allowableFormats: 'JPG, PNG до 5 MB',
|
|
114
|
+
}"
|
|
97
115
|
@update:files="files = $event"
|
|
98
116
|
/>
|
|
99
117
|
```
|
|
@@ -105,8 +123,10 @@ interface UploadedFile {
|
|
|
105
123
|
:accepted-formats="['.pdf', '.docx']"
|
|
106
124
|
:multiple="false"
|
|
107
125
|
:max-file-size="10 * 1024 * 1024"
|
|
108
|
-
|
|
109
|
-
|
|
126
|
+
:texts="{
|
|
127
|
+
instructions: 'Прикрепите документ',
|
|
128
|
+
allowableFormats: 'PDF или DOCX до 10 MB',
|
|
129
|
+
}"
|
|
110
130
|
@update:files="files = $event"
|
|
111
131
|
/>
|
|
112
132
|
```
|
|
@@ -117,8 +137,10 @@ interface UploadedFile {
|
|
|
117
137
|
<BaseUpload
|
|
118
138
|
:accepted-formats="['.pdf']"
|
|
119
139
|
:files="initialFiles"
|
|
120
|
-
|
|
121
|
-
|
|
140
|
+
:texts="{
|
|
141
|
+
instructions: 'Загрузите файлы',
|
|
142
|
+
allowableFormats: 'PDF до 25 MB',
|
|
143
|
+
}"
|
|
122
144
|
@update:files="onUpdate"
|
|
123
145
|
@download-file="onDownload"
|
|
124
146
|
@remove-file="onRemove"
|
|
@@ -16,9 +16,9 @@ export interface IpropsUpload {
|
|
|
16
16
|
enableCrop?: boolean; // Включить функциональность кропа для изображений
|
|
17
17
|
cropTexts?: CropTexts; // Тексты для кнопок в модальном окне кропа
|
|
18
18
|
files?: UploadedFile[];
|
|
19
|
-
title: string
|
|
20
|
-
subtitle: string;
|
|
21
19
|
texts?: {
|
|
20
|
+
instructions: string // 'Перетащите или кликните для загрузки'
|
|
21
|
+
allowableFormats: string; // 'Допустимый формат файлов: {formats}'
|
|
22
22
|
upload?: string; // 'Загрузить фото'
|
|
23
23
|
photo?: string; // 'Загрузить фото'
|
|
24
24
|
documents?: string; // 'Документы'
|