100 lines
2.1 KiB
Vue
100 lines
2.1 KiB
Vue
<script setup lang="ts" generic="T">
|
|
defineProps<{
|
|
rows: T[]
|
|
rowKey: (row: T) => string | number
|
|
hasItems: (row: T) => boolean
|
|
labelWidth?: string
|
|
compactOnMobile?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="badge-table">
|
|
<div
|
|
v-for="row in rows"
|
|
:key="rowKey(row)"
|
|
class="badge-row"
|
|
>
|
|
<!-- Label column: consumer provides content -->
|
|
<div
|
|
class="badge-label"
|
|
:class="{ 'badge-label--compact': compactOnMobile }"
|
|
:style="labelWidth ? `width: ${labelWidth}` : ''"
|
|
>
|
|
<slot name="label" :row="row" />
|
|
</div>
|
|
|
|
<!-- Scrollable badge strip -->
|
|
<div class="badge-scroll-container">
|
|
<div v-if="hasItems(row)" class="badge-strip">
|
|
<slot name="items" :row="row" />
|
|
</div>
|
|
<span v-else class="badge-empty">—</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.badge-table {
|
|
width: 100%;
|
|
border: 1px solid var(--table-border);
|
|
border-bottom: none;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.badge-row {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--table-border);
|
|
min-height: 2.5em;
|
|
}
|
|
|
|
.badge-label {
|
|
flex: 0 0 auto;
|
|
width: 21em;
|
|
padding: 0.5em;
|
|
border-right: 1px solid var(--table-border);
|
|
align-self: stretch;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@container (max-width: 480px) {
|
|
.badge-label {
|
|
font-size: 0.75rem;
|
|
width: 9em;
|
|
}
|
|
|
|
.badge-label--compact {
|
|
font-size: 0.7rem;
|
|
width: clamp(6em, 50cqw, 9em);
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.badge-scroll-container {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
-webkit-overflow-scrolling: touch;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.badge-strip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
padding: 0.5em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.badge-empty {
|
|
padding: 0.5em;
|
|
color: var(--muted);
|
|
}
|
|
</style>
|