plugin-ui-for-kzt 0.0.17 → 0.0.18

package/src/components/BaseTag/README.md

@@ -0,0 +1,125 @@
+# Компонент BaseTag
+
+Компонент `BaseTag` — это переиспользуемый Vue 3 компонент для отображения тегов с настраиваемым текстом, размером, цветом и поведением. Поддерживает закрываемые теги, теги с функцией добавления и поле ввода для создания новых тегов. Компонент следует методологии БЭМ для именования CSS-классов и стилизован с использованием SCSS.
+
+## Возможности
+
+- **Настраиваемый размер**: Поддерживает четыре варианта размеров: `extra-small`, `small`, `medium`, `large`.
+- **Варианты цветов**: Предлагает цветовые схемы `primary` и `secondary` с эффектами наведения.
+- **Закрываемые теги**: Опционально включает иконку закрытия для вызова события `close`.
+- **Функция добавления тега**: Поддерживает иконку добавления для создания новых тегов.
+- **Поле ввода**: Отображает поле ввода для создания новых тегов, если включен `isHasAddTag`.
+- **Поддержка TypeScript**: Полностью типизирован с использованием TypeScript.
+- **Стилизация по БЭМ**: Использует методологию БЭМ для консистентности и удобства поддержки CSS.
+- **Композаблы**: Использует `useKitSize` и `useKitColor` для модульного управления размером и цветом.
+
+
+## Использование
+
+Компонент `BaseTag` можно использовать в разных конфигурациях в зависимости от желаемой функциональности. Ниже приведены примеры типичных случаев использования.
+
+### Простой тег
+
+```vue
+<template>
+  <base-tag text="Пример тега" />
+</template>
+```
+
+Отображает тег с текстом "Пример тега" в размере `medium` и цвете `primary`.
+
+### Закрываемый тег
+
+```vue
+<template>
+  <base-tag text="Закрываемый тег" closable @close="handleClose" />
+</template>
+
+<script setup lang="ts">
+const handleClose = () => {
+  console.log('Тег закрыт');
+};
+</script>
+```
+
+Тег с иконкой закрытия, которая вызывает событие `close` при клике.
+
+### Тег с полем ввода
+
+```vue
+<template>
+  <base-tag
+    :isHasAddTag="true"
+    v-model:inputText="tagInput"
+    @updateInput="updateInput"
+    @addTag="createTag"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const tagInput = ref('');
+const updateInput = (value: string) => {
+  tagInput.value = value;
+};
+const createTag = () => {
+  console.log('Новый тег:', tagInput.value);
+};
+</script>
+```
+
+Тег с полем ввода для создания новых тегов. Поле ввода отображается, если `isHasAddTag` равно `true`.
+
+### Тег с иконкой добавления
+
+```vue
+<template>
+  <base-tag text="Добавить тег" addingTag @addTag="handleAddTag" />
+</template>
+
+<script setup lang="ts">
+const handleAddTag = () => {
+  console.log('Инициировано добавление тега');
+};
+</script>
+```
+
+Тег с иконкой добавления, которая вызывает событие `addTag` при клике.
+
+## Пропсы
+
+| Проп         | Тип      | По умолчанию | Описание                                                                 |
+|--------------|----------|--------------|--------------------------------------------------------------------------|
+| `text`       | `string` | `''`         | Текст, отображаемый в теге.                                              |
+| `size`       | `string` | `'medium'`   | Размер тега: `extra-small`, `small`, `medium`, `large`.                  |
+| `color`      | `string` | `'primary'`  | Цветовая схема: `primary`, `secondary`.                                  |
+| `closable`   | `boolean`| `false`      | Включает иконку закрытия для удаления тега.                              |
+| `isHasAddTag`| `boolean`| `false`      | Включает поле ввода для создания нового тега.                            |
+| `addingTag`  | `boolean`| `false`      | Включает иконку добавления тега.                                        |
+| `inputText`  | `string` | `''`         | Начальное значение поля ввода (используется с `v-model:inputText`).      |
+
+## События
+
+| Событие        | Параметры            | Описание                                              |
+|----------------|----------------------|-------------------------------------------------------|
+| `close`        | -                    | Вызывается при клике на иконку закрытия.              |
+| `addTag`       | -                    | Вызывается при клике на иконку добавления тега.       |
+| `updateInput`  | `value: string`      | Вызывается при изменении текста в поле ввода.         |
+
+## Стилизация
+
+Модификаторы:
+- `--primary-color`, `--secondary-color` — для цветовых схем.
+- `--extra-small-size`, `--small-size`, `--medium-size`, `--large-size` — для размеров.
+- `--adding-tag` — для стилизации тега с иконкой добавления.
+
+
+## Зависимости
+
+- **`BaseIcon`**: Компонент для отображения иконок (используется для иконок закрытия и добавления).
+- **`useKitSize`**: Композабл для управления размерами.
+- **`useKitColor`**: Композабл для управления цветами.
+
+
+

