diff --git a/components/Popover/src/index.svelte b/components/Popover/src/index.svelte
index 8556dd0c..164e9235 100644
--- a/components/Popover/src/index.svelte
+++ b/components/Popover/src/index.svelte
@@ -169,7 +169,17 @@
* @internal
*/
export function forceUpdated() {
- getInstance().update();
+ const inst = getInstance();
+ if (inst) {
+ inst.update();
+ }
+ }
+
+ /**
+ * @internal
+ */
+ export function updatedArrow() {
+ updateArrow();
}
diff --git a/components/Tour/__test__/__snapshots__/tour.spec.ts.snap b/components/Tour/__test__/__snapshots__/tour.spec.ts.snap
index 9c14cb25..6f139d91 100644
--- a/components/Tour/__test__/__snapshots__/tour.spec.ts.snap
+++ b/components/Tour/__test__/__snapshots__/tour.spec.ts.snap
@@ -1,49 +1,49 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`Test: KTour > events: change 1`] = `""`;
+exports[`Test: KTour > events: change 1`] = `""`;
-exports[`Test: KTour > events: close 1`] = `""`;
+exports[`Test: KTour > events: close 1`] = `""`;
-exports[`Test: KTour > events: finish 1`] = `""`;
+exports[`Test: KTour > events: finish 1`] = `""`;
-exports[`Test: KTour > props: closeIcon 1`] = `""`;
+exports[`Test: KTour > props: closeIcon 1`] = `""`;
-exports[`Test: KTour > props: cls 1`] = `""`;
+exports[`Test: KTour > props: cls 1`] = `""`;
-exports[`Test: KTour > props: current 1`] = `""`;
+exports[`Test: KTour > props: current 1`] = `""`;
-exports[`Test: KTour > props: mask 1`] = `""`;
+exports[`Test: KTour > props: mask 1`] = `""`;
exports[`Test: KTour > props: open 1`] = `" "`;
-exports[`Test: KTour > props: open 2`] = `" "`;
+exports[`Test: KTour > props: open 2`] = `" "`;
-exports[`Test: KTour > props: prevBtnText & nextBtnText 1`] = `""`;
+exports[`Test: KTour > props: prevBtnText & nextBtnText 1`] = `""`;
-exports[`Test: KTour > props: steps 1`] = `""`;
+exports[`Test: KTour > props: steps 1`] = `""`;
-exports[`Test: KTour > props: zIndex 1`] = `""`;
+exports[`Test: KTour > props: zIndex 1`] = `""`;
-exports[`Test: KTour > props: zIndex 2`] = `""`;
+exports[`Test: KTour > props: zIndex 2`] = `""`;
-exports[`Test: KTour > slots: closeIcon 1`] = `" "`;
+exports[`Test: KTour > slots: closeIcon 1`] = `" "`;
-exports[`Test: KTour > slots: closeIcon 2`] = `" "`;
+exports[`Test: KTour > slots: closeIcon 2`] = `"
"`;
-exports[`Test: KTour > slots: description 1`] = `" "`;
+exports[`Test: KTour > slots: description 1`] = `" "`;
-exports[`Test: KTour > slots: footer 1`] = `" "`;
+exports[`Test: KTour > slots: footer 1`] = `" "`;
-exports[`Test: KTour > slots: footer 2`] = `" "`;
+exports[`Test: KTour > slots: footer 2`] = `" "`;
-exports[`Test: KTour > slots: footer 3`] = `" "`;
+exports[`Test: KTour > slots: footer 3`] = `" "`;
-exports[`Test: KTour > slots: indicators 1`] = `" "`;
+exports[`Test: KTour > slots: indicators 1`] = `" "`;
-exports[`Test: KTour > slots: nextButton & prevButton 1`] = `" "`;
+exports[`Test: KTour > slots: nextButton & prevButton 1`] = `" "`;
-exports[`Test: KTour > slots: nextButton & prevButton 2`] = `" "`;
+exports[`Test: KTour > slots: nextButton & prevButton 2`] = `" "`;
-exports[`Test: KTour > slots: nextButton & prevButton 3`] = `" "`;
+exports[`Test: KTour > slots: nextButton & prevButton 3`] = `" "`;
-exports[`Test: KTour > slots: title 1`] = `" "`;
+exports[`Test: KTour > slots: title 1`] = `" "`;
diff --git a/components/Tour/__test__/tour.spec.ts b/components/Tour/__test__/tour.spec.ts
index 971ceeb2..a0092479 100644
--- a/components/Tour/__test__/tour.spec.ts
+++ b/components/Tour/__test__/tour.spec.ts
@@ -105,7 +105,7 @@ describe('Test: KTour', () => {
mask: false,
prevBtnText: '上一步',
nextBtnText: '下一步',
- steps: [{ target }]
+ steps: [{ target }, { target }]
}
});
expect(instance).toBeTruthy();
diff --git a/components/Tour/src/index.svelte b/components/Tour/src/index.svelte
index 8d41d5a9..c87e3c9b 100644
--- a/components/Tour/src/index.svelte
+++ b/components/Tour/src/index.svelte
@@ -23,6 +23,7 @@
export let attrs: KTourProps['attrs'] = {};
export let prevBtnText: KTourProps['prevBtnText'] = 'prev';
export let nextBtnText: KTourProps['nextBtnText'] = 'next';
+ export let finishBtnText: KTourProps['finishBtnText'] = 'finish';
const dispatch = createEventDispatcher();
let index = current;
$: {
@@ -49,13 +50,17 @@
};
const onIndexChange = async () => {
if (index >= steps.length) {
- await doClose(false);
+ await doClose(false, index - 1);
dispatch('finish');
return;
}
- await setTriggerElStyle(true);
+ await setTriggerElStyle();
await handleAppend();
popoverRef.forceUpdated();
+ await tick();
+ resolveShowArrow = showArrow;
+ await tick();
+ popoverRef.updatedArrow();
dispatch('change', index);
};
@@ -81,7 +86,10 @@
let maskBorderBottomWidth = '';
let maskRootBg = 'transparent';
let maskRootTransition = '';
- async function setTriggerElStyle(transition = false) {
+ let showArrow = true;
+ let resolveShowArrow = showArrow;
+ async function setTriggerElStyle() {
+ // transition = false
const { target } = steps[index];
const el: null | HTMLElement = popoverRef.getPopoverContainerRef();
function setFullScreen() {
@@ -89,7 +97,7 @@
el.style.position = 'fixed';
el.style.left = el.style.top = `50%`;
el.style.transform = `translate(-50%, -50%)`;
- maskRootTransition = transition ? 'border-width .3s' : '';
+ // maskRootTransition = transition ? 'border-width .3s' : '';
maskBorderBottomWidth =
maskBorderRightWidth =
maskBorderTopWidth =
@@ -100,6 +108,7 @@
if (mask) {
maskRootBg = 'rgba(0,0,0,0.5)';
}
+ showArrow = false;
}
}
if (el && target) {
@@ -116,13 +125,18 @@
el.style.top = `${top}px`;
el.style.left = `${left}px`;
el.style.transform = `translate(0, 0)`;
+ el.style.transform = `translate(0, 0)`;
+ if (!mask) {
+ el.style.zIndex = '-9999';
+ }
- maskRootTransition = transition ? 'border-width .3s' : '';
- maskWidth = `${width}px`;
- maskHeight = `${height}px`;
+ // maskRootTransition = transition ? 'border-width .3s' : '';
+ const gap = 4;
+ maskWidth = `${width + 2 * gap}px`;
+ maskHeight = `${height + 2 * gap}px`;
if (mask) {
- maskBorderTopWidth = `${Math.max(top, 0)}px`;
- maskBorderLeftWidth = `${Math.max(left, 0)}px`;
+ maskBorderTopWidth = `${Math.max(top - gap, 0)}px`;
+ maskBorderLeftWidth = `${Math.max(left - gap, 0)}px`;
const { marginRight, marginLeft, marginBottom, marginTop } = window.getComputedStyle(
document.body
);
@@ -133,8 +147,8 @@
maskBorderBottomWidth = `${Math.max(heightWithMargin - height - top, 0)}px`;
maskBorderRightWidth = `${Math.max(widthWithMargin - width - left, 0)}px`;
}
-
maskRootBg = 'transparent';
+ showArrow = true;
} else if (el && !target) {
setFullScreen();
}
@@ -160,10 +174,19 @@
await tick();
}
popoverRef.updateShow(show);
+ resolveShowArrow = showArrow;
+ await tick();
+ popoverRef.updatedArrow();
}
}
- async function doClose(isDispatch: boolean) {
+ async function doClose(isDispatch: boolean, i: number) {
+ const { target } = steps[i];
+ const el: null | HTMLElement = popoverRef.getPopoverContainerRef();
+ if (target && el) {
+ (target as HTMLElement).removeChild(el);
+ }
+
index = current;
popoverRef.updateShow(false);
isShow = open = false;
@@ -177,8 +200,11 @@
doShow(open);
}
- function doSetTriggerElStyle() {
+ async function doSetTriggerElStyle() {
setTriggerElStyle();
+ resolveShowArrow = showArrow;
+ await tick();
+ popoverRef.updatedArrow();
}
$: {
if (isShow) {
@@ -226,7 +252,7 @@
style:transition={maskRootTransition}
style:z-index={zIndex}
>
-
+