bvandeusen
4854d74c5a
The preview sample-name grid (scrollable monospace chip grid) was hand-rolled 5 times with verbatim-duplicated markup + CSS — TagMaintenanceCard (×4) and PostMaintenanceCard. Consolidate to <SampleNameGrid> (components/common): pass :names for the plain case, default slot for the normalize from→to chips (styled via :slotted .fc-name). Removed the duplicated .fc-name-grid/.fc-name CSS from both cards. Over-DRY guard: only the verbatim-duplicated grid is merged — each card's preview/commit logic and result-count lines genuinely differ and stay put; MinDimensionCard's typed-token confirm is a separate variant, untouched. §8b: fc-name-grid now lives only in SampleNameGrid. Catalog updated. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
33 lines
1005 B
Vue
33 lines
1005 B
Vue
<template>
|
|
<!-- Scrollable grid of monospace name chips — the preview "here's a sample of
|
|
what will change" surface shared by the maintenance cards (DRY pattern
|
|
sweep 2026-06-09). Pass `names` for the common case; use the default slot
|
|
to render custom chips (style them `.fc-name` and they inherit the look
|
|
via :slotted). The caller keeps its own v-if for the empty case. -->
|
|
<div class="fc-name-grid">
|
|
<slot>
|
|
<span v-for="(n, i) in names" :key="i" class="fc-name">{{ n }}</span>
|
|
</slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
names: { type: Array, default: () => [] },
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-name-grid {
|
|
display: flex; flex-wrap: wrap; gap: 4px 8px;
|
|
max-height: 200px; overflow-y: auto;
|
|
padding: 8px; border-radius: 4px;
|
|
background: rgb(var(--v-theme-surface-light));
|
|
}
|
|
.fc-name, :slotted(.fc-name) {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 12px;
|
|
color: rgb(var(--v-theme-on-surface-variant));
|
|
}
|
|
</style>
|