@v-c/notification 0.0.2

package/src/hooks/useNotification.tsx

@@ -0,0 +1,163 @@
+import type { VueNode } from '@v-c/util/dist/type'
+import type { CSSProperties, TransitionGroupProps } from 'vue'
+import type { Key, OpenConfig, Placement, StackConfig } from '../interface'
+import type { NotificationsProps, NotificationsRef } from '../Notifications'
+import { onMounted, shallowRef, watch } from 'vue'
+import Notifications from '../Notifications'
+
+const defaultGetContainer = () => document.body
+
+type OptionalConfig = Partial<OpenConfig>
+
+export interface NotificationConfig {
+  prefixCls?: string
+  /** Customize container. It will repeat call which means you should return same container element. */
+  getContainer?: () => HTMLElement | ShadowRoot
+  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
+  closeIcon?: VueNode
+  closable?:
+    | boolean
+    | ({ closeIcon?: VueNode, onClose?: VoidFunction } & Record<string, any>)
+  maxCount?: number
+  duration?: number | false | null
+  showProgress?: boolean
+  pauseOnHover?: boolean
+  /** @private. Config for notification holder style. Safe to remove if refactor */
+  className?: (placement: Placement) => string
+  /** @private. Config for notification holder style. Safe to remove if refactor */
+  style?: (placement: Placement) => CSSProperties
+  /** @private Trigger when all the notification closed. */
+  onAllRemoved?: VoidFunction
+  stack?: StackConfig
+  /** @private Slot for style in Notifications */
+  renderNotifications?: NotificationsProps['renderNotifications']
+}
+
+export interface NotificationAPI {
+  open: (config: OptionalConfig) => void
+  close: (key: Key) => void
+  destroy: () => void
+}
+
+interface OpenTask {
+  type: 'open'
+  config: OpenConfig
+}
+
+interface CloseTask {
+  type: 'close'
+  key: Key
+}
+
+interface DestroyTask {
+  type: 'destroy'
+}
+
+type Task = OpenTask | CloseTask | DestroyTask
+
+let uniqueKey = 0
+
+function mergeConfig<T>(...objList: Partial<T>[]): T {
+  const clone: any = {}
+
+  objList.forEach((obj: any) => {
+    if (obj) {
+      Object.keys(obj).forEach((key) => {
+        const val = obj[key]
+
+        if (val !== undefined) {
+          clone[key] = val
+        }
+      })
+    }
+  })
+
+  return clone
+}
+
+export default function useNotification(rootConfig: NotificationConfig = {}) {
+  const {
+    getContainer = defaultGetContainer,
+    motion,
+    prefixCls,
+    maxCount,
+    className,
+    style,
+    onAllRemoved,
+    stack,
+    renderNotifications,
+    ...shareConfig
+  } = rootConfig
+  const container = shallowRef<HTMLElement | ShadowRoot>()
+
+  const notificationRef = shallowRef<NotificationsRef>()
+
+  const contextHolder = () => (
+    <Notifications
+      container={container.value}
+      ref={notificationRef}
+      prefixCls={prefixCls}
+      motion={motion}
+      maxCount={maxCount}
+      className={className}
+      style={style}
+      onAllRemoved={onAllRemoved}
+      stack={stack}
+      renderNotifications={renderNotifications}
+    />
+  )
+
+  const taskQueue = shallowRef<Task[]>([])
+
+  // ========================= Refs =========================
+
+  const api: NotificationAPI = {
+    open(config) {
+      const mergedConfig = mergeConfig(shareConfig, config)
+      if (mergedConfig.key === null || mergedConfig.key === undefined) {
+        mergedConfig.key = `vc-notification-${uniqueKey}`
+        uniqueKey += 1
+      }
+
+      taskQueue.value = [...taskQueue.value, { type: 'open', config: mergedConfig }]
+    },
+    close(key) {
+      taskQueue.value = [...taskQueue.value, { type: 'close', key }]
+    },
+    destroy() {
+      taskQueue.value = [...taskQueue.value, { type: 'destroy' }]
+    },
+  }
+
+  // ======================= Container ======================
+  // React 18 should all in effect that we will check container in each render
+  // Which means getContainer should be stable.
+  onMounted(
+    () => {
+      container.value = getContainer()
+    },
+  )
+  watch(taskQueue, () => {
+    if (notificationRef.value && taskQueue.value.length) {
+      taskQueue.value.forEach((task) => {
+        switch (task.type) {
+          case 'open':
+            notificationRef.value?.open(task.config)
+            break
+          case 'close':
+            notificationRef.value?.close(task.key)
+            break
+          case 'destroy':
+            notificationRef.value?.destroy()
+            break
+          default:
+            break
+        }
+      })
+      taskQueue.value = taskQueue.value.filter(task => !taskQueue.value.includes(task))
+    }
+  })
+
+  // ======================== Return ========================
+  return [api, contextHolder] as [NotificationAPI, () => VueNode]
+}

