diff --git a/packages/design/src/Pagination.vue b/packages/design/src/Pagination.vue index 4975877c..6a24c1c4 100644 --- a/packages/design/src/Pagination.vue +++ b/packages/design/src/Pagination.vue @@ -4,8 +4,9 @@ :is="uiComponent" v-bind="uiProps" @size-change="handleSizeChange" - @page-size-change="handleSizeChange" @current-change="handleCurrentChange" + @update:current-page="updateCurrentPage" + @update:page-size="updatePageSize" > @@ -21,7 +22,7 @@ defineOptions({ const props = defineProps(); -const emit = defineEmits(['size-change', 'current-change']); +const emit = defineEmits(['size-change', 'current-change', 'update:current-page', 'update:page-size']); const ui = getDesignConfig('components')?.pagination; @@ -35,4 +36,10 @@ const handleSizeChange = (...args: any[]) => { const handleCurrentChange = (...args: any[]) => { emit('current-change', ...args); }; +const updateCurrentPage = (...args: any[]) => { + emit('update:current-page', ...args); +}; +const updatePageSize = (...args: any[]) => { + emit('update:page-size', ...args); +}; diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts index fa6b56a7..f4caf054 100644 --- a/packages/design/src/index.ts +++ b/packages/design/src/index.ts @@ -54,21 +54,8 @@ export { default as TMagicTooltip } from './Tooltip.vue'; export { default as TMagicUpload } from './Upload.vue'; export { default as TMagicPopconfirm } from './Popconfirm.vue'; -export const tMagicMessage = { - error: (msg: string) => { - console.error(msg); - }, - success: (msg: string) => { - console.log(msg); - }, - warning: (msg: string) => { - console.warn(msg); - }, - info: (msg: string) => { - console.info(msg); - }, - closeAll: (_msg: string) => {}, -} as unknown as TMagicMessage; +// eslint-disable-next-line import/no-mutable-exports +export let tMagicMessage: TMagicMessage; export const tMagicMessageBox = { alert: (msg: string) => { @@ -108,13 +95,23 @@ export let useZIndex = (zIndexOverrides?: Ref) => { export default { install(app: App, options: DesignPluginOptions) { - if (options.message) { - tMagicMessage.error = options.message?.error; - tMagicMessage.success = options.message?.success; - tMagicMessage.warning = options.message?.warning; - tMagicMessage.info = options.message?.info; - tMagicMessage.closeAll = options.message?.closeAll; - } + tMagicMessage = + options.message || + ({ + error: (msg: string) => { + console.error(msg); + }, + success: (msg: string) => { + console.log(msg); + }, + warning: (msg: string) => { + console.warn(msg); + }, + info: (msg: string) => { + console.info(msg); + }, + closeAll: (_msg: string) => {}, + } as unknown as TMagicMessage); if (options.messageBox) { tMagicMessageBox.alert = options.messageBox?.alert; diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts index 1ede01ef..f10f6d8d 100644 --- a/packages/design/src/types.ts +++ b/packages/design/src/types.ts @@ -224,8 +224,9 @@ export interface PaginationProps { hideOnSinglePage?: boolean; curPage?: number; pageSizes?: number[]; - pagesize?: number; + pageSize?: number; total?: number; + size?: 'large' | 'default' | 'small'; } export interface PopconfirmProps { @@ -399,7 +400,7 @@ export interface IconProps { size?: string; } -export interface TMagicMessage { +interface ExtraApi { success: (msg: string) => void; warning: (msg: string) => void; info: (msg: string) => void; @@ -407,6 +408,14 @@ export interface TMagicMessage { closeAll: () => void; } +export type TMagicMessage = ExtraApi & + ((options: { + type?: 'info' | 'success' | 'warning' | 'error'; + message?: string; + dangerouslyUseHTMLString?: boolean; + duration?: number; + }) => void); + export type ElMessageBoxShortcutMethod = (( message: string, title: string, diff --git a/packages/element-plus-adapter/src/FormItem.vue b/packages/element-plus-adapter/src/FormItem.vue index 5aead04b..0744be39 100644 --- a/packages/element-plus-adapter/src/FormItem.vue +++ b/packages/element-plus-adapter/src/FormItem.vue @@ -10,6 +10,7 @@ diff --git a/packages/tdesign-vue-next-adapter/src/index.ts b/packages/tdesign-vue-next-adapter/src/index.ts index 6745a40e..ddc4ba61 100644 --- a/packages/tdesign-vue-next-adapter/src/index.ts +++ b/packages/tdesign-vue-next-adapter/src/index.ts @@ -21,7 +21,6 @@ import { MessagePlugin, Option as TOption, OptionGroup as TOptionGroup, - Pagination as TPagination, RadioGroup as TRadioGroup, Row as TRow, Select as TSelect, @@ -81,6 +80,7 @@ import DatePicker from './DatePicker.vue'; import Dialog from './Dialog.vue'; import Icon from './Icon.vue'; import Input from './Input.vue'; +import Pagination from './Pagination.vue'; import Popconfirm from './Popconfirm.vue'; import Radio from './Radio.vue'; import RadioButton from './RadioButton.vue'; @@ -88,8 +88,24 @@ import Scrollbar from './Scrollbar.vue'; import Table from './Table.vue'; import Tabs from './Tabs.vue'; +const messageBox = (options: { + type?: 'info' | 'success' | 'warning' | 'error'; + message?: string; + dangerouslyUseHTMLString?: boolean; + duration?: number; +}) => + MessagePlugin(options.type || 'info', { + duration: options.duration || 3000, + content: options.message, + }); + +messageBox.success = MessagePlugin.success; +messageBox.error = MessagePlugin.error; +messageBox.warning = MessagePlugin.warning; +messageBox.info = MessagePlugin.info; + const adapter: any = { - message: MessagePlugin, + message: messageBox, messageBox: { alert: (msg: string, title?: string) => { return new Promise((resolve, reject) => { @@ -351,13 +367,8 @@ const adapter: any = { }, pagination: { - component: TPagination, - props: (props: PaginationProps) => ({ - current: props.curPage, - pageSizeOptions: props.pageSizes, - pageSize: props.pagesize, - total: props.total, - }), + component: Pagination, + props: (props: PaginationProps) => props, }, radio: { diff --git a/playground/src/pages/Table.vue b/playground/src/pages/Table.vue index 6b553480..bde34e4e 100644 --- a/playground/src/pages/Table.vue +++ b/playground/src/pages/Table.vue @@ -3,6 +3,9 @@
+ + + @@ -20,7 +23,15 @@ import { ref } from 'vue'; import { useRouter } from 'vue-router'; import type { ColumnConfig } from '@tmagic/editor'; -import { MagicTable, MenuButton, TMagicCodeEditor, tMagicMessage, TMagicTabPane, TMagicTabs } from '@tmagic/editor'; +import { + MagicTable, + MenuButton, + TMagicCodeEditor, + tMagicMessage, + TMagicPagination, + TMagicTabPane, + TMagicTabs, +} from '@tmagic/editor'; import NavMenu from '../components/NavMenu.vue';