|
| 1 | +<script setup lang="ts"> |
| 2 | +import { computed, onMounted, ref, shallowRef } from 'vue' |
| 3 | +
|
| 4 | +const props = withDefaults( |
| 5 | + defineProps<{ |
| 6 | + items: Array<any> |
| 7 | + filter?: (item: any) => boolean |
| 8 | + cardComponent: any |
| 9 | + showLinkToAll?: boolean |
| 10 | + shuffleItems?: boolean |
| 11 | + browseLinkText?: string |
| 12 | + browseLinkUrl?: string |
| 13 | + splitBy?: string |
| 14 | + }>(), |
| 15 | + { |
| 16 | + showLinkToAll: false, |
| 17 | + shuffleItems: false, |
| 18 | + splitBy: 'platinum' |
| 19 | + } |
| 20 | +) |
| 21 | +
|
| 22 | +const isMounted = ref(false) |
| 23 | +const items = shallowRef([...props.items]) |
| 24 | +
|
| 25 | +const filteredItems = computed(() => |
| 26 | + props.filter ? items.value.filter(props.filter) : items.value |
| 27 | +) |
| 28 | +
|
| 29 | +onMounted(() => { |
| 30 | + isMounted.value = true |
| 31 | + items.value = processItems([...items.value], props.splitBy, props.shuffleItems) |
| 32 | +}) |
| 33 | +
|
| 34 | +function processItems(items: Array<any>, splitBy: string, shouldShuffle: boolean) { |
| 35 | + const splitItems = items.filter(item => item[splitBy]) |
| 36 | + const otherItems = items.filter(item => !item[splitBy]) |
| 37 | +
|
| 38 | + if (shouldShuffle) { |
| 39 | + shuffleArray(splitItems) |
| 40 | + shuffleArray(otherItems) |
| 41 | + } |
| 42 | +
|
| 43 | + return [...splitItems, ...otherItems] |
| 44 | +} |
| 45 | +
|
| 46 | +function shuffleArray(array: Array<any>) { |
| 47 | + for (let i = array.length - 1; i > 0; i--) { |
| 48 | + const j = Math.floor(Math.random() * (i + 1)); // don't remove semicolon |
| 49 | + [array[i], array[j]] = [array[j], array[i]] |
| 50 | + } |
| 51 | +} |
| 52 | +</script> |
| 53 | + |
| 54 | +<template> |
| 55 | + <div v-show="isMounted" class="card-list"> |
| 56 | + <!-- to skip SSG since the partners are shuffled --> |
| 57 | + <ClientOnly> |
| 58 | + <component |
| 59 | + :is="cardComponent" |
| 60 | + v-for="item in filteredItems" |
| 61 | + :key="item.id || item.name" |
| 62 | + :data="item" |
| 63 | + /> |
| 64 | + </ClientOnly> |
| 65 | + |
| 66 | + <a |
| 67 | + v-if="showLinkToAll && filteredItems.length % 2" |
| 68 | + :href="browseLinkUrl" |
| 69 | + class="browse-all-link" |
| 70 | + > |
| 71 | + {{ browseLinkText }} |
| 72 | + </a> |
| 73 | + </div> |
| 74 | +</template> |
| 75 | + |
| 76 | +<style scoped> |
| 77 | +.card-list { |
| 78 | + display: flex; |
| 79 | + flex-wrap: wrap; |
| 80 | + justify-content: space-between; |
| 81 | +} |
| 82 | +
|
| 83 | +.browse-all-link { |
| 84 | + display: block; |
| 85 | + width: 48.5%; |
| 86 | + margin-bottom: 36px; |
| 87 | + padding-top: 240px; |
| 88 | + font-size: 1.2em; |
| 89 | + text-align: center; |
| 90 | + color: var(--vt-c-text-2); |
| 91 | + border: 1px solid var(--vt-c-divider-light); |
| 92 | + border-radius: 4px; |
| 93 | + transition: color 0.5s ease; |
| 94 | +} |
| 95 | +
|
| 96 | +.browse-all-link:hover { |
| 97 | + color: var(--vt-c-text-1); |
| 98 | +} |
| 99 | +
|
| 100 | +@media (max-width: 768px) { |
| 101 | + .browse-all-link { |
| 102 | + display: none; |
| 103 | + } |
| 104 | +} |
| 105 | +</style> |
0 commit comments