@antsoo-lib/components 0.1.11 → 0.1.13

package/src/tooltip/util.ts

@@ -1,23 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-import classNames from '../_util/classNames'
-import { isPresetColor } from '../_util/colors'
-
-export function parseColor(prefixCls: string, color?: string) {
-  const isInternalColor = isPresetColor(color)
-
-  const className = classNames({
-    [`${prefixCls}-${color}`]: color && isInternalColor,
-  })
-
-  const overlayStyle: CSSProperties = {}
-  const arrowStyle: CSSProperties = {}
-
-  if (color && !isInternalColor) {
-    overlayStyle.background = color
-    // @ts-ignore
-    arrowStyle['--antd-arrow-background-color'] = color
-  }
-
-  return { className, overlayStyle, arrowStyle }
-}

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

@@ -1,60 +0,0 @@
----
-category: Components
-type: Data Display
-title: Tour
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8CC_Tbe3_e4AAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6hQpM0XtEAAAAAAAAAAAAADrJ8AQ/original
-tag: New
----
-
-A popup component for guiding users through a product. Available since `4.0.0`.
-
-## When To Use
-
-Use when you want to guide users through a product.
-
-## API
-
-### Tour
-
-| Property              | Description                                                                                          | Type                                                                                                                          | Default   | Version |
-| --------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
-| arrow                 | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean`\|`{ pointAtCenter: boolean}`                                                                                        | `true`    |         |
-| placement             | Position of the guide card relative to the target element                                            | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom`  |         |
-| mask                  | Whether to enable masking, change mask style and fill color by pass custom props                     | `boolean` \| `{ style?: CSSProperties; color?: string; }`                                                                     | `true`    |         |
-| type                  | Type, affects the background color and text color                                                    | `default` `primary`                                                                                                           | `default` |         |
-| open                  | Open tour                                                                                            | `boolean`                                                                                                                     | -         |         |
-| current(v-model)      | What is the current step                                                                             | `number`                                                                                                                      | -         |         |
-| scrollIntoViewOptions | support pass custom scrollIntoView options                                                           | `boolean` \| `ScrollIntoViewOptions`                                                                                          | `true`    |         |
-| indicatorsRender      | custom indicator                                                                                     | `v-slot:indicatorsRender="{current, total}"`                                                                                  | -         |         |
-| zIndex                | Tour's zIndex                                                                                        | `number`                                                                                                                      | `1001`    |         |
-
-### Tour events
-
-| Events Name | Description                                                  | Arguments                   | Version |
-| ----------- | ------------------------------------------------------------ | --------------------------- | ------- | --- |
-| close       | Callback function on shutdown                                | `Function`                  | -       |     |
-| finish      | Callback function on finished                                | `Function`                  | -       |     |
-| change      | Callback when the step changes. Current is the previous step | `(current: number) => void` |
-
-### TourStep
-
-| Property              | Description                                                                                                                       | Type                                                                                                                          | Default   | Version |
-| --------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
-| target                | Get the element the guide card points to. Empty makes it show in center of screen                                                 | `() => HTMLElement` `HTMLElement`                                                                                             | -         |         |
-| arrow                 | Whether to show the arrow, including the configuration whether to point to the center of the element                              | `boolean` `{ pointAtCenter: boolean}`                                                                                         | `true`    |         |
-| cover                 | Displayed pictures or videos                                                                                                      | `VueNode`                                                                                                                     | -         |         |
-| title                 | title                                                                                                                             | `VueNode`                                                                                                                     | -         |         |
-| description           | description                                                                                                                       | `VueNode`                                                                                                                     | -         |         |
-| placement             | Position of the guide card relative to the target element                                                                         | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom`  |         |
-| mask                  | Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour | `boolean` \| `{ style?: CSSProperties; color?: string; }`                                                                     | `true`    |         |
-| type                  | Type, affects the background color and text color                                                                                 | `default` `primary`                                                                                                           | `default` |         |
-| nextButtonProps       | Properties of the Next button                                                                                                     | `{ children: VueNode; onClick: Function }`                                                                                    | -         |         |
-| prevButtonProps       | Properties of the previous button                                                                                                 | `{ children: VueNode; onClick: Function }`                                                                                    | -         |         |
-| scrollIntoViewOptions | support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour                      | `boolean` \| `ScrollIntoViewOptions`                                                                                          | `true`    |         |
-
-### TourStep events
-
-| Events Name | Description                   | Arguments  | Version |
-| ----------- | ----------------------------- | ---------- | ------- | --- |
-| close       | Callback function on shutdown | `Function` | -       |     |

package/src/tour/index.tsx

@@ -1,92 +0,0 @@
-import { computed, defineComponent, toRefs } from 'vue'
-
-import classNames from '../_util/classNames'
-import getPlacements from '../_util/placements'
-import type { VueNode } from '../_util/type'
-import { withInstall } from '../_util/type'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import VCTour from '../vc-tour'
-import type { TourProps, TourStepProps } from './interface'
-import { tourProps } from './interface'
-import TourPanel from './panelRender'
-// CSSINJS
-import useStyle from './style'
-import useMergedType from './useMergedType'
-
-export { TourProps, TourStepProps }
-
-const Tour = defineComponent({
-  name: 'ATour',
-  inheritAttrs: false,
-  props: tourProps(),
-  setup(props, { attrs, emit, slots }) {
-    const { current, type, steps, defaultCurrent } = toRefs(props)
-    const { prefixCls, direction } = useConfigInject('tour', props)
-
-    // style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const { currentMergedType, updateInnerCurrent } = useMergedType({
-      defaultType: type,
-      steps,
-      current,
-      defaultCurrent,
-    })
-    return () => {
-      const { steps, current, type, rootClassName, ...restProps } = props
-
-      const customClassName = classNames(
-        {
-          [`${prefixCls.value}-primary`]: currentMergedType.value === 'primary',
-          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-        },
-        hashId.value,
-        rootClassName,
-      )
-
-      const mergedRenderPanel = (stepProps: TourStepProps, stepCurrent: number): VueNode => {
-        return (
-          <TourPanel
-            {...stepProps}
-            type={type}
-            current={stepCurrent}
-            v-slots={{
-              indicatorsRender: slots.indicatorsRender,
-            }}
-          ></TourPanel>
-        )
-      }
-
-      const onStepChange = (stepCurrent: number) => {
-        updateInnerCurrent(stepCurrent)
-        emit('update:current', stepCurrent)
-        emit('change', stepCurrent)
-      }
-
-      const builtinPlacements = computed(() =>
-        getPlacements({
-          arrowPointAtCenter: true,
-          autoAdjustOverflow: true,
-        }),
-      )
-
-      return wrapSSR(
-        <VCTour
-          {...attrs}
-          {...restProps}
-          rootClassName={customClassName}
-          prefixCls={prefixCls.value}
-          current={current}
-          defaultCurrent={props.defaultCurrent}
-          animated
-          renderPanel={mergedRenderPanel}
-          onChange={onStepChange}
-          steps={steps}
-          builtinPlacements={builtinPlacements.value as any}
-        />,
-      )
-    }
-  },
-})
-
-export default withInstall(Tour)

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

@@ -1,61 +0,0 @@
----
-category: Components
-type: 数据展示
-title: Tour
-subtitle: 漫游式引导
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8CC_Tbe3_e4AAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6hQpM0XtEAAAAAAAAAAAAADrJ8AQ/original
-tag: New
----
-
-用于分步引导用户了解产品功能的气泡组件。自 `4.0.0` 版本开始提供该组件。
-
-## 何时使用
-
-常用于引导用户了解产品功能。
-
-## API
-
-### Tour
-
-| 属性                  | 说明                                                             | 类型                                                                                                                          | 默认值    | 版本 |
-| --------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------- | ---- |
-| arrow                 | 是否显示箭头，包含是否指向元素中心的配置                         | `boolean` \| `{ pointAtCenter: boolean}`                                                                                      | `true`    |      |
-| placement             | 引导卡片相对于目标元素的位置                                     | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom`  |      |
-| mask                  | 是否启用蒙层，也可传入配置改变蒙层样式和填充色                   | `boolean` \| `{ style?: CSSProperties; color?: string; }`                                                                     | `true`    |      |
-| type                  | 类型，影响底色与文字颜色                                         | `default` \| `primary`                                                                                                        | `default` |      |
-| open                  | 打开引导                                                         | `boolean`                                                                                                                     | -         |      |
-| current(v-model)      | 当前处于哪一步                                                   | `number`                                                                                                                      | -         |      |
-| scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数 | `boolean` \| `ScrollIntoViewOptions`                                                                                          | `true`    |      |
-| indicatorsRender      | 自定义指示器                                                     | `v-slot:indicatorsRender="{current, total}"`                                                                                  | -         |      |
-| zIndex                | Tour 的层级                                                      | `number`                                                                                                                      | `1001`    |      |
-
-### Tour events
-
-| 事件名称 | 说明                                     | 回调参数                    | 版本 |
-| -------- | ---------------------------------------- | --------------------------- | ---- | --- |
-| close    | 关闭引导时的回调函数                     | `Function`                  | -    |     |
-| finish   | 引导完成时的回调                         | `Function`                  | -    |     |
-| change   | 步骤改变时的回调，current 为当前前的步骤 | `(current: number) => void` | -    |     |
-
-### TourStep 引导步骤卡片
-
-| 属性                  | 说明                                                                                                            | 类型                                                                                                                                   | 默认值    | 版本 |
-| --------------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---- |
-| target                | 获取引导卡片指向的元素，为空时居中于屏幕                                                                        | `() => HTMLElement` \| `HTMLElement`                                                                                                   | -         |      |
-| arrow                 | 是否显示箭头，包含是否指向元素中心的配置                                                                        | `boolean` \| `{ pointAtCenter: boolean}`                                                                                               | `true`    |      |
-| cover                 | 展示的图片或者视频                                                                                              | `VueNode`                                                                                                                              | -         |      |
-| title                 | 标题                                                                                                            | `VueNode`                                                                                                                              | -         |      |
-| description           | 主要描述部分                                                                                                    | `VueNode`                                                                                                                              | -         |      |
-| placement             | 引导卡片相对于目标元素的位置                                                                                    | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` |           |      |
-| mask                  | 是否启用蒙层，也可传入配置改变蒙层样式和填充色，默认跟随 Tour 的 `mask` 属性                                    | `boolean` \| `{ style?: CSSProperties; color?: string; }`                                                                              | `true`    |      |
-| type                  | 类型，影响底色与文字颜色                                                                                        | `default` \| `primary`                                                                                                                 | `default` |      |
-| nextButtonProps       | 下一步按钮的属性                                                                                                | `{ children: VueNode; onClick: Function }`                                                                                             | -         |      |
-| prevButtonProps       | 上一步按钮的属性                                                                                                | `{ children: VueNode; onClick: Function }`                                                                                             | -         |      |
-| scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean` \| `ScrollIntoViewOptions`                                                                                                   | `true`    |      |
-
-### TourStep events
-
-| 事件名称 | 说明                 | 回调参数   | 版本 |
-| -------- | -------------------- | ---------- | ---- | --- |
-| close    | 关闭引导时的回调函数 | `Function` | -    |     |

