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

refactor: Some improvements for File input component

Browse Source
This commit is contained in:
Ilya Artamonov
2023-07-15 22:06:26 +03:00
parent 3501e946d3
commit 2490053dd5
7 changed files with 91 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/components/fileInput/examples/FileInpDefault.vue
View File

@@ -8,6 +8,5 @@
import FileInput from '../../../../src/components/FileInput/FileInput.vue'
import { ref } from 'vue'
const file = ref()
const file = ref(null)
</script>

6
docs/components/fileInput/examples/FileInpDropZone.vue
View File

@@ -1,8 +1,6 @@
<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>
<p class="!mt-1 text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
</FileInput>
</template>
@@ -10,5 +8,5 @@
import FileInput from '../../../../src/components/FileInput/FileInput.vue'
import { ref } from 'vue'
const file = ref('')
const file = ref(null)
</script>

4
docs/components/fileInput/examples/FileInpHelper.vue
View File

@@ -1,7 +1,7 @@
<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>
<p class="!mt-1 text-sm text-gray-500 dark:text-gray-300">SVG, PNG, JPG or GIF (MAX. 800x400px).</p>
</FileInput>
</div>
</template>
@@ -10,5 +10,5 @@
import FileInput from '../../../../src/components/FileInput/FileInput.vue'
import { ref } from 'vue'
const file = ref('')
const file = ref(null)
</script>

11
docs/components/fileInput/examples/FileInpSize.vue
View File

@@ -1,12 +1,13 @@
<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 class="flex flex-col gap-5">
<FileInput size="xs" v-model="file" label="Small size" />
<FileInput size="sm" v-model="file" label="Default size" />
<FileInput size="lg" v-model="file" label="Large size" />
</div>
</template>
<script setup>
import FileInput from '../../../../src/components/FileInput/FileInput.vue'
import { ref } from 'vue'
const file = ref(null)
</script>

30
docs/components/fileInput/examples/MultipleFile.vue
View File

@@ -1,19 +1,17 @@
<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>
<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" :key="file">
{{ file.name }}
</div>
</div>
</template>
<script setup>
import FileInput from '../../../../src/components/FileInput/FileInput.vue'
import { ref } from 'vue'
const files = ref([])
</script>
</div>
</template>
<script setup>
import FileInput from '../../../../src/components/FileInput/FileInput.vue'
import { ref } from 'vue'
const files = ref([])
</script>