@v-c/notification 1.0.0 → 2.0.0-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/notification",
   "type": "module",
-  "version": "1.0.0",
+  "version": "2.0.0-rc.1",
   "publishConfig": {
     "access": "public"
   },
@@ -9,7 +9,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
@@ -19,7 +19,7 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "^1.0.9"
+    "@v-c/util": "^1.0.19"
   },
   "scripts": {
     "build": "vite build",

package/src/Notification.tsx

@@ -0,0 +1,326 @@
+import type { Component, CSSProperties, HTMLAttributes } from 'vue'
+import type { VueNode } from '@v-c/util/dist/type'
+import type { ClosableType } from './hooks/useClosable'
+import type { NotificationProgressProps } from './Progress'
+import { clsx } from '@v-c/util'
+import { computed, defineComponent, ref, shallowRef, watch } from 'vue'
+import useClosable from './hooks/useClosable'
+import useNoticeTimer from './hooks/useNoticeTimer'
+import DefaultProgress from './Progress'
+
+export interface NotificationClassNames {
+  wrapper?: string
+  root?: string
+  icon?: string
+  section?: string
+  title?: string
+  description?: string
+  actions?: string
+  close?: string
+  progress?: string
+}
+
+export interface NotificationStyles {
+  wrapper?: CSSProperties
+  root?: CSSProperties
+  icon?: CSSProperties
+  section?: CSSProperties
+  title?: CSSProperties
+  description?: CSSProperties
+  actions?: CSSProperties
+  close?: CSSProperties
+  progress?: CSSProperties
+}
+
+export interface ComponentsType {
+  progress?: Component<NotificationProgressProps>
+}
+
+export interface NotificationProps {
+  // Style
+  prefixCls: string
+  className?: string
+  style?: CSSProperties
+  classNames?: NotificationClassNames
+  styles?: NotificationStyles
+  components?: ComponentsType
+
+  // UI
+  title?: VueNode
+  description?: VueNode
+  icon?: VueNode
+  actions?: VueNode
+  role?: string
+  closable?: ClosableType
+  offset?: number
+  notificationIndex?: number
+  stackInThreshold?: boolean
+  props?: HTMLAttributes & Record<string, any>
+
+  // Behavior
+  duration?: number | false | null
+  showProgress?: boolean
+  times?: number
+  hovering?: boolean
+  pauseOnHover?: boolean
+
+  // Function
+  onClick?: (e: MouseEvent) => void
+  onMouseEnter?: (e: MouseEvent) => void
+  onMouseLeave?: (e: MouseEvent) => void
+  /** @deprecated Please use `closable.onClose` instead. */
+  onClose?: () => void
+}
+
+interface NoticeStyle extends CSSProperties {
+  '--notification-index'?: number
+  '--notification-y'?: string
+}
+
+const Notification = defineComponent<NotificationProps>(
+  (props, { attrs, expose }) => {
+    const nodeRef = ref<HTMLDivElement | null>(null)
+    const percent = shallowRef(0)
+    const hovering = shallowRef(false)
+
+    expose({
+      nativeElement: nodeRef,
+    })
+
+    // ========================= Close ==========================
+    const closableRef = computed(() => props.closable)
+    const [mergedClosable, closableConfig, closeBtnAriaProps] = useClosable(closableRef)
+
+    const onInternalClose = () => {
+      closableConfig.value.onClose?.()
+      props.onClose?.()
+    }
+
+    // ======================== Duration ========================
+    const mergedDuration = computed(() => {
+      if (props.duration === undefined) {
+        return 4.5
+      }
+      return props.duration
+    })
+    const [onResume, onPause] = useNoticeTimer(
+      mergedDuration,
+      onInternalClose,
+      (next) => {
+        percent.value = next
+      },
+    )
+
+    // Sync pause/resume to forced and local hover.
+    watch(
+      [
+        () => props.hovering,
+        hovering,
+        () => props.pauseOnHover,
+      ],
+      () => {
+        const pauseOnHover = props.pauseOnHover ?? true
+        if (!pauseOnHover) {
+          return
+        }
+        if (props.hovering) {
+          onPause()
+        }
+        else if (!hovering.value) {
+          onResume()
+        }
+      },
+      { immediate: true },
+    )
+
+    // Cache offset/notificationIndex so transitions still have a value
+    // even when the controlling list omits them temporarily.
+    const offsetRef = shallowRef(props.offset)
+    const indexRef = shallowRef(props.notificationIndex)
+    watch(() => props.offset, (next) => {
+      if (next !== undefined) {
+        offsetRef.value = next
+      }
+    })
+    watch(() => props.notificationIndex, (next) => {
+      if (next !== undefined) {
+        indexRef.value = next
+      }
+    })
+
+    // ======================== Hover ==========================
+    const onInternalMouseEnter = (e: MouseEvent) => {
+      hovering.value = true
+      if ((props.pauseOnHover ?? true)) {
+        onPause()
+      }
+      props.onMouseEnter?.(e)
+      ;(props.props?.onMouseenter as any)?.(e)
+    }
+
+    const onInternalMouseLeave = (e: MouseEvent) => {
+      hovering.value = false
+      const pauseOnHover = props.pauseOnHover ?? true
+      if (pauseOnHover && !props.hovering) {
+        onResume()
+      }
+      props.onMouseLeave?.(e)
+      ;(props.props?.onMouseleave as any)?.(e)
+    }
+
+    const onInternalCloseClick = (e: MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      onInternalClose()
+    }
+
+    return () => {
+      const {
+        prefixCls,
+        className,
+        style,
+        classNames: ncs,
+        styles: nss,
+        components,
+        title,
+        description,
+        icon,
+        actions,
+        role,
+        stackInThreshold,
+        props: rootProps,
+        showProgress,
+        duration,
+      } = props
+
+      const noticePrefixCls = `${prefixCls}-notice`
+
+      // ======================== Content =========================
+      const titleNode = title !== undefined && title !== null
+        ? (
+            <div class={clsx(`${noticePrefixCls}-title`, ncs?.title)} style={nss?.title}>
+              {title}
+            </div>
+          )
+        : null
+
+      const descNode = description !== undefined && description !== null
+        ? (
+            <div class={clsx(`${noticePrefixCls}-description`, ncs?.description)} style={nss?.description}>
+              {description}
+            </div>
+          )
+        : null
+
+      const hasTitle = titleNode !== null
+      const hasDescription = descNode !== null
+
+      let contentNode: VueNode = null
+      if (hasTitle && hasDescription) {
+        contentNode = (
+          <div class={clsx(`${noticePrefixCls}-section`, ncs?.section)} style={nss?.section}>
+            {titleNode}
+            {descNode}
+          </div>
+        )
+      }
+      else {
+        contentNode = titleNode || descNode
+      }
+
+      if (icon !== undefined && icon !== null) {
+        contentNode = (
+          <div class={clsx(`${noticePrefixCls}-wrapper`, ncs?.wrapper)} style={nss?.wrapper}>
+            <div class={clsx(`${noticePrefixCls}-icon`, ncs?.icon)} style={nss?.icon}>
+              {icon}
+            </div>
+            {contentNode}
+          </div>
+        )
+      }
+
+      const actionsNode = actions
+        ? (
+            <div class={clsx(`${noticePrefixCls}-actions`, ncs?.actions)} style={nss?.actions}>
+              {actions}
+            </div>
+          )
+        : null
+
+      // ========================= Render =========================
+      const mergedOffset = props.offset ?? offsetRef.value
+      const mergedIndex = props.notificationIndex ?? indexRef.value ?? 0
+      const safePercent = Math.min(Math.max(percent.value * 100, 0), 100)
+      const validPercent = 100 - safePercent
+      const ProgressComponent = (components?.progress || DefaultProgress) as any
+
+      const mergedStyle: NoticeStyle = {
+        '--notification-index': mergedIndex,
+        ...nss?.root,
+        ...style,
+      }
+      if (mergedOffset !== undefined) {
+        mergedStyle['--notification-y'] = `${mergedOffset}px`
+      }
+
+      const mergedRole = role ?? (rootProps as any)?.role ?? 'alert'
+
+      return (
+        <div
+          {...rootProps}
+          ref={nodeRef}
+          role={mergedRole}
+          data-notification-index={mergedIndex}
+          class={clsx(
+            noticePrefixCls,
+            className,
+            (attrs as any).class,
+            ncs?.root,
+            {
+              [`${noticePrefixCls}-closable`]: mergedClosable.value,
+              [`${noticePrefixCls}-stack-in-threshold`]: stackInThreshold,
+            },
+          )}
+          style={{
+            ...mergedStyle,
+            ...((attrs as any).style as CSSProperties | undefined),
+          }}
+          onClick={props.onClick}
+          onMouseenter={onInternalMouseEnter}
+          onMouseleave={onInternalMouseLeave}
+        >
+          {contentNode}
+          {actionsNode}
+
+          {mergedClosable.value && (
+            <button
+              class={clsx(`${noticePrefixCls}-close`, ncs?.close)}
+              aria-label="Close"
+              {...closeBtnAriaProps.value}
+              style={nss?.close}
+              onClick={onInternalCloseClick}
+            >
+              {closableConfig.value.closeIcon}
+            </button>
+          )}
+
+          {showProgress && typeof duration === 'number' && duration > 0 && (
+            <ProgressComponent
+              {...{
+                className: clsx(`${noticePrefixCls}-progress`, ncs?.progress),
+                percent: validPercent,
+                style: nss?.progress,
+              } as NotificationProgressProps}
+            />
+          )}
+        </div>
+      )
+    }
+  },
+  {
+    name: 'Notification',
+    inheritAttrs: false,
+  },
+)
+
+export default Notification

package/src/NotificationList/Content.tsx

@@ -0,0 +1,66 @@
+import type { CSSProperties } from 'vue'
+import { clsx } from '@v-c/util'
+import { defineComponent, ref } from 'vue'
+
+export interface ContentProps {
+  listPrefixCls: string
+  height: number
+  topNoticeHeight?: number
+  topNoticeWidth?: number
+  className?: string
+  style?: CSSProperties
+}
+
+interface ContentStyle extends CSSProperties {
+  '--top-notificiation-height': string
+  '--top-notificiation-width': string
+}
+
+const Content = defineComponent<ContentProps>(
+  (props, { slots, expose }) => {
+    const contentRef = ref<HTMLDivElement | null>(null)
+    let prevHeight = props.height
+
+    expose({
+      nativeElement: contentRef,
+    })
+
+    return () => {
+      const {
+        listPrefixCls,
+        height,
+        topNoticeHeight = 0,
+        topNoticeWidth = 0,
+        className,
+        style,
+      } = props
+
+      const heightStatus = height < prevHeight ? 'decrease' : 'increase'
+      prevHeight = height
+
+      const contentPrefixCls = `${listPrefixCls}-content`
+      const contentStyle: ContentStyle = {
+        ...style,
+        height,
+        '--top-notificiation-height': `${topNoticeHeight}px`,
+        '--top-notificiation-width': `${topNoticeWidth}px`,
+      }
+
+      return (
+        <div
+          ref={contentRef}
+          class={clsx(contentPrefixCls, `${contentPrefixCls}-${heightStatus}`, className)}
+          style={contentStyle}
+        >
+          {slots.default?.()}
+        </div>
+      )
+    }
+  },
+  {
+    name: 'NotificationListContent',
+    inheritAttrs: false,
+  },
+)
+
+export default Content

package/src/NotificationList/index.tsx

@@ -0,0 +1,282 @@
+import type { CSSProperties, TransitionGroupProps } from 'vue'
+import type { Key, StackConfig } from '../interface'
+import type {
+  ComponentsType,
+  NotificationClassNames as NoticeClassNames,
+  NotificationProps,
+  NotificationStyles as NoticeStyles,
+} from '../Notification'
+import { clsx } from '@v-c/util'
+import { getTransitionGroupProps } from '@v-c/util/dist/utils/transition'
+import { unrefElement } from '@v-c/util/dist/vueuse/unref-element'
+import { computed, defineComponent, ref, shallowRef, toRef, TransitionGroup, watch, watchEffect } from 'vue'
+import useListPosition from '../hooks/useListPosition'
+import useStack from '../hooks/useStack'
+import Notification from '../Notification'
+import { useNotificationContext } from '../NotificationProvider'
+import Content from './Content'
+
+export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight'
+
+export type { StackConfig }
+
+export interface NotificationListConfig extends Omit<NotificationProps, 'prefixCls'> {
+  key: Key
+  placement?: Placement
+  times?: number
+}
+
+export interface NotificationClassNames extends NoticeClassNames {
+  list?: string
+  listContent?: string
+}
+
+export interface NotificationStyles extends NoticeStyles {
+  list?: CSSProperties
+  listContent?: CSSProperties
+}
+
+export interface NotificationListProps {
+  configList?: NotificationListConfig[]
+  prefixCls?: string
+  placement: Placement
+  pauseOnHover?: boolean
+  classNames?: NotificationClassNames
+  styles?: NotificationStyles
+  components?: ComponentsType
+  stack?: StackConfig
+  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
+  className?: string
+  style?: CSSProperties
+  onNoticeClose?: (key: Key) => void
+  onAllRemoved?: (placement: Placement) => void
+}
+
+const noticeSlotKeys: (keyof NoticeClassNames)[] = [
+  'wrapper',
+  'root',
+  'icon',
+  'section',
+  'title',
+  'description',
+  'actions',
+  'close',
+  'progress',
+]
+
+function fillClassNames(
+  list: (NotificationClassNames | undefined)[],
+): NotificationClassNames {
+  return noticeSlotKeys.reduce<NotificationClassNames>((merged, key) => {
+    merged[key] = clsx(...list.map(item => item?.[key]))
+    return merged
+  }, {})
+}
+
+function fillStyles(
+  list: (NotificationStyles | undefined)[],
+): NotificationStyles {
+  return noticeSlotKeys.reduce<NotificationStyles>((merged, key) => {
+    merged[key] = Object.assign({}, ...list.map(item => item?.[key]))
+    return merged
+  }, {})
+}
+
+function getIndex(keys: { key: Key }[], key: Key): number | undefined {
+  const strKey = String(key)
+  const index = keys.findIndex(item => String(item.key) === strKey)
+  if (index === -1) {
+    return undefined
+  }
+  return keys.length - index - 1
+}
+
+const NotificationList = defineComponent<NotificationListProps>(
+  (props, { attrs }) => {
+    const ctx = useNotificationContext()
+
+    const configList = computed(() => props.configList ?? [])
+    const keys = computed(() =>
+      configList.value.map(config => ({ ...config, key: String(config.key) as Key })),
+    )
+
+    // ====================== Stack State =======================
+    const stackConfig = toRef(props, 'stack')
+    const [stackEnabled, stackParams] = useStack(stackConfig)
+    const listHovering = shallowRef(false)
+    const expanded = computed(() =>
+      stackEnabled.value && (listHovering.value || keys.value.length <= (stackParams.threshold?.value ?? 0)),
+    )
+
+    const stackPosition = computed(() => {
+      if (!stackEnabled.value || expanded.value) {
+        return undefined
+      }
+      return {
+        offset: stackParams.offset?.value,
+        threshold: stackParams.threshold?.value,
+      }
+    })
+
+    // ====================== List Measure ======================
+    const gap = ref(0)
+    const contentRef = ref<{ nativeElement: { value: HTMLDivElement | null } } | null>(null)
+    const [position, setNodeSize] = useListPosition(keys as any, stackPosition as any, gap)
+
+    const hasConfigList = computed(() => !!configList.value.length)
+    watchEffect(() => {
+      if (!hasConfigList.value) {
+        return
+      }
+      const listNode = unrefElement<HTMLDivElement>(contentRef.value?.nativeElement as any)
+      if (!listNode) {
+        return
+      }
+      const { gap: cssGap, rowGap } = window.getComputedStyle(listNode)
+      const nextGap = Number.parseFloat(rowGap || cssGap) || 0
+      if (gap.value !== nextGap) {
+        gap.value = nextGap
+      }
+    }, { flush: 'post' })
+
+    // Notify when list becomes empty (after motion finished).
+    const checkAllClosed = () => {
+      if (configList.value.length === 0) {
+        props.onAllRemoved?.(props.placement)
+      }
+    }
+
+    // Compute motion props per placement.
+    const placementMotion = computed(() => {
+      if (typeof props.motion === 'function') {
+        return props.placement ? props.motion(props.placement) : undefined
+      }
+      return props.motion
+    })
+
+    // Cleanup node sizes when items leave permanently.
+    watch(keys, (next, prev) => {
+      if (!prev) {
+        return
+      }
+      const nextKeySet = new Set(next.map(item => String(item.key)))
+      prev.forEach((item) => {
+        const key = String(item.key)
+        if (!nextKeySet.has(key)) {
+          setNodeSize(key, null)
+        }
+      })
+    })
+
+    return () => {
+      const {
+        prefixCls = 'vc-notification',
+        pauseOnHover,
+        classNames: ncs,
+        styles: nss,
+        components,
+        placement,
+        className,
+        style,
+        onNoticeClose,
+      } = props
+
+      const listPrefixCls = `${prefixCls}-list`
+      const positionResult = position.value
+
+      let motionGroupProps: TransitionGroupProps = {}
+      if (placementMotion.value) {
+        motionGroupProps = getTransitionGroupProps(placementMotion.value.name!, placementMotion.value)
+      }
+
+      const renderItems = () =>
+        keys.value.map((config) => {
+          const { key, placement: _itemPlacement, classNames: configClassNames, styles: configStyles, className: configClassName, style: configStyle, ...notificationConfig } = config
+          const strKey = String(key)
+          const notificationIndex = getIndex(keys.value, key)
+          const stackInThreshold
+            = stackEnabled.value && notificationIndex !== undefined && notificationIndex < (stackParams.threshold?.value ?? 0)
+
+          return (
+            <Notification
+              key={strKey}
+              {...notificationConfig}
+              ref={(el: any) => {
+                const node = unrefElement<HTMLDivElement>(el?.nativeElement as any)
+                setNodeSize(strKey, node ?? null)
+              }}
+              prefixCls={prefixCls}
+              class={clsx((ctx.value as any)?.classNames?.notice, configClassName)}
+              style={configStyle}
+              classNames={fillClassNames([ncs, configClassNames])}
+              styles={fillStyles([nss, configStyles])}
+              components={{
+                ...components,
+                ...(config as NotificationListConfig).components,
+              }}
+              hovering={stackEnabled.value && listHovering.value}
+              pauseOnHover={config.pauseOnHover ?? pauseOnHover}
+              offset={positionResult.notificationPosition.get(strKey)}
+              notificationIndex={notificationIndex}
+              stackInThreshold={stackInThreshold}
+              onClose={() => {
+                (config as NotificationListConfig).onClose?.()
+                onNoticeClose?.(key)
+              }}
+            />
+          )
+        })
+
+      return (
+        <div
+          class={clsx(
+            prefixCls,
+            listPrefixCls,
+            `${prefixCls}-${placement}`,
+            (ctx.value as any)?.classNames?.list,
+            className,
+            ncs?.list,
+            (attrs as any).class,
+            {
+              [`${prefixCls}-stack`]: stackEnabled.value,
+              [`${prefixCls}-stack-expanded`]: expanded.value,
+              [`${listPrefixCls}-hovered`]: listHovering.value,
+            },
+          )}
+          onMouseenter={() => {
+            listHovering.value = true
+          }}
+          onMouseleave={() => {
+            listHovering.value = false
+          }}
+          style={{ ...nss?.list, ...style, ...((attrs as any).style ?? {}) } as CSSProperties}
+        >
+          <Content
+            ref={contentRef as any}
+            listPrefixCls={listPrefixCls}
+            height={positionResult.totalHeight}
+            topNoticeHeight={positionResult.topNoticeHeight}
+            topNoticeWidth={positionResult.topNoticeWidth}
+            className={ncs?.listContent}
+            style={nss?.listContent}
+          >
+            <TransitionGroup
+              tag={false as any}
+              appear
+              {...motionGroupProps}
+              onAfterLeave={checkAllClosed}
+            >
+              {renderItems()}
+            </TransitionGroup>
+          </Content>
+        </div>
+      )
+    }
+  },
+  {
+    name: 'NotificationList',
+    inheritAttrs: false,
+  },
+)
+
+export default NotificationList