plugin-ui-for-kzt 0.0.62 → 0.0.64

package/src/components/BaseSiteInput/README.md

@@ -0,0 +1,76 @@
+# BaseSiteInput
+
+Компонент для ввода URL-адреса сайта. Автоматически добавляет префикс `https://`, убирает его из отображаемого значения и валидирует формат URL в реальном времени.
+
+## Использование
+
+```vue
+<template>
+  <BaseSiteInput
+    v-model="siteUrl"
+    placeholder="example.com"
+    size="medium"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const siteUrl = ref('');
+</script>
+```
+
+## Пропсы
+
+| Пропс            | Тип       | По умолчанию           | Описание                                              |
+|------------------|-----------|:----------------------:|-------------------------------------------------------|
+| `modelValue`     | `string`  | `''`                   | Значение поля (v-model). Хранится с префиксом `https://` |
+| `size`           | `string`  | `'medium'`             | Размер: `'small'`, `'medium'`, `'large'`              |
+| `focusable`      | `boolean` | `true`                 | Управляет фокусируемостью поля                        |
+| `id`             | `string`  | —                      | HTML-атрибут `id` для поля                            |
+| `error`          | `boolean` | —                      | Внешнее состояние ошибки                              |
+| `validationText` | `string`  | `'Некорректный URL'`   | Текст ошибки при невалидном URL                       |
+
+## События
+
+| Событие             | Payload  | Описание                                        |
+|---------------------|----------|-------------------------------------------------|
+| `update:modelValue` | `string` | Всегда эмитирует значение с префиксом `https://` |
+
+## Поведение
+
+- Префикс `https://` **всегда хранится** в `modelValue`, но **не отображается** в поле ввода — пользователь видит только домен.
+- При вводе значения `https://` автоматически добавляется, если его нет.
+- Валидация происходит в реальном времени через `watch`. Проверяется формат домена: `example.com`, `sub.example.org/path` и т.д.
+- Если введён некорректный URL, показывается ошибка (из `validationText` или дефолтная).
+- Внешний пропс `error` объединяется с внутренней ошибкой валидации: если хотя бы одно из них — показывается состояние ошибки.
+
+## Примеры
+
+### Получение значения
+
+```vue
+<BaseSiteInput v-model="url" placeholder="example.com" />
+<!-- После ввода "example.com" значение url === 'https://example.com' -->
+```
+
+### Кастомный текст ошибки
+
+```vue
+<BaseSiteInput
+  v-model="url"
+  validation-text="Введите корректный адрес сайта"
+  placeholder="example.com"
+/>
+```
+
+### Разные размеры
+
+```vue
+<BaseSiteInput v-model="url" size="small" placeholder="example.com" />
+<BaseSiteInput v-model="url" size="medium" placeholder="example.com" />
+<BaseSiteInput v-model="url" size="large" placeholder="example.com" />
+```
+
+## Зависимости
+
+- `BaseInput`

package/src/components/BaseSwiper/README.md

@@ -0,0 +1,88 @@
+# BaseSwiper
+
+Компонент карусели изображений с кнопками навигации, пагинацией и поддержкой автопрокрутки.
+
+## Использование
+
+```vue
+<template>
+  <BaseSwiper
+    :images="images"
+    :autoplay="true"
+    :autoplay-interval="4000"
+  />
+</template>
+
+<script setup lang="ts">
+const images = [
+  '/img/slide1.jpg',
+  '/img/slide2.jpg',
+  '/img/slide3.jpg',
+];
+</script>
+```
+
+## Пропсы
+
+| Пропс                | Тип                   | По умолчанию                          | Описание                                        |
+|----------------------|-----------------------|:-------------------------------------:|-------------------------------------------------|
+| `images`             | `string[]`            | `[]`                                  | Массив URL изображений                          |
+| `currentSlide`       | `number`              | `0`                                   | Индекс текущего слайда (для внешнего управления)|
+| `autoplay`           | `boolean`             | `false`                               | Включить автопрокрутку                          |
+| `autoplayInterval`   | `number`              | `3000`                                | Интервал автопрокрутки в миллисекундах          |
+| `buttonSize`         | `'medium' \| 'large'` | `'medium'`                            | Размер кнопок навигации                         |
+| `paginationSettings` | `PaginationSettings`  | `{ type: 'dots', color: 'primary' }`  | Настройки пагинации                             |
+
+### Тип `PaginationSettings`
+
+```ts
+interface PaginationSettings {
+  type?: PaginationType;   // тип пагинации (например, 'dots')
+  color?: PaginationColor; // цвет: 'primary' | 'secondary'
+  size?: ICoreSize;
+}
+```
+
+## События
+
+| Событие               | Payload  | Описание                                    |
+|-----------------------|----------|---------------------------------------------|
+| `update:currentSlide` | `number` | Вызывается при смене слайда, передаёт индекс |
+
+## Поведение
+
+- Кнопка «назад» недоступна (`disabled`) на первом слайде, кнопка «вперёд» — на последнем.
+- При автопрокрутке слайды переключаются **циклически** (после последнего возвращается к первому).
+- Автопрокрутка запускается при монтировании (`onMounted`) и останавливается при размонтировании (`onUnmounted`).
+- Пагинация синхронизирована с текущим слайдом через `watch` в обе стороны — можно управлять слайдом как через кнопки, так и через пагинацию.
+- Максимальная ширина контейнера: `640px`.
+
+## Примеры
+
+### С кастомной пагинацией и автопрокруткой
+
+```vue
+<BaseSwiper
+  :images="images"
+  :autoplay="true"
+  :autoplay-interval="5000"
+  :pagination-settings="{ type: 'dots', color: 'secondary' }"
+  button-size="large"
+  @update:current-slide="onSlideChange"
+/>
+```
+
+### Внешнее управление слайдом
+
+```vue
+<BaseSwiper
+  :images="images"
+  :current-slide="currentSlide"
+  @update:current-slide="currentSlide = $event"
+/>
+```
+
+## Зависимости
+
+- `BaseIcon` (иконки `arrow-left-circle`, `arrow-right-circle`)
+- `BasePagination`

