From e4f7edb52e7751ae1a0b0c7715c442bf10257768 Mon Sep 17 00:00:00 2001 From: populus Date: Sat, 27 Nov 2021 21:56:09 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0steps-guide?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/status/status | 0 .../__tests__/steps-guide-demo.tsx | 32 +++++++++++++++++++ .../steps-guide/__tests__/steps-guide.spec.ts | 19 +++++++++++ .../steps-guide/hooks/use-steps-guide-ctrl.ts | 2 -- .../hooks/use-steps-guide-position.ts | 8 +++-- .../docs/components/steps-guide/index.md | 1 + 6 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 packages/devui-vue/devui/status/status create mode 100644 packages/devui-vue/devui/steps-guide/__tests__/steps-guide-demo.tsx create mode 100644 packages/devui-vue/devui/steps-guide/__tests__/steps-guide.spec.ts diff --git a/packages/devui-vue/devui/status/status b/packages/devui-vue/devui/status/status new file mode 100644 index 00000000..e69de29b diff --git a/packages/devui-vue/devui/steps-guide/__tests__/steps-guide-demo.tsx b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide-demo.tsx new file mode 100644 index 00000000..08a1ab37 --- /dev/null +++ b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide-demo.tsx @@ -0,0 +1,32 @@ +import { ref, defineComponent, reactive } from 'vue' +import DStepsGuide from '../src/steps-guide' +export default defineComponent({ + name: 'StepsGuideDemo', + components: { + 'd-steps-guide': DStepsGuide, + }, + setup() { + const steps = reactive([ + { title: '基础用法1', content: '业务推出新特性,或复杂的业务逻辑需要指引用户时使用。', position: { top:0, left:0, type:'top' } }, + { title: '基础用法2', content: '业务推出新特性,或复杂的业务逻辑需要指引用户时使用。', position: { top:0, left:0, type:'bottom' } }, + { title: '基础用法3', content: '业务推出新特性,或复杂的业务逻辑需要指引用户时使用。', position: { top:0, left:0, type:'top-left' } } + ]) + const stepRef = ref(null), stepIndex = ref(1) + const handleClick = (index) => { + stepRef.value.setCurrentIndex(index) + } + const handleClose = () => { + stepRef.value.closeGuide() + } + return { + steps, + stepRef, + stepIndex, + handleClick, + handleClose + } + }, + render(props){ + return () + } +}) \ No newline at end of file diff --git a/packages/devui-vue/devui/steps-guide/__tests__/steps-guide.spec.ts b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide.spec.ts new file mode 100644 index 00000000..26c53354 --- /dev/null +++ b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide.spec.ts @@ -0,0 +1,19 @@ +import { mount } from '@vue/test-utils'; +import StepsGuideDemo from './steps-guide-demo'; +describe('d-steps-guide', () => { + it('guide step', async () => { + const wrapper = mount(StepsGuideDemo) + + await wrapper.vm.handleClick(2) + expect(wrapper.vm.stepIndex).toBe(2) + + await wrapper.vm.handleClick(1) + expect(wrapper.vm.stepIndex).toBe(1) + + await wrapper.vm.handleClick(0) + expect(wrapper.vm.stepIndex).toBe(0) + + await wrapper.vm.handleClose() + expect(wrapper.vm.stepIndex).toBe(-1) + }); +}); diff --git a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-ctrl.ts b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-ctrl.ts index e7ca9d2a..c35b6ce8 100644 --- a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-ctrl.ts +++ b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-ctrl.ts @@ -21,9 +21,7 @@ export function useStepsGuideCtrl( if(index !== -1 && props.stepChange()){ if(index > -1 && index < stepsCount.value) { stepIndex.value = index - console.log(stepIndex.value, index, stepsCount.value) nextTick(() => { - console.log(stepIndex.value, index, stepsCount.value) updateGuidePosition() }) } else { diff --git a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts index 146ce438..ebf5aef5 100644 --- a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts +++ b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts @@ -13,7 +13,7 @@ export function useStepsGuidePosition( }) const updateGuidePosition = () => { - if(!currentStep.value) return; + if(!currentStep.value || !stepsRef.value) return; const baseTop = window.pageYOffset - document.documentElement.clientTop const baseLeft = window.pageXOffset - document.documentElement.clientLeft const currentStepPosition:positionConf = currentStep.value.position @@ -29,6 +29,10 @@ export function useStepsGuidePosition( guideClassList.splice(1, 1, currentStepPosition) const triggerSelector = currentStep.value.target || currentStep.value.trigger const triggerElement = document.querySelector(triggerSelector) + if(!triggerElement) { + console.warn(`${triggerSelector} 不存在!`) + return false + } const targetRect = triggerElement.getBoundingClientRect() _left = targetRect.left + triggerElement.clientWidth / 2 - stepGuideElement.clientWidth / 2 + baseLeft _top = targetRect.top + triggerElement.clientHeight / 2 - stepGuideElement.clientHeight / 2 + baseTop @@ -61,7 +65,7 @@ export function useStepsGuidePosition( } guidePosition.left = _left + 'px' guidePosition.top = _top + 'px' - if(props.scrollToTargetSwitch) { + if(props.scrollToTargetSwitch && typeof stepGuideElement.scrollIntoView === 'function') { nextTick(() => { // 位置更新后滚动视图 stepGuideElement.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"}) diff --git a/packages/devui-vue/docs/components/steps-guide/index.md b/packages/devui-vue/docs/components/steps-guide/index.md index 3c6973d9..f8facc98 100644 --- a/packages/devui-vue/docs/components/steps-guide/index.md +++ b/packages/devui-vue/docs/components/steps-guide/index.md @@ -239,6 +239,7 @@ export default defineComponent({ const stepsRef = ref(null) onMounted(() => { stepsRef.value.closeGuide('custom') + console.log('stepsRef.value', stepsRef.value) }) return { customSteps, -- Gitee From e6f62428f9da916e046244948ee90be1d129bb44 Mon Sep 17 00:00:00 2001 From: populus Date: Sat, 27 Nov 2021 21:56:49 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0steps-guide?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/status/status | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 packages/devui-vue/devui/status/status diff --git a/packages/devui-vue/devui/status/status b/packages/devui-vue/devui/status/status deleted file mode 100644 index e69de29b..00000000 -- Gitee From 90cd53d316cca970714759452ac7d665946a3afd Mon Sep 17 00:00:00 2001 From: populus Date: Thu, 2 Dec 2021 13:19:07 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84steps-guide?= =?UTF-8?q?=E7=9A=84=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__tests__/steps-guide-demo.tsx | 53 ++++++++++++++++--- .../steps-guide/__tests__/steps-guide.spec.ts | 48 ++++++++++++++--- .../hooks/use-steps-guide-position.ts | 2 +- 3 files changed, 88 insertions(+), 15 deletions(-) diff --git a/packages/devui-vue/devui/steps-guide/__tests__/steps-guide-demo.tsx b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide-demo.tsx index 08a1ab37..29c4caf2 100644 --- a/packages/devui-vue/devui/steps-guide/__tests__/steps-guide-demo.tsx +++ b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide-demo.tsx @@ -6,12 +6,41 @@ export default defineComponent({ 'd-steps-guide': DStepsGuide, }, setup() { - const steps = reactive([ - { title: '基础用法1', content: '业务推出新特性,或复杂的业务逻辑需要指引用户时使用。', position: { top:0, left:0, type:'top' } }, - { title: '基础用法2', content: '业务推出新特性,或复杂的业务逻辑需要指引用户时使用。', position: { top:0, left:0, type:'bottom' } }, - { title: '基础用法3', content: '业务推出新特性,或复杂的业务逻辑需要指引用户时使用。', position: { top:0, left:0, type:'top-left' } } - ]) - const stepRef = ref(null), stepIndex = ref(1) + const steps = reactive([{ title: '弹出位置 top-left', + content: 'Steps Guide', + trigger: '.top-left', + position: 'top-left' + },{ title: '弹出位置 top', + content: 'Steps Guide', + trigger: '.top', + position: 'top' + },{ title: '弹出位置 top-right', + content: 'Steps Guide', + trigger: '.top-right', + position: 'top-right' + }, + { title: '弹出位置 right', + content: 'Steps Guide', + trigger: '.right', + position: 'right' + },{ title: '弹出位置 bottom-right', + content: 'Steps Guide', + trigger: '.bottom-right', + position: 'bottom-right' + },{ title: '弹出位置 bottom', + content: 'Steps Guide', + trigger: '.bottom', + position: 'bottom' + },{ title: '弹出位置 bottom-left', + content: 'Steps Guide', + trigger: '.bottom-left', + position: 'bottom-left' + },{ title: '弹出位置 left', + content: 'Steps Guide', + trigger: '.left', + position: 'left' + }]) + const stepRef = ref(null), stepIndex = ref(0) const handleClick = (index) => { stepRef.value.setCurrentIndex(index) } @@ -27,6 +56,16 @@ export default defineComponent({ } }, render(props){ - return () + return (<> + + + + + + + + + + ) } }) \ No newline at end of file diff --git a/packages/devui-vue/devui/steps-guide/__tests__/steps-guide.spec.ts b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide.spec.ts index 26c53354..86fb4534 100644 --- a/packages/devui-vue/devui/steps-guide/__tests__/steps-guide.spec.ts +++ b/packages/devui-vue/devui/steps-guide/__tests__/steps-guide.spec.ts @@ -1,19 +1,53 @@ import { mount } from '@vue/test-utils'; import StepsGuideDemo from './steps-guide-demo'; +document.body.innerHTML = ` + + + + + + + + ` + describe('d-steps-guide', () => { - it('guide step', async () => { + it('test steps change', async () => { const wrapper = mount(StepsGuideDemo) - await wrapper.vm.handleClick(2) - expect(wrapper.vm.stepIndex).toBe(2) - - await wrapper.vm.handleClick(1) + await wrapper.get('.top').trigger('click') expect(wrapper.vm.stepIndex).toBe(1) + expect(document.querySelector('.devui-steps-guide').className).toContain('top') + + await wrapper.get('.right').trigger('click') + expect(wrapper.vm.stepIndex).toBe(3) + expect(document.querySelector('.devui-steps-guide').className).toContain('right') + + await wrapper.get('.bottom').trigger('click') + expect(wrapper.vm.stepIndex).toBe(5) + expect(document.querySelector('.devui-steps-guide').className).toContain('bottom') - await wrapper.vm.handleClick(0) + await wrapper.get('.left').trigger('click') + expect(wrapper.vm.stepIndex).toBe(7) + expect(document.querySelector('.devui-steps-guide').className).toContain('left') + + await wrapper.get('.top-left').trigger('click') expect(wrapper.vm.stepIndex).toBe(0) + expect(document.querySelector('.devui-steps-guide').className).toContain('top-left') + + await wrapper.get('.top-right').trigger('click') + expect(wrapper.vm.stepIndex).toBe(2) + expect(document.querySelector('.devui-steps-guide').className).toContain('top-right') + + await wrapper.get('.bottom-right').trigger('click') + expect(wrapper.vm.stepIndex).toBe(4) + expect(document.querySelector('.devui-steps-guide').className).toContain('bottom-right') + + await wrapper.get('.bottom-left').trigger('click') + expect(wrapper.vm.stepIndex).toBe(6) + expect(document.querySelector('.devui-steps-guide').className).toContain('bottom-left') - await wrapper.vm.handleClose() + await wrapper.get('.close').trigger('click') expect(wrapper.vm.stepIndex).toBe(-1) + expect(document.querySelector('.devui-steps-guide')).toBe(null) }); }); diff --git a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts index ebf5aef5..86e3bdd7 100644 --- a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts +++ b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts @@ -4,7 +4,7 @@ import { Step, positionConf, StepsGuideProps } from '../src/steps-guide-types' export function useStepsGuidePosition( props: StepsGuideProps, currentStep: ComputedRef) { - const guideClassList = ['devui-steps-guide'] + const guideClassList = reactive(['devui-steps-guide']) const stepsRef = ref(null) const guidePosition = reactive({ left: '', -- Gitee From e0a19bafb60a8cd2128f5ee6f648e220c3771452 Mon Sep 17 00:00:00 2001 From: populus Date: Thu, 2 Dec 2021 13:25:36 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84steps-guide?= =?UTF-8?q?=E7=9A=84=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95;=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E8=B0=83=E8=AF=95=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/docs/components/steps-guide/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/devui-vue/docs/components/steps-guide/index.md b/packages/devui-vue/docs/components/steps-guide/index.md index f8facc98..3c6973d9 100644 --- a/packages/devui-vue/docs/components/steps-guide/index.md +++ b/packages/devui-vue/docs/components/steps-guide/index.md @@ -239,7 +239,6 @@ export default defineComponent({ const stepsRef = ref(null) onMounted(() => { stepsRef.value.closeGuide('custom') - console.log('stepsRef.value', stepsRef.value) }) return { customSteps, -- Gitee