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

package/src/NotificationList/index.tsx

@@ -0,0 +1,298 @@
+import type { CSSProperties, PropType, TransitionGroupProps } from 'vue'
+import type { StackInput } from '../hooks/useStack'
+import type {
+  ComponentsType,
+  NotificationClassNames as NoticeClassNames,
+  NotificationStyles as NoticeStyles,
+  NotificationProps,
+} from '../Notification'
+import { classNames as clsx } from '@v-c/util'
+import { getTransitionGroupProps } from '@v-c/util/dist/utils/transition'
+import { computed, defineComponent, inject, nextTick, onMounted, ref, shallowRef, toRef, watch } from 'vue'
+import useListPosition from '../hooks/useListPosition'
+import useStack from '../hooks/useStack'
+import Notification from '../Notification'
+import { NotificationContext } from '../NotificationProvider'
+import Content from './Content'
+
+type Key = string | number | symbol
+
+export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight'
+
+export type { StackConfig, StackInput } from '../hooks/useStack'
+export type { ComponentsType } from '../Notification'
+
+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?: StackInput
+  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
+  class?: 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(
+  classNamesList: (NotificationClassNames | undefined)[],
+): NotificationClassNames {
+  return noticeSlotKeys.reduce<NotificationClassNames>((merged, key) => {
+    merged[key] = clsx(...classNamesList.map(cn => cn?.[key]))
+    return merged
+  }, {})
+}
+
+function fillStyles(stylesList: (NotificationStyles | undefined)[]): NotificationStyles {
+  return noticeSlotKeys.reduce<NotificationStyles>((merged, key) => {
+    merged[key] = Object.assign({}, ...stylesList.map(s => s?.[key]))
+    return merged
+  }, {})
+}
+
+const NotificationList = defineComponent({
+  name: 'NotificationList',
+  inheritAttrs: false,
+  props: {
+    configList: { type: Array as PropType<NotificationListConfig[]>, default: () => [] },
+    prefixCls: { type: String, default: 'vc-notification' },
+    placement: { type: String as PropType<Placement>, required: true },
+    pauseOnHover: { type: Boolean, 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 },
+    stack: { type: [Boolean, Object] as PropType<StackInput>, default: undefined },
+    motion: {
+      type: [Object, Function] as PropType<NotificationListProps['motion']>,
+      default: undefined,
+    },
+    class: { type: String, default: undefined },
+    style: { type: Object as PropType<CSSProperties>, default: undefined },
+    onNoticeClose: { type: Function as PropType<(key: Key) => void>, default: undefined },
+    onAllRemoved: { type: Function as PropType<(placement: Placement) => void>, default: undefined },
+  },
+  setup(props, { attrs }) {
+    const ctx = inject(NotificationContext, ref({}))
+
+    // ========================== Data ==========================
+    const keys = computed(() =>
+      props.configList.map(config => ({
+        config,
+        key: String(config.key),
+      })),
+    )
+
+    // ===================== Motion Config ======================
+    const placementMotion = computed(() => {
+      if (typeof props.motion === 'function') {
+        return props.motion(props.placement)
+      }
+      return props.motion
+    })
+
+    const motionGroupProps = computed<TransitionGroupProps>(() => {
+      const motionVal = placementMotion.value
+      if (!motionVal) {
+        return {}
+      }
+      if (motionVal.name) {
+        return getTransitionGroupProps(motionVal.name, motionVal as any)
+      }
+      return { ...motionVal }
+    })
+
+    // ====================== Stack State =======================
+    const [stackEnabled, stackParams] = useStack(toRef(props, 'stack'))
+    const listHovering = shallowRef(false)
+    const expanded = computed(
+      () =>
+        stackEnabled.value
+        && (listHovering.value || keys.value.length <= stackParams.value.threshold),
+    )
+
+    // ====================== Stack Layout ======================
+    const stackPosition = computed(() => {
+      if (!stackEnabled.value || expanded.value) {
+        return undefined
+      }
+      return {
+        offset: stackParams.value.offset,
+        threshold: stackParams.value.threshold,
+      }
+    })
+
+    // ====================== List Measure ======================
+    const gap = shallowRef(0)
+    const contentRef = shallowRef<{ nativeElement: HTMLElement | null } | null>(null)
+    const configListRef = computed(() => props.configList)
+    const [
+      notificationPosition,
+      setNodeSize,
+      totalHeight,
+      topNoticeHeight,
+      topNoticeWidth,
+    ] = useListPosition(configListRef, stackPosition, gap)
+
+    const hasConfigList = computed(() => keys.value.length > 0)
+
+    function syncGap() {
+      const node = contentRef.value?.nativeElement
+      if (!node)
+        return
+      const { gap: cssGap, rowGap } = window.getComputedStyle(node)
+      const next = Number.parseFloat(rowGap || cssGap) || 0
+      if (next !== gap.value) {
+        gap.value = next
+      }
+    }
+
+    onMounted(syncGap)
+    watch(hasConfigList, () => {
+      nextTick(syncGap)
+    })
+
+    // ====================== All Removed =======================
+    function checkAllClosed() {
+      if (!props.placement) {
+        return
+      }
+      if (keys.value.length === 0) {
+        props.onAllRemoved?.(props.placement)
+      }
+    }
+
+    return () => {
+      const {
+        prefixCls = 'vc-notification',
+        placement,
+        classNames,
+        styles,
+        components,
+        pauseOnHover,
+        class: className,
+        style,
+        onNoticeClose,
+      } = props
+
+      const listPrefixCls = `${prefixCls}-list`
+      const ctxClassNames = (ctx.value as any)?.classNames
+
+      const renderItems = () =>
+        keys.value.map(({ config }) => {
+          const {
+            key,
+            placement: itemPlacement,
+            onClose: configOnClose,
+            ...notificationConfig
+          } = config
+          const strKey = String(key)
+          const dataIndex = keys.value.findIndex(item => item.key === strKey)
+          const notificationIndex
+            = dataIndex === -1 ? undefined : keys.value.length - dataIndex - 1
+          const stackInThreshold
+            = stackEnabled.value
+              && notificationIndex !== undefined
+              && notificationIndex < stackParams.value.threshold
+
+          return (
+            <Notification
+              {...(notificationConfig as any)}
+              key={strKey}
+              ref={(el: any) => {
+                const node = el?.nativeElement ?? null
+                setNodeSize(strKey, node)
+              }}
+              prefixCls={prefixCls}
+              class={clsx(ctxClassNames?.notice, config.class)}
+              classNames={fillClassNames([classNames, config.classNames])}
+              styles={fillStyles([styles, config.styles])}
+              components={{ ...components, ...config.components }}
+              hovering={stackEnabled.value && listHovering.value}
+              pauseOnHover={config.pauseOnHover ?? pauseOnHover}
+              offset={notificationPosition.value.get(strKey)}
+              notificationIndex={notificationIndex}
+              stackInThreshold={!!stackInThreshold}
+              onClose={() => {
+                configOnClose?.()
+                onNoticeClose?.(key)
+              }}
+            />
+          )
+        })
+
+      return (
+        <div
+          class={clsx(
+            prefixCls,
+            listPrefixCls,
+            `${prefixCls}-${placement}`,
+            ctxClassNames?.list,
+            className,
+            (attrs as any).class,
+            classNames?.list,
+            {
+              [`${prefixCls}-stack`]: stackEnabled.value,
+              [`${prefixCls}-stack-expanded`]: expanded.value,
+              [`${listPrefixCls}-hovered`]: listHovering.value,
+            },
+          )}
+          onMouseenter={() => {
+            listHovering.value = true
+          }}
+          onMouseleave={() => {
+            listHovering.value = false
+          }}
+          style={{ ...styles?.list, ...style }}
+        >
+          <Content
+            ref={contentRef as any}
+            listPrefixCls={listPrefixCls}
+            height={totalHeight.value}
+            topNoticeHeight={topNoticeHeight.value}
+            topNoticeWidth={topNoticeWidth.value}
+            class={classNames?.listContent}
+            style={styles?.listContent}
+            motionProps={motionGroupProps.value}
+            onAfterLeave={checkAllClosed}
+          >
+            {renderItems()}
+          </Content>
+        </div>
+      )
+    }
+  },
+})
+
+export default NotificationList

