28 lines
722 B
Vue
28 lines
722 B
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>
|