package/src/components/BaseTextarea/BaseTextarea.vue

@@ -65,7 +65,8 @@ function handleInput(event: Event) {
 @import '../../styles/root';
 
 .base-textarea {
-  width: max-content;
+  width: 100%;
+  height: 100%;
   $textarea: &;
 
   textarea {
@@ -80,11 +81,13 @@ function handleInput(event: Event) {
   &__wrapper {
     display: flex;
     position: relative;
+    width: 100%;
+    height: 100%;
   }
 
   &__field {
+    width: 100%;
     min-width: 320px;
-    max-width: calc(-16px + 50vw);
     color: var(--primary-text-primary);
     background: var(--bg-light);
     border: 1px solid var(--primary-black-300);
@@ -128,6 +131,8 @@ function handleInput(event: Event) {
     flex-direction: column;
     gap: 6px;
     align-items: center;
+    width: 100%;
+    height: 100%;
   }
 
   &__label-text {
@@ -152,10 +157,6 @@ function handleInput(event: Event) {
 
   &.--small-size {
     #{$textarea} {
-      &__wrapper {
-        height: 40px;
-      }
-
       &__field {
         padding: var(--spacing-s)  calc(var(--spacing-2l) + 35px) var(--spacing-s) var(--spacing-2l);
         font: var(--typography-text-m-regular);
@@ -172,10 +173,6 @@ function handleInput(event: Event) {
 
   &.--medium-size {
     #{$textarea} {
-      &__wrapper {
-        height: 48px;
-      }
-
       &__field {
         padding: var(--spacing-m)  calc(var(--spacing-2l) + 35px) var(--spacing-m) var(--spacing-2l);
         font: var(--typography-text-m-regular);
@@ -192,10 +189,6 @@ function handleInput(event: Event) {
 
   &.--large-size {
     #{$textarea} {
-      &__wrapper {
-        height: 56px;
-      }
-
       &__field {
         padding: var(--spacing-2l) calc(var(--spacing-l) + 35px) var(--spacing-2l) var(--spacing-l);
         font: var(--typography-text-l-regular);

package/src/components/BaseUpload/BaseUpload.vue

@@ -0,0 +1,392 @@
+<template>
+<div class="base-file-upload">
+    <input
+        type="file"
+        ref="fileInput"
+        :multiple="multiple"
+        @change="handleFileUpload"
+        class="base-file-upload__input"
+        :accept="acceptedFormats.join(',')"
+    />
+    <div class="base-file-upload__wrapper" @click="triggerFileInput">
+    <base-icon 
+        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>
+    </div>
+
+    <div v-if="uploadedFiles.length > 0" class="base-file-upload__files">
+    <!-- Медиафайлы (изображения) в ряд -->
+    <div v-if="mediaFiles.length > 0" class="base-file-upload__media-row">
+        <div
+            v-for="(file, index) in mediaFiles"
+            :key="index"
+            class="base-file-upload__media-item"
+        >
+        <img :src="getImagePreview(file.file)" alt="Preview" class="base-file-upload__media-preview" />
+        <base-button
+            class="base-file-upload__zoom"
+            size="custom"
+            color="custom"
+            @click="openImageModal(file.file)"
+        >
+            <base-icon name="search-zoom-in" size="custom" class="base-file-upload__zoom-icon" />
+        </base-button>
+        <base-button
+            class="base-file-upload__remove"
+            size="custom"
+            color="custom"
+            @click="removeFile(index, true)"
+        >
+            <base-icon name="trash" size="custom" class="base-file-upload__zoom-icon" />
+        </base-button>
+        </div>
+        <!-- Заглушка для загрузки дополнительных медиафайлов -->
+        <div
+        v-if="mediaFiles.length > 0"
+        class="base-file-upload__media-item base-file-upload__media-placeholder"
+        @click="triggerFileInput"
+        >
+        <base-icon name="gallery" size="medium" class="base-file-upload__placeholder-icon" />
+        <p class="base-file-upload__placeholder-text"><span>Загрузить</span> <br /> фото</p>
+        </div>
+    </div>
+
+    <!-- Остальные файлы в колонках -->
+    <div v-if="otherFiles.length > 0" class="base-file-upload__file-list">
+        <div
+            v-for="(file, index) in otherFiles"
+            :key="index"
+            class="base-file-upload__file-item"
+        >
+            <div class="base-file-upload__file-item-wrapper">
+                <base-icon name="document-text" size="medium" />
+                <span>{{ file.name }} ({{ formatFileSize(file.size) }})</span>
+            </div>
+            <div class="base-file-upload__file-item-wrapper">
+                <base-button 
+                    class="base-file-upload__file-item-button" 
+                    size="custom" 
+                    color="custom"
+                    @click="downloadFile(file.file, index, false)"
+                >
+                    <base-icon
+                        name="export"
+                        size="medium"
+                        class="base-file-upload__file-item-icon"
+                    />
+                </base-button>
+                <base-button
+                    class="base-file-upload__file-item-button base-file-upload__file-item-button-trash" 
+                    size="custom" 
+                    color="custom"
+                    @click="removeFile(index, false)"
+                >
+                    <base-icon
+                        name="trash"
+                        size="medium"
+                        class="base-file-upload__file-item-icon"
+                    />
+                </base-button>
+            </div>
+        </div>
+    </div>
+    </div>
+
+    <p v-if="errorMessage" class="base-file-upload__error">{{ errorMessage }}</p>
+</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import BaseButton from '../BaseButton/BaseButton.vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import { useModal } from '../../composables/useModal';
+import type { UploadedFile, IpropsUpload } from '../../types/uploadedFile.d';
+import ImageModal from './ImageModal.vue';
+
+const props = withDefaults(defineProps<IpropsUpload>(), {
+  multiple: true,
+  maxFileSize: 25 * 1024 * 1024, // 25 MB в байтах
+});
+
+const emit = defineEmits(['update:files']);
+
+const fileInput = ref<HTMLInputElement | null>(null);
+const uploadedFiles = ref<UploadedFile[]>([]);
+const isUploading = ref(false);
+const errorMessage = ref<string | null>(null);
+const modal = useModal();
+
+const mediaExtensions = ['.jpg', '.jpeg', '.png'];
+const mediaFiles = computed(() =>
+  uploadedFiles.value.filter((file) =>
+    mediaExtensions.includes(`.${file.name.split('.').pop()?.toLowerCase() || ''}`)
+  )
+);
+const otherFiles = computed(() =>
+  uploadedFiles.value.filter((file) =>
+    !mediaExtensions.includes(`.${file.name.split('.').pop()?.toLowerCase() || ''}`)
+  )
+);
+
+const triggerFileInput = () => {
+  fileInput.value?.click();
+};
+
+const handleFileUpload = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const files = target.files;
+
+  if (files) {
+    isUploading.value = true;
+    errorMessage.value = null;
+
+    Array.from(files).forEach((file) => {
+      const fileExtension = `.${file.name.split('.').pop()?.toLowerCase() || ''}`;
+      if (!props.acceptedFormats.includes(fileExtension)) {
+        errorMessage.value = `Недопустимый формат файла: ${file.name}. Допустимы: ${props.acceptedFormats.join(', ')}.`;
+        return;
+      }
+
+      if (file.size > props.maxFileSize) {
+        errorMessage.value = `Файл ${file.name} превышает максимальный размер ${formatFileSize(props.maxFileSize)}.`;
+        return;
+      }
+
+      uploadedFiles.value.push({ name: file.name, size: file.size, file });
+    });
+
+    isUploading.value = false;
+    target.value = '';
+  }
+};
+
+const removeFile = (index: number, isMedia: boolean) => {
+  const files = isMedia ? mediaFiles.value : otherFiles.value;
+  const globalIndex = uploadedFiles.value.indexOf(files[index]);
+  if (globalIndex !== -1) {
+    uploadedFiles.value.splice(globalIndex, 1);
+  }
+};
+
+const downloadFile = (file: File, index: number, isMedia: boolean) => {
+  const url = URL.createObjectURL(file);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = file.name;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+};
+
+const openImageModal = (file: File) => {
+  const imageUrl = getImagePreview(file);
+  modal.open('image-modal', { closable: true, imageUrl }, ImageModal);
+};
+
+const formatFileSize = (bytes: number) => {
+  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+  if (bytes >= 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+  return `${bytes} B`;
+};
+
+const getImagePreview = (file: File) => {
+  return URL.createObjectURL(file);
+};
+
+watch(uploadedFiles, (newFiles) => {
+  emit('update:files', newFiles);
+}, { deep: true });
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-file-upload {
+display: flex;
+flex-direction: column;
+gap: var(--spacing-l);
+
+&__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-xs);
+    border-radius: var(--corner-radius-m);
+    border: 1px solid var(--primary-black-300);
+    background: var(--bg-light);
+    padding: 32px 120px;
+    transition: all var(--transition);
+
+    p {
+    margin: 0;
+    }
+
+    @include hover {
+    cursor: pointer;
+    background: var(--primary-black-200);
+    }
+}
+
+&__title {
+    color: var(--primary-text-primary);
+    font: var(--typography-text-m-medium);
+}
+
+&__description {
+    color: var(--primary-text-tertiary);
+    font: var(--typography-text-s-regular);
+}
+
+&__input {
+    display: none;
+}
+
+&__media-row {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+}
+
+&__media-item {
+    position: relative;
+    display: inline-block;
+    width: 104px;
+    height: 104px;
+}
+
+&__media-preview {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: var(--corner-radius-xs);
+    border: 1px solid var(--primary-black-300);
+}
+
+&__remove,
+&__zoom {
+    position: absolute;
+    bottom: 10px;
+    cursor: pointer;
+    background: var(--bg-light);
+    border-radius: var(--corner-radius-2xs);
+    padding: var(--spacing-xs);
+}
+
+&__remove {
+    right: 5px;
+}
+
+&__zoom {
+    left: 5px;
+}
+
+&__zoom-icon {
+    width: 20px;
+    height: 20px;
+}
+
+&__file-list {
+    display: flex;
+    flex-direction: column;
+}
+
+&__file-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--primary-black-200);
+
+    @include hover {
+        .base-file-upload__file-item-wrapper {
+            color: var(--primary-blue);
+        }
+
+        .base-file-upload__file-item-button {
+            background: var(--primary-blue-100);
+        }
+        .base-file-upload__file-item-button-trash {
+            background: var(--error-red-light-05);
+        }
+    }
+
+    @include pressed {
+        .base-file-upload__file-item-wrapper {
+            color: var(--primary-blue-deep);
+        }
+
+        .base-file-upload__file-item-button {
+            background: var(--primary-blue-200);
+        }
+        .base-file-upload__file-item-button-trash {
+            background: var(--error-red-light-04);
+        }
+    }
+}
+
+&__file-item-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--primary-text-primary);
+    font: var(--typography-text-m-regular);
+}
+
+&__file-item-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border-radius: var(--corner-radius-2xs);
+    padding: var(--spacing-xs);
+}
+
+&__error {
+    color: var(--primary-red-500);
+    margin-top: 0.5rem;
+    font-size: var(--typography-text-s-regular);
+}
+
+&__media-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-s);
+    border: 1px dashed var(--primary-black-300);
+    border-radius: var(--corner-radius-xs);
+    cursor: pointer;
+    background: var(--bg-light);
+    transition: all var(--transition);
+
+    &:hover {
+      background: var(--primary-black-200);
+      border-color: var(--primary-blue-500);
+    }
+  }
+
+  &__placeholder-text {
+    color: var(--primary-text-tertiary);
+    font: var(--typography-text-s-regular);
+    margin: 0;
+    text-align: center;
+
+    span {
+        color: var(--primary-blue);
+    }
+  }
+}
+</style>

package/src/components/BaseUpload/ImageModal.vue

@@ -0,0 +1,25 @@
+<template>
+<div class="image-modal">
+    <img :src="modalProps.imageUrl" alt="Enlarged Image" class="image-modal__image" />
+</div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    modalProps: { closable?: boolean; imageUrl?: string };
+}>();
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.image-modal {
+    &__image {
+        max-width: 90vw;
+        max-height: 80vh;
+        object-fit: contain;
+        border-radius: var(--corner-radius-m);
+    }
+}
+</style>

package/src/composables/useModal.ts

@@ -0,0 +1,14 @@
+import { inject } from 'vue';
+import type { ICoreModalProps, ModalComponent } from '../types/modal';
+interface ModalApi {
+  open(id: string, props?: ICoreModalProps, component?: ModalComponent): void;
+  close(id: string): void;
+}
+
+export function useModal() {
+  const modal = inject<ModalApi>('$modal');
+  if (!modal) {
+    throw new Error('Modal plugin is not installed');
+  }
+  return modal;
+}