fix(tabs): throws error without child, closes #809

tusen-ai · Mar 8, 2022 · 92e93b6 · 92e93b6
1 parent a2713b2
commit 92e93b6
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 7 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -6,6 +6,7 @@
 
 - Fix `n-cascader` arrow's loading animation is kept for too long time.
 - Fix `n-select` menu doesn't follow theme.
+- Fix `n-tabs` throws error without child, closes [#809](https://github.com/TuSimple/naive-ui/issues/809).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -6,6 +6,7 @@
 
 - 修复 `n-cascader` 节点箭头 loading 显示过久
 - 修复 `n-select` 菜单不随主题变化
+- 修复 `n-tabs` 不能没有子节点，关闭 [#809](https://github.com/TuSimple/naive-ui/issues/809)
 
 ### Feats
 

diff --git a/src/tabs/demos/zhCN/addable-debug.demo.vue b/src/tabs/demos/zhCN/addable-debug.demo.vue
@@ -0,0 +1,41 @@
+<markdown>
+# Addable debug
+</markdown>
+
+<template>
+  <n-tabs type="card" addable @add="handleAdd">
+    <n-tab
+      v-for="item in items"
+      :key="item.id"
+      :name="item.name"
+      :tab="item.name"
+    />
+  </n-tabs>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { NTabs, NTab } from 'naive-ui'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    NTabs,
+    NTab
+  },
+  setup () {
+    const itemsRef = ref<{ id: string; name: string }[]>([])
+    let i = 0
+    return {
+      handleAdd: () => {
+        i += 1
+        itemsRef.value.push({
+          id: `${i}`,
+          name: `name-${i}`
+        })
+      },
+      items: itemsRef.value
+    }
+  }
+})
+</script>
diff --git a/src/tabs/demos/zhCN/index.demo-entry.md b/src/tabs/demos/zhCN/index.demo-entry.md
@@ -21,6 +21,7 @@ line-debug.vue
 style-inherit-debug.vue
 shadow-debug.vue
 unkeyed-debug.vue
+addable-debug.vue
 ```
 
 ## API

diff --git a/src/tabs/src/Tab.tsx b/src/tabs/src/Tab.tsx
@@ -1,4 +1,4 @@
-import { h, defineComponent, inject, computed, mergeProps } from 'vue'
+import { h, defineComponent, inject, computed, mergeProps, Fragment } from 'vue'
 import { AddIcon } from '../../_internal/icons'
 import { NBaseClose, NBaseIcon } from '../../_internal'
 import { render, omit } from '../../_utils'
@@ -117,11 +117,16 @@ export default defineComponent({
         >
           <span class={`${clsPrefix}-tabs-tab__label`}>
             {internalAddable ? (
-              <NBaseIcon clsPrefix={clsPrefix}>
-                {{
-                  default: () => <AddIcon />
-                }}
-              </NBaseIcon>
+              <>
+                <div class={`${clsPrefix}-tabs-tab__height-placeholder`}>
+                  &nbsp;
+                </div>
+                <NBaseIcon clsPrefix={clsPrefix}>
+                  {{
+                    default: () => <AddIcon />
+                  }}
+                </NBaseIcon>
+              </>
             ) : defaultSlot ? (
               defaultSlot()
             ) : typeof mergedTab === 'object' ? (

diff --git a/src/tabs/src/Tabs.tsx b/src/tabs/src/Tabs.tsx
@@ -150,7 +150,7 @@ export default defineComponent({
       compitableValueRef.value ??
         props.defaultValue ??
         (slots.default
-          ? ((flatten((slots as any).default())[0] as any).props.name as
+          ? ((flatten((slots as any).default())[0] as any)?.props?.name as
               | string
               | number)
           : null)

diff --git a/src/tabs/src/styles/index.cssr.ts b/src/tabs/src/styles/index.cssr.ts
@@ -266,6 +266,10 @@ export default cB('tabs', `
           padding-right: 8px;
           font-size: 16px;
         `, [
+          cE('height-placeholder', `
+            width: 0;
+            font-size: var(--n-tab-font-size);
+          `),
           cNotM('disabled', [
             c('&:hover', `
               color: var(--n-tab-text-color-hover);