feat(components): [tabs] add default-value prop, suppress flicker (element-plus#22815)

closed element-plus#22776

Co-authored-by: 云游君 <me@yunyoujun.cn>

Author: yicheny

docs/en-US/component/tabs.md

@@ -90,6 +90,7 @@ tabs/customized-trigger
 | Name                  | Description                                                                                                                             | Type                                                                                             | Default    |
 | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------- |
 | model-value / v-model | binding value, name of the selected tab, the default value is the name of first tab                                                     | ^[string] / ^[number]                                                                            | —          |
+| default-value         | initial value when `model-value` is not set                                                                                             | ^[string] / ^[number]                                                                            | —          |
 | type                  | type of Tab                                                                                                                             | ^[enum]`'' \| 'card' \| 'border-card'`                                                           | ''         |
 | closable              | whether Tab is closable                                                                                                                 | ^[boolean]                                                                                       | false      |
 | addable               | whether Tab is addable                                                                                                                  | ^[boolean]                                                                                       | false      |

packages/components/tabs/__tests__/tabs.test.tsx

@@ -100,6 +100,38 @@ describe('Tabs.vue', () => {
     expect(tabsWrapper.vm.$.exposed!.currentName.value).toEqual('c')
   })
 
+  test('default-value', async () => {
+    const activeName = ref<TabPaneName | undefined>()
+    const wrapper = mount(() => (
+      <Tabs v-model={activeName.value} defaultValue="b">
+        <TabPane name="a" label="label-1">
+          A
+        </TabPane>
+        <TabPane name="b" label="label-2">
+          B
+        </TabPane>
+        <TabPane name="c" label="label-3">
+          C
+        </TabPane>
+      </Tabs>
+    ))
+
+    const tabsWrapper = wrapper.findComponent(Tabs)
+    const navWrapper = wrapper.findComponent(TabNav)
+    await nextTick()
+
+    let navItemsWrapper = navWrapper.findAll('.el-tabs__item')
+    expect(navItemsWrapper[1].classes('is-active')).toBe(true)
+    expect(tabsWrapper.vm.$.exposed!.currentName.value).toEqual('b')
+
+    activeName.value = 'c'
+    await nextTick()
+
+    navItemsWrapper = navWrapper.findAll('.el-tabs__item')
+    expect(navItemsWrapper[2].classes('is-active')).toBe(true)
+    expect(tabsWrapper.vm.$.exposed!.currentName.value).toEqual('c')
+  })
+
   test('card', async () => {
     const wrapper = mount(() => (
       <Tabs type="card">

packages/components/tabs/src/tab-bar.vue

@@ -1,13 +1,14 @@
 <template>
   <div
+    v-if="shouldRenderBar"
     ref="barRef"
     :class="[ns.e('active-bar'), ns.is(rootTabs!.props.tabPosition)]"
     :style="barStyle"
   />
 </template>
 
 <script lang="ts" setup>
-import { inject, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, inject, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import { capitalize, isUndefined, throwError } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
@@ -29,6 +30,15 @@ const ns = useNamespace('tabs')
 
 const barRef = ref<HTMLDivElement>()
 const barStyle = ref<CSSProperties>()
+const shouldDisableInitialTransition = computed(
+  () =>
+    isUndefined(rootTabs.props.modelValue) &&
+    !isUndefined(rootTabs.props.defaultValue)
+)
+const shouldRenderBar = computed(
+  () =>
+    !shouldDisableInitialTransition.value || Boolean(barStyle.value?.transform)
+)
 
 const getBarStyle = (): CSSProperties => {
   let offset = 0

packages/components/tabs/src/tabs.tsx

@@ -53,6 +53,12 @@ export const tabsProps = buildProps({
   modelValue: {
     type: [String, Number],
   },
+  /**
+   * @description initial value when `model-value` is not set
+   */
+  defaultValue: {
+    type: [String, Number],
+  },
   /**
    * @description whether Tab is addable and closable
    */
@@ -126,7 +132,10 @@ const Tabs = defineComponent({
     } = useOrderedChildren<TabsPaneContext>(getCurrentInstance()!, 'ElTabPane')
 
     const nav$ = ref<TabNavInstance>()
-    const currentName = ref<TabPaneName>(props.modelValue ?? '0')
+    const currentName = ref<TabPaneName>(
+      (isUndefined(props.modelValue) ? props.defaultValue : props.modelValue) ??
+        '0'
+    )
 
     const setCurrentName = async (value?: TabPaneName, trigger = false) => {
       // should do nothing.
@@ -209,6 +218,15 @@ const Tabs = defineComponent({
       (modelValue) => setCurrentName(modelValue)
     )
 
+    watch(
+      () => props.defaultValue,
+      (defaultValue) => {
+        if (isUndefined(props.modelValue)) {
+          setCurrentName(defaultValue)
+        }
+      }
+    )
+
     watch(currentName, async () => {
       await nextTick()
       nav$.value?.scrollToActiveTab()