17 lines
978 B
Vue
17 lines
978 B
Vue
<script setup lang="ts">
|
|
export interface ValidationSummaryError { readonly field?: string; readonly message: string }
|
|
defineProps<{ errors: readonly ValidationSummaryError[]; title?: string }>()
|
|
</script>
|
|
|
|
<template>
|
|
<section v-if="errors.length" class="ks-validation-summary" role="alert" aria-live="assertive">
|
|
<strong>{{ title ?? `저장할 수 없습니다. ${errors.length}개 항목을 확인하세요.` }}</strong>
|
|
<ul><li v-for="(error, index) in errors" :key="`${error.field ?? 'form'}-${index}`">{{ error.message }}</li></ul>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ks-validation-summary { border: 1px solid var(--ks-color-danger); background: color-mix(in srgb, var(--ks-color-danger) 8%, var(--ks-color-surface)); padding: var(--ks-space-2) var(--ks-space-3); border-radius: var(--ks-radius-sm); color: var(--ks-color-neutral-950); }
|
|
strong { color: var(--ks-color-danger); } ul { margin: var(--ks-space-2) 0 0 var(--ks-space-6); padding: 0; }
|
|
</style>
|