@antsoo-lib/components 0.1.11 → 0.1.13

package/src/popover/style/index.ts

@@ -1,183 +0,0 @@
-import { resetComponent } from '../../style'
-import { initZoomMotion } from '../../style/motion'
-import getArrowStyle from '../../style/placementArrow'
-import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/internal'
-import { PresetColors, genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-export interface ComponentToken {
-  zIndexPopup: number
-  width: number
-}
-
-export type PopoverToken = FullToken<'Popover'> & {
-  popoverBg: string
-  popoverColor: string
-  popoverPadding: number | string
-}
-
-const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
-  const {
-    componentCls,
-    popoverBg,
-    popoverColor,
-    width,
-    fontWeightStrong,
-    popoverPadding,
-    boxShadowSecondary,
-    colorTextHeading,
-    borderRadiusLG: borderRadius,
-    zIndexPopup,
-    marginXS,
-    colorBgElevated,
-  } = token
-
-  return [
-    {
-      [componentCls]: {
-        ...resetComponent(token),
-        position: 'absolute',
-        top: 0,
-        // use `left` to fix https://github.com/ant-design/ant-design/issues/39195
-        left: {
-          _skip_check_: true,
-          value: 0,
-        },
-        zIndex: zIndexPopup,
-        fontWeight: 'normal',
-        whiteSpace: 'normal',
-        textAlign: 'start',
-        cursor: 'auto',
-        userSelect: 'text',
-        '--antd-arrow-background-color': colorBgElevated,
-
-        '&-rtl': {
-          direction: 'rtl',
-        },
-
-        '&-hidden': {
-          display: 'none',
-        },
-
-        [`${componentCls}-content`]: {
-          position: 'relative',
-        },
-
-        [`${componentCls}-inner`]: {
-          backgroundColor: popoverBg,
-          backgroundClip: 'padding-box',
-          borderRadius,
-          boxShadow: boxShadowSecondary,
-          padding: popoverPadding,
-        },
-
-        [`${componentCls}-title`]: {
-          minWidth: width,
-          marginBottom: marginXS,
-          color: colorTextHeading,
-          fontWeight: fontWeightStrong,
-        },
-
-        [`${componentCls}-inner-content`]: {
-          color: popoverColor,
-        },
-      },
-    },
-
-    // Arrow Style
-    getArrowStyle(token, { colorBg: 'var(--antd-arrow-background-color)' }),
-
-    // Pure Render
-    {
-      [`${componentCls}-pure`]: {
-        position: 'relative',
-        maxWidth: 'none',
-
-        [`${componentCls}-content`]: {
-          display: 'inline-block',
-        },
-      },
-    },
-  ]
-}
-
-const genColorStyle: GenerateStyle<PopoverToken> = (token) => {
-  const { componentCls } = token
-
-  return {
-    [componentCls]: PresetColors.map((colorKey: keyof PresetColorType) => {
-      const lightColor = token[`${colorKey}-6`]
-      return {
-        [`&${componentCls}-${colorKey}`]: {
-          '--antd-arrow-background-color': lightColor,
-          [`${componentCls}-inner`]: {
-            backgroundColor: lightColor,
-          },
-          [`${componentCls}-arrow`]: {
-            background: 'transparent',
-          },
-        },
-      }
-    }),
-  }
-}
-
-const genWireframeStyle: GenerateStyle<PopoverToken> = (token) => {
-  const {
-    componentCls,
-    lineWidth,
-    lineType,
-    colorSplit,
-    paddingSM,
-    controlHeight,
-    fontSize,
-    lineHeight,
-    padding,
-  } = token
-
-  const titlePaddingBlockDist = controlHeight - Math.round(fontSize * lineHeight)
-  const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2
-  const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth
-  const popoverPaddingHorizontal = padding
-
-  return {
-    [componentCls]: {
-      [`${componentCls}-inner`]: {
-        padding: 0,
-      },
-
-      [`${componentCls}-title`]: {
-        margin: 0,
-        padding: `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px`,
-        borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
-      },
-
-      [`${componentCls}-inner-content`]: {
-        padding: `${paddingSM}px ${popoverPaddingHorizontal}px`,
-      },
-    },
-  }
-}
-
-export default genComponentStyleHook(
-  'Popover',
-  (token) => {
-    const { colorBgElevated, colorText, wireframe } = token
-
-    const popoverToken = mergeToken<PopoverToken>(token, {
-      popoverBg: colorBgElevated,
-      popoverColor: colorText,
-      popoverPadding: 12, // Fixed Value
-    })
-
-    return [
-      genBaseStyle(popoverToken),
-      genColorStyle(popoverToken),
-      wireframe && genWireframeStyle(popoverToken),
-      initZoomMotion(popoverToken, 'zoom-big'),
-    ]
-  },
-  ({ zIndexPopupBase }) => ({
-    zIndexPopup: zIndexPopupBase + 30,
-    width: 177,
-  }),
-)

