fix(tabs): has style issue when using prefix slot, suffix slot or addable prop with vertical placement, closes #6059, closes #6060

CHANGELOG.en-US.md

@@ -8,6 +8,7 @@
 
 - Fix `n-infinite-scroll` bottoming out judgment error, closes [#6133](https://github.com/tusen-ai/naive-ui/issues/6133).
 - Fix `n-slider`'s rail may have styling issue in `vertical` mode when global box-sizing is overrided, closes [#6114](https://github.com/tusen-ai/naive-ui/issues/6114).
+- Fix `n-tabs` has style issue when using `prefix` slot, `suffix` slot or `addable` prop with vertical placement, closes [#6059](https://github.com/tusen-ai/naive-ui/issues/6059), [#6060](https://github.com/tusen-ai/naive-ui/pull/6060).
 
 ### Features
 

CHANGELOG.zh-CN.md

@@ -8,6 +8,7 @@
 
 - 修复 `n-infinite-scroll` 组件触底判断错误，关闭 [#6133](https://github.com/tusen-ai/naive-ui/issues/6133)
 - 修复 `n-slider` 在垂直模式下的宽度样式可能会被全局 CSS box-sizing override 影响，关闭[#6114](https://github.com/tusen-ai/naive-ui/issues/6114)
+- 修复 `n-tabs` 在垂直模式下使用 `prefix` slot、`suffix` slot 和 `addable` 属性的时候可能出现样式问题，关闭 [#6059](https://github.com/tusen-ai/naive-ui/issues/6059)，[#6060](https://github.com/tusen-ai/naive-ui/pull/6060)
 
 ### Features
 

src/tabs/demos/zhCN/placement.demo.vue

@@ -25,6 +25,7 @@ const type = ref<TabsProps['type']>('card')
     </n-radio-group>
     <n-tabs
       :key="type + placement"
+      addable
       :type="type"
       animated
       :placement="placement"
@@ -34,6 +35,12 @@ const type = ref<TabsProps['type']>('card')
           : undefined
       "
     >
+      <template #prefix>
+        Prefix
+      </template>
+      <template #suffix>
+        Suffix
+      </template>
       <n-tab-pane name="oasis" tab="Oasis">
         Wonderwall
       </n-tab-pane>

src/tabs/src/Tabs.tsx

@@ -529,20 +529,43 @@ export default defineComponent({
     function _handleTabsResize(entry: ResizeObserverEntry): void {
       const {
         target,
-        contentRect: { width }
+        contentRect: { width, height }
       } = entry
-      const containerWidth = target.parentElement!.offsetWidth
+      const containerWidth = target.parentElement!.parentElement!.offsetWidth
+      const containerHeight = target.parentElement!.parentElement!.offsetHeight
+      // console.log(target, target.parentElement, width, containerWidth)
+      const { placement } = props
       if (!addTabFixedRef.value) {
-        if (containerWidth < width) {
-          addTabFixedRef.value = true
+        if (placement === 'top' || placement === 'bottom') {
+          if (containerWidth < width) {
+            addTabFixedRef.value = true
+          }
+        }
+        else {
+          if (containerHeight < height) {
+            addTabFixedRef.value = true
+          }
         }
       }
       else {
         const { value: addTabInst } = addTabInstRef
         if (!addTabInst)
           return
-        if (containerWidth - width > addTabInst.$el.offsetWidth) {
-          addTabFixedRef.value = false
+        if (placement === 'top' || placement === 'bottom') {
+          if (
+            containerWidth - width
+            > (addTabInst.$el as HTMLElement).offsetWidth
+          ) {
+            addTabFixedRef.value = false
+          }
+        }
+        else {
+          if (
+            containerHeight - height
+            > (addTabInst.$el as HTMLElement).offsetHeight
+          ) {
+            addTabFixedRef.value = false
+          }
         }
       }
       deriveScrollShadow(
@@ -802,12 +825,16 @@ export default defineComponent({
       const tabs = (
         <div
           style={this.tabWrapperStyle}
-          class={[`${mergedClsPrefix}-tabs-wrapper`]}
+          class={`${mergedClsPrefix}-tabs-wrapper`}
         >
           {mergedJustifyContent ? null : (
             <div
               class={`${mergedClsPrefix}-tabs-scroll-padding`}
-              style={{ width: `${this.tabsPadding}px` }}
+              style={
+                placement === 'top' || placement === 'bottom'
+                  ? { width: `${this.tabsPadding}px` }
+                  : { height: `${this.tabsPadding}px` }
+              }
             />
           )}
           {showPane

src/tabs/src/styles/index.cssr.ts

@@ -435,7 +435,6 @@ export default cB('tabs', `
     cM('card-type', [
       cE('prefix, suffix', `
         transition: border-color .3s var(--n-bezier);
-        border-bottom: 1px solid var(--n-tab-border-color);
       `),
       cB('tabs-pad', `
         flex-grow: 1;
@@ -460,6 +459,7 @@ export default cB('tabs', `
           padding-left: 8px;
           padding-right: 8px;
           font-size: 16px;
+          justify-content: center;
         `, [
           cE('height-placeholder', `
             width: 0;
@@ -479,24 +479,31 @@ export default cB('tabs', `
         `),
         cM('disabled', 'color: var(--n-tab-text-color-disabled);')
       ]),
-      cB('tabs-scroll-padding', 'border-bottom: 1px solid var(--n-tab-border-color);')
     ]),
-    cM('left, right', [
+    cM('left, right', `
+      flex-direction: column;  
+    `, [
+      cE('prefix, suffix', `
+        padding: var(--n-tab-padding-vertical);
+      `),
       cB('tabs-wrapper', `
         flex-direction: column;
+      `),
+      cB('tabs-tab-wrapper', `
+        flex-direction: column;
       `, [
-        cB('tabs-tab-wrapper', `
-          flex-direction: column;
-        `, [
-          cB('tabs-tab-pad', `
-            height: var(--n-tab-gap-vertical);
-            width: 100%;
-          `)
-        ])
+        cB('tabs-tab-pad', `
+          height: var(--n-tab-gap-vertical);
+          width: 100%;
+        `)
       ])
     ]),
     cM('top', [
       cM('card-type', [
+        cB('tabs-scroll-padding', 'border-bottom: 1px solid var(--n-tab-border-color);'),
+        cE('prefix, suffix', `
+          border-bottom: 1px solid var(--n-tab-border-color);
+        `),
         cB('tabs-tab', `
           border-top-left-radius: var(--n-tab-border-radius);
           border-top-right-radius: var(--n-tab-border-radius);
@@ -515,6 +522,10 @@ export default cB('tabs', `
     ]),
     cM('left', [
       cM('card-type', [
+        cB('tabs-scroll-padding', 'border-right: 1px solid var(--n-tab-border-color);'),
+        cE('prefix, suffix', `
+          border-right: 1px solid var(--n-tab-border-color);
+        `),
         cB('tabs-tab', `
           border-top-left-radius: var(--n-tab-border-radius);
           border-bottom-left-radius: var(--n-tab-border-radius);
@@ -533,6 +544,10 @@ export default cB('tabs', `
     ]),
     cM('right', [
       cM('card-type', [
+        cB('tabs-scroll-padding', 'border-left: 1px solid var(--n-tab-border-color);'),
+        cE('prefix, suffix', `
+          border-left: 1px solid var(--n-tab-border-color);
+        `),
         cB('tabs-tab', `
           border-top-right-radius: var(--n-tab-border-radius);
           border-bottom-right-radius: var(--n-tab-border-radius);
@@ -551,6 +566,10 @@ export default cB('tabs', `
     ]),
     cM('bottom', [
       cM('card-type', [
+        cB('tabs-scroll-padding', 'border-top: 1px solid var(--n-tab-border-color);'),
+        cE('prefix, suffix', `
+          border-top: 1px solid var(--n-tab-border-color);
+        `),
         cB('tabs-tab', `
           border-bottom-left-radius: var(--n-tab-border-radius);
           border-bottom-right-radius: var(--n-tab-border-radius);