@antsoo-lib/components 0.1.11 → 0.1.13

package/src/tabs/style/motion.ts

@@ -1,46 +0,0 @@
-import type { TabsToken } from '.'
-import { initSlideMotion } from '../../style/motion'
-import type { GenerateStyle } from '../../theme/internal'
-
-const genMotionStyle: GenerateStyle<TabsToken> = (token) => {
-  const { componentCls, motionDurationSlow } = token
-
-  return [
-    {
-      [componentCls]: {
-        [`${componentCls}-switch`]: {
-          '&-appear, &-enter': {
-            transition: 'none',
-
-            '&-start': {
-              opacity: 0,
-            },
-            '&-active': {
-              opacity: 1,
-              transition: `opacity ${motionDurationSlow}`,
-            },
-          },
-
-          '&-leave': {
-            position: 'absolute',
-            transition: 'none',
-            inset: 0,
-
-            '&-start': {
-              opacity: 1,
-            },
-            '&-active': {
-              opacity: 0,
-              transition: `opacity ${motionDurationSlow}`,
-            },
-          },
-        },
-      },
-    },
-
-    // Follow code may reuse in other components
-    [initSlideMotion(token, 'slide-up'), initSlideMotion(token, 'slide-down')],
-  ]
-}
-
-export default genMotionStyle

package/src/tag/CheckableTag.tsx

@@ -1,56 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import useStyle from './style'
-
-const checkableTagProps = () => ({
-  prefixCls: String,
-  checked: { type: Boolean, default: undefined },
-  onChange: {
-    type: Function as PropType<(checked: boolean) => void>,
-  },
-  onClick: {
-    type: Function as PropType<(e: MouseEvent) => void>,
-  },
-  'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
-})
-export type CheckableTagProps = Partial<ExtractPropTypes<ReturnType<typeof checkableTagProps>>>
-
-const CheckableTag = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ACheckableTag',
-  inheritAttrs: false,
-  props: checkableTagProps(),
-  // emits: ['update:checked', 'change', 'click'],
-  setup(props, { slots, emit, attrs }) {
-    const { prefixCls } = useConfigInject('tag', props)
-    // Style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const handleClick = (e: MouseEvent) => {
-      const { checked } = props
-      emit('update:checked', !checked)
-      emit('change', !checked)
-      emit('click', e)
-    }
-
-    const cls = computed(() =>
-      classNames(prefixCls.value, hashId.value, {
-        [`${prefixCls.value}-checkable`]: true,
-        [`${prefixCls.value}-checkable-checked`]: props.checked,
-      }),
-    )
-
-    return () => {
-      return wrapSSR(
-        <span {...attrs} class={[cls.value, attrs.class]} onClick={handleClick}>
-          {slots.default?.()}
-        </span>,
-      )
-    }
-  },
-})
-
-export default CheckableTag

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

@@ -1,44 +0,0 @@
----
-category: Components
-type: Data Display
-title: Tag
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_SBsSrKLg00AAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JPNAQYrVkYkAAAAAAAAAAAAADrJ8AQ/original
----
-
-Tag for categorizing or markup.
-
-## When To Use
-
-- It can be used to tag by dimension or property.
-- When categorizing.
-
-## API
-
-### Tag
-
-| Property  | Description                   | Type          | Default | Version |
-| --------- | ----------------------------- | ------------- | ------- | ------- |
-| closable  | Whether the Tag can be closed | boolean       | `false` |         |
-| closeIcon | Custom close icon             | VNode \| slot | -       | 2.0.0   |
-| color     | Color of the Tag              | string        | -       |         |
-| icon      | Set the icon of tag           | VNode \| slot | -       | 2.0.0   |
-| bordered  | Whether has border style      | boolean       | `true`  | 4.x     |
-
-### Tag Events
-
-| Events Name | Description                          | Arguments   |
-| ----------- | ------------------------------------ | ----------- |
-| close       | Callback executed when tag is closed | (e) => void |
-
-### Tag.CheckableTag
-
-| Property         | Description           | Type    | Default |
-| ---------------- | --------------------- | ------- | ------- |
-| checked(v-model) | Checked status of Tag | boolean | `false` |
-
-### Tag.CheckableTag Events
-
-| Events Name | Description                                     | Arguments         |
-| ----------- | ----------------------------------------------- | ----------------- |
-| change      | Callback executed when Tag is checked/unchecked | (checked) => void |