package/src/hooks/useStack.ts

@@ -0,0 +1,32 @@
+import type { ComputedRef, MaybeRef, ToRefs } from 'vue'
+import type { StackConfig } from '../interface'
+import { computed, reactive, toRefs, unref, watchEffect } from 'vue'
+
+const DEFAULT_OFFSET = 8
+const DEFAULT_THRESHOLD = 3
+const DEFAULT_GAP = 16
+
+type StackParams = Exclude<StackConfig, boolean>
+
+type UseStack = (config?: MaybeRef<StackConfig | undefined>) => [ComputedRef<boolean>, ToRefs<StackParams>]
+
+const useStack: UseStack = (config) => {
+  const result: StackParams = reactive({
+    offset: DEFAULT_OFFSET,
+    threshold: DEFAULT_THRESHOLD,
+    gap: DEFAULT_GAP,
+  })
+
+  watchEffect(() => {
+    const _config = unref(config)
+    if (_config && typeof _config === 'object') {
+      result.offset = _config.offset ?? DEFAULT_OFFSET
+      result.threshold = _config.threshold ?? DEFAULT_THRESHOLD
+      result.gap = _config.gap ?? DEFAULT_GAP
+    }
+  })
+
+  return [computed(() => !!unref(config)), toRefs(result)]
+}
+
+export default useStack

package/src/index.ts

@@ -0,0 +1,9 @@
+import type { NotificationAPI, NotificationConfig } from './hooks/useNotification'
+import useNotification from './hooks/useNotification'
+import Notice from './Notice'
+import { useNotificationProvider } from './NotificationProvider'
+
+export { Notice, useNotification, useNotificationProvider }
+export type { NotificationAPI, NotificationConfig }
+
+export type { NoticeProps } from './Notice'

package/src/interface.ts

@@ -0,0 +1,61 @@
+import type { VueNode } from '@v-c/util/dist/type'
+import type { CSSProperties } from 'vue'
+
+export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight'
+
+type NoticeSemanticProps = 'wrapper'
+
+export type Key = string | number
+export interface NoticeConfig {
+  content?: VueNode
+  duration?: number | false | null
+  showProgress?: boolean
+  pauseOnHover?: boolean
+  closeIcon?: VueNode
+  closable?:
+    | boolean
+    | ({ closeIcon?: VueNode; onClose?: VoidFunction } & Record<string, any>)
+  className?: string
+  style?: CSSProperties
+  classNames?: {
+    [key in NoticeSemanticProps]?: string;
+  }
+  styles?: {
+    [key in NoticeSemanticProps]?: CSSProperties;
+  }
+  /** @private Internal usage. Do not override in your code */
+  props?: Record<string, any>
+
+  onClose?: VoidFunction
+  onClick?: (event: Event) => void
+}
+
+export interface OpenConfig extends NoticeConfig {
+  key: Key
+  placement?: Placement
+  content?: VueNode
+  duration?: number | false | null
+}
+
+export type InnerOpenConfig = OpenConfig & { times?: number }
+
+export type Placements = Partial<Record<Placement, OpenConfig[]>>
+
+export type StackConfig
+  = | boolean
+    | {
+    /**
+     * When number is greater than threshold, notifications will be stacked together.
+     * @default 3
+     */
+      threshold?: number
+      /**
+       * Offset when notifications are stacked together.
+       * @default 8
+       */
+      offset?: number
+      /**
+       * Spacing between each notification when expanded.
+       */
+      gap?: number
+    }

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["../../tsconfig.base.json"],
+  "compilerOptions": {
+
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
+}

package/vite.config.ts

@@ -0,0 +1,18 @@
+import type { UserConfig } from 'vite'
+import fg from 'fast-glob'
+import { defineConfig, mergeConfig } from 'vite'
+import { buildCommon } from '../../scripts/build.common'
+
+const entry = fg.sync(['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/tests'])
+
+export default defineConfig({
+  ...mergeConfig(buildCommon({
+    external: ['vue', 'classnames', /^@v-c\/util/],
+  }), {
+    build: {
+      lib: {
+        entry,
+      },
+    },
+  } as UserConfig),
+})

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineProject, mergeConfig } from 'vitest/config'
+import configShared from '../../vitest.config.ts'
+
+export default mergeConfig(
+  configShared,
+  defineProject({
+
+  }),
+)