@antsoo-lib/components 0.1.11 → 0.1.12

package/src/message/index.tsx

@@ -1,263 +0,0 @@
-import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled'
-import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'
-import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled'
-import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled'
-import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
-
-import type { CSSProperties } from 'vue'
-
-import classNames from '../_util/classNames'
-import type { Key, VueNode } from '../_util/type'
-import Notification from '../vc-notification'
-import type { NotificationInstance } from '../vc-notification/Notification'
-import useStyle from './style'
-import useMessage from './useMessage'
-
-let defaultDuration = 3
-let defaultTop: string
-let messageInstance: NotificationInstance
-let key = 1
-let localPrefixCls = ''
-let transitionName = 'move-up'
-let hasTransitionName = false
-let getContainer = () => document.body
-let maxCount: number
-let rtl = false
-
-export function getKeyThenIncreaseKey() {
-  return key++
-}
-
-export interface ConfigOptions {
-  top?: string
-  duration?: number
-  prefixCls?: string
-  getContainer?: () => HTMLElement
-  transitionName?: string
-  maxCount?: number
-  rtl?: boolean
-}
-
-function setMessageConfig(options: ConfigOptions) {
-  if (options.top !== undefined) {
-    defaultTop = options.top
-    messageInstance = null // delete messageInstance for new defaultTop
-  }
-  if (options.duration !== undefined) {
-    defaultDuration = options.duration
-  }
-
-  if (options.prefixCls !== undefined) {
-    localPrefixCls = options.prefixCls
-  }
-  if (options.getContainer !== undefined) {
-    getContainer = options.getContainer
-    messageInstance = null // delete messageInstance for new getContainer
-  }
-  if (options.transitionName !== undefined) {
-    transitionName = options.transitionName
-    messageInstance = null // delete messageInstance for new transitionName
-    hasTransitionName = true
-  }
-  if (options.maxCount !== undefined) {
-    maxCount = options.maxCount
-    messageInstance = null
-  }
-  if (options.rtl !== undefined) {
-    rtl = options.rtl
-  }
-}
-
-function getMessageInstance(args: MessageArgsProps, callback: (i: NotificationInstance) => void) {
-  if (messageInstance) {
-    callback(messageInstance)
-    return
-  }
-
-  Notification.newInstance(
-    {
-      appContext: args.appContext,
-      prefixCls: args.prefixCls || localPrefixCls,
-      rootPrefixCls: args.rootPrefixCls,
-      transitionName,
-      hasTransitionName,
-      style: { top: defaultTop }, // 覆盖原来的样式
-      getContainer: getContainer || args.getPopupContainer,
-      maxCount,
-      name: 'message',
-      useStyle,
-    },
-    (instance: any) => {
-      if (messageInstance) {
-        callback(messageInstance)
-        return
-      }
-      messageInstance = instance
-      callback(instance)
-    },
-  )
-}
-
-export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading'
-
-export interface ThenableArgument {
-  (val: any): void
-}
-
-const typeToIcon = {
-  info: InfoCircleFilled,
-  success: CheckCircleFilled,
-  error: CloseCircleFilled,
-  warning: ExclamationCircleFilled,
-  loading: LoadingOutlined,
-}
-export const typeList = Object.keys(typeToIcon) as NoticeType[]
-export interface MessageType extends PromiseLike<any> {
-  (): void
-}
-
-export interface MessageArgsProps {
-  content: string | (() => VueNode) | VueNode
-  duration?: number
-  type?: NoticeType
-  prefixCls?: string
-  rootPrefixCls?: string
-  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement
-  onClose?: () => void
-  icon?: (() => VueNode) | VueNode
-  key?: string | number
-  style?: CSSProperties
-  class?: string
-  appContext?: any
-  onClick?: (e: MouseEvent) => void
-}
-
-function notice(args: MessageArgsProps): MessageType {
-  const duration = args.duration !== undefined ? args.duration : defaultDuration
-
-  const target = args.key || getKeyThenIncreaseKey()
-  const closePromise = new Promise((resolve) => {
-    const callback = () => {
-      if (typeof args.onClose === 'function') {
-        args.onClose()
-      }
-      return resolve(true)
-    }
-    getMessageInstance(args, (instance) => {
-      instance.notice({
-        key: target,
-        duration,
-        style: args.style || {},
-        class: args.class,
-        content: ({ prefixCls }) => {
-          const Icon = typeToIcon[args.type]
-          const iconNode = Icon ? <Icon /> : ''
-          const messageClass = classNames(`${prefixCls}-custom-content`, {
-            [`${prefixCls}-${args.type}`]: args.type,
-            [`${prefixCls}-rtl`]: rtl === true,
-          })
-          return (
-            <div class={messageClass}>
-              {typeof args.icon === 'function' ? args.icon() : args.icon || iconNode}
-              <span>{typeof args.content === 'function' ? args.content() : args.content}</span>
-            </div>
-          )
-        },
-        onClose: callback,
-        onClick: args.onClick,
-      })
-    })
-  })
-  const result: any = () => {
-    if (messageInstance) {
-      messageInstance.removeNotice(target)
-    }
-  }
-  result.then = (filled: ThenableArgument, rejected: ThenableArgument) =>
-    closePromise.then(filled, rejected)
-  result.promise = closePromise
-  return result
-}
-
-type ConfigDuration = number
-type JointContent = VueNode | MessageArgsProps
-export type ConfigOnClose = () => void
-
-function isArgsProps(content: JointContent): content is MessageArgsProps {
-  return (
-    Object.prototype.toString.call(content) === '[object Object]' &&
-    !!(content as MessageArgsProps).content
-  )
-}
-
-const api: any = {
-  open: notice,
-  config: setMessageConfig,
-  destroy(messageKey?: Key) {
-    if (messageInstance) {
-      if (messageKey) {
-        const { removeNotice } = messageInstance
-        removeNotice(messageKey)
-      } else {
-        const { destroy } = messageInstance
-        destroy()
-        messageInstance = null
-      }
-    }
-  },
-}
-
-export function attachTypeApi(originalApi: MessageApi, type: NoticeType) {
-  originalApi[type] = (
-    content: JointContent,
-    duration?: ConfigDuration,
-    onClose?: ConfigOnClose,
-  ) => {
-    if (isArgsProps(content)) {
-      return originalApi.open({ ...content, type })
-    }
-
-    if (typeof duration === 'function') {
-      onClose = duration
-      duration = undefined
-    }
-
-    return originalApi.open({ content, duration, type, onClose })
-  }
-}
-
-typeList.forEach((type) => attachTypeApi(api, type))
-
-api.warn = api.warning
-api.useMessage = useMessage
-export interface MessageInstance {
-  info: (content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) => MessageType
-  success: (
-    content: JointContent,
-    duration?: ConfigDuration,
-    onClose?: ConfigOnClose,
-  ) => MessageType
-  error: (content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) => MessageType
-  warning: (
-    content: JointContent,
-    duration?: ConfigDuration,
-    onClose?: ConfigOnClose,
-  ) => MessageType
-  loading: (
-    content: JointContent,
-    duration?: ConfigDuration,
-    onClose?: ConfigOnClose,
-  ) => MessageType
-  open: (args: MessageArgsProps) => MessageType
-  useMessage: typeof useMessage
-}
-
-export interface MessageApi extends MessageInstance {
-  warn: (content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) => MessageType
-  config: (options: ConfigOptions) => void
-  destroy: (messageKey?: Key) => void
-}
-
-export const getInstance = () => (process.env.NODE_ENV === 'test' ? messageInstance : null)
-
-export default api as MessageApi

