@antsoo-lib/components 0.1.2 → 0.1.4

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+---
+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` 事件。