@tmagic/table 1.0.0-beta.1

package/src/Table.vue

@@ -0,0 +1,224 @@
+<template>
+  <el-table
+    :data="tableData"
+    :show-header="showHeader"
+    :max-height="bodyHeight"
+    tooltip-effect="dark"
+    class="m-table"
+    ref="table"
+    :default-expand-all="defaultExpandAll"
+    :border="hasBorder"
+    :row-key="rowkeyName || 'c_id'"
+    :tree-props="{ children: 'children' }"
+    :empty-text="emptyText || '暂无数据'"
+    :span-method="objectSpanMethod"
+    @sort-change="sortChange"
+    @select="selectHandler"
+    @select-all="selectAllHandler"
+    @selection-change="selectionChangeHandler"
+  >
+    <template v-for="(item, columnIndex) in columns">
+      <template v-if="item.type === 'expand'">
+        <expand-column :config="item" :key="columnIndex"></expand-column>
+      </template>
+
+      <template v-if="item.selection">
+        <el-table-column type="selection" :key="columnIndex" width="40" :selectable="item.selectable"></el-table-column>
+      </template>
+
+      <template v-else-if="item.actions">
+        <actions-column
+          :columns="columns"
+          :config="item"
+          :rowkey-name="rowkeyName"
+          :edit-state="editState"
+          :key="columnIndex"
+          @afterAction="$emit('afterAction')"
+        ></actions-column>
+      </template>
+
+      <template v-else-if="item.type === 'popover'">
+        <popover-column :key="columnIndex" :config="item"></popover-column>
+      </template>
+
+      <template v-else>
+        <text-column :key="columnIndex" :config="item" :edit-state="editState"></text-column>
+      </template>
+    </template>
+  </el-table>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { ElTable } from 'element-plus';
+import { cloneDeep } from 'lodash-es';
+
+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: () => [],
+    },
+
+    /** 合并行或列的计算方法 */
+    spanMethod: {
+      type: Function as PropType<
+        (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number]
+      >,
+    },
+
+    fetch: {
+      type: Boolean,
+      default: false,
+    },
+
+    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */
+    bodyHeight: {
+      type: [String, Number],
+    },
+
+    /** 是否显示表头 */
+    showHeader: {
+      type: Boolean,
+    },
+
+    /** 空数据时显示的文本内容 */
+    emptyText: {
+      type: String,
+    },
+
+    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
+    defaultExpandAll: {
+      type: Boolean,
+      default: false,
+    },
+
+    rowkeyName: {
+      type: String,
+    },
+
+    /** 是否带有纵向边框 */
+    border: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['sort-change', 'afterAction', 'select', 'select-all', 'selection-change'],
+
+  data(): {
+    editState: any[];
+  } {
+    return {
+      editState: [],
+    };
+  },
+
+  computed: {
+    tableData() {
+      if (this.selectionColumn) {
+        return this.data || [];
+      }
+
+      return cloneDeep(this.data) || [];
+    },
+
+    selectionColumn() {
+      const column = this.columns.filter((item) => item.selection);
+      return column.length ? column[0] : null;
+    },
+
+    hasBorder() {
+      return typeof this.border !== 'undefined' ? this.border : true;
+    },
+  },
+
+  methods: {
+    sortChange(data: any) {
+      this.$emit('sort-change', data);
+    },
+
+    selectHandler(selection: any, row: any) {
+      const column = this.selectionColumn;
+      if (!column) {
+        return;
+      }
+
+      if (column.selection === 'single') {
+        // this.clearSelection()
+        // this.toggleRowSelection(row, true)
+      }
+      this.$emit('select', selection, row);
+    },
+
+    selectAllHandler(selection: any) {
+      this.$emit('select-all', selection);
+    },
+
+    selectionChangeHandler(selection: any) {
+      this.$emit('selection-change', selection);
+    },
+
+    toggleRowSelection(row: any, selected: boolean) {
+      const table = this.$refs.table as InstanceType<typeof ElTable>;
+      table.toggleRowSelection.bind(table)(row, selected);
+    },
+
+    toggleRowExpansion(row: any, expanded: boolean) {
+      const table = this.$refs.table as InstanceType<typeof ElTable>;
+      table.toggleRowExpansion.bind(table)(row, expanded);
+    },
+
+    clearSelection() {
+      const table = this.$refs.table as InstanceType<typeof ElTable>;
+      table.clearSelection.bind(table)();
+    },
+
+    objectSpanMethod(data: any) {
+      if (typeof this.spanMethod === 'function') {
+        return this.spanMethod(data);
+      }
+      return () => ({
+        rowspan: 0,
+        colspan: 0,
+      });
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+.m-table {
+  .el-button.action-btn {
+    margin-right: 10px;
+  }
+  .el-button.action-btn + .el-button.action-btn {
+    margin-left: 0;
+  }
+  .keep-all {
+    word-break: keep-all;
+  }
+  .el-table .cell > div {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .el-table__row.el-table__row--level-1 {
+    color: #999;
+  }
+}
+</style>

package/src/TextColumn.vue

@@ -0,0 +1,77 @@
+<template>
+  <el-table-column
+    show-overflow-tooltip
+    :label="config.label"
+    :width="config.width"
+    :fixed="config.fixed"
+    :sortable="config.sortable"
+    :prop="config.prop"
+  >
+    <template v-slot="scope">
+      <el-form v-if="config.type && editState[scope.$index]" label-width="0" :model="editState[scope.$index]">
+        <m-form-container
+          :prop="config.prop"
+          :rules="config.rules"
+          :config="config"
+          :name="config.prop"
+          :model="editState[scope.$index]"
+        ></m-form-container>
+      </el-form>
+
+      <el-button v-else-if="config.action === 'actionLink'" type="text" @click="config.handler(scope.row)">
+        {{ formatter(config, scope.row) }}
+      </el-button>
+
+      <a v-else-if="config.action === 'img'" 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>
+
+      <el-tooltip v-else-if="config.action === 'tip'" placement="left">
+        <template #content>
+          <div>{{ formatter(config, scope.row) }}</div>
+        </template>
+        <el-button type="text">扩展配置</el-button>
+      </el-tooltip>
+
+      <el-tag
+        v-else-if="config.action === 'tag'"
+        :type="typeof config.type === 'function' ? config.type(scope.row[config.prop], scope.row) : config.type"
+        close-transition
+        >{{ formatter(config, scope.row) }}</el-tag
+      >
+      <div v-else v-html="formatter(config, scope.row)"></div>
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+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: () => {},
+    },
+  },
+
+  setup() {
+    return {
+      formatter,
+    };
+  },
+});
+</script>

