mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-24 12:45:18 +08:00
feat(collapse): add header-extra slot (#1064)
* feat(collapse): add 'header-extra' slot * feat(collapse): add test * feat(collapse): 优化样式 * feat(collapse): 优化样式 * feat(collapse): 优化样式 * feat: add test Co-authored-by: unknown <liyang@xiaoyouzi.com> Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
小魔王
GitHub
parent
286e29de37
commit
98ccbaba15
@ -11,6 +11,8 @@
|
||||
- Fix `n-cascader` click tag to delete the sub option in multi selection mode, and the tree option is not updated.
|
||||
- Fix `n-input` chinese input method not correct while mouse leave the input in `clearable` is true, closes [#905](https://github.com/TuSimple/naive-ui/issues/905).
|
||||
- Fix `n-description`'s warning caused by `v-if` that should not appear, closes [#1083](https://github.com/TuSimple/naive-ui/issues/1083).
|
||||
- Fix `n-layout`'s `sider-placement` doesn't work after build, closes [#978](https://github.com/TuSimple/naive-ui/issues/978).
|
||||
- Fix `n-input-number`'s `step` calculate error when the value is decimal, closes [#1007](https://github.com/TuSimple/naive-ui/issues/1007).
|
||||
|
||||
### Feats
|
||||
|
||||
@ -32,11 +34,7 @@
|
||||
- `n-pagination` export `PaginationInfo` type.
|
||||
- `n-data-table` export `DataTableCreateSummary` type.
|
||||
- `n-code` add `inline` prop, closes [#834](https://github.com/TuSimple/naive-ui/issues/834)
|
||||
|
||||
### Fixes
|
||||
|
||||
- Fix `n-layout`'s `sider-placement` doesn't work after build, closes [#978](https://github.com/TuSimple/naive-ui/issues/978).
|
||||
- Fix `n-input-number`'s `step` calculate error when the value is decimal, closes [#1007](https://github.com/TuSimple/naive-ui/issues/1007).
|
||||
- `n-collapse` add 'header-extra' slot, closes [#1046](https://github.com/TuSimple/naive-ui/issues/1046).
|
||||
|
||||
## 2.16.7 (2021-08-27)
|
||||
|
||||
|
||||
@ -11,6 +11,8 @@
|
||||
- 修复 `n-cascader` 多选模式下点击 tag 删除子选项未更新选中项
|
||||
- 修复 `n-input` 在 `clearable` 为 `true` 时鼠标离开输入框时中文输入法不正确，关闭 [#905](https://github.com/TuSimple/naive-ui/issues/905)
|
||||
- 修复 `n-description` 中因 `v-if` 导致的不该出现的警告，关闭 [#1083](https://github.com/TuSimple/naive-ui/issues/1083)
|
||||
- 修复 `n-layout` 的 `sider-placement` 属性在打包之后不生效，关闭 [#978](https://github.com/TuSimple/naive-ui/issues/978)
|
||||
- 修复 `n-input-number` 的 `step` 值为小数时计算错误，关闭 [#1007](https://github.com/TuSimple/naive-ui/issues/1007)
|
||||
|
||||
### Feats
|
||||
|
||||
@ -32,11 +34,7 @@
|
||||
- `n-pagination` 导出 `PaginationInfo` 类型
|
||||
- `n-data-table` 导出 `DataTableCreateSummary` 类型
|
||||
- `n-code` 新增 `inline` 属性, 关闭 [#834](https://github.com/TuSimple/naive-ui/issues/834)
|
||||
|
||||
### Fixes
|
||||
|
||||
- 修复 `n-layout` 的 `sider-placement` 属性在打包之后不生效，关闭 [#978](https://github.com/TuSimple/naive-ui/issues/978)
|
||||
- 修复 `n-input-number` 的 `step` 值为小数时计算错误，关闭 [#1007](https://github.com/TuSimple/naive-ui/issues/1007)
|
||||
- `n-collapse` 新增 slot: 'header-extra'，关闭 [#1046](https://github.com/TuSimple/naive-ui/issues/1046)
|
||||
|
||||
## 2.16.7 (2021-08-27)
|
||||
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
|
||||
```html
|
||||
<n-collapse>
|
||||
<template #header-extra>
|
||||
<n-icon><cash-icon /></n-icon>
|
||||
</template>
|
||||
<template #arrow>
|
||||
<n-icon>
|
||||
<cash-icon />
|
||||
|
||||
@ -52,4 +52,5 @@ default-expanded
|
||||
| --- | --- | --- |
|
||||
| default | `()` | The contents of the collapsible panel node. |
|
||||
| header | `()` | The content of the header of the collapsed panel node. |
|
||||
| header-extra | `()` | The extra content of the header of the collapsed panel node. |
|
||||
| arrow | `(options: { collapsed: boolean })` | The custom icon of the node header of the collapsible panel. |
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
|
||||
```html
|
||||
<n-collapse>
|
||||
<template #header-extra>
|
||||
<n-icon><cash-icon /></n-icon>
|
||||
</template>
|
||||
<template #arrow>
|
||||
<n-icon>
|
||||
<cash-icon />
|
||||
|
||||
@ -48,8 +48,9 @@ default-expanded
|
||||
|
||||
### Collapse Item Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ----------------------------------- | ---------------------------- |
|
||||
| default | `()` | 折叠面板节点的内容 |
|
||||
| header | `()` | 折叠面板节点头部的内容 |
|
||||
| arrow | `(options: { collapsed: boolean })` | 折叠面板节点头部的自定义图标 |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| default | `()` | 折叠面板节点的内容 |
|
||||
| header | `()` | 折叠面板节点头部的内容 |
|
||||
| header-extra | `()` | 折叠面板节点头部的额外内容 |
|
||||
| arrow | `(options: { collapsed: boolean })` | 折叠面板节点头部的自定义图标 |
|
||||
|
||||
@ -102,28 +102,42 @@ export default defineComponent({
|
||||
`${mergedClsPrefix}-collapse-item__header`,
|
||||
!collapsed && `${mergedClsPrefix}-collapse-item__header--active`
|
||||
]}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{arrowPlacement === 'right' && headerNode}
|
||||
<div class={`${mergedClsPrefix}-collapse-item-arrow`}>
|
||||
<div
|
||||
class={`${mergedClsPrefix}-collapse-item__header-main`}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{arrowPlacement === 'right' && headerNode}
|
||||
<div class={`${mergedClsPrefix}-collapse-item-arrow`}>
|
||||
{renderSlot(
|
||||
$slots.arrow
|
||||
? $slots
|
||||
: collapseSlots.arrow
|
||||
? collapseSlots
|
||||
: $slots,
|
||||
'arrow',
|
||||
{ collapsed: collapsed },
|
||||
() => [
|
||||
<NBaseIcon clsPrefix={mergedClsPrefix}>
|
||||
{{
|
||||
default: collapseSlots.expandIcon ?? (() => <ArrowIcon />)
|
||||
}}
|
||||
</NBaseIcon>
|
||||
]
|
||||
)}
|
||||
</div>
|
||||
{arrowPlacement === 'left' && headerNode}
|
||||
</div>
|
||||
<div class={`${mergedClsPrefix}-collapse-item__header-extra`}>
|
||||
{renderSlot(
|
||||
$slots.arrow
|
||||
$slots['header-extra']
|
||||
? $slots
|
||||
: collapseSlots.arrow
|
||||
: collapseSlots['header-extra']
|
||||
? collapseSlots
|
||||
: $slots,
|
||||
'arrow',
|
||||
{ collapsed: collapsed },
|
||||
() => [
|
||||
<NBaseIcon clsPrefix={mergedClsPrefix}>
|
||||
{{
|
||||
default: collapseSlots.expandIcon ?? (() => <ArrowIcon />)
|
||||
}}
|
||||
</NBaseIcon>
|
||||
]
|
||||
'header-extra'
|
||||
)}
|
||||
</div>
|
||||
{arrowPlacement === 'left' && headerNode}
|
||||
</div>
|
||||
<NCollapseItemContent
|
||||
clsPrefix={mergedClsPrefix}
|
||||
|
||||
@ -74,6 +74,23 @@ export default cB('collapse', {
|
||||
padding: 16px 0 0 0;
|
||||
color: var(--title-text-color);
|
||||
`, [
|
||||
cE('header-main', `
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
font-weight: var(--title-font-weight);
|
||||
transition: color .3s var(--bezier);
|
||||
flex: 1;
|
||||
color: var(--title-text-color);
|
||||
`),
|
||||
cE('header-extra', `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
transition: color .3s var(--bezier);
|
||||
color: var(--text-color);
|
||||
`),
|
||||
cB('collapse-item-arrow', `
|
||||
display: flex;
|
||||
transition:
|
||||
|
||||
@ -86,11 +86,32 @@ describe('n-collapse', () => {
|
||||
default: () => <NCollapseItem name="1"></NCollapseItem>
|
||||
}
|
||||
})
|
||||
const triggerNodeWrapper = wrapper.find('.n-collapse-item__header')
|
||||
const triggerNodeWrapper = wrapper.find('.n-collapse-item__header-main')
|
||||
await triggerNodeWrapper.trigger('click')
|
||||
expect(onClick).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should work with `slots` ', async () => {
|
||||
const wrapper = mount(NCollapse, {
|
||||
slots: {
|
||||
header: () => 'header',
|
||||
'header-extra': () => 'header-extra',
|
||||
default: () => <NCollapseItem name="1"></NCollapseItem>,
|
||||
arrow: () => 'arrow'
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.n-collapse-item__header-main').exists()).toBe(true)
|
||||
expect(wrapper.find('.n-collapse-item__header-main').text()).toBe('arrow')
|
||||
|
||||
expect(wrapper.find('.n-collapse-item__header-extra').exists()).toBe(true)
|
||||
expect(wrapper.find('.n-collapse-item__header-extra').text()).toBe(
|
||||
'header-extra'
|
||||
)
|
||||
|
||||
expect(wrapper.find('.n-collapse-item-arrow').exists()).toBe(true)
|
||||
expect(wrapper.find('.n-collapse-item-arrow').text()).toBe('arrow')
|
||||
})
|
||||
|
||||
it('props.defaultExpandedNames', async () => {
|
||||
let wrapper = mount(NCollapse, {
|
||||
props: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user