Merge pull request #883 from TuSimple/docs

Docs

CHANGELOG.zh-CN.md

@@ -165,7 +165,7 @@
 
 - 修复 `n-space` 中 `display: grid` 的元素显示不正确，关闭 `https://github.com/TuSimple/naive-ui/issues/546`
 - 修复 `n-dropdown` 的 `render-label` 属性对 group 类型 option 失效
-- 修复 `n-datatable` 的 `scroll-x` 属性设置后 table 内容宽度未沾满容器宽度，关闭 [#518](https://github.com/TuSimple/naive-ui/issues/518)
+- 修复 `n-datatable` 的 `scroll-x` 属性设置后 table 内容宽度未占满容器宽度，关闭 [#518](https://github.com/TuSimple/naive-ui/issues/518)
 - 修复 `n-descriptions` 无法使用 `v-for` 的子元素
 - 修复 `n-dialog` `positive-text` 为空仍然显示按钮，关闭 [#549](https://github.com/TuSimple/naive-ui/issues/549)
 - 修复 `n-pagination` `PaginationInfo` 的 `endIndex` 数据错误，关闭 [#584](https://github.com/TuSimple/naive-ui/issues/584)

demo/pages/home/Footer.vue

@@ -20,6 +20,14 @@
         <n-button text tag="a" target="_blank" href="https://www.xicons.org">{{
           t('icons')
         }}</n-button>
+        <n-button
+          text
+          tag="a"
+          target="_blank"
+          href="https://github.com/jekip/naive-ui-admin"
+        >
+          Naive UI Admin
+        </n-button>
       </div>
       <div class="footer-links-col">
         <n-text depth="1" class="col-header">{{ t('help') }}</n-text>

src/config-provider/demos/enUS/language.demo.md

@@ -13,10 +13,10 @@
 ```
 
 ```js
-import { ref } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { zhCN, dateZhCN } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     return {
       zhCN,
@@ -25,5 +25,5 @@ export default {
       dateLocale: ref(null)
     }
   }
-}
+})
 ```

src/config-provider/demos/enUS/namespace.demo.md

@@ -16,12 +16,14 @@ Some parts of component are detached to `document.body`. If you want to add a cl
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      ns: 'custom-app-namespace1',
-      isActive: false
+      ns: ref('custom-app-namespace1'),
+      isActive: ref(false)
     }
   }
-}
+})
 ```

src/config-provider/demos/enUS/os-theme.demo.md

@@ -9,10 +9,10 @@ Naive UI provides `useOsTheme` to get the current theme of your OS.
 ```
 
 ```js
-import { computed } from 'vue'
+import { defineComponent, computed } from 'vue'
 import { useOsTheme, darkTheme } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const osThemeRef = useOsTheme()
     return {
@@ -20,5 +20,5 @@ export default {
       osTheme: osThemeRef
     }
   }
-}
+})
 ```

src/config-provider/demos/enUS/theme.demo.md

@@ -14,15 +14,15 @@ Set theme of inner components of `n-config-provider`.
 ```
 
 ```js
-import { ref } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { darkTheme } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     return {
       darkTheme,
       theme: ref(null)
     }
   }
-}
+})
 ```

src/config-provider/demos/zhCN/index.demo-entry.md

@@ -13,7 +13,6 @@ inherit-theme
 os-theme
 language
 transparent
-overrides-inherit-debug
 ```
 
 ## Props

src/config-provider/demos/zhCN/language.demo.md

@@ -13,10 +13,10 @@
 ```
 
 ```js
-import { ref } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { zhCN, dateZhCN } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     return {
       zhCN,
@@ -25,5 +25,5 @@ export default {
       dateLocale: ref(null)
     }
   }
-}
+})
 ```

src/config-provider/demos/zhCN/namespace.demo.md

@@ -14,12 +14,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      ns: 'custom-app-namespace1',
-      isActive: false
+      ns: ref('custom-app-namespace1'),
+      isActive: ref(false)
     }
   }
-}
+})
 ```

src/config-provider/demos/zhCN/os-theme.demo.md

@@ -9,10 +9,10 @@ Naive UI 提供 `useOsTheme` 来获取当前操作系统的主题。
 ```
 
 ```js
-import { computed } from 'vue'
+import { defineComponent, computed } from 'vue'
 import { useOsTheme, darkTheme } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const osThemeRef = useOsTheme()
     return {
@@ -20,5 +20,5 @@ export default {
       osTheme: osThemeRef
     }
   }
-}
+})
 ```

src/config-provider/demos/zhCN/theme.demo.md

@@ -14,15 +14,15 @@
 ```
 
 ```js
-import { ref } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { darkTheme } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     return {
       darkTheme,
       theme: ref(null)
     }
   }
-}
+})
 ```

src/data-table/demos/enUS/index.demo-entry.md

@@ -7,8 +7,8 @@ DataTable is used to displays rows of structured data.
 ## Demos
 
 <n-alert type="warning" title="Caveat" style="margin-bottom: 16px;">
-  Every row data needs a unique key property, otherwise you should specify <n-text code>row-key</n-text>
-</n-alert>
+  Each item of the array passing in the <n-text code>data</n-text> prop represents a row of rendered data, and each row of data must have a unique <n-text code>key</n-text>, otherwise the <n-text code>row-key</n-text> prop must be specified on the table.
+  </n-alert>
 
 ```demo
 basic
@@ -97,7 +97,7 @@ flex-height
 | filterOptionValues | `Array<string \| number> \| null` | `undefined` | The active filter option values in controlled manner. If not set, the filter of the column works in an uncontrolled manner. (works when there are multiple filters). |
 | filterOptions | `Array<{ label: string, value: string \| number}>` | `undefined` | Filter options. |
 | fixed | `'left \| 'right' \| false` | `false` | Whether the column needs to be fixed. |
-| key | `string \| number` | `undefined` | Unique key of this column, **required** when table's row-key is not set. |
+| key | `string \| number` | `undefined` | Unique key of this column, this is not repeatable. |
 | options | `Array<'all' \| 'none' \| { label: string, key: string \| number, onSelect: (pageData: RowData) => void }>` | `undefined` | Options of custom selection. Only work with `type='selection'`. |
 | render | `(rowData: object, rowIndex: number) => VNodeChild` | `undefined` | Render function of column row cell. |
 | renderExpand | `(rowData: object, rowIndex: number) => VNodeChild` | `undefined` | Render function of the expand area. Only works when `type` is `'expand'`. |

src/data-table/demos/zhCN/index.demo-entry.md

@@ -7,7 +7,7 @@
 ## 演示
 
 <n-alert type="warning" title="注意" style="margin-bottom: 16px;">
-  每一行数据都要有唯一的 key，否则要在 table 上声明 <n-text code>row-key</n-text> 属性
+  传入 <n-text code>data</n-text> 属性的数组的每一项都代表渲染的一行数据，每一行数据都要有唯一的 <n-text code>key</n-text>，否则需要在 table 上声明 <n-text code>row-key</n-text> 属性。
 </n-alert>
 
 ```demo
@@ -98,7 +98,7 @@ scroll-debug
 | filterOptionValues | `Array<string \| number> \| null` | `undefined` | 受控状态下，当前激活的过滤器选项值数组。如果不做设定，这一列的过滤行为将是非受控的（过滤器多选时生效） |
 | filterOptions | `Array<{ label: string, value: string \| number}>` | `undefined` | filter 的 options 数据 |
 | fixed | `'left \| 'right' \| false` | `false` | 该列是否需要 fixed |
-| key | `string \| number` | `undefined` | 这一列的 key，在表格未设定 row-key 的时候是**必须**的。 |
+| key | `string \| number` | `undefined` | 这一列的 key，不可重复。 |
 | options | `Array<'all' \| 'none' \| { label: string, key: string \| number, onSelect: (pageData: RowData) => void }>` | `undefined` | 自定义选择项的选项，只对 `type='selection'` 生效 |
 | render | `(rowData: object, rowIndex: number) => VNodeChild` | `undefined` | 渲染函数，渲染这一列的每一行的单元格 |
 | renderExpand | `(rowData: object, rowIndex: number) => VNodeChild` | `undefined` | 展开区域的渲染函数，仅在 `type` 为 `'expand'` 的时候生效 |

src/grid/demos/enUS/collapse.demo.md

@@ -38,9 +38,9 @@ Collapsing works in responsive layout.
 ```
 
 ```js
-import { ref } from 'vue'
+import { defineComponent, ref } from 'vue'
 
-export default {
+export default defineComponent({
   setup () {
     return {
       gridCollapsed: ref(false),
@@ -49,7 +49,7 @@ export default {
       showSuffix: ref(true)
     }
   }
-}
+})
 ```
 
 ```css

src/grid/demos/zhCN/collapse.demo.md

@@ -38,9 +38,9 @@
 ```
 
 ```js
-import { ref } from 'vue'
+import { defineComponent, ref } from 'vue'
 
-export default {
+export default defineComponent({
   setup () {
     return {
       gridCollapsed: ref(false),
@@ -49,7 +49,7 @@ export default {
       showSuffix: ref(true)
     }
   }
-}
+})
 ```
 
 ```css

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

@@ -10,7 +10,6 @@ gap
 offset
 responsive
 collapse
-grid-basic-debug
 ```
 
 ## Props