package/src/progress/Circle.tsx

@@ -1,110 +0,0 @@
-import type { CSSProperties } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import { initDefaultProps } from '../_util/props-util'
-import { anyType } from '../_util/type'
-import Tooltip from '../tooltip'
-import { Circle as VCCircle } from '../vc-progress'
-import type { ProgressGradient, ProgressProps } from './props'
-import { progressProps } from './props'
-import { getPercentage, getSize, getStrokeColor } from './utils'
-
-export interface CircleProps extends ProgressProps {
-  strokeColor?: string | ProgressGradient
-}
-
-export const circleProps = () => ({
-  ...progressProps(),
-  strokeColor: anyType<string | ProgressGradient>(),
-})
-
-const CIRCLE_MIN_STROKE_WIDTH = 3
-
-const getMinPercent = (width: number): number => (CIRCLE_MIN_STROKE_WIDTH / width) * 100
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ProgressCircle',
-  inheritAttrs: false,
-  props: initDefaultProps(circleProps(), {
-    trailColor: null as unknown as string,
-  }),
-  setup(props, { slots, attrs }) {
-    const originWidth = computed(() => props.width ?? 120)
-    const mergedSize = computed(() => props.size ?? [originWidth.value, originWidth.value])
-
-    const sizeRef = computed(() => getSize(mergedSize.value as ProgressProps['size'], 'circle'))
-    const gapDeg = computed(() => {
-      // Support gapDeg = 0 when type = 'dashboard'
-      if (props.gapDegree || props.gapDegree === 0) {
-        return props.gapDegree
-      }
-      if (props.type === 'dashboard') {
-        return 75
-      }
-      return undefined
-    })
-
-    const circleStyle = computed<CSSProperties>(() => {
-      return {
-        width: `${sizeRef.value.width}px`,
-        height: `${sizeRef.value.height}px`,
-        fontSize: `${sizeRef.value.width * 0.15 + 6}px`,
-      }
-    })
-
-    const circleWidth = computed(
-      () => props.strokeWidth ?? Math.max(getMinPercent(sizeRef.value.width), 6),
-    )
-    const gapPos = computed(
-      () => props.gapPosition || (props.type === 'dashboard' && 'bottom') || undefined,
-    )
-
-    // using className to style stroke color
-    const percent = computed(() => getPercentage(props))
-    const isGradient = computed(
-      () => Object.prototype.toString.call(props.strokeColor) === '[object Object]',
-    )
-    const strokeColor = computed(() =>
-      getStrokeColor({ success: props.success, strokeColor: props.strokeColor }),
-    )
-    const wrapperClassName = computed(() => ({
-      [`${props.prefixCls}-inner`]: true,
-      [`${props.prefixCls}-circle-gradient`]: isGradient.value,
-    }))
-
-    return () => {
-      const circleContent = (
-        <VCCircle
-          percent={percent.value}
-          strokeWidth={circleWidth.value}
-          trailWidth={circleWidth.value}
-          strokeColor={strokeColor.value}
-          strokeLinecap={props.strokeLinecap}
-          trailColor={props.trailColor}
-          prefixCls={props.prefixCls}
-          gapDegree={gapDeg.value}
-          gapPosition={gapPos.value}
-        />
-      )
-      return (
-        <div
-          {...attrs}
-          class={[wrapperClassName.value, attrs.class]}
-          style={[attrs.style as CSSProperties, circleStyle.value]}
-        >
-          {sizeRef.value.width <= 20 ? (
-            <Tooltip v-slots={{ title: slots.default }}>
-              <span>{circleContent}</span>
-            </Tooltip>
-          ) : (
-            <>
-              {circleContent}
-              {slots.default?.()}
-            </>
-          )}
-        </div>
-      )
-    }
-  },
-})

package/src/progress/Line.tsx