package/src/tag/index.tsx

@@ -1,175 +0,0 @@
-import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'
-
-import type { App, CSSProperties, ExtractPropTypes, HTMLAttributes, Plugin, PropType } from 'vue'
-import { computed, defineComponent, shallowRef, watchEffect } from 'vue'
-
-import classNames from '../_util/classNames'
-import type { PresetColorType, PresetStatusColorType } from '../_util/colors'
-import { isPresetColor, isPresetStatusColor } from '../_util/colors'
-import { eventType } from '../_util/type'
-import type { CustomSlotsType, LiteralUnion } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import warning from '../_util/warning'
-import Wave from '../_util/wave'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import CheckableTag from './CheckableTag'
-import useStyle from './style'
-
-export const tagProps = () => ({
-  prefixCls: String,
-  color: {
-    type: String as PropType<LiteralUnion<PresetColorType | PresetStatusColorType>>,
-  },
-  closable: { type: Boolean, default: false },
-  closeIcon: PropTypes.any,
-  /** @deprecated `visible` will be removed in next major version. */
-  visible: { type: Boolean, default: undefined },
-  onClose: {
-    type: Function as PropType<(e: MouseEvent) => void>,
-  },
-  onClick: eventType<(e: MouseEvent) => void>(),
-  'onUpdate:visible': Function as PropType<(vis: boolean) => void>,
-  icon: PropTypes.any,
-  bordered: { type: Boolean, default: true },
-})
-
-export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<ReturnType<typeof tagProps>>>
-
-const Tag = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ATag',
-  inheritAttrs: false,
-  props: tagProps(),
-  // emits: ['update:visible', 'close'],
-  slots: Object as CustomSlotsType<{
-    closeIcon: any
-    icon: any
-    default: any
-  }>,
-  setup(props, { slots, emit, attrs }) {
-    const { prefixCls, direction } = useConfigInject('tag', props)
-
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const visible = shallowRef(true)
-
-    // Warning for deprecated usage
-    if (process.env.NODE_ENV !== 'production') {
-      warning(
-        props.visible === undefined,
-        'Tag',
-        '`visible` is deprecated, please use `<Tag v-show="visible" />` instead.',
-      )
-    }
-
-    watchEffect(() => {
-      if (props.visible !== undefined) {
-        visible.value = props.visible!
-      }
-    })
-
-    const handleCloseClick = (e: MouseEvent) => {
-      e.stopPropagation()
-      emit('update:visible', false)
-      emit('close', e)
-
-      if (e.defaultPrevented) {
-        return
-      }
-      if (props.visible === undefined) {
-        visible.value = false
-      }
-    }
-
-    // const isPresetColor = computed(() => {
-    //   const { color } = props;
-    //   if (!color) {
-    //     return false;
-    //   }
-    //   return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
-    // });
-
-    const isInternalColor = computed(
-      () => isPresetColor(props.color) || isPresetStatusColor(props.color),
-    )
-
-    const tagClassName = computed(() =>
-      classNames(prefixCls.value, hashId.value, {
-        [`${prefixCls.value}-${props.color}`]: isInternalColor.value,
-        [`${prefixCls.value}-has-color`]: props.color && !isInternalColor.value,
-        [`${prefixCls.value}-hidden`]: !visible.value,
-        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-        [`${prefixCls.value}-borderless`]: !props.bordered,
-      }),
-    )
-    const handleClick = (e: MouseEvent) => {
-      emit('click', e)
-    }
-    return () => {
-      const {
-        icon = slots.icon?.(),
-        color,
-        closeIcon = slots.closeIcon?.(),
-        closable = false,
-      } = props
-
-      const renderCloseIcon = () => {
-        if (closable) {
-          return closeIcon ? (
-            <span class={`${prefixCls.value}-close-icon`} onClick={handleCloseClick}>
-              {closeIcon}
-            </span>
-          ) : (
-            <CloseOutlined class={`${prefixCls.value}-close-icon`} onClick={handleCloseClick} />
-          )
-        }
-        return null
-      }
-
-      const tagStyle = {
-        backgroundColor: color && !isInternalColor.value ? color : undefined,
-      }
-
-      const iconNode = icon || null
-      const children = slots.default?.()
-      const kids = iconNode ? (
-        <>
-          {iconNode}
-          <span>{children}</span>
-        </>
-      ) : (
-        children
-      )
-
-      const isNeedWave = props.onClick !== undefined
-      const tagNode = (
-        <span
-          {...attrs}
-          onClick={handleClick}
-          class={[tagClassName.value, attrs.class]}
-          style={[tagStyle, attrs.style as CSSProperties]}
-        >
-          {kids}
-          {renderCloseIcon()}
-        </span>
-      )
-
-      return wrapSSR(isNeedWave ? <Wave>{tagNode}</Wave> : tagNode)
-    }
-  },
-})
-
-Tag.CheckableTag = CheckableTag
-
-Tag.install = function (app: App) {
-  app.component(Tag.name, Tag)
-  app.component(CheckableTag.name, CheckableTag)
-  return app
-}
-
-export { CheckableTag }
-
-export default Tag as typeof Tag &
-  Plugin & {
-    readonly CheckableTag: typeof CheckableTag
-  }

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

