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

package/dist/interface.d.ts

@@ -1,55 +0,0 @@
-import { VueNode } from '@v-c/util/dist/type';
-import { 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;
-};
-export {};

package/src/Notice.tsx

@@ -1,212 +0,0 @@
-import type { CSSProperties } from 'vue'
-import type { Key, NoticeConfig } from './interface.ts'
-import { classNames } from '@v-c/util'
-import KeyCode from '@v-c/util/dist/KeyCode'
-import pickAttrs from '@v-c/util/dist/pickAttrs'
-import { computed, defineComponent, shallowRef, watch } from 'vue'
-
-export interface NoticeProps extends Omit<NoticeConfig, 'onClose'> {
-  prefixCls: string
-  eventKey: Key
-  onClick?: (event: Event) => void
-  onNoticeClose?: (key: Key) => void
-  hovering?: boolean
-  props?: Record<string, any>
-}
-
-const defaults = {
-  duration: 4.5,
-  pauseOnHover: true,
-  closeIcon: 'x',
-} as const
-
-const Notify = defineComponent<NoticeProps & { times?: number }>((props, { attrs }) => {
-  const hovering = shallowRef(false)
-  const percent = shallowRef(0)
-  const spentTime = shallowRef(0)
-
-  const mergedHovering = computed(() => props.hovering || hovering.value)
-  const mergedDuration = computed(() => {
-    if (typeof props.duration === 'number') {
-      return props.duration
-    }
-    if (props.duration === undefined) {
-      return defaults.duration
-    }
-    return 0
-  })
-  const mergedPauseOnHover = computed(() =>
-    props.pauseOnHover === undefined ? defaults.pauseOnHover : props.pauseOnHover,
-  )
-  const mergedShowProgress = computed(() => mergedDuration.value > 0 && props.showProgress)
-  const mergedCloseIcon = computed(() => props.closeIcon ?? defaults.closeIcon)
-
-  // ======================== Close =========================
-  const onInternalClose = () => {
-    props.onNoticeClose?.(props.eventKey)
-  }
-
-  const onCloseKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === KeyCode.ENTER) {
-      onInternalClose()
-    }
-  }
-
-  // ======================== Timing ========================
-  watch([
-    () => props.times,
-    mergedDuration,
-    mergedHovering,
-  ], (_n, _, onCleanup) => {
-    const duration = mergedDuration.value
-    const hoveringValue = mergedHovering.value
-    const pauseOnHover = mergedPauseOnHover.value
-    if (!hoveringValue && duration > 0) {
-      const start = Date.now() - spentTime.value
-      const timeoutId = window.setTimeout(() => {
-        onInternalClose()
-      }, duration * 1000 - spentTime.value)
-
-      onCleanup(() => {
-        if (pauseOnHover) {
-          clearTimeout(timeoutId)
-        }
-        spentTime.value = Date.now() - start
-      })
-    }
-  }, {
-    immediate: true,
-  })
-
-  // ===================== Progress Bar =====================
-  watch([
-    () => props.times,
-    mergedDuration,
-    spentTime,
-    mergedHovering,
-    mergedShowProgress,
-  ], (_n, _, onCleanup) => {
-    const hoveringValue = mergedHovering.value
-    const showProgress = mergedShowProgress.value
-    const pauseOnHover = mergedPauseOnHover.value
-    const duration = mergedDuration.value
-    const baseSpentTime = spentTime.value
-
-    if (!hoveringValue && showProgress && (pauseOnHover || baseSpentTime === 0)) {
-      const start = performance.now()
-      let animationFrame = 0
-
-      const calculate = () => {
-        cancelAnimationFrame(animationFrame)
-        animationFrame = requestAnimationFrame((timestamp) => {
-          const runtime = timestamp + baseSpentTime - start
-          const progress = Math.min(runtime / (duration * 1000), 1)
-          percent.value = progress * 100
-          if (progress < 1) {
-            calculate()
-          }
-        })
-      }
-
-      calculate()
-
-      onCleanup(() => {
-        if (pauseOnHover) {
-          cancelAnimationFrame(animationFrame)
-        }
-      })
-    }
-  }, {
-    immediate: true,
-  })
-
-  return () => {
-    const {
-      closable,
-      prefixCls,
-      props: divProps,
-      onClick,
-      content,
-      className,
-      style,
-    } = props
-
-    // ======================== Closable ========================
-    const closableConfig
-      = typeof closable === 'object' && closable !== null
-        ? closable
-        : closable
-          ? { closeIcon: mergedCloseIcon.value }
-          : {}
-    const ariaProps = pickAttrs(closableConfig, true)
-
-    // ======================== Progress ========================
-    const safePercent = percent.value <= 0 ? 0 : percent.value > 100 ? 100 : percent.value
-    const validPercent = 100 - safePercent
-
-    // ======================== Render ========================
-    const noticePrefixCls = `${prefixCls}-notice`
-
-    const mergedStyle: CSSProperties = {
-      ...(typeof divProps?.style === 'object' && divProps?.style ? divProps.style : {}),
-      ...(typeof (attrs as any).style === 'object' && (attrs as any).style ? (attrs as any).style : {}),
-      ...(typeof style === 'object' && style ? style : {}),
-    }
-
-    return (
-      <div
-        {...divProps}
-        class={
-          classNames(
-            noticePrefixCls,
-            className,
-            (attrs as any).class,
-            {
-              [`${noticePrefixCls}-closable`]: !!closable,
-            },
-          )
-        }
-        style={mergedStyle}
-        onMouseenter={(e: MouseEvent) => {
-          hovering.value = true
-          divProps?.onMouseEnter?.(e)
-        }}
-        onMouseleave={(e: MouseEvent) => {
-          hovering.value = false
-          divProps?.onMouseLeave?.(e)
-        }}
-        onClick={onClick}
-      >
-        {/* Content */}
-        <div class={`${noticePrefixCls}-content`}>{content}</div>
-
-        {/* Close Icon */}
-        {closable && (
-          <button
-            type="button"
-            class={`${noticePrefixCls}-close`}
-            onKeydown={onCloseKeyDown}
-            aria-label="Close"
-            {...ariaProps}
-            onClick={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              onInternalClose()
-            }}
-          >
-            {closableConfig.closeIcon ?? mergedCloseIcon.value}
-          </button>
-        )}
-
-        {/* Progress Bar */}
-        {mergedShowProgress.value && (
-          <progress class={`${noticePrefixCls}-progress`} max="100" value={validPercent}>
-            {`${validPercent}%`}
-          </progress>
-        )}
-      </div>
-    )
-  }
-})
-
-export default Notify

