mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
refactor(collapse): tsx
This commit is contained in:
parent
3d6f10113a
commit
2d1a8ab4ee
@ -1,3 +1,3 @@
|
||||
/* istanbul ignore file */
|
||||
export { default as NCollapse } from './src/Collapse'
|
||||
export { default as NCollapseItem } from './src/CollapseItem.vue'
|
||||
export { default as NCollapseItem } from './src/CollapseItem'
|
||||
|
@ -12,7 +12,6 @@ import { useTheme } from '../../_mixins'
|
||||
import type { ThemeProps } from '../../_mixins'
|
||||
import { call, warn } from '../../_utils'
|
||||
import { collapseLight, CollapseTheme } from '../styles'
|
||||
import type { CollapseThemeVars } from '../styles'
|
||||
import style from './styles/index.cssr'
|
||||
|
||||
export interface NCollapseInjection {
|
||||
@ -20,7 +19,7 @@ export interface NCollapseInjection {
|
||||
displayDirective: 'if' | 'show'
|
||||
expandedNames: string | string[]
|
||||
collectedItemNames: string[]
|
||||
toggleItem(collapse: boolean, name: string, event: MouseEvent): void
|
||||
toggleItem: (collapse: boolean, name: string, event: MouseEvent) => void
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
@ -69,14 +68,14 @@ export default defineComponent({
|
||||
},
|
||||
setup (props) {
|
||||
const collectedItemNames: string[] = []
|
||||
const themeRef = useTheme<CollapseThemeVars>(
|
||||
const themeRef = useTheme(
|
||||
'Collapse',
|
||||
'Collapse',
|
||||
style,
|
||||
collapseLight,
|
||||
props
|
||||
)
|
||||
function doUpdateExpandedNames (names: string[]) {
|
||||
function doUpdateExpandedNames (names: string[]): void {
|
||||
const {
|
||||
'onUpdate:expandedNames': updateExpandedNames,
|
||||
onExpandedNamesChange
|
||||
@ -88,11 +87,15 @@ export default defineComponent({
|
||||
name: string
|
||||
expanded: boolean
|
||||
event: MouseEvent
|
||||
}) {
|
||||
}): void {
|
||||
const { onItemHeaderClick } = props
|
||||
if (onItemHeaderClick) call(onItemHeaderClick, info)
|
||||
}
|
||||
function toggleItem (collapse: boolean, name: string, event: MouseEvent) {
|
||||
function toggleItem (
|
||||
collapse: boolean,
|
||||
name: string,
|
||||
event: MouseEvent
|
||||
): void {
|
||||
const { accordion, expandedNames } = props
|
||||
if (accordion) {
|
||||
if (collapse) {
|
||||
|
@ -1,43 +1,13 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-collapse-item"
|
||||
:class="{
|
||||
'n-collapse-item--active': !collapsed,
|
||||
[`n-collapse-item--${arrowPlacement}-arrow-placement`]: true
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="n-collapse-item__header"
|
||||
:class="{
|
||||
'n-collapse-item__header--active': !collapsed
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<slot v-if="arrowPlacement === 'right'" name="header">
|
||||
{{ title }}
|
||||
</slot>
|
||||
<div class="n-collapse-item-arrow">
|
||||
<slot name="arrow" :collapsed="collapsed">
|
||||
<n-base-icon>
|
||||
<arrow-icon />
|
||||
</n-base-icon>
|
||||
</slot>
|
||||
</div>
|
||||
<slot v-if="arrowPlacement === 'left'" name="header">
|
||||
{{ title }}
|
||||
</slot>
|
||||
</div>
|
||||
<n-collapse-item-content
|
||||
:display-directive="mergedDisplayDirective"
|
||||
:show="!collapsed"
|
||||
>
|
||||
<slot />
|
||||
</n-collapse-item-content>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRef, defineComponent, PropType, inject, computed } from 'vue'
|
||||
import {
|
||||
h,
|
||||
toRef,
|
||||
defineComponent,
|
||||
PropType,
|
||||
inject,
|
||||
computed,
|
||||
renderSlot,
|
||||
VNode
|
||||
} from 'vue'
|
||||
import { ChevronRightIcon as ArrowIcon } from '../../_base/icons'
|
||||
import { NBaseIcon } from '../../_base'
|
||||
import { useInjectionCollection } from '../../_utils/composable'
|
||||
@ -46,11 +16,6 @@ import { NCollapseInjection } from './Collapse'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CollapseItem',
|
||||
components: {
|
||||
NBaseIcon,
|
||||
NCollapseItemContent,
|
||||
ArrowIcon
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@ -103,6 +68,48 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const { $slots, arrowPlacement, collapsed } = this
|
||||
const headerNode = renderSlot($slots, 'header', undefined, () => [
|
||||
this.title
|
||||
])
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
'n-collapse-item',
|
||||
`n-collapse-item--${arrowPlacement}-arrow-placement`,
|
||||
{
|
||||
'n-collapse-item--active': !collapsed
|
||||
}
|
||||
]}
|
||||
>
|
||||
<div
|
||||
class={[
|
||||
'n-collapse-item__header',
|
||||
{
|
||||
'n-collapse-item__header--active': !collapsed
|
||||
}
|
||||
]}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{arrowPlacement === 'right' && headerNode}
|
||||
<div class="n-collapse-item-arrow">
|
||||
{renderSlot($slots, 'arrow', { collapsed: collapsed }, () => [
|
||||
(
|
||||
<NBaseIcon>{{ default: () => <ArrowIcon /> }}</NBaseIcon>
|
||||
) as VNode
|
||||
])}
|
||||
</div>
|
||||
{arrowPlacement === 'left' && headerNode}
|
||||
</div>
|
||||
<NCollapseItemContent
|
||||
displayDirective={this.mergedDisplayDirective}
|
||||
show={!collapsed}
|
||||
>
|
||||
{$slots}
|
||||
</NCollapseItemContent>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
</script>
|
@ -44,9 +44,7 @@ export default defineComponent({
|
||||
{
|
||||
class: 'n-collapse-item__content-inner'
|
||||
},
|
||||
{
|
||||
...this.$slots
|
||||
}
|
||||
this.$slots
|
||||
)
|
||||
]
|
||||
),
|
||||
|
Loading…
Reference in New Issue
Block a user