refactor: clean up ImageUploader component and improve label handling
This commit is contained in:
parent
a52bfee98d
commit
e19f750831
@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<FileUploader
|
<FileUploader
|
||||||
:file-types="image_type"
|
:file-types="image_type"
|
||||||
class="text-base"
|
|
||||||
@success="
|
@success="
|
||||||
(file) => {
|
(file) => {
|
||||||
$emit('upload', file.file_url)
|
$emit('upload', file.file_url)
|
||||||
@ -10,21 +9,28 @@
|
|||||||
>
|
>
|
||||||
<template v-slot="{ progress, uploading, openFileSelector }">
|
<template v-slot="{ progress, uploading, openFileSelector }">
|
||||||
<div class="flex items-end space-x-1">
|
<div class="flex items-end space-x-1">
|
||||||
<Button @click="openFileSelector">
|
<Button
|
||||||
{{
|
@click="openFileSelector"
|
||||||
|
:iconLeft="uploading ? 'cloud-upload' : ImageUpIcon"
|
||||||
|
:label="
|
||||||
uploading
|
uploading
|
||||||
? `Uploading ${progress}%`
|
? __('Uploading {0}%', [progress])
|
||||||
: image_url
|
: image_url
|
||||||
? 'Change'
|
? __('Change')
|
||||||
: 'Upload'
|
: __('Upload')
|
||||||
}}
|
"
|
||||||
</Button>
|
/>
|
||||||
<Button v-if="image_url" @click="$emit('remove')">Remove</Button>
|
<Button
|
||||||
|
v-if="image_url"
|
||||||
|
:label="__('Remove')"
|
||||||
|
@click="$emit('remove')"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</FileUploader>
|
</FileUploader>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import ImageUpIcon from '~icons/lucide/image-up'
|
||||||
import { FileUploader, Button } from 'frappe-ui'
|
import { FileUploader, Button } from 'frappe-ui'
|
||||||
|
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
@ -33,10 +39,6 @@ const prop = defineProps({
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'image/*',
|
default: 'image/*',
|
||||||
},
|
},
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['upload', 'remove'])
|
const emit = defineEmits(['upload', 'remove'])
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user