CollapsibleChips.vue

<script setup lang="ts">


interface item {
    title: string;
    href?: string | undefined
}

export interface Props {
    items: item[];
    itemsToDisplay?: number;
}

const props = withDefaults(defineProps<Props>(), {
    items: () => [],
    itemsToDisplay: 1,

});


const show = ref(false);


</script>
<template>
    <!-- class="d-inline-flex justify-start align-center" -->

    <span v-if="show" class="d-flex flex-wrap align-center justify-start">
        <template v-if="items.length > itemsToDisplay">
            <template v-for="item in items" :key="item.title">
                <v-chip :href="item?.href" :target="item?.href === undefined ? item?.href : '_blank'" color="info"
                    class="mr-1 my-1 align-self-center" size="small">
                    {{ item.title }}
                </v-chip>
            </template>
        </template>
        <v-btn v-if="itemsToDisplay < items.length" variant="text" :icon="'mdi-chevron-up'" @click="show = !show"></v-btn>
    </span>
    <span v-else class="d-flex flex-wrap align-center justify-start">
        <template v-for="(item, index) in items" :key="item.title">
            <v-chip v-if="index < itemsToDisplay || itemsToDisplay < 0 || items.length - itemsToDisplay === 1"  :href="item?.href"
                :target="item?.href === undefined ? item?.href : '_blank'" color="info" class="mr-1 my-1 align-self-center"
                size="small">
                {{ item.title }}
            </v-chip>
            <template v-if="index === itemsToDisplay && items.length - itemsToDisplay > 1">
                <v-chip v-if="!show" variant="text" class="text-grey text-caption align-self-center px-1"
                    @click="show = !show">
                    (+{{ items.length - itemsToDisplay }} others)
                </v-chip>
                <v-btn v-if="itemsToDisplay < items.length && !show" variant="text" :icon="'mdi-chevron-down'"
                    @click="show = !show"></v-btn>
            </template>
        </template>

    </span>
</template>