eCourt-Doc-Edit/web/app/components/AlertBox.vue

<script setup lang="ts">
/** กล่องข้อความ (error/success/info) ใช้ร่วมทุกหน้า */
const props = withDefaults(
  defineProps<{
    type?: 'error' | 'success' | 'info'
  }>(),
  { type: 'info' },
)

const styles = computed(() => {
  switch (props.type) {
    case 'error':
      return 'alert-error'
    case 'success':
      return 'alert-success'
    default:
      return 'alert-info'
  }
})
const icon = computed(() => (props.type === 'error' ? '⚠️' : props.type === 'success' ? '✅' : 'ℹ️'))
</script>

<template>
  <div role="alert" class="alert" :class="styles">
    <span class="mr-2" aria-hidden="true">{{ icon }}</span>
    <slot />
  </div>
</template>