@@ -1,45 +0,0 @@
----
-category: Components
-subtitle: 标签
-type: 数据展示
-title: Tag
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_SBsSrKLg00AAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JPNAQYrVkYkAAAAAAAAAAAAADrJ8AQ/original
----
-
-进行标记和分类的小标签。
-
-## 何时使用
-
-- 用于标记事物的属性和维度。
-- 进行分类。
-
-## API
-
-### Tag
-
-| 参数      | 说明             | 类型          | 默认值 | 版本  |
-| --------- | ---------------- | ------------- | ------ | ----- |
-| closable  | 标签是否可以关闭 | boolean       | false  |       |
-| closeIcon | 自定义关闭按钮   | VNode \| slot | -      | 2.0.0 |
-| color     | 标签色           | string        | -      |       |
-| icon      | 设置图标         | VNode \| slot | -      | 2.0.0 |
-| bordered  | 是否有边框       | boolean       | `true` | 4.x   |
-
-### 事件
-
-| 事件名称 | 说明         | 回调参数    |
-| -------- | ------------ | ----------- |
-| close    | 关闭时的回调 | (e) => void |
-
-### Tag.CheckableTag
-
-| 参数             | 说明               | 类型    | 默认值 |
-| ---------------- | ------------------ | ------- | ------ |
-| checked(v-model) | 设置标签的选中状态 | boolean | false  |
-
-### 事件
-
-| 事件名称 | 说明                 | 回调参数          |
-| -------- | -------------------- | ----------------- |
-| change   | 点击标签时触发的回调 | (checked) => void |

package/src/tag/style/index.ts

