PronounsPage/components/ImageWidget.vue

<template>
    <div class="form-group">
        <draggable
            v-model="images"
            tag="ul"
            handle="img"
            ghost-class="ghost"
            class="list-unstyled"
            @end="$emit('input', images)"
        >
            <li v-for="image in images" class="mb-4">
                <ImageThumb :id="image" :small-size="smallSize" :big-size="bigSize" />
                <a href="#" class="small" @click.prevent="removeFile(image)">
                    <Icon v="trash" />
                    <T>crud.remove</T>
                </a>
            </li>
        </draggable>
        <ImageUploader :multiple="multiple" :name="name" form :sizes="sizes" @uploaded="addFiles" />
    </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
    components: {
        draggable,
    },
    props: {
        value: {},
        multiple: { type: Boolean },
        name: { default: 'images' },
        sizes: { default: 'all' },
        smallSize: { default: 'thumb' },
        bigSize: { default: 'big' },
    },
    data() {
        return {
            images: this.value,
        };
    },
    watch: {
        value() {
            this.images = this.value;
        },
    },
    methods: {
        addFiles(files) {
            this.$emit('input', [...this.images, ...files]);
        },
        async removeFile(id) {
            await this.$confirm(this.$t('crud.removeConfirm'), 'danger');
            this.$emit('input', this.images.filter((i) => i !== id));
        },
    },
};
</script>