refactor(ui): CardHeading primitive for icon+title card/dialog headings (DRY pattern sweep)
The icon+title v-card-title heading (d-flex align-center + gap + <v-icon size=small> + <span>) was hand-rolled identically in 13 cards/dialogs (15 heading instances). Consolidate to <CardHeading icon title> (components/common) with an iconColor prop (error headings) and a default slot for trailing content (spacer+actions, inline status chip). Adopted everywhere the pattern appears — all-or-nothing per the hardened DRY process. Over-DRY guard: plain text-only <v-card-title> one-liners are NOT this pattern and stay; DownloadDetailModal leads with a status CHIP (not an icon), a different concept, left alone. §8b: the only remaining d-flex align-center v-card-title is that intentional variant. Catalog updated. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title class="d-flex align-center" style="gap: 12px;">
|
||||
<span>Recent import tasks</span>
|
||||
<CardHeading title="Recent import tasks">
|
||||
<v-spacer />
|
||||
<v-select
|
||||
v-model="statusFilter" :items="statusOptions" density="compact"
|
||||
@@ -29,7 +28,7 @@
|
||||
>
|
||||
Clear completed…
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
</CardHeading>
|
||||
<v-data-table-virtual
|
||||
:headers="headers" :items="store.tasks" :loading="store.tasksLoading"
|
||||
height="480" density="compact" no-data-text="No tasks yet — trigger a scan above."
|
||||
@@ -129,6 +128,7 @@ import { toast } from '../../utils/toast.js'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useImportStore } from '../../stores/import.js'
|
||||
import ErrorDetailModal from '../common/ErrorDetailModal.vue'
|
||||
import CardHeading from '../common/CardHeading.vue'
|
||||
|
||||
const store = useImportStore()
|
||||
const statusFilter = ref(null)
|
||||
|
||||
Reference in New Issue
Block a user