Notification 通知 ​

<template>
  <div class="flex flex-wrap gap-1">
    <u-button class="!ml-0" plain @click="open1">
      Closes automatically
    </u-button>
    <u-button class="!ml-0" plain @click="open2">
      Won't close automatically
    </u-button>
  </div>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { UNotification } from 'uniboot-ui'

const open1 = () => {
  UNotification({
    title: 'Title',
    message: h('i', { style: 'color: teal' }, 'This is a reminder'),
  })
}

const open2 = () => {
  UNotification({
    title: 'Prompt',
    message: 'This is a message that does not automatically close',
    duration: 0,
  })
}
</script>

<template>
  <div class="flex flex-wrap gap-1">
    <u-button class="!ml-0" plain @click="open5">Primary</u-button>
    <u-button class="!ml-0" plain @click="open1">Success</u-button>
    <u-button class="!ml-0" plain @click="open2">Warning</u-button>
    <u-button class="!ml-0" plain @click="open3">Info</u-button>
    <u-button class="!ml-0" plain @click="open4">Error</u-button>
  </div>
</template>

<script lang="ts" setup>
import { UNotification } from 'uniboot-ui'

const open1 = () => {
  UNotification({
    title: 'Success',
    message: 'This is a success message',
    type: 'success',
  })
}

const open2 = () => {
  UNotification({
    title: 'Warning',
    message: 'This is a warning message',
    type: 'warning',
  })
}

const open3 = () => {
  UNotification({
    title: 'Info',
    message: 'This is an info message',
    type: 'info',
  })
}

const open4 = () => {
  UNotification({
    title: 'Error',
    message: 'This is an error message',
    type: 'error',
  })
}

const open5 = () => {
  UNotification({
    title: 'Primary',
    message: 'This is a primary message',
    type: 'primary',
  })
}
</script>

<template>
  <div class="flex flex-wrap gap-1">
    <u-button class="!ml-0" plain @click="open1"> Top Right </u-button>
    <u-button class="!ml-0" plain @click="open2"> Bottom Right </u-button>
    <u-button class="!ml-0" plain @click="open3"> Bottom Left </u-button>
    <u-button class="!ml-0" plain @click="open4"> Top Left </u-button>
  </div>
</template>

<script lang="ts" setup>
import { UNotification } from 'uniboot-ui'

const open1 = () => {
  UNotification({
    title: 'Custom Position',
    message: "I'm at the top right corner",
  })
}

const open2 = () => {
  UNotification({
    title: 'Custom Position',
    message: "I'm at the bottom right corner",
    position: 'bottom-right',
  })
}

const open3 = () => {
  UNotification({
    title: 'Custom Position',
    message: "I'm at the bottom left corner",
    position: 'bottom-left',
  })
}

const open4 = () => {
  UNotification({
    title: 'Custom Position',
    message: "I'm at the top left corner",
    position: 'top-left',
  })
}
</script>

<template>
  <u-button plain @click="open"> Notification with offset </u-button>
</template>

<script lang="ts" setup>
import { UNotification } from 'uniboot-ui'

const open = () => {
  UNotification.success({
    title: 'Success',
    message: 'This is a success message',
    offset: 100,
  })
}
</script>

<template>
  <u-button plain @click="open"> Use HTML String </u-button>
</template>

<script lang="ts" setup>
import { UNotification } from 'uniboot-ui'

const open = () => {
  UNotification({
    title: 'HTML String',
    dangerouslyUseHTMLString: true,
    message: '<strong>This is <i>HTML</i> string</strong>',
  })
}
</script>

<template>
  <div class="flex flex-wrap gap-1">
    <u-button class="!ml-0" plain @click="open">Common VNode</u-button>
    <u-button class="!ml-0" plain @click="open1">Dynamic props</u-button>
  </div>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import { UNotification, USwitch } from 'uniboot-ui'

const open = () => {
  UNotification({
    title: 'Use Vnode',
    message: h('p', null, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode'),
    ]),
  })
}

const open1 = () => {
  const checked = ref<boolean | string | number>(false)
  UNotification({
    title: 'Use Vnode',
    // Should pass a function if VNode contains dynamic props
    message: () =>
      h(USwitch, {
        modelValue: checked.value,
        'onUpdate:modelValue': (val: boolean | string | number) => {
          checked.value = val
        },
      }),
  })
}
</script>

<template>
  <div class="flex flex-wrap gap-1">
    <u-button class="!ml-0" plain @click="open('')"> Default </u-button>
    <u-button class="!ml-0" plain type="success" @click="open('success')">
      Success
    </u-button>
    <u-button class="!ml-0" plain type="warning" @click="open('warning')">
      Warning
    </u-button>
    <u-button class="!ml-0" plain type="danger" @click="open('error')">
      Error
    </u-button>
    <u-button class="!ml-0" plain type="info" @click="open('info')">
      Info
    </u-button>
    <u-button class="!ml-0" plain @click="openCustomColor">
      Custom color
    </u-button>
    <u-button class="!ml-0" plain @click="openWithoutPause">
      No pause on hover
    </u-button>
  </div>
</template>

<script lang="ts" setup>
import { UNotification } from 'uniboot-ui'

function open(type: string) {
  UNotification({
    title: `${type || 'Default'} progress`,
    message: 'Hover to pause the timer and progress bar',
    type: type as any,
    duration: 6000,
    progress: true,
  })
}

function openWithoutPause() {
  UNotification({
    title: 'No pause on hover',
    message: 'Timer and progress bar keep running even when hovering',
    duration: 6000,
    progress: true,
    pauseOnHover: false,
  })
}

function openCustomColor() {
  UNotification({
    title: 'Custom color',
    message: 'Custom progress bar color overrides the default',
    duration: 6000,
    progress: {
      color: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
      ],
    },
  })
}
</script>

<template>
  <u-button plain @click="open"> Hide close button </u-button>
</template>

<script lang="ts" setup>
import { UNotification } from 'uniboot-ui'

const open = () => {
  UNotification.success({
    title: 'Info',
    message: 'This is a message without close button',
    showClose: false,
  })
}
</script>