package/src/message/index.zh-CN.md

@@ -1,122 +0,0 @@
----
-category: Components
-type: 反馈
-title: Message
-subtitle: 全局提示
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JjZBT6N1MusAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7qMTRoq3ZGkAAAAAAAAAAAAADrJ8AQ/original
----
-
-全局展示操作反馈信息。
-
-## 何时使用
-
-- 可提供成功、警告和错误等反馈信息。
-- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
-
-## API
-
-组件提供了一些静态方法，使用方式和参数如下：
-
-- `message.success(content, [duration], onClose)`
-- `message.error(content, [duration], onClose)`
-- `message.info(content, [duration], onClose)`
-- `message.warning(content, [duration], onClose)`
-- `message.warn(content, [duration], onClose)` // alias of warning
-- `message.loading(content, [duration], onClose)`
-
-| 参数     | 说明                                          | 类型                          | 默认值 |
-| -------- | --------------------------------------------- | ----------------------------- | ------ |
-| content  | 提示内容                                      | string\| VNode \| () => VNode | -      |
-| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number                        | 3      |
-| onClose  | 关闭时触发的回调函数                          | function                      | -      |
-
-组件同时提供 promise 接口
-
-- `message[level](content, [duration]).then(afterClose)`
-- `message[level](content, [duration], onClose).then(afterClose)`
-
-其中`message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise 。
-
-也可以对象的形式传递参数：
-
-- `message.open(config)`
-- `message.success(config)`
-- `message.error(config)`
-- `message.info(config)`
-- `message.warning(config)`
-- `message.warn(config)` // alias of warning
-- `message.loading(config)`
-
-`config` 对象属性如下：
-
-| 参数     | 说明                                          | 类型                         | 默认值 | 版本 |
-| -------- | --------------------------------------------- | ---------------------------- | ------ | ---- |
-| class    | 自定义 CSS class                              | string                       | -      |      |
-| content  | 提示内容                                      | string\| VNode \| ()=> VNode | -      |      |
-| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number                       | 3      |      |
-| icon     | 自定义图标                                    | VNode \| () => VNode         | -      |      |
-| key      | 当前提示的唯一标志                            | string \| number             | -      |      |
-| style    | 自定义内联样式                                | CSSProperties                | -      |      |
-| onClick  | 点击 message 时触发的回调函数                 | function                     | -      |      |
-| onClose  | 关闭时触发的回调函数                          | function                     | -      |      |
-
-### 全局方法
-
-还提供了全局配置和全局销毁方法：
-
-- `message.config(options)`
-- `message.destroy()`
-- `message.useMessage()`
-
-#### message.config
-
-```js
-message.config({
-  top: `100px`,
-  duration: 2,
-  maxCount: 3,
-  rtl: true,
-  prefixCls: 'my-message',
-})
-```
-
-| 参数         | 说明                                           | 类型              | 默认值              | 版本 |     |
-| ------------ | ---------------------------------------------- | ----------------- | ------------------- | ---- | --- |
-| duration     | 默认自动关闭延时，单位秒                       | number            | 3                   |      |     |
-| getContainer | 配置渲染节点的输出位置                         | () => HTMLElement | () => document.body |      |     |
-| maxCount     | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number            | -                   |      |     |
-| prefixCls    | 消息节点的 className 前缀                      | string            | `ant-message`       | 3.0  |     |
-| rtl          | 是否开启 RTL 模式                              | boolean           | false               |      |     |
-| top          | 消息距离顶部的位置                             | string            | `8px`               |      |     |
-
-## FAQ
-
-### 为什么 message 不能获取 context、Pinia 的内容和 ConfigProvider 的 `locale/prefixCls/theme` 等配置？
-
-直接调用 message 方法，antdv 会通过 `Vue.render` 动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
-
-当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 `message.useMessage` 方法会返回 `api` 实体以及 `contextHolder` 节点。将其插入到你需要获取 context 位置即可：
-
-```html
-<template>
-  <contextHolder />
-  <!-- <component :is='contextHolder'/> -->
-</template>
-<script setup>
-  import { message } from 'ant-design-vue'
-
-  const [messageApi, contextHolder] = message.useMessage()
-  messageApi.open({
-    // ...
-  })
-</script>
-```
-
-**异同**：通过 hooks 创建的 `contextHolder` 必须插入到子元素节点中才会生效，当你不需要上下文信息时请直接调用。
-
-> 可通过 [App 包裹组件](/components/app-cn) 简化 `useMessage` 等方法需要手动植入 contextHolder 的问题。
-
-### 静态方法如何设置 prefixCls ？
-
-你可以通过 [`ConfigProvider.config`](/components/config-provider-cn#configproviderconfig-4130) 进行设置。

package/src/message/interface.ts

@@ -1,49 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-import type { Key, VueNode } from '../_util/type'
-
-export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading'
-
-export interface ConfigOptions {
-  top?: number | string
-  duration?: number
-  prefixCls?: string
-  getContainer?: () => HTMLElement
-  transitionName?: string
-  maxCount?: number
-  rtl?: boolean
-}
-
-export interface ArgsProps {
-  content: string | (() => VueNode) | VueNode
-  duration?: number
-  type?: NoticeType
-  onClose?: () => void
-  icon?: (() => VueNode) | VueNode
-  key?: string | number
-  style?: CSSProperties
-  class?: string
-  onClick?: (e: Event) => void
-}
-
-export type JointContent = VueNode | ArgsProps
-
-export interface MessageType extends PromiseLike<boolean> {
-  (): void
-}
-
-export type TypeOpen = (
-  content: JointContent,
-  duration?: number | VoidFunction, // Also can use onClose directly
-  onClose?: VoidFunction,
-) => MessageType
-
-export interface MessageInstance {
-  info: TypeOpen
-  success: TypeOpen
-  error: TypeOpen
-  warning: TypeOpen
-  loading: TypeOpen
-  open: (args: ArgsProps) => MessageType
-  destroy: (key?: Key) => void
-}

package/src/message/style/index.ts

@@ -1,180 +0,0 @@
-// deps-lint-skip-all
-import { Keyframes } from '../../_util/cssinjs'
-import { resetComponent } from '../../style'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-/** Component only token. Which will handle additional calculation of alias token */
-export interface ComponentToken {
-  // Component token here
-  height: number
-  zIndexPopup: number
-}
-
-interface MessageToken extends FullToken<'Message'> {
-  // Custom token here
-  messageNoticeContentPadding: string
-}
-
-const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
-  const {
-    componentCls,
-    iconCls,
-    boxShadowSecondary,
-    colorBgElevated,
-    colorSuccess,
-    colorError,
-    colorWarning,
-    colorInfo,
-    fontSizeLG,
-    motionEaseInOutCirc,
-    motionDurationSlow,
-    marginXS,
-    paddingXS,
-    borderRadiusLG,
-    zIndexPopup,
-    // Custom token
-    messageNoticeContentPadding,
-  } = token
-
-  const messageMoveIn = new Keyframes('MessageMoveIn', {
-    '0%': {
-      padding: 0,
-      transform: 'translateY(-100%)',
-      opacity: 0,
-    },
-
-    '100%': {
-      padding: paddingXS,
-      transform: 'translateY(0)',
-      opacity: 1,
-    },
-  })
-
-  const messageMoveOut = new Keyframes('MessageMoveOut', {
-    '0%': {
-      maxHeight: token.height,
-      padding: paddingXS,
-      opacity: 1,
-    },
-    '100%': {
-      maxHeight: 0,
-      padding: 0,
-      opacity: 0,
-    },
-  })
-
-  return [
-    // ============================ Holder ============================
-    {
-      [componentCls]: {
-        ...resetComponent(token),
-        position: 'fixed',
-        top: marginXS,
-        left: '50%',
-        transform: 'translateX(-50%)',
-        width: '100%',
-        pointerEvents: 'none',
-        zIndex: zIndexPopup,
-
-        [`${componentCls}-move-up`]: {
-          animationFillMode: 'forwards',
-        },
-        [`
-        ${componentCls}-move-up-appear,
-        ${componentCls}-move-up-enter
-      `]: {
-          animationName: messageMoveIn,
-          animationDuration: motionDurationSlow,
-          animationPlayState: 'paused',
-          animationTimingFunction: motionEaseInOutCirc,
-        },
-        [`
-        ${componentCls}-move-up-appear${componentCls}-move-up-appear-active,
-        ${componentCls}-move-up-enter${componentCls}-move-up-enter-active
-      `]: {
-          animationPlayState: 'running',
-        },
-        [`${componentCls}-move-up-leave`]: {
-          animationName: messageMoveOut,
-          animationDuration: motionDurationSlow,
-          animationPlayState: 'paused',
-          animationTimingFunction: motionEaseInOutCirc,
-        },
-        [`${componentCls}-move-up-leave${componentCls}-move-up-leave-active`]: {
-          animationPlayState: 'running',
-        },
-        '&-rtl': {
-          direction: 'rtl',
-          span: {
-            direction: 'rtl',
-          },
-        },
-      },
-    },
-
-    // ============================ Notice ============================
-    {
-      [`${componentCls}-notice`]: {
-        padding: paddingXS,
-        textAlign: 'center',
-
-        [iconCls]: {
-          verticalAlign: 'text-bottom',
-          marginInlineEnd: marginXS, // affected by ltr or rtl
-          fontSize: fontSizeLG,
-        },
-
-        [`${componentCls}-notice-content`]: {
-          display: 'inline-block',
-          padding: messageNoticeContentPadding,
-          background: colorBgElevated,
-          borderRadius: borderRadiusLG,
-          boxShadow: boxShadowSecondary,
-          pointerEvents: 'all',
-        },
-
-        [`${componentCls}-success ${iconCls}`]: {
-          color: colorSuccess,
-        },
-        [`${componentCls}-error ${iconCls}`]: {
-          color: colorError,
-        },
-        [`${componentCls}-warning ${iconCls}`]: {
-          color: colorWarning,
-        },
-        [`
-        ${componentCls}-info ${iconCls},
-        ${componentCls}-loading ${iconCls}`]: {
-          color: colorInfo,
-        },
-      },
-    },
-
-    // ============================= Pure =============================
-    {
-      [`${componentCls}-notice-pure-panel`]: {
-        padding: 0,
-        textAlign: 'start',
-      },
-    },
-  ]
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook(
-  'Message',
-  (token) => {
-    // Gen-style functions here
-    const combinedToken = mergeToken<MessageToken>(token, {
-      messageNoticeContentPadding: `${
-        (token.controlHeightLG - token.fontSize * token.lineHeight) / 2
-      }px ${token.paddingSM}px`,
-    })
-    return [genMessageStyle(combinedToken)]
-  },
-  (token) => ({
-    height: 150,
-    zIndexPopup: token.zIndexPopupBase + 10,
-  }),
-)