package/src/index.ts

@@ -0,0 +1,33 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { App } from 'vue';
+
+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);
+    });
+  },
+};

package/src/schema.ts

@@ -0,0 +1,56 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormConfig, FormValue } from '@tmagic/form';
+
+export interface ColumnActionConfig {
+  type?: 'delete' | 'copy' | 'edit';
+  display?: (vm: any, row: any) => boolean;
+  text: string;
+  name: string;
+  handler?: (row: any) => Promise<any> | any;
+  after?: () => void;
+  action?: (data: { data: any }) => void;
+}
+
+export type ColumnConfig = {
+  form?: FormConfig;
+  rules?: any;
+  values?: FormValue;
+  selection?: boolean | 'single';
+  selectable?: (row: any, index: number) => boolean;
+  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;
+  table?: ColumnConfig[];
+  formatter?: 'datetime' | ((item: any, row: Record<string, any>) => any);
+  popover: {
+    placement: '';
+    width: '';
+    trigger: '';
+    tableEmbed: '';
+  };
+  sortable?: boolean | 'custom';
+  action?: 'tip' | 'actionLink' | 'img' | 'link' | 'tag';
+  handler: (row: any) => void;
+};

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/src/utils.ts

@@ -0,0 +1,37 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { datetimeFormatter } from '@tmagic/utils';
+
+import { ColumnConfig } from './schema';
+
+export const formatter = (item: ColumnConfig, row: any) => {
+  if (item.formatter) {
+    if (item.formatter === 'datetime') {
+      // eslint-disable-next-line no-param-reassign
+      item.formatter = (value: string) => datetimeFormatter(value);
+    }
+    try {
+      return item.formatter(row[item.prop], row);
+    } catch (e) {
+      return row[item.prop];
+    }
+  } else {
+    return row[item.prop];
+  }
+};

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../..",
+  },
+  "exclude": [
+    "**/dist/**/*"
+  ],
+}

package/vite.config.ts

@@ -0,0 +1,27 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig } from 'vite';
+
+import { getBaseConfig } from '../vite-config';
+
+import pkg from './package.json';
+
+const deps = Object.keys(pkg.dependencies);
+
+export default defineConfig(getBaseConfig(deps, 'TMagicTable'));