refactor(collapse): tsx

src/collapse/index.ts

@@ -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'

src/collapse/src/Collapse.ts

@@ -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) {

src/collapse/src/CollapseItem.tsx

@@ -1,43 +1,13 @@
-<template>
+import {
-  <div
+  h,
-    class="n-collapse-item"
+  toRef,
-    :class="{
+  defineComponent,
-      'n-collapse-item--active': !collapsed,
+  PropType,
-      [`n-collapse-item--${arrowPlacement}-arrow-placement`]: true
+  inject,
-    }"
+  computed,
-  >
+  renderSlot,
-    <div
+  VNode
-      class="n-collapse-item__header"
+} from 'vue'
-      :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 { 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>

src/collapse/src/CollapseItemContent.ts

@@ -44,9 +44,7 @@ export default defineComponent({
                   {
                     class: 'n-collapse-item__content-inner'
                   },
-                  {
+                  this.$slots
-                    ...this.$slots
-                  }
                 )
               ]
             ),