@v-c/notification 2.0.0-beta.1 → 2.0.0-rc.2

package/src/Notification.tsx

@@ -1,9 +1,9 @@
+import type { Component, CSSProperties, HTMLAttributes } from 'vue'
 import type { VueNode } from '@v-c/util/dist/type'
-import type { Component, CSSProperties, PropType } from 'vue'
 import type { ClosableType } from './hooks/useClosable'
 import type { NotificationProgressProps } from './Progress'
-import { classNames as clsx } from '@v-c/util'
-import { computed, defineComponent, shallowRef, toRef, watch } from 'vue'
+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'
@@ -39,7 +39,7 @@ export interface ComponentsType {
 export interface NotificationProps {
   // Style
   prefixCls: string
-  class?: string
+  className?: string
   style?: CSSProperties
   classNames?: NotificationClassNames
   styles?: NotificationStyles
@@ -55,7 +55,7 @@ export interface NotificationProps {
   offset?: number
   notificationIndex?: number
   stackInThreshold?: boolean
-  props?: Record<string, any>
+  props?: HTMLAttributes & Record<string, any>
 
   // Behavior
   duration?: number | false | null
@@ -65,198 +65,160 @@ export interface NotificationProps {
   pauseOnHover?: boolean
 
   // Function
-  onClick?: (event: MouseEvent) => void
-  onMouseEnter?: (event: MouseEvent) => void
-  onMouseLeave?: (event: MouseEvent) => void
+  onClick?: (e: MouseEvent) => void
+  onMouseEnter?: (e: MouseEvent) => void
+  onMouseLeave?: (e: MouseEvent) => void
   /** @deprecated Please use `closable.onClose` instead. */
   onClose?: () => void
 }
 
-const Notification = defineComponent({
-  name: 'Notification',
-  inheritAttrs: false,
-  props: {
-    prefixCls: { type: String, required: true },
-    class: { type: String, default: undefined },
-    style: { type: Object as PropType<CSSProperties>, default: undefined },
-    classNames: { type: Object as PropType<NotificationClassNames>, default: undefined },
-    styles: { type: Object as PropType<NotificationStyles>, default: undefined },
-    components: { type: Object as PropType<ComponentsType>, default: undefined },
-
-    title: { type: null as any, default: undefined },
-    description: { type: null as any, default: undefined },
-    icon: { type: null as any, default: undefined },
-    actions: { type: null as any, default: undefined },
-    role: { type: String, default: undefined },
-    closable: { type: [Boolean, Object, null] as PropType<ClosableType>, default: undefined },
-    offset: { type: Number, default: undefined },
-    notificationIndex: { type: Number, default: undefined },
-    stackInThreshold: { type: Boolean, default: false },
-    props: { type: Object as PropType<Record<string, any>>, default: undefined },
-
-    duration: { type: [Number, Boolean] as PropType<number | false | null>, default: 4.5 },
-    showProgress: { type: Boolean, default: false },
-    times: { type: Number, default: undefined },
-    hovering: { type: Boolean, default: false },
-    pauseOnHover: { type: Boolean, default: true },
-
-    onClick: { type: Function as PropType<(event: MouseEvent) => void>, default: undefined },
-    onMouseEnter: { type: Function as PropType<(event: MouseEvent) => void>, default: undefined },
-    onMouseLeave: { type: Function as PropType<(event: MouseEvent) => void>, default: undefined },
-    onClose: { type: Function as PropType<() => void>, default: undefined },
-  },
-  setup(props, { attrs, expose }) {
-    const noticeRef = shallowRef<HTMLDivElement | null>(null)
-    expose({
-      get nativeElement() {
-        return noticeRef.value
-      },
-    })
+interface NoticeStyle extends CSSProperties {
+  '--notification-index'?: number
+  '--notification-y'?: string
+}
 
-    const noticePrefixCls = computed(() => `${props.prefixCls}-notice`)
-    const localHovering = shallowRef(false)
+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 [mergedClosable, closableConfig, closeBtnAriaProps] = useClosable(
-      toRef(props, 'closable'),
-    )
+    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(
-      toRef(props, 'duration'),
+      mergedDuration,
       onInternalClose,
-      (ptg) => {
-        percent.value = ptg
+      (next) => {
+        percent.value = next
       },
     )
 
+    // Sync pause/resume to forced and local hover.
     watch(
       [
-        () => props.pauseOnHover,
         () => props.hovering,
-        localHovering,
+        hovering,
+        () => props.pauseOnHover,
       ],
-      ([pauseOnHover, forcedHovering, hovering]) => {
+      () => {
+        const pauseOnHover = props.pauseOnHover ?? true
         if (!pauseOnHover) {
           return
         }
-        if (forcedHovering) {
+        if (props.hovering) {
           onPause()
         }
-        else if (!hovering) {
+        else if (!hovering.value) {
           onResume()
         }
       },
       { immediate: true },
     )
 
-    // ========================= Hover ==========================
-    function onInternalMouseEnter(event: MouseEvent) {
-      localHovering.value = true
-      if (props.pauseOnHover) {
+    // 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?.(event)
+      props.onMouseEnter?.(e)
+      ;(props.props?.onMouseenter as any)?.(e)
     }
 
-    function onInternalMouseLeave(event: MouseEvent) {
-      localHovering.value = false
-      if (props.pauseOnHover && !props.hovering) {
+    const onInternalMouseLeave = (e: MouseEvent) => {
+      hovering.value = false
+      const pauseOnHover = props.pauseOnHover ?? true
+      if (pauseOnHover && !props.hovering) {
         onResume()
       }
-      props.onMouseLeave?.(event)
+      props.onMouseLeave?.(e)
+      ;(props.props?.onMouseleave as any)?.(e)
     }
 
-    function onInternalCloseClick(event: MouseEvent) {
-      event.preventDefault()
-      event.stopPropagation()
+    const onInternalCloseClick = (e: MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
       onInternalClose()
     }
 
-    // ======================== Position ========================
-    let lastOffset = props.offset
-    let lastIndex = props.notificationIndex
-    watch(
-      () => props.offset,
-      (val) => {
-        if (val !== undefined)
-          lastOffset = val
-      },
-      { immediate: true },
-    )
-    watch(
-      () => props.notificationIndex,
-      (val) => {
-        if (val !== undefined)
-          lastIndex = val
-      },
-      { immediate: true },
-    )
-
     return () => {
       const {
+        prefixCls,
+        className,
+        style,
+        classNames: ncs,
+        styles: nss,
+        components,
         title,
         description,
         icon,
         actions,
         role,
+        stackInThreshold,
+        props: rootProps,
         showProgress,
         duration,
-        classNames,
-        styles,
-        components,
-        class: className,
-        style,
-        props: rootProps,
-        onClick,
       } = props
 
-      const validPercent = 100 - Math.min(Math.max(percent.value * 100, 0), 100)
-      const ProgressComponent = (components?.progress || DefaultProgress) as any
+      const noticePrefixCls = `${prefixCls}-notice`
 
       // ======================== Content =========================
-      const titleNode
-        = title !== undefined && title !== null
-          ? (
-              <div
-                class={clsx(`${noticePrefixCls.value}-title`, classNames?.title)}
-                style={styles?.title}
-              >
-                {title}
-              </div>
-            )
-          : null
-
-      const descNode
-        = description !== undefined && description !== null
-          ? (
-              <div
-                class={clsx(
-                  `${noticePrefixCls.value}-description`,
-                  classNames?.description,
-                )}
-                style={styles?.description}
-              >
-                {description}
-              </div>
-            )
-          : null
+      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
 
+      let contentNode: VueNode = null
       if (hasTitle && hasDescription) {
         contentNode = (
-          <div
-            class={clsx(`${noticePrefixCls.value}-section`, classNames?.section)}
-            style={styles?.section}
-          >
+          <div class={clsx(`${noticePrefixCls}-section`, ncs?.section)} style={nss?.section}>
             {titleNode}
             {descNode}
           </div>
@@ -268,14 +230,8 @@ const Notification = defineComponent({
 
       if (icon !== undefined && icon !== null) {
         contentNode = (
-          <div
-            class={clsx(`${noticePrefixCls.value}-wrapper`, classNames?.wrapper)}
-            style={styles?.wrapper}
-          >
-            <div
-              class={clsx(`${noticePrefixCls.value}-icon`, classNames?.icon)}
-              style={styles?.icon}
-            >
+          <div class={clsx(`${noticePrefixCls}-wrapper`, ncs?.wrapper)} style={nss?.wrapper}>
+            <div class={clsx(`${noticePrefixCls}-icon`, ncs?.icon)} style={nss?.icon}>
               {icon}
             </div>
             {contentNode}
@@ -285,49 +241,51 @@ const Notification = defineComponent({
 
       const actionsNode = actions
         ? (
-            <div
-              class={clsx(`${noticePrefixCls.value}-actions`, classNames?.actions)}
-              style={styles?.actions}
-            >
+            <div class={clsx(`${noticePrefixCls}-actions`, ncs?.actions)} style={nss?.actions}>
               {actions}
             </div>
           )
         : null
 
       // ========================= Render =========================
-      const mergedOffset = props.offset ?? lastOffset
-      const mergedIndex = props.notificationIndex ?? lastIndex ?? 0
+      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: CSSProperties & Record<string, any> = {
+      const mergedStyle: NoticeStyle = {
         '--notification-index': mergedIndex,
-        ...styles?.root,
+        ...nss?.root,
         ...style,
       }
-
       if (mergedOffset !== undefined) {
         mergedStyle['--notification-y'] = `${mergedOffset}px`
       }
 
-      const mergedRole = role ?? rootProps?.role ?? 'alert'
+      const mergedRole = role ?? (rootProps as any)?.role ?? 'alert'
 
       return (
         <div
           {...rootProps}
-          ref={noticeRef as any}
+          ref={nodeRef}
           role={mergedRole}
           data-notification-index={mergedIndex}
           class={clsx(
-            noticePrefixCls.value,
+            noticePrefixCls,
             className,
             (attrs as any).class,
-            classNames?.root,
+            ncs?.root,
             {
-              [`${noticePrefixCls.value}-closable`]: mergedClosable.value,
-              [`${noticePrefixCls.value}-stack-in-threshold`]: props.stackInThreshold,
+              [`${noticePrefixCls}-closable`]: mergedClosable.value,
+              [`${noticePrefixCls}-stack-in-threshold`]: stackInThreshold,
             },
           )}
-          style={mergedStyle}
-          onClick={onClick}
+          style={{
+            ...mergedStyle,
+            ...((attrs as any).style as CSSProperties | undefined),
+          }}
+          onClick={props.onClick}
           onMouseenter={onInternalMouseEnter}
           onMouseleave={onInternalMouseLeave}
         >
@@ -336,11 +294,10 @@ const Notification = defineComponent({
 
           {mergedClosable.value && (
             <button
-              type="button"
-              class={clsx(`${noticePrefixCls.value}-close`, classNames?.close)}
+              class={clsx(`${noticePrefixCls}-close`, ncs?.close)}
               aria-label="Close"
               {...closeBtnAriaProps.value}
-              style={styles?.close}
+              style={nss?.close}
               onClick={onInternalCloseClick}
             >
               {closableConfig.value.closeIcon}
@@ -349,15 +306,21 @@ const Notification = defineComponent({
 
           {showProgress && typeof duration === 'number' && duration > 0 && (
             <ProgressComponent
-              class={clsx(`${noticePrefixCls.value}-progress`, classNames?.progress)}
-              percent={validPercent}
-              style={styles?.progress}
+              {...{
+                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

@@ -1,84 +1,66 @@
-import type { CSSProperties, PropType, TransitionGroupProps } from 'vue'
-import { classNames as clsx } from '@v-c/util'
-import { defineComponent, h, shallowRef, TransitionGroup } from 'vue'
+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
-  class?: string
+  className?: string
   style?: CSSProperties
-  motionProps?: TransitionGroupProps
-  onAfterLeave?: () => void
 }
 
-const Content = defineComponent({
-  name: 'NotificationListContent',
-  inheritAttrs: false,
-  props: {
-    listPrefixCls: { type: String, required: true },
-    height: { type: Number, required: true },
-    topNoticeHeight: { type: Number, default: 0 },
-    topNoticeWidth: { type: Number, default: 0 },
-    class: { type: String, default: undefined },
-    style: { type: Object as PropType<CSSProperties>, default: undefined },
-    motionProps: { type: Object as PropType<TransitionGroupProps>, default: undefined },
-    onAfterLeave: { type: Function as PropType<() => void>, default: undefined },
-  },
-  setup(props, { slots, expose }) {
+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
-    const innerRef = shallowRef<HTMLElement | null>(null)
+
     expose({
-      get nativeElement() {
-        return innerRef.value
-      },
+      nativeElement: contentRef,
     })
 
     return () => {
       const {
         listPrefixCls,
         height,
-        topNoticeHeight,
-        topNoticeWidth,
-        class: className,
+        topNoticeHeight = 0,
+        topNoticeWidth = 0,
+        className,
         style,
-        motionProps,
-        onAfterLeave,
       } = props
-      const heightStatus: 'increase' | 'decrease' = height < prevHeight ? 'decrease' : 'increase'
+
+      const heightStatus = height < prevHeight ? 'decrease' : 'increase'
       prevHeight = height
 
       const contentPrefixCls = `${listPrefixCls}-content`
-      const contentStyle: CSSProperties & Record<string, any> = {
+      const contentStyle: ContentStyle = {
         ...style,
-        'height': `${height}px`,
-        '--top-notificiation-height': `${topNoticeHeight ?? 0}px`,
-        '--top-notificiation-width': `${topNoticeWidth ?? 0}px`,
+        height,
+        '--top-notificiation-height': `${topNoticeHeight}px`,
+        '--top-notificiation-width': `${topNoticeWidth}px`,
       }
-      const contentClass = clsx(
-        contentPrefixCls,
-        `${contentPrefixCls}-${heightStatus}`,
-        className,
-      )
 
-      return h(
-        TransitionGroup,
-        {
-          tag: 'div',
-          appear: true,
-          ...motionProps,
-          ref: (el: any) => {
-            innerRef.value = (el?.$el ?? el) as HTMLElement | null
-          },
-          class: contentClass,
-          style: contentStyle,
-          onAfterLeave,
-        },
-        () => slots.default?.(),
+      return (
+        <div
+          ref={contentRef}
+          class={clsx(contentPrefixCls, `${contentPrefixCls}-${heightStatus}`, className)}
+          style={contentStyle}
+        >
+          {slots.default?.()}
+        </div>
       )
     }
   },
-})
+  {
+    name: 'NotificationListContent',
+    inheritAttrs: false,
+  },
+)
 
 export default Content