@antsoo-lib/components 0.1.11 → 0.1.12

package/src/popconfirm/index.en-US.md

@@ -1,47 +0,0 @@
----
-category: Components
-type: Feedback
-title: Popconfirm
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sAGpRoBtTXcAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HrFtQ6jJJFQAAAAAAAAAAAAADrJ8AQ/original
----
-
-A simple and compact confirmation dialog of an action.
-
-## When To Use
-
-A simple and compact dialog used for asking for user confirmation.
-
-The difference with the 'confirm' modal dialog is that it's more lightweight than the static popped full-screen confirm modal.
-
-## API
-
-| Param             | Description                                    | Type                                   | Default value                         | Version |
-| ----------------- | ---------------------------------------------- | -------------------------------------- | ------------------------------------- | ------- |
-| cancelButton      | custom render cancel button                    | slot                                   | -                                     | 3.0     |
-| cancelButtonProps | The cancel button props                        | [ButtonProps](/components/button/#api) | -                                     |         |
-| cancelText        | text of the Cancel button                      | string\|slot                           | `Cancel`                              |         |
-| disabled          | is show popconfirm when click its childrenNode | boolean                                | false                                 |         |
-| icon              | customize icon of confirmation                 | vNode\|slot                            | <Icon type="exclamation-circle" /> |         |
-| okButton          | custom render confirm button                   | slot                                   | -                                     | 3.0     |
-| okButtonProps     | The ok button props                            | [ButtonProps](/components/button/#api) | -                                     |         |
-| okText            | text of the Confirm button                     | string\|slot                           | `Confirm`                             |         |
-| okType            | Button `type` of the Confirm button            | string                                 | `primary`                             |         |
-| showCancel        | Show cancel button                             | boolean                                | true                                  | 3.0     |
-| title             | title of the confirmation box                  | string\|slot                           | -                                     |         |
-| description       | The description of the confirmation box title  | string\|slot                           | -                                     | 4.0     |
-| visible (v-model) | hide or show                                   | boolean                                | -                                     |         |
-
-### events
-
-| Events Name | Description                                                      | Arguments      | Version |
-| ----------- | ---------------------------------------------------------------- | -------------- | ------- | --- |
-| cancel      | callback of cancel                                               | function(e)    | -       |     |
-| confirm     | callback of confirmation                                         | function(e)    | -       |     |
-| openChange  | Callback executed when visibility of the tooltip card is changed | function(open) | -       | 4.0 |
-
-Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.
-
-## Note
-
-Please ensure that the child node of `Popconfirm` accepts `mouseenter`, `mouseleave`, `focus`, `click` events.

package/src/popconfirm/index.tsx

@@ -1,243 +0,0 @@
-import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled'
-
-import type { ExtractPropTypes, HTMLAttributes, PropType } from 'vue'
-import { computed, defineComponent, ref, toRef } from 'vue'
-
-import ActionButton from '../_util/ActionButton'
-import KeyCode from '../_util/KeyCode'
-import classNames from '../_util/classNames'
-import useMergedState from '../_util/hooks/useMergedState'
-import omit from '../_util/omit'
-import { initDefaultProps } from '../_util/props-util'
-import { getTransitionName } from '../_util/transition'
-import { anyType, objectType, stringType, withInstall } from '../_util/type'
-import type { CustomSlotsType } from '../_util/type'
-import { cloneVNodes } from '../_util/vnode'
-import warning from '../_util/warning'
-import Button from '../button'
-import type { ButtonProps, LegacyButtonType } from '../button/buttonTypes'
-import { convertLegacyProps } from '../button/buttonTypes'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'
-import defaultLocale from '../locale/en_US'
-import Popover from '../popover'
-import { tooltipDefaultProps } from '../tooltip/Tooltip'
-import abstractTooltipProps from '../tooltip/abstractTooltipProps'
-import usePopconfirmStyle from './style'
-
-export const popconfirmProps = () => ({
-  ...abstractTooltipProps(),
-  prefixCls: String,
-  content: anyType(),
-  title: anyType<string | number>(),
-  description: anyType<string | number>(),
-  okType: stringType<LegacyButtonType>('primary'),
-  disabled: { type: Boolean, default: false },
-  okText: anyType(),
-  cancelText: anyType(),
-  icon: anyType(),
-  okButtonProps: objectType<ButtonProps & HTMLAttributes>(),
-  cancelButtonProps: objectType<ButtonProps & HTMLAttributes>(),
-  showCancel: { type: Boolean, default: true },
-  onConfirm: Function as PropType<(e: MouseEvent) => void>,
-  onCancel: Function as PropType<(e: MouseEvent) => void>,
-})
-
-export type PopconfirmProps = Partial<ExtractPropTypes<ReturnType<typeof popconfirmProps>>>
-
-export interface PopconfirmLocale {
-  okText: string
-  cancelText: string
-}
-
-const Popconfirm = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'APopconfirm',
-  inheritAttrs: false,
-  props: initDefaultProps(popconfirmProps(), {
-    ...tooltipDefaultProps(),
-    trigger: 'click',
-    placement: 'top',
-    mouseEnterDelay: 0.1,
-    mouseLeaveDelay: 0.1,
-    arrowPointAtCenter: false,
-    autoAdjustOverflow: true,
-    okType: 'primary',
-    disabled: false,
-  }),
-  slots: Object as CustomSlotsType<{
-    title?: any
-    content?: any
-    description?: any
-    okText?: any
-    icon?: any
-    cancel?: any
-    cancelText?: any
-    cancelButton?: any
-    okButton?: any
-    default?: any
-  }>,
-  // emits: ['update:open', 'visibleChange'],
-  setup(props: PopconfirmProps, { slots, emit, expose, attrs }) {
-    const rootRef = ref()
-    warning(
-      props.visible === undefined,
-      'Popconfirm',
-      `\`visible\` will be removed in next major version, please use \`open\` instead.`,
-    )
-    expose({
-      getPopupDomNode: () => {
-        return rootRef.value?.getPopupDomNode?.()
-      },
-    })
-    const [open, setOpen] = useMergedState(false, {
-      value: toRef(props, 'open'),
-    })
-
-    const settingOpen = (value: boolean, e?: MouseEvent | KeyboardEvent) => {
-      if (props.open === undefined) {
-        setOpen(value)
-      }
-
-      emit('update:open', value)
-      emit('openChange', value, e)
-    }
-
-    const close = (e: MouseEvent) => {
-      settingOpen(false, e)
-    }
-
-    const onConfirm = (e: MouseEvent) => {
-      return props.onConfirm?.(e)
-    }
-
-    const onCancel = (e: MouseEvent) => {
-      settingOpen(false, e)
-      props.onCancel?.(e)
-    }
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.keyCode === KeyCode.ESC && open) {
-        settingOpen(false, e)
-      }
-    }
-
-    const onOpenChange = (value: boolean) => {
-      const { disabled } = props
-      if (disabled) {
-        return
-      }
-      settingOpen(value)
-    }
-    const { prefixCls: prefixClsConfirm, getPrefixCls } = useConfigInject('popconfirm', props)
-    const rootPrefixCls = computed(() => getPrefixCls())
-    const btnPrefixCls = computed(() => getPrefixCls('btn'))
-    const [wrapSSR] = usePopconfirmStyle(prefixClsConfirm)
-    const [popconfirmLocale] = useLocaleReceiver('Popconfirm', defaultLocale.Popconfirm)
-    const renderOverlay = () => {
-      const {
-        okButtonProps,
-        cancelButtonProps,
-        title = slots.title?.(),
-        description = slots.description?.(),
-        cancelText = slots.cancel?.(),
-        okText = slots.okText?.(),
-        okType,
-        icon = slots.icon?.() || <ExclamationCircleFilled />,
-        showCancel = true,
-      } = props
-      const { cancelButton, okButton } = slots
-      const cancelProps: ButtonProps = {
-        onClick: onCancel,
-        size: 'small',
-        ...cancelButtonProps,
-      }
-      const okProps: ButtonProps = {
-        onClick: onConfirm,
-        ...convertLegacyProps(okType),
-        size: 'small',
-        ...okButtonProps,
-      }
-      return (
-        <div class={`${prefixClsConfirm.value}-inner-content`}>
-          <div class={`${prefixClsConfirm.value}-message`}>
-            {icon && <span class={`${prefixClsConfirm.value}-message-icon`}>{icon}</span>}
-            <div
-              class={[
-                `${prefixClsConfirm.value}-message-title`,
-                { [`${prefixClsConfirm.value}-message-title-only`]: !!description },
-              ]}
-            >
-              {title}
-            </div>
-          </div>
-          {description && <div class={`${prefixClsConfirm.value}-description`}>{description}</div>}
-          <div class={`${prefixClsConfirm.value}-buttons`}>
-            {showCancel ? (
-              cancelButton ? (
-                cancelButton(cancelProps)
-              ) : (
-                <Button {...cancelProps}>{cancelText || popconfirmLocale.value.cancelText}</Button>
-              )
-            ) : null}
-            {okButton ? (
-              okButton(okProps)
-            ) : (
-              <ActionButton
-                buttonProps={{ size: 'small', ...convertLegacyProps(okType), ...okButtonProps }}
-                actionFn={onConfirm}
-                close={close}
-                prefixCls={btnPrefixCls.value}
-                quitOnNullishReturnValue
-                emitEvent
-              >
-                {okText || popconfirmLocale.value.okText}
-              </ActionButton>
-            )}
-          </div>
-        </div>
-      )
-    }
-
-    return () => {
-      const { placement, overlayClassName, trigger = 'click', ...restProps } = props
-      const otherProps = omit(restProps, [
-        'title',
-        'content',
-        'cancelText',
-        'okText',
-        'onUpdate:open',
-        'onConfirm',
-        'onCancel',
-        'prefixCls',
-      ])
-      const overlayClassNames = classNames(prefixClsConfirm.value, overlayClassName)
-      return wrapSSR(
-        <Popover
-          {...otherProps}
-          {...attrs}
-          trigger={trigger}
-          placement={placement}
-          onOpenChange={onOpenChange}
-          open={open.value}
-          overlayClassName={overlayClassNames}
-          transitionName={getTransitionName(rootPrefixCls.value, 'zoom-big', props.transitionName)}
-          v-slots={{ content: renderOverlay }}
-          ref={rootRef}
-          data-popover-inject
-        >
-          {cloneVNodes(
-            slots.default?.() || [],
-            {
-              onKeydown: (e: KeyboardEvent) => {
-                onKeyDown(e)
-              },
-            },
-            false,
-          )}
-        </Popover>,
-      )
-    }
-  },
-})
-export default withInstall(Popconfirm)

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