package/src/components/BaseTabs/README.md

@@ -0,0 +1,110 @@
+# BaseTabs
+
+Компонент вкладок (табов) с поддержкой иконок, состояния `disabled` и нескольких размеров.
+
+## Использование
+
+```vue
+<template>
+  <BaseTabs v-model="activeTab" :tabs="tabs">
+    <div v-if="activeTab === 0">Контент первой вкладки</div>
+    <div v-if="activeTab === 1">Контент второй вкладки</div>
+    <div v-if="activeTab === 2">Контент третьей вкладки</div>
+  </BaseTabs>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const activeTab = ref(0);
+
+const tabs = [
+  { id: 0, title: 'Обзор' },
+  { id: 1, title: 'Настройки' },
+  { id: 2, title: 'История' },
+];
+</script>
+```
+
+## Пропсы
+
+| Пропс        | Тип      | По умолчанию | Описание                                                          |
+|--------------|----------|:------------:|-------------------------------------------------------------------|
+| `tabs`       | `ITab[]` | —            | Массив объектов вкладок                                           |
+| `modelValue` | `number` | `0`          | ID активной вкладки (v-model)                                     |
+| `size`       | `string` | `'medium'`   | Размер: `'extra-small'`, `'small'`, `'medium'`                    |
+
+### Тип `ITab`
+
+```ts
+interface ITab {
+  id: number;
+  title: string;
+  icon?: Component;  // Vue-компонент иконки
+  disabled?: boolean;
+}
+```
+
+## События
+
+| Событие             | Payload  | Описание                              |
+|---------------------|----------|---------------------------------------|
+| `update:modelValue` | `number` | Вызывается при выборе вкладки, передаёт `id` |
+
+## Слоты
+
+| Слот      | Описание                                   |
+|-----------|--------------------------------------------|
+| `default` | Контент вкладок (управляется снаружи через `v-if`) |
+
+## Размеры
+
+| Значение      | Высота таба | Шрифт                          |
+|---------------|-------------|--------------------------------|
+| `extra-small` | 38px        | `typography-text-s-medium`     |
+| `small`       | 48px        | `typography-text-m-medium`     |
+| `medium`      | 56px        | `typography-text-l-medium`     |
+
+## Поведение
+
+- Клик по вкладке с `disabled: true` игнорируется.
+- Активная вкладка выделяется синей нижней границей.
+- Внешнее изменение `modelValue` через `watch` синхронизируется с внутренним состоянием.
+- Горизонтальная линия-разделитель рисуется через псевдоэлемент `::before` на заголовке, активный таб перекрывает её через `z-index`.
+
+## Примеры
+
+### С иконками
+
+```vue
+<script setup lang="ts">
+import IconHome from '@/icons/IconHome.vue';
+import IconSettings from '@/icons/IconSettings.vue';
+
+const tabs = [
+  { id: 0, title: 'Главная', icon: IconHome },
+  { id: 1, title: 'Настройки', icon: IconSettings },
+];
+</script>
+
+<template>
+  <BaseTabs v-model="activeTab" :tabs="tabs" size="small">
+    <div v-if="activeTab === 0">Главная</div>
+    <div v-if="activeTab === 1">Настройки</div>
+  </BaseTabs>
+</template>
+```
+
+### С заблокированной вкладкой
+
+```vue
+const tabs = [
+  { id: 0, title: 'Активная' },
+  { id: 1, title: 'Заблокированная', disabled: true },
+  { id: 2, title: 'Ещё одна' },
+];
+```
+
+## Зависимости
+
+- `BaseButton`

