From 20bf628b16cd97051eb9af3920ed34ed46ba07fa Mon Sep 17 00:00:00 2001 From: Eiinu Date: Tue, 26 Mar 2024 15:25:32 +0800 Subject: [PATCH] =?UTF-8?q?fix(tabs):=20=E4=BF=AE=E5=A4=8D=20vertical=20?= =?UTF-8?q?=E6=96=B9=E5=BC=8F=20tab=20=E6=95=B0=E9=87=8F=E8=BF=87=E5=A4=9A?= =?UTF-8?q?=E6=97=B6=E6=BB=9A=E5=8A=A8=E5=AE=9A=E4=BD=8D=E4=B8=8D=E5=87=86?= =?UTF-8?q?=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98=20(#2996)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__VUE/tabs/__tests__/index.spec.tsx | 210 ++++++++---------- src/packages/__VUE/tabs/index.taro.vue | 10 +- src/packages/__VUE/tabs/index.vue | 4 +- 3 files changed, 103 insertions(+), 121 deletions(-) diff --git a/src/packages/__VUE/tabs/__tests__/index.spec.tsx b/src/packages/__VUE/tabs/__tests__/index.spec.tsx index 8d6934ddfc..38fbb59a1d 100644 --- a/src/packages/__VUE/tabs/__tests__/index.spec.tsx +++ b/src/packages/__VUE/tabs/__tests__/index.spec.tsx @@ -1,5 +1,5 @@ import { config, mount } from '@vue/test-utils' -import { nextTick, reactive } from 'vue' +import { nextTick, reactive, ref } from 'vue' import { JoySmile, Dongdong } from '@nutui/icons-vue' import { Sticky as NutSticky, Tabs, TabPane } from '@nutui/nutui' @@ -15,27 +15,19 @@ afterAll(() => { config.global.components = {} }) -test('base Tabs', () => { - const wrapper = mount(Tabs) - const rate = wrapper.find('.nut-tabs') - expect(rate.exists()).toBe(true) -}) - -test('base tabs props', async () => { - const wrapper = mount(Tabs, { - props: { - modelValue: '0', - background: '#f5f5f5', - color: '#f5f5f5', - direction: 'horizontal', - type: 'smile', - size: 'large', - 'title-scroll': true - }, - components: { - 'nut-tabs': Tabs, - 'nut-tab-pane': TabPane - } +test('Tabs: base tabs props', async () => { + const wrapper = mount(() => { + return ( + + ) }) await nextTick() const stepItem = wrapper.find('.nut-tabs__titles') @@ -50,27 +42,24 @@ test('base tabs props', async () => { expect(_stepItem3.classes()).toContain('scrollable') }) -test('base other props', async () => { - const wrapper = mount({ - components: { - 'nut-tabs': Tabs, - 'nut-tab-pane': TabPane - }, - template: ` - - 123 - 456 - - ` +test('Tabs: base other props', async () => { + const wrapper = mount(() => { + return ( + + 123 + 456 + + ) }) await nextTick() const stepItem = wrapper.find('.nut-tabs__content') expect((stepItem.element as HTMLElement).style.transitionDuration).toEqual('500ms') const stepItem1 = wrapper.find('.nut-tabs__titles-item') - expect((stepItem1.element as HTMLElement).style.marginLeft).toEqual('20px') + expect((stepItem1.element as HTMLElement).style.paddingLeft).toEqual('20px') }) -test('base Tabs Slots', async () => { +test('Tabs: base Tabs Slots', async () => { + // TODO: template -> tsx const wrapper = mount({ components: { 'nut-tabs': Tabs, @@ -133,25 +122,24 @@ test('base Tabs Slots', async () => { expect(tab4.exists()).toBe(true) }) -test('base Tabpane Props', async () => { - const wrapper = mount({ - components: { - 'nut-tabs': Tabs, - 'nut-tab-pane': TabPane - }, - template: ` - - - Tab 2 - Tab 3 - - `, - setup() { - const state = reactive({ - tab2value: '0' - }) - return { state } - } +test('Tabs: base Tabpane Props', async () => { + const val = ref('0') + const wrapper = mount(() => { + return ( + + + {' '} + + + {' '} + Tab 2{' '} + + + {' '} + Tab 3{' '} + + + ) }) await nextTick() const tab = wrapper.findAll('.nut-tabs__titles-item') @@ -164,25 +152,24 @@ test('base Tabpane Props', async () => { expect(tab3[0].html()).toContain('Tab 1') }) -test('base Tabpane disabled swipeable', async () => { - const wrapper = mount({ - components: { - 'nut-tabs': Tabs, - 'nut-tab-pane': TabPane - }, - template: ` - - - Tab 2 - Tab 3 - - `, - setup() { - const state = reactive({ - tab2value: '0' - }) - return { state } - } +test('Tabs: base Tabpane disabled swipeable', async () => { + const val = ref('0') + const wrapper = mount(() => { + return ( + + + {' '} + + + {' '} + Tab 2{' '} + + + {' '} + Tab 3{' '} + + + ) }) await nextTick() const tab = wrapper.findAll('.nut-tabs__titles-item') @@ -195,25 +182,24 @@ test('base Tabpane disabled swipeable', async () => { expect(tab3[0].html()).toContain('Tab 1') }) -test('base click', async () => { - const wrapper = mount({ - components: { - 'nut-tabs': Tabs, - 'nut-tab-pane': TabPane - }, - template: ` - - Tab 1 - Tab 2 - Tab 3 - - `, - setup() { - const state = reactive({ - tab1value: '0' - }) - return { state } - } +test('Tabs: base click', async () => { + const val = ref('0') + const wrapper = mount(() => { + return ( + + + {' '} + + + {' '} + Tab 2{' '} + + + {' '} + Tab 3{' '} + + + ) }) await nextTick() const tab = wrapper.find('.nut-tabs__titles-item') @@ -223,27 +209,25 @@ test('base click', async () => { expect((tab1.element as HTMLElement).style.transform).toEqual('translate3d(-0%, 0, 0)') }) -test('Tabs: direction=vertical & title-gutter', async () => { - const wrapper = mount({ - components: { - 'nut-tabs': Tabs, - 'nut-tab-pane': TabPane - }, - template: ` - - Tab 1 - Tab 2 - Tab 3 - - `, - setup() { - const state = reactive({ - tab1value: '0' - }) - return { state } - } +test('Tabs: Tabs: direction=vertical & title-gutter', async () => { + const wrapper = mount(() => { + return ( + + + {' '} + + + {' '} + Tab 2{' '} + + + {' '} + Tab 3{' '} + + + ) }) await nextTick() const tab = wrapper.find('.nut-tabs__titles-item') - expect(tab.html()).includes('margin-top: 10px') + expect(tab.html()).includes('padding-top: 10px') }) diff --git a/src/packages/__VUE/tabs/index.taro.vue b/src/packages/__VUE/tabs/index.taro.vue index 2dd5e48775..66487616e2 100644 --- a/src/packages/__VUE/tabs/index.taro.vue +++ b/src/packages/__VUE/tabs/index.taro.vue @@ -266,16 +266,14 @@ export default create({ let to = 0 if (props.direction === 'vertical') { - const DEFAULT_PADDING = 11 const top = titleRects .slice(0, currentIndex.value) - .reduce((prev: number, curr: RectItem) => prev + curr?.height + 0, DEFAULT_PADDING) + .reduce((prev: number, curr: RectItem) => prev + curr?.height, 0) to = top - (navRectRef.value?.height - titleRect?.height) / 2 } else { - const DEFAULT_PADDING = 31 const left = titleRects .slice(0, currentIndex.value) - .reduce((prev: number, curr: RectItem) => prev + curr?.width + 20, DEFAULT_PADDING) + .reduce((prev: number, curr: RectItem) => prev + curr?.width, 0) to = left - (navRectRef.value?.width - titleRect?.width) / 2 } @@ -398,9 +396,9 @@ export default create({ if (!props.titleGutter) return {} const px = pxCheck(props.titleGutter) if (props.direction === 'vertical') { - return { marginTop: px, marginBottom: px } + return { paddingTop: px, paddingBottom: px } } - return { marginLeft: px, marginRight: px } + return { paddingLeft: px, paddingRight: px } }) return { titles, diff --git a/src/packages/__VUE/tabs/index.vue b/src/packages/__VUE/tabs/index.vue index e26d4986dd..4141f8e7a1 100644 --- a/src/packages/__VUE/tabs/index.vue +++ b/src/packages/__VUE/tabs/index.vue @@ -398,9 +398,9 @@ export default create({ if (!props.titleGutter) return {} const px = pxCheck(props.titleGutter) if (props.direction === 'vertical') { - return { marginTop: px, marginBottom: px } + return { paddingTop: px, paddingBottom: px } } - return { marginLeft: px, marginRight: px } + return { paddingLeft: px, paddingRight: px } }) return {