feat(tabs): add card type close trigger

CHANGELOG.en-US.md

@@ -15,7 +15,7 @@
 - Fix `n-anchor` can't activate link in the bottom of the page by click, closes [#7033](https://github.com/tusen-ai/naive-ui/issues/7033), closes [#6918](https://github.com/tusen-ai/naive-ui/issues/6918), [#6844](https://github.com/tusen-ai/naive-ui/issues/6844), [#6782](https://github.com/tusen-ai/naive-ui/issues/6782).
 - Fix `n-upload` component 'Non-function value encountered for default slot' warning.
 - Fix `n-input`'s `tabindex` property setting of `input-props` does not take effect.
-- Fix `n-tab` scroll shadow pseudo-class style conflicts in multi-layer tab nesting scenarios, closes [#6854](https://github.com/tusen-ai/naive-ui/issues/6854).
+- Fix `n-tabs` scroll shadow pseudo-class style conflicts in multi-layer `tabs` nesting scenarios, closes [#6854](https://github.com/tusen-ai/naive-ui/issues/6854).
 - Fix `n-menu`'s disabled style not working when parent node is set to `disabled` and child node has `type: "group"`, closes [#6792](https://github.com/tusen-ai/naive-ui/issues/6792)
 - Fix `n-input-group-label` not injecting `formItemInjectionKey`, causing the `size` property to fail, and close [#7066](https://github.com/tusen-ai/naive-ui/issues/7066)
 - Fix the issue of style confusion in `n-carousel` when there is only one image, close [#6476](https://github.com/tusen-ai/naive-ui/issues/6476)
@@ -25,6 +25,7 @@
 - `n-data-table`'s column adds `customNextSortOrder` attribute, closes [#6850](https://github.com/tusen-ai/naive-ui/issues/6850).
 - Add `n-avatar-group`'s corresponding generic component `NGAvatarGroup`, closes [#6909](https://github.com/tusen-ai/naive-ui/issues/6909).
 - `n-avatar-group` adds `size` prop.
+- `n-tabs` adds `close-trigger` prop, closes [#6920](https://github.com/tusen-ai/naive-ui/issues/6920).
 - `n-popover` supports RTL.
 - `n-tooltip` supports RTL.
 - `n-upload` supports RTL.

CHANGELOG.zh-CN.md

@@ -15,7 +15,7 @@
 - 修复 `n-anchor` 对页面底部的 link 无法通过点击激活，关闭 [#7033](https://github.com/tusen-ai/naive-ui/issues/7033)，关闭 [#6918](https://github.com/tusen-ai/naive-ui/issues/6918)、[#6844](https://github.com/tusen-ai/naive-ui/issues/6844)、[#6782](https://github.com/tusen-ai/naive-ui/issues/6782)
 - 修复 `n-upload` 组件 'Non-function value encountered for default slot' 警告
 - 修复 `n-input` 的 `input-props` 属性设置 `tabindex` 不生效的问题
-- 修复 `n-tab` 在多层 tab 嵌套的场景下，阴影的伪类样式冲突，关闭 [#6854](https://github.com/tusen-ai/naive-ui/issues/6854)
+- 修复 `n-tabs` 在多层 `tabs` 嵌套的场景下，阴影的伪类样式冲突，关闭 [#6854](https://github.com/tusen-ai/naive-ui/issues/6854)
 - 修复 `n-menu` 在父节点设置 `disabled`，子节点为 `type: "group"` 的禁用样式失效，关闭 [#6792](https://github.com/tusen-ai/naive-ui/issues/6792)
 - 修复 `n-input-group-label` 没有注入 `formItemInjectionKey`，导致 `size` 属性失效的问题，关闭 [#7066](https://github.com/tusen-ai/naive-ui/issues/7066)
 - 修复 `n-carousel` 只有一张图的情況下样式错乱的问题，关闭 [#6476](https://github.com/tusen-ai/naive-ui/issues/6476)
@@ -25,6 +25,7 @@
 - `n-data-table` 的列增加 `customNextSortOrder` 属性，关闭 [#6850](https://github.com/tusen-ai/naive-ui/issues/6850)
 - 新增 `n-avatar-group` 对应的泛型组件 `NGAvatarGroup`，关闭 [#6909](https://github.com/tusen-ai/naive-ui/issues/6909)
 - `n-avatar-group` 新增 `size` 属性
+- `n-tabs` 新增 `close-trigger` 属性，关闭 [#6920](https://github.com/tusen-ai/naive-ui/issues/6920)
 - `n-popover` 支持 RTL
 - `n-tooltip` 支持 RTL
 - `n-upload` 支持 RTL

src/tabs/demos/enUS/index.demo-entry.md

@@ -37,6 +37,7 @@ placement.vue
 | animated | `boolean` | `false` | Whether to activate tab switching animation. It won't have effect if `placement` is `'left'` or `'right'`. | 2.27.0 |
 | bar-width | `number` | `undefined` | The width of the tab bar. | 2.25.0 |
 | closable | `boolean` | `false` | Whether to allow the tag to be closed. Only works when the tag's `type` is `card`. |  |
+| close-trigger | `'hover' \| 'none'` | `'none'` | Trigger of `card` show close, Only works when the tag's `type` is `card`. `'none'` means always show it. | NEXT_VERSION |
 | default-value | `string \| number` | `undefined` | Default value in uncontrolled mode. |  |
 | justify-content | `'space-between' \| 'space-around' \| 'space-evenly' \| 'start' \| 'center' \| 'end'` | `undefined` | Justify-content value of `flex` layout. Only works with `'line'` or `'bar'` typed tabs. | `space-*` 2.29.1 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of tabs. |  |
@@ -61,6 +62,7 @@ placement.vue
 | Name | Type | Default | Description | Version |
 | --- | --- | --- | --- | --- |
 | closable | `boolean` | `false` | Whether to allow the tag to be closed. Only works when the tag's `type` is `card`. |  |
+| close-trigger | `'hover' \| 'none'` | `'none'` | Trigger of `card` show close, Only works when the tag's `type` is `card`. `'none'` means always show it. | NEXT_VERSION |
 | disabled | `boolean` | `false` | Whether to disable the tabs. |  |
 | display-directive | `'if' \| 'show' \| 'show:lazy'` | `'if'` | The directive to use in conditionally rendering. `if` will use `v-if` and `show` will use `v-show`. When use `show` directive, the status of tab won't be reset after tab changes. When use `show:lazy`, the display effect is the same as `show`, but the content will be lazily loaded. |  |
 | name | `string \| number` | `undefined` | Required, the name of the tab. |  |
@@ -69,11 +71,12 @@ placement.vue
 
 ### Tab Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| closable | `boolean` | `false` | Whether to allow the tag to be closed. Only works when the tag's `type` is `card`. |
-| disabled | `boolean` | `false` | Whether to disable. |
-| name | `string \| number` | `undefined` | Required, the name of the tab. |
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| closable | `boolean` | `false` | Whether to allow the tag to be closed. Only works when the tag's `type` is `card`. |  |
+| close-trigger | `'hover' \| 'none'` | `'none'` | Trigger of `card` show close, Only works when the tag's `type` is `card`. `'none'` means always show it. | NEXT_VERSION |
+| disabled | `boolean` | `false` | Whether to disable. |  |
+| name | `string \| number` | `undefined` | Required, the name of the tab. |  |
 
 ### Tabs Slots
 

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

@@ -6,12 +6,18 @@
 import type { TabsProps } from 'naive-ui'
 import { ref } from 'vue'
 
+const size = ref<NonNullable<TabsProps['size']>>('medium')
 const placement = ref<NonNullable<TabsProps['placement']>>('left')
 const type = ref<TabsProps['type']>('card')
 </script>
 
 <template>
   <n-space vertical>
+    <n-radio-group v-model:value="size">
+      <n-radio label="large" value="large" />
+      <n-radio label="medium" value="medium" />
+      <n-radio label="small" value="small" />
+    </n-radio-group>
     <n-radio-group v-model:value="placement">
       <n-radio label="top" value="top" />
       <n-radio label="bottom" value="bottom" />
@@ -33,6 +39,8 @@ const type = ref<TabsProps['type']>('card')
           ? { height: '240px' }
           : undefined
       "
+      closable
+      close-trigger="hover"
     >
       <n-tab-pane name="oasis" tab="Oasis">
         Wonderwall

src/tabs/demos/zhCN/index.demo-entry.md

@@ -46,6 +46,7 @@ modal-debug.vue
 | animated | `boolean` | `false` | 标签页切换是否使用动画，当 `placement` 为 `'left'` 或 `'right'` 时不生效 | 2.27.0 |
 | bar-width | `number` | `undefined` | 标签条的宽度 | 2.25.0 |
 | closable | `boolean` | `false` | 是否允许关闭标签，只在标签的 `type` 为 `card` 时生效 |  |
+| close-trigger | `'hover' \| 'none'` | `'none'` | 显示关闭按钮时机，只在标签的 `type` 为 `card` 时生效，`'none'` 表示一直显示 | NEXT_VERSION |
 | default-value | `string \| number` | `undefined` | 非受控模式下的默认值 |  |
 | justify-content | `'space-between' \| 'space-around' \| 'space-evenly' \| 'start' \| 'center' \| 'end'` | `undefined` | `flex` 布局下主轴的排列方式，只对 `'line'` 和 `'bar'` 类型生效 | `space-*` 2.29.1 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 标签页的尺寸 |  |
@@ -70,6 +71,7 @@ modal-debug.vue
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
 | closable | `boolean` | `false` | 是否允许关闭标签，只在标签的 `type` 为 `card` 时生效 |  |
+| close-trigger | `'hover' \| 'none'` | `'none'` | 显示关闭按钮时机，只在标签的 `type` 为 `card` 时生效，`'none'` 表示一直显示 | NEXT_VERSION |
 | disabled | `boolean` | `false` | 是否禁用 |  |
 | display-directive | `'if' \| 'show' \| 'show:lazy'` | `'if'` | 选择性渲染使用的指令，`if` 对应 `v-if`，`show` 对应 `v-show`，使用 `show` 的时候标签页状态切换后不会被重置，使用 `show:lazy` 的时候显示效果跟 `show` 一致，不过内容会进行延迟加载 |  |
 | name | `string \| number` | `undefined` | 必填，标签的名称 |  |
@@ -78,11 +80,12 @@ modal-debug.vue
 
 ### Tab Props
 
-| 名称 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| closable | `boolean` | `false` | 是否允许关闭标签，只在标签的 `type` 为 `card` 时生效 |
-| disabled | `boolean` | `false` | 是否禁用 |
-| name | `string \| number` | `undefined` | 必填，标签的名称 |
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| closable | `boolean` | `false` | 是否允许关闭标签，只在标签的 `type` 为 `card` 时生效 |  |
+| close-trigger | `'hover' \| 'none'` | `'none'` | 显示关闭按钮时机，只在标签的 `type` 为 `card` 时生效，`'none'` 表示一直显示 | NEXT_VERSION |
+| disabled | `boolean` | `false` | 是否禁用 |  |
+| name | `string \| number` | `undefined` | 必填，标签的名称 |  |
 
 ### Tabs Slots
 

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

@@ -6,12 +6,18 @@
 import type { TabsProps } from 'naive-ui'
 import { ref } from 'vue'
 
+const size = ref<NonNullable<TabsProps['size']>>('medium')
 const placement = ref<NonNullable<TabsProps['placement']>>('left')
 const type = ref<TabsProps['type']>('card')
 </script>
 
 <template>
   <n-space vertical>
+    <n-radio-group v-model:value="size">
+      <n-radio label="large" value="large" />
+      <n-radio label="medium" value="medium" />
+      <n-radio label="small" value="small" />
+    </n-radio-group>
     <n-radio-group v-model:value="placement">
       <n-radio label="top" value="top" />
       <n-radio label="bottom" value="bottom" />
@@ -29,11 +35,14 @@ const type = ref<TabsProps['type']>('card')
       :type="type"
       animated
       :placement="placement"
+      :size="size"
       :style="
         placement === 'left' || placement === 'right'
           ? { height: '240px' }
           : undefined
       "
+      closable
+      close-trigger="hover"
     >
       <template #prefix>
         Prefix

src/tabs/src/Tab.tsx

@@ -26,6 +26,7 @@ export default defineComponent({
       valueRef,
       typeRef,
       closableRef,
+      closeTriggerRef,
       tabStyleRef,
       addTabStyleRef,
       tabClassRef,
@@ -47,6 +48,12 @@ export default defineComponent({
           return closableRef.value
         return closable
       }),
+      mergedCloseTrigger: computed(() => {
+        const { closeTrigger } = props
+        if (closeTrigger === undefined)
+          return closeTriggerRef.value
+        return closeTrigger
+      }),
       style: tabStyleRef,
       addStyle: addTabStyleRef,
       tabClass: tabClassRef,
@@ -95,8 +102,10 @@ export default defineComponent({
       disabled,
       label,
       tab,
+      type,
       value,
       mergedClosable,
+      mergedCloseTrigger,
       trigger,
       $slots: { default: defaultSlot }
     } = this
@@ -116,7 +125,13 @@ export default defineComponent({
                 `${clsPrefix}-tabs-tab`,
                 value === name && `${clsPrefix}-tabs-tab--active`,
                 disabled && `${clsPrefix}-tabs-tab--disabled`,
-                mergedClosable && `${clsPrefix}-tabs-tab--closable`,
+                type === 'card'
+                && mergedClosable
+                && `${clsPrefix}-tabs-tab--closable`,
+                type === 'card'
+                && mergedClosable
+                && mergedCloseTrigger === 'hover'
+                && `${clsPrefix}-tabs-tab--hover`,
                 internalAddable && `${clsPrefix}-tabs-tab--addable`,
                 internalAddable ? this.addTabClass : this.tabClass
               ],

src/tabs/src/TabPane.tsx

@@ -30,6 +30,7 @@ export const tabPaneProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
+  closeTrigger: String as PropType<'hover' | 'none'>,
   tabProps: Object as PropType<HTMLAttributes>,
   /** @deprecated */
   label: [String, Number, Object, Function] as PropType<

src/tabs/src/Tabs.tsx

@@ -69,6 +69,10 @@ export const tabsProps = {
     default: 'bar'
   },
   closable: Boolean,
+  closeTrigger: {
+    type: String as PropType<'hover' | 'none'>,
+    default: 'none'
+  },
   justifyContent: String as PropType<
     | 'space-between'
     | 'space-around'
@@ -629,6 +633,7 @@ export default defineComponent({
       mergedClsPrefixRef,
       typeRef: toRef(props, 'type'),
       closableRef: toRef(props, 'closable'),
+      closeTriggerRef: toRef(props, 'closeTrigger'),
       valueRef: mergedValueRef,
       tabChangeIdRef,
       onBeforeLeaveRef: toRef(props, 'onBeforeLeave'),
@@ -712,6 +717,7 @@ export default defineComponent({
           [createKey('tabPaddingVertical', sizeType)]: tabPaddingVertical,
           [createKey('tabGap', sizeType)]: tabGap,
           [createKey('tabGap', `${sizeType}Vertical`)]: tabGapVertical,
+          [createKey('tabLabelOffset', `${size}Card`)]: tabCardLabelOffset,
           [createKey('tabTextColor', type)]: tabTextColor,
           [createKey('tabTextColorActive', type)]: tabTextColorActive,
           [createKey('tabTextColorHover', type)]: tabTextColorHover,
@@ -752,7 +758,8 @@ export default defineComponent({
         '--n-pane-padding-top': getPadding(panePadding, 'top'),
         '--n-pane-padding-bottom': getPadding(panePadding, 'bottom'),
         '--n-font-weight-strong': fontWeightStrong,
-        '--n-tab-color-segment': tabColorSegment
+        '--n-tab-color-segment': tabColorSegment,
+        '--n-tab-label-offset': tabCardLabelOffset
       }
     })
 

src/tabs/src/interface.ts

@@ -23,6 +23,7 @@ export interface TabsInjection {
   valueRef: Ref<string | number | null>
   typeRef: Ref<TabsType>
   closableRef: Ref<boolean>
+  closeTriggerRef: Ref<'hover' | 'none'>
   tabStyleRef: Ref<string | CSSProperties | undefined>
   tabClassRef: Ref<string | undefined>
   addTabClassRef: Ref<string | undefined>

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

@@ -295,12 +295,15 @@ export default cB('tabs', `
       margin-left: 6px;
       transition:
         background-color .3s var(--n-bezier),
-        color .3s var(--n-bezier);
+        color .3s var(--n-bezier),
+        opacity .3s var(--n-bezier),
+        transform .3s var(--n-bezier);
     `),
     cE('label', `
       display: flex;
       align-items: center;
       z-index: 1;
+      transition: transform .3s var(--n-bezier);
     `)
   ]),
   cB('tabs-bar', `
@@ -489,6 +492,30 @@ export default cB('tabs', `
         cM('disabled', 'color: var(--n-tab-text-color-disabled);')
       ]),
     ]),
+    cM('top, bottom', [
+      cM('card-type', [
+        cB('tabs-tab', [
+          cM('hover', [
+            cE('label', `
+            transform: translateX(var(--n-tab-label-offset));
+            `),
+            cE('close', `
+            opacity: 0;
+            transform: scale(0);
+            `),
+            c('&:hover', [
+              cE('label', `
+              transform: translateX(0);
+              `),
+              cE('close', `
+              opacity: 1;
+              transform: scale(1);
+              `)
+            ])
+          ]),
+        ])
+      ])
+    ]),
     cM('left, right', `
       flex-direction: column;  
     `, [
@@ -505,6 +532,22 @@ export default cB('tabs', `
           height: var(--n-tab-gap-vertical);
           width: 100%;
         `)
+      ]),
+      cM('card-type', [
+        cB('tabs-tab', [
+          cM('hover', [
+            cE('close', `
+            opacity: 0;
+            transform: scale(0);
+            `),
+            c('&:hover', [
+              cE('close', `
+              opacity: 1;
+              transform: scale(1);
+              `)
+            ])
+          ]),
+        ])
       ])
     ]),
     cM('top', [

src/tabs/styles/_common.ts

@@ -29,6 +29,9 @@ export default {
   tabGapSmallCard: '4px',
   tabGapMediumCard: '4px',
   tabGapLargeCard: '4px',
+  tabLabelOffsetSmallCard: '8px',
+  tabLabelOffsetMediumCard: '6px',
+  tabLabelOffsetLargeCard: '4px',
   tabGapSmallCardVertical: '4px',
   tabGapMediumCardVertical: '4px',
   tabGapLargeCardVertical: '4px',