refactor(collapse-transition): clean code (#1397)

packages/varlet-ui/src/collapse-item/CollapseItem.vue

@@ -5,7 +5,7 @@
   >
     <div :class="classes(n('shadow'), formatElevation(elevation, 2))"></div>
     <div :class="n('header')" @click="toggle">
-      <div :class="n('header-title')">
+      <div :class="n('header-title')" v-if="$slots.title || title">
         <slot name="title">{{ title }}</slot>
       </div>
       <div :class="n('header-icon')">

packages/varlet-ui/src/collapse-transition/CollapseTransition.vue

@@ -1,14 +1,12 @@
 <template>
-  <div :class="n()">
-    <div
-      :class="n('content')"
-      v-show="showContent"
-      ref="contentEl"
-      @transitionend="handleTransitionEnd"
-      @transitionstart="handleTransitionStart"
-    >
-      <slot />
-    </div>
+  <div
+    :class="n('content')"
+    v-show="showContent"
+    ref="contentEl"
+    @transitionend="handleTransitionEnd"
+    @transitionstart="handleTransitionStart"
+  >
+    <slot />
   </div>
 </template>
 
@@ -18,7 +16,7 @@ import { createNamespace } from '../utils/components'
 import { props } from './props'
 import { useCollapseTransition } from './useCollapseTransition'
 
-const { name, n, classes } = createNamespace('collapse-transition')
+const { name, n } = createNamespace('collapse-transition')
 
 export default defineComponent({
   name,
@@ -38,7 +36,6 @@ export default defineComponent({
       showContent,
       contentEl,
       n,
-      classes,
       handleTransitionEnd,
       handleTransitionStart,
     }
@@ -47,5 +44,6 @@ export default defineComponent({
 </script>
 
 <style lang="less">
+@import '../styles/common';
 @import './collapseTransition';
 </style>

packages/varlet-ui/src/collapse-transition/__tests__/index.spec.js

@@ -42,5 +42,7 @@ describe('test collapseTransition props', () => {
     await delay(200)
     expect(wrapper.vm.expand).toBeFalsy()
     expect(wrapper.find('.var-collapse-transition__content').attributes('style')).toBe('display: none;')
+
+    wrapper.unmount()
   })
 })

packages/varlet-ui/src/collapse-transition/docs/en-US.md

@@ -29,10 +29,10 @@ const expand = ref(true)
 
 | Prop       | Description                                         | Type        | Default   |
 | ---------- | --------------------------------------------------- | ----------- | --------- |
-| `expand` | Status of whether content is collapsed or expanded. | _boolean_ | `false` |
+| `expand` | Collapse or expand content | _boolean_ | `false` |
 
 ### Slots
 
 | Name        | Description                                 | SlotProps |
 | ----------- | ------------------------------------------- | --------- |
-| `default` | The content inside the collapse transition. | `-`     |
+| `default` | Collapsed or expanded content | `-`     |

packages/varlet-ui/src/collapse-transition/docs/zh-CN.md

@@ -29,10 +29,10 @@ const expand = ref(true)
 
 | 参数       | 说明                     | 类型        | 默认值    |
 | ---------- | ------------------------ | ----------- | --------- |
-| `expand` | 控制内容状态为折叠或展开 | *boolean* | `false` |
+| `expand` | 折叠或展开内容 | _boolean_ | `false` |
 
 ### 插槽
 
 | 名称        | 说明       | 参数 |
 | ----------- | ---------- | ---- |
-| `default` | 折叠的内容 | -    |
+| `default` | 折叠或展开的内容 | `-` |

packages/varlet-ui/src/collapse-transition/example/index.vue

@@ -1,11 +1,13 @@
 <script setup>
-import { AppType, watchLang } from '@varlet/cli/client'
+import { Themes } from '@varlet/ui'
+import { AppType, watchLang, watchDarkMode } from '@varlet/cli/client'
 import { ref } from 'vue'
 import { pack, use } from './locale'
 
-watchLang(use)
-
 const expand = ref(true)
+
+watchLang(use)
+watchDarkMode(Themes.dark)
 </script>
 
 <template>

packages/varlet-ui/src/collapse-transition/example/locale/en-US.ts

@@ -1,6 +1,5 @@
 export default {
   basicUsage: 'Basic Usage',
-  textContent: `
-    Do not go gentle into that good night, Old age should burn and rave at close of day; Rage, rage against the dying of the light. Though wise men at their end know dark is right, Because their words had forked no lightning they Do not go gentle into that good night. Good men, the last wave by, crying how bright Their frail deeds might have danced in a green bay, Rage, rage against the dying of the light.
-  `,
+  textContent:
+    'Do not go gentle into that good night, Old age should burn and rave at close of day; Rage, rage against the dying of the light. Though wise men at their end know dark is right, Because their words had forked no lightning they Do not go gentle into that good night. Good men, the last wave by, crying how bright Their frail deeds might have danced in a green bay, Rage, rage against the dying of the light.',
 }

packages/varlet-ui/src/collapse-transition/example/locale/zh-CN.ts

@@ -1,6 +1,5 @@
 export default {
   basicUsage: '基本使用',
-  textContent: `
-    不要温和地走进那良夜，老年应当在日暮时燃烧咆哮；怒斥，怒斥光明的消逝。虽然智慧的人临终时懂得黑暗有理，因为他们的话没有迸发出闪电，他们 也并不温和地走进那个良夜。善良的人，当最后一浪过去，高呼他们脆弱的善行 可能曾会多么光辉地在绿色的海湾里舞蹈，怒斥，怒斥光明的消逝。
-  `,
+  textContent:
+    '不要温和地走进那良夜，老年应当在日暮时燃烧咆哮；怒斥，怒斥光明的消逝。虽然智慧的人临终时懂得黑暗有理，因为他们的话没有迸发出闪电，他们 也并不温和地走进那个良夜。善良的人，当最后一浪过去，高呼他们脆弱的善行 可能曾会多么光辉地在绿色的海湾里舞蹈，怒斥，怒斥光明的消逝。',
 }

packages/varlet-ui/src/collapse-transition/useCollapseTransition.ts

@@ -1,8 +1,8 @@
 import { raf, doubleRaf } from '@varlet/shared'
-import { ComputedRef, Ref, nextTick, watch } from 'vue'
+import { type ComputedRef, type Ref, nextTick, watch } from 'vue'
 
 export interface UseCollapseTransitionOptions {
-  contentEl: Ref<HTMLDivElement | null>
+  contentEl: Ref<HTMLElement | null>
   showContent: Ref<boolean>
   expand: Ref | ComputedRef
 }
@@ -81,8 +81,6 @@ export function useCollapseTransition(options: UseCollapseTransitionOptions) {
   }
 
   return {
-    open,
-    close,
     handleTransitionEnd,
     handleTransitionStart,
   }