Alert ​

<template>
  <Alert type="success"
    ><b>Well done!</b> You successfully read this important alert
    message.</Alert
  >
  <Alert type="info"
    ><b>Heads up!</b> This alert needs your attention, but it's not super
    important.</Alert
  >
  <Alert type="warning"
    ><b>Warning!</b> Better check yourself, you're not looking too good.</Alert
  >
  <Alert type="danger"
    ><b>Oh snap!</b> Change this and that and try again.</Alert
  >
</template>

<script setup>
import { Alert } from 'uiv';
</script>

<template>
  <Alert v-if="show" type="warning" dismissible @dismissed="show = false">
    <b>Warning!</b> Better check yourself, you're not looking too good.
  </Alert>
  <Alert
    v-for="(item, index) in alerts"
    :key="item.key"
    dismissible
    @dismissed="alerts.splice(index, 1)"
  >
    <b>Heads up!</b> This alert needs your attention, but it's not super
    important.
  </Alert>
  <hr />
  <Btn type="primary" @click="addDismissibleAlert()">Add Dismissible Alert</Btn>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { Alert, Btn } from 'uiv';

const show = ref(true);
const alerts = reactive([]);

function addDismissibleAlert() {
  alerts.push({ key: new Date().getTime() });
}
</script>

<template>
  <Alert
    v-for="(item, index) in alerts"
    :key="item.key"
    :duration="duration"
    @dismissed="alerts.splice(index, 1)"
  >
    This alert <b>will dismiss after {{ duration }}ms</b>.
  </Alert>
  <hr />
  <Btn type="primary" @click="addAutoDismissAlert()"
    >Add Auto Dismiss Alert</Btn
  >
</template>

<script setup>
import { reactive } from 'vue';
import { Alert, Btn } from 'uiv';

const alerts = reactive([]);
const duration = 2000;

function addAutoDismissAlert() {
  alerts.push({ key: new Date().getTime() });
}
</script>

<template>
  <Btn type="primary" @click="show = !show">Toggle Collapsing Alert</Btn>
  <hr />
  <Collapse v-model="show">
    <Alert type="warning" dismissible @dismissed="show = false"
      >This alert <b>will collapse on open / close</b>.</Alert
    >
  </Collapse>
</template>

<script setup>
import { ref } from 'vue';
import { Alert, Btn, Collapse } from 'uiv';

const show = ref(true);
</script>