@milaboratories/uikit 2.10.14 → 2.10.16

package/src/demo-site-data/all-css-variables.ts

@@ -14,315 +14,354 @@ export function allCssVariables(): Record<
 > {
   return {
     txtSec: {
-      title: 'Text',
+      title: "Text",
       data: {
-        '--txt-00': {
+        "--txt-00": {
           light: [false, false],
-          value: ['#FFFFFF', '#FFFFFF'],
-          description: 'Text on the colored elements',
+          value: ["#FFFFFF", "#FFFFFF"],
+          description: "Text on the colored elements",
         },
-        '--txt-01': {
+        "--txt-01": {
           light: [true, false],
-          value: ['#110529', '#FFFFFF'],
-          description: 'Primary text layer',
+          value: ["#110529", "#FFFFFF"],
+          description: "Primary text layer",
         },
-        '--txt-02': {
+        "--txt-02": {
           light: [true, false],
-          value: ['#231842', '#ADAEB8'],
-          description: 'Secondary text layer - large arrays of text',
+          value: ["#231842", "#ADAEB8"],
+          description: "Secondary text layer - large arrays of text",
         },
-        '--txt-03': {
+        "--txt-03": {
           light: [true, true],
-          value: ['#9D9EAE', '#60616B'],
-          description: 'Tetritary text layer - hints and descriptions',
+          value: ["#9D9EAE", "#60616B"],
+          description: "Tetritary text layer - hints and descriptions",
         },
-        '--txt-mask': {
+        "--txt-mask": {
           light: [false, true],
-          value: ['#CFD1DB', '#3D3D42'],
-          description: 'Text mask in inputs, icons, etc.',
+          value: ["#CFD1DB", "#3D3D42"],
+          description: "Text mask in inputs, icons, etc.",
         },
-        '--txt-focus': {
+        "--txt-focus": {
           light: [true, true],
-          value: ['#07AD3E', '#87E087'],
-          description: 'Colored text in active/focus elements',
+          value: ["#07AD3E", "#87E087"],
+          description: "Colored text in active/focus elements",
         },
-        '--txt-error': {
+        "--txt-error": {
           light: [true, true],
-          value: ['#F1222F', '#FF5C5C'],
-          description: 'Colored text in error elements',
+          value: ["#F1222F", "#FF5C5C"],
+          description: "Colored text in error elements",
         },
-        '--txt-link': {
+        "--txt-link": {
           light: [true, true],
-          value: ['#5F31CC', '#9470FF'],
-          description: 'Colored text in links',
+          value: ["#5F31CC", "#9470FF"],
+          description: "Colored text in links",
         },
       },
     },
     iconSec: {
-      title: 'Icon',
+      title: "Icon",
       data: {
-        '--ic-00': {
+        "--ic-00": {
           light: [false, false],
-          value: ['#FFFFFF', '#FFFFFF'],
-          description: 'Icons on colored elements',
+          value: ["#FFFFFF", "#FFFFFF"],
+          description: "Icons on colored elements",
         },
-        '--ic-01': {
+        "--ic-01": {
           light: [true, false],
-          value: ['#110529', '#FFFFFF'],
-          description: 'Primary elements',
+          value: ["#110529", "#FFFFFF"],
+          description: "Primary elements",
         },
-        '--ic-02': {
+        "--ic-02": {
           light: [false, true],
-          value: ['#CFD1DB', '#60616B'],
-          description: 'Secondary & tetritary elements',
+          value: ["#CFD1DB", "#60616B"],
+          description: "Secondary & tetritary elements",
         },
-        '--ic-accent': {
+        "--ic-accent": {
           light: [true, false],
-          value: ['#07AD3E', '#87E087'],
-          description: 'Focus/active elements',
+          value: ["#07AD3E", "#87E087"],
+          description: "Focus/active elements",
         },
       },
     },
     borderSec: {
-      title: 'Border',
+      title: "Border",
       data: {
-        '--border-color-default': {
+        "--border-color-default": {
           light: [true, true],
-          value: ['#110529', '#60616B'],
-          description: 'Main border for components',
+          value: ["#110529", "#60616B"],
+          description: "Main border for components",
         },
-        '--border-color-hover': {
+        "--border-color-hover": {
           light: [true, true],
-          value: ['#231842', '#ADAEB8'],
-          description: 'Hover on main border',
+          value: ["#231842", "#ADAEB8"],
+          description: "Hover on main border",
         },
-        '--border-color-focus': {
+        "--border-color-focus": {
           light: [false, false],
-          value: ['#49CC49', '#49CC49'],
-          description: 'Active border for components',
+          value: ["#49CC49", "#49CC49"],
+          description: "Active border for components",
         },
-        '--border-color-error': {
+        "--border-color-error": {
           light: [false, false],
-          value: ['#FF5C5C', '#FF5C5C'],
-          description: 'Error border for components',
+          value: ["#FF5C5C", "#FF5C5C"],
+          description: "Error border for components",
         },
-        '--border-color-div-grey': {
+        "--border-color-div-grey": {
           light: [false, true],
-          value: ['#E1E3EB', '#232329'],
-          description: 'Divider lines low contrast',
+          value: ["#E1E3EB", "#232329"],
+          description: "Divider lines low contrast",
         },
-        '--border-color-div-bw': {
+        "--border-color-div-bw": {
           light: [false, true],
-          value: ['#FFFFFF', '#000000'],
-          description: 'Divider lines hight contrast',
+          value: ["#FFFFFF", "#000000"],
+          description: "Divider lines hight contrast",
         },
       },
     },
     btnSec: {
-      title: 'Button',
+      title: "Button",
       data: {
-        '--btn-accent-default': {
+        "--btn-accent-default": {
           light: [true, true],
-          value: ['#845CFF', ' #5F31CC'],
-          description: 'Accent coloured button',
+          value: ["#845CFF", " #5F31CC"],
+          description: "Accent coloured button",
         },
-        '--btn-accent-hover': {
+        "--btn-accent-hover": {
           light: [true, true],
-          value: ['#9470FF', ' #5F31CC'],
-          description: 'Hover on accent coloured button',
+          value: ["#9470FF", " #5F31CC"],
+          description: "Hover on accent coloured button",
         },
-        '--btn-accent-press': {
+        "--btn-accent-press": {
           light: [true, true],
-          value: ['#6F4DD6', '#5F31CC'],
-          description: 'Pressed on accent coloured button',
+          value: ["#6F4DD6", "#5F31CC"],
+          description: "Pressed on accent coloured button",
         },
-        '--btn-primary-default': {
+        "--btn-primary-default": {
           light: [true, true],
-          value: ['#110529', '#5F31CC'],
-          description: 'Primary button',
+          value: ["#110529", "#5F31CC"],
+          description: "Primary button",
         },
-        '--btn-primary-hover': {
+        "--btn-primary-hover": {
           light: [true, true],
-          value: ['#231842', '#6D3DDB'],
-          description: 'Hover on primary button',
+          value: ["#231842", "#6D3DDB"],
+          description: "Hover on primary button",
         },
-        '--btn-primary-press': {
+        "--btn-primary-press": {
           light: [true, true],
-          value: ['#080214', '#5328B8'],
-          description: 'Hover on primary button',
+          value: ["#080214", "#5328B8"],
+          description: "Hover on primary button",
         },
-        '--btn-sec-hover-white': {
+        "--btn-sec-hover-white": {
           light: [false, true],
-          value: ['rgba(255, 255, 255, 0.50)', 'rgba(131, 131, 163, 0.16)'],
-          description: 'Hover background on transparent button',
+          value: ["rgba(255, 255, 255, 0.50)", "rgba(131, 131, 163, 0.16)"],
+          description: "Hover background on transparent button",
         },
-        '--btn-sec-hover-grey': {
+        "--btn-sec-hover-grey": {
           light: [false, true],
-          value: ['rgba(155, 171, 204, 0.16)', 'rgba(131, 131, 163, 0.16)'],
-          description: 'Hover background on ghost button & icons',
+          value: ["rgba(155, 171, 204, 0.16)", "rgba(131, 131, 163, 0.16)"],
+          description: "Hover background on ghost button & icons",
         },
-        '--btn-sec-press-grey': {
+        "--btn-sec-press-grey": {
           light: [false, true],
-          value: ['rgba(155, 171, 204, 0.24)', 'rgba(131, 131, 163, 0.24)'],
-          description: 'Hover background on ghost button & icons',
+          value: ["rgba(155, 171, 204, 0.24)", "rgba(131, 131, 163, 0.24)"],
+          description: "Hover background on ghost button & icons",
         },
-        '--btn-active-select': {
+        "--btn-active-select": {
           light: [false, true],
-          value: ['rgba(99, 224, 36, 0.24)', 'rgba(99, 224, 36, 0.24)'],
-          description: 'Fill on selected elements',
+          value: ["rgba(99, 224, 36, 0.24)", "rgba(99, 224, 36, 0.24)"],
+          description: "Fill on selected elements",
         },
-        '--btn-switcher': {
+        "--btn-switcher": {
           light: [false, true],
-          value: ['linear-gradient(180deg, #A1E59C 0%, #D0F5B0 100%)', '#5E5E70'],
-          description: 'Gradient on active controll/switcher element',
+          value: ["linear-gradient(180deg, #A1E59C 0%, #D0F5B0 100%)", "#5E5E70"],
+          description: "Gradient on active controll/switcher element",
         },
       },
     },
     disSec: {
-      title: 'Disable',
+      title: "Disable",
       data: {
-        '--dis-00': {
+        "--dis-00": {
           light: [false, true],
-          value: ['#FFFFFF', '#65656B'],
-          description: 'Elements on dis-01, labels, texts, icons',
+          value: ["#FFFFFF", "#65656B"],
+          description: "Elements on dis-01, labels, texts, icons",
         },
-        '--dis-01': {
+        "--dis-01": {
           light: [false, true],
-          value: ['#CFD1DB', '#3D3D42'],
-          description: 'Buttons, borders, labels, texts, icons',
+          value: ["#CFD1DB", "#3D3D42"],
+          description: "Buttons, borders, labels, texts, icons",
         },
       },
     },
     bgSec: {
-      title: 'Background',
+      title: "Background",
       data: {
-        '--bg-base-dark': {
+        "--bg-base-dark": {
           light: [true, true],
-          value: ['#110529', '#0D0D0F'],
-          description: 'Default dark block background',
+          value: ["#110529", "#0D0D0F"],
+          description: "Default dark block background",
         },
-        '--bg-base-light': {
+        "--bg-base-light": {
           light: [false, true],
-          value: ['#F7F8FA', '#0D0D0F'],
-          description: 'Default light block background',
+          value: ["#F7F8FA", "#0D0D0F"],
+          description: "Default light block background",
         },
-        '--bg-elevated-01': {
+        "--bg-elevated-01": {
           light: [false, true],
-          value: ['#FFFFFF', '#1B1B1F'],
-          description: 'Default block background',
+          value: ["#FFFFFF", "#1B1B1F"],
+          description: "Default block background",
         },
-        '--bg-elevated-02': {
+        "--bg-elevated-02": {
           light: [false, true],
-          value: ['#E1E3EB', '#2D2D33'],
-          description: 'Secondary block background',
+          value: ["#E1E3EB", "#2D2D33"],
+          description: "Secondary block background",
         },
       },
     },
     filledSec: {
-      title: 'Filled',
+      title: "Filled",
       data: {
-        '--filled-V-BG': {
+        "--filled-V-BG": {
           light: [false, true],
-          value: ['#D0F0C0', 'rgba(66, 184, 66, 0.40)'],
-          description: 'Text background selection on V-read',
+          value: ["#D0F0C0", "rgba(66, 184, 66, 0.40)"],
+          description: "Text background selection on V-read",
         },
-        '--filled-D-BG': {
+        "--filled-D-BG": {
           light: [false, true],
-          value: ['#FFCECC', 'rgba(229, 83, 229, 0.40)'],
-          description: 'Text background selection on D-read',
+          value: ["#FFCECC", "rgba(229, 83, 229, 0.40)"],
+          description: "Text background selection on D-read",
         },
-        '--filled-N-BG': {
+        "--filled-N-BG": {
           light: [false, true],
-          value: ['#FAF5AA', 'rgba(83, 82, 102, 0.40)'],
-          description: 'Text background selection on C/N-read',
+          value: ["#FAF5AA", "rgba(83, 82, 102, 0.40)"],
+          description: "Text background selection on C/N-read",
         },
-        '--filled-J-BG': {
+        "--filled-J-BG": {
           light: [false, true],
-          value: ['#DEDBFF', 'rgba(132, 92, 255, 0.40)'],
-          description: 'Text background selection on J-read',
+          value: ["#DEDBFF", "rgba(132, 92, 255, 0.40)"],
+          description: "Text background selection on J-read",
         },
       },
     },
     notificationSec: {
-      title: 'Notification',
+      title: "Notification",
       data: {
-        '--notification-neutral': {
+        "--notification-neutral": {
           light: [false, true],
-          value: ['linear-gradient(90deg, #D6D9FF 0%, #FFF 100%)', 'linear-gradient(90deg, #4D4D8F 0%, #292933 100%)'],
-          description: 'Background on neutral blocks',
+          value: [
+            "linear-gradient(90deg, #D6D9FF 0%, #FFF 100%)",
+            "linear-gradient(90deg, #4D4D8F 0%, #292933 100%)",
+          ],
+          description: "Background on neutral blocks",
         },
-        '--notification-success': {
+        "--notification-success": {
           light: [false, true],
-          value: ['linear-gradient(90deg, #C9F0B6 0%, #FFF 100%)', 'linear-gradient(90deg, #305C3E 0%, #292933 100%)'],
-          description: 'Background on success blocks',
+          value: [
+            "linear-gradient(90deg, #C9F0B6 0%, #FFF 100%)",
+            "linear-gradient(90deg, #305C3E 0%, #292933 100%)",
+          ],
+          description: "Background on success blocks",
         },
-        '--notification-warning': {
+        "--notification-warning": {
           light: [false, true],
-          value: ['linear-gradient(90deg, #FEE0A3 0%, #FFF 100%)', 'linear-gradient(90deg, #754F2D 0%, #292933 100%)'],
-          description: 'Background on warning blocks',
+          value: [
+            "linear-gradient(90deg, #FEE0A3 0%, #FFF 100%)",
+            "linear-gradient(90deg, #754F2D 0%, #292933 100%)",
+          ],
+          description: "Background on warning blocks",
         },
-        '--notification-error': {
+        "--notification-error": {
           light: [false, true],
-          value: ['linear-gradient(90deg, #FFB8B8 0%, #FFF 100%)', 'linear-gradient(90deg, #8F3343 0%, #292933 100%)'],
-          description: 'Background on error blocks',
+          value: [
+            "linear-gradient(90deg, #FFB8B8 0%, #FFF 100%)",
+            "linear-gradient(90deg, #8F3343 0%, #292933 100%)",
+          ],
+          description: "Background on error blocks",
         },
       },
     },
     gradientSec: {
-      title: 'Gradient',
+      title: "Gradient",
       data: {
-        '--gradient-blue-green': {
+        "--gradient-blue-green": {
           light: [true, true],
           value: [
-            'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)',
-            'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)',
+            "linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)",
+            "linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)",
           ],
-          description: 'Main brand dark gradient',
+          description: "Main brand dark gradient",
         },
-        '--gradient-green-lime': {
+        "--gradient-green-lime": {
           light: [false, true],
-          value: ['linear-gradient(180deg, #A1E59C 0%, #D0F5B0 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
-          description: 'Main brand light gradient',
+          value: [
+            "linear-gradient(180deg, #A1E59C 0%, #D0F5B0 100%)",
+            "linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)",
+          ],
+          description: "Main brand light gradient",
         },
-        '--gradient-blue-violet': {
+        "--gradient-blue-violet": {
           light: [false, true],
-          value: ['linear-gradient(180deg, #ADB8FF 0%, #D6E9FF 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
-          description: 'Main brand light gradient',
+          value: [
+            "linear-gradient(180deg, #ADB8FF 0%, #D6E9FF 100%)",
+            "linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)",
+          ],
+          description: "Main brand light gradient",
         },
-        '--gradient-blue-clear': {
+        "--gradient-blue-clear": {
           light: [false, true],
-          value: ['linear-gradient(180deg, #85BEFF 0%, #CEF 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
-          description: 'Additional brand gradient',
+          value: [
+            "linear-gradient(180deg, #85BEFF 0%, #CEF 100%)",
+            "linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)",
+          ],
+          description: "Additional brand gradient",
         },
-        '--gradient-orange': {
+        "--gradient-orange": {
           light: [false, true],
-          value: ['linear-gradient(180deg, #FFB766 0%, #FFEAA3 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
-          description: 'Additional brand gradient',
+          value: [
+            "linear-gradient(180deg, #FFB766 0%, #FFEAA3 100%)",
+            "linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)",
+          ],
+          description: "Additional brand gradient",
         },
-        '--gradient-mint': {
+        "--gradient-mint": {
           light: [false, true],
-          value: ['linear-gradient(180deg, #7DD1D1 0%, #C8FAE9 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
-          description: 'Additional brand gradient',
+          value: [
+            "linear-gradient(180deg, #7DD1D1 0%, #C8FAE9 100%)",
+            "linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)",
+          ],
+          description: "Additional brand gradient",
         },
-        '--gradient-lime': {
+        "--gradient-lime": {
           light: [false, true],
-          value: ['linear-gradient(180deg, #BFE062 0%, #E4FFAD 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
-          description: 'Additional brand gradient',
+          value: [
+            "linear-gradient(180deg, #BFE062 0%, #E4FFAD 100%)",
+            "linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)",
+          ],
+          description: "Additional brand gradient",
         },
-        '--gradient-rose': {
+        "--gradient-rose": {
           light: [false, true],
-          value: ['linear-gradient(0deg, #FFDDD6 0%, #FF99C9 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
-          description: 'Additional brand gradient',
+          value: [
+            "linear-gradient(0deg, #FFDDD6 0%, #FF99C9 100%)",
+            "linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)",
+          ],
+          description: "Additional brand gradient",
         },
-        '--gradient-red': {
+        "--gradient-red": {
           light: [false, true],
-          value: ['linear-gradient(0deg, #FFD5CC 0%, #FF9494 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
-          description: 'Additional brand gradient',
+          value: [
+            "linear-gradient(0deg, #FFD5CC 0%, #FF9494 100%)",
+            "linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)",
+          ],
+          description: "Additional brand gradient",
         },
-        '--gradient-violet': {
+        "--gradient-violet": {
           light: [false, true],
-          value: ['linear-gradient(180deg, #BCA3FF 0%, #E5E5FF 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
-          description: 'Additional brand gradient',
+          value: [
+            "linear-gradient(180deg, #BCA3FF 0%, #E5E5FF 100%)",
+            "linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)",
+          ],
+          description: "Additional brand gradient",
         },
       },
     },

package/src/drafts/FileBaseInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { PlBtnSecondary } from '../components/PlBtnSecondary';
-import { PlBtnGhost } from '../components/PlBtnGhost';
-import { computed, ref } from 'vue';
+import { PlBtnSecondary } from "../components/PlBtnSecondary";
+import { PlBtnGhost } from "../components/PlBtnGhost";
+import { computed, ref } from "vue";
 
 type PropsType = {
   modelValue: File[] | null;
@@ -15,16 +15,16 @@ type PropsType = {
 
 const props = withDefaults(defineProps<PropsType>(), {
   modelValue: null,
-  title: 'FASTQ',
-  description: 'Drag & drop FASTQ files here or...',
+  title: "FASTQ",
+  description: "Drag & drop FASTQ files here or...",
   multiple: false,
-  acceptedTypes: '',
-  buttonText: 'Select local file',
+  acceptedTypes: "",
+  buttonText: "Select local file",
 });
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', files: File[] | null): void;
-  (e: 'selected', files: File[]): void;
+  (e: "update:modelValue", files: File[] | null): void;
+  (e: "selected", files: File[]): void;
 }>();
 
 const fileInput = ref<HTMLInputElement>();
@@ -44,8 +44,8 @@ function handleFiles(event: Event) {
     if (!props.multiple) {
       filteredFiles.length = 1;
     }
-    emit('update:modelValue', filteredFiles);
-    emit('selected', filteredFiles);
+    emit("update:modelValue", filteredFiles);
+    emit("selected", filteredFiles);
   }
 
   dragging.value = false;
@@ -59,12 +59,12 @@ function handleDrop(event: DragEvent) {
 
 function filterFiles(files: File[]): File[] {
   if (!props.acceptedTypes) return files;
-  const acceptedTypesArray = props.acceptedTypes.split(',').map((type) => type.trim());
+  const acceptedTypesArray = props.acceptedTypes.split(",").map((type) => type.trim());
   return Array.from(files).filter((file) => {
     return acceptedTypesArray.some((type) => {
-      if (type.includes('/*')) {
+      if (type.includes("/*")) {
         // Шаблон типа, например, 'image/*'
-        return file.type.startsWith(type.split('/')[0]);
+        return file.type.startsWith(type.split("/")[0]);
       }
       return file.type === type;
     });
@@ -77,7 +77,7 @@ function deleteFile(file: File) {
     if (i !== -1) {
       const arr = [...props.modelValue];
       arr.splice(i, 1);
-      emit('update:modelValue', arr);
+      emit("update:modelValue", arr);
     }
   }
 }
@@ -100,7 +100,13 @@ function deleteFile(file: File) {
         </div>
       </div>
       <div class="pl-file-base-input__buttons d-flex gap-2">
-        <input ref="fileInput" :multiple="multiple" :accept="acceptedTypes" type="file" @change="handleFiles" />
+        <input
+          ref="fileInput"
+          :multiple="multiple"
+          :accept="acceptedTypes"
+          type="file"
+          @change="handleFiles"
+        />
         <PlBtnSecondary :disabled="disabled" class="text-caps11">
           {{ buttonText }}
         </PlBtnSecondary>
@@ -109,11 +115,22 @@ function deleteFile(file: File) {
     </div>
 
     <div v-if="hasFiles" class="d-flex gap-2 pa-4 flex-wrap">
-      <div v-for="file in modelValue" :key="file.name" class="pl-file-base-input__file d-flex align-center">
+      <div
+        v-for="file in modelValue"
+        :key="file.name"
+        class="pl-file-base-input__file d-flex align-center"
+      >
         <div class="pl-file-base-input__file-name text-m">
           {{ file.name }}
         </div>
-        <PlBtnGhost :disabled="disabled" icon="close" round size="small" class="flex-shrink-0" @click.stop="deleteFile(file)" />
+        <PlBtnGhost
+          :disabled="disabled"
+          icon="close"
+          round
+          size="small"
+          class="flex-shrink-0"
+          @click.stop="deleteFile(file)"
+        />
       </div>
     </div>
   </div>