feat(collapse-transition): add show-prop, deprecate collapsed prop, closes #1407

CHANGELOG.en-US.md

@@ -1,8 +1,12 @@
 # CHANGELOG
 
+### Breaking Changes
+
+- `n-collapsed-transition`'s `collapsed` prop is deprecated, please use `show` instead, closes [#1407](https://github.com/TuSimple/naive-ui/issues/1407).
+
 ## 2.19.11 (2021-10-21)
 
-## Fixes
+### Fixes
 
 - Fix `n-upload`'s file can't be removed when file count limit is reached, closes [#1401](https://github.com/TuSimple/naive-ui/issues/1401).
 

CHANGELOG.zh-CN.md

@@ -1,8 +1,12 @@
 # CHANGELOG
 
+### Breaking Changes
+
+- `n-collapsed-transition` 的 `collapsed` 属性被废弃，请使用 `show` 属性代替，关闭 [#1407](https://github.com/TuSimple/naive-ui/issues/1407)
+
 ## 2.19.11 (2021-10-21)
 
-## Fixes
+### Fixes
 
 - 修复 `n-upload` 在达到最大文件数量后无法删除文件，关闭 [#1401](https://github.com/TuSimple/naive-ui/issues/1401)
 

src/collapse-transition/demos/enUS/basic.demo.md

@@ -2,11 +2,11 @@
 
 ```html
 <n-space vertical>
-  <n-switch v-model:value="collapsed">
+  <n-switch v-model:value="show">
-    <template #checked>Collapsed</template>
+    <template #checked>Show</template>
-    <template #unchecked>Expanded</template>
+    <template #unchecked>Hide</template>
   </n-switch>
-  <n-collapse-transition :collapsed="collapsed">
+  <n-collapse-transition :show="show">
     "There is no single development, in either technology or management
     technique, which by itself promises even one order of magnitude [tenfold]
     improvement within a decade in productivity, in reliability, in simplicity."
@@ -20,7 +20,7 @@ import { defineComponent, ref } from 'vue'
 export default defineComponent({
   setup () {
     return {
-      collapsed: ref(true)
+      show: ref(true)
     }
   }
 })

src/collapse-transition/demos/enUS/index.demo-entry.md

@@ -15,6 +15,7 @@ basic
 | Name   | Type      | Default | Description                                 |
 | ------ | --------- | ------- | ------------------------------------------- |
 | appear | `boolean` | `false` | Whether to play animation on first mounted. |
+| show   | `boolean` | `true`  | Whether to show content.                    |
 
 ### CollapseTransition Slots
 

src/collapse-transition/demos/zhCN/basic.demo.md

@@ -2,11 +2,11 @@
 
 ```html
 <n-space vertical>
-  <n-switch v-model:value="collapsed">
+  <n-switch v-model:value="show">
     <template #checked>展开</template>
     <template #unchecked>折叠</template>
   </n-switch>
-  <n-collapse-transition :collapsed="collapsed">
+  <n-collapse-transition :show="show">
     感知度，方法论，组合拳，引爆点，点线面，精细化，差异化，平台化，结构化，影响力，耦合性，便捷性，一致性，端到端，短平快，护城河，体验感，颗粒度
   </n-collapse-transition>
 </n-space>
@@ -18,7 +18,7 @@ import { defineComponent, ref } from 'vue'
 export default defineComponent({
   setup () {
     return {
-      collapsed: ref(true)
+      show: ref(true)
     }
   }
 })

src/collapse-transition/demos/zhCN/index.demo-entry.md

@@ -15,6 +15,7 @@ basic
 | 名称   | 类型      | 默认值  | 说明                     |
 | ------ | --------- | ------- | ------------------------ |
 | appear | `boolean` | `false` | 是否在首次出现时播放动画 |
+| show   | `boolean` | `true`  | 是否展示内容             |
 
 ### CollapseTransition Slots
 

src/collapse-transition/src/CollapseTransition.tsx

@@ -1,7 +1,15 @@
-import { computed, h, defineComponent, mergeProps } from 'vue'
+import {
+  computed,
+  h,
+  defineComponent,
+  mergeProps,
+  PropType,
+  watchEffect
+} from 'vue'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import { ExtractPublicPropTypes } from '../../_utils'
+import type { ExtractPublicPropTypes } from '../../_utils'
+import { warnOnce } from '../../_utils'
 import type { CollapseTransitionTheme } from '../styles'
 import style from './styles/index.cssr'
 import { collapseTransitionLight } from '../styles'
@@ -9,8 +17,19 @@ import { NFadeInExpandTransition } from '../../_internal'
 
 const collapseProps = {
   ...(useTheme.props as ThemeProps<CollapseTransitionTheme>),
-  collapsed: Boolean,
+  show: {
-  appear: Boolean
+    type: Boolean,
+    default: true
+  },
+  appear: Boolean,
+  // The collapsed is implemented will mistake, collapsed=true would make it show
+  // However there's no possibility to change so I just let it deprecated and use
+  // `show` prop instead.
+  /** @deprecated */
+  collapsed: {
+    type: Boolean as PropType<boolean | undefined>,
+    default: undefined
+  }
 } as const
 
 export type CollapseTransitionProps = ExtractPublicPropTypes<
@@ -22,6 +41,16 @@ export default defineComponent({
   props: collapseProps,
   inheritAttrs: false,
   setup (props) {
+    if (__DEV__) {
+      watchEffect(() => {
+        if (props.collapsed !== undefined) {
+          warnOnce(
+            'collapse-transition',
+            '`collapsed` is deprecated, please use `show` instead'
+          )
+        }
+      })
+    }
     const { mergedClsPrefixRef } = useConfig(props)
     const mergedThemeRef = useTheme(
       'CollapseTransition',
@@ -30,7 +59,15 @@ export default defineComponent({
       collapseTransitionLight,
       props
     )
+    const mergedShowRef = computed(() => {
+      if (props.collapsed !== undefined) {
+        // No mistake, it's implemented with error at first, just keep it here
+        return props.collapsed
+      }
+      return props.show
+    })
     return {
+      mergedShow: mergedShowRef,
       mergedClsPrefix: mergedClsPrefixRef,
       cssVars: computed(() => {
         const {
@@ -47,7 +84,7 @@ export default defineComponent({
       <NFadeInExpandTransition appear={this.appear}>
         {{
           default: () =>
-            this.collapsed
+            this.mergedShow
               ? h(
                 'div', // Don't use jsx since it would cause useless spread in each rendering
                 mergeProps(