package/src/components/BaseUpload/BaseUpload.vue

@@ -9,6 +9,7 @@
         :accept="acceptedFormats.join(',')"
     />
     <div
+        v-if="!isMobile || !multiple || uploadedFiles.length === 0"
         class="base-file-upload__wrapper"
         :class="{ '--is-drag-over': isDragOver }"
         @click="triggerFileInput"
@@ -20,16 +21,32 @@
            class="base-file-upload__block"
       >
         <base-icon
+            v-if="!isMobile"
             name="upload"
             class="base-file-upload__icon-upload"
             size="large"
         />
-        <p class="base-file-upload__title">
-          <slot name="title">Перетащите или кликните для загрузки</slot>
-        </p>
-        <p class="base-file-upload__description">
-          <slot name="description">Допустимый формат файлов: pdf, docx, jpeg до 25 MB</slot>
-        </p>
+        <base-icon
+            v-else
+            name="upload-2"
+            class="base-file-upload__icon-upload"
+            size="medium"
+        />
+        <div
+            class="base-file-upload__content"
+        >
+          <p class="base-file-upload__title">
+            <slot name="title">{{ texts?.instructions }}</slot>
+            <base-icon
+                v-if="isMobile"
+                name="upload"
+                size="medium"
+            />
+          </p>
+          <p class="base-file-upload__description">
+            <slot name="description">{{ texts?.allowableFormats }}</slot>
+          </p>
+        </div>
       </div>
       <div v-else>
         <div
@@ -47,7 +64,7 @@
                 class="base-file-upload__file-item-button"
                 size="custom"
                 color="custom"
-                @click="downloadFile(file, index, false)"
+                @click="downloadFile(file)"
             >
               <base-icon
                   name="export"
@@ -109,12 +126,13 @@
             @drop="handleDrop"
         >
           <base-icon name="gallery" size="medium" class="base-file-upload__placeholder-icon"/>
-          <p class="base-file-upload__placeholder-text"><span>Загрузить</span> <br/> фото</p>
+          <p class="base-file-upload__placeholder-text"><span>{{ texts?.upload }}</span> <br/> {{ texts?.photo }}</p>
         </div>
       </div>
 
       <!-- Остальные файлы в колонках -->
       <div v-if="otherFiles.length > 0 && multiple" class="base-file-upload__file-list">
+        <div class="base-file-upload__list-title"> {{ texts?.documents }}</div>
         <div
             v-for="(file, index) in otherFiles"
             :key="index"
@@ -129,7 +147,7 @@
                 class="base-file-upload__file-item-button"
                 size="custom"
                 color="custom"
-                @click="downloadFile(file, index, false)"
+                @click="downloadFile(file)"
             >
               <base-icon
                   name="export"
@@ -151,6 +169,16 @@
             </base-button>
           </div>
         </div>
+        <div v-if="isMobile && props.multiple"
+             class="base-file-upload__more"
+             @click="triggerFileInput">
+          {{ texts?.loadMore }}
+          <base-icon
+              name="upload"
+              class="base-file-upload__icon-upload"
+              size="medium"
+          />
+        </div>
       </div>
     </div>
 
@@ -166,6 +194,7 @@ import { useModal } from '../../composables/useModal';
 import type { UploadedFile, IpropsUpload } from '../../types/uploadedFile.d';
 import ImageModal from './ImageModal.vue';
 import CropModal from './CropModal.vue';
