plugin-ui-for-kzt 0.0.16 → 0.0.18

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,14 +81,17 @@ 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);
+    transition: all var(--transition);
 
     &::placeholder {
       color: var(--primary-text-tertiary);
@@ -127,6 +131,8 @@ function handleInput(event: Event) {
     flex-direction: column;
     gap: 6px;
     align-items: center;
+    width: 100%;
+    height: 100%;
   }
 
   &__label-text {
@@ -151,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);
@@ -171,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);
@@ -191,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;
+}

package/src/index.ts

@@ -1,9 +1,9 @@
 import { createPinia } from "pinia";
-import Modal from "./components/Modal/Modal.vue";
 import DataTable from "./components/DataTable/DataTable.vue";
 import Tooltip from "./components/Tooltip/Tooltip.vue";
 import Spinner from "./components/Spinner/Spinner.vue";
-import ModalPlugin, { useModal } from "./plugins/modalPlugin";
+import ModalPlugin from "./plugins/modalPlugin";
+import { useModal } from "./composables/useModal";
 import ToasterPlugin, { useToast } from "./plugins/toasterPlugin";
 import "./sprite"; // Импортируем иконки для генерации спрайта
 import "./styles/root.scss";
@@ -28,12 +28,22 @@ import BaseSiteInput from "./components/BaseSiteInput/BaseSiteInput.vue";
 import BaseInputPhone from "./components/BaseInputPhone/BaseInputPhone.vue";
 import BaseInputCurrency from "./components/BaseInputCurrency/BaseInputCurrency.vue";
 import BaseSegmentedButtons from "./components/BaseSegmentedButtons/BaseSegmentedButtons.vue";
+import BaseChips from "./components/BaseChips/BaseChips.vue";
+import BaseSwiper from "./components/BaseSwiper/BaseSwiper.vue";
+import BaseModal from "./components/BaseModal/BaseModal.vue";
+import BaseUpload from "./components/BaseUpload/BaseUpload.vue";
+import BaseBadge from "./components/BaseBadge/BaseBadge.vue";
+import BaseTag from "./components/BaseTag/BaseTag.vue";
+import BaseBadgeGroup from "./components/BaseBadge/BaseBadgeGroup.vue";
 
-const components = { 
-  Modal, 
-  DataTable, 
-  Tooltip, 
-  Spinner, 
+const components = {
+  BaseModal,
+  BaseTag,
+  BaseBadge,
+  BaseBadgeGroup,
+  DataTable,
+  Tooltip,
+  Spinner,
   BaseIcon,
   BaseBreadCrumbs,
   BaseButton,
@@ -54,18 +64,21 @@ const components = {
   BaseInputPhone,
   BaseInputCurrency,
   BasePagination,
-  BaseSegmentedButtons
+  BaseSegmentedButtons,
+  BaseChips,
+  BaseSwiper,
+  BaseUpload
 };
 
 // Функция для загрузки sprite.svg
 const loadSprite = () => {
   const possiblePaths = [
     "/sprite.svg",
-    "./sprite.svg", 
+    "./sprite.svg",
     "sprite.svg",
-    "/dist/sprite.svg"
+    "/dist/sprite.svg",
   ];
-  
+
   const tryLoadSprite = async (paths: string[]) => {
     for (const path of paths) {
       try {
@@ -85,7 +98,7 @@ const loadSprite = () => {
     }
     console.error("Не удалось загрузить SVG-спрайт ни с одного из путей");
   };
-  
+
   tryLoadSprite(possiblePaths);
 };
 
@@ -107,12 +120,15 @@ export default {
   },
 };
 
-export { 
-  Modal, 
-  DataTable, 
-  Tooltip, 
-  Spinner, 
-  useModal, 
+export {
+  BaseModal,
+  BaseBadgeGroup,
+  BaseBadge,
+  DataTable,
+  BaseTag,
+  Tooltip,
+  Spinner,
+  useModal,
   useToast,
   BaseIcon,
   BaseBreadCrumbs,
@@ -134,5 +150,8 @@ export {
   BaseInputPhone,
   BaseInputCurrency,
   BasePagination,
-  BaseSegmentedButtons
+  BaseSegmentedButtons,
+  BaseChips,
+  BaseSwiper,
+  BaseUpload
 };