<script setup lang="ts">
import type { KbxAuditEntry } from '@kbx/contracts'; defineProps<{entries:KbxAuditEntry[]}>()
</script>
<template><section class="kbx-audit" aria-label="변경이력"><div v-if="!entries.length" class="kbx-audit__empty">변경이력이 없습니다.</div><article v-for="entry in entries" :key="entry.id" class="kbx-audit__entry"><header><strong>{{entry.actor.displayName}}</strong><time>{{entry.occurredAt}}</time><span>{{entry.action}}</span></header><dl v-if="entry.changes?.length"><template v-for="c in entry.changes" :key="c.field"><dt>{{c.label}}</dt><dd><span>{{c.before ?? '-'}}</span><b aria-hidden="true">→</b><span>{{c.after ?? '-'}}</span></dd></template></dl><p v-if="entry.reason">사유: {{entry.reason}}</p></article></section></template>
<style scoped>.kbx-audit{display:grid;gap:var(--kbx-space-3)}.kbx-audit__entry{padding-bottom:var(--kbx-space-3);border-bottom:1px solid var(--kbx-color-border)}header{display:flex;gap:var(--kbx-space-2);align-items:center;font-size:var(--kbx-font-sm)}time{color:var(--kbx-color-text-muted)}dl{display:grid;grid-template-columns:120px 1fr;gap:4px 8px;margin:8px 0}dt{font-weight:500}dd{margin:0;display:flex;gap:8px}.kbx-audit p,.kbx-audit__empty{font-size:var(--kbx-font-sm);color:var(--kbx-color-text-muted)}</style>
