PronounsPage/components/ExpandableList.vue

<template>
    <ul>
        <li v-for="(el, i) in values">
            <template v-if="allShown || i < showLimit">
                <slot v-bind:el="el" v-bind:i="i">
                    {{ el }}
                </slot>
            </template>
        </li>
        <li v-if="!allShown && hiddenCount > 0" class="small">
            <span v-if="static">
                <Icon v="plus-circle"/>
                <T :params="{count: hiddenCount}">profile.expendableList.more</T>
            </span>
            <a v-else href="#" @click.prevent="allShown = true">
                <Icon v="plus-circle"/>
                <T :params="{count: hiddenCount}">profile.expendableList.more</T>
                <br/>
                <Icon v="spacer"/>
                <T>profile.expendableList.show</T>
            </a>
        </li>
    </ul>
</template>

<script>
export default {
    props: {
        values: { required: true },
        limit: { required: true },
        static: { type: Boolean },
        expand: { type: Boolean },
    },
    data() {
        let showLimit = this.values.length;
        let hiddenCount = 0;

        if (this.values.length > this.limit) {
            showLimit = this.limit;
            hiddenCount = this.values.length - this.limit;
        }
        if (hiddenCount === 1) {
            showLimit--;
            hiddenCount++;
        }

        return {
            allShown: this.expand,
            showLimit,
            hiddenCount,
        }
    },
    watch: {
        expand(v) {
            if (v) {
                this.allShown = true;
            }
        },
    },
}
</script>