From 0f97b6e3c4ae8ce50225f2b7f7686881ca3f1192 Mon Sep 17 00:00:00 2001 From: Carl Chen Date: Tue, 2 Apr 2024 22:56:43 +0800 Subject: [PATCH] refactor[ant-design-vue]: refactor table-pro & form-schema --- .../components/form-schema/form-schema.vue | 2 +- .../src/components/form-schema/index.ts | 1 + .../src/components/table-pro/index.ts | 2 ++ .../src/components/table-pro/table-pro.vue | 7 ++--- .../table-pro/utils/define-table-pro-props.ts | 6 +++++ .../{hooks => utils}/use-column-sort.ts | 1 + .../{hooks => utils}/use-pagination.ts | 0 .../{hooks => utils}/use-row-selection.ts | 26 +++++++++---------- 8 files changed, 28 insertions(+), 17 deletions(-) create mode 100644 packages/ant-design-vue/src/components/table-pro/utils/define-table-pro-props.ts rename packages/ant-design-vue/src/components/table-pro/{hooks => utils}/use-column-sort.ts (98%) rename packages/ant-design-vue/src/components/table-pro/{hooks => utils}/use-pagination.ts (100%) rename packages/ant-design-vue/src/components/table-pro/{hooks => utils}/use-row-selection.ts (50%) 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 index ab6c40c..ee1d30f 100644 --- 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(), { defaultValue: () => ({}), }) -// ================ inital values ================= +// ================ initial values ================= const formInstance = ref() const formValue = ref>({ diff --git a/packages/ant-design-vue/src/components/form-schema/index.ts b/packages/ant-design-vue/src/components/form-schema/index.ts index 71c23c9..de600f6 100644 --- 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 index 8e97cea..2bdfe1f 100644 --- 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 index a8ce497..1bc3f6a 100644 --- 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 }) +./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 new file mode 100644 index 0000000..4941060 --- /dev/null +++ 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>(data: T) { + return shallowReactive({ ...data }) +} diff --git a/packages/ant-design-vue/src/components/table-pro/hooks/use-column-sort.ts b/packages/ant-design-vue/src/components/table-pro/utils/use-column-sort.ts similarity index 98% rename from packages/ant-design-vue/src/components/table-pro/hooks/use-column-sort.ts rename to packages/ant-design-vue/src/components/table-pro/utils/use-column-sort.ts index e62dcea..c925cd6 100644 --- a/packages/ant-design-vue/src/components/table-pro/hooks/use-column-sort.ts +++ b/packages/ant-design-vue/src/components/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/packages/ant-design-vue/src/components/table-pro/hooks/use-pagination.ts b/packages/ant-design-vue/src/components/table-pro/utils/use-pagination.ts similarity index 100% rename from packages/ant-design-vue/src/components/table-pro/hooks/use-pagination.ts rename to packages/ant-design-vue/src/components/table-pro/utils/use-pagination.ts diff --git a/packages/ant-design-vue/src/components/table-pro/hooks/use-row-selection.ts b/packages/ant-design-vue/src/components/table-pro/utils/use-row-selection.ts similarity index 50% rename from packages/ant-design-vue/src/components/table-pro/hooks/use-row-selection.ts rename to packages/ant-design-vue/src/components/table-pro/utils/use-row-selection.ts index 8aec1bc..5903e98 100644 --- a/packages/ant-design-vue/src/components/table-pro/hooks/use-row-selection.ts +++ b/packages/ant-design-vue/src/components/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(>{ - selectedRowKeys: [], - selectedRows: [], - onChange: ( - selectedRowKeys: Array, - selectedRows: Array - ) => { +import { useRowSelectionParams } from '../helper' +export function useRowSelection( + options: useRowSelectionParams = {} +) { + const rowSelection = shallowReactive({ + selectedRowKeys: [] as K[], + selectedRows: [] as T[], + onChange: (selectedRowKeys: Array, selectedRows: Array) => { 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, + } }