67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
interface ItemData {
|
|
data: number
|
|
count: number
|
|
}
|
|
|
|
const props = defineProps<{
|
|
label: string
|
|
items: Array<ItemData>
|
|
itemMap: Map<number, Item>
|
|
totalCount: number
|
|
maxItems?: number
|
|
}>()
|
|
|
|
const maxItems = computed(() => props.maxItems ?? props.items.length)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="item-row">
|
|
<span class="item-row-label">{{ label }}</span>
|
|
<div class="item-row-content">
|
|
<template v-for="item in items.slice(0, maxItems)" :key="item.data">
|
|
<ItemIcon
|
|
v-if="itemMap.get(item.data)"
|
|
:item="itemMap.get(item.data)!"
|
|
:show-pickrate="true"
|
|
:pickrate="item.count / totalCount"
|
|
:size="48"
|
|
class="item-cell"
|
|
/>
|
|
<div v-else class="item-placeholder" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.item-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.item-row-label {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--color-on-surface);
|
|
opacity: 0.6;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.item-row-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.item-placeholder {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--color-surface);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--color-on-surface);
|
|
}
|
|
</style>
|