package/src/tour/interface.ts

@@ -1,43 +0,0 @@
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
-
-import type { VueNode } from '../_util/type'
-import { tourProps as VCTourProps, tourStepProps as VCTourStepProps } from '../vc-tour'
-
-export const tourProps = () => ({
-  ...VCTourProps(),
-  steps: { type: Array as PropType<TourStepProps[]> },
-  prefixCls: { type: String },
-  current: { type: Number },
-  type: { type: String as PropType<'default' | 'primary'> }, //	default	类型，影响底色与文字颜色
-  'onUpdate:current': Function as PropType<(val: number) => void>,
-})
-
-export type TourProps = Partial<ExtractPropTypes<ReturnType<typeof tourProps>>>
-
-export interface TourBtnProps {
-  children?: () => VueNode
-  onClick?: () => void
-  className?: string
-  style?: CSSProperties
-}
-
-export const tourStepProps = () => ({
-  ...VCTourStepProps(),
-  cover: { type: Object as PropType<VueNode> }, // 展示的图片或者视频
-  nextButtonProps: {
-    type: Object as PropType<TourBtnProps>,
-  },
-  prevButtonProps: {
-    type: Object as PropType<TourBtnProps>,
-  },
-  current: { type: Number },
-  type: { type: String as PropType<'default' | 'primary'> }, //	default	类型，影响底色与文字颜色
-})
-
-export type TourStepProps = Partial<ExtractPropTypes<ReturnType<typeof tourStepProps>>>
-
-export interface TourLocale {
-  Next: string
-  Previous: string
-  Finish: string
-}

