51 lines
1.5 KiB
Vue
51 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import BasicInputFile from './BasicInputFile.vue'
|
|
|
|
defineProps<{
|
|
accept?: string
|
|
multiple?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<BasicInputFile
|
|
:class="[
|
|
'min-h-[120px] flex flex-col cursor-pointer items-center justify-center rounded-xl p-6',
|
|
'border-dashed border-2',
|
|
'transition-all duration-300',
|
|
'opacity-95',
|
|
'hover:scale-100 hover:opacity-100 hover:shadow-md hover:dark:shadow-lg',
|
|
]"
|
|
:is-not-dragging-classes="[
|
|
'border-neutral-200 dark:border-neutral-700 hover:border-primary-300 dark:hover:border-primary-700',
|
|
'bg-white/60 dark:bg-black/30 hover:bg-white/80 dark:hover:bg-black/40',
|
|
]"
|
|
:is-dragging-classes="[
|
|
'border-primary-400 dark:border-primary-600 hover:border-primary-300 dark:hover:border-primary-700',
|
|
'bg-primary-50/5 dark:bg-primary-900/5',
|
|
]"
|
|
:accept="accept"
|
|
:multiple="multiple"
|
|
>
|
|
<template #default="{ isDragging }">
|
|
<div
|
|
class="flex flex-col items-center"
|
|
:class="[
|
|
isDragging ? 'text-primary-500 dark:text-primary-400' : 'text-neutral-400 dark:text-neutral-500',
|
|
]"
|
|
>
|
|
<div i-solar:upload-square-line-duotone mb-2 text-5xl />
|
|
<p font-medium text="center lg">
|
|
Upload
|
|
</p>
|
|
<p v-if="isDragging" text="center" text-sm>
|
|
Release to upload
|
|
</p>
|
|
<p v-else text="center" text-sm>
|
|
Click or drag and drop a file here
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</BasicInputFile>
|
|
</template>
|