@antsoo-lib/components 0.1.11 → 0.1.13

package/src/timeline/TimelineItem.tsx

@@ -1,64 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import initDefaultProps from '../_util/props-util/initDefaultProps'
-import { booleanType, tuple } from '../_util/type'
-import type { CustomSlotsType } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-
-export const timelineItemProps = () => ({
-  prefixCls: String,
-  color: String,
-  dot: PropTypes.any,
-  pending: booleanType(),
-  position: PropTypes.oneOf(tuple('left', 'right', '')).def(''),
-  label: PropTypes.any,
-})
-
-export type TimelineItemProps = Partial<ExtractPropTypes<ReturnType<typeof timelineItemProps>>>
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ATimelineItem',
-  props: initDefaultProps(timelineItemProps(), {
-    color: 'blue',
-    pending: false,
-  }),
-  slots: Object as CustomSlotsType<{
-    dot?: any
-    label?: any
-    default?: any
-  }>,
-  setup(props, { slots }) {
-    const { prefixCls } = useConfigInject('timeline', props)
-    const itemClassName = computed(() => ({
-      [`${prefixCls.value}-item`]: true,
-      [`${prefixCls.value}-item-pending`]: props.pending,
-    }))
-
-    const customColor = computed(() =>
-      /blue|red|green|gray/.test(props.color || '') ? undefined : props.color || 'blue',
-    )
-    const dotClassName = computed(() => ({
-      [`${prefixCls.value}-item-head`]: true,
-      [`${prefixCls.value}-item-head-${props.color || 'blue'}`]: !customColor.value,
-    }))
-    return () => {
-      const { label = slots.label?.(), dot = slots.dot?.() } = props
-      return (
-        <li class={itemClassName.value}>
-          {label && <div class={`${prefixCls.value}-item-label`}>{label}</div>}
-          <div class={`${prefixCls.value}-item-tail`} />
-          <div
-            class={[dotClassName.value, !!dot && `${prefixCls.value}-item-head-custom`]}
-            style={{ borderColor: customColor.value, color: customColor.value }}
-          >
-            {dot}
-          </div>
-          <div class={`${prefixCls.value}-item-content`}>{slots.default?.()}</div>
-        </li>
-      )
-    }
-  },
-})

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

@@ -1,47 +0,0 @@
----
-category: Components
-type: Data Display
-title: Timeline
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FkTySqNt3sYAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yIl9S4hAIBcAAAAAAAAAAAAADrJ8AQ/original
----
-
-Vertical display timeline.
-
-## When To Use
-
-- When a series of information needs to be ordered by time (ascending or descending).
-- When you need a timeline to make a visual connection.
-
-## API
-
-```html
-<a-timeline>
-  <a-timeline-item>step1 2015-09-01</a-timeline-item>
-  <a-timeline-item>step2 2015-09-01</a-timeline-item>
-  <a-timeline-item>step3 2015-09-01</a-timeline-item>
-  <a-timeline-item>step4 2015-09-01</a-timeline-item>
-</a-timeline>
-```
-
-### Timeline
-
-Timeline
-
-| Property   | Description                                                                          | Type                             | Default               |
-| ---------- | ------------------------------------------------------------------------------------ | -------------------------------- | --------------------- |
-| mode       | By sending `alternate` the timeline will distribute the nodes to the left and right. | `left` \| `alternate` \| `right` | `left`                |
-| pending    | Set the last ghost node's existence or its content                                   | boolean\|string\|slot            | `false`               |
-| pendingDot | Set the dot of the last ghost node when pending is true                              | string\|slot                     | `<LoadingOutlined />` |
-| reverse    | reverse nodes or not                                                                 | boolean                          | false                 |
-
-### Timeline.Item
-
-Node of timeline
-
-| Property | Description                                                             | Type              | Default | Version |
-| -------- | ----------------------------------------------------------------------- | ----------------- | ------- | ------- |
-| color    | Set the circle's color to `blue`, `red`, `green` or other custom colors | string            | `blue`  |         |
-| dot      | Customize timeline dot                                                  | string\|slot      | -       |         |
-| label    | Set the label                                                           | string \| slot    | -       | 3.0     |
-| position | Customize node position                                                 | `left` \| `right` | -       |         |

package/src/timeline/index.tsx

@@ -1,21 +0,0 @@
-import type { App, Plugin } from 'vue'
-
-import Timeline, { timelineProps } from './Timeline'
-import TimelineItem, { timelineItemProps } from './TimelineItem'
-
-export type { TimelineProps } from './Timeline'
-export type { TimelineItemProps } from './TimelineItem'
-
-Timeline.Item = TimelineItem
-
-/* istanbul ignore next */
-Timeline.install = function (app: App) {
-  app.component(Timeline.name, Timeline)
-  app.component(TimelineItem.name, TimelineItem)
-  return app
-}
-export { TimelineItem, timelineItemProps, timelineProps }
-export default Timeline as typeof Timeline &
-  Plugin & {
-    readonly Item: typeof TimelineItem
-  }

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

