jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(component): new file-input component (#166)

Browse Source 
* file input field

* input file

* empty lines

* dropzone value update

* dropzone value update

* fix drag and drop

* Update docs/components/fileInput.md

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

* Update docs/components/fileInput/examples/FileInpDropZone.vue

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

* Update src/components/FileInput/FileInput.vue

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

* Update src/components/FileInput/FileInput.vue

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

* Update src/components/FileInput/FileInput.vue

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

* Update src/components/FileInput/FileInput.vue

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

* multiple files and file type

---------

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>
This commit is contained in:
Vasu Singh
2023-07-15 22:35:41 +05:30
committed by GitHub
parent 960a318ca6
commit 3501e946d3
10 changed files with 311 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/components/fileInput/examples/FileInpDefault.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div>
<FileInput v-model="file" label="Upload file" />
</div>
</template>
<script setup>
import FileInput from '../../../../src/components/FileInput/FileInput.vue'
import { ref } from 'vue'
const file = ref()
</script>

14
docs/components/fileInput/examples/FileInpDropZone.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<FileInput v-model="file" :dropzone="true">
<p class="!mt-1 text-xs text-gray-500 dark:text-gray-400">
SVG, PNG, JPG or GIF (MAX. 800x400px)
</p>
</FileInput>
</template>
<script setup>
import FileInput from '../../../../src/components/FileInput/FileInput.vue'
import { ref } from 'vue'
const file = ref('')
</script>

14
docs/components/fileInput/examples/FileInpHelper.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div>
<FileInput v-model="file" label="Upload file">
<p class='!mt-1 text-sm text-gray-500 dark:text-gray-300'>SVG, PNG, JPG or GIF (MAX. 800x400px).</p>
</FileInput>
</div>
</template>
<script setup>
import FileInput from '../../../../src/components/FileInput/FileInput.vue'
import { ref } from 'vue'
const file = ref('')
</script>

12
docs/components/fileInput/examples/FileInpSize.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class='flex flex-col gap-5'>
<FileInput size="xs" label="Small size" />
<FileInput size="sm" label="Default size" />
<FileInput size="lg" label="Large size" />
</div>
</template>
<script setup>
import FileInput from '../../../../src/components/FileInput/FileInput.vue'
</script>

19
docs/components/fileInput/examples/MultipleFile.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div>
<FileInput multiple v-model="files" label="Upload file" />
<div class="mt-4 -mb-7 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md" v-if="files.length !== 0">
<div v-for="file in files" :id="file">
{{ file.name }}
</div>
</div>
</div>
</template>
<script setup>
import FileInput from '../../../../src/components/FileInput/FileInput.vue'
import { ref } from 'vue'
const files = ref([])
</script>