15 lines
917 B
Vue
15 lines
917 B
Vue
<script setup lang="ts">
|
|
import type { KbxValidationError } from '@kbx/contracts'
|
|
defineProps<{ errors: KbxValidationError[] }>()
|
|
</script>
|
|
<template>
|
|
<div v-if="errors.length" class="kbx-validation-summary" role="alert">
|
|
<strong>저장할 수 없습니다. {{ errors.length }}개 항목을 확인하세요.</strong>
|
|
<ul><li v-for="(error, i) in errors.slice(0,5)" :key="`${error.field}-${error.rowKey}-${i}`">{{ error.message }}</li></ul>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.kbx-validation-summary{border:var(--kbx-border-width) solid var(--kbx-color-danger-border);background:var(--kbx-color-danger-surface);padding:var(--kbx-space-2) var(--kbx-space-3);border-radius:var(--kbx-radius-sm);font-size:var(--kbx-font-sm);color:var(--kbx-color-text)}
|
|
.kbx-validation-summary strong{color:var(--kbx-color-danger)}.kbx-validation-summary ul{margin:var(--kbx-space-1) 0 0 var(--kbx-space-5);padding:0}
|
|
</style>
|