feat(design, tdesign-vue-next-adapter, table, element-plus-adapter): 完善tdesign适配

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"
   ></component>
 </template>
 
@@ -21,7 +22,7 @@ defineOptions({
 
 const props = defineProps<PaginationProps>();
 
-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);
+};
 </script>

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<number>) => {
 
 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;

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,

packages/element-plus-adapter/src/FormItem.vue

@@ -10,6 +10,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { ElFormItem } from 'element-plus';
 
 import { FormItemProps } from '@tmagic/design';
 

packages/table/src/TextColumn.vue

@@ -29,12 +29,12 @@
     row[config.prop]
   }}</a>
 
-  <el-tooltip v-else-if="config.action === 'tip'" placement="left">
+  <TMagicTooltip v-else-if="config.action === 'tip'" placement="left">
     <template #content>
       <div>{{ formatter(config, row, { index: index }) }}</div>
     </template>
     <TMagicButton link type="primary">{{ config.buttonText || '扩展配置' }}</TMagicButton>
-  </el-tooltip>
+  </TMagicTooltip>
 
   <TMagicTag
     v-else-if="config.action === 'tag' && config.prop"
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts" setup>
-import { TMagicButton, TMagicForm, TMagicTag } from '@tmagic/design';
+import { TMagicButton, TMagicForm, TMagicTag, TMagicTooltip } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
 import { formatter } from './utils';

packages/tdesign-vue-next-adapter/src/Pagination.vue

@@ -0,0 +1,43 @@
+<template>
+  <TPagination
+    :total="total"
+    :current="curPage"
+    :size="size === 'small' ? 'small' : 'medium'"
+    :page-size="pageSize"
+    :page-size-options="pageSizes"
+    @current-change="handleCurrentChange"
+    @page-size-change="handleSizeChange"
+    @update:current="updateCurrentPage"
+    @update:page-size="updatePageSize"
+  ></TPagination>
+</template>
+
+<script setup lang="ts">
+import { Pagination as TPagination } from 'tdesign-vue-next';
+
+import type { PaginationProps } from '@tmagic/design';
+
+defineOptions({
+  name: 'TTDesignAdapterPagination',
+});
+
+defineProps<PaginationProps>();
+
+const emit = defineEmits(['size-change', 'current-change', 'update:current-page', 'update:page-size']);
+
+const handleCurrentChange = (...args: any[]) => {
+  emit('current-change', ...args);
+};
+
+const handleSizeChange = (...args: any[]) => {
+  emit('size-change', ...args);
+};
+
+const updateCurrentPage = (...args: any[]) => {
+  emit('update:current-page', ...args);
+};
+
+const updatePageSize = (...args: any[]) => {
+  emit('update:page-size', ...args);
+};
+</script>

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: {

playground/src/pages/Table.vue

@@ -3,6 +3,9 @@
     <NavMenu :data="menu"></NavMenu>
     <div class="table-content">
       <MagicTable class="left-panel" :columns="columns" :data="data" :show-header="true" rowkey-name="a"></MagicTable>
+
+      <TMagicPagination class="pagination" :total="100" :page-size="10" :current-page="1"></TMagicPagination>
+
       <TMagicTabs class="right-panel" modelValue="columns">
         <TMagicTabPane label="columns" name="columns">
           <TMagicCodeEditor class="code-editor-content" :init-values="columns" @save="change"></TMagicCodeEditor>
@@ -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';