@antsoo-lib/components 0.1.2 → 0.1.4

package/src/tabs/style/motion.ts

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

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

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

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

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

@@ -0,0 +1,184 @@
+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'),
+  ]
+})