Notification ​

<template>
  <Btn type="primary" @click="notify">Simplest Notification</Btn>
  <Btn type="primary" @click="notify2">No Auto-dismiss Notification</Btn>
</template>

<script setup>
import { Notification, Btn } from 'uiv';

// example with callback
// pass a String as the notification content
function notify() {
  Notification.notify('This is a simple notify msg.', () => {
    // callback after dismissed
    console.log('dismissed');
  });
}

// example with Promise and options
function notify2() {
  Notification.notify({
    title: 'Title',
    content: 'This notification will not dismiss automatically.',
    duration: 0,
  }).then(() => {
    // resolve after dismissed
    console.log('dismissed');
  });
}
</script>

<template>
  <Btn type="info" @click="info">Info</Btn>
  <Btn type="success" @click="success">Success</Btn>
  <Btn type="warning" @click="warning">Warning</Btn>
  <Btn type="danger" @click="danger">Danger</Btn>
</template>

<script setup>
import { Notification, Btn } from 'uiv';

function info() {
  Notification.notify({
    type: 'info',
    title: 'Heads up!',
    content: "This alert needs your attention, but it's not super important.",
  });
}

function success() {
  Notification.notify({
    type: 'success',
    title: 'Well done!',
    content: 'You successfully read this important alert message.',
  });
}

function warning() {
  // simple warning with content only
  Notification.notify.warning(
    "Better check yourself, you're not looking too good."
  );
}

function danger() {
  // error msg with title and content (other options available too)
  // `error` is an alias of `danger` (both of them works)
  Notification.notify.error({
    title: 'Oh snap!',
    content: 'Change a few things up and try submitting again.',
  });
}
</script>

<template>
  <Btn type="primary" @click="notify('top-right')">Top Right (Default)</Btn>
  <Btn type="primary" @click="notify('bottom-right')">Bottom Right</Btn>
  <Btn type="primary" @click="notify('bottom-left')">Bottom Left</Btn>
  <Btn type="primary" @click="notify('top-left')">Top Left</Btn>
</template>

<script setup>
import { Notification, Btn } from 'uiv';

function notify(placement) {
  Notification.notify({
    placement, // equal to `placement: placement` in ES6
    title: 'Title',
    content: `This is a notify msg at ${placement}.`,
  });
}
</script>

<template>
  <Btn type="primary" @click="notify">Notification Without Dismiss Button</Btn>
</template>

<script setup>
import { Notification, Btn } from 'uiv';

function notify() {
  Notification.notify({
    title: 'Title',
    content: 'This is a notification without dismiss btn.',
    dismissible: false,
  });
}
</script>