104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
<template>
|
|
<div class="mb-4">
|
|
<div v-if="label" class="text-xs text-ink-gray-5 mb-2">
|
|
{{ __(label) }}
|
|
<span v-if="required" class="text-ink-red-3">*</span>
|
|
</div>
|
|
<FileUploader
|
|
v-if="!modelValue"
|
|
:fileTypes="[fileType]"
|
|
:validateFile="(file: File) => validateFile(file, true, type)"
|
|
@success="(file: File) => saveFile(file)"
|
|
>
|
|
<template v-slot="{ file, progress, uploading, openFileSelector }">
|
|
<div class="flex items-center">
|
|
<div class="border rounded-md w-fit py-7 px-20">
|
|
<component
|
|
:is="props.type === 'image' ? Image : Video"
|
|
class="size-5 stroke-1 text-ink-gray-7"
|
|
/>
|
|
</div>
|
|
<div class="ml-4">
|
|
<Button @click="openFileSelector">
|
|
{{ __('Upload') }}
|
|
</Button>
|
|
<div class="mt-1 text-ink-gray-5 text-sm leading-5">
|
|
{{ __(description) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</FileUploader>
|
|
<div v-else class="mb-4">
|
|
<div class="flex items-center">
|
|
<img
|
|
v-if="type == 'image'"
|
|
:src="modelValue"
|
|
:class="[
|
|
'border object-cover',
|
|
shape === 'circle'
|
|
? 'w-20 h-20 rounded-full'
|
|
: 'w-44 h-auto min-h-20 max-h-32 rounded-md',
|
|
]"
|
|
/>
|
|
<video v-else controls class="border rounded-md w-44 h-auto">
|
|
<source :src="modelValue" />
|
|
{{ __('Your browser does not support the video tag.') }}
|
|
</video>
|
|
<div class="ml-4">
|
|
<Button @click="removeImage()">
|
|
{{ __('Remove') }}
|
|
</Button>
|
|
<div
|
|
v-if="description"
|
|
class="mt-2 text-ink-gray-5 text-sm leading-5"
|
|
>
|
|
{{ __(description) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { validateFile } from '@/utils'
|
|
import { Button, FileUploader } from 'frappe-ui'
|
|
import { Image, Video } from 'lucide-vue-next'
|
|
import { computed } from 'vue'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void
|
|
}>()
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue: string | null
|
|
label?: string
|
|
description?: string
|
|
type?: 'image' | 'video'
|
|
required?: boolean
|
|
shape?: 'square' | 'circle'
|
|
}>(),
|
|
{
|
|
modelValue: '',
|
|
label: '',
|
|
description: '',
|
|
type: 'image',
|
|
required: true,
|
|
shape: 'square',
|
|
}
|
|
)
|
|
|
|
const fileType = computed(() => {
|
|
return props.type === 'image' ? 'image/*' : 'video/*'
|
|
})
|
|
|
|
const saveFile = (file: any) => {
|
|
emit('update:modelValue', file.file_url)
|
|
}
|
|
|
|
const removeImage = () => {
|
|
emit('update:modelValue', '')
|
|
}
|
|
</script>
|