@antsoo-lib/components 0.1.11 → 0.1.12

package/src/badge/style/index.ts

@@ -1,378 +0,0 @@
-import type { CSSObject } from '../../_util/cssinjs'
-import { Keyframes } from '../../_util/cssinjs'
-import { genPresetColor, resetComponent } from '../../style'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-interface BadgeToken extends FullToken<'Badge'> {
-  badgeFontHeight: number
-  badgeZIndex: number | string
-  badgeHeight: number
-  badgeHeightSm: number
-  badgeTextColor: string
-  badgeFontWeight: string
-  badgeFontSize: number
-  badgeColor: string
-  badgeColorHover: string
-  badgeDotSize: number
-  badgeFontSizeSm: number
-  badgeStatusSize: number
-  badgeShadowSize: number
-  badgeShadowColor: string
-  badgeProcessingDuration: string
-  badgeRibbonOffset: number
-  badgeRibbonCornerTransform: string
-  badgeRibbonCornerFilter: string
-}
-
-const antStatusProcessing = new Keyframes('antStatusProcessing', {
-  '0%': { transform: 'scale(0.8)', opacity: 0.5 },
-  '100%': { transform: 'scale(2.4)', opacity: 0 },
-})
-
-const antZoomBadgeIn = new Keyframes('antZoomBadgeIn', {
-  '0%': { transform: 'scale(0) translate(50%, -50%)', opacity: 0 },
-  '100%': { transform: 'scale(1) translate(50%, -50%)' },
-})
-
-const antZoomBadgeOut = new Keyframes('antZoomBadgeOut', {
-  '0%': { transform: 'scale(1) translate(50%, -50%)' },
-  '100%': { transform: 'scale(0) translate(50%, -50%)', opacity: 0 },
-})
-
-const antNoWrapperZoomBadgeIn = new Keyframes('antNoWrapperZoomBadgeIn', {
-  '0%': { transform: 'scale(0)', opacity: 0 },
-  '100%': { transform: 'scale(1)' },
-})
-const antNoWrapperZoomBadgeOut = new Keyframes('antNoWrapperZoomBadgeOut', {
-  '0%': { transform: 'scale(1)' },
-  '100%': { transform: 'scale(0)', opacity: 0 },
-})
-const antBadgeLoadingCircle = new Keyframes('antBadgeLoadingCircle', {
-  '0%': { transformOrigin: '50%' },
-  '100%': {
-    transform: 'translate(50%, -50%) rotate(360deg)',
-    transformOrigin: '50%',
-  },
-})
-
-const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSObject => {
-  const {
-    componentCls,
-    iconCls,
-    antCls,
-    badgeFontHeight,
-    badgeShadowSize,
-    badgeHeightSm,
-    motionDurationSlow,
-    badgeStatusSize,
-    marginXS,
-    badgeRibbonOffset,
-  } = token
-  const numberPrefixCls = `${antCls}-scroll-number`
-  const ribbonPrefixCls = `${antCls}-ribbon`
-  const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`
-
-  const colorPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
-    [`&${componentCls} ${componentCls}-color-${colorKey}`]: {
-      background: darkColor,
-      [`&:not(${componentCls}-count)`]: {
-        color: darkColor,
-      },
-    },
-  }))
-
-  const statusRibbonPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
-    [`&${ribbonPrefixCls}-color-${colorKey}`]: {
-      background: darkColor,
-      color: darkColor,
-    },
-  }))
-
-  return {
-    [componentCls]: {
-      ...resetComponent(token),
-      position: 'relative',
-      display: 'inline-block',
-      width: 'fit-content',
-      lineHeight: 1,
-
-      [`${componentCls}-count`]: {
-        zIndex: token.badgeZIndex,
-        minWidth: token.badgeHeight,
-        height: token.badgeHeight,
-        color: token.badgeTextColor,
-        fontWeight: token.badgeFontWeight,
-        fontSize: token.badgeFontSize,
-        lineHeight: `${token.badgeHeight}px`,
-        whiteSpace: 'nowrap',
-        textAlign: 'center',
-        background: token.badgeColor,
-        borderRadius: token.badgeHeight / 2,
-        boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
-        transition: `background ${token.motionDurationMid}`,
-
-        a: {
-          color: token.badgeTextColor,
-        },
-        'a:hover': {
-          color: token.badgeTextColor,
-        },
-
-        'a:hover &': {
-          background: token.badgeColorHover,
-        },
-      },
-      [`${componentCls}-count-sm`]: {
-        minWidth: badgeHeightSm,
-        height: badgeHeightSm,
-        fontSize: token.badgeFontSizeSm,
-        lineHeight: `${badgeHeightSm}px`,
-        borderRadius: badgeHeightSm / 2,
-      },
-
-      [`${componentCls}-multiple-words`]: {
-        padding: `0 ${token.paddingXS}px`,
-      },
-
-      [`${componentCls}-dot`]: {
-        zIndex: token.badgeZIndex,
-        width: token.badgeDotSize,
-        minWidth: token.badgeDotSize,
-        height: token.badgeDotSize,
-        background: token.badgeColor,
-        borderRadius: '100%',
-        boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
-      },
-      [`${componentCls}-dot${numberPrefixCls}`]: {
-        transition: `background ${motionDurationSlow}`,
-      },
-      [`${componentCls}-count, ${componentCls}-dot, ${numberPrefixCls}-custom-component`]: {
-        position: 'absolute',
-        top: 0,
-        insetInlineEnd: 0,
-        transform: 'translate(50%, -50%)',
-        transformOrigin: '100% 0%',
-        [`&${iconCls}-spin`]: {
-          animationName: antBadgeLoadingCircle,
-          animationDuration: '1s',
-          animationIterationCount: 'infinite',
-          animationTimingFunction: 'linear',
-        },
-      },
-      [`&${componentCls}-status`]: {
-        lineHeight: 'inherit',
-        verticalAlign: 'baseline',
-
-        [`${componentCls}-status-dot`]: {
-          position: 'relative',
-          top: -1, // Magic number, but seems better experience
-          display: 'inline-block',
-          width: badgeStatusSize,
-          height: badgeStatusSize,
-          verticalAlign: 'middle',
-          borderRadius: '50%',
-        },
-
-        [`${componentCls}-status-success`]: {
-          backgroundColor: token.colorSuccess,
-        },
-        [`${componentCls}-status-processing`]: {
-          overflow: 'visible',
-          color: token.colorPrimary,
-          backgroundColor: token.colorPrimary,
-
-          '&::after': {
-            position: 'absolute',
-            top: 0,
-            insetInlineStart: 0,
-            width: '100%',
-            height: '100%',
-            borderWidth: badgeShadowSize,
-            borderStyle: 'solid',
-            borderColor: 'inherit',
-            borderRadius: '50%',
-            animationName: antStatusProcessing,
-            animationDuration: token.badgeProcessingDuration,
-            animationIterationCount: 'infinite',
-            animationTimingFunction: 'ease-in-out',
-            content: '""',
-          },
-        },
-        [`${componentCls}-status-default`]: {
-          backgroundColor: token.colorTextPlaceholder,
-        },
-
-        [`${componentCls}-status-error`]: {
-          backgroundColor: token.colorError,
-        },
-
-        [`${componentCls}-status-warning`]: {
-          backgroundColor: token.colorWarning,
-        },
-        [`${componentCls}-status-text`]: {
-          marginInlineStart: marginXS,
-          color: token.colorText,
-          fontSize: token.fontSize,
-        },
-      },
-      ...colorPreset,
-      [`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
-        animationName: antZoomBadgeIn,
-        animationDuration: token.motionDurationSlow,
-        animationTimingFunction: token.motionEaseOutBack,
-        animationFillMode: 'both',
-      },
-      [`${componentCls}-zoom-leave`]: {
-        animationName: antZoomBadgeOut,
-        animationDuration: token.motionDurationSlow,
-        animationTimingFunction: token.motionEaseOutBack,
-        animationFillMode: 'both',
-      },
-      [`&${componentCls}-not-a-wrapper`]: {
-        [`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
-          animationName: antNoWrapperZoomBadgeIn,
-          animationDuration: token.motionDurationSlow,
-          animationTimingFunction: token.motionEaseOutBack,
-        },
-
-        [`${componentCls}-zoom-leave`]: {
-          animationName: antNoWrapperZoomBadgeOut,
-          animationDuration: token.motionDurationSlow,
-          animationTimingFunction: token.motionEaseOutBack,
-        },
-        [`&:not(${componentCls}-status)`]: {
-          verticalAlign: 'middle',
-        },
-        [`${numberPrefixCls}-custom-component, ${componentCls}-count`]: {
-          transform: 'none',
-        },
-        [`${numberPrefixCls}-custom-component, ${numberPrefixCls}`]: {
-          position: 'relative',
-          top: 'auto',
-          display: 'block',
-          transformOrigin: '50% 50%',
-        },
-      },
-      [`${numberPrefixCls}`]: {
-        overflow: 'hidden',
-        [`${numberPrefixCls}-only`]: {
-          position: 'relative',
-          display: 'inline-block',
-          height: token.badgeHeight,
-          transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
-          WebkitTransformStyle: 'preserve-3d',
-          WebkitBackfaceVisibility: 'hidden',
-          [`> p${numberPrefixCls}-only-unit`]: {
-            height: token.badgeHeight,
-            margin: 0,
-            WebkitTransformStyle: 'preserve-3d',
-            WebkitBackfaceVisibility: 'hidden',
-          },
-        },
-        [`${numberPrefixCls}-symbol`]: { verticalAlign: 'top' },
-      },
-
-      // ====================== RTL =======================
-      '&-rtl': {
-        direction: 'rtl',
-
-        [`${componentCls}-count, ${componentCls}-dot, ${numberPrefixCls}-custom-component`]: {
-          transform: 'translate(-50%, -50%)',
-        },
-      },
-    },
-    [`${ribbonWrapperPrefixCls}`]: { position: 'relative' },
-    [`${ribbonPrefixCls}`]: {
-      ...resetComponent(token),
-      position: 'absolute',
-      top: marginXS,
-      padding: `0 ${token.paddingXS}px`,
-      color: token.colorPrimary,
-      lineHeight: `${badgeFontHeight}px`,
-      whiteSpace: 'nowrap',
-      backgroundColor: token.colorPrimary,
-      borderRadius: token.borderRadiusSM,
-      [`${ribbonPrefixCls}-text`]: { color: token.colorTextLightSolid },
-      [`${ribbonPrefixCls}-corner`]: {
-        position: 'absolute',
-        top: '100%',
-        width: badgeRibbonOffset,
-        height: badgeRibbonOffset,
-        color: 'currentcolor',
-        border: `${badgeRibbonOffset / 2}px solid`,
-        transform: token.badgeRibbonCornerTransform,
-        transformOrigin: 'top',
-        filter: token.badgeRibbonCornerFilter,
-      },
-      ...statusRibbonPreset,
-      [`&${ribbonPrefixCls}-placement-end`]: {
-        insetInlineEnd: -badgeRibbonOffset,
-        borderEndEndRadius: 0,
-        [`${ribbonPrefixCls}-corner`]: {
-          insetInlineEnd: 0,
-          borderInlineEndColor: 'transparent',
-          borderBlockEndColor: 'transparent',
-        },
-      },
-      [`&${ribbonPrefixCls}-placement-start`]: {
-        insetInlineStart: -badgeRibbonOffset,
-        borderEndStartRadius: 0,
-        [`${ribbonPrefixCls}-corner`]: {
-          insetInlineStart: 0,
-          borderBlockEndColor: 'transparent',
-          borderInlineStartColor: 'transparent',
-        },
-      },
-
-      // ====================== RTL =======================
-      '&-rtl': {
-        direction: 'rtl',
-      },
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook('Badge', (token) => {
-  const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token
-
-  const badgeFontHeight = Math.round(fontSize * lineHeight)
-  const badgeShadowSize = lineWidth
-  const badgeZIndex = 'auto'
-  const badgeHeight = badgeFontHeight - 2 * badgeShadowSize
-  const badgeTextColor = token.colorBgContainer
-  const badgeFontWeight = 'normal'
-  const badgeFontSize = fontSizeSM
-  const badgeColor = token.colorError
-  const badgeColorHover = token.colorErrorHover
-  const badgeHeightSm = fontSize
-  const badgeDotSize = fontSizeSM / 2
-  const badgeFontSizeSm = fontSizeSM
-  const badgeStatusSize = fontSizeSM / 2
-
-  const badgeToken = mergeToken<BadgeToken>(token, {
-    badgeFontHeight,
-    badgeShadowSize,
-    badgeZIndex,
-    badgeHeight,
-    badgeTextColor,
-    badgeFontWeight,
-    badgeFontSize,
-    badgeColor,
-    badgeColorHover,
-    badgeShadowColor: colorBorderBg,
-    badgeHeightSm,
-    badgeDotSize,
-    badgeFontSizeSm,
-    badgeStatusSize,
-    badgeProcessingDuration: '1.2s',
-    badgeRibbonOffset: marginXS,
-
-    // Follow token just by Design. Not related with token
-    badgeRibbonCornerTransform: 'scaleY(0.75)',
-    badgeRibbonCornerFilter: `brightness(75%)`,
-  })
-
-  return [genSharedBadgeStyle(badgeToken)]
-})

package/src/breadcrumb/Breadcrumb.tsx

@@ -1,172 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import { cloneVNode, defineComponent } from 'vue'
-
-import { flattenChildren, getPropsSlot } from '../_util/props-util'
-import type { CustomSlotsType, VueNode } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import warning from '../_util/warning'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import Menu from '../menu'
-import type { BreadcrumbItemProps } from './BreadcrumbItem'
-import BreadcrumbItem from './BreadcrumbItem'
-import useStyle from './style'
-
-export interface Route {
-  path: string
-  breadcrumbName: string
-  children?: Omit<Route, 'children'>[]
-}
-
-export const breadcrumbProps = () => ({
-  prefixCls: String,
-  routes: { type: Array as PropType<Route[]> },
-  params: PropTypes.any,
-  separator: PropTypes.any,
-  itemRender: {
-    type: Function as PropType<
-      (opt: { route: Route; params: unknown; routes: Route[]; paths: string[] }) => VueNode
-    >,
-  },
-})
-
-export type BreadcrumbProps = Partial<ExtractPropTypes<ReturnType<typeof breadcrumbProps>>>
-
-function getBreadcrumbName(route: Route, params: unknown) {
-  if (!route.breadcrumbName) {
-    return null
-  }
-  const paramsKeys = Object.keys(params).join('|')
-  const name = route.breadcrumbName.replace(
-    new RegExp(`:(${paramsKeys})`, 'g'),
-    (replacement, key) => params[key] || replacement,
-  )
-  return name
-}
-function defaultItemRender(opt: {
-  route: Route
-  params: unknown
-  routes: Route[]
-  paths: string[]
-}): VueNode {
-  const { route, params, routes, paths } = opt
-  const isLastItem = routes.indexOf(route) === routes.length - 1
-  const name = getBreadcrumbName(route, params)
-  return isLastItem ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>
-}
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ABreadcrumb',
-  inheritAttrs: false,
-  props: breadcrumbProps(),
-  slots: Object as CustomSlotsType<{
-    separator: any
-    itemRender: { route: Route; params: any; routes: Route[]; paths: string[] }
-    default: any
-  }>,
-  setup(props, { slots, attrs }) {
-    const { prefixCls, direction } = useConfigInject('breadcrumb', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const getPath = (path: string, params: unknown) => {
-      path = (path || '').replace(/^\//, '')
-      Object.keys(params).forEach((key) => {
-        path = path.replace(`:${key}`, params[key])
-      })
-      return path
-    }
-
-    const addChildPath = (paths: string[], childPath: string, params: unknown) => {
-      const originalPaths = [...paths]
-      const path = getPath(childPath || '', params)
-      if (path) {
-        originalPaths.push(path)
-      }
-      return originalPaths
-    }
-
-    const genForRoutes = ({
-      routes = [],
-      params = {},
-      separator,
-      itemRender = defaultItemRender,
-    }: any) => {
-      const paths = []
-      return routes.map((route: Route) => {
-        const path = getPath(route.path, params)
-
-        if (path) {
-          paths.push(path)
-        }
-        const tempPaths = [...paths]
-        // generated overlay by route.children
-        let overlay = null
-        if (route.children && route.children.length) {
-          overlay = (
-            <Menu
-              items={route.children.map((child) => ({
-                key: child.path || child.breadcrumbName,
-                label: itemRender({
-                  route: child,
-                  params,
-                  routes,
-                  paths: addChildPath(tempPaths, child.path, params),
-                }),
-              }))}
-            ></Menu>
-          )
-        }
-        const itemProps: BreadcrumbItemProps = { separator }
-        if (overlay) {
-          itemProps.overlay = overlay
-        }
-        return (
-          <BreadcrumbItem {...itemProps} key={path || route.breadcrumbName}>
-            {itemRender({ route, params, routes, paths: tempPaths })}
-          </BreadcrumbItem>
-        )
-      })
-    }
-    return () => {
-      let crumbs: VueNode[]
-
-      const { routes, params = {} } = props
-
-      const children = flattenChildren(getPropsSlot(slots, props))
-      const separator = getPropsSlot(slots, props, 'separator') ?? '/'
-
-      const itemRender = props.itemRender || slots.itemRender || defaultItemRender
-      if (routes && routes.length > 0) {
-        // generated by route
-        crumbs = genForRoutes({
-          routes,
-          params,
-          separator,
-          itemRender,
-        })
-      } else if (children.length) {
-        crumbs = children.map((element, index) => {
-          warning(
-            typeof element.type === 'object' &&
-              (element.type.__ANT_BREADCRUMB_ITEM || element.type.__ANT_BREADCRUMB_SEPARATOR),
-            'Breadcrumb',
-            "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
-          )
-          return cloneVNode(element, { separator, key: index })
-        })
-      }
-
-      const breadcrumbClassName = {
-        [prefixCls.value]: true,
-        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-        [`${attrs.class}`]: !!attrs.class,
-        [hashId.value]: true,
-      }
-
-      return wrapSSR(
-        <nav {...attrs} class={breadcrumbClassName}>
-          <ol>{crumbs}</ol>
-        </nav>,
-      )
-    }
-  },
-})

package/src/breadcrumb/BreadcrumbItem.tsx

@@ -1,91 +0,0 @@
-import DownOutlined from '@ant-design/icons-vue/DownOutlined'
-
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-import { defineComponent } from 'vue'
-
-import type { MouseEventHandler } from '../_util/EventInterface'
-import { getPropsSlot } from '../_util/props-util'
-import { eventType, objectType } from '../_util/type'
-import type { CustomSlotsType, VueNode } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import type { DropdownProps } from '../dropdown/dropdown'
-import Dropdown from '../dropdown/dropdown'
-
-export const breadcrumbItemProps = () => ({
-  prefixCls: String,
-  href: String,
-  separator: PropTypes.any,
-  dropdownProps: objectType<DropdownProps>(),
-  overlay: PropTypes.any,
-  onClick: eventType<MouseEventHandler>(),
-})
-
-export type BreadcrumbItemProps = Partial<ExtractPropTypes<ReturnType<typeof breadcrumbItemProps>>>
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ABreadcrumbItem',
-  inheritAttrs: false,
-  __ANT_BREADCRUMB_ITEM: true,
-  props: breadcrumbItemProps(),
-  // emits: ['click'],
-  slots: Object as CustomSlotsType<{
-    separator: any
-    overlay: any
-    default: any
-  }>,
-  setup(props, { slots, attrs, emit }) {
-    const { prefixCls } = useConfigInject('breadcrumb', props)
-    /**
-     * if overlay is have
-     * Wrap a Dropdown
-     */
-    const renderBreadcrumbNode = (breadcrumbItem: VueNode, prefixCls: string) => {
-      const overlay = getPropsSlot(slots, props, 'overlay')
-      if (overlay) {
-        return (
-          <Dropdown {...props.dropdownProps} overlay={overlay} placement="bottom">
-            <span class={`${prefixCls}-overlay-link`}>
-              {breadcrumbItem}
-              <DownOutlined />
-            </span>
-          </Dropdown>
-        )
-      }
-      return breadcrumbItem
-    }
-    const handleClick = (e: MouseEvent) => {
-      emit('click', e)
-    }
-    return () => {
-      const separator = getPropsSlot(slots, props, 'separator') ?? '/'
-      const children = getPropsSlot(slots, props)
-      const { class: cls, style, ...restAttrs } = attrs
-      let link: VueNode
-      if (props.href !== undefined) {
-        link = (
-          <a class={`${prefixCls.value}-link`} onClick={handleClick} {...restAttrs}>
-            {children}
-          </a>
-        )
-      } else {
-        link = (
-          <span class={`${prefixCls.value}-link`} onClick={handleClick} {...restAttrs}>
-            {children}
-          </span>
-        )
-      }
-      // wrap to dropDown
-      link = renderBreadcrumbNode(link, prefixCls.value)
-      if (children !== undefined && children !== null) {
-        return (
-          <li class={cls} style={style as CSSProperties}>
-            {link}
-            {separator && <span class={`${prefixCls.value}-separator`}>{separator}</span>}
-          </li>
-        )
-      }
-      return null
-    }
-  },
-})

package/src/breadcrumb/BreadcrumbSeparator.tsx

@@ -1,33 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { defineComponent } from 'vue'
-
-import { flattenChildren } from '../_util/props-util'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-
-export const breadcrumbSeparatorProps = () => ({
-  prefixCls: String,
-})
-export type BreadcrumbSeparatorProps = Partial<
-  ExtractPropTypes<ReturnType<typeof breadcrumbSeparatorProps>>
->
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ABreadcrumbSeparator',
-  __ANT_BREADCRUMB_SEPARATOR: true,
-  inheritAttrs: false,
-  props: breadcrumbSeparatorProps(),
-  setup(props, { slots, attrs }) {
-    const { prefixCls } = useConfigInject('breadcrumb', props)
-
-    return () => {
-      const { separator, class: className, ...restAttrs } = attrs
-      const children = flattenChildren(slots.default?.())
-      return (
-        <span class={[`${prefixCls.value}-separator`, className]} {...restAttrs}>
-          {children.length > 0 ? children : '/'}
-        </span>
-      )
-    }
-  },
-})