Merge pull request #17 from IBEC-BOX/files/download

Files/download

src/module.ts

@@ -51,5 +51,10 @@ export default defineNuxtModule<ModuleOptions>({
       name: 'News',
       filePath: resolver.resolve('runtime/components/Parts/News.vue')
     })
+
+    addComponent({
+      name: 'downloadFiles',
+      filePath: resolver.resolve('runtime/components/Parts/files/downloadFiles.vue')
+    })
   }
 })

src/runtime/components/Pages/testVuetify.vue

@@ -35,6 +35,16 @@
     </v-main>
     <!-- Header first variant END -->
 
+    <v-main class="d-flex align-center">
+      <downloadFiles
+        :title="'О нас'"
+        :files="[
+          {title: 'Политика обработки персональных данных ', img: 'logo.svg', download: '1.png', size: '123 KB', alt: '', date: '20.02.22'},
+          {title: 'Политика обработки персональных данных ', download: '2.docx', alt: '', date: '20.02.22'}
+        ]"
+      />
+    </v-main>
+
     <NuxtPage />
 
     <v-footer app elevation="5">
@@ -57,6 +67,7 @@ import partsHeader from '../Parts/header/header.vue'
 import Card from "../Parts/Card.vue"
 import footerOne from "../Parts/footer/footer.vue";
 import partsNews from "../Parts/News.vue";
+import downloadFiles from "../Parts/files/downloadFiles.vue"
 import Forms from "../Parts/Forms.vue"
 const showDrawer = ref(false);
 

src/runtime/components/Parts/files/downloadFiles.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-container>
+    <h2 class="d-flex text-primary mb-6" :class="`justify-${positionTitle}`">{{ title }}</h2>
+    <div v-for="(file, index) in files" :key="`file-${index}`" class="d-flex align-center py-3" @click="downloadFile(file)" style="cursor: pointer; column-gap: 12px">
+      <v-img
+        max-width="44"
+        class="w-100"
+        cover
+        :src="file.img || fileExtensionImage[getFileExtension(file.download)]"
+        :alt="file.alt || getFileExtension(file.download)"
+      />
+      <div>
+        <p class="text-body-1 text-sm-18 text-black mb-1">{{ file.title }}</p>
+        <p class="text-body-2 text-primary-gray">
+          {{ getFileExtension(file.download).toUpperCase() }}<span v-if="file.size || file.date">,</span>
+          {{ file.size }}<span v-if="file.size && file.date">,</span>
+          {{ file.date }}
+        </p>
+      </div>
+    </div>
+    <slot name="button"></slot>
+  </v-container>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, default: 'О нас' },
+  positionTitle: { type: String, default: 'center'},
+  files: { type: Array, default: () => [] }
+})
+
+const fileExtensionImage = {
+  xlsx: "/exel.svg",
+
+  zip: "/zip.svg",
+  rar: "/zip.svg",
+  '7z': "/zip.svg",
+
+  pdf: "/pdf.svg",
+  docx: "/word.svg",
+
+  mp3: "/mp3-4.svg",
+  mp4: "/mp3-4.svg",
+
+  jpg: "/img.svg",
+  jpeg: "/img.svg",
+  png: "/img.svg",
+  svg: "/img.svg",
+  webp: "/img.svg"
+}
+
+const downloadFile = (file) => {
+  const link = document.createElement('a');
+  link.href = file.url;
+  link.download = file.download;
+  link.click();
+};
+
+const getFileExtension = (fileName) => {
+  return fileName.split('.').pop()
+};
+
+</script>

src/stories/downloadFiles.stories.js

@@ -0,0 +1,52 @@
+import downloadFile from '../runtime/components/Parts/files/downloadFiles.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+export default {
+  title: 'Parts/files/downloadFiles',
+  component: downloadFile,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'String' },
+    positionTitle: {
+      control: 'radio',
+      options: ['start', 'center', 'end']
+    },
+    files: { type: Array }
+  },
+};
+
+export const Download = {
+  render: (args) => ({
+    components: { downloadFile },
+    setup() {
+      console.log(args)
+      return { args };
+    },
+    template:`<downloadFile v-bind="args">
+      <template v-if="${'buttonSlot' in args}" v-slot:button>
+        ${args.buttonSlot}
+      </template>
+      </downloadFile>`
+  }),
+  args: {
+    title: "Наши отчеты",
+    positionTitle: 'center',
+    buttonSlot: `<v-btn size="large" class="mt-12">MEDIUM BUTTON</v-btn>`,
+    files: [
+      {title: 'Картинка указана', img: 'logo.svg', download: '15сабақ.png', size: '123 KB', alt: '', date: '20.02.22'},
+      {title: 'Картинка не указана ', download: '2.png', size: '123 KB', alt: '', date: '20.02.22'},
+      {title: 'Картинка не указана ', download: '3.mp3', size: '123 Kb', alt: ''},
+      {title: 'Картинка не указана ', download: '4.zip', date: '20.02.22', alt: ''},
+      {title: 'Картинка не указана ', download: '4.docx', alt: ''},
+      {title: 'Картинка не указана ', download: '5.xlsx', alt: ''},
+      {title: 'Картинка не указана ', download: '6.pdf', alt: ''},
+    ]
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/UmrBZaCGhezw0qx9xuq7Xf/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?node-id=1%3A166&mode=dev",
+    },
+  },
+}
+