fix: FileItem display

This commit is contained in:
axolotle 2024-03-19 01:18:01 +01:00
parent 620694c42d
commit c730de8b32

View file

@ -1,13 +1,15 @@
<template> <template>
<BButtonGroup class="w-100"> <BInputGroup class="w-100">
<BButton <template #append>
v-if="!this.required && this.modelValue.file !== null" <BButton
@click="clearFiles" v-if="!this.required && this.modelValue.file !== null"
variant="danger" @click="clearFiles"
> variant="danger"
<span class="sr-only">{{ $t('delete') }}</span> >
<YIcon iname="trash" /> <span class="sr-only">{{ $t('delete') }}</span>
</BButton> <YIcon iname="trash" />
</BButton>
</template>
<BFormFile <BFormFile
:modelValue="modelValue.file" :modelValue="modelValue.file"
@ -23,7 +25,7 @@
@blur="touch(name)" @blur="touch(name)"
@focusout="touch(name)" @focusout="touch(name)"
/> />
</BButtonGroup> </BInputGroup>
</template> </template>
<script> <script>
@ -38,7 +40,7 @@ export default {
modelValue: { type: Object, default: () => ({ file: null }) }, modelValue: { type: Object, default: () => ({ file: null }) },
placeholder: { type: String, default: 'Choose a file or drop it here...' }, placeholder: { type: String, default: 'Choose a file or drop it here...' },
dropPlaceholder: { type: String, default: null }, dropPlaceholder: { type: String, default: null },
accept: { type: String, default: null }, accept: { type: String, default: '' },
state: { type: Boolean, default: null }, state: { type: Boolean, default: null },
required: { type: Boolean, default: false }, required: { type: Boolean, default: false },
name: { type: String, default: null }, name: { type: String, default: null },
@ -89,6 +91,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// fix https://getbootstrap.com/docs/5.2/migration/#forms
:deep(.custom-file-label) { :deep(.custom-file-label) {
color: $input-placeholder-color; color: $input-placeholder-color;