Notification
Notification utilities for rendering `HLAlert` as dismissible toast-style messages.
Basic Usage
useHLNotification requires a notification provider in the parent tree. In most docs examples, wrapping with HLContentWrap is sufficient.
ts
import { HLAlert, useHLNotification } from '@platform-ui/highrise'
import { h } from 'vue'
const notification = useHLNotification()
function openNotification() {
const notificationInstance = notification.create({
content: () =>
h(
HLAlert,
{
title: 'Notification',
closable: true,
id: 'test-alert',
actionOne: {
text: 'This is a button',
onActionClick: () => {},
},
actionTwo: {
text: 'This is a button with icon',
disabled: false,
},
onClose: () => {
notificationInstance.destroy()
},
type: 'notification',
},
{
default: () => 'Notification description',
}
),
duration: 5000,
})
}Transform Legacy Notification Options
Use transformNotificationOpts when you need to map legacy/ghl-ui notification options into the HighRise notification shape.
ts
import { HLButton, transformNotificationOpts, useHLNotification } from '@platform-ui/highrise'
import { h, onBeforeUnmount } from 'vue'
const notification = useHLNotification()
let n
function openNotificationTransformed() {
n = notification.create(
transformNotificationOpts({
title: 'Custom object successfully updated',
duration: 2000,
type: 'success',
action: () => h(HLButton, { id: 'dismiss-button', onClick: () => n.destroy() }, { default: () => 'Dismiss' }),
description: 'This is a description',
content: 'This is a content',
meta: 'This is a meta',
})
)
}
onBeforeUnmount(() => notification.destroyAll())HLNotificationProvider
Use it when you need custom placement or a custom container target.
[Note]
useHLNotification must run in a descendant component of HLNotificationProvider. Initializing both in the same SFC is not supported.
vue
<script setup lang="ts">
import { ref } from 'vue'
import { HLButton, HLModal, HLNotificationProvider } from '@platform-ui/highrise'
import Container2 from './Container2.vue'
const showModal = ref(false)
const openModal = (value: boolean) => {
showModal.value = value
}
</script>
<template>
<HLNotificationProvider container-class="secondary-container" to="#notif-container" :max="2">
<HLButton id="open-modal-button" @click="() => openModal(true)">Open Modal</HLButton>
<HLModal
id="notification-modal-container"
:show="showModal"
:mask-closable="true"
:close-on-esc="true"
class="notification-modal-container"
@close="() => openModal(false)"
>
<div id="notif-container" class="bg-red-500 h-96 w-full">
<Container2 />
</div>
</HLModal>
</HLNotificationProvider>
</template>vue
<script setup lang="ts">
import { HLAlert, HLButton, useHLNotification } from '@platform-ui/highrise'
import { ArrowRightIcon } from '@gohighlevel/ghl-icons/24/outline'
import { h, onBeforeUnmount } from 'vue'
const notification = useHLNotification()
let n
const showNotification = () => {
n = notification.create({
content: () =>
h(
HLAlert,
{
id: 'test-alert',
title: 'Notification',
closable: true,
type: 'notification',
actionTwo: {
text: 'This is a button with icon',
iconRight: ArrowRightIcon as unknown as string,
},
onClose: () => n.destroy(),
},
{ default: () => 'Notification body' }
),
})
}
onBeforeUnmount(() => {
if (n) n.destroy()
})
</script>
<template>
<HLButton id="notification" class="m-4" @click="showNotification">Show Notification</HLButton>
</template>Default Placement
vue
<template>
<HLNotificationProvider>
<NotificationTrigger id="notification-provider-default-alert">
Create Notification
</NotificationTrigger>
</HLNotificationProvider>
</template>vue
<script setup lang="ts">
import { h } from 'vue'
import { HLAlert, HLButton, useHLNotification } from '@platform-ui/highrise'
const props = withDefaults(
defineProps<{
id: string
title?: string
description?: string
duration?: number
}>(),
{
title: 'Notification',
description: 'Notification description',
duration: 5000,
}
)
const notification = useHLNotification()
let notificationInstance: { destroy: () => void } | null = null
const handleCreateNotification = () => {
notificationInstance = notification.create({
content: () =>
h(
HLAlert,
{
title: props.title,
closable: true,
id: props.id,
type: 'notification',
color: 'green',
onClose: () => {
notificationInstance?.destroy()
},
},
{
default: () => props.description,
}
),
duration: props.duration,
})
}
</script>
<template>
<HLButton :id="id" @click="handleCreateNotification">
<slot>Create Notification</slot>
</HLButton>
</template>All Placements
vue
<script setup lang="ts">
const placementOptions = ['top-left', 'top', 'top-right', 'bottom-left', 'bottom', 'bottom-right'] as const
</script>
<template>
<div class="grid p-4" style="grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); gap: 10px;">
<HLNotificationProvider v-for="placement in placementOptions" :key="placement" :placement="placement">
<NotificationTrigger
:id="'placement-' + placement"
:title="placement + ' title'"
:description="placement + ' description'"
:duration="0"
>
{{ placement }}
</NotificationTrigger>
</HLNotificationProvider>
</div>
</template>vue
<script setup lang="ts">
import { h } from 'vue'
import { HLAlert, HLButton, useHLNotification } from '@platform-ui/highrise'
const props = withDefaults(
defineProps<{
id: string
title?: string
description?: string
duration?: number
}>(),
{
title: 'Notification',
description: 'Notification description',
duration: 5000,
}
)
const notification = useHLNotification()
let notificationInstance: { destroy: () => void } | null = null
const handleCreateNotification = () => {
notificationInstance = notification.create({
content: () =>
h(
HLAlert,
{
title: props.title,
closable: true,
id: props.id,
type: 'notification',
color: 'green',
onClose: () => {
notificationInstance?.destroy()
},
},
{
default: () => props.description,
}
),
duration: props.duration,
})
}
</script>
<template>
<HLButton :id="id" @click="handleCreateNotification">
<slot>Create Notification</slot>
</HLButton>
</template>Max Notifications
vue
<template>
<HLNotificationProvider placement="top-right" :max="3">
<NotificationTrigger id="notification-provider-max-trigger" :duration="0">
Fire Notifications
</NotificationTrigger>
</HLNotificationProvider>
</template>vue
<script setup lang="ts">
import { h } from 'vue'
import { HLAlert, HLButton, useHLNotification } from '@platform-ui/highrise'
const props = withDefaults(
defineProps<{
id: string
title?: string
description?: string
duration?: number
}>(),
{
title: 'Notification',
description: 'Notification description',
duration: 5000,
}
)
const notification = useHLNotification()
let notificationInstance: { destroy: () => void } | null = null
const handleCreateNotification = () => {
notificationInstance = notification.create({
content: () =>
h(
HLAlert,
{
title: props.title,
closable: true,
id: props.id,
type: 'notification',
color: 'green',
onClose: () => {
notificationInstance?.destroy()
},
},
{
default: () => props.description,
}
),
duration: props.duration,
})
}
</script>
<template>
<HLButton :id="id" @click="handleCreateNotification">
<slot>Create Notification</slot>
</HLButton>
</template>Teleport Target
Custom teleport target
vue
<template>
<HLNotificationProvider to="#notification-teleport-target" :container-style="{ position: 'absolute' }" :max="2">
<div class="space-y-3">
<NotificationTrigger id="notification-provider-teleport-trigger" :duration="50000">
Create Teleported Notification
</NotificationTrigger>
<div
id="notification-teleport-target"
style="position: relative; min-height: 180px; border: 1px dashed #98A2B3; border-radius: 8px; padding: 16px; overflow: hidden;"
>
Custom teleport target
</div>
</div>
</HLNotificationProvider>
</template>vue
<script setup lang="ts">
import { h } from 'vue'
import { HLAlert, HLButton, useHLNotification } from '@platform-ui/highrise'
const props = withDefaults(
defineProps<{
id: string
title?: string
description?: string
duration?: number
}>(),
{
title: 'Notification',
description: 'Notification description',
duration: 5000,
}
)
const notification = useHLNotification()
let notificationInstance: { destroy: () => void } | null = null
const handleCreateNotification = () => {
notificationInstance = notification.create({
content: () =>
h(
HLAlert,
{
title: props.title,
closable: true,
id: props.id,
type: 'notification',
color: 'green',
onClose: () => {
notificationInstance?.destroy()
},
},
{
default: () => props.description,
}
),
duration: props.duration,
})
}
</script>
<template>
<HLButton :id="id" @click="handleCreateNotification">
<slot>Create Notification</slot>
</HLButton>
</template>Imports
ts
import { HLAlert, HLNotificationProvider, transformNotificationOpts, useHLNotification } from '@platform-ui/highrise'
import type { HLNotificationOptions, HLNotificationProviderProps } from '@platform-ui/highrise'Props
HLNotificationProvider Props
| Prop | Type | Default | Description |
|---|---|---|---|
placement | string | 'top' | 'bottom' | 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right' | The placement of the notification. |
max | number | undefined | The maximum number of notifications to display. |
container-style | CSSProperties | {} | The style of the container. |
container-class | string | '' | The class of the container. |
to | string | '' | The target to teleport the notification to. |
Slots
HLNotificationProvider Slots
| Name | Parameters | Description |
|---|---|---|
default | () | The default slot. |