docs(data-table): ts demo

CHANGELOG.en-US.md

@@ -1,6 +1,6 @@
 # CHANGELOG
 
-## NEXT_VERSION
+## 2.41.0
 
 ### Breaking Changes
 
@@ -9,6 +9,7 @@
 ### i18n
 
 - Add kmKH locale.
+- Add ugCN locale.
 
 ### Features
 

CHANGELOG.zh-CN.md

@@ -1,6 +1,8 @@
 # CHANGELOG
 
-## NEXT_VERSION
+## 2.41.0
+
+`2025-01-05`
 
 ### Breaking Changes
 
@@ -9,10 +11,11 @@
 ### i18n
 
 - 添加 kmKH 国际化
+- 添加 ugCN 国际化
 
 ### Features
 
-- `n-modal` 新增 `draggable` 属性，关闭 [#6525](https://github.com/tusen-ai/naive-ui/issues/6525)，[#5792](https://github.com/tusen-ai/naive-ui/issues/5792)，[#5711](https://github.com/tusen-ai/naive-ui/issues/5711)，[#5501](https://github.com/tusen-ai/naive-ui/issues/5501)，[#2152](https://github.com/tusen-ai/naive-ui/issues/2152)
+- `n-modal` 新增 `draggable` 属性，关闭 [#6525](https://github.com/tusen-ai/naive-ui/issues/6525)、[#5792](https://github.com/tusen-ai/naive-ui/issues/5792)、[#5711](https://github.com/tusen-ai/naive-ui/issues/5711)、[#5501](https://github.com/tusen-ai/naive-ui/issues/5501)、[#2152](https://github.com/tusen-ai/naive-ui/issues/2152)
 - `useDialog` 支持 `draggable` 参数
 - `useModal` 支持 `draggable` 参数
 

demo/pages/docs/community/enUS/index.md

@@ -22,4 +22,4 @@ If you want to contribute excellent resources, please contact 07akioni or amadeu
 | [Dumogu-admin](https://admin.dumogu.top/base-naive-ui/) | Vue3, Vite5, Naive UI, Minimalist clean background management template. |
 | [chatgpt-web](https://github.com/Chanzhaoyu/chatgpt-web) | ChatGPT demo web page built with Express and Vue3 |
 | [pro-components-naive-ui](https://github.com/Zheng-Changfu/pro-components-naive-ui) | Based on Naive UI secondary encapsulation, more functions are extended on the original components |
-| [vue3-dynamic-form](https://vue3-dynamic-form.dumogu.top/) | A dynamic form designer based on Vue3, Naive UI, to implement a lot of basic controls, can be very convenient to customize the control. |
+| [vue3-dynamic-form](https://github.com/yayaluoya/vue3-dynamic-form) | A dynamic form designer based on Vue3, Naive UI, to implement a lot of basic controls, can be very convenient to customize the control. |

demo/pages/docs/community/zhCN/index.md

@@ -22,4 +22,4 @@ Naive UI 是统一设计规范的高质量 Vue 组件库，我们倾向于只提
 | [Dumogu-admin](https://admin.dumogu.top/base-naive-ui/) | 一个基于Vue3、Vite5、Naive UI, 简洁干净后台管理模板，方便二次开发，易于上手，只有基础功能。 |
 | [chatgpt-web](https://github.com/Chanzhaoyu/chatgpt-web) | 使用 Express 和 Vue3 搭建的 ChatGPT 演示网页 |
 | [pro-components-naive-ui](https://github.com/Zheng-Changfu/pro-components-naive-ui) | 基于 Naive UI 二次封装, 基于原有组件扩展了更多功能 |
-| [vue3-dynamic-form](https://vue3-dynamic-form.dumogu.top/) | 一个基于Vue3、Naive UI, 的动态表单设计器，实现了很多基础控件，能非常方便的自定义控件。 |
+| [vue3-dynamic-form](https://github.com/yayaluoya/vue3-dynamic-form) | 一个基于Vue3、Naive UI, 的动态表单设计器，实现了很多基础控件，能非常方便的自定义控件。 |

demo/pages/docs/i18n/enUS/index.md

@@ -60,6 +60,7 @@ The following list is sorted by 'Config' column.
 | Bahasa Indonesia           | idID   | dateIdID    |         |
 | Italiano                   | itIT   | dateItIT    | 2.24.2  |
 | Japanese                   | jaJP   | dateJaJP    |         |
+| Khmer (Cambodia)           | kmKH   | dateKmKH    | 2.41.0  |
 | Korean (South Korea)       | koKR   | dateKoKR    | 2.28.1  |
 | Norwegian Bokmål (Norway)  | nbNO   | dateNbNO    |         |
 | Dutch (Netherlands)        | nlNL   | dateNlNL    | 2.29.0  |
@@ -70,12 +71,12 @@ The following list is sorted by 'Config' column.
 | Swedish                    | svSE   | dateSvSE    | 2.35.0  |
 | Thai (Thailand)            | thTH   | dateThTH    | 2.27.0  |
 | Turkish                    | trTR   | dateTrTR    | 2.34.0  |
+| Uyghur (China)             | ugCN   | dateUgCN    |         |
 | Ukrainian                  | ukUA   | dateUkUA    |         |
 | Uzbek (Uzbekistan)         | uzUZ   | dateUzUZ    | 2.39.0  |
 | Vietnamese (Vietnam)       | viVN   | dateViVN    | 2.30.7  |
 | Chinese (Simplified)       | zhCN   | dateZhCN    |         |
 | Chinese (Traditional)      | zhTW   | dateZhTW    |         |
-| Uyghur(China)              | ugCN   | dateUgCN    |         |
 
 ## Customize the existing locale
 

demo/pages/docs/i18n/zhCN/index.md

@@ -60,6 +60,7 @@ Naive-ui 通过使用 `n-config-provider` 调整语言，默认情况下所有
 | 印度尼西亚语       | idID | dateIdID |        |
 | 意大利语           | itIT | dateItIT | 2.24.2 |
 | 日语               | jaJP | dateJaJP |        |
+| 高棉语（柬埔寨）   | kmKH | dateKmKH | 2.41.0 |
 | 韩语               | koKR | dateKoKR | 2.28.1 |
 | 书面挪威语         | nbNO | dateNbNO |        |
 | 荷兰语（荷兰）     | nlNL | dateNlNL | 2.29.0 |
@@ -70,12 +71,12 @@ Naive-ui 通过使用 `n-config-provider` 调整语言，默认情况下所有
 | 瑞典語             | svSE | dateSvSE | 2.35.0 |
 | 泰语（泰国）       | thTH | dateThTH | 2.27.0 |
 | 土耳其语           | trTR | dateTrTR | 2.34.0 |
+| 维吾尔语           | ugCN | dateUgCN | 2.41.0 |
 | 乌克兰语           | ukUA | dateUkUA |        |
 | 乌兹别克语         | uzUZ | dateUzUZ | 2.39.0 |
 | 越南语（越南）     | viVN | dateViVN | 2.30.7 |
 | 简体中文           | zhCN | dateZhCN |        |
 | 繁体中文           | zhTW | dateZhTW |        |
-| 维吾尔语           | ugCN | dateUgCN |        |
 
 ## 在现有国际化基础上调整
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "2.40.4",
+  "version": "2.41.0",
   "packageManager": "[email protected]",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "author": "07akioni",

src/_utils/env/is-jsdom.ts

@@ -4,7 +4,7 @@ export function isJsdom(): boolean {
   if (_isJsdom === undefined) {
     _isJsdom
       = navigator.userAgent.includes('Node.js')
-      || navigator.userAgent.includes('jsdom')
+        || navigator.userAgent.includes('jsdom')
   }
   return _isJsdom
 }

src/avatar/src/Avatar.tsx

@@ -281,10 +281,10 @@ export default defineComponent({
     let img: VNodeChild
     const placeholderNode
       = !loaded
-      && !hasLoadError
-      && (this.renderPlaceholder
-        ? this.renderPlaceholder()
-        : this.$slots.placeholder?.())
+        && !hasLoadError
+        && (this.renderPlaceholder
+          ? this.renderPlaceholder()
+          : this.$slots.placeholder?.())
 
     if (this.hasLoadError) {
       img = this.renderFallback

src/back-top/src/BackTop.tsx

@@ -158,8 +158,8 @@ export default defineComponent({
       scrollListenerRegistered = true
       const scrollEl
         = props.target?.()
-        || unwrapElement(props.listenTo)
-        || getScrollParent(placeholderRef.value)
+          || unwrapElement(props.listenTo)
+          || getScrollParent(placeholderRef.value)
       if (!scrollEl) {
         if (__DEV__) {
           warn(

src/carousel/src/utils/index.ts

@@ -9,12 +9,12 @@ export function calculateSize(element: HTMLElement, innerOnly?: boolean): Size {
     const style = getComputedStyle(element)
     width
       = width
-      - Number.parseFloat(style.getPropertyValue('padding-left'))
-      - Number.parseFloat(style.getPropertyValue('padding-right'))
+        - Number.parseFloat(style.getPropertyValue('padding-left'))
+        - Number.parseFloat(style.getPropertyValue('padding-right'))
     height
       = height
-      - Number.parseFloat(style.getPropertyValue('padding-top'))
-      - Number.parseFloat(style.getPropertyValue('padding-bottom'))
+        - Number.parseFloat(style.getPropertyValue('padding-top'))
+        - Number.parseFloat(style.getPropertyValue('padding-bottom'))
   }
   return { width, height }
 }

src/data-table/demos/enUS/ajax-usage.demo.md → src/data-table/demos/enUS/ajax-usage.demo.vue

@@ -1,31 +1,33 @@
-# Async
+<markdown>
+  # Async
+</markdown>
 
-```html
-<n-data-table
-  remote
-  ref="table"
-  :columns="columns"
-  :data="data"
-  :loading="loading"
-  :pagination="pagination"
-  :row-key="rowKey"
-  @update:sorter="handleSorterChange"
-  @update:filters="handleFiltersChange"
-  @update:page="handlePageChange"
-/>
-```
-
-```js
+<script lang="ts">
+import type {
+  DataTableColumn,
+  DataTableColumns,
+  DataTableFilterOptionValue,
+  DataTableFilterState,
+  DataTableSortOrder,
+  DataTableSortState,
+  PaginationInfo
+} from 'naive-ui'
 import { defineComponent, onMounted, reactive, ref } from 'vue'
 
-const column1 = {
+interface RowData {
+  column1: number
+  column2: number
+  column3: string
+}
+
+const column1: DataTableColumn<RowData> = {
   title: 'column1',
   key: 'column1',
   sorter: true,
   sortOrder: false
 }
 
-const column2 = {
+const column2: DataTableColumn<RowData> = {
   title: 'column2',
   key: 'column2',
   filter: true,
@@ -42,7 +44,7 @@ const column2 = {
   ]
 }
 
-const columns = [
+const columns: DataTableColumns<RowData> = [
   column1,
   column2,
   {
@@ -61,12 +63,30 @@ const data = Array.from({ length: 987 })
     }
   })
 
-function query(page, pageSize = 10, order = 'ascend', filterValues = []) {
+interface QueryParams {
+  page: number
+  pageSize: number
+  order?: DataTableSortOrder
+  filterValues?: DataTableFilterOptionValue[] | null
+}
+
+interface QueryResult {
+  pageCount: number
+  data: RowData[]
+  total: number
+}
+
+function query({
+  page,
+  pageSize = 10,
+  order = 'ascend',
+  filterValues = []
+}: QueryParams): Promise<QueryResult> {
   return new Promise((resolve) => {
     const copiedData = data.map(v => v)
     const orderedData = order === 'descend' ? copiedData.reverse() : copiedData
-    const filteredData = filterValues.length
-      ? orderedData.filter(row => filterValues.includes(row.column2))
+    const filteredData = filterValues?.length
+      ? orderedData.filter(row => filterValues?.includes(row.column2))
       : orderedData
     const pagedData = filteredData.slice((page - 1) * pageSize, page * pageSize)
     const total = filteredData.length
@@ -85,7 +105,7 @@ function query(page, pageSize = 10, order = 'ascend', filterValues = []) {
 
 export default defineComponent({
   setup() {
-    const dataRef = ref([])
+    const dataRef = ref<RowData[]>([])
     const loadingRef = ref(true)
     const columnsRef = ref(columns)
     const column1Reactive = reactive(column1)
@@ -94,18 +114,19 @@ export default defineComponent({
       page: 1,
       pageCount: 1,
       pageSize: 10,
-      prefix({ itemCount }) {
+      itemCount: 0,
+      prefix({ itemCount }: PaginationInfo) {
         return `Total is ${itemCount}.`
       }
     })
 
     onMounted(() => {
-      query(
-        paginationReactive.page,
-        paginationReactive.pageSize,
-        column1Reactive.sortOrder,
-        column2Reactive.filterOptionValues
-      ).then((data) => {
+      query({
+        page: paginationReactive.page,
+        pageSize: paginationReactive.pageSize,
+        order: column1Reactive.sortOrder,
+        filterValues: column2Reactive.filterOptionValues
+      }).then((data) => {
         dataRef.value = data.data
         paginationReactive.pageCount = data.pageCount
         paginationReactive.itemCount = data.total
@@ -120,19 +141,19 @@ export default defineComponent({
       column2: column2Reactive,
       pagination: paginationReactive,
       loading: loadingRef,
-      rowKey(rowData) {
+      rowKey(rowData: RowData) {
         return rowData.column1
       },
-      handleSorterChange(sorter) {
+      handleSorterChange(sorter: DataTableSortState) {
         if (!sorter || sorter.columnKey === 'column1') {
           if (!loadingRef.value) {
             loadingRef.value = true
-            query(
-              paginationReactive.page,
-              paginationReactive.pageSize,
-              !sorter ? false : sorter.order,
-              column2Reactive.filterOptionValues
-            ).then((data) => {
+            query({
+              page: paginationReactive.page,
+              pageSize: paginationReactive.pageSize,
+              order: !sorter ? false : sorter.order,
+              filterValues: column2Reactive.filterOptionValues
+            }).then((data) => {
               column1Reactive.sortOrder = !sorter ? false : sorter.order
               dataRef.value = data.data
               paginationReactive.pageCount = data.pageCount
@@ -142,16 +163,18 @@ export default defineComponent({
           }
         }
       },
-      handleFiltersChange(filters) {
+      handleFiltersChange(filters: DataTableFilterState) {
         if (!loadingRef.value) {
           loadingRef.value = true
-          const filterValues = filters.column2 || []
-          query(
-            paginationReactive.page,
-            paginationReactive.pageSize,
-            column1Reactive.sortOrder,
+          const filterValues = Array.isArray(filters.column2)
+            ? filters.column2
+            : []
+          query({
+            page: paginationReactive.page,
+            pageSize: paginationReactive.pageSize,
+            order: column1Reactive.sortOrder,
             filterValues
-          ).then((data) => {
+          }).then((data) => {
             column2Reactive.filterOptionValues = filterValues
             dataRef.value = data.data
             paginationReactive.pageCount = data.pageCount
@@ -160,15 +183,15 @@ export default defineComponent({
           })
         }
       },
-      handlePageChange(currentPage) {
+      handlePageChange(currentPage: number) {
         if (!loadingRef.value) {
           loadingRef.value = true
-          query(
-            currentPage,
-            paginationReactive.pageSize,
-            column1Reactive.sortOrder,
-            column2Reactive.filterOptionValues
-          ).then((data) => {
+          query({
+            page: currentPage,
+            pageSize: paginationReactive.pageSize,
+            order: column1Reactive.sortOrder,
+            filterValues: column2Reactive.filterOptionValues
+          }).then((data) => {
             dataRef.value = data.data
             paginationReactive.page = currentPage
             paginationReactive.pageCount = data.pageCount
@@ -180,4 +203,18 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table
+    remote
+    :columns="columns"
+    :data="data"
+    :loading="loading"
+    :pagination="pagination"
+    :row-key="rowKey"
+    @update:sorter="handleSorterChange"
+    @update:filters="handleFiltersChange"
+    @update:page="handlePageChange"
+  />
+</template>