package/src/tour/panelRender.tsx

@@ -1,152 +0,0 @@
-import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'
-
-import { computed, defineComponent, toRefs } from 'vue'
-
-import classNames from '../_util/classNames'
-import type { VueNode } from '../_util/type'
-import { isFunction } from '../_util/util'
-import Button from '../button'
-import type { ButtonProps } from '../button'
-import LocaleReceiver from '../locale/LocaleReceiver'
-import defaultLocale from '../locale/en_US'
-import { tourStepProps } from './interface'
-import type { TourBtnProps } from './interface'
-
-const panelRender = defineComponent({
-  name: 'ATourPanel',
-  inheritAttrs: false,
-  props: tourStepProps(),
-  setup(props, { attrs, slots }) {
-    const { current, total } = toRefs(props)
-
-    const isLastStep = computed(() => current.value === total.value - 1)
-
-    const prevBtnClick = (e) => {
-      const prevButtonProps = props.prevButtonProps as TourBtnProps
-      props.onPrev?.(e)
-      if (typeof prevButtonProps?.onClick === 'function') {
-        prevButtonProps?.onClick()
-      }
-    }
-
-    const nextBtnClick = (e) => {
-      const nextButtonProps = props.nextButtonProps as TourBtnProps
-      if (isLastStep.value) {
-        props.onFinish?.(e)
-      } else {
-        props.onNext?.(e)
-      }
-      if (typeof nextButtonProps?.onClick === 'function') {
-        nextButtonProps?.onClick()
-      }
-    }
-
-    return () => {
-      const { prefixCls, title, onClose, cover, description, type: stepType, arrow } = props
-
-      const prevButtonProps = props.prevButtonProps as TourBtnProps
-      const nextButtonProps = props.nextButtonProps as TourBtnProps
-
-      let headerNode: VueNode
-      if (title) {
-        headerNode = (
-          <div class={`${prefixCls}-header`}>
-            <div class={`${prefixCls}-title`}>{title}</div>
-          </div>
-        )
-      }
-
-      let descriptionNode: VueNode
-      if (description) {
-        descriptionNode = <div class={`${prefixCls}-description`}>{description}</div>
-      }
-
-      let coverNode: VueNode
-      if (cover) {
-        coverNode = <div class={`${prefixCls}-cover`}>{cover}</div>
-      }
-
-      let mergeIndicatorNode: VueNode
-
-      if (slots.indicatorsRender) {
-        mergeIndicatorNode = slots.indicatorsRender({ current: current.value, total })
-      } else {
-        mergeIndicatorNode = [...Array.from({ length: total.value }).keys()].map(
-          (stepItem, index) => (
-            <span
-              key={stepItem}
-              class={classNames(
-                index === current.value && `${prefixCls}-indicator-active`,
-                `${prefixCls}-indicator`,
-              )}
-            />
-          ),
-        )
-      }
-
-      const mainBtnType = stepType === 'primary' ? 'default' : 'primary'
-      const secondaryBtnProps: ButtonProps = {
-        type: 'default',
-        ghost: stepType === 'primary',
-      }
-
-      return (
-        <LocaleReceiver componentName="Tour" defaultLocale={defaultLocale.Tour}>
-          {(contextLocale) => (
-            <div
-              {...attrs}
-              class={classNames(
-                stepType === 'primary' ? `${prefixCls}-primary` : '',
-                attrs.class,
-                `${prefixCls}-content`,
-              )}
-            >
-              {arrow && <div class={`${prefixCls}-arrow`} key="arrow" />}
-              <div class={`${prefixCls}-inner`}>
-                <CloseOutlined class={`${prefixCls}-close`} onClick={onClose} />
-                {coverNode}
-                {headerNode}
-                {descriptionNode}
-                <div class={`${prefixCls}-footer`}>
-                  {total.value > 1 && (
-                    <div class={`${prefixCls}-indicators`}>{mergeIndicatorNode}</div>
-                  )}
-                  <div class={`${prefixCls}-buttons`}>
-                    {current.value !== 0 ? (
-                      <Button
-                        {...secondaryBtnProps}
-                        {...prevButtonProps}
-                        onClick={prevBtnClick}
-                        size="small"
-                        class={classNames(`${prefixCls}-prev-btn`, prevButtonProps?.className)}
-                      >
-                        {isFunction(prevButtonProps?.children)
-                          ? prevButtonProps.children()
-                          : (prevButtonProps?.children ?? contextLocale.Previous)}
-                      </Button>
-                    ) : null}
-                    <Button
-                      type={mainBtnType}
-                      {...nextButtonProps}
-                      onClick={nextBtnClick}
-                      size="small"
-                      class={classNames(`${prefixCls}-next-btn`, nextButtonProps?.className)}
-                    >
-                      {isFunction(nextButtonProps?.children)
-                        ? nextButtonProps?.children()
-                        : isLastStep.value
-                          ? contextLocale.Finish
-                          : contextLocale.Next}
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </LocaleReceiver>
-      )
-    }
-  },
-})
-
-export default panelRender