@antsoo-lib/components 0.1.2 → 0.1.4

package/src/statistic/style/index.tsx

@@ -0,0 +1,69 @@
+import type { CSSObject } from '../../_util/cssinjs'
+import { resetComponent } from '../../style'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook, mergeToken } from '../../theme/internal'
+
+interface StatisticToken extends FullToken<'Statistic'> {
+  statisticTitleFontSize: number
+  statisticContentFontSize: number
+  statisticFontFamily: string
+}
+
+const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken): CSSObject => {
+  const {
+    componentCls,
+    marginXXS,
+    padding,
+    colorTextDescription,
+    statisticTitleFontSize,
+    colorTextHeading,
+    statisticContentFontSize,
+    statisticFontFamily,
+  } = token
+
+  return {
+    [`${componentCls}`]: {
+      ...resetComponent(token),
+      [`${componentCls}-title`]: {
+        marginBottom: marginXXS,
+        color: colorTextDescription,
+        fontSize: statisticTitleFontSize,
+      },
+
+      [`${componentCls}-skeleton`]: {
+        paddingTop: padding,
+      },
+
+      [`${componentCls}-content`]: {
+        color: colorTextHeading,
+        fontSize: statisticContentFontSize,
+        fontFamily: statisticFontFamily,
+        [`${componentCls}-content-value`]: {
+          display: 'inline-block',
+          direction: 'ltr',
+        },
+        [`${componentCls}-content-prefix, ${componentCls}-content-suffix`]: {
+          display: 'inline-block',
+        },
+        [`${componentCls}-content-prefix`]: {
+          marginInlineEnd: marginXXS,
+        },
+        [`${componentCls}-content-suffix`]: {
+          marginInlineStart: marginXXS,
+        },
+      },
+    },
+  }
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Statistic', (token) => {
+  const { fontSizeHeading3, fontSize, fontFamily } = token
+
+  const statisticToken = mergeToken<StatisticToken>(token, {
+    statisticTitleFontSize: fontSize,
+    statisticContentFontSize: fontSizeHeading3,
+    statisticFontFamily: fontFamily,
+  })
+  return [genStatisticStyle(statisticToken)]
+})

package/src/statistic/utils.ts

@@ -0,0 +1,69 @@
+import type { VNodeTypes } from 'vue'
+
+export type valueType = number | string
+export type countdownValueType = number | string
+
+export type Formatter =
+  | false
+  | 'number'
+  | 'countdown'
+  | (({ value, config }: { value: valueType; config?: FormatConfig }) => VNodeTypes)
+
+export interface FormatConfig {
+  formatter?: Formatter
+  decimalSeparator?: string
+  groupSeparator?: string
+  precision?: number
+  prefixCls?: string
+}
+
+export interface CountdownFormatConfig extends FormatConfig {
+  format?: string
+}
+
+// Countdown
+const timeUnits: [string, number][] = [
+  ['Y', 1000 * 60 * 60 * 24 * 365], // years
+  ['M', 1000 * 60 * 60 * 24 * 30], // months
+  ['D', 1000 * 60 * 60 * 24], // days
+  ['H', 1000 * 60 * 60], // hours
+  ['m', 1000 * 60], // minutes
+  ['s', 1000], // seconds
+  ['S', 1], // million seconds
+]
+
+export function formatTimeStr(duration: number, format: string) {
+  let leftDuration: number = duration
+
+  const escapeRegex = /\[[^\]]*\]/g
+  const keepList: string[] = (format.match(escapeRegex) || []).map((str) => str.slice(1, -1))
+  const templateText = format.replace(escapeRegex, '[]')
+
+  const replacedText = timeUnits.reduce((current, [name, unit]) => {
+    if (current.includes(name)) {
+      const value = Math.floor(leftDuration / unit)
+      leftDuration -= value * unit
+      return current.replace(new RegExp(`${name}+`, 'g'), (match: string) => {
+        const len = match.length
+        return value.toString().padStart(len, '0')
+      })
+    }
+    return current
+  }, templateText)
+
+  let index = 0
+  return replacedText.replace(escapeRegex, () => {
+    const match = keepList[index]
+    index += 1
+    return match
+  })
+}
+
+export function formatCountdown(value: valueType, config: CountdownFormatConfig) {
+  const { format = '' } = config
+  const target = new Date(value).getTime()
+  const current = Date.now()
+  const diff = Math.max(target - current, 0)
+
+  return formatTimeStr(diff, format)
+}

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