package/src/NotificationProvider.tsx

@@ -1,5 +1,5 @@
-import type { InjectionKey, Ref } from 'vue'
-import { inject, provide, ref } from 'vue'
+import type { InjectionKey, PropType, Ref } from 'vue'
+import { computed, defineComponent, inject, provide, ref } from 'vue'
 
 export interface NotificationContextProps {
   classNames?: {
@@ -7,7 +7,10 @@ export interface NotificationContextProps {
     list?: string
   }
 }
-export const NotificationContext: InjectionKey<Ref<NotificationContextProps>> = Symbol('NotificationContext')
+
+export const NotificationContext: InjectionKey<Ref<NotificationContextProps>> = Symbol(
+  'NotificationContext',
+)
 
 export function useNotificationProvider(props: Ref<NotificationContextProps>) {
   provide(NotificationContext, props)
@@ -17,3 +20,20 @@ export function useNotificationProvider(props: Ref<NotificationContextProps>) {
 export function useNotificationContext() {
   return inject(NotificationContext, ref({}))
 }
+
+const NotificationProvider = defineComponent({
+  name: 'NotificationProvider',
+  props: {
+    classNames: {
+      type: Object as PropType<NotificationContextProps['classNames']>,
+      default: undefined,
+    },
+  },
+  setup(props, { slots }) {
+    const ctx = computed<NotificationContextProps>(() => ({ classNames: props.classNames }))
+    provide(NotificationContext, ctx)
+    return () => slots.default?.()
+  },
+})
+
+export default NotificationProvider

package/src/Notifications.tsx

@@ -1,18 +1,34 @@
 import type { VueNode } from '@v-c/util/dist/type'
-import type { CSSProperties, TransitionGroupProps } from 'vue'
-import type { InnerOpenConfig, Key, OpenConfig, Placement, Placements, StackConfig } from './interface.ts'
+import type { CSSProperties, PropType, TransitionGroupProps } from 'vue'
+import type {
+  ComponentsType,
+  NotificationClassNames,
+  NotificationListConfig,
+  NotificationStyles,
+  Placement,
+  StackInput,
+} from './NotificationList'
 import { defineComponent, shallowRef, Teleport, watch } from 'vue'
-import NoticeList from './NoticeList.tsx'
+import NotificationList from './NotificationList'
+
+type Key = string | number | symbol
 
 export interface NotificationsProps {
   prefixCls?: string
-  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
-  container?: HTMLElement | ShadowRoot
-  maxCount?: number
+  classNames?: NotificationClassNames
+  styles?: NotificationStyles
+  components?: ComponentsType
   className?: (placement: Placement) => string
   style?: (placement: Placement) => CSSProperties
+
+  container?: HTMLElement | ShadowRoot
+  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
+
+  maxCount?: number
+  pauseOnHover?: boolean
+  stack?: StackInput
+
   onAllRemoved?: VoidFunction
-  stack?: StackConfig
   renderNotifications?: (
     node: VueNode,
     info: { prefixCls: string, key: Key },
@@ -20,41 +36,50 @@ export interface NotificationsProps {
 }
 
 export interface NotificationsRef {
-  open: (config: OpenConfig) => void
+  open: (config: NotificationListConfig) => void
   close: (key: Key) => void
   destroy: () => void
 }
 
-const defaults = {
-  prefixCls: 'vc-notification',
-} as NotificationsProps
-
-const Notifications = defineComponent<NotificationsProps>(
-  (props = defaults, { expose }) => {
-    const configList = shallowRef<OpenConfig[]>([])
-    // ======================== Close =========================
-    const onNoticeClose = (key: Key) => {
-      // Trigger close event
-      const config = configList.value.find(item => item.key === key)
-      const closable = config?.closable
-      const closableObj = closable && typeof closable === 'object' ? closable : {}
-      closableObj.onClose?.()
-      config?.onClose?.()
-      configList.value = configList.value.filter(item => item.key !== key)
-    }
+type Placements = Partial<Record<Placement, NotificationListConfig[]>>
+
+const Notifications = defineComponent({
+  name: 'Notifications',
+  inheritAttrs: false,
+  props: {
+    prefixCls: { type: String, default: 'vc-notification' },
+    classNames: { type: Object as PropType<NotificationClassNames>, default: undefined },
+    styles: { type: Object as PropType<NotificationStyles>, default: undefined },
+    components: { type: Object as PropType<ComponentsType>, default: undefined },
+    className: { type: Function as PropType<(p: Placement) => string>, default: undefined },
+    style: { type: Function as PropType<(p: Placement) => CSSProperties>, default: undefined },
+    container: { type: Object as PropType<HTMLElement | ShadowRoot>, default: undefined },
+    motion: {
+      type: [Object, Function] as PropType<NotificationsProps['motion']>,
+      default: undefined,
+    },
+    maxCount: { type: Number, default: undefined },
+    pauseOnHover: { type: Boolean, default: undefined },
+    stack: { type: [Boolean, Object] as PropType<StackInput>, default: undefined },
+    onAllRemoved: { type: Function as PropType<VoidFunction>, default: undefined },
+    renderNotifications: {
+      type: Function as PropType<NotificationsProps['renderNotifications']>,
+      default: undefined,
+    },
+  },
+  setup(props, { expose }) {
+    const configList = shallowRef<NotificationListConfig[]>([])
+    const placements = shallowRef<Placements>({})
+    const emptyRef = shallowRef(false)
 
-    // ========================= Refs =========================
     expose({
-      open: (config: OpenConfig) => {
+      open: (config: NotificationListConfig) => {
         const list = configList.value
-        let clone = [...configList.value]
-        // Replace if exist
+        let clone = [...list]
         const index = clone.findIndex(item => item.key === config.key)
-        const innerConfig: InnerOpenConfig = {
-          ...config,
-        }
+        const innerConfig: NotificationListConfig = { ...config }
         if (index >= 0) {
-          innerConfig.times = ((list[index] as InnerOpenConfig)?.times || 0) + 1
+          innerConfig.times = (list[index]?.times ?? 0) + 1
           clone[index] = innerConfig
         }
         else {
@@ -67,98 +92,89 @@ const Notifications = defineComponent<NotificationsProps>(
         }
         configList.value = clone
       },
-      close: onNoticeClose,
+      close: (key: Key) => {
+        configList.value = configList.value.filter(item => item.key !== key)
+      },
       destroy: () => {
         configList.value = []
       },
-    })
-
-    // ====================== Placements ======================
-
-    const placements = shallowRef<Placements>({})
+    } as NotificationsRef)
 
     watch(
       configList,
       () => {
-        const nextPlacements: Placements = {}
+        const next: Placements = {}
         configList.value.forEach((config) => {
-          const { placement = 'topRight' } = config
-          if (placement) {
-            nextPlacements[placement] = nextPlacements[placement] || []
-            nextPlacements[placement].push(config)
-          }
+          const placement = config.placement ?? 'topRight'
+          next[placement] = next[placement] || []
+          next[placement]!.push(config)
         })
-        // Fill exist placements to avoid empty list causing remove without motion
-        Object.keys(placements.value).forEach((_placement) => {
-          const placement = _placement as Placement
-          nextPlacements[placement] = nextPlacements[placement] || []
+        Object.keys(placements.value).forEach((placement) => {
+          next[placement as Placement] = next[placement as Placement] || []
         })
-        placements.value = nextPlacements
+        placements.value = next
       },
+      { immediate: true },
     )
 
-    // Clean up container if all notices fade out
-    const onAllNoticeRemoved = (placement: Placement) => {
+    function onAllNoticeRemoved(placement: Placement) {
       const clone = { ...placements.value }
-      const list = clone[placement] || []
-      if (!list.length) {
+      if (!(clone[placement] || []).length) {
         delete clone[placement]
       }
       placements.value = clone
     }
 
-    // Effect tell that placements is empty now
-    const emptyRef = shallowRef(false)
-
-    watch(
-      placements,
-      () => {
-        if (Object.keys(placements.value).length > 0) {
-          emptyRef.value = true
-        }
-        else if (emptyRef.value) {
-        // Trigger only when from exist to empty
-          props?.onAllRemoved?.()
-          emptyRef.value = false
-        }
-      },
-    )
+    watch(placements, () => {
+      if (Object.keys(placements.value).length > 0) {
+        emptyRef.value = true
+      }
+      else if (emptyRef.value) {
+        props.onAllRemoved?.()
+        emptyRef.value = false
+      }
+    })
 
     return () => {
-      const { container } = props
-      const prefixCls = props.prefixCls ?? defaults.prefixCls ?? ''
-      // ======================== Render ========================
+      const { container, prefixCls = 'vc-notification' } = props
       if (!container) {
         return null
       }
 
+      const placementList = Object.keys(placements.value) as Placement[]
+
       return (
         <Teleport to={container}>
-          {Object.keys(placements.value).map((placement) => {
-            const placementConfigList = placements.value[placement as Placement]
+          {placementList.map((placement) => {
             const list = (
-              <NoticeList
+              <NotificationList
                 key={placement}
-                configList={placementConfigList}
-                placement={placement as Placement}
+                configList={placements.value[placement]}
+                placement={placement}
                 prefixCls={prefixCls}
-                class={props.className?.(placement as Placement)}
-                style={props.style?.(placement as Placement)}
+                pauseOnHover={props.pauseOnHover}
+                classNames={props.classNames}
+                styles={props.styles}
+                components={props.components}
+                class={props.className?.(placement)}
+                style={props.style?.(placement)}
                 motion={props.motion}
                 stack={props.stack}
-                onAllNoticeRemoved={() => onAllNoticeRemoved(placement as Placement)}
-                onNoticeClose={onNoticeClose}
+                onNoticeClose={(key) => {
+                  configList.value = configList.value.filter(item => item.key !== key)
+                }}
+                onAllRemoved={onAllNoticeRemoved}
               />
             )
-            return props.renderNotifications ? props.renderNotifications(list, { prefixCls, key: placement }) : list
+
+            return props.renderNotifications
+              ? props.renderNotifications(list, { prefixCls, key: placement })
+              : list
           })}
         </Teleport>
       )
     }
   },
-  {
-    name: 'Notifications',
-  },
-)
+})
 
 export default Notifications

package/src/Progress.tsx

@@ -0,0 +1,23 @@
+import type { CSSProperties, FunctionalComponent } from 'vue'
+
+export interface NotificationProgressProps {
+  class?: string
+  style?: CSSProperties
+  percent: number
+}
+
+const Progress: FunctionalComponent<NotificationProgressProps> = (props) => {
+  return (
+    <progress
+      class={props.class}
+      max="100"
+      value={props.percent}
+      style={props.style}
+    />
+  )
+}
+
+Progress.props = ['class', 'style', 'percent'] as any
+Progress.inheritAttrs = false
+
+export default Progress

package/src/hooks/useClosable.ts

@@ -0,0 +1,54 @@
+import type { VueNode } from '@v-c/util/dist/type'
+import type { ComputedRef, MaybeRef } from 'vue'
+import pickAttrs from '@v-c/util/dist/pickAttrs'
+import { computed, unref } from 'vue'
+
+export type ClosableConfig = {
+  closeIcon?: VueNode
+  disabled?: boolean
+  onClose?: VoidFunction
+} & Record<string, any>
+
+export type ClosableType = boolean | ClosableConfig | null | undefined
+
+export interface ParsedClosableConfig {
+  closeIcon: VueNode
+  disabled: boolean
+  onClose?: VoidFunction
+  [key: string]: any
+}
+
+/**
+ * Normalize the closable option into an enabled flag, parsed config, and aria props.
+ */
+export default function useClosable(closable: MaybeRef<ClosableType>): [
+  ComputedRef<boolean>,
+  ComputedRef<ParsedClosableConfig>,
+  ComputedRef<Record<string, any>>,
+] {
+  const closableObj = computed<ClosableConfig>(() => {
+    const value = unref(closable)
+    if (value === false) {
+      return { closeIcon: null, disabled: true }
+    }
+    if (typeof value === 'object' && value !== null) {
+      return value
+    }
+    return {}
+  })
+
+  const enabled = computed(() => !!unref(closable))
+
+  const closableConfig = computed<ParsedClosableConfig>(() => {
+    const obj = closableObj.value
+    return {
+      ...obj,
+      closeIcon: 'closeIcon' in obj ? obj.closeIcon : '×',
+      disabled: obj.disabled ?? false,
+    }
+  })
+
+  const closableAriaProps = computed(() => pickAttrs(closableConfig.value, true))
+
+  return [enabled, closableConfig, closableAriaProps]
+}