-
Notifications
You must be signed in to change notification settings - Fork 1
/
Alert.vue
71 lines (56 loc) · 1.95 KB
/
Alert.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<template>
<div
ref="alert"
class="alert"
:class="classes"
>
<!-- @slot Displays content inside the alert -->
<slot />
</div>
</template>
<script lang="ts">
import {computed, ref} from 'vue';
import useBootstrapEmits from '@/composables/useBootstrapEmits';
import useBootstrapInstance from '@/composables/useBootstrapInstance';
import useClasses from '@/composables/useClasses';
import useVariant from '@/composables/useVariant';
import {variantProps} from '@/composables/useVariant';
const alertEvents = ['close', 'closed'] as const;
type AlertEvent = typeof alertEvents[number];
</script>
<script lang="ts" setup>
const props = defineProps(variantProps);
const emit = defineEmits<{(event: AlertEvent): void}>();
const alert = ref<HTMLElement>();
useBootstrapEmits(
alert,
alertEvents,
emit,
'alert',
);
const {bsInstance: bsAlert} = useBootstrapInstance(
'Alert',
alert,
);
const {classes} = useClasses(computed(() => [
useVariant(props.variant, 'alert-{0}').variantClass.value,
]));
defineExpose({bsAlert});
</script>
<docs>
```vue
<Alert variant="danger">
Something went wrong!
</Alert>
```
## Imported Props
| Prop name | Description | Type | Values | Default |
| --------- | ---------------------------- | ------------------------------------------------ | ------ | --------- |
| variant | The variant of the component | [Variant](../../composables/useVariant) (string) | - | 'primary' |
<!-- TODO Auto-generate based on type? -->
## Events
| Name | Args | Description |
| ------ | ---- | ----------------------------------------------------------------------- |
| close | | Fires immediately when the `close` instance method is called |
| closed | | Fired when the alert has been closed and CSS transitions have completed |
</docs>