+import { isMobile } from "../../utils/viewPort";
 
 const props = withDefaults( defineProps<IpropsUpload>(), {
   multiple: true,
@@ -182,7 +211,7 @@ const errorMessage = ref<string | null>( null );
 const isDragOver = ref( false );
 const modal = useModal();
 
-const mediaExtensions = ['.jpg', '.jpeg', '.png', '.svg'];
+const mediaExtensions = ['.jpg', '.jpeg', '.png'];
 const mediaFiles = computed( () =>
     uploadedFiles.value.filter( ( file ) =>
         mediaExtensions.includes( `.${file.name.split( '.' ).pop()?.toLowerCase() || ''}` )
@@ -232,18 +261,27 @@ const processFiles = ( files: File[] ) => {
     uploadedFiles.value = [];
   }
 
+  const errors: string[] = [];
+  const normalizedFormats = props.acceptedFormats.map( ( f: string ) => f.toLowerCase() );
+
   filesToProcess.forEach( ( file ) => {
     const fileExtension = `.${file.name.split( '.' ).pop()?.toLowerCase() || ''}`;
-    if ( !props.acceptedFormats.includes( fileExtension ) ) {
-      errorMessage.value = `Недопустимый формат файла: ${file.name}. Допустимый: ${props.acceptedFormats.join( ', ' )}.`;
+
+    if ( !normalizedFormats.includes( fileExtension ) ) {
+      errors.push( `Недопустимый формат файла: ${file.name}. Допустимый: ${props.acceptedFormats.join( ', ' )}.` );
       return;
     }
 
     if ( file.size > props.maxFileSize ) {
-      errorMessage.value = `Файл ${file.name} превышает максимальный размер ${formatFileSize( props.maxFileSize )}.`;
+      errors.push( `Файл ${file.name} превышает максимальный размер ${formatFileSize( props.maxFileSize )}.` );
       return;
     }
 
+    const isDuplicate = uploadedFiles.value.some(
+        ( f: UploadedFile ) => f.name === file.name && f.size === file.size
+    );
+    if ( isDuplicate ) return;
+
     if ( props.enableCrop && isImageFile( file ) ) {
       openCropModal( file );
     } else {
@@ -252,6 +290,10 @@ const processFiles = ( files: File[] ) => {
     }
   } );
 
+  if ( errors.length > 0 ) {
+    errorMessage.value = errors.join( ' ' );
+  }
+
   isUploading.value = false;
 };
 
@@ -306,7 +348,7 @@ const removeFile = ( index: number, isMedia: boolean ) => {
   }
 };
 
-const downloadFile = ( file: { file: File, name: string }, index: number, isMedia: boolean ) => {
+const downloadFile = ( file: { file: File, name: string } ) => {
   if ( file?.file?.type ) {
     const url = URL.createObjectURL( file.file );
     const link = document.createElement( 'a' );
@@ -387,12 +429,18 @@ watch( () => props.files,
         color: var(--primary-blue);
       }
 
-      .base-file-upload__icon-upload {
-        color: var(--primary-blue);
-      }
+    }
+
+    @media #{$mobile-max-767} {
+      padding: 12px;
+      align-items: start;
     }
   }
 
+  &__icon-upload {
+    color: var(--primary-blue);
+  }
+
   &__block {
     margin: 0 auto;
     text-align: center;
@@ -400,16 +448,45 @@ watch( () => props.files,
     svg {
       margin: 0 auto;
     }
+
+    @media #{$mobile-max-767} {
+      display: flex;
+      gap: 12px;
+      margin: 0;
+      svg {
+        margin: 0;
+      }
+    }
+  }
+
+  &__content {
+    @media #{$mobile-max-767} {
+      text-align: start;
+    }
   }
 
   &__title {
-    color: var(--primary-text-primary);
+    color: var(--primary-blue);
     font: var(--typography-text-m-medium);
+
+    @media #{$mobile-max-767} {
+      font: var(--typography-text-s-bold);
+      display: flex;
+      color: var(--primary-blue);
+      gap: 2px;
+      svg {
+        margin: 0;
+        color: var(--primary-blue);
+      }
+    }
   }
 
   &__description {
     color: var(--primary-text-tertiary);
     font: var(--typography-text-s-regular);
+    @media #{$mobile-max-767} {
+      font: var(--typography-text-xs-bold);
+    }
   }
 
   &__input {
@@ -466,6 +543,23 @@ watch( () => props.files,
     flex-direction: column;
   }
 
+  &__list-title {
+    font: var(--typography-text-s-medium);
+    margin: 12px 0;
+    color: var(--primary-black);
+  }
+
+
+  &__more {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 4px;
+    cursor: pointer;
+    color: var(--primary-blue);
+  }
+
   &__file-item {
     display: flex;
     justify-content: space-between;
@@ -473,10 +567,15 @@ watch( () => props.files,
     padding: 8px 12px;
     border-bottom: 1px solid var(--primary-black-200);
 
+
     &:last-child {
       border-bottom: none;
     }
 
+    @media #{$mobile-max-767} {
+      padding: 8px 0;
+    }
+
     @include hover {
       .base-file-upload__file-item-wrapper {
         color: var(--primary-blue);
@@ -510,6 +609,12 @@ watch( () => props.files,
     gap: 8px;
     color: var(--primary-text-primary);
     font: var(--typography-text-m-regular);
+
+    @media #{$mobile-max-767} {
+      span {
+        font: var(--typography-text-xs-regular);
+      }
+    }
   }
 
   &__file-item-button {
@@ -568,5 +673,14 @@ watch( () => props.files,
       color: var(--primary-blue);
     }
   }
+
+  &__files {
+    @media #{$mobile-max-767} {
+      padding: 0 8px;
+      border-radius: var(--corner-radius-m);
+      background: var(--bg-light);
+    }
+  }
+
 }
 </style>