@@ -1,46 +0,0 @@
----
-category: Components
-type: 反馈
-title: Popconfirm
-subtitle: 气泡确认框
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sAGpRoBtTXcAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HrFtQ6jJJFQAAAAAAAAAAAAADrJ8AQ/original
----
-
-点击元素，弹出气泡式的确认框。
-
-## 何时使用
-
-目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。
-
-## API
-
-| 参数              | 说明                                     | 类型                                   | 默认值                                | 版本 |
-| ----------------- | ---------------------------------------- | -------------------------------------- | ------------------------------------- | ---- |
-| cancelButton      | 完全自定义取消按钮                       | slot                                   | -                                     | 3.0  |
-| cancelButtonProps | cancel 按钮 props                        | [ButtonProps](/components/button/#api) | -                                     |      |
-| cancelText        | 取消按钮文字                             | string\|slot                           | 取消                                  |      |
-| disabled          | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean                                | false                                 |      |
-| icon              | 自定义弹出气泡 Icon 图标                 | vNode                                  | <Icon type="exclamation-circle" /> |      |
-| okButton          | 完全自定义确认按钮                       | slot                                   | -                                     | 3.0  |
-| okButtonProps     | ok 按钮 props                            | [ButtonProps](/components/button/#api) | -                                     |      |
-| okText            | 确认按钮文字                             | string\|slot                           | 确定                                  |      |
-| okType            | 确认按钮类型                             | string                                 | primary                               |      |
-| showCancel        | 是否显示取消按钮                         | boolean                                | true                                  | 3.0  |
-| title             | 确认框的描述                             | string\|slot                           | -                                     |      |
-| description       | 确认内容的详细描述                       | string\|slot                           | -                                     | 4.0  |
-| open (v-model)    | 是否显示                                 | boolean                                | -                                     | 4.0  |
-
-### 事件
-
-| 事件名称   | 说明           | 回调参数       | 版本 |
-| ---------- | -------------- | -------------- | ---- |
-| cancel     | 点击取消的回调 | function(e)    |      |
-| confirm    | 点击确认的回调 | function(e)    |      |
-| openChange | 显示隐藏的回调 | function(open) | 4.0  |
-
-更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。
-
-## 注意
-
-请确保 `Popconfirm` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。

package/src/popconfirm/style/index.ts

@@ -1,89 +0,0 @@
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook } from '../../theme/internal'
-
-export interface ComponentToken {
-  zIndexPopup: number
-}
-
-export interface PopconfirmToken extends FullToken<'Popconfirm'> {}
-
-// =============================== Base ===============================
-const genBaseStyle: GenerateStyle<PopconfirmToken> = (token) => {
-  const {
-    componentCls,
-    iconCls,
-    zIndexPopup,
-    colorText,
-    colorWarning,
-    marginXS,
-    fontSize,
-    fontWeightStrong,
-    lineHeight,
-  } = token
-
-  return {
-    [componentCls]: {
-      zIndex: zIndexPopup,
-
-      [`${componentCls}-inner-content`]: {
-        color: colorText,
-      },
-
-      [`${componentCls}-message`]: {
-        position: 'relative',
-        marginBottom: marginXS,
-        color: colorText,
-        fontSize,
-        display: 'flex',
-        flexWrap: 'nowrap',
-        alignItems: 'start',
-
-        [`> ${componentCls}-message-icon ${iconCls}`]: {
-          color: colorWarning,
-          fontSize,
-          flex: 'none',
-          lineHeight: 1,
-          paddingTop: (Math.round(fontSize * lineHeight) - fontSize) / 2,
-        },
-
-        '&-title': {
-          flex: 'auto',
-          marginInlineStart: marginXS,
-        },
-
-        '&-title-only': {
-          fontWeight: fontWeightStrong,
-        },
-      },
-
-      [`${componentCls}-description`]: {
-        position: 'relative',
-        marginInlineStart: fontSize + marginXS,
-        marginBottom: marginXS,
-        color: colorText,
-        fontSize,
-      },
-
-      [`${componentCls}-buttons`]: {
-        textAlign: 'end',
-
-        button: {
-          marginInlineStart: marginXS,
-        },
-      },
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook(
-  'Popconfirm',
-  (token) => genBaseStyle(token),
-  (token) => {
-    const { zIndexPopupBase } = token
-
-    return {
-      zIndexPopup: zIndexPopupBase + 60,
-    }
-  },
-)

package/src/popover/index.en-US.md

@@ -1,28 +0,0 @@
----
-category: Components
-type: Data Display
-title: Popover
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XhL3QpRw92kAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*RMP_TrdZ3nsAAAAAAAAAAAAADrJ8AQ/original
----
-
-The floating card popped by clicking or hovering.
-
-## When To Use
-
-A simple popup menu to provide extra information or operations.
-
-Comparing with `Tooltip`, besides information `Popover` card can also provide action elements like links and buttons.
-
-## API
-
-| Param   | Description         | Type                | Default value | Version |
-| ------- | ------------------- | ------------------- | ------------- | ------- |
-| content | Content of the card | string\|slot\|vNode | -             |         |
-| title   | Title of the card   | string\|slot\|VNode | -             |         |
-
-Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.
-
-## Note
-
-Please ensure that the child node of `Popover` accepts `onMouseenter`, `onMouseleave`, `onFocus`, `onClick` events.

package/src/popover/index.tsx

@@ -1,81 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { computed, defineComponent, ref } from 'vue'
-
-import classNames from '../_util/classNames'
-import omit from '../_util/omit'
-import { filterEmpty, initDefaultProps } from '../_util/props-util'
-import { getTransitionName } from '../_util/transition'
-import { anyType, withInstall } from '../_util/type'
-import warning from '../_util/warning'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import Tooltip from '../tooltip'
-import { tooltipDefaultProps } from '../tooltip/Tooltip'
-import abstractTooltipProps from '../tooltip/abstractTooltipProps'
-import useStyle from './style'
-
-export const popoverProps = () => ({
-  ...abstractTooltipProps(),
-  content: anyType(),
-  title: anyType(),
-})
-
-export type PopoverProps = Partial<ExtractPropTypes<ReturnType<typeof popoverProps>>>
-
-const Popover = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'APopover',
-  inheritAttrs: false,
-  props: initDefaultProps(popoverProps(), {
-    ...tooltipDefaultProps(),
-    trigger: 'hover',
-    placement: 'top',
-    mouseEnterDelay: 0.1,
-    mouseLeaveDelay: 0.1,
-  }),
-  setup(props, { expose, slots, attrs }) {
-    const tooltipRef = ref()
-    warning(
-      props.visible === undefined,
-      'popover',
-      `\`visible\` will be removed in next major version, please use \`open\` instead.`,
-    )
-    expose({
-      getPopupDomNode: () => {
-        return tooltipRef.value?.getPopupDomNode?.()
-      },
-    })
-    const { prefixCls, configProvider } = useConfigInject('popover', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const rootPrefixCls = computed(() => configProvider.getPrefixCls())
-    const getOverlay = () => {
-      const { title = filterEmpty(slots.title?.()), content = filterEmpty(slots.content?.()) } =
-        props
-      const hasTitle = !!(Array.isArray(title) ? title.length : title)
-      const hasContent = !!(Array.isArray(content) ? content.length : title)
-      if (!hasTitle && !hasContent) return null
-      return (
-        <>
-          {hasTitle && <div class={`${prefixCls.value}-title`}>{title}</div>}
-          <div class={`${prefixCls.value}-inner-content`}>{content}</div>
-        </>
-      )
-    }
-    return () => {
-      const overlayCls = classNames(props.overlayClassName, hashId.value)
-      return wrapSSR(
-        <Tooltip
-          {...omit(props, ['title', 'content'])}
-          {...attrs}
-          prefixCls={prefixCls.value}
-          ref={tooltipRef}
-          overlayClassName={overlayCls}
-          v-slots={{ title: getOverlay, default: slots.default }}
-          transitionName={getTransitionName(rootPrefixCls.value, 'zoom-big', props.transitionName)}
-          data-popover-inject
-        />,
-      )
-    }
-  },
-})
-
-export default withInstall(Popover)

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

@@ -1,29 +0,0 @@
----
-category: Components
-type: 数据展示
-title: Popover
-subtitle: 气泡卡片
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XhL3QpRw92kAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*RMP_TrdZ3nsAAAAAAAAAAAAADrJ8AQ/original
----
-
-点击/鼠标移入元素，弹出气泡式的卡片浮层。
-
-## 何时使用
-
-当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
-
-和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
-
-## API
-
-| 参数    | 说明     | 类型                | 默认值 | 版本 |
-| ------- | -------- | ------------------- | ------ | ---- |
-| content | 卡片内容 | string\|slot\|VNode | -      |      |
-| title   | 卡片标题 | string\|slot\|VNode | -      |      |
-
-更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。
-
-## 注意
-
-请确保 `Popover` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。