package/src/NoticeList.tsx

@@ -1,219 +0,0 @@
-import type { CSSProperties, TransitionGroupProps } from 'vue'
-import type { InnerOpenConfig, Key, NoticeConfig, OpenConfig, Placement, StackConfig } from './interface.ts'
-import { classNames as 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, reactive, ref, shallowRef, toRef, TransitionGroup, watch, watchEffect } from 'vue'
-import useStack from './hooks/useStack.ts'
-import Notice from './Notice.tsx'
-import { useNotificationContext } from './NotificationProvider.tsx'
-
-export interface NoticeListProps {
-  configList?: OpenConfig[]
-  placement?: Placement
-  prefixCls?: string
-  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
-  stack?: StackConfig
-
-  // Events
-  onAllNoticeRemoved?: (placement: Placement) => void
-  onNoticeClose?: (key: Key) => void
-}
-
-const NoticeList = defineComponent<NoticeListProps>((props, { attrs }) => {
-  const ctx = useNotificationContext()
-  const dictRef = reactive<Record<string, HTMLDivElement | undefined>>({})
-  const keys = computed(() =>
-    (props.configList ?? []).map(config => ({
-      config,
-      key: String(config.key),
-    })),
-  )
-  const latestNotice = shallowRef<HTMLDivElement | null>(null)
-  const hoverKeys = ref<string[]>([])
-
-  const stackConfig = toRef(props, 'stack')
-  const [stackEnabled, stackOptions] = useStack(stackConfig)
-  const stackActive = computed(() => stackEnabled.value || stackConfig.value === false)
-  const expanded = computed(() => {
-    if (!stackActive.value) {
-      return false
-    }
-    if (!stackEnabled.value) {
-      return true
-    }
-    return hoverKeys.value.length > 0 || keys.value.length <= stackOptions.threshold!.value!
-  })
-  const placementMotion = computed(() => {
-    if (typeof props.motion === 'function') {
-      return props.placement ? props.motion(props.placement) : undefined
-    }
-    return props.motion
-  })
-
-  // Clean hover key
-  watch([hoverKeys, keys, stackEnabled], () => {
-    if (stackEnabled.value && hoverKeys.value.length > 1) {
-      hoverKeys.value = hoverKeys.value.filter(key =>
-        keys.value.some(({ key: dataKey }) => key === dataKey),
-      )
-    }
-  })
-  watch(stackEnabled, (enabled) => {
-    if (!enabled && hoverKeys.value.length) {
-      hoverKeys.value = []
-    }
-  })
-
-  // Sync latest notice after DOM updates so collapsed stack uses accurate height
-  watchEffect(
-    () => {
-      if (!stackActive.value) {
-        latestNotice.value = null
-        return
-      }
-
-      const lastKey = keys.value[keys.value.length - 1]?.key
-      latestNotice.value = lastKey ? dictRef[lastKey] ?? null : null
-    },
-    { flush: 'post' },
-  )
-
-  const checkAllClosed = () => {
-    if (!props.placement) {
-      return
-    }
-    if (keys.value.length === 0) {
-      props.onAllNoticeRemoved?.(props.placement)
-    }
-  }
-
-  return () => {
-    const { prefixCls = '', placement = 'topRight', onNoticeClose } = props
-
-    const renderNotify = () =>
-      keys.value.map(({ config }, motionIndex) => {
-        const { key, times } = config as InnerOpenConfig
-        const strKey = String(key)
-        const {
-          className: configClassName,
-          style: configStyle,
-          classNames: configClassNames,
-          styles: configStyles,
-          ...restConfig
-        } = config as NoticeConfig
-        const dataIndex = keys.value.findIndex(item => item.key === strKey)
-        const stackStyle: CSSProperties = {}
-
-        if (stackActive.value) {
-          const index = keys.value.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1)
-          const transformX = placement === 'top' || placement === 'bottom' ? '-50%' : '0'
-          if (index > 0) {
-            stackStyle.height = expanded.value
-              ? dictRef[strKey]?.offsetHeight
-              : latestNotice.value?.offsetHeight
-            if (stackStyle.height && typeof stackStyle.height === 'number') {
-              stackStyle.height = `${stackStyle.height}px`
-            }
-            let verticalOffset = 0
-            for (let i = 0; i < index; i += 1) {
-              const targetKey = keys.value[keys.value.length - 1 - i]?.key
-              const node = targetKey ? dictRef[targetKey] : null
-              verticalOffset += (node?.offsetHeight ?? 0) + stackOptions.gap!.value!
-            }
-
-            const transformY
-              = (expanded.value ? verticalOffset : index * stackOptions.offset!.value!)
-                * (placement.startsWith('top') ? 1 : -1)
-            const currentWidth = dictRef[strKey]?.offsetWidth
-            const latestWidth = latestNotice.value?.offsetWidth
-            const scaleX
-              = !expanded.value && latestWidth && currentWidth
-                ? (latestWidth - stackOptions.offset!.value! * 2 * (index < 3 ? index : 3))
-                / currentWidth
-                : 1
-            stackStyle.transform = `translate3d(${transformX}, ${transformY}px, 0) scaleX(${scaleX})`
-          }
-          else {
-            stackStyle.transform = `translate3d(${transformX}, 0, 0)`
-          }
-        }
-        return (
-          <div
-            key={strKey}
-            class={clsx(`${prefixCls}-notice-wrapper`, configClassNames?.wrapper)}
-            style={{
-              ...stackStyle,
-              ...configStyles?.wrapper,
-            }}
-            onMouseenter={() => {
-              if (!stackEnabled.value) {
-                return
-              }
-              hoverKeys.value = hoverKeys.value.includes(strKey)
-                ? hoverKeys.value
-                : [...hoverKeys.value, strKey]
-            }}
-            onMouseleave={() => {
-              if (!stackEnabled.value) {
-                return
-              }
-              hoverKeys.value = hoverKeys.value.filter(k => k !== strKey)
-            }}
-          >
-            <Notice
-              {...restConfig as any}
-              ref={(el) => {
-                const element = unrefElement<HTMLDivElement>(el as any) ?? undefined
-                if (dataIndex > -1) {
-                  dictRef[strKey] = element
-                }
-                else {
-                  delete dictRef[strKey]
-                }
-              }}
-              prefixCls={prefixCls}
-              classNames={configClassNames}
-              styles={configStyles}
-              class={clsx(configClassName, (ctx.value as any)?.classNames?.notice)}
-              style={configStyle}
-              times={times}
-              eventKey={key}
-              onNoticeClose={onNoticeClose}
-              hovering={stackEnabled.value && hoverKeys.value.length > 0}
-            />
-          </div>
-        )
-      })
-    let motionGroupProps: TransitionGroupProps = {}
-    if (placementMotion.value) {
-      motionGroupProps = getTransitionGroupProps(placementMotion.value.name!, placementMotion.value)
-    }
-    return (
-      <TransitionGroup
-        key={placement}
-        tag="div"
-        appear
-        {...{
-          class: clsx(
-            prefixCls,
-            `${prefixCls}-${placement}`,
-            (ctx.value as any)?.classNames?.list,
-            (attrs as any).class,
-            {
-              [`${prefixCls}-stack-expanded`]: expanded.value,
-              [`${prefixCls}-stack`]: stackActive.value,
-            },
-          ),
-          style: (attrs as any).style,
-        }}
-        {...motionGroupProps}
-        onAfterLeave={checkAllClosed}
-      >
-        {renderNotify()}
-      </TransitionGroup>
-    )
-  }
-})
-
-export default NoticeList

package/src/interface.ts

@@ -1,61 +0,0 @@
-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
-    }