@antsoo-lib/components 0.1.11 → 0.1.13

package/src/statistic/style/index.tsx

@@ -1,69 +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'
-
-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

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

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

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

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

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