@@ -1,48 +0,0 @@
----
-category: Components
-type: 数据展示
-title: Timeline
-subtitle: 时间轴
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FkTySqNt3sYAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yIl9S4hAIBcAAAAAAAAAAAAADrJ8AQ/original
----
-
-垂直展示的时间流信息。
-
-## 何时使用
-
-- 当有一系列信息需按时间排列时，可正序和倒序。
-- 需要有一条时间轴进行视觉上的串联时。
-
-## API
-
-```html
-<a-timeline>
-  <a-timeline-item>创建服务现场 2015-09-01</a-timeline-item>
-  <a-timeline-item>初步排除网络异常 2015-09-01</a-timeline-item>
-  <a-timeline-item>技术测试异常 2015-09-01</a-timeline-item>
-  <a-timeline-item>网络异常正在修复 2015-09-01</a-timeline-item>
-</a-timeline>
-```
-
-### Timeline
-
-时间轴。
-
-| 参数       | 说明                                           | 类型                             | 默认值                |
-| ---------- | ---------------------------------------------- | -------------------------------- | --------------------- |
-| mode       | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` |                       |
-| pending    | 指定最后一个幽灵节点是否存在或内容             | boolean\|string\|slot            | false                 |
-| pendingDot | 当最后一个幽灵节点存在時，指定其时间图点       | string\|slot                     | `<LoadingOutlined />` |
-| reverse    | 节点排序                                       | boolean                          | false                 |
-
-### Timeline.Item
-
-时间轴的每一个节点。
-
-| 参数     | 说明                                            | 类型              | 默认值 | 版本 |
-| -------- | ----------------------------------------------- | ----------------- | ------ | ---- |
-| color    | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string            | blue   |      |
-| dot      | 自定义时间轴点                                  | string\|slot      | -      |      |
-| label    | 设置标签                                        | string \| slot    | -      | 3.0  |
-| position | 自定义节点位置                                  | `left` \| `right` | -      |      |

package/src/timeline/style/index.tsx

@@ -1,237 +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'
-
-export interface ComponentToken {}
-
-interface TimelineToken extends FullToken<'Timeline'> {
-  timeLineItemPaddingBottom: number
-  timeLineItemHeadSize: number
-  timeLineItemCustomHeadPaddingVertical: number
-  timeLineItemTailWidth: number
-  timeLinePaddingInlineEnd: number
-  timeLineHeadBorderWidth: number
-}
-
-const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
-  const { componentCls } = token
-
-  return {
-    [componentCls]: {
-      ...resetComponent(token),
-      margin: 0,
-      padding: 0,
-      listStyle: 'none',
-
-      [`${componentCls}-item`]: {
-        position: 'relative',
-        margin: 0,
-        paddingBottom: token.timeLineItemPaddingBottom,
-        fontSize: token.fontSize,
-        listStyle: 'none',
-
-        '&-tail': {
-          position: 'absolute',
-          insetBlockStart: token.timeLineItemHeadSize,
-          insetInlineStart: (token.timeLineItemHeadSize - token.timeLineItemTailWidth) / 2,
-          height: `calc(100% - ${token.timeLineItemHeadSize}px)`,
-          borderInlineStart: `${token.timeLineItemTailWidth}px ${token.lineType} ${token.colorSplit}`,
-        },
-
-        '&-pending': {
-          [`${componentCls}-item-head`]: {
-            fontSize: token.fontSizeSM,
-            backgroundColor: 'transparent',
-          },
-
-          [`${componentCls}-item-tail`]: {
-            display: 'none',
-          },
-        },
-
-        '&-head': {
-          position: 'absolute',
-          width: token.timeLineItemHeadSize,
-          height: token.timeLineItemHeadSize,
-          backgroundColor: token.colorBgContainer,
-          border: `${token.timeLineHeadBorderWidth}px ${token.lineType} transparent`,
-          borderRadius: '50%',
-
-          '&-blue': {
-            color: token.colorPrimary,
-            borderColor: token.colorPrimary,
-          },
-
-          '&-red': {
-            color: token.colorError,
-            borderColor: token.colorError,
-          },
-
-          '&-green': {
-            color: token.colorSuccess,
-            borderColor: token.colorSuccess,
-          },
-
-          '&-gray': {
-            color: token.colorTextDisabled,
-            borderColor: token.colorTextDisabled,
-          },
-        },
-
-        '&-head-custom': {
-          position: 'absolute',
-          insetBlockStart: token.timeLineItemHeadSize / 2,
-          insetInlineStart: token.timeLineItemHeadSize / 2,
-          width: 'auto',
-          height: 'auto',
-          marginBlockStart: 0,
-          paddingBlock: token.timeLineItemCustomHeadPaddingVertical,
-          lineHeight: 1,
-          textAlign: 'center',
-          border: 0,
-          borderRadius: 0,
-          transform: `translate(-50%, -50%)`,
-        },
-
-        '&-content': {
-          position: 'relative',
-          insetBlockStart: -(token.fontSize * token.lineHeight - token.fontSize) + token.lineWidth,
-          marginInlineStart: token.margin + token.timeLineItemHeadSize,
-          marginInlineEnd: 0,
-          marginBlockStart: 0,
-          marginBlockEnd: 0,
-          wordBreak: 'break-word',
-        },
-
-        '&-last': {
-          [`> ${componentCls}-item-tail`]: {
-            display: 'none',
-          },
-
-          [`> ${componentCls}-item-content`]: {
-            minHeight: token.controlHeightLG * 1.2,
-          },
-        },
-      },
-
-      [`&${componentCls}-alternate,
-        &${componentCls}-right,
-        &${componentCls}-label`]: {
-        [`${componentCls}-item`]: {
-          '&-tail, &-head, &-head-custom': {
-            insetInlineStart: '50%',
-          },
-
-          '&-head': {
-            marginInlineStart: `-${token.marginXXS}px`,
-
-            '&-custom': {
-              marginInlineStart: token.timeLineItemTailWidth / 2,
-            },
-          },
-
-          '&-left': {
-            [`${componentCls}-item-content`]: {
-              insetInlineStart: `calc(50% - ${token.marginXXS}px)`,
-              width: `calc(50% - ${token.marginSM}px)`,
-              textAlign: 'start',
-            },
-          },
-
-          '&-right': {
-            [`${componentCls}-item-content`]: {
-              width: `calc(50% - ${token.marginSM}px)`,
-              margin: 0,
-              textAlign: 'end',
-            },
-          },
-        },
-      },
-
-      [`&${componentCls}-right`]: {
-        [`${componentCls}-item-right`]: {
-          [`${componentCls}-item-tail,
-            ${componentCls}-item-head,
-            ${componentCls}-item-head-custom`]: {
-            insetInlineStart: `calc(100% - ${
-              (token.timeLineItemHeadSize + token.timeLineItemTailWidth) / 2
-            }px)`,
-          },
-
-          [`${componentCls}-item-content`]: {
-            width: `calc(100% - ${token.timeLineItemHeadSize + token.marginXS}px)`,
-          },
-        },
-      },
-
-      [`&${componentCls}-pending
-        ${componentCls}-item-last
-        ${componentCls}-item-tail`]: {
-        display: 'block',
-        height: `calc(100% - ${token.margin}px)`,
-        borderInlineStart: `${token.timeLineItemTailWidth}px dotted ${token.colorSplit}`,
-      },
-
-      [`&${componentCls}-reverse
-        ${componentCls}-item-last
-        ${componentCls}-item-tail`]: {
-        display: 'none',
-      },
-
-      [`&${componentCls}-reverse ${componentCls}-item-pending`]: {
-        [`${componentCls}-item-tail`]: {
-          insetBlockStart: token.margin,
-          display: 'block',
-          height: `calc(100% - ${token.margin}px)`,
-          borderInlineStart: `${token.timeLineItemTailWidth}px dotted ${token.colorSplit}`,
-        },
-
-        [`${componentCls}-item-content`]: {
-          minHeight: token.controlHeightLG * 1.2,
-        },
-      },
-
-      [`&${componentCls}-label`]: {
-        [`${componentCls}-item-label`]: {
-          position: 'absolute',
-          insetBlockStart:
-            -(token.fontSize * token.lineHeight - token.fontSize) + token.timeLineItemTailWidth,
-          width: `calc(50% - ${token.marginSM}px)`,
-          textAlign: 'end',
-        },
-
-        [`${componentCls}-item-right`]: {
-          [`${componentCls}-item-label`]: {
-            insetInlineStart: `calc(50% + ${token.marginSM}px)`,
-            width: `calc(50% - ${token.marginSM}px)`,
-            textAlign: 'start',
-          },
-        },
-      },
-
-      // ====================== RTL =======================
-      '&-rtl': {
-        direction: 'rtl',
-
-        [`${componentCls}-item-head-custom`]: {
-          transform: `translate(50%, -50%)`,
-        },
-      },
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook('Timeline', (token) => {
-  const timeLineToken = mergeToken<TimelineToken>(token, {
-    timeLineItemPaddingBottom: token.padding * 1.25,
-    timeLineItemHeadSize: 10,
-    timeLineItemCustomHeadPaddingVertical: token.paddingXXS,
-    timeLinePaddingInlineEnd: 2,
-    timeLineItemTailWidth: token.lineWidthBold,
-    timeLineHeadBorderWidth: token.wireframe ? token.lineWidthBold : token.lineWidth * 3,
-  })
-
-  return [genTimelineStyle(timeLineToken)]
-})