PronounsPage/components/ImageWidgetRich.vue

<template>
    <div class="form-group">
        <draggable
            v-model="images"
            tag="ul"
            handle=".handle"
            ghost-class="ghost"
            class="list-unstyled"
            @end="$emit('input', images)"
        >
            <li v-for="(image, i) in images" class="mb-4">
                <div class="input-group mb-1">
                    <button class="btn btn-light border handle" type="button" :aria-label="$t('table.sort')">
                        <Icon v="bars" />
                    </button>
                    <ImageThumb :id="images[i].value" small-size="flag" big-size="flag" size="2.4em" />
                    <input
                        v-model="images[i].name"
                        type="text"
                        class="form-control"
                        required
                        :maxlength="maxLength"
                        @keyup="update"
                        @change="update"
                    >
                    <button class="btn btn-outline-danger" type="button" :aria-label="$t('crud.remove')" @click.prevent="removeFile(image.value)">
                        <Icon v="times" />
                    </button>
                </div>
            </li>
            <li slot="footer">
                <ImageUploader
                    v-if="maxitems === null || value.length < maxitems"
                    multiple
                    :name="name"
                    form
                    :sizes="sizes"
                    @uploaded="addFiles"
                />
            </li>
            <li v-if="maxitems && value.length > maxitems" class="alert alert-danger">
                <Icon v="exclamation-triangle" />
                <T :params="{ maxlength: maxitems }" class="ml-1">crud.validation.listMaxLength</T>
            </li>
        </draggable>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
import { curry } from '../src/helpers.ts';

export default {
    components: {
        draggable,
    },
    props: {
        value: {},
        name: { default: 'images' },
        maxLength: { default: 24 },
        sizes: { default: 'all' },
        maxitems: { default: null },
    },
    data() {
        return {
            images: this.value,
            curry,
        };
    },
    watch: {
        value() {
            this.images = this.value;
        },
    },
    methods: {
        addFiles(fileIds) {
            this.$emit('input', [...this.images, ...fileIds.map((id) => {
                return { value: id, name: '' };
            })]);
        },
        async removeFile(id) {
            await this.$confirm(this.$t('crud.removeConfirm'), 'danger');
            this.$emit('input', this.images.filter((i) => i.value !== id));
        },
        update() {
            this.$emit('input', this.images);
        },
    },
};
</script>