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

1
docs/.vitepress/config.ts
View File

@@ -65,6 +65,7 @@ function getComponents() {
function getFormComponents() {
return [
{ text: 'Input', link: 'components/input' },
{ text: 'FileInput', link: 'components/fileInput' },
{ text: 'Checkbox', link: 'components/checkbox' },
{ text: 'Select', link: 'components/select' },
{ text: 'Toggle', link: 'components/toggle' },

103
docs/components/fileInput.md Normal file
View File

@@ -0,0 +1,103 @@
<script setup>
import FileInpDefault from './fileInput/examples/FileInpDefault.vue'
import FileInpHelper from './fileInput/examples/FileInpHelper.vue'
import FileInpSize from './fileInput/examples/FileInpSize.vue'
import FileInpDropZone from './fileInput/examples/FileInpDropZone.vue'
import MultipleFile from './fileInput/examples/MultipleFile.vue'
</script>
# Vue FileInput - Flowbite
#### Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes
:::tip
Original reference: [https://flowbite.com/docs/forms/file-input/](https://flowbite.com/docs/forms/file-input/)
:::
## File upload example
```vue
<template>
<FileInput v-model="file" label="Upload file" />
</template>
<script setup>
import FileInput from 'flowbite-vue'
import { ref } from 'vue'
const file = ref()
</script>
```
<FileInpDefault />
## Multiple File upload
```vue
<template>
<FileInput multiple v-model="file" label="Multiple upload" />
</template>
<script setup>
import FileInput from 'flowbite-vue'
import { ref } from 'vue'
const file = ref([])
</script>
```
<MultipleFile />
## Helper text
```vue
<template>
<FileInput 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>
</template>
<script setup>
import FileInput from 'flowbite-vue'
</script>
```
<FileInpHelper />
## Sizes
```vue
<template>
<div>
<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 'flowbite-vue'
</script>
```
<FileInpSize />
## Dropone
```vue
<template>
<FileInput :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 'flowbite-vue'
</script>
```
<FileInpDropZone />

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>