refactor[ant-design-vue]: refactor table-pro & form-schema

cc-hearts · Apr 2, 2024 · 0f97b6e · 0f97b6e
1 parent 50add35
commit 0f97b6e
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 17 deletions.
diff --git a/packages/ant-design-vue/src/components/form-schema/form-schema.vue b/packages/ant-design-vue/src/components/form-schema/form-schema.vue
@@ -76,7 +76,7 @@ const props = withDefaults(defineProps<FormProps>(), {
   defaultValue: () => ({}),
 })
 
-// ================ inital values =================
+// ================ initial values =================
 const formInstance = ref()
 
 const formValue = ref<Record<PropertyKey, any>>({

diff --git a/packages/ant-design-vue/src/components/form-schema/index.ts b/packages/ant-design-vue/src/components/form-schema/index.ts
@@ -5,3 +5,4 @@ import { VERSION } from './helper.js'
 withInstall(FormSchema, VERSION)
 
 export { FormSchema }
+export * from './utils/define-form-schema-props'
diff --git a/packages/ant-design-vue/src/components/table-pro/index.ts b/packages/ant-design-vue/src/components/table-pro/index.ts
@@ -5,3 +5,5 @@ import { VERSION } from './helper.js'
 withInstall(TablePro, VERSION)
 
 export { TablePro }
+
+export * from './utils/define-table-pro-props'
diff --git a/packages/ant-design-vue/src/components/table-pro/table-pro.vue b/packages/ant-design-vue/src/components/table-pro/table-pro.vue
@@ -3,9 +3,9 @@ import { SettingOutlined, SyncOutlined } from '@ant-design/icons-vue'
 import { onMounted, reactive, toRef, watchEffect } from 'vue'
 import { noop, type TableProps } from './helper'
 import TableColumnAction from './components/table-columns-action.vue'
-import { useColumnsSort } from './hooks/use-column-sort'
-import { usePagination } from './hooks/use-pagination'
-import { useRowSelection } from './hooks/use-row-selection'
+import { useColumnsSort } from './utils/use-column-sort'
+import { usePagination } from './utils/use-pagination'
+import { useRowSelection } from './utils/use-row-selection'
 
 defineOptions({ name: 'TablePro' })
 
@@ -95,3 +95,4 @@ defineExpose({ reload: loadData })
     </template>
   </a-table>
 </template>
+./utils/use-column-sort./utils/use-pagination./utils/use-row-selection
diff --git a/packages/ant-design-vue/src/components/table-pro/utils/define-table-pro-props.ts b/packages/ant-design-vue/src/components/table-pro/utils/define-table-pro-props.ts
@@ -0,0 +1,6 @@
+import { shallowReactive } from 'vue'
+import type { TableProps } from '../helper'
+
+export function defineTableProProps<T extends Partial<TableProps>>(data: T) {
+  return shallowReactive({ ...data })
+}
diff --git a/...onents/table-pro/hooks/use-column-sort.ts → ...onents/table-pro/utils/use-column-sort.ts b/...onents/table-pro/hooks/use-column-sort.ts → ...onents/table-pro/utils/use-column-sort.ts
@@ -33,6 +33,7 @@ export function useColumnsSort(
   }
 
   const getSortedColumns = computed(() => {
+    // @ts-ignore
     return sortedColumns.value.filter((item) =>
       columnsField.value.includes(Reflect.get(item, rowKey.value)!)
     )

diff --git a/...ponents/table-pro/hooks/use-pagination.ts → ...ponents/table-pro/utils/use-pagination.ts b/...ponents/table-pro/hooks/use-pagination.ts → ...ponents/table-pro/utils/use-pagination.ts
diff --git a/...ents/table-pro/hooks/use-row-selection.ts → ...ents/table-pro/utils/use-row-selection.ts b/...ents/table-pro/hooks/use-row-selection.ts → ...ents/table-pro/utils/use-row-selection.ts
@@ -1,14 +1,12 @@
 import { computed, shallowReactive } from 'vue'
-import { RowSelection, useRowSelectionParams } from '../helper'
-
-export function useRowSelection(options: useRowSelectionParams = {}) {
-  const rowSelection = shallowReactive(<RowSelection<unknown, unknown>>{
-    selectedRowKeys: [],
-    selectedRows: [],
-    onChange: (
-      selectedRowKeys: Array<unknown>,
-      selectedRows: Array<unknown>
-    ) => {
+import { useRowSelectionParams } from '../helper'
+export function useRowSelection<K = string | number, T = unknown>(
+  options: useRowSelectionParams = {}
+) {
+  const rowSelection = shallowReactive({
+    selectedRowKeys: [] as K[],
+    selectedRows: [] as T[],
+    onChange: (selectedRowKeys: Array<K>, selectedRows: Array<T>) => {
       if (options.onChange) {
         options.onChange(selectedRowKeys, selectedRows)
       } else {
@@ -17,11 +15,13 @@ export function useRowSelection(options: useRowSelectionParams = {}) {
       }
     },
   })
-
   const getSelectedLength = computed(() => rowSelection.selectedRowKeys.length)
-
   const resetSelection = () => {
     rowSelection.onChange([], [])
   }
-  return { rowSelection, getSelectedLength, resetSelection }
+  return {
+    rowSelection,
+    getSelectedLength,
+    resetSelection,
+  }
 }