@@ -0,0 +1,58 @@
+---
+category: Components
+type: Navigation
+cols: 1
+title: Steps
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAAAAAAAAAAAADrJ8AQ/original
+---
+
+`Steps` is a navigation bar that guides users through the steps of a task.
+
+## API
+
+### Steps
+
+The whole of the step bar.
+
+| Property         | Description                                                                                                                     | Type                                                                                    | Default      | Version |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------ | ------- |
+| current(v-model) | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step`, support v-model after 1.5.0 | number                                                                                  | 0            |         |
+| direction        | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported                                   | string                                                                                  | `horizontal` |         |
+| initial          | set the initial step, counting from 0                                                                                           | number                                                                                  | 0            |         |
+| labelPlacement   | support vertical title and description                                                                                          | string                                                                                  | `horizontal` |         |
+| percent          | Progress circle percentage of current step in `process` status (only works on basic Steps)                                      | number                                                                                  | -            | 3.0     |
+| progressDot      | Steps with progress dot style, customize the progress dot by setting a scoped slot. labelPlacement will be `vertical`           | Boolean or v-slot:progressDot="{index, status, title, description, prefixCls, iconDot}" | false        |         |
+| responsive       | change to vertical direction when screen width smaller than `532px`                                                             | boolean                                                                                 | true         | 3.0     |
+| size             | to specify the size of the step bar, `default` and `small` are currently supported                                              | string                                                                                  | `default`    |         |
+| status           | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error`             | string                                                                                  | `process`    |         |
+| type             | Type of steps, can be set to one of the following values: `default`, `navigation`                                               | string                                                                                  | `default`    | 1.5.0   |
+| items            | StepItem content                                                                                                                | [StepItem](#stepsstep)                                                                  | []           |         |
+
+### `type="inline"` (4.0+)
+
+| Property | Description                                                                                                         | Type                   | Default   | Version |
+| -------- | ------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------- | ------- |
+| current  | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step`                  | number                 | 0         |         |
+| initial  | Set the initial step, counting from 0                                                                               | number                 | 0         |         |
+| status   | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string                 | `process` |         |
+| items    | StepItem content. not supported: `icon` `subtitle`                                                                  | [StepItem](#stepsstep) | []        |         |
+
+#### Steps Events
+
+| Events Name | Description                  | Arguments         | Version |       |
+| ----------- | ---------------------------- | ----------------- | ------- | ----- |
+| change      | Trigger when Step is changed | (current) => void | -       | 1.5.0 |
+
+### Steps.Step
+
+A single step in the step bar.
+
+| Property    | Description                                                                                                                                           | Type         | Default | Version |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------- | ------- |
+| description | description of the step, optional property                                                                                                            | string\|slot | -       |         |
+| disabled    | Disable click                                                                                                                                         | boolean      | false   | 1.5.0   |
+| icon        | icon of the step, optional property                                                                                                                   | string\|slot | -       |         |
+| status      | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string       | `wait`  |         |
+| subTitle    | Subtitle of the step                                                                                                                                  | string\|slot | -       | 1.5.0   |
+| title       | title of the step                                                                                                                                     | string\|slot | -       |         |

package/src/steps/index.tsx

@@ -0,0 +1,170 @@
+import CheckOutlined from '@ant-design/icons-vue/CheckOutlined'
+import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'
+
+import type { App, ExtractPropTypes } from 'vue'
+import { computed, defineComponent } from 'vue'
+
+import type { MouseEventHandler } from '../_util/EventInterface'
+import classNames from '../_util/classNames'
+import useBreakpoint from '../_util/hooks/useBreakpoint'
+import omit from '../_util/omit'
+import initDefaultProps from '../_util/props-util/initDefaultProps'
+import type { CustomSlotsType, VueNode } from '../_util/type'
+import { anyType, arrayType, booleanType, functionType, someType, stringType } from '../_util/type'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import Progress from '../progress'
+import { useToken } from '../theme/internal'
+import Tooltip from '../tooltip'
+import VcSteps, { Step as VcStep } from '../vc-steps'
+import { VcStepProps } from '../vc-steps/Step'
+import type { ProgressDotRender, Status } from '../vc-steps/interface'
+// CSSINJS
+import useStyle from './style'
+
+export const stepsProps = () => ({
+  prefixCls: String,
+  iconPrefix: String,
+  current: Number,
+  initial: Number,
+  percent: Number,
+  responsive: booleanType(),
+  items: arrayType<StepProps[]>(),
+  labelPlacement: stringType<'horizontal' | 'vertical'>(),
+  status: stringType<Status>(),
+  size: stringType<'default' | 'small'>(),
+  direction: stringType<'horizontal' | 'vertical'>(),
+  progressDot: someType<boolean | ProgressDotRender>([Boolean, Function]),
+  type: stringType<'default' | 'navigation' | 'inline'>(),
+  onChange: functionType<(current: number) => void>(),
+  'onUpdate:current': functionType<(current: number) => void>(),
+})
+
+export const stepProps = () => ({
+  description: anyType(),
+  icon: anyType(),
+  status: stringType<Status>(),
+  disabled: booleanType(),
+  title: anyType(),
+  subTitle: anyType(),
+  onClick: functionType<MouseEventHandler>(),
+})
+
+export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>>
+
+export type StepProps = Partial<ExtractPropTypes<ReturnType<typeof stepProps>>>
+
+const Steps = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ASteps',
+  inheritAttrs: false,
+  props: initDefaultProps(stepsProps(), {
+    current: 0,
+    responsive: true,
+    labelPlacement: 'horizontal',
+  }),
+  slots: Object as CustomSlotsType<{
+    progressDot: any
+    default: any
+  }>,
+
+  // emits: ['update:current', 'change'],
+  setup(props, { attrs, slots, emit }) {
+    const { prefixCls, direction: rtlDirection, configProvider } = useConfigInject('steps', props)
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+    const [, token] = useToken()
+
+    const screens = useBreakpoint()
+    const direction = computed(() =>
+      props.responsive && screens.value.xs ? 'vertical' : props.direction,
+    )
+    const iconPrefix = computed(() => configProvider.getPrefixCls('', props.iconPrefix))
+    const handleChange = (current: number) => {
+      emit('update:current', current)
+      emit('change', current)
+    }
+    const isInline = computed(() => props.type === 'inline')
+    const mergedPercent = computed(() => (isInline.value ? undefined : props.percent))
+    const stepIconRender = ({
+      node,
+      status,
+    }: {
+      node: any
+      index: number
+      status: string
+      title: any
+      description: any
+    }) => {
+      if (status === 'process' && props.percent !== undefined) {
+        // currently it's hard-coded, since we can't easily read the actually width of icon
+
+        const progressWidth =
+          props.size === 'small' ? token.value.controlHeight : token.value.controlHeightLG
+
+        const iconWithProgress = (
+          <div class={`${prefixCls.value}-progress-icon`}>
+            <Progress
+              type="circle"
+              percent={mergedPercent.value}
+              size={progressWidth}
+              strokeWidth={4}
+              format={() => null}
+            />
+            {node}
+          </div>
+        )
+        return iconWithProgress
+      }
+      return node
+    }
+    const icons = computed(() => ({
+      finish: <CheckOutlined class={`${prefixCls.value}-finish-icon`} />,
+      error: <CloseOutlined class={`${prefixCls.value}-error-icon`} />,
+    }))
+    return () => {
+      const stepsClassName = classNames(
+        {
+          [`${prefixCls.value}-rtl`]: rtlDirection.value === 'rtl',
+          [`${prefixCls.value}-with-progress`]: mergedPercent.value !== undefined,
+        },
+        attrs.class,
+        hashId.value,
+      )
+      const itemRender = (item: StepProps, stepItem: VueNode) =>
+        item.description ? <Tooltip title={item.description}>{stepItem}</Tooltip> : stepItem
+
+      return wrapSSR(
+        <VcSteps
+          icons={icons.value}
+          {...attrs}
+          {...omit(props, ['percent', 'responsive'])}
+          items={props.items}
+          direction={direction.value}
+          prefixCls={prefixCls.value}
+          iconPrefix={iconPrefix.value}
+          class={stepsClassName}
+          onChange={handleChange}
+          isInline={isInline.value}
+          itemRender={isInline.value ? itemRender : undefined}
+          v-slots={{ stepIcon: stepIconRender, ...slots }}
+        />,
+      )
+    }
+  },
+})
+
+/* istanbul ignore next */
+export const Step = defineComponent({
+  compatConfig: { MODE: 3 },
+  ...(VcStep as any),
+  name: 'AStep',
+  props: VcStepProps(),
+})
+export default Object.assign(Steps, {
+  Step,
+  install: (app: App) => {
+    app.component(Steps.name, Steps)
+    app.component(Step.name, Step)
+    return app
+  },
+})

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

@@ -0,0 +1,63 @@
+---
+category: Components
+subtitle: 步骤条
+type: 导航
+cols: 1
+title: Steps
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAAAAAAAAAAAADrJ8AQ/original
+---
+
+引导用户按照流程完成任务的导航条。
+
+## 何时使用
+
+当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
+
+## API
+
+### Steps
+
+整体步骤条。
+
+| 参数              | 说明                                                                                                | 类型                                                                                    | 默认值       | 版本  |
+| ----------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------ | ----- |
+| current (v-model) | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态, 1.5.0 后支持 v-model | number                                                                                  | 0            |       |
+| direction         | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向                            | string                                                                                  | horizontal   |       |
+| initial           | 起始序号，从 0 开始记数                                                                             | number                                                                                  | 0            |       |
+| labelPlacement    | 指定标签放置位置，默认水平放图标右侧，可选`vertical`放图标下方                                      | string                                                                                  | `horizontal` |       |
+| percent           | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效）                                    | number                                                                                  | -            | 3.0   |
+| progressDot       | 点状步骤条，可以设置为一个 作用域插槽,labelPlacement 将强制为`vertical`                             | Boolean or v-slot:progressDot="{index, status, title, description, prefixCls, iconDot}" | false        |       |
+| responsive        | 当屏幕宽度小于 532px 时自动变为垂直模式                                                             | boolean                                                                                 | true         | 3.0   |
+| size              | 指定大小，目前支持普通（`default`）和迷你（`small`）                                                | string                                                                                  | default      |       |
+| status            | 指定当前步骤的状态，可选 `wait` `process` `finish` `error`                                          | string                                                                                  | process      |       |
+| type              | 步骤条类型，有 `default` 和 `navigation` 两种                                                       | string                                                                                  | `default`    | 1.5.0 |
+| items             | 配置选项卡内容                                                                                      | [StepItem](#stepsstep)[]                                                                | []           |       |
+
+### `type="inline"` (4.0+)
+
+| 参数    | 说明                                                                          | 类型                   | 默认值    | 版本 |
+| ------- | ----------------------------------------------------------------------------- | ---------------------- | --------- | ---- |
+| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number                 | 0         |      |
+| initial | 起始序号，从 0 开始记数                                                       | number                 | 0         |      |
+| status  | 指定当前步骤的状态，可选 `wait` `process` `finish` `error`                    | string                 | `process` |      |
+| items   | 配置选项卡内容，不支持 `icon` `subtitle`                                      | [StepItem](#stepsstep) | []        |      |
+
+#### Steps 事件
+
+| 事件名称 | 说明               | 回调参数          | 版本 |       |
+| -------- | ------------------ | ----------------- | ---- | ----- |
+| change   | 点击切换步骤时触发 | (current) => void | -    | 1.5.0 |
+
+### Steps.Step
+
+步骤条内的每一个步骤。
+
+| 参数        | 说明                                                                                                          | 类型           | 默认值 | 版本  |
+| ----------- | ------------------------------------------------------------------------------------------------------------- | -------------- | ------ | ----- |
+| description | 步骤的详情描述，可选                                                                                          | string \| slot | -      |       |
+| disabled    | 禁用点击                                                                                                      | boolean        | false  | 1.5.0 |
+| icon        | 步骤图标的类型，可选                                                                                          | string \| slot | -      |       |
+| status      | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string         | `wait` |       |
+| subTitle    | 子标题                                                                                                        | string \| slot | -      | 1.5.0 |
+| title       | 标题                                                                                                          | string \| slot | -      |       |

package/src/steps/style/custom-icon.ts

@@ -0,0 +1,36 @@
+import type { StepsToken } from '.'
+import type { CSSObject } from '../../_util/cssinjs'
+import type { GenerateStyle } from '../../theme/internal'
+
+const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
+  const { componentCls, stepsIconCustomTop, stepsIconCustomSize, stepsIconCustomFontSize } = token
+
+  return {
+    [`${componentCls}-item-custom`]: {
+      [`> ${componentCls}-item-container > ${componentCls}-item-icon`]: {
+        height: 'auto',
+        background: 'none',
+        border: 0,
+        [`> ${componentCls}-icon`]: {
+          top: stepsIconCustomTop,
+          width: stepsIconCustomSize,
+          height: stepsIconCustomSize,
+          fontSize: stepsIconCustomFontSize,
+          lineHeight: `${stepsIconCustomSize}px`,
+        },
+      },
+    },
+
+    // Only adjust horizontal customize icon width
+    [`&:not(${componentCls}-vertical)`]: {
+      [`${componentCls}-item-custom`]: {
+        [`${componentCls}-item-icon`]: {
+          width: 'auto',
+          background: 'none',
+        },
+      },
+    },
+  }
+}
+
+export default genStepsCustomIconStyle