feat: table切换成TMagicDesign

docs/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
+    "@tmagic/design": "1.2.0-beta.2",
     "@tmagic/element-plus-adapter": "1.2.0-beta.2",
     "@tmagic/form": "1.2.0-beta.2",
     "@tmagic/schema": "1.2.0-beta.2",

docs/src/.vuepress/client.ts

@@ -4,6 +4,7 @@ import 'highlight.js/styles/github.css';
 import './polyfills';
 import { defineClientConfig  } from '@vuepress/client';
 import ElementPlus from 'element-plus';
+import TMagicDesign from '@tmagic/design';
 import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
 import MagicForm from '@tmagic/form';
 import DemoBlock from './demo-block.vue';
@@ -11,8 +12,8 @@ import DemoBlock from './demo-block.vue';
 export default defineClientConfig({
   enhance({ app, router, siteData }) {
     app.use(ElementPlus);
+    app.use(TMagicDesign, MagicElementPlusAdapter)
     app.use(MagicForm, {
-      uiAdapter: MagicElementPlusAdapter,
       request: (options: any) => new Promise((resolve) => {
         if (options.url === 'select/remote') {
           setTimeout(() => {

docs/src/.vuepress/config.ts

@@ -228,6 +228,7 @@ export default defineUserConfig({
           { find: /^@tmagic\/form/, replacement: path.join(__dirname, '../../../packages/form/src/index.ts') },
           { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../../packages/utils/src/index.ts') },
           { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../../packages/schema/src/index.ts') },
+          { find: /^@tmagic\/design/, replacement: path.join(__dirname, '../../../packages/design/src/index.ts') },
           { find: /^@tmagic\/element-plus-adapter/, replacement: path.join(__dirname, '../../../packages/element-plus-adapter/src/index.ts') },
         ]
       },

packages/design/src/OptionGroup.vue

@@ -1,11 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component ref="optionGroup" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 import { getConfig } from './config';
 
@@ -17,4 +17,10 @@ const props = defineProps<{
 const uiComponent = getConfig('components').optionGroup;
 
 const uiProps = computed(() => uiComponent.props(props));
+
+const optionGroup = ref<any>();
+
+onMounted(() => {
+  optionGroup.value.visible = true;
+});
 </script>

packages/design/src/Popover.vue

@@ -0,0 +1,25 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <slot></slot>
+
+    <template #reference>
+      <slot name="reference"></slot>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  placement?: string;
+  width?: string;
+  trigger?: string;
+}>();
+
+const uiComponent = getConfig('components').popover;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>

packages/design/src/Table.vue

@@ -53,5 +53,9 @@ defineExpose({
   toggleRowSelection(...args: any[]) {
     table.value?.toggleRowSelection(...args);
   },
+
+  toggleRowExpansion(...args: any[]) {
+    table.value?.toggleRowExpansion(...args);
+  },
 });
 </script>

packages/design/src/Tag.vue

@@ -0,0 +1,20 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  type?: string;
+  closeTransition?: boolean;
+}>();
+
+const uiComponent = getConfig('components').tab;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>

packages/design/src/index.ts

@@ -1,9 +1,10 @@
 import { App } from 'vue';
 
 import { getConfig, setConfig } from './config';
-import { PluginOptions, TMagicMessage } from './type';
+import { PluginOptions, TMagicMessage, TMagicMessageBox } from './type';
 
 export * from './type';
+export * from './config';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 export { default as TMagicButton } from './Button.vue';
@@ -23,6 +24,7 @@ export { default as TMagicInputNumber } from './InputNumber.vue';
 export { default as TMagicOption } from './Option.vue';
 export { default as TMagicOptionGroup } from './OptionGroup.vue';
 export { default as TMagicPagination } from './Pagination.vue';
+export { default as TMagicPopover } from './Popover.vue';
 export { default as TMagicRadio } from './Radio.vue';
 export { default as TMagicRadioGroup } from './RadioGroup.vue';
 export { default as TMagicRow } from './Row.vue';
@@ -34,11 +36,13 @@ export { default as TMagicTable } from './Table.vue';
 export { default as TMagicTableColumn } from './TableColumn.vue';
 export { default as TMagicTabPane } from './TabPane.vue';
 export { default as TMagicTabs } from './Tabs.vue';
+export { default as TMagicTag } from './Tag.vue';
 export { default as TMagicTimePicker } from './TimePicker.vue';
 export { default as TMagicTooltip } from './Tooltip.vue';
 export { default as TMagicUpload } from './Upload.vue';
 
 export const tMagicMessage: TMagicMessage = getConfig('message') as TMagicMessage;
+export const tMagicMessageBox: TMagicMessageBox = getConfig('messageBox') as TMagicMessageBox;
 
 export default {
   install(app: App, options: PluginOptions) {

packages/design/src/type.ts

@@ -14,7 +14,26 @@ export interface TMagicMessage {
   error: (msg: string) => void;
 }
 
+export type ElMessageBoxShortcutMethod = ((
+  message: string,
+  title: string,
+  options?: any,
+  appContext?: any | null,
+) => Promise<any>) &
+  ((message: string, options?: any, appContext?: any | null) => Promise<any>);
+
+export interface TMagicMessageBox {
+  alert: ElMessageBoxShortcutMethod;
+
+  confirm: ElMessageBoxShortcutMethod;
+
+  prompt: ElMessageBoxShortcutMethod;
+
+  close(): void;
+}
+
 export interface PluginOptions {
   message?: TMagicMessage;
+  messageBox?: TMagicMessageBox;
   components?: Record<string, any>;
 }

packages/element-plus-adapter/src/index.ts

@@ -14,6 +14,7 @@ import {
   ElInput,
   ElInputNumber,
   ElMessage,
+  ElMessageBox,
   ElOption,
   ElOptionGroup,
   ElPagination,
@@ -35,6 +36,7 @@ import {
 
 const adapter: any = {
   message: ElMessage,
+  messageBox: ElMessageBox,
   components: {
     button: {
       component: ElButton,
@@ -176,6 +178,11 @@ const adapter: any = {
       props: (props: any) => props,
     },
 
+    tag: {
+      component: ElTabs,
+      props: (props: any) => props,
+    },
+
     timePicker: {
       component: ElTimePicker,
       props: (props: any) => props,

packages/form/src/fields/SelectOptionGroups.vue

@@ -1,22 +1,25 @@
 <template>
   <TMagicOptionGroup v-for="(group, index) in options" :key="index" :label="group.label" :disabled="group.disabled">
-    <TMagicOption
+    <component
       v-for="(item, index) in group.options"
+      :is="uiComponent.component"
       :key="index"
-      :label="item.label"
+      :label="item.label || item.text"
       :value="item.value"
       :disabled="item.disabled"
     >
-    </TMagicOption>
+    </component>
   </TMagicOptionGroup>
 </template>
 
 <script lang="ts" setup>
-import { TMagicOption, TMagicOptionGroup } from '@tmagic/design';
+import { getConfig, TMagicOptionGroup } from '@tmagic/design';
 
 import { SelectGroupOption } from '../schema';
 
 defineProps<{
   options: SelectGroupOption[];
 }>();
+
+const uiComponent = getConfig('components').option;
 </script>

packages/form/src/index.ts

@@ -18,8 +18,6 @@
 
 import { App } from 'vue';
 
-import TMagicDesign from '@tmagic/design';
-
 import Container from './containers/Container.vue';
 import Fieldset from './containers/Fieldset.vue';
 import GroupList from './containers/GroupList.vue';
@@ -87,8 +85,6 @@ export { default as MDynamicField } from './fields/DynamicField.vue';
 const defaultInstallOpt = {};
 
 const install = (app: App, opt: any) => {
-  app.use(TMagicDesign, opt.uiAdapter);
-
   const option = Object.assign(defaultInstallOpt, opt);
 
   // eslint-disable-next-line no-param-reassign

packages/form/src/schema.ts

@@ -215,7 +215,8 @@ export interface SelectGroupOption {
   disabled: boolean;
   options: {
     /** 选项的标签 */
-    label: string;
+    label?: string;
+    text?: string;
     /** 选项的值 */
     value: any;
     /** 是否禁用该选项 */

packages/table/package.json

@@ -32,6 +32,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/design": "1.2.0-beta.2",
     "@tmagic/form": "1.2.0-beta.2",
     "@tmagic/utils": "1.2.0-beta.2",
     "element-plus": "^2.2.17",

packages/table/src/ActionsColumn.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-table-column :label="config.label" :width="config.width" :fixed="config.fixed">
+  <TMagicTableColumn :label="config.label" :width="config.width" :fixed="config.fixed">
     <template v-slot="scope">
-      <el-button
+      <TMagicButton
         v-for="(action, actionIndex) in config.actions"
         v-show="display(action.display, scope.row) && !editState[scope.$index]"
         v-html="action.text"
@@ -11,60 +11,48 @@
         size="small"
         :key="actionIndex"
         @click="actionHandler(action, scope.row, scope.$index)"
-      ></el-button>
-      <el-button
+      ></TMagicButton>
+      <TMagicButton
         class="action-btn"
         v-show="editState[scope.$index]"
         text
         type="primary"
         size="small"
         @click="save(scope.$index, config)"
-        >保存</el-button
+        >保存</TMagicButton
       >
-      <el-button
+      <TMagicButton
         class="action-btn"
         v-show="editState[scope.$index]"
         text
         type="primary"
         size="small"
         @click="editState[scope.$index] = undefined"
-        >取消</el-button
+        >取消</TMagicButton
       >
     </template>
-  </el-table-column>
+  </TMagicTableColumn>
 </template>
 
-<script lang="ts">
-import { PropType } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+<script lang="ts" setup>
+import { TMagicButton, tMagicMessage, tMagicMessageBox, TMagicTableColumn } from '@tmagic/design';
 
 import { ColumnActionConfig, ColumnConfig } from './schema';
-</script>
 
-<script lang="ts" setup>
-const props = defineProps({
-  columns: {
-    type: Array as PropType<any[]>,
-    require: true,
-    default: () => [],
+const props = withDefaults(
+  defineProps<{
+    columns: any[];
+    config: ColumnConfig;
+    rowkeyName?: string;
+    editState?: any;
+  }>(),
+  {
+    columns: () => [],
+    config: () => ({}),
+    rowkeyName: 'c_id',
+    editState: () => [],
   },
-
-  config: {
-    type: Object as PropType<ColumnConfig>,
-    require: true,
-    default: () => {},
-  },
-
-  rowkeyName: {
-    type: String,
-    default: 'c_id',
-  },
-
-  editState: {
-    type: Object,
-    default: () => {},
-  },
-});
+);
 
 const emit = defineEmits(['afterAction']);
 
@@ -76,14 +64,14 @@ const display = (fuc: boolean | Function | undefined, row: any) => {
 };
 
 const success = (msg: string, action: ColumnActionConfig, row: any) => {
-  ElMessage.success(msg);
+  tMagicMessage.success(msg);
   action.after?.(row);
 };
 
-const error = (msg: string) => ElMessage.error(msg);
+const error = (msg: string) => tMagicMessage.error(msg);
 
 const deleteAction = async (action: ColumnActionConfig, row: any) => {
-  await ElMessageBox.confirm(`确认删除${row[action.name || 'c_name']}(${row[props.rowkeyName]})?`, '提示', {
+  await tMagicMessageBox.confirm(`确认删除${row[action.name || 'c_name']}(${row[props.rowkeyName]})?`, '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',
@@ -99,7 +87,7 @@ const deleteAction = async (action: ColumnActionConfig, row: any) => {
 };
 
 const copyHandler = async (action: ColumnActionConfig, row: any) => {
-  await ElMessageBox.confirm(`确定复制${row[action.name || 'c_name']}(${row.c_id})?`, '提示', {
+  await tMagicMessageBox.confirm(`确定复制${row[action.name || 'c_name']}(${row.c_id})?`, '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',
@@ -150,16 +138,11 @@ const save = async (index: number, config: ColumnConfig) => {
 
   if (res) {
     if (res.ret === 0) {
-      ElMessage.success('保存成功');
+      tMagicMessage.success('保存成功');
       props.editState[index] = undefined;
       emit('afterAction');
     } else {
-      ElMessage.error({
-        duration: 10000,
-        showClose: true,
-        dangerouslyUseHTMLString: true,
-        message: res.msg || '保存失败',
-      });
+      tMagicMessage.error(res.msg || '保存失败');
     }
   } else {
     props.editState[index] = undefined;

packages/table/src/ExpandColumn.vue

@@ -1,37 +1,34 @@
 <template>
-  <el-table-column type="expand">
+  <TMagicTableColumn type="expand">
     <template #default="scope">
-      <m-table
+      <MTable
         v-if="config.table"
         :show-header="false"
         :columns="config.table"
-        :data="scope.row[config.prop]"
-      ></m-table>
-      <m-form
+        :data="(config.prop && scope.row[config.prop]) || []"
+      ></MTable>
+      <MForm
         v-if="config.form"
         :config="config.form"
-        :init-values="config.values || scope.row[config.prop] || {}"
-      ></m-form>
+        :init-values="config.values || (config.prop && scope.row[config.prop]) || {}"
+      ></MForm>
     </template>
-  </el-table-column>
+  </TMagicTableColumn>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
+<script lang="ts" setup>
+import { TMagicTableColumn } from '@tmagic/design';
 import { MForm } from '@tmagic/form';
 
 import { ColumnConfig } from './schema';
+import MTable from './Table.vue';
 
-export default defineComponent({
-  components: { MForm },
-
-  props: {
-    config: {
-      type: Object as PropType<ColumnConfig>,
-      default: () => ({}),
-      required: true,
-    },
+withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+  }>(),
+  {
+    config: () => ({}),
   },
-});
+);
 </script>

packages/table/src/PopoverColumn.vue

@@ -1,40 +1,39 @@
 <template>
-  <el-table-column :label="config.label" :width="config.width" :fixed="config.fixed">
+  <TMagicTableColumn :label="config.label" :width="config.width" :fixed="config.fixed">
     <template v-slot="scope">
-      <el-popover :placement="config.popover.placement" :width="config.popover.width" :trigger="config.popover.trigger">
-        <m-table
+      <TMagicPopover
+        v-if="config.popover"
+        :placement="config.popover.placement"
+        :width="config.popover.width"
+        :trigger="config.popover.trigger"
+      >
+        <MTable
           v-if="config.popover.tableEmbed"
           :show-header="config.showHeader"
           :columns="config.table"
-          :data="scope.row[config.prop]"
-        ></m-table>
+          :data="(config.prop && scope.row[config.prop]) || []"
+        ></MTable>
         <template #reference>
-          <el-button text type="primary"> {{ config.text || formatter(config, scope.row) }}</el-button>
+          <TMagicButton text type="primary"> {{ config.text || formatter(config, scope.row) }}</TMagicButton>
         </template>
-      </el-popover>
+      </TMagicPopover>
     </template>
-  </el-table-column>
+  </TMagicTableColumn>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { TMagicButton, TMagicPopover, TMagicTableColumn } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
+import MTable from './Table.vue';
 import { formatter } from './utils';
 
-export default defineComponent({
-  props: {
-    config: {
-      type: Object as PropType<ColumnConfig>,
-      default: () => ({}),
-      required: true,
-    },
+withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+  }>(),
+  {
+    config: () => ({}),
   },
-
-  setup() {
-    return {
-      formatter,
-    };
-  },
-});
+);
 </script>

packages/table/src/Table.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-table
+  <TMagicTable
     tooltip-effect="dark"
     class="m-table"
-    ref="table"
+    ref="tMagicTable"
     v-loading="loading"
     :data="tableData"
     :show-header="showHeader"
@@ -20,187 +20,151 @@
   >
     <template v-for="(item, columnIndex) in columns">
       <template v-if="item.type === 'expand'">
-        <expand-column :config="item" :key="columnIndex"></expand-column>
+        <ExpandColumn :config="item" :key="columnIndex"></ExpandColumn>
       </template>
 
       <template v-else-if="item.selection">
-        <el-table-column type="selection" :key="columnIndex" width="40" :selectable="item.selectable"></el-table-column>
+        <TMagicTableColumn
+          type="selection"
+          :key="columnIndex"
+          width="40"
+          :selectable="item.selectable"
+        ></TMagicTableColumn>
       </template>
 
       <template v-else-if="item.actions">
-        <actions-column
+        <ActionsColumn
           :columns="columns"
           :config="item"
           :rowkey-name="rowkeyName"
           :edit-state="editState"
           :key="columnIndex"
           @afterAction="$emit('afterAction')"
-        ></actions-column>
+        ></ActionsColumn>
       </template>
 
       <template v-else-if="item.type === 'popover'">
-        <popover-column :key="columnIndex" :config="item"></popover-column>
+        <PopoverColumn :key="columnIndex" :config="item"></PopoverColumn>
       </template>
 
       <template v-else>
-        <text-column :key="columnIndex" :config="item" :edit-state="editState"></text-column>
+        <TextColumn :key="columnIndex" :config="item" :edit-state="editState"></TextColumn>
       </template>
     </template>
-  </el-table>
+  </TMagicTable>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { ElTable } from 'element-plus';
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import { TMagicTable, TMagicTableColumn } from '@tmagic/design';
+
 import ActionsColumn from './ActionsColumn.vue';
 import ExpandColumn from './ExpandColumn.vue';
 import PopoverColumn from './PopoverColumn.vue';
 import TextColumn from './TextColumn.vue';
 
-export default defineComponent({
-  name: 'm-table',
-
-  components: { ExpandColumn, ActionsColumn, PopoverColumn, TextColumn },
-
-  props: {
-    data: {
-      type: Array,
-      require: true,
-    },
-
-    columns: {
-      type: Array as PropType<any[]>,
-      require: true,
-      default: () => [],
-    },
-
+const props = withDefaults(
+  defineProps<{
+    data: any[];
+    columns?: any[];
     /** 合并行或列的计算方法 */
-    spanMethod: {
-      type: Function as PropType<
-        (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number]
-      >,
-    },
-
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-
+    spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];
+    loading?: boolean;
     /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */
-    bodyHeight: {
-      type: [String, Number],
-    },
-
+    bodyHeight?: string | number;
     /** 是否显示表头 */
-    showHeader: {
-      type: Boolean,
-      default: true,
-    },
-
+    showHeader?: boolean;
     /** 空数据时显示的文本内容 */
-    emptyText: {
-      type: String,
-    },
-
+    emptyText?: string;
     /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
-    defaultExpandAll: {
-      type: Boolean,
-      default: false,
-    },
-
-    rowkeyName: {
-      type: String,
-    },
-
+    defaultExpandAll?: boolean;
+    rowkeyName?: string;
     /** 是否带有纵向边框 */
-    border: {
-      type: Boolean,
-      default: false,
-    },
+    border?: boolean;
+  }>(),
+  {
+    columns: () => [],
+    loading: false,
+    showHeader: true,
+    defaultExpandAll: false,
+    border: false,
   },
+);
 
-  emits: ['sort-change', 'afterAction', 'select', 'select-all', 'selection-change'],
+const emit = defineEmits(['sort-change', 'afterAction', 'select', 'select-all', 'selection-change']);
 
-  data(): {
-    editState: any[];
-  } {
-    return {
-      editState: [],
-    };
-  },
+const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
 
-  computed: {
-    tableData() {
-      if (this.selectionColumn) {
-        return this.data || [];
-      }
+const editState = ref([]);
 
-      return cloneDeep(this.data) || [];
-    },
+const selectionColumn = computed(() => {
+  const column = props.columns.filter((item) => item.selection);
+  return column.length ? column[0] : null;
+});
 
-    selectionColumn() {
-      const column = this.columns.filter((item) => item.selection);
-      return column.length ? column[0] : null;
-    },
+const tableData = computed(() => {
+  if (selectionColumn.value) {
+    return props.data || [];
+  }
 
-    hasBorder() {
-      return typeof this.border !== 'undefined' ? this.border : true;
-    },
-  },
+  return cloneDeep(props.data) || [];
+});
 
-  methods: {
-    sortChange(data: any) {
-      this.$emit('sort-change', data);
-    },
+const hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));
 
-    selectHandler(selection: any, row: any) {
-      const column = this.selectionColumn;
-      if (!column) {
-        return;
-      }
+const sortChange = (data: any) => {
+  emit('sort-change', data);
+};
 
-      if (column.selection === 'single') {
-        // this.clearSelection()
-        // this.toggleRowSelection(row, true)
-      }
-      this.$emit('select', selection, row);
-    },
+const selectHandler = (selection: any, row: any) => {
+  const column = selectionColumn.value;
+  if (!column) {
+    return;
+  }
 
-    selectAllHandler(selection: any) {
-      this.$emit('select-all', selection);
-    },
+  if (column.selection === 'single') {
+    // this.clearSelection()
+    // this.toggleRowSelection(row, true)
+  }
+  emit('select', selection, row);
+};
 
-    selectionChangeHandler(selection: any) {
-      this.$emit('selection-change', selection);
-    },
+const selectAllHandler = (selection: any) => {
+  emit('select-all', selection);
+};
 
-    toggleRowSelection(row: any, selected: boolean) {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.toggleRowSelection.bind(table)(row, selected);
-    },
+const selectionChangeHandler = (selection: any) => {
+  emit('selection-change', selection);
+};
 
-    toggleRowExpansion(row: any, expanded: boolean) {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.toggleRowExpansion.bind(table)(row, expanded);
-    },
+const toggleRowSelection = (row: any, selected: boolean) => {
+  tMagicTable.value?.toggleRowSelection(row, selected);
+};
 
-    clearSelection() {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.clearSelection.bind(table)();
-    },
+const toggleRowExpansion = (row: any, expanded: boolean) => {
+  tMagicTable.value?.toggleRowExpansion(row, expanded);
+};
 
-    objectSpanMethod(data: any) {
-      if (typeof this.spanMethod === 'function') {
-        return this.spanMethod(data);
-      }
-      return () => ({
-        rowspan: 0,
-        colspan: 0,
-      });
-    },
-  },
+const clearSelection = () => {
+  tMagicTable.value?.clearSelection();
+};
+
+const objectSpanMethod = (data: any) => {
+  if (typeof props.spanMethod === 'function') {
+    return props.spanMethod(data);
+  }
+  return () => ({
+    rowspan: 0,
+    colspan: 0,
+  });
+};
+
+defineExpose({
+  toggleRowSelection,
+  toggleRowExpansion,
+  clearSelection,
 });
 </script>
 

packages/table/src/TextColumn.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-table-column
+  <TMagicTableColumn
     show-overflow-tooltip
     :label="config.label"
     :width="config.width"
@@ -8,7 +8,7 @@
     :prop="config.prop"
   >
     <template v-slot="scope">
-      <el-form v-if="config.type && editState[scope.$index]" label-width="0" :model="editState[scope.$index]">
+      <TMagicForm v-if="config.type && editState[scope.$index]" label-width="0" :model="editState[scope.$index]">
         <m-form-container
           :prop="config.prop"
           :rules="config.rules"
@@ -16,62 +16,61 @@
           :name="config.prop"
           :model="editState[scope.$index]"
         ></m-form-container>
-      </el-form>
+      </TMagicForm>
 
-      <el-button v-else-if="config.action === 'actionLink'" text type="primary" @click="config.handler(scope.row)">
+      <TMagicButton
+        v-else-if="config.action === 'actionLink' && config.prop"
+        text
+        type="primary"
+        @click="config.handler?.(scope.row)"
+      >
         {{ formatter(config, scope.row) }}
-      </el-button>
+      </TMagicButton>
 
-      <a v-else-if="config.action === 'img'" target="_blank" :href="scope.row[config.prop]"
+      <a v-else-if="config.action === 'img' && config.prop" target="_blank" :href="scope.row[config.prop]"
         ><img :src="scope.row[config.prop]" height="50"
       /></a>
 
-      <a v-else-if="config.action === 'link'" target="_blank" :href="scope.row[config.prop]" class="keep-all">{{
-        scope.row[config.prop]
-      }}</a>
+      <a
+        v-else-if="config.action === 'link' && config.prop"
+        target="_blank"
+        :href="scope.row[config.prop]"
+        class="keep-all"
+        >{{ scope.row[config.prop] }}</a
+      >
 
       <el-tooltip v-else-if="config.action === 'tip'" placement="left">
         <template #content>
           <div>{{ formatter(config, scope.row) }}</div>
         </template>
-        <el-button text type="primary">扩展配置</el-button>
+        <TMagicButton text type="primary">扩展配置</TMagicButton>
       </el-tooltip>
 
-      <el-tag
-        v-else-if="config.action === 'tag'"
+      <TMagicTag
+        v-else-if="config.action === 'tag' && config.prop"
         :type="typeof config.type === 'function' ? config.type(scope.row[config.prop], scope.row) : config.type"
         close-transition
-        >{{ formatter(config, scope.row) }}</el-tag
+        >{{ formatter(config, scope.row) }}</TMagicTag
       >
       <div v-else v-html="formatter(config, scope.row)"></div>
     </template>
-  </el-table-column>
+  </TMagicTableColumn>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { TMagicButton, TMagicForm, TMagicTableColumn, TMagicTag } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
 import { formatter } from './utils';
 
-export default defineComponent({
-  props: {
-    config: {
-      type: Object as PropType<ColumnConfig>,
-      default: () => ({}),
-      required: true,
-    },
-
-    editState: {
-      type: Object,
-      default: () => {},
-    },
+withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+    editState?: any;
+  }>(),
+  {
+    config: () => ({}),
+    editState: () => ({}),
   },
-
-  setup() {
-    return {
-      formatter,
-    };
-  },
-});
+);
 </script>

packages/table/src/index.ts

@@ -22,12 +22,8 @@ import Table from './Table.vue';
 
 export { default as MagicTable } from './Table.vue';
 
-const components = [Table];
-
 export default {
   install(app: App) {
-    components.forEach((component) => {
-      app.component(component.name, component);
-    });
+    app.component('m-table', Table);
   },
 };

packages/table/src/schema.ts

@@ -35,23 +35,23 @@ export type ColumnConfig = {
   values?: FormValue;
   selection?: boolean | 'single';
   selectable?: (row: any, index: number) => boolean;
-  label: string;
+  label?: string;
   fixed?: 'left' | 'right' | boolean;
   width?: number | string;
   actions?: ColumnActionConfig[];
-  type: 'popover' | 'expand' | string | ((value: any, row: any) => string);
-  text: string;
-  prop: string;
-  showHeader: boolean;
+  type?: 'popover' | 'expand' | string | ((value: any, row: any) => string);
+  text?: string;
+  prop?: string;
+  showHeader?: boolean;
   table?: ColumnConfig[];
   formatter?: 'datetime' | ((item: any, row: Record<string, any>) => any);
-  popover: {
-    placement: '';
-    width: '';
-    trigger: '';
-    tableEmbed: '';
+  popover?: {
+    placement: string;
+    width: string;
+    trigger: string;
+    tableEmbed: string;
   };
   sortable?: boolean | 'custom';
   action?: 'tip' | 'actionLink' | 'img' | 'link' | 'tag';
-  handler: (row: any) => void;
+  handler?: (row: any) => void;
 };

packages/table/src/utils.ts

@@ -21,6 +21,8 @@ import { datetimeFormatter } from '@tmagic/utils';
 import { ColumnConfig } from './schema';
 
 export const formatter = (item: ColumnConfig, row: any) => {
+  if (!item.prop) return '';
+
   if (item.formatter) {
     if (item.formatter === 'datetime') {
       // eslint-disable-next-line no-param-reassign

packages/table/vite.config.ts

@@ -30,7 +30,10 @@ export default defineConfig({
     alias:
       process.env.NODE_ENV === 'production'
         ? []
-        : [{ find: /^@tmagic\/form/, replacement: path.join(__dirname, '../form/src/index.ts') }],
+        : [
+            { find: /^@tmagic\/form/, replacement: path.join(__dirname, '../form/src/index.ts') },
+            { find: /^@tmagic\/design/, replacement: path.join(__dirname, '../form/design/index.ts') },
+          ],
   },
 
   build: {

playground/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
+    "@tmagic/design": "1.2.0-beta.2",
     "@tmagic/editor": "1.2.0-beta.2",
     "@tmagic/element-plus-adapter": "1.2.0-beta.2",
     "@tmagic/form": "1.2.0-beta.2",

playground/src/main.ts

@@ -26,6 +26,7 @@ import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 
+import TMagicDesign from '@tmagic/design';
 import MagicEditor from '@tmagic/editor';
 import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
 import MagicForm from '@tmagic/form';
@@ -63,9 +64,8 @@ app.use(router);
 app.use(ElementPlus, {
   locale: zhCn,
 });
+app.use(TMagicDesign, MagicElementPlusAdapter);
 app.use(MagicEditor);
-app.use(MagicForm, {
-  uiAdapter: MagicElementPlusAdapter,
-});
+app.use(MagicForm);
 app.use(MagicTable);
 app.mount('#app');

pnpm-lock.yaml

@@ -77,6 +77,7 @@ importers:
   docs:
     specifiers:
       '@element-plus/icons-vue': ^2.0.9
+      '@tmagic/design': 1.2.0-beta.2
       '@tmagic/element-plus-adapter': 1.2.0-beta.2
       '@tmagic/form': 1.2.0-beta.2
       '@tmagic/schema': 1.2.0-beta.2
@@ -96,6 +97,7 @@ importers:
       vuepress: ^2.0.0-beta.51
     dependencies:
       '@element-plus/icons-vue': 2.0.9_vue@3.2.37
+      '@tmagic/design': link:../packages/design
       '@tmagic/element-plus-adapter': link:../packages/element-plus-adapter
       '@tmagic/form': link:../packages/form
       '@tmagic/schema': link:../packages/schema
@@ -354,6 +356,7 @@ importers:
 
   packages/table:
     specifiers:
+      '@tmagic/design': 1.2.0-beta.2
       '@tmagic/form': 1.2.0-beta.2
       '@tmagic/utils': 1.2.0-beta.2
       '@types/color': ^3.0.1
@@ -371,6 +374,7 @@ importers:
       vue: ^3.2.37
       vue-tsc: ^0.39.4
     dependencies:
+      '@tmagic/design': link:../design
       '@tmagic/form': link:../form
       '@tmagic/utils': link:../utils
       element-plus: 2.2.17_vue@3.2.37
@@ -476,6 +480,7 @@ importers:
   playground:
     specifiers:
       '@element-plus/icons-vue': ^2.0.9
+      '@tmagic/design': 1.2.0-beta.2
       '@tmagic/editor': 1.2.0-beta.2
       '@tmagic/element-plus-adapter': 1.2.0-beta.2
       '@tmagic/form': 1.2.0-beta.2
@@ -500,6 +505,7 @@ importers:
       vue-tsc: ^0.39.4
     dependencies:
       '@element-plus/icons-vue': 2.0.9_vue@3.2.37
+      '@tmagic/design': link:../packages/design
       '@tmagic/editor': link:../packages/editor
       '@tmagic/element-plus-adapter': link:../packages/element-plus-adapter
       '@tmagic/form': link:../packages/form