| 1 | import { defineComponent } from 'vue';
|
| 2 | import { defaultPropValue, sizePropValidator } from '../../mixins/index.mjs';
|
| 3 | /**
|
| 4 | * Slot for default alert content
|
| 5 | * @name default
|
| 6 | * @kind slot
|
| 7 | */
|
| 8 | /**
|
| 9 | * Slot for alert icon
|
| 10 | * @name icon
|
| 11 | * @kind slot
|
| 12 | */
|
| 13 | /**
|
| 14 | * Slot for alert dismiss button
|
| 15 | * @name dismiss
|
| 16 | * @kind slot
|
| 17 | */
|
| 18 | const componentName = 'IAlert';
|
| 19 | export default defineComponent({
|
| 20 | name: componentName,
|
| 21 | props: {
|
| 22 | /**
|
| 23 | * The size variant of the alert
|
| 24 | * @type sm | md | lg
|
| 25 | * @default md
|
| 26 | * @name size
|
| 27 | */
|
| 28 | size: {
|
| 29 | type: String,
|
| 30 | default: defaultPropValue(componentName, 'size'),
|
| 31 | validator: sizePropValidator
|
| 32 | },
|
| 33 | /**
|
| 34 | * The color variant of the alert
|
| 35 | * @type info | success | warning | danger
|
| 36 | * @default info
|
| 37 | * @name color
|
| 38 | */
|
| 39 | color: {
|
| 40 | type: String,
|
| 41 | default: defaultPropValue(componentName, 'color')
|
| 42 | },
|
| 43 | /**
|
| 44 | * Used to show or hide a dismissible alert
|
| 45 | * @type Boolean
|
| 46 | * @default true
|
| 47 | * @name modelValue
|
| 48 | */
|
| 49 | modelValue: {
|
| 50 | type: Boolean,
|
| 51 | default: true
|
| 52 | },
|
| 53 | /**
|
| 54 | * Shows a dismiss icon on the alert
|
| 55 | * @type Boolean
|
| 56 | * @default false
|
| 57 | * @name dismissible
|
| 58 | */
|
| 59 | dismissible: {
|
| 60 | type: Boolean,
|
| 61 | default: false
|
| 62 | },
|
| 63 | /**
|
| 64 | * The aria-label to use for the dismiss button
|
| 65 | * @type String
|
| 66 | * @default Dismiss
|
| 67 | * @name dismissAriaLabel
|
| 68 | */
|
| 69 | dismissAriaLabel: {
|
| 70 | type: String,
|
| 71 | default: 'Dismiss'
|
| 72 | }
|
| 73 | },
|
| 74 | emits: [
|
| 75 | /**
|
| 76 | * Event emitted for setting the modelValue
|
| 77 | * @event update:modelValue
|
| 78 | */
|
| 79 | 'update:modelValue'
|
| 80 | ],
|
| 81 | data() {
|
| 82 | return {
|
| 83 | dismissed: false
|
| 84 | };
|
| 85 | },
|
| 86 | computed: {
|
| 87 | classes() {
|
| 88 | return {
|
| 89 | [`-${this.color}`]: Boolean(this.color),
|
| 90 | [`-${this.size}`]: Boolean(this.size),
|
| 91 | '-dismissible': this.dismissible,
|
| 92 | '-with-icon': Boolean(this.$slots.icon)
|
| 93 | };
|
| 94 | }
|
| 95 | },
|
| 96 | watch: {
|
| 97 | modelValue(value) {
|
| 98 | this.dismissed = !value;
|
| 99 | }
|
| 100 | },
|
| 101 | methods: {
|
| 102 | dismiss() {
|
| 103 | this.dismissed = true;
|
| 104 | this.$emit('update:modelValue', false);
|
| 105 | }
|
| 106 | }
|
| 107 | });
|
| 108 | //# sourceMappingURL=script.mjs.map |
| \ | No newline at end of file |