@antsoo-lib/components 0.1.2 → 0.1.4

package/src/tooltip/util.ts

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

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

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

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

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

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