@@ -1,163 +0,0 @@
-import { presetPrimaryColors } from '@ant-design/colors'
-
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import { anyType, stringType } from '../_util/type'
-import type { Direction } from '../config-provider'
-import devWarning from '../vc-util/devWarning'
-import type { ProgressGradient, ProgressSize, StringGradients } from './props'
-import { progressProps } from './props'
-import { getSize, getSuccessPercent, validProgress } from './utils'
-
-export const lineProps = () => ({
-  ...progressProps(),
-  strokeColor: anyType<string | ProgressGradient>(),
-  direction: stringType<Direction>(),
-})
-
-export type LineProps = Partial<ExtractPropTypes<ReturnType<typeof lineProps>>>
-
-/**
- * {
- *   '0%': '#afc163',
- *   '75%': '#009900',
- *   '50%': 'green',     ====>     '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
- *   '25%': '#66FF00',
- *   '100%': '#ffffff'
- * }
- */
-export const sortGradient = (gradients: StringGradients) => {
-  let tempArr = []
-  Object.keys(gradients).forEach((key) => {
-    const formattedKey = Number.parseFloat(key.replace(/%/g, ''))
-    if (!isNaN(formattedKey)) {
-      tempArr.push({
-        key: formattedKey,
-        value: gradients[key],
-      })
-    }
-  })
-  tempArr = tempArr.sort((a, b) => a.key - b.key)
-  return tempArr.map(({ key, value }) => `${value} ${key}%`).join(', ')
-}
-
-/**
- * Then this man came to realize the truth: Besides six pence, there is the moon. Besides bread and
- * butter, there is the bug. And... Besides women, there is the code.
- *
- * @example
- *   {
- *     "0%": "#afc163",
- *     "25%": "#66FF00",
- *     "50%": "#00CC00", // ====>  linear-gradient(to right, #afc163 0%, #66FF00 25%,
- *     "75%": "#009900", //        #00CC00 50%, #009900 75%, #ffffff 100%)
- *     "100%": "#ffffff"
- *   }
- */
-export const handleGradient = (
-  strokeColor: ProgressGradient,
-  directionConfig?: Direction,
-): CSSProperties => {
-  const {
-    from = presetPrimaryColors.blue,
-    to = presetPrimaryColors.blue,
-    direction = directionConfig === 'rtl' ? 'to left' : 'to right',
-    ...rest
-  } = strokeColor
-  if (Object.keys(rest).length !== 0) {
-    const sortedGradients = sortGradient(rest as StringGradients)
-    return { backgroundImage: `linear-gradient(${direction}, ${sortedGradients})` }
-  }
-  return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` }
-}
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ProgressLine',
-  inheritAttrs: false,
-  props: lineProps(),
-  setup(props, { slots, attrs }) {
-    const backgroundProps = computed<CSSProperties>(() => {
-      const { strokeColor, direction } = props
-      return strokeColor && typeof strokeColor !== 'string'
-        ? handleGradient(strokeColor, direction)
-        : {
-            backgroundColor: strokeColor as string,
-          }
-    })
-    const borderRadius = computed(() =>
-      props.strokeLinecap === 'square' || props.strokeLinecap === 'butt' ? 0 : undefined,
-    )
-
-    const trailStyle = computed<CSSProperties>(() =>
-      props.trailColor
-        ? {
-            backgroundColor: props.trailColor,
-          }
-        : undefined,
-    )
-
-    const mergedSize = computed(
-      () => props.size ?? [-1, props.strokeWidth || (props.size === 'small' ? 6 : 8)],
-    )
-
-    const sizeRef = computed(() =>
-      getSize(mergedSize.value as ProgressSize, 'line', { strokeWidth: props.strokeWidth }),
-    )
-
-    if (process.env.NODE_ENV !== 'production') {
-      devWarning(
-        'strokeWidth' in props,
-        'Progress',
-        '`strokeWidth` is deprecated. Please use `size` instead.',
-      )
-    }
-
-    const percentStyle = computed<CSSProperties>(() => {
-      const { percent } = props
-      return {
-        width: `${validProgress(percent)}%`,
-        height: `${sizeRef.value.height}px`,
-        borderRadius: borderRadius.value,
-        ...backgroundProps.value,
-      }
-    })
-
-    const successPercent = computed(() => {
-      return getSuccessPercent(props)
-    })
-    const successPercentStyle = computed<CSSProperties>(() => {
-      const { success } = props
-      return {
-        width: `${validProgress(successPercent.value)}%`,
-        height: `${sizeRef.value.height}px`,
-        borderRadius: borderRadius.value,
-        backgroundColor: success?.strokeColor,
-      }
-    })
-
-    const outerStyle: CSSProperties = {
-      width: sizeRef.value.width < 0 ? '100%' : sizeRef.value.width,
-      height: `${sizeRef.value.height}px`,
-    }
-
-    return () => (
-      <>
-        <div
-          {...attrs}
-          class={[`${props.prefixCls}-outer`, attrs.class]}
-          style={[attrs.style as CSSProperties, outerStyle]}
-        >
-          <div class={`${props.prefixCls}-inner`} style={trailStyle.value}>
-            <div class={`${props.prefixCls}-bg`} style={percentStyle.value} />
-            {successPercent.value !== undefined ? (
-              <div class={`${props.prefixCls}-success-bg`} style={successPercentStyle.value} />
-            ) : null}
-          </div>
-        </div>
-        {slots.default?.()}
-      </>
-    )
-  },
-})

package/src/progress/Steps.tsx

@@ -1,67 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import type { VueNode } from '../_util/type'
-import { someType } from '../_util/type'
-import type { ProgressSize } from './props'
-import { progressProps } from './props'
-import { getSize } from './utils'
-
-export const stepsProps = () => ({
-  ...progressProps(),
-  steps: Number,
-  strokeColor: someType<string | string[]>(),
-  trailColor: String,
-})
-
-export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>>
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'Steps',
-  props: stepsProps(),
-  setup(props, { slots }) {
-    const current = computed(() => Math.round(props.steps * ((props.percent || 0) / 100)))
-    const mergedSize = computed(
-      () => props.size ?? [props.size === 'small' ? 2 : 14, props.strokeWidth || 8],
-    )
-    const sizeRef = computed(() =>
-      getSize(mergedSize.value as ProgressSize, 'step', {
-        steps: props.steps,
-        strokeWidth: props.strokeWidth || 8,
-      }),
-    )
-
-    const styledSteps = computed(() => {
-      const { steps, strokeColor, trailColor, prefixCls } = props
-
-      const temp: VueNode[] = []
-      for (let i = 0; i < steps; i += 1) {
-        const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor
-        const cls = {
-          [`${prefixCls}-steps-item`]: true,
-          [`${prefixCls}-steps-item-active`]: i <= current.value - 1,
-        }
-        temp.push(
-          <div
-            key={i}
-            class={cls}
-            style={{
-              backgroundColor: i <= current.value - 1 ? color : trailColor,
-              width: `${sizeRef.value.width / steps}px`,
-              height: `${sizeRef.value.height}px`,
-            }}
-          />,
-        )
-      }
-      return temp
-    })
-
-    return () => (
-      <div class={`${props.prefixCls}-steps-outer`}>
-        {styledSteps.value}
-        {slots.default?.()}
-      </div>
-    )
-  },
-})

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

@@ -1,56 +0,0 @@
----
-category: Components
-type: Feedback
-title: Progress
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original
----
-
-Display the current progress of an operation flow.
-
-## When To Use
-
-If it will take a long time to complete an operation, you can use `Progress` to show the current progress and status.
-
-- When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
-- When you need to display the completion percentage of an operation.
-
-## API
-
-Properties that shared by all types.
-
-| Property      | Description                                                                                    | Type                                                                                                                     | Default                    | Version |
-| ------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------- | ------- |
-| format        | The template function of the content                                                           | function(percent, successPercent)                                                                                        | (percent) => percent + `%` |         |
-| percent       | To set the completion percentage                                                               | number                                                                                                                   | 0                          |         |
-| showInfo      | Whether to display the progress value and the status icon                                      | boolean                                                                                                                  | true                       |         |
-| status        | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string                                                                                                                   | -                          |         |
-| strokeColor   | The color of progress bar                                                                      | string                                                                                                                   | -                          |         |
-| strokeLinecap | To set the style of the progress linecap                                                       | `round` \| `butt` \| `square`, see [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round`                    | -       |
-| success       | Configs of successfully progress bar                                                           | { percent: number, strokeColor: string }                                                                                 | -                          |         |
-| title         | html dom title                                                                                 | string                                                                                                                   | -                          | 3.0     |
-| trailColor    | The color of unfilled part                                                                     | string                                                                                                                   | -                          |         |
-| type          | To set the type, options: `line` `circle` `dashboard`                                          | string                                                                                                                   | `line`                     |         |
-| size          | Progress size                                                                                  | number \| \[number, number] \| "small" \| "default"                                                                      | "default"                  |         |
-
-### `type="line"`
-
-| Property    | Description                                                                                                           | Type                                                                  | Default | Version |
-| ----------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------- | ------- |
-| steps       | The total step count                                                                                                  | number                                                                | -       | -       |
-| strokeColor | The color of progress bar, render `linear-gradient` when passing an object, could accept `string[]` when has `steps`. | string \| string[] \| { from: string; to: string; direction: string } | -       | -       |
-
-### `type="circle"`
-
-| Property    | Description                                                                     | Type             | Default | Version |
-| ----------- | ------------------------------------------------------------------------------- | ---------------- | ------- | ------- |
-| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | -       | -       |
-| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number           | 6       | -       |
-
-### `type="dashboard"`
-
-| Property    | Description                                                                      | Type   | Default  |
-| ----------- | -------------------------------------------------------------------------------- | ------ | -------- |
-| gapDegree   | The gap degree of half circle, 0 ~ 295                                           | number | 75       |
-| gapPosition | The gap position, options: `top` `bottom` `left` `right`                         | string | `bottom` |
-| strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6        |

package/src/progress/index.ts

@@ -1,6 +0,0 @@
-import { withInstall } from '../_util/type'
-import Progress from './progress'
-
-export type { ProgressProps } from './props'
-
-export default withInstall(Progress)

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

@@ -1,57 +0,0 @@
----
-category: Components
-type: 反馈
-title: Progress
-subtitle: 进度条
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original
----
-
-展示操作的当前进度。
-
-## 何时使用
-
-在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
-
-- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；
-- 当需要显示一个操作完成的百分比时。
-
-## API
-
-各类型共用的属性。
-
-| 属性          | 说明                                                           | 类型                                                                                                                          | 默认值                     | 版本 |
-| ------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ---- |
-| format        | 内容的模板函数                                                 | function(percent, successPercent)                                                                                             | (percent) => percent + `%` |      |
-| percent       | 百分比                                                         | number                                                                                                                        | 0                          |      |
-| showInfo      | 是否显示进度数值或状态图标                                     | boolean                                                                                                                       | true                       |      |
-| status        | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string                                                                                                                        | -                          |      |
-| strokeColor   | 进度条的色彩                                                   | string                                                                                                                        | -                          |      |
-| strokeLinecap | 进度条的样式                                                   | `round` \| `butt` \| `square`，区别详见 [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round`                    | -    |
-| success       | 成功进度条相关配置                                             | { percent: number, strokeColor: string }                                                                                      | -                          |      |
-| title         | html 标签 title                                                | string                                                                                                                        | -                          | 3.0  |
-| trailColor    | 未完成的分段的颜色                                             | string                                                                                                                        | -                          |      |
-| type          | 类型，可选 `line` `circle` `dashboard`                         | string                                                                                                                        | `line`                     |      |
-| size          | 进度条的尺寸                                                   | number \| \[number, number] \| "small" \| "default"                                                                           | "default"                  |      |
-
-### `type="line"`
-
-| 属性        | 说明                                                                  | 类型                                                                  | 默认值 | 版本 |
-| ----------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- | ------ | ---- |
-| steps       | 进度条总共步数                                                        | number                                                                | -      | -    |
-| strokeColor | 进度条的色彩，传入 object 时为渐变。当有 `steps` 时支持传入一个数组。 | string \| string[] \| { from: string; to: string; direction: string } | -      | -    |
-
-### `type="circle"`
-
-| 属性        | 说明                                             | 类型             | 默认值 | 版本 |
-| ----------- | ------------------------------------------------ | ---------------- | ------ | ---- |
-| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变         | string \| object | -      | -    |
-| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number           | 6      | -    |
-
-### `type="dashboard"`
-
-| 属性        | 说明                                               | 类型                                   | 默认值   | 版本 |
-| ----------- | -------------------------------------------------- | -------------------------------------- | -------- | ---- |
-| gapDegree   | 仪表盘进度条缺口角度，可取值 0 ~ 295               | number                                 | 75       | -    |
-| gapPosition | 仪表盘进度条缺口位置                               | `top` \| `bottom` \| `left` \| `right` | `bottom` | -    |
-| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number                                 | 6        | -    |