@factoringplus/pl-components-pack-v3 2.0.0-pre-optimized-19-icons → 2.0.0-pre-optimized-21-icons

package/src/components/form/pl-upload-plus/pl-upload-plus.vue

@@ -0,0 +1,575 @@
+<template>
+  <div :id="id" class="pl-upload-new" :class="{ 'not-allowed': props.disabled }">
+    <div v-if="title || tooltip" class="pb-1 d-flex" :class="[!viewMode && 'ps-1']">
+      <PlBody2 data-testid="upload-title" style="color: var(--color-text-icons-secondary)">
+        {{ title }}
+      </PlBody2>
+      <PlBody2 v-if="optional" class="ps-2" style="color: var(--color-text-icons-tertiary)">
+        {{ optional }}
+      </PlBody2>
+      <PlTooltipPlus
+        v-if="tooltip || $slots['tooltip-text']"
+        :width="props.tooltipWidth"
+        class="ml-auto pr-1"
+      >
+        <PlIcon
+          :icon="Question20"
+          class="cursor-pointer"
+          color="var(--color-text-icons-secondary)"
+        />
+        <template #tooltip-text>
+          <slot name="tooltip-text">{{ tooltip }}</slot>
+        </template>
+      </PlTooltipPlus>
+    </div>
+
+    <div
+      v-if="!viewMode"
+      class="pl-upload-load-block"
+      :class="{ 'drag-over': dragOverClass, disabled: disabled || modelValue.length >= limit }"
+      @dragover.prevent="handleDragOver"
+      @drop.prevent="handleDrop"
+    >
+      <div class="content">
+        <PlIcon
+          :icon="Clip24"
+          class="justify-content-center"
+          color="var(--color-text-icons-interactive)"
+        />
+        <PlBtn2 style="color: var(--color-text-icons-interactive)" class="text-center">
+          {{ windowWidth >= 768 ? 'Нажмите или перетащите файл' : 'Нажмите для загрузки файла' }}
+        </PlBtn2>
+        <PlCap
+          v-if="description"
+          style="color: var(--color-text-icons-tertiary)"
+          class="text-center pt-1"
+        >
+          {{
+            description === 'default'
+              ? `До ${fileSize} МБ. Форматы: ${accept.toUpperCase()}`
+              : description
+          }}
+        </PlCap>
+        <input
+          ref="UploadInputRef"
+          :prop="prop"
+          class="pl-upload-input"
+          type="file"
+          :multiple="multiple"
+          title=""
+          :accept="acceptForInput"
+          @change="inputChange"
+        />
+      </div>
+    </div>
+    <PlCap v-if="errors[0]" class="pt-1 ps-1" style="color: var(--color-text-icons-error)">
+      {{ errors[0].message }}
+    </PlCap>
+    <PlCap
+      v-else-if="helperText"
+      class="pt-1 ps-1"
+      style="color: var(--color-text-icons-secondary)"
+    >
+      {{ helperText }}
+    </PlCap>
+    <div :class="[!viewMode && modelValue.length && 'pt-4']">
+      <PlScrollbar :max-height="maxHeightScroll">
+        <div data-testid="upload-card-container" class="pl-upload-card-container pr-3">
+          <div
+            v-for="(file, idx) in modelValue"
+            :key="file.name + idx"
+            v-tap="() => emit('clickOnFile', file)"
+            data-testid="upload-card"
+            class="pl-upload-card"
+            :class="{
+              'wrong-file': isFileHasError(file),
+              'cursor-pointer': hasClickOnFileListener,
+            }"
+          >
+            <div class="d-flex justify-content-between align-items-center pb-2">
+              <PlTag v-if="isFileHasError(file)" class="pl-upload__error-message"
+                >Не загружен
+              </PlTag>
+              <PlIcon v-else :icon="Document20" color="var(--color-text-icons-tertiary)" />
+              <PlIcon
+                v-if="
+                  !viewMode || allowRemoveInViewMode || (isTUnloadedFile(file) && file.removable)
+                "
+                v-tap.stop="() => removeFile(file)"
+                :icon="Close20"
+                color="var(--color-text-icons-secondary)"
+                class="cursor-pointer"
+              />
+            </div>
+            <div class="d-grid gap-1">
+              <PlCap
+                data-testid="upload-card-name"
+                class="text-truncate"
+                style="color: var(--color-text-icons-primary)"
+              >
+                {{ file.name }}
+              </PlCap>
+              <div class="d-flex gap-1">
+                <PlTag
+                  v-if="file.size && !hideSize"
+                  :style="`color: var(--color-text-icons-${
+                    isTUnloadedFile(file) && file.error?.size ? 'error' : 'secondary'
+                  })`"
+                >
+                  {{ formatFileSize(file.size) }}
+                </PlTag>
+                <PlTag
+                  v-if="file.size && !hideSize"
+                  style="color: var(--color-text-icons-secondary)"
+                >
+                  •
+                </PlTag>
+                <PlTag
+                  :style="`color: var(--color-text-icons-${
+                    isTUnloadedFile(file) && file.error?.dist ? 'error' : 'secondary'
+                  })`"
+                >
+                  {{ file.name?.split('.')?.pop()?.toLocaleUpperCase() }}
+                </PlTag>
+              </div>
+            </div>
+          </div>
+        </div>
+      </PlScrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, inject, watch, onMounted, computed, getCurrentInstance } from 'vue';
+import type { ComputedRef } from 'vue';
+import type { ValidateError } from 'async-validator';
+import PlIcon from '@/components/shared/pl-icon/pl-icon.vue';
+import PlNotification from '@/components/data/pl-snackbar/renderSnackbar';
+import declOfNum from '../../../utils/declOfNum';
+import uniqid from '@/utils/uniqId';
+import { useWindowSize } from '@vueuse/core';
+import { Clip24, Close20, Document20, Question20 } from '@/components/shared/pl-icon/assets-map';
+
+const { width: windowWidth } = useWindowSize();
+
+interface IProps {
+  multiple?: boolean;
+  accept?: string;
+  fileSize?: number;
+  modelValue: Array<File | TUnloadedFile>;
+  maxHeightScroll?: number;
+  limit?: number;
+  description?: string;
+  disabled?: boolean;
+  title?: string;
+  helperText?: string;
+  tooltip?: string;
+  prop?: string;
+  optional?: string;
+  width?: string;
+  viewMode?: boolean;
+  maxSumFilesSize?: number;
+  tooltipWidth?: string;
+  allowRemoveInViewMode?: boolean;
+  hideSize?: boolean;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  multiple: true,
+  accept: 'doc, docx, pdf, jpeg, jpg, png, xlsx, xls, txt',
+  fileSize: 50,
+  modelValue: () => [],
+  maxHeightScroll: 120,
+  limit: 20,
+  description: 'default',
+  disabled: false,
+  title: '',
+  helperText: '',
+  tooltip: '',
+  prop: '',
+  optional: '',
+  width: '100%',
+  viewMode: false,
+  maxSumFilesSize: 300 * 1024 * 1024,
+  allowRemoveInViewMode: false,
+  hideSize: false,
+});
+const {
+  accept,
+  fileSize,
+  maxHeightScroll,
+  modelValue,
+  multiple,
+  description,
+  title,
+  helperText,
+  tooltip,
+  limit,
+  prop,
+  optional,
+  maxSumFilesSize,
+} = toRefs(props);
+const acceptForInput = computed(() => {
+  return `.${accept.value.toLowerCase()?.split(', ').join(', .')}`;
+});
+
+const dragOverClass = ref(false);
+let dragOverTimer: number;
+const handleDragOver = (event: DragEvent): void => {
+  // Проверить, содержит ли перетаскиваемый объект файлы
+  const { dataTransfer } = event;
+  if (dataTransfer && dataTransfer.types.includes('Files')) {
+    // Установить dragOverClass в true
+    dragOverClass.value = true;
+    // Сбросить предыдущий таймер, если он есть
+    clearTimeout(dragOverTimer);
+    // Установить новый таймер
+    dragOverTimer = window.setTimeout(() => {
+      // Добавлен window для TypeScript
+      dragOverClass.value = false;
+    }, 100);
+  }
+};
+
+type TError = {
+  dist: boolean;
+  size: boolean;
+};
+type TUnloadedFile = {
+  name: string;
+  size: number;
+  error?: TError;
+  removable?: boolean;
+};
+const fileCheck = (file: File): TUnloadedFile | File => {
+  const type = file.name?.split('.').pop()?.toLowerCase() as string;
+  const { size } = file;
+
+  const isDistError = !accept.value.toLowerCase()?.split(', ').includes(type);
+  const isSizeError = size > fileSize.value * 1024 * 1024 || size === 0;
+
+  if (isDistError || isSizeError) {
+    return {
+      name: file.name,
+      size,
+      error: {
+        dist: isDistError,
+        size: isSizeError,
+      },
+    };
+  }
+  return file;
+};
+
+const isFile = (file: File | TUnloadedFile): file is File => {
+  return 'lastModified' in file && 'type' in file;
+};
+const isTUnloadedFile = (file: File | TUnloadedFile): file is TUnloadedFile => !isFile(file);
+const isFileHasError = (file: File | TUnloadedFile): file is TUnloadedFile => {
+  if (isTUnloadedFile(file)) {
+    return file.error?.size || file.error?.dist;
+  }
+  return false;
+};
+
+const fileErrorNotify = (files: TUnloadedFile[]): void => {
+  const wrongSize = files.filter((e) => e.error.size);
+  if (wrongSize.length > 0) {
+    PlNotification.error({
+      title: 'Ошибка загрузки файлов',
+      message: `Недопустимый размер ${declOfNum(wrongSize.length, ['файла', 'файла', 'файлов'])}`,
+    });
+  }
+  const wrongDist = files.filter((e) => e.error.dist);
+  if (wrongDist.length > 0) {
+    PlNotification.error({
+      title: 'Ошибка загрузки файлов',
+      message: `Неверный формат ${declOfNum(wrongDist.length, ['файла', 'файла', 'файлов'])}`,
+    });
+  }
+};
+
+const id = uniqid('id-');
+
+const inputLoader = ref<null | HTMLInputElement>(null);
+
+const hasClickOnFileListener = ref(false);
+
+onMounted(() => {
+  const instance = getCurrentInstance();
+  const vnodeProps = instance?.vnode.props || {};
+
+  hasClickOnFileListener.value = !!vnodeProps['onClickOnFile'];
+
+  const element = document.getElementById(id);
+  if (element) {
+    inputLoader.value = element.querySelector('.pl-upload-input') as HTMLInputElement;
+  }
+});
+
+const removeFilesFromInput = (filesToRemove: File[] | TUnloadedFile[]): void => {
+  const inputElement = inputLoader.value;
+  if (!inputElement || !inputElement.files) {
+    return;
+  }
+  const dataTransfer = new DataTransfer();
+  Array.from(inputElement.files).forEach((file) => {
+    if (!filesToRemove.includes(file)) {
+      dataTransfer.items.add(file);
+    }
+  });
+  inputElement.files = dataTransfer.files;
+};
+
+const emit = defineEmits(['addFiles', 'removeFile', 'clickOnFile']);
+
+const addFiles = (files: FileList | File[]): void => {
+  if (modelValue.value.length + files.length > limit.value) {
+    PlNotification.error({
+      title: 'Ошибка загрузки файлов',
+      message: `Максимум ${limit.value} ${declOfNum(limit.value, ['файл', 'файла', 'файлов'])}`,
+    });
+    const itemsToRemove: File[] = Array.from(files);
+    removeFilesFromInput(itemsToRemove);
+    return;
+  }
+
+  const unloadFiles: TUnloadedFile[] = [];
+  const originUnloadFiles: File[] = [];
+  const loadedFiles: File[] = [];
+
+  // Преобразование files в массив File
+  const items: File[] = Array.from(files);
+  const currentFilesSize = modelValue.value.reduce((acc, file) => {
+    if (isTUnloadedFile(file) && file.error) return acc;
+    return acc + file.size;
+  }, 0);
+  const newItemsFilesSize = items.reduce((acc, file) => acc + file.size, 0);
+  if (currentFilesSize + newItemsFilesSize > maxSumFilesSize.value) {
+    PlNotification.error({
+      title: 'Ошибка загрузки файлов',
+      message: `Максимальный размер всех файлов не должен превышать ${
+        maxSumFilesSize.value / 1024 / 1024
+      } МБ`,
+    });
+    const itemsToRemove: File[] = Array.from(files);
+    removeFilesFromInput(itemsToRemove);
+    return;
+  }
+
+  // Обработка файлов на вывод ошибки
+  items.forEach((item) => {
+    const checkedFile = fileCheck(item);
+    modelValue.value.forEach((compareItem) => {
+      const propertiesToCompare = ['name', 'size', 'type', 'lastModified'];
+      if (propertiesToCompare.every((property) => compareItem[property] === item[property])) return;
+    });
+    if ('error' in checkedFile) {
+      unloadFiles.push(checkedFile);
+      originUnloadFiles.push(item);
+    } else {
+      loadedFiles.push(item);
+    }
+  });
+
+  if (unloadFiles.length) {
+    fileErrorNotify(unloadFiles);
+  }
+  modelValue.value.unshift(...unloadFiles);
+  modelValue.value.push(...loadedFiles);
+  removeFilesFromInput(originUnloadFiles);
+  emit('addFiles', [...unloadFiles, ...loadedFiles], modelValue.value);
+};
+
+let isProgrammaticChange = false;
+const removeFile = (fileToRemove: File | TUnloadedFile): void => {
+  const index = modelValue.value.findIndex((file) => file === fileToRemove);
+
+  if (index !== -1) {
+    if (!('error' in fileToRemove)) {
+      removeFilesFromInput([fileToRemove]);
+    }
+
+    modelValue.value.splice(index, 1);
+    emit('removeFile', fileToRemove, modelValue.value);
+    setTimeout(() => {
+      if (inputLoader.value) {
+        isProgrammaticChange = true; // Установка флага перед генерацией события
+        // Создание нового события
+        const event = new Event('change', {
+          bubbles: true, // Если нужно, чтобы событие всплывало
+          cancelable: true, // Если нужно, чтобы событие можно было отменить
+        });
+
+        // Отправка события
+        inputLoader.value.dispatchEvent(event);
+        setTimeout(() => {
+          isProgrammaticChange = false;
+        }, 0);
+      }
+    }, 0);
+  }
+};
+// Обработка события input
+const inputChange = (evt: Event): void => {
+  if (isProgrammaticChange) {
+    return; // Игнорирование события, если оно программное
+  }
+  const target = evt.target as HTMLInputElement;
+  if (target && target.files) {
+    addFiles(target.files);
+  }
+  target.value = null;
+};
+
+const handleDrop = (evt: DragEvent): void => {
+  clearTimeout(dragOverTimer);
+  dragOverClass.value = false;
+
+  const { dataTransfer } = evt;
+  const loadedFiles: File[] = [];
+
+  if (dataTransfer && dataTransfer.items) {
+    const items = Array.from(dataTransfer.items);
+    items.forEach((item) => {
+      if (item.kind === 'file') {
+        const file = item.getAsFile();
+        if (file) {
+          loadedFiles.push(file);
+        }
+      }
+    });
+    addFiles(loadedFiles);
+  }
+};
+
+// парсер для вывода МБ, КБ, байт
+const formatNumber = (number: number): string => {
+  return number % 1 === 0 ? number.toString() : number.toFixed(2);
+};
+const formatFileSize = (size: number): string => {
+  if (size < 1024) {
+    return size + ' байт';
+  } else if (size < 1048576) {
+    return formatNumber(size / 1024) + ' КБ';
+  } else {
+    return formatNumber(size / 1048576) + ' МБ';
+  }
+};
+
+const errors = ref<ValidateError[]>([]);
+if (props.prop) {
+  const errorsState = inject('errorsState', [] as unknown) as ComputedRef<ValidateError[]>;
+  if (errorsState) {
+    watch(
+      errorsState,
+      () => {
+        errors.value = errorsState.value.filter((error) => error.field === prop.value);
+        const el = document.getElementById(id)?.parentElement;
+        if (el) {
+          if (errors.value.length) {
+            el.classList.add('is-error');
+          } else {
+            el.classList.remove('is-error');
+          }
+        }
+      },
+      { deep: true },
+    );
+  }
+}
+
+const UploadInputRef = ref();
+const clickInput = () => {
+  UploadInputRef.value.click();
+};
+
+defineExpose({ addFiles, removeFile, clickInput });
+</script>
+
+<style lang="scss">
+@use '@/styles/media' as *;
+@use '@/styles/tokens' as *;
+
+.pl-upload-new {
+  width: v-bind('props.width');
+
+  #pl-scrollbar .pl-scrollbar__bar {
+    opacity: 1;
+
+    &.is-horizontal {
+      display: none;
+    }
+  }
+
+  .pl-upload-load-block {
+    background: var(--color-surface-opacity-1);
+    border: 1px dashed var(--color-border-inactive);
+    border-radius: $radius-x3;
+
+    @include mq(min768) {
+      &:hover,
+      &.drag-over {
+        border-color: var(--color-border-active);
+      }
+    }
+
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .content {
+      position: relative;
+      display: grid;
+      place-content: center center;
+      height: 100%;
+      padding: $spacing-x6;
+
+      & > div {
+        align-self: start;
+      }
+
+      .pl-upload-input {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+
+        @include mq(min768) {
+          &:hover {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
+  .pl-upload-card-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: $spacing-x2;
+
+    @include mq(phone-430) {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    .pl-upload-card {
+      padding: $spacing-x2;
+      background: var(--color-surface-opacity-1);
+      border-radius: $radius-x2;
+
+      &.wrong-file {
+        background-color: var(--color-system-surface-error);
+      }
+    }
+
+    .pl-upload__error-message {
+      display: flex;
+      align-items: center;
+      min-height: 20px;
+      color: var(--color-text-icons-error);
+    }
+  }
+}
+</style>

package/src/components/form/pl-upload-plus/types/FileExtension.ts

@@ -0,0 +1,17 @@
+export type FileExtension =
+  | 'doc'
+  | 'docx'
+  | 'pdf'
+  | 'jpeg'
+  | 'jpg'
+  | 'tiff'
+  | 'tif'
+  | 'png'
+  | 'xlsx'
+  | 'xls'
+  | 'txt'
+  | 'p7s'
+  | 'csv'
+  | 'rar'
+  | 'zip'
+  | '7z';