plugin-ui-for-kzt 0.0.27 → 0.0.29

package/src/components/BaseUpload/BaseUpload.vue

@@ -8,7 +8,14 @@
         class="base-file-upload__input"
         :accept="acceptedFormats.join(',')"
     />
-    <div class="base-file-upload__wrapper" @click="triggerFileInput">
+    <div 
+        class="base-file-upload__wrapper" 
+        :class="{ '--is-drag-over': isDragOver }"
+        @click="triggerFileInput"
+        @dragover="handleDragOver"
+        @dragleave="handleDragLeave"
+        @drop="handleDrop"
+    >
     <base-icon 
         name="upload" 
         class="base-file-upload__icon-upload" 
@@ -52,7 +59,11 @@
         <div
         v-if="mediaFiles.length > 0"
         class="base-file-upload__media-item base-file-upload__media-placeholder"
+        :class="{ '--is-drag-over': isDragOver }"
         @click="triggerFileInput"
+        @dragover="handleDragOver"
+        @dragleave="handleDragLeave"
+        @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>
@@ -125,9 +136,10 @@ const fileInput = ref<HTMLInputElement | null>(null);
 const uploadedFiles = ref<UploadedFile[]>([]);
 const isUploading = ref(false);
 const errorMessage = ref<string | null>(null);
+const isDragOver = ref(false);
 const modal = useModal();
 
-const mediaExtensions = ['.jpg', '.jpeg', '.png'];
+const mediaExtensions = ['.jpg', '.jpeg', '.png', '.svg'];
 const mediaFiles = computed(() =>
   uploadedFiles.value.filter((file) =>
     mediaExtensions.includes(`.${file.name.split('.').pop()?.toLowerCase() || ''}`)
@@ -143,6 +155,62 @@ const triggerFileInput = () => {
   fileInput.value?.click();
 };
 
+// Обработчики drag & drop
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault();
+  event.stopPropagation();
+  isDragOver.value = true;
+};
+
+const handleDragLeave = (event: DragEvent) => {
+  event.preventDefault();
+  event.stopPropagation();
+  isDragOver.value = false;
+};
+
+const handleDrop = (event: DragEvent) => {
+  event.preventDefault();
+  event.stopPropagation();
+  isDragOver.value = false;
+  
+  const files = event.dataTransfer?.files;
+  if (files && files.length > 0) {
+    processFiles(Array.from(files));
+  }
+};
+
+const processFiles = (files: File[]) => {
+  isUploading.value = true;
+  errorMessage.value = null;
+
+  const filesToProcess = props.multiple ? files : files.slice(0, 1);
+  
+  if (!props.multiple && uploadedFiles.value.length > 0) {
+    uploadedFiles.value = [];
+  }
+
+  filesToProcess.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;
+    }
+
+    if (props.enableCrop && isImageFile(file)) {
+      openCropModal(file);
+    } else {
+      uploadedFiles.value.push({ name: file.name, size: file.size, file });
+    }
+  });
+
+  isUploading.value = false;
+};
+
 const isImageFile = (file: File) => {
   const fileExtension = `.${file.name.split('.').pop()?.toLowerCase() || ''}`;
   return mediaExtensions.includes(fileExtension);
@@ -153,29 +221,7 @@ const handleFileUpload = (event: Event) => {
   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;
-      }
-
-      if (props.enableCrop && isImageFile(file)) {
-        openCropModal(file);
-      } else {
-        uploadedFiles.value.push({ name: file.name, size: file.size, file });
-      }
-    });
-
-    isUploading.value = false;
+    processFiles(Array.from(files));
     target.value = '';
   }
 };
@@ -271,6 +317,19 @@ gap: var(--spacing-l);
     cursor: pointer;
     background: var(--primary-black-200);
     }
+
+    &.--is-drag-over {
+        border: 1px dashed var(--primary-blue-500);
+        background: var(--primary-blue-100);
+        
+        .base-file-upload__title {
+            color: var(--primary-blue);
+        }
+        
+        .base-file-upload__icon-upload {
+            color: var(--primary-blue);
+        }
+    }
 }
 
 &__title {
@@ -410,6 +469,19 @@ gap: var(--spacing-l);
       background: var(--primary-black-200);
       border-color: var(--primary-blue-500);
     }
+
+    &.--is-drag-over {
+        border: 1px dashed var(--primary-blue-500);
+        background: var(--primary-blue-100);
+        
+        .base-file-upload__placeholder-text span {
+            color: var(--primary-blue-deep);
+        }
+        
+        .base-file-upload__placeholder-icon {
+            color: var(--primary-blue);
+        }
+    }
   }
 
   &__placeholder-text {

package/src/images.d.ts

@@ -0,0 +1,24 @@
+declare module '*.png' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.jpg' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.jpeg' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.gif' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.webp' {
+    const value: string;
+    export default value;
+  }

package/src/types/button.d.ts

@@ -1,6 +1,6 @@
 import type { ICoreColor, ICoreInteractive, ICoreSize, ICoreState, ICoreStyle } from './utils';
 
-export type ICoreButtonProps = ICoreSize & ICoreColor & ICoreInteractive & ICoreState & ICoreStyle;
+export type ICoreButtonProps = ICoreSize & ICoreColor & ICoreInteractive & ICoreState & ICoreStyle & { onlyIcon?: boolean };
 
 interface IOptionButtonSegment {
     label: string;

package/src/types/input.d.ts

@@ -63,6 +63,7 @@ export interface ICoreSelectBaseProps {
   transitionName?: string
   label?: string
   hint?: string
+  searchable?: boolean
 }
 
 export interface ISelectSlotProps {

package/src/types/table.d.ts

@@ -9,6 +9,9 @@ export interface Column {
     sortable?: boolean
     icons?: Component[]
     dropdownVisible?: boolean
+    tooltip?: string
+    width?: string | number
+    align?: 'left' | 'center' | 'right'
 }
 
 export interface Action {
@@ -30,4 +33,7 @@ export interface BaseTableProps {
     subTable?: {
         slotName: string
     }
+    virtualScroll?: boolean
+    virtualScrollThreshold?: number
+    virtualScrollHeight?: number
 }

package/src/vue-virtual-scroller.d.ts

@@ -6,4 +6,8 @@ declare module 'vue-virtual-scroller' {
 
   export const DynamicScrollerItem: DefineComponent;
 
+  export const RecycleScroller: DefineComponent;
+
+  export const RecycleScrollerItem: DefineComponent;
+
 }