refactor(tabs): rename display-directive show to show:lazy

CHANGELOG.en-US.md

@@ -24,7 +24,7 @@
 
 - `n-tabs` add `on-before-leave` prop, closes [#1337](https://github.com/TuSimple/naive-ui/issues/1337).
 - `n-color-picker` add `show-preview` prop, closes [#1281](https://github.com/TuSimple/naive-ui/issues/1281).
-- `n-tab-pane`'s `display-directive` prop support `lazyload` option, closes [#1374](https://github.com/TuSimple/naive-ui/issues/1374).
+- `n-tab-pane`'s `display-directive` prop support `show:lazy` option, closes [#1374](https://github.com/TuSimple/naive-ui/issues/1374).
 
 ## 2.19.9 (2021-10-18)
 

CHANGELOG.zh-CN.md

@@ -13,6 +13,7 @@
 
 - `n-data-table` 优化底层渲染的逻辑，提升组件性能
 - `n-date-picker` 的 `shortcuts` 属性支持传入回调函数
+- `n-tab-pane` 属性 `display-directive` 支持 `show:lazy` 选项，关闭 [#1374](https://github.com/TuSimple/naive-ui/issues/1374)
 
 ## 2.19.11 (2021-10-21)
 
@@ -24,7 +25,6 @@
 
 - `n-tabs` 新增 `on-before-leave` 属性，关闭 [#1337](https://github.com/TuSimple/naive-ui/issues/1337)
 - `n-color-picker` 新增 `show-preview` 属性，关闭 [#1281](https://github.com/TuSimple/naive-ui/issues/1281)
-- `n-tab-pane` 属性 `display-directive` 支持 `lazyload` 选项，关闭 [#1374](https://github.com/TuSimple/naive-ui/issues/1374)
 
 ## 2.19.9 (2021-10-18)
 

src/tabs/demos/enUS/display-directive.demo.md

@@ -1,6 +1,6 @@
 # Display directive
 
-You can set tab-panel's display directive to `if` or `show`. When use `show`, the tab-panel's content won't be reset after tab changes. When use `lazyload`, the display effect is the same as `show`, but the content will be lazily loaded.
+You can set tab-panel's display directive to `if` or `show`. When use `show`, the tab-panel's content won't be reset after tab changes. When use `show:lazy`, the display effect is the same as `show`, but the content will be lazily loaded.
 
 ```html
 <n-tabs default-value="show">
@@ -10,8 +10,8 @@ You can set tab-panel's display directive to `if` or `show`. When use `show`, th
   <n-tab-pane name="if" display-directive="if" tab="if">
     <if-input />
   </n-tab-pane>
-  <n-tab-pane name="lazyload" display-directive="lazyload" tab="lazyload">
-    <lazyload-input />
+  <n-tab-pane name="show:lazy" display-directive="show:lazy" tab="show:lazy">
+    <show-lazy-input />
   </n-tab-pane>
 </n-tabs>
 ```
@@ -36,10 +36,11 @@ const ifInput = defineComponent({
   }
 })
 
-const lazyloadInput = defineComponent({
+const showLazyInput = defineComponent({
   render () {
     return h(NInput, {
-      placeholder: 'I will delay loading, and my content will not be reset afterwards'
+      placeholder:
+        'I will delay loading, and my content will not be reset afterwards'
     })
   }
 })
@@ -48,7 +49,7 @@ export default defineComponent({
   components: {
     showInput,
     ifInput,
-    lazyloadInput
+    showLazyInput
   }
 })
 ```

src/tabs/demos/enUS/index.demo-entry.md

@@ -44,7 +44,7 @@ before-leave
 | --- | --- | --- | --- |
 | closable | `boolean` | `false` | Whether to allow the tag to be closed. Only works when the tag's `type` is `card`. |
 | disabled | `boolean` | `false` | Whether to disable. |
-| display-directive | `'if' \| 'show'` \| 'lazyload' | `'if'` | The directive to use in conditionally rendering. `if` will use `v-if` and `show` will use `v-show`. When use `show` directive, the status of tab won't be reset after tab changes. When use `lazyload`, the display effect is the same as `show`, but the content will be lazily loaded. |
+| display-directive | `'if' \| 'show'` \| 'show:lazy' | `'if'` | The directive to use in conditionally rendering. `if` will use `v-if` and `show` will use `v-show`. When use `show` directive, the status of tab won't be reset after tab changes. When use `show:lazy`, the display effect is the same as `show`, but the content will be lazily loaded. |
 | tab | `string \| VNode \| () => VNodeChild` | `undefined` | Tab label. |
 | name | `string \| number` | `undefined` | Required, the name of the tab. |
 

src/tabs/demos/zhCN/display-directive.demo.md

@@ -1,6 +1,6 @@
 # 展示指令
 
-可以制定标签页展示的指令为 `if` 、 `show` 或者 `lazyload` 。使用 `show` 的时候标签页内容不会随着切换重置。使用 `lazyload` 的时候显示效果跟 `show` 一致，不过内容会进行延迟加载。
+可以制定标签页展示的指令为 `if` 、 `show` 或者 `show:lazy` 。使用 `show` 的时候标签页内容不会随着切换重置。使用 `show:lazy` 的时候显示效果跟 `show` 一致，不过内容会进行延迟加载。
 
 ```html
 <n-tabs default-value="show">
@@ -10,8 +10,8 @@
   <n-tab-pane name="if" display-directive="if" tab="if">
     <if-input />
   </n-tab-pane>
-  <n-tab-pane name="lazyload" display-directive="lazyload" tab="lazyload">
-    <lazyload-input />
+  <n-tab-pane name="show:lazy" display-directive="show:lazy" tab="show:lazy">
+    <show-lazy-input />
   </n-tab-pane>
 </n-tabs>
 ```
@@ -36,7 +36,7 @@ const ifInput = defineComponent({
   }
 })
 
-const lazyloadInput = defineComponent({
+const showLazyInput = defineComponent({
   render () {
     return h(NInput, {
       placeholder: '我会延迟加载，并且之后我的内容不会被重置'
@@ -48,7 +48,7 @@ export default defineComponent({
   components: {
     showInput,
     ifInput,
-    lazyloadInput
+    showLazyInput
   }
 })
 ```

src/tabs/demos/zhCN/index.demo-entry.md

@@ -46,7 +46,7 @@ before-leave
 | --- | --- | --- | --- |
 | closable | `boolean` | `false` | 是否允许关闭标签，只在标签的 `type` 为 `card` 时生效 |
 | disabled | `boolean` | `false` | 是否禁用 |
-| display-directive | `'if' \| 'show' \| 'lazyload'` | `'if'` | 选择性渲染使用的指令，`if` 对应 `v-if`，`show` 对应 `v-show`，使用 `show` 的时候标签页状态切换后不会被重置，使用 `lazyload` 的时候显示效果跟 `show` 一致，不过内容会进行延迟加载 |
+| display-directive | `'if' \| 'show' \| 'show:lazy'` | `'if'` | 选择性渲染使用的指令，`if` 对应 `v-if`，`show` 对应 `v-show`，使用 `show` 的时候标签页状态切换后不会被重置，使用 `show:lazy` 的时候显示效果跟 `show` 一致，不过内容会进行延迟加载 |
 | tab | `string \| VNode \| () => VNodeChild` | `undefined` | 标签的 `tab` |
 | name | `string \| number` | `undefined` | 必填，标签的名称 |
 

src/tabs/src/TabPane.tsx

@@ -26,7 +26,7 @@ export const tabPaneProps = {
   },
   disabled: Boolean,
   displayDirective: {
-    type: String as PropType<'if' | 'show' | 'lazyload'>,
+    type: String as PropType<'if' | 'show' | 'show:lazy'>,
     default: 'if'
   },
   closable: {

src/tabs/src/Tabs.tsx

@@ -39,7 +39,7 @@ import Tab from './Tab'
 import { tabPaneProps } from './TabPane'
 
 type TabPaneProps = ExtractPropTypes<typeof tabPaneProps> & {
-  'display-directive': 'if' | 'show' | 'lazyload'
+  'display-directive': 'if' | 'show' | 'show:lazy'
 }
 
 const tabsProps = {
@@ -571,7 +571,7 @@ function filterMapTabPanes (
     if (
       show ||
       matchDisplayDirective('show') ||
-      (matchDisplayDirective('lazyload') && renderedNames.has(name))
+      (matchDisplayDirective('show:lazy') && renderedNames.has(name))
     ) {
       if (!renderedNames.has(name)) {
         renderedNames.add(name)

src/tabs/tests/Tabs.spec.tsx

@@ -99,10 +99,10 @@ describe('n-tabs', () => {
   })
 
   it('should work with `display-directive` prop', async () => {
-    const displayDirectives: Array<'show' | 'if' | 'lazyload'> = [
+    const displayDirectives: Array<'show' | 'if' | 'show:lazy'> = [
       'show',
       'if',
-      'lazyload'
+      'show:lazy'
     ]
     const wrapper = mount(NTabs, {
       props: { value: 'show' },
@@ -122,14 +122,14 @@ describe('n-tabs', () => {
     await wrapper.setProps({ value: 'if' })
     expect(wrapper.find('.test-show').exists()).toEqual(true)
     expect(wrapper.find('.test-if').exists()).toEqual(true)
-    expect(wrapper.find('.test-lazyload').exists()).toEqual(false)
-    await wrapper.setProps({ value: 'lazyload' })
+    expect(wrapper.find('.test-show:lazy').exists()).toEqual(false)
+    await wrapper.setProps({ value: 'show:lazy' })
     expect(wrapper.find('.test-show').exists()).toEqual(true)
     expect(wrapper.find('.test-if').exists()).toEqual(false)
-    expect(wrapper.find('.test-lazyload').exists()).toEqual(true)
+    expect(wrapper.find('.test-show:lazy').exists()).toEqual(true)
     await wrapper.setProps({ value: 'show' })
     expect(wrapper.find('.test-show').exists()).toEqual(true)
     expect(wrapper.find('.test-if').exists()).toEqual(false)
-    expect(wrapper.find('.test-lazyload').exists()).toEqual(true)
+    expect(wrapper.find('.test-show:lazy').exists()).toEqual(true)
   })
 })