diff --git a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
index 741b1bd6e..b64e3f546 100644
--- a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
@@ -36,7 +36,6 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
>
-
ConfigProvider mobileVue demo works fine 1`] = `
-
ConfigProvider mobileVue demo works fine 1`] = `
>
-
ConfigProvider mobileVue demo works fine 1`] = `
-
ConfigProvider mobileVue demo works fine 1`] = `
>
-
ConfigProvider mobileVue demo works fine 1`] = `
-
@@ -3596,7 +3590,6 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
data-v-app=""
>
-
ConfigProvider otherEnVue demo works fine 1`] = `
-
`;
@@ -6744,7 +6736,6 @@ exports[`ConfigProvider > ConfigProvider tableEnVue demo works fine 1`] = `
data-v-app=""
>
-
ConfigProvider tableEnVue demo works fine 1`] = `
-
`;
@@ -6829,7 +6819,6 @@ exports[`ConfigProvider > ConfigProvider uploadEnVue demo works fine 1`] = `
data-v-app=""
>
-
ConfigProvider uploadEnVue demo works fine 1`] = `
-
`;
diff --git a/src/config-provider/config-provider.tsx b/src/config-provider/config-provider.vue
similarity index 79%
rename from src/config-provider/config-provider.tsx
rename to src/config-provider/config-provider.vue
index f2ddd637d..7bb3e541f 100644
--- a/src/config-provider/config-provider.tsx
+++ b/src/config-provider/config-provider.vue
@@ -1,8 +1,12 @@
+
+
+
+
+
diff --git a/src/config-provider/index.ts b/src/config-provider/index.ts
index 0a079367a..db4ec846a 100644
--- a/src/config-provider/index.ts
+++ b/src/config-provider/index.ts
@@ -1,5 +1,5 @@
import { withInstall } from '../shared';
-import _ConfigProvider from './config-provider';
+import _ConfigProvider from './config-provider.vue';
export * from './type';
diff --git a/src/config-provider/useConfig.ts b/src/config-provider/useConfig.ts
index ad76f697f..fa68cd98e 100644
--- a/src/config-provider/useConfig.ts
+++ b/src/config-provider/useConfig.ts
@@ -5,7 +5,7 @@ import isString from 'lodash/isString';
import { defaultGlobalConfig, configProviderInjectKey, mergeWith } from './context';
import { GlobalConfigProvider } from './type';
-import type { ConfigProviderProps } from './config-provider';
+import type { ConfigProviderProps } from './config-provider.vue';
// 这是为了解决在非component里调用useConfig hook时发出的警告
// https://github.com/Tencent/tdesign-vue-next/issues/2025
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
deleted file mode 100644
index 8839b76df..000000000
--- a/src/guide/guide.tsx
+++ /dev/null
@@ -1,479 +0,0 @@
-import { computed, defineComponent, ref, toRefs, h, nextTick, onMounted, watch, Teleport } from 'vue';
-import isFunction from 'lodash/isFunction';
-import TPopover, { PopoverProps } from '../popover';
-import TPopup, { PopupProps } from '../popup';
-import TButton, { ButtonProps } from '../button';
-import config from '../config';
-import { useVModel, TNode } from '../shared';
-import { addClass, getWindowScroll, removeClass } from '../shared/dom';
-import setStyle from '../_common/js/utils/set-style';
-import props from './props';
-import { GuideStep, TdGuideProps } from './type';
-import { isFixed, getRelativePosition, getTargetElm, scrollToParentVisibleArea, scrollToElm } from './utils';
-import { GuideCrossProps } from './interface';
-import { useConfig } from '../config-provider/useConfig';
-import { SizeEnum } from '../common';
-import { useTNodeJSX } from '../hooks/tnode';
-import { usePrefixClass } from '../hooks/useClass';
-
-const { prefix } = config;
-const name = `${prefix}-guide`;
-
-export default defineComponent({
- name,
- components: {
- TNode,
- TPopover,
- TButton,
- TPopup,
- },
- props,
- setup(props: TdGuideProps, context) {
- const renderTNodeJSX = useTNodeJSX();
- const componentName = usePrefixClass('guide');
- const { globalConfig } = useConfig('guide');
- const LOCK_CLASS = usePrefixClass(`${componentName.value}--lock`);
-
- const { current, modelValue, hideCounter, hideSkip, steps, zIndex } = toRefs(props);
- const [innerCurrent, setInnerCurrent] = useVModel(
- current,
- modelValue,
- props.defaultCurrent,
- props.onChange,
- 'current',
- );
-
- // 覆盖层,用于覆盖所有元素
- const overlayLayerRef = ref();
- // 高亮层,用于高亮元素
- const highlightLayerRef = ref();
- // 提示层,用于高亮元素
- const referenceLayerRef = ref();
- // 当前高亮的元素
- const currentHighlightLayerElm = ref();
- // dialog wrapper ref
- const popoverWrapperRef = ref();
- // dialog ref
- const dialogTooltipRef = ref();
- // 是否开始展示
- const actived = ref(false);
- // 步骤总数
- const stepsTotal = computed(() => steps.value.length);
- // 当前步骤的信息
- const currentStepInfo = computed(() => steps.value[innerCurrent.value]);
- // 当前是否为 popover
- const isPopover = computed(() => getCurrentCrossProps('mode') === 'popover');
- const popoverVisible = ref(false);
- const stepContainer = computed(() => (isPopover.value ? TPopover : TPopup));
-
- const isPopoverCenter = computed(() => isPopover.value && currentStepInfo.value.placement === 'center');
- const stepProps = computed(() => {
- if (isPopover.value) {
- return {
- visible: popoverVisible.value,
- placement: isPopoverCenter.value ? 'bottom' : currentStepInfo.value.placement,
- theme: 'light',
- showArrow: false,
- ...currentStepInfo.value.popoverProps,
- } as PopoverProps;
- }
- return {
- visible: popoverVisible.value,
- zIndex: zIndex.value,
- placement: 'center',
- // destroyOnClose: true,
- class: `${componentName.value}__dialog`,
- overlayProps: {
- zIndex: zIndex.value - 1,
- },
- } as PopupProps;
- });
-
- // 当前元素位置状态
- const currentElmIsFixed = computed(() => isFixed(currentHighlightLayerElm.value || document.body));
- // 获取当前步骤的属性值 用户当前步骤设置 > 用户组件设置的
- const getCurrentCrossProps = (propsName: Key) =>
- currentStepInfo.value[propsName] ?? props[propsName];
-
- const hWithParams = (params: Record = { currentStepInfo: currentStepInfo.value }) => {
- // @ts-ignore
- const newH = (...args: any[]) => h(...args);
- return Object.assign(newH, params);
- };
-
- // highlight layer 相关
- // 获取当前步骤的用户设定的高亮内容
- const currentCustomHighlightContent = computed(() => {
- const { highlightContent } = currentStepInfo.value;
-
- let node: any = highlightContent;
- if (isFunction(highlightContent)) {
- // 支持函数
- node = highlightContent(hWithParams());
- } else if (context.slots.highlightContent) {
- // 支持插槽
- node = context.slots.highlightContent(hWithParams());
- } else if (context.slots['highlight-content']) {
- // 支持插槽
- node = context.slots['highlight-content'](hWithParams());
- }
- // 给自定义元素添加类名
- if (node) {
- if (!node.props) node.props = {};
- node.props.class = node.props.class || '';
- }
- return node;
- });
-
- // 是否展示高亮区域
- const showCustomHighlightContent = computed(() => Boolean(currentCustomHighlightContent.value && isPopover.value));
-
- const wrapperClass = computed(() => [
- `${componentName.value}__wrapper`,
- `${componentName.value}--${currentElmIsFixed.value ? 'fixed' : 'absolute'}`,
- {
- [`${componentName.value}__wrapper--content`]: !!currentStepInfo.value.content,
- },
- ]);
- const popoverClass = computed(() => [`${componentName.value}__reference`]);
- const contetnClass = computed(() => [`${componentName.value}__content--${isPopover.value ? 'popover' : 'dialog'}`]);
- const footerClass = computed(() => [
- `${componentName.value}__footer`,
- `${componentName.value}__footer--${isPopover.value ? 'popover' : 'dialog'}`,
- ]);
-
- // 设置高亮层的位置
- const setHighlightLayerPosition = (highlightLayer: HTMLElement, isReference = false) => {
- let { top, left } = getRelativePosition(currentHighlightLayerElm.value);
- let { width, height } = currentHighlightLayerElm.value.getBoundingClientRect();
- const highlightPadding = getCurrentCrossProps('highlightPadding');
-
- if (isPopover.value) {
- width += highlightPadding * 2;
- height += highlightPadding * 2;
- top -= highlightPadding;
- left -= highlightPadding;
- } else {
- const { scrollTop, scrollLeft } = getWindowScroll();
- top += scrollTop;
- left += scrollLeft;
- }
-
- const style = {
- top: `${top}px`,
- left: `${left}px`,
- };
-
- // 展示自定义高亮
- if (showCustomHighlightContent.value) {
- // 高亮框本身不设定宽高,引用用框的宽高设定为用户自定义的宽高
- if (isReference) {
- const { width, height } = highlightLayerRef.value.getBoundingClientRect();
- Object.assign(style, {
- width: `${width}px`,
- height: `${height}px`,
- });
- } else {
- Object.assign(style, {
- width: 'auto',
- height: 'auto',
- });
- }
- } else {
- Object.assign(style, {
- width: `${width}px`,
- height: `${height}px`,
- });
- }
-
- setStyle(highlightLayer, style);
- };
-
- const setReferenceFullW = (referenceElements: HTMLElement[]): void => {
- const style = {
- left: 0,
- width: '100vw',
- };
-
- referenceElements.forEach((elem) => setStyle(elem, style));
- };
-
- const showPopoverGuide = () => {
- nextTick(() => {
- currentHighlightLayerElm.value = getTargetElm(currentStepInfo.value.element);
- if (!currentHighlightLayerElm.value) return;
- scrollToParentVisibleArea(currentHighlightLayerElm.value);
- setHighlightLayerPosition(highlightLayerRef.value);
- setHighlightLayerPosition(popoverWrapperRef.value, true);
- setHighlightLayerPosition(referenceLayerRef.value, true);
- scrollToElm(currentHighlightLayerElm.value);
- isPopoverCenter.value && setReferenceFullW([referenceLayerRef.value, popoverWrapperRef.value]);
- });
- };
-
- const showDialogGuide = () => {
- nextTick(() => {
- currentHighlightLayerElm.value = getTargetElm(currentStepInfo.value.element);
- scrollToParentVisibleArea(currentHighlightLayerElm.value);
- setHighlightLayerPosition(highlightLayerRef.value);
- scrollToElm(currentHighlightLayerElm.value);
- });
- };
-
- const showGuide = () => {
- if (isPopover.value) {
- showPopoverGuide();
- } else {
- showDialogGuide();
- }
- nextTick(() => {
- popoverVisible.value = true;
- });
- };
-
- const destroyGuide = () => {
- highlightLayerRef.value?.parentNode.removeChild(highlightLayerRef.value);
- overlayLayerRef.value?.parentNode.removeChild(overlayLayerRef.value);
- removeClass(document.body, LOCK_CLASS.value);
- };
-
- const renderButtonContent = (buttonProps: ButtonProps, defaultContent: string) => {
- const { content } = buttonProps || {};
- return isFunction(content) ? content(h) : content || defaultContent;
- };
-
- const handleSkip = (e: MouseEvent) => {
- const total = stepsTotal.value;
- actived.value = false;
- setInnerCurrent(-1, { e, total });
- props.onSkip?.({ e, current: innerCurrent.value, total });
- };
-
- const handleNext = (e: MouseEvent) => {
- const total = stepsTotal.value;
- setInnerCurrent(innerCurrent.value + 1, { e, total });
- props.onNextStepClick?.({
- e,
- next: innerCurrent.value + 1,
- current: innerCurrent.value,
- total,
- });
- };
-
- const handleFinish = (e: MouseEvent) => {
- const total = stepsTotal.value;
- actived.value = false;
- setInnerCurrent(-1, { e, total });
- props.onFinish?.({ e, current: innerCurrent.value, total });
- };
-
- const handleBack = (e: MouseEvent) => {
- const total = stepsTotal.value;
- setInnerCurrent(0, { e, total });
- props.onBack?.({ e, current: innerCurrent.value, total });
- };
-
- const initGuide = () => {
- if (innerCurrent.value >= 0 && innerCurrent.value < steps.value.length) {
- if (!actived.value) {
- actived.value = true;
- addClass(document.body, LOCK_CLASS.value);
- }
- showGuide();
- }
- };
-
- watch(innerCurrent, (val) => {
- if (val >= 0 && val < stepsTotal.value) {
- isPopover.value && (popoverVisible.value = false);
- initGuide();
- } else {
- actived.value = false;
- destroyGuide();
- }
- });
-
- onMounted(() => {
- initGuide();
- });
-
- return () => {
- const renderOverlayLayer = () => (
-
- );
-
- const renderHighlightLayer = () => {
- const style = { zIndex: zIndex.value - 1 };
- const highlightClass = [
- `${componentName.value}__highlight`,
- `${componentName.value}__highlight--${isPopover.value ? 'popover' : 'dialog'}`,
- `${componentName.value}--${currentElmIsFixed.value && isPopover.value ? 'fixed' : 'absolute'}`,
- ];
- const showOverlay = getCurrentCrossProps('showOverlay');
- const maskClass = [`${componentName.value}__highlight--${showOverlay ? 'mask' : 'nomask'}`];
-
- return (
-
- {showCustomHighlightContent.value && currentCustomHighlightContent.value}
-
- );
- };
-
- const triggerElement = ;
- const contentSlot = isPopover.value ? 'content' : 'default';
-
- const contentNode = () => {
- const { content } = currentStepInfo.value;
- const contentProps = {
- handleSkip,
- handleNext,
- handleFinish,
- handleBack,
- current: innerCurrent.value,
- total: stepsTotal.value,
- };
- let renderContent;
- if (isFunction(content)) {
- renderContent = () => content(hWithParams(contentProps));
- } else if (context.slots.content) {
- renderContent = context.slots.content(hWithParams(contentProps));
- } else if (content) {
- renderContent = () => ;
- }
- return renderContent;
- };
-
- const renderTitle = () => {
- const functionTitle = isFunction(currentStepInfo.value.title)
- ? currentStepInfo.value.title(hWithParams())
- : undefined;
- const slotTitle = context.slots.title ? context.slots.title(hWithParams()) : undefined;
- return functionTitle || slotTitle || currentStepInfo.value.title;
- };
-
- const renderTooltipContent = () => {
- const title = {renderTitle()}
;
-
- const { body } = currentStepInfo.value;
- let renderBody: any = null;
- if (isFunction(body)) {
- renderBody = body(hWithParams());
- } else if (context.slots.body) {
- renderBody = context.slots.body(hWithParams());
- } else if (typeof body === 'string') {
- renderBody = body;
- } else if (body) {
- renderBody = h(body);
- }
- const desc = {renderBody}
;
- return (
-
- {title}
- {desc}
-
- );
- };
-
- const renderCounter = () => {
- const renderCounterContent = renderTNodeJSX('counter', {
- params: { total: stepsTotal.value, current: innerCurrent.value },
- });
-
- const defaultCounter = (
-
- {renderCounterContent || `${innerCurrent.value + 1}/${stepsTotal.value}`}
-
- );
- return <>{!hideCounter.value && defaultCounter}>;
- };
-
- const renderFooterAction = () => {
- const isLast = innerCurrent.value === stepsTotal.value - 1;
- const isFirst = innerCurrent.value === 0;
- const buttonSize = (isPopover.value ? 'extra-small' : 'medium') as SizeEnum;
-
- return (
-
- );
- };
- return (
- <>
- {actived.value && (
-
- {renderOverlayLayer()}
- {renderHighlightLayer()}
-
-
- {isPopover.value && {triggerElement}}
-
- {/* {isPopover.value ? (
- contentNode()
- ) : ( */}
-
- {renderTooltipContent()}
- {renderFooterAction()}
-
- {/* )} */}
-
-
-
-
- )}
- >
- );
- };
- },
-});
diff --git a/src/guide/index.ts b/src/guide/index.ts
index 20ac9e1ce..61e1c1c8f 100644
--- a/src/guide/index.ts
+++ b/src/guide/index.ts
@@ -1,4 +1,4 @@
-import Guide from './guide';
+import Guide from './guide.vue';
import { withInstall, WithInstallType } from '../shared';
import { TdGuideProps, GuideStep } from './type';