kjh2064
c41e5063b7
Removed entire kbx-foundation-v36 directory as it's been replaced by the new KBX Foundation v4 patterns implemented in this session: - Registry-driven screen definitions - Density-aware UI adapter components - Feature module templates (ShadowRun, Models) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
32 lines
1.5 KiB
Vue
32 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import type { KbxImportProgressEvent } from '@kbx/contracts'
|
|
|
|
const props = defineProps<{ progress: KbxImportProgressEvent | null }>()
|
|
const width = computed(() => `${Math.min(100, Math.max(0, props.progress?.progressPercent ?? 0))}%`)
|
|
</script>
|
|
|
|
<template>
|
|
<section v-if="progress" class="kbx-job-progress" aria-live="polite">
|
|
<header>
|
|
<strong>{{ progress.message ?? '처리 중' }}</strong>
|
|
<span>{{ progress.progressPercent }}%</span>
|
|
</header>
|
|
<div class="track"><div class="bar" :style="{ width }" /></div>
|
|
<div class="counts">
|
|
<span>처리 {{ progress.processedRows.toLocaleString() }} / {{ progress.totalRows.toLocaleString() }}</span>
|
|
<span>정상 {{ progress.validRows.toLocaleString() }}</span>
|
|
<span v-if="progress.invalidRows">오류 {{ progress.invalidRows.toLocaleString() }}</span>
|
|
<span v-if="progress.warningRows">경고 {{ progress.warningRows.toLocaleString() }}</span>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.kbx-job-progress { border:1px solid var(--kbx-color-border); background:var(--kbx-color-surface); padding:12px; }
|
|
.kbx-job-progress header, .counts { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
|
|
.track { margin:10px 0; height:8px; background:var(--kbx-color-surface-muted); border-radius:4px; overflow:hidden; }
|
|
.bar { height:100%; background:var(--kbx-color-primary); transition:width .18s ease; }
|
|
.counts { justify-content:flex-start; color:var(--kbx-color-text-muted); flex-wrap:wrap; }
|
|
</style>
|