initial

layers/ui/components/notification/notify.ts

@@ -0,0 +1,134 @@
+import { createVNode, render } from 'vue'
+import { defu } from 'defu'
+import NotificationConstructor from './notification.vue'
+import type {
+  NotificationOptions,
+  NotificationPlacement,
+  NotificationQueue,
+} from './types'
+
+const notifications: Record<NotificationPlacement, NotificationQueue> = {
+  'top-left': [],
+  'top-right': [],
+  'bottom-left': [],
+  'bottom-right': [],
+}
+
+const GAP_SIZE = 16
+let SEED = 1
+
+const DEFAULT_OPTIONS: NotificationOptions = {
+  text: '',
+  placement: 'top-right',
+  duration: 5000,
+  onClose: () => {},
+}
+
+const notify = function (options: NotificationOptions, context = null) {
+  // if (process.server) return { close: () => undefined };
+
+  options = defu(options, DEFAULT_OPTIONS)
+
+  const orientedNotifications = notifications[options.placement!]
+  const id = options.id
+    ? `${options.placement!}_${options.id}`
+    : `notification_${SEED++}`
+
+  const idx = orientedNotifications.findIndex(
+    ({ vm }) => vm.component?.props.id === id,
+  )
+  if (idx > -1)
+    return
+
+  let verticalOffset = options.offset || 103
+  notifications[options.placement!].forEach(({ vm }) => {
+    verticalOffset += (vm.el?.offsetHeight || 0) + GAP_SIZE
+  })
+  verticalOffset += GAP_SIZE
+
+  const userOnClose = options.onClose
+  const props = {
+    ...options,
+    offset: verticalOffset,
+    id,
+    onClose: () => {
+      close(id, options.placement!, userOnClose)
+    },
+  }
+
+  const container = document.createElement('div')
+
+  const vm = createVNode(
+    NotificationConstructor,
+    props,
+    options.text
+      ? {
+          default: () => options.text,
+        }
+      : null,
+  )
+  vm.appContext = context ?? notify._context
+  vm.props!.onDestroy = () => {
+    render(null, container)
+  }
+
+  render(vm, container)
+  notifications[options.placement!].push({ vm })
+  document.body.appendChild(container.firstElementChild!)
+
+  return {
+    close: () => {
+      vm.component!.exposed!.close()
+    },
+  }
+}
+
+export function close(
+  id: NotificationOptions['id'],
+  placement: NotificationOptions['placement'],
+  userOnClose: NotificationOptions['onClose'],
+) {
+  const orientedNotifications = notifications[placement!]
+  const idx = orientedNotifications.findIndex(
+    ({ vm }) => vm.component?.props.id === id,
+  )
+  if (idx === -1)
+    return
+
+  const { vm } = orientedNotifications[idx]
+
+  if (!vm)
+    return
+
+  userOnClose?.(vm)
+
+  const removedHeight = vm.el!.offsetHeight
+  const verticalPos = placement!.split('-')[0]
+  orientedNotifications.splice(idx, 1)
+
+  if (orientedNotifications.length < 1)
+    return
+
+  for (let i = idx; i < orientedNotifications.length; i++) {
+    const { el, component } = orientedNotifications[i].vm
+    const styles = getComputedStyle(el as Element)
+    const pos = Number.parseInt(styles.getPropertyValue(verticalPos), 10)
+
+    component!.props.offset = pos - removedHeight - GAP_SIZE
+  }
+}
+
+export function closeAll() {
+  for (const orientedNotifications of Object.values(notifications)) {
+    orientedNotifications.forEach(({ vm }) => {
+      vm.component!.exposed!.close()
+    })
+  }
+}
+
+notify.closeAll = closeAll
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+notify._context = null
+
+export default notify