@@ -1,184 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-import type { CSSObject } from '../../_util/cssinjs'
-import { capitalize } from '../../_util/util'
-import { genPresetColor, resetComponent } from '../../style'
-import type { FullToken } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-export interface ComponentToken {}
-
-interface TagToken extends FullToken<'Tag'> {
-  tagFontSize: number
-  tagLineHeight: CSSProperties['lineHeight']
-  tagDefaultBg: string
-  tagDefaultColor: string
-  tagIconSize: number
-  tagPaddingHorizontal: number
-  tagBorderlessBg: string
-}
-
-// ============================== Styles ==============================
-
-type CssVariableType = 'Success' | 'Info' | 'Error' | 'Warning'
-
-const genTagStatusStyle = (
-  token: TagToken,
-  status: 'success' | 'processing' | 'error' | 'warning',
-  cssVariableType: CssVariableType,
-): CSSObject => {
-  const capitalizedCssVariableType = capitalize(cssVariableType)
-  return {
-    [`${token.componentCls}-${status}`]: {
-      color: token[`color${cssVariableType}`],
-      background: token[`color${capitalizedCssVariableType}Bg`],
-      borderColor: token[`color${capitalizedCssVariableType}Border`],
-      [`&${token.componentCls}-borderless`]: {
-        borderColor: 'transparent',
-      },
-    },
-  }
-}
-
-const genPresetStyle = (token: TagToken) =>
-  genPresetColor(token, (colorKey, { textColor, lightBorderColor, lightColor, darkColor }) => ({
-    [`${token.componentCls}-${colorKey}`]: {
-      color: textColor,
-      background: lightColor,
-      borderColor: lightBorderColor,
-
-      // Inverse color
-      '&-inverse': {
-        color: token.colorTextLightSolid,
-        background: darkColor,
-        borderColor: darkColor,
-      },
-      [`&${token.componentCls}-borderless`]: {
-        borderColor: 'transparent',
-      },
-    },
-  }))
-
-const genBaseStyle = (token: TagToken): CSSObject => {
-  const { paddingXXS, lineWidth, tagPaddingHorizontal, componentCls } = token
-  const paddingInline = tagPaddingHorizontal - lineWidth
-  const iconMarginInline = paddingXXS - lineWidth
-
-  return {
-    // Result
-    [componentCls]: {
-      ...resetComponent(token),
-      display: 'inline-block',
-      height: 'auto',
-      marginInlineEnd: token.marginXS,
-      paddingInline,
-      fontSize: token.tagFontSize,
-      lineHeight: `${token.tagLineHeight}px`,
-      whiteSpace: 'nowrap',
-      background: token.tagDefaultBg,
-      border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
-      borderRadius: token.borderRadiusSM,
-      opacity: 1,
-      transition: `all ${token.motionDurationMid}`,
-      textAlign: 'start',
-
-      // RTL
-      [`&${componentCls}-rtl`]: {
-        direction: 'rtl',
-      },
-
-      '&, a, a:hover': {
-        color: token.tagDefaultColor,
-      },
-
-      [`${componentCls}-close-icon`]: {
-        marginInlineStart: iconMarginInline,
-        color: token.colorTextDescription,
-        fontSize: token.tagIconSize,
-        cursor: 'pointer',
-        transition: `all ${token.motionDurationMid}`,
-
-        '&:hover': {
-          color: token.colorTextHeading,
-        },
-      },
-
-      [`&${componentCls}-has-color`]: {
-        borderColor: 'transparent',
-
-        [`&, a, a:hover, ${token.iconCls}-close, ${token.iconCls}-close:hover`]: {
-          color: token.colorTextLightSolid,
-        },
-      },
-
-      [`&-checkable`]: {
-        backgroundColor: 'transparent',
-        borderColor: 'transparent',
-        cursor: 'pointer',
-
-        [`&:not(${componentCls}-checkable-checked):hover`]: {
-          color: token.colorPrimary,
-          backgroundColor: token.colorFillSecondary,
-        },
-
-        '&:active, &-checked': {
-          color: token.colorTextLightSolid,
-        },
-
-        '&-checked': {
-          backgroundColor: token.colorPrimary,
-          '&:hover': {
-            backgroundColor: token.colorPrimaryHover,
-          },
-        },
-
-        '&:active': {
-          backgroundColor: token.colorPrimaryActive,
-        },
-      },
-
-      [`&-hidden`]: {
-        display: 'none',
-      },
-
-      // To ensure that a space will be placed between character and `Icon`.
-      [`> ${token.iconCls} + span, > span + ${token.iconCls}`]: {
-        marginInlineStart: paddingInline,
-      },
-    },
-    [`${componentCls}-borderless`]: {
-      borderColor: 'transparent',
-      background: token.tagBorderlessBg,
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook('Tag', (token) => {
-  const { fontSize, lineHeight, lineWidth, fontSizeIcon } = token
-  const tagHeight = Math.round(fontSize * lineHeight)
-
-  const tagFontSize = token.fontSizeSM
-  const tagLineHeight = tagHeight - lineWidth * 2
-  const tagDefaultBg = token.colorFillAlter
-  const tagDefaultColor = token.colorText
-
-  const tagToken = mergeToken<TagToken>(token, {
-    tagFontSize,
-    tagLineHeight,
-    tagDefaultBg,
-    tagDefaultColor,
-    tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much more smaller
-    tagPaddingHorizontal: 8, // Fixed padding.
-    tagBorderlessBg: token.colorFillTertiary,
-  })
-
-  return [
-    genBaseStyle(tagToken),
-    genPresetStyle(tagToken),
-    genTagStatusStyle(tagToken, 'success', 'Success'),
-    genTagStatusStyle(tagToken, 'processing', 'Info'),
-    genTagStatusStyle(tagToken, 'error', 'Error'),
-    genTagStatusStyle(tagToken, 'warning', 'Warning'),
-  ]
-})