@antsoo-lib/components 0.1.11 → 0.1.12

package/src/avatar/Group.tsx

@@ -1,100 +0,0 @@
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
-import { computed, defineComponent, watchEffect } from 'vue'
-
-import { flattenChildren, getPropsSlot } from '../_util/props-util'
-import { cloneElement } from '../_util/vnode'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import Popover from '../popover'
-import type { AvatarSize } from './Avatar'
-import Avatar from './Avatar'
-import { useAvatarProviderContext } from './AvatarContext'
-import useStyle from './style'
-
-export const groupProps = () => ({
-  prefixCls: String,
-  maxCount: Number,
-  maxStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-  maxPopoverPlacement: { type: String as PropType<'top' | 'bottom'>, default: 'top' },
-  maxPopoverTrigger: String as PropType<'hover' | 'focus' | 'click'>,
-  /*
-   * Size of avatar, options: `large`, `small`, `default`
-   * or a custom number size
-   * */
-  size: {
-    type: [Number, String, Object] as PropType<AvatarSize>,
-    default: 'default' as AvatarSize,
-  },
-  shape: { type: String as PropType<'circle' | 'square'>, default: 'circle' },
-})
-
-export type AvatarGroupProps = Partial<ExtractPropTypes<ReturnType<typeof groupProps>>>
-
-const Group = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'AAvatarGroup',
-  inheritAttrs: false,
-  props: groupProps(),
-  setup(props, { slots, attrs }) {
-    const { prefixCls, direction } = useConfigInject('avatar', props)
-    const groupPrefixCls = computed(() => `${prefixCls.value}-group`)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    watchEffect(() => {
-      const context = { size: props.size, shape: props.shape }
-      useAvatarProviderContext(context)
-    })
-    return () => {
-      const {
-        maxPopoverPlacement = 'top',
-        maxCount,
-        maxStyle,
-        maxPopoverTrigger = 'hover',
-        shape,
-      } = props
-
-      const cls = {
-        [groupPrefixCls.value]: true,
-        [`${groupPrefixCls.value}-rtl`]: direction.value === 'rtl',
-        [`${attrs.class}`]: !!attrs.class,
-        [hashId.value]: true,
-      }
-
-      const children = getPropsSlot(slots, props)
-      const childrenWithProps = flattenChildren(children).map((child, index) =>
-        cloneElement(child, {
-          key: `avatar-key-${index}`,
-        }),
-      )
-
-      const numOfChildren = childrenWithProps.length
-      if (maxCount && maxCount < numOfChildren) {
-        const childrenShow = childrenWithProps.slice(0, maxCount)
-        const childrenHidden = childrenWithProps.slice(maxCount, numOfChildren)
-
-        childrenShow.push(
-          <Popover
-            key="avatar-popover-key"
-            content={childrenHidden}
-            trigger={maxPopoverTrigger}
-            placement={maxPopoverPlacement}
-            overlayClassName={`${groupPrefixCls.value}-popover`}
-          >
-            <Avatar style={maxStyle} shape={shape}>{`+${numOfChildren - maxCount}`}</Avatar>
-          </Popover>,
-        )
-        return wrapSSR(
-          <div {...attrs} class={cls} style={attrs.style as CSSProperties}>
-            {childrenShow}
-          </div>,
-        )
-      }
-
-      return wrapSSR(
-        <div {...attrs} class={cls} style={attrs.style as CSSProperties}>
-          {childrenWithProps}
-        </div>,
-      )
-    }
-  },
-})
-
-export default Group

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

@@ -1,37 +0,0 @@
----
-category: Components
-type: Data Display
-title: Avatar
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JJBSS5lBG4IAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YbgyQaRGz-UAAAAAAAAAAAAADrJ8AQ/original
----
-
-Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
-
-## API
-
-### Avatar
-
-| Property    | Description                                                                    | Type                                                                        | Default   | Version |
-| ----------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | --------- | ------- |
-| alt         | This attribute defines the alternative text describing the image               | string                                                                      | -         |         |
-| crossOrigin | cors settings attributes                                                       | `'anonymous'` \| `'use-credentials'` \| `''`                                | -         | 3.0     |
-| draggable   | Whether the picture is allowed to be dragged                                   | boolean \| `'true'` \| `'false'`                                            | -         | 2.2.0   |
-| gap         | Letter type unit distance between left and right sides                         | number                                                                      | 4         | 2.2.0   |
-| icon        | the `Icon` type for an icon avatar, see `Icon` Component                       | VNode \| slot                                                               | -         |         |
-| loadError   | handler when img load error, return false to prevent default fallback behavior | () => boolean                                                               | -         |         |
-| shape       | the shape of avatar                                                            | `circle` \| `square`                                                        | `circle`  |         |
-| size        | The size of the avatar                                                         | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0   |
-| src         | the address of the image for an image avatar                                   | string                                                                      | -         |         |
-| srcset      | a list of sources to use for different screen resolutions                      | string                                                                      | -         |         |
-
-### Avatar.Group (2.2.0)
-
-| Property            | Description                              | Type                                                                        | Default   | Version |
-| ------------------- | ---------------------------------------- | --------------------------------------------------------------------------- | --------- | ------- |
-| maxCount            | Max avatars to show                      | number                                                                      | -         |         |
-| maxPopoverPlacement | The placement of excess avatar Popover   | `top` \| `bottom`                                                           | `top`     |         |
-| maxPopoverTrigger   | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click`                                               | `hover`   | 3.0     |
-| maxStyle            | The style of excess avatar style         | CSSProperties                                                               | -         |         |
-| size                | The size of the avatar                   | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` |         |
-| shape               | The shape of the avatar                  | `circle` \| `square`                                                        | `circle`  | 4.0     |

package/src/avatar/index.ts

@@ -1,22 +0,0 @@
-import type { App, Plugin } from 'vue'
-
-import Avatar from './Avatar'
-import Group from './Group'
-
-export { avatarProps } from './Avatar'
-export type { AvatarProps, AvatarSize } from './Avatar'
-export type { AvatarGroupProps } from './Group'
-
-Avatar.Group = Group
-
-/* istanbul ignore next */
-Avatar.install = function (app: App) {
-  app.component(Avatar.name, Avatar)
-  app.component(Group.name, Group)
-  return app
-}
-export { Group as AvatarGroup }
-export default Avatar as typeof Avatar &
-  Plugin & {
-    readonly Group: typeof Group
-  }

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

@@ -1,42 +0,0 @@
----
-category: Components
-subtitle: 头像
-type: 数据展示
-title: Avatar
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JJBSS5lBG4IAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YbgyQaRGz-UAAAAAAAAAAAAADrJ8AQ/original
----
-
-用来代表用户或事物，支持图片、图标或字符展示。
-
-## 设计师专属
-
-安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，一键填充高逼格头像和文本。
-
-## API
-
-### Avatar
-
-| 参数        | 说明                                                          | 类型                                                                        | 默认值    | 版本  |
-| ----------- | ------------------------------------------------------------- | --------------------------------------------------------------------------- | --------- | ----- |
-| alt         | 图像无法显示时的替代文本                                      | string                                                                      | -         |       |
-| crossOrigin | cors 属性设置                                                 | `'anonymous'` \| `'use-credentials'` \| `''`                                | -         | 3.0   |
-| draggable   | 图片是否允许拖动                                              | boolean \| `'true'` \| `'false'`                                            | -         | 2.2.0 |
-| gap         | 字符类型距离左右两侧边界单位像素                              | number                                                                      | 4         | 2.2.0 |
-| icon        | 设置头像的图标类型，可设为 Icon 的 `type` 或 VNode            | VNode \| slot                                                               | -         |       |
-| loadError   | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean                                                               | -         |       |
-| shape       | 指定头像的形状                                                | `circle` \| `square`                                                        | `circle`  |       |
-| size        | 设置头像的大小                                                | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0 |
-| src         | 图片类头像的资源地址                                          | string                                                                      | -         |       |
-| srcset      | 设置图片类头像响应式资源地址                                  | string                                                                      | -         |       |
-
-### Avatar.Group (2.2.0)
-
-| 参数                | 说明                            | 类型                                                                        | 默认值    | 版本 |
-| ------------------- | ------------------------------- | --------------------------------------------------------------------------- | --------- | ---- |
-| maxCount            | 显示的最大头像个数              | number                                                                      | -         |      |
-| maxPopoverPlacement | 多余头像气泡弹出位置            | `top` \| `bottom`                                                           | `top`     |      |
-| maxPopoverTrigger   | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click`                                               | `hover`   | 3.0  |
-| maxStyle            | 多余头像样式                    | CSSProperties                                                               | -         |      |
-| size                | 设置头像的大小                  | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` |      |
-| shape               | 设置头像的形状                  | `circle` \| `square`                                                        | `circle`  | 4.0  |

package/src/avatar/style/index.ts

@@ -1,211 +0,0 @@
-import type { CSSObject } from '../../_util/cssinjs'
-import { resetComponent } from '../../style'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-export interface ComponentToken {
-  /**
-   * @desc 头像背景色
-   * @descEN Background color of Avatar
-   */
-  containerSize: number
-  /**
-   * @desc 大号头像尺寸
-   * @descEN Size of large Avatar
-   */
-  containerSizeLG: number
-  /**
-   * @desc 小号头像尺寸
-   * @descEN Size of small Avatar
-   */
-  containerSizeSM: number
-  /**
-   * @desc 头像文字大小
-   * @descEN Font size of Avatar
-   */
-  textFontSize: number
-  /**
-   * @desc 大号头像文字大小
-   * @descEN Font size of large Avatar
-   */
-  textFontSizeLG: number
-  /**
-   * @desc 小号头像文字大小
-   * @descEN Font size of small Avatar
-   */
-  textFontSizeSM: number
-  /**
-   * @desc 头像组间距
-   * @descEN Spacing between avatars in a group
-   */
-  groupSpace: number
-  /**
-   * @desc 头像组重叠宽度
-   * @descEN Overlapping of avatars in a group
-   */
-  groupOverlapping: number
-  /**
-   * @desc 头像组边框颜色
-   * @descEN Border color of avatars in a group
-   */
-  groupBorderColor: string
-}
-
-type AvatarToken = FullToken<'Avatar'> & {
-  avatarBg: string
-  avatarColor: string
-  avatarBgColor: string
-}
-
-const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
-  const {
-    antCls,
-    componentCls,
-    iconCls,
-    avatarBg,
-    avatarColor,
-    containerSize,
-    containerSizeLG,
-    containerSizeSM,
-    textFontSize,
-    textFontSizeLG,
-    textFontSizeSM,
-    borderRadius,
-    borderRadiusLG,
-    borderRadiusSM,
-    lineWidth,
-    lineType,
-  } = token
-
-  // Avatar size style
-  const avatarSizeStyle = (size: number, fontSize: number, radius: number): CSSObject => ({
-    width: size,
-    height: size,
-    lineHeight: `${size - lineWidth * 2}px`,
-    borderRadius: '50%',
-
-    [`&${componentCls}-square`]: {
-      borderRadius: radius,
-    },
-
-    [`${componentCls}-string`]: {
-      position: 'absolute',
-      left: {
-        _skip_check_: true,
-        value: '50%',
-      },
-      transformOrigin: '0 center',
-    },
-
-    [`&${componentCls}-icon`]: {
-      fontSize,
-      [`> ${iconCls}`]: {
-        margin: 0,
-      },
-    },
-  })
-
-  return {
-    [componentCls]: {
-      ...resetComponent(token),
-      position: 'relative',
-      display: 'inline-block',
-      overflow: 'hidden',
-      color: avatarColor,
-      whiteSpace: 'nowrap',
-      textAlign: 'center',
-      verticalAlign: 'middle',
-      background: avatarBg,
-      border: `${lineWidth}px ${lineType} transparent`,
-
-      [`&-image`]: {
-        background: 'transparent',
-      },
-
-      [`${antCls}-image-img`]: {
-        display: 'block',
-      },
-
-      ...avatarSizeStyle(containerSize, textFontSize, borderRadius),
-
-      [`&-lg`]: {
-        ...avatarSizeStyle(containerSizeLG, textFontSizeLG, borderRadiusLG),
-      },
-
-      [`&-sm`]: {
-        ...avatarSizeStyle(containerSizeSM, textFontSizeSM, borderRadiusSM),
-      },
-
-      '> img': {
-        display: 'block',
-        width: '100%',
-        height: '100%',
-        objectFit: 'cover',
-      },
-    },
-  }
-}
-
-const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
-  const { componentCls, groupBorderColor, groupOverlapping, groupSpace } = token
-
-  return {
-    [`${componentCls}-group`]: {
-      display: 'inline-flex',
-
-      [`${componentCls}`]: {
-        borderColor: groupBorderColor,
-      },
-
-      [`> *:not(:first-child)`]: {
-        marginInlineStart: groupOverlapping,
-      },
-    },
-    [`${componentCls}-group-popover`]: {
-      [`${componentCls} + ${componentCls}`]: {
-        marginInlineStart: groupSpace,
-      },
-    },
-  }
-}
-
-export default genComponentStyleHook(
-  'Avatar',
-  (token) => {
-    const { colorTextLightSolid, colorTextPlaceholder } = token
-    const avatarToken = mergeToken<AvatarToken>(token, {
-      avatarBg: colorTextPlaceholder,
-      avatarColor: colorTextLightSolid,
-    })
-    return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)]
-  },
-  (token) => {
-    const {
-      controlHeight,
-      controlHeightLG,
-      controlHeightSM,
-
-      fontSize,
-      fontSizeLG,
-      fontSizeXL,
-      fontSizeHeading3,
-
-      marginXS,
-      marginXXS,
-      colorBorderBg,
-    } = token
-    return {
-      containerSize: controlHeight,
-      containerSizeLG: controlHeightLG,
-      containerSizeSM: controlHeightSM,
-
-      textFontSize: Math.round((fontSizeLG + fontSizeXL) / 2),
-      textFontSizeLG: fontSizeHeading3,
-      textFontSizeSM: fontSize,
-
-      groupSpace: marginXXS,
-      groupOverlapping: -marginXS,
-      groupBorderColor: colorBorderBg,
-    }
-  },
-)

package/src/badge/Badge.tsx

@@ -1,242 +0,0 @@
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
-import { Transition, computed, defineComponent, ref, watch } from 'vue'
-
-import classNames from '../_util/classNames'
-import type { PresetStatusColorType } from '../_util/colors'
-import { isPresetColor } from '../_util/colors'
-import isNumeric from '../_util/isNumeric'
-import { flattenChildren, getPropsSlot } from '../_util/props-util'
-import { getTransitionProps } from '../_util/transition'
-import type { CustomSlotsType, LiteralUnion } from '../_util/type'
-import { cloneElement } from '../_util/vnode'
-import PropTypes from '../_util/vue-types'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import type { PresetColorKey } from '../theme/interface'
-import Ribbon from './Ribbon'
-import ScrollNumber from './ScrollNumber'
-import useStyle from './style'
-
-export function badgeProps() {
-  return {
-    /** Number to show in badge */
-    count: PropTypes.any.def(null),
-    showZero: { type: Boolean, default: undefined },
-    /** Max count to show */
-    overflowCount: { type: Number, default: 99 },
-    /** whether to show red dot without number */
-    dot: { type: Boolean, default: undefined },
-    prefixCls: String,
-    scrollNumberPrefixCls: String,
-    status: { type: String as PropType<PresetStatusColorType> },
-    size: { type: String as PropType<'default' | 'small'>, default: 'default' },
-    color: String as PropType<LiteralUnion<PresetColorKey>>,
-    text: PropTypes.any,
-    offset: Array as unknown as PropType<[number | string, number | string]>,
-    numberStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-    title: String,
-  }
-}
-
-export type BadgeProps = Partial<ExtractPropTypes<ReturnType<typeof badgeProps>>>
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ABadge',
-  Ribbon,
-  inheritAttrs: false,
-  props: badgeProps(),
-  slots: Object as CustomSlotsType<{
-    text: any
-    count: any
-    default: any
-  }>,
-  setup(props, { slots, attrs }) {
-    const { prefixCls, direction } = useConfigInject('badge', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    // ================================ Misc ================================
-    const numberedDisplayCount = computed(() => {
-      return (
-        (props.count as number) > (props.overflowCount as number)
-          ? `${props.overflowCount}+`
-          : props.count
-      ) as string | number | null
-    })
-
-    const isZero = computed(
-      () => numberedDisplayCount.value === '0' || numberedDisplayCount.value === 0,
-    )
-    const ignoreCount = computed(() => props.count === null || (isZero.value && !props.showZero))
-    const hasStatus = computed(
-      () =>
-        ((props.status !== null && props.status !== undefined) ||
-          (props.color !== null && props.color !== undefined)) &&
-        ignoreCount.value,
-    )
-
-    const showAsDot = computed(() => props.dot && !isZero.value)
-
-    const mergedCount = computed(() => (showAsDot.value ? '' : numberedDisplayCount.value))
-
-    const isHidden = computed(() => {
-      const isEmpty =
-        mergedCount.value === null || mergedCount.value === undefined || mergedCount.value === ''
-      return (isEmpty || (isZero.value && !props.showZero)) && !showAsDot.value
-    })
-
-    // Count should be cache in case hidden change it
-    const livingCount = ref(props.count)
-
-    // We need cache count since remove motion should not change count display
-    const displayCount = ref(mergedCount.value)
-
-    // We will cache the dot status to avoid shaking on leaved motion
-    const isDotRef = ref(showAsDot.value)
-
-    watch(
-      [() => props.count, mergedCount, showAsDot],
-      () => {
-        if (!isHidden.value) {
-          livingCount.value = props.count
-          displayCount.value = mergedCount.value
-          isDotRef.value = showAsDot.value
-        }
-      },
-      { immediate: true },
-    )
-    // InternalColor
-    const isInternalColor = computed(() => isPresetColor(props.color, false))
-    // Shared styles
-    const statusCls = computed(() => ({
-      [`${prefixCls.value}-status-dot`]: hasStatus.value,
-      [`${prefixCls.value}-status-${props.status}`]: !!props.status,
-      [`${prefixCls.value}-color-${props.color}`]: isInternalColor.value,
-    }))
-
-    const statusStyle = computed(() => {
-      if (props.color && !isInternalColor.value) {
-        return { background: props.color, color: props.color }
-      } else {
-        return {}
-      }
-    })
-
-    const scrollNumberCls = computed(() => ({
-      [`${prefixCls.value}-dot`]: isDotRef.value,
-      [`${prefixCls.value}-count`]: !isDotRef.value,
-      [`${prefixCls.value}-count-sm`]: props.size === 'small',
-      [`${prefixCls.value}-multiple-words`]:
-        !isDotRef.value && displayCount.value && displayCount.value.toString().length > 1,
-      [`${prefixCls.value}-status-${props.status}`]: !!props.status,
-      [`${prefixCls.value}-color-${props.color}`]: isInternalColor.value,
-    }))
-
-    return () => {
-      const { offset, title, color } = props
-      const style = attrs.style as CSSProperties
-      const text = getPropsSlot(slots, props, 'text')
-      const pre = prefixCls.value
-      const count = livingCount.value
-      let children = flattenChildren(slots.default?.())
-      children = children.length ? children : null
-
-      const visible = !!(!isHidden.value || slots.count)
-
-      // =============================== Styles ===============================
-      const mergedStyle = (() => {
-        if (!offset) {
-          return { ...style }
-        }
-
-        const offsetStyle: CSSProperties = {
-          marginTop: isNumeric(offset[1]) ? `${offset[1]}px` : offset[1],
-        }
-        if (direction.value === 'rtl') {
-          offsetStyle.left = `${Number.parseInt(offset[0] as string, 10)}px`
-        } else {
-          offsetStyle.right = `${-Number.parseInt(offset[0] as string, 10)}px`
-        }
-
-        return {
-          ...offsetStyle,
-          ...style,
-        }
-      })()
-
-      // =============================== Render ===============================
-      // >>> Title
-      const titleNode =
-        title ?? (typeof count === 'string' || typeof count === 'number' ? count : undefined)
-
-      // >>> Status Text
-      const statusTextNode =
-        visible || !text ? null : <span class={`${pre}-status-text`}>{text}</span>
-
-      // >>> Display Component
-      const displayNode =
-        typeof count === 'object' || (count === undefined && slots.count)
-          ? cloneElement(
-              count ?? slots.count?.(),
-              {
-                style: mergedStyle,
-              },
-              false,
-            )
-          : null
-
-      const badgeClassName = classNames(
-        pre,
-        {
-          [`${pre}-status`]: hasStatus.value,
-          [`${pre}-not-a-wrapper`]: !children,
-          [`${pre}-rtl`]: direction.value === 'rtl',
-        },
-        attrs.class,
-        hashId.value,
-      )
-
-      // <Badge status="success" />
-      if (!children && hasStatus.value) {
-        const statusTextColor = mergedStyle.color
-        return wrapSSR(
-          <span {...attrs} class={badgeClassName} style={mergedStyle}>
-            <span class={statusCls.value} style={statusStyle.value} />
-            <span style={{ color: statusTextColor }} class={`${pre}-status-text`}>
-              {text}
-            </span>
-          </span>,
-        )
-      }
-
-      const transitionProps = getTransitionProps(children ? `${pre}-zoom` : '', {
-        appear: false,
-      })
-      let scrollNumberStyle: CSSProperties = { ...mergedStyle, ...(props.numberStyle as object) }
-      if (color && !isInternalColor.value) {
-        scrollNumberStyle = scrollNumberStyle || {}
-        scrollNumberStyle.background = color
-      }
-
-      return wrapSSR(
-        <span {...attrs} class={badgeClassName}>
-          {children}
-          <Transition {...transitionProps}>
-            <ScrollNumber
-              v-show={visible}
-              prefixCls={props.scrollNumberPrefixCls}
-              show={visible}
-              class={scrollNumberCls.value}
-              count={displayCount.value}
-              title={titleNode}
-              style={scrollNumberStyle}
-              key="scrollNumber"
-            >
-              {displayNode}
-            </ScrollNumber>
-          </Transition>
-          {statusTextNode}
-        </span>,
-      )
-    }
-  },
-})