Add use-pagination and use-row-selection hooks to ant-design-vue tabl…

…e-pro component

packages/ant-design-vue/src/components/table-pro/table-columns-action.vue → packages/ant-design-vue/src/components/table-pro/components/table-columns-action.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts" name="ColumnsOperation">
 import { noop } from '@cc-heart/utils'
-import DragSort from './drag-sort-icon.vue'
 import { TableColumnType } from 'ant-design-vue'
+import { DataIndex } from 'ant-design-vue/es/vc-table/interface'
 import { ComputedRef, PropType, Ref, computed, unref } from 'vue'
-// @ts-ignore
 import draggable from 'vuedraggable'
-import { DataIndex } from 'ant-design-vue/es/vc-table/interface'
+import DragSort from './drag-sort-icon.vue'
 
 const props = defineProps({
   sortedColumns: {

packages/ant-design-vue/src/components/table-pro/table-pro.vue

@@ -2,10 +2,10 @@
 import { SettingOutlined, SyncOutlined } from '@ant-design/icons-vue'
 import { onMounted, reactive, toRef, watchEffect } from 'vue'
 import { noop, type TableProps } from './helper'
-import TableColumnAction from './table-columns-action.vue'
-import { useColumnSort } from './use-column-sort'
-import { usePagination } from './use-pagination'
-import { useRowSelection } from './use-row-selection'
+import TableColumnAction from './components/table-columns-action.vue'
+import { useColumnSort } from './hooks/use-column-sort'
+import { usePagination } from './hooks/use-pagination'
+import { useRowSelection } from './hooks/use-row-selection'
 
 defineOptions({ name: 'TablePro' })
 
@@ -56,13 +56,7 @@ watchEffect(() => {
   sortedColumnsProps.onReset()
 })
 
-watchEffect(() => {
-  pagination.total = props.total || 0
-})
-
-defineExpose({
-  reload: loadData,
-})
+defineExpose({ reload: loadData })
 </script>
 <template>
   <div class="m-b-2 flex items-center">

scripts/cli/bin/index.js

@@ -46177,6 +46177,7 @@ models.forEach(function (fromModel) {
 var colorConvert = convert
 
 ansiStyles.exports
+
 ;(function (module) {
   const colorConvert$1 = colorConvert
 
@@ -51590,7 +51591,9 @@ function replaceImport(code) {
   })
 }
 
-const templateDir = ['packages/element-plus']
+const templateDir = ['element-plus', 'ant-design-vue'].map(
+  (packageName) => `packages/${packageName}`
+)
 
 function genSelectTemplatePrompt(choices) {
   return {
@@ -51664,22 +51667,39 @@ async function readTemplateComponents(
     return [...acc, ...cur]
   }, [])
 }
+async function recursiveComponentFilePaths(dirs, componentDir, relativePath) {
+  let ret = []
+  const task = dirs.map(async (dir) => {
+    if (dir.isFile()) {
+      const dirname = componentDir.split('/').pop() || ''
+      ret.push({
+        path: resolve$1(componentDir, dir.name),
+        relativePath: join(relativePath, dirname),
+        dirname: dir.name,
+      })
+    } else {
+      const dirs = await readdir(resolve$1(dir.path, dir.name), {
+        withFileTypes: true,
+      })
+      const dirname = componentDir.split('/').pop() || ''
+      const fileList = await recursiveComponentFilePaths(
+        dirs,
+        resolve$1(dir.path, dir.name),
+        resolve$1(relativePath, dirname)
+      )
+      ret = [...ret, ...fileList]
+    }
+  })
+  await Promise.all(task)
+  return ret
+}
 async function getComponentFilePaths(
   componentDir,
   relativePath = process.cwd()
 ) {
   try {
     const dirs = await readdir(componentDir, { withFileTypes: true })
-    return dirs
-      .filter((dir) => dir.isFile())
-      .map((dir) => {
-        const dirname = componentDir.split('/').pop() || ''
-        return {
-          path: resolve$1(componentDir, dir.name),
-          relativePath: join(relativePath, dirname),
-          dirname: dir.name,
-        }
-      })
+    return await recursiveComponentFilePaths(dirs, componentDir, relativePath)
   } catch (e) {
     return []
   }

scripts/cli/config.ts

@@ -1 +1,3 @@
-export const templateDir = ['packages/element-plus']
+export const templateDir = ['element-plus', 'ant-design-vue'].map(
+  (packageName) => `packages/${packageName}`
+)

scripts/cli/index.ts

@@ -1,5 +1,5 @@
 import { findUpFile } from '@cc-heart/utils-service'
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs'
+import { Dirent, existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs'
 import { pipe } from '@cc-heart/utils'
 import { readdir } from 'fs/promises'
 import inquirer from 'inquirer'
@@ -46,22 +46,50 @@ async function readTemplateComponents(
   }, [])
 }
 
+interface ComponentFilePath {
+  path: string
+  relativePath: string
+  dirname: string
+}
+async function recursiveComponentFilePaths(
+  dirs: Dirent[],
+  componentDir: string,
+  relativePath: string
+): Promise<Array<ComponentFilePath>> {
+  let ret: Array<ComponentFilePath> = []
+  const task = dirs.map(async (dir) => {
+    if (dir.isFile()) {
+      const dirname = componentDir.split('/').pop() || ''
+      ret.push({
+        path: resolve(componentDir, dir.name),
+        relativePath: join(relativePath, dirname),
+        dirname: dir.name,
+      })
+    } else {
+      const dirs = await readdir(resolve(dir.path, dir.name), {
+        withFileTypes: true,
+      })
+      const dirname = componentDir.split('/').pop() || ''
+      const fileList = await recursiveComponentFilePaths(
+        dirs,
+        resolve(dir.path, dir.name),
+        resolve(relativePath, dirname)
+      )
+      ret = [...ret, ...fileList]
+    }
+  })
+
+  await Promise.all(task)
+  return ret
+}
+
 async function getComponentFilePaths(
   componentDir: string,
   relativePath = process.cwd()
 ) {
   try {
     const dirs = await readdir(componentDir, { withFileTypes: true })
-    return dirs
-      .filter((dir) => dir.isFile())
-      .map((dir) => {
-        const dirname = componentDir.split('/').pop() || ''
-        return {
-          path: resolve(componentDir, dir.name),
-          relativePath: join(relativePath, dirname),
-          dirname: dir.name,
-        }
-      })
+    return await recursiveComponentFilePaths(dirs, componentDir, relativePath)
   } catch (e) {
     return []
   }