@tmagic/table 1.4.8 → 1.4.9

package/package.json

@@ -1,10 +1,7 @@
 {
-  "version": "1.4.8",
+  "version": "1.4.9",
   "name": "@tmagic/table",
   "type": "module",
-  "sideEffects": [
-    "dist/*"
-  ],
   "main": "dist/tmagic-table.umd.cjs",
   "module": "dist/tmagic-table.js",
   "types": "types/index.d.ts",
@@ -22,7 +19,8 @@
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "src"
   ],
   "license": "Apache-2.0",
   "engines": {
@@ -49,9 +47,9 @@
   "peerDependencies": {
     "vue": "^3.4.27",
     "typescript": "*",
-    "@tmagic/design": "1.4.8",
-    "@tmagic/form": "1.4.8",
-    "@tmagic/utils": "1.4.8"
+    "@tmagic/form": "1.4.9",
+    "@tmagic/utils": "1.4.9",
+    "@tmagic/design": "1.4.9"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ActionsColumn.vue

@@ -0,0 +1,123 @@
+<template>
+  <TMagicTableColumn :label="config.label" :width="config.width" :fixed="config.fixed">
+    <template v-slot="scope">
+      <TMagicTooltip
+        v-for="(action, actionIndex) in config.actions"
+        :placement="action.tooltipPlacement || 'top'"
+        :key="actionIndex"
+        :disabled="!Boolean(action.tooltip)"
+        :content="action.tooltip"
+      >
+        <TMagicButton
+          v-show="display(action.display, scope.row) && !editState[scope.$index]"
+          class="action-btn"
+          link
+          size="small"
+          :type="action.buttonType || 'primary'"
+          :icon="action.icon"
+          @click="actionHandler(action, scope.row, scope.$index)"
+          ><span v-html="formatter(action.text, scope.row)"></span
+        ></TMagicButton>
+      </TMagicTooltip>
+      <TMagicButton
+        class="action-btn"
+        v-show="editState[scope.$index]"
+        link
+        type="primary"
+        size="small"
+        @click="save(scope.$index, config)"
+        >保存</TMagicButton
+      >
+      <TMagicButton
+        class="action-btn"
+        v-show="editState[scope.$index]"
+        link
+        type="primary"
+        size="small"
+        @click="editState[scope.$index] = undefined"
+        >取消</TMagicButton
+      >
+    </template>
+  </TMagicTableColumn>
+</template>
+
+<script lang="ts" setup>
+import { TMagicButton, tMagicMessage, TMagicTableColumn, TMagicTooltip } from '@tmagic/design';
+
+import { ColumnActionConfig, ColumnConfig } from './schema';
+
+defineOptions({
+  name: 'MTableActionsColumn',
+});
+
+const props = withDefaults(
+  defineProps<{
+    columns: any[];
+    config: ColumnConfig;
+    rowkeyName?: string;
+    editState?: any;
+  }>(),
+  {
+    columns: () => [],
+    config: () => ({}),
+    rowkeyName: 'c_id',
+    editState: () => [],
+  },
+);
+
+const emit = defineEmits(['after-action']);
+
+const display = (fuc: boolean | Function | undefined, row: any) => {
+  if (typeof fuc === 'function') {
+    return fuc(row);
+  }
+  return true;
+};
+
+const formatter = (fuc: string | Function | undefined, row: any) => {
+  if (typeof fuc === 'function') {
+    return fuc(row);
+  }
+  return fuc;
+};
+
+const actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {
+  await action.before?.(row, index);
+  if (action.type === 'edit') {
+    props.editState[index] = row;
+  } else {
+    await action.handler?.(row, index);
+  }
+  action.after?.(row, index);
+};
+
+const save = async (index: number, config: ColumnConfig) => {
+  const action = config.actions?.find((item) => item.type === 'edit')?.action;
+  if (!action) return;
+
+  const data: any = {};
+  const row = props.editState[index];
+  props.columns
+    .filter((item) => item.type)
+    .forEach((column) => {
+      data[column.prop] = row[column.prop];
+    });
+
+  const res: any = await action({
+    data,
+  });
+
+  if (res) {
+    if (res.ret === 0) {
+      tMagicMessage.success('保存成功');
+      props.editState[index] = undefined;
+      emit('after-action');
+    } else {
+      tMagicMessage.error(res.msg || '保存失败');
+    }
+  } else {
+    props.editState[index] = undefined;
+    emit('after-action');
+  }
+};
+</script>

package/src/ComponentColumn.vue

@@ -0,0 +1,51 @@
+<template>
+  <TMagicTableColumn
+    show-overflow-tooltip
+    :label="config.label"
+    :width="config.width"
+    :fixed="config.fixed"
+    :sortable="config.sortable"
+    :prop="config.prop"
+  >
+    <template v-slot="scope">
+      <component
+        :is="config.component"
+        v-bind="componentProps(scope.row, scope.$index)"
+        v-on="componentListeners(scope.row, scope.$index)"
+      ></component>
+    </template>
+  </TMagicTableColumn>
+</template>
+
+<script lang="ts" setup>
+import { TMagicTableColumn } from '@tmagic/design';
+
+import { ColumnConfig } from './schema';
+
+defineOptions({
+  name: 'MTableColumn',
+});
+
+const props = withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+  }>(),
+  {
+    config: () => ({}),
+  },
+);
+
+const componentProps = (row: any, index: number) => {
+  if (typeof props.config.props === 'function') {
+    return props.config.props(row, index) || {};
+  }
+  return props.config.props || {};
+};
+
+const componentListeners = (row: any, index: number) => {
+  if (typeof props.config.listeners === 'function') {
+    return props.config.listeners(row, index) || {};
+  }
+  return props.config.listeners || {};
+};
+</script>

package/src/ExpandColumn.vue

@@ -0,0 +1,47 @@
+<template>
+  <TMagicTableColumn type="expand">
+    <template #default="scope">
+      <MTable
+        v-if="config.table"
+        :show-header="false"
+        :columns="config.table"
+        :data="(config.prop && scope.row[config.prop]) || []"
+      ></MTable>
+      <MForm
+        v-if="config.form"
+        :config="config.form"
+        :init-values="config.values || (config.prop && scope.row[config.prop]) || {}"
+      ></MForm>
+      <div v-if="config.expandContent" v-html="config.expandContent(scope.row, config.prop)"></div>
+      <component v-if="config.component" :is="config.component" v-bind="componentProps(scope.row)"></component>
+    </template>
+  </TMagicTableColumn>
+</template>
+
+<script lang="ts" setup>
+import { TMagicTableColumn } from '@tmagic/design';
+import { MForm } from '@tmagic/form';
+
+import { ColumnConfig } from './schema';
+import MTable from './Table.vue';
+
+defineOptions({
+  name: 'MTableExpandColumn',
+});
+
+const props = withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+  }>(),
+  {
+    config: () => ({}),
+  },
+);
+
+const componentProps = (row: any) => {
+  if (typeof props.config.props === 'function') {
+    return props.config.props(row) || {};
+  }
+  return props.config.props || {};
+};
+</script>

package/src/PopoverColumn.vue

@@ -0,0 +1,43 @@
+<template>
+  <TMagicTableColumn :label="config.label" :width="config.width" :fixed="config.fixed">
+    <template v-slot="scope">
+      <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="(config.prop && scope.row[config.prop]) || []"
+        ></MTable>
+        <template #reference>
+          <TMagicButton link type="primary"> {{ config.text || formatter(config, scope.row) }}</TMagicButton>
+        </template>
+      </TMagicPopover>
+    </template>
+  </TMagicTableColumn>
+</template>
+
+<script lang="ts" setup>
+import { TMagicButton, TMagicPopover, TMagicTableColumn } from '@tmagic/design';
+
+import { ColumnConfig } from './schema';
+import MTable from './Table.vue';
+import { formatter } from './utils';
+
+defineOptions({
+  name: 'MTablePopoverColumn',
+});
+
+withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+  }>(),
+  {
+    config: () => ({}),
+  },
+);
+</script>

package/src/Table.vue

@@ -0,0 +1,218 @@
+<template>
+  <TMagicTable
+    tooltip-effect="dark"
+    :tooltip-options="{ popperOptions: { strategy: 'absolute' } }"
+    class="m-table"
+    ref="tMagicTable"
+    v-loading="loading"
+    :data="tableData"
+    :show-header="showHeader"
+    :max-height="bodyHeight"
+    :default-expand-all="defaultExpandAll"
+    :border="hasBorder"
+    :row-key="rowkeyName || 'id'"
+    :tree-props="{ children: 'children' }"
+    :empty-text="emptyText || '暂无数据'"
+    :span-method="objectSpanMethod"
+    @sort-change="sortChange"
+    @select="selectHandler"
+    @select-all="selectAllHandler"
+    @selection-change="selectionChangeHandler"
+    @cell-click="cellClickHandler"
+    @expand-change="expandChange"
+  >
+    <template v-for="(item, columnIndex) in columns">
+      <template v-if="item.type === 'expand'">
+        <ExpandColumn :config="item" :key="columnIndex"></ExpandColumn>
+      </template>
+
+      <template v-else-if="item.type === 'component'">
+        <ComponentColumn :config="item" :key="columnIndex"></ComponentColumn>
+      </template>
+
+      <template v-else-if="item.selection">
+        <component
+          width="40"
+          type="selection"
+          :is="tableColumnComponent?.component || 'el-table-column'"
+          :key="columnIndex"
+          :selectable="item.selectable"
+        ></component>
+      </template>
+
+      <template v-else-if="item.actions">
+        <ActionsColumn
+          :columns="columns"
+          :config="item"
+          :rowkey-name="rowkeyName"
+          :edit-state="editState"
+          :key="columnIndex"
+          @after-action="$emit('after-action')"
+        ></ActionsColumn>
+      </template>
+
+      <template v-else-if="item.type === 'popover'">
+        <PopoverColumn :key="columnIndex" :config="item"></PopoverColumn>
+      </template>
+
+      <template v-else>
+        <TextColumn :key="columnIndex" :config="item" :edit-state="editState"></TextColumn>
+      </template>
+    </template>
+  </TMagicTable>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { getConfig, TMagicTable } from '@tmagic/design';
+
+import ActionsColumn from './ActionsColumn.vue';
+import ComponentColumn from './ComponentColumn.vue';
+import ExpandColumn from './ExpandColumn.vue';
+import PopoverColumn from './PopoverColumn.vue';
+import type { ColumnConfig } from './schema';
+import TextColumn from './TextColumn.vue';
+
+defineOptions({
+  name: 'MTable',
+});
+
+const props = withDefaults(
+  defineProps<{
+    data: any[];
+    columns?: ColumnConfig[];
+    /** 合并行或列的计算方法 */
+    spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];
+    loading?: boolean;
+    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */
+    bodyHeight?: string | number;
+    /** 是否显示表头 */
+    showHeader?: boolean;
+    /** 空数据时显示的文本内容 */
+    emptyText?: string;
+    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
+    defaultExpandAll?: boolean;
+    rowkeyName?: string;
+    /** 是否带有纵向边框 */
+    border?: boolean;
+  }>(),
+  {
+    columns: () => [],
+    loading: false,
+    showHeader: true,
+    defaultExpandAll: false,
+    border: false,
+  },
+);
+
+const emit = defineEmits([
+  'sort-change',
+  'after-action',
+  'select',
+  'select-all',
+  'selection-change',
+  'expand-change',
+  'cell-click',
+]);
+
+const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
+
+const editState = ref([]);
+
+const tableColumnComponent = getConfig('components')?.tableColumn;
+const selectionColumn = computed(() => {
+  const column = props.columns.filter((item) => item.selection);
+  return column.length ? column[0] : null;
+});
+
+const tableData = computed(() => {
+  if (selectionColumn.value) {
+    return props.data || [];
+  }
+
+  return cloneDeep(props.data) || [];
+});
+
+const hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));
+
+const sortChange = (data: any) => {
+  emit('sort-change', data);
+};
+
+const selectHandler = (selection: any, row: any) => {
+  const column = selectionColumn.value;
+  if (!column) {
+    return;
+  }
+
+  if (column.selection === 'single') {
+    // this.clearSelection()
+    // this.toggleRowSelection(row, true)
+  }
+  emit('select', selection, row);
+};
+
+const selectAllHandler = (selection: any) => {
+  emit('select-all', selection);
+};
+
+const selectionChangeHandler = (selection: any) => {
+  emit('selection-change', selection);
+};
+
+const cellClickHandler = (...args: any[]) => {
+  emit('cell-click', ...args);
+};
+
+const expandChange = (...args: any[]) => {
+  emit('expand-change', ...args);
+};
+
+const toggleRowSelection = (row: any, selected: boolean) => {
+  tMagicTable.value?.toggleRowSelection(row, selected);
+};
+
+const toggleRowExpansion = (row: any, expanded: boolean) => {
+  tMagicTable.value?.toggleRowExpansion(row, expanded);
+};
+
+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>
+
+<style lang="scss">
+.m-table {
+  .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,80 @@
+<template>
+  <TMagicTableColumn
+    show-overflow-tooltip
+    :label="config.label"
+    :width="config.width"
+    :fixed="config.fixed"
+    :sortable="config.sortable"
+    :prop="config.prop"
+  >
+    <template v-slot="scope">
+      <TMagicForm 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>
+      </TMagicForm>
+
+      <TMagicButton
+        v-else-if="config.action === 'actionLink' && config.prop"
+        link
+        type="primary"
+        @click="config.handler?.(scope.row)"
+      >
+        <span v-html="formatter(config, scope.row)"></span>
+      </TMagicButton>
+
+      <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' && 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>
+        <TMagicButton link type="primary">{{ config.buttonText || '扩展配置' }}</TMagicButton>
+      </el-tooltip>
+
+      <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) }}</TMagicTag
+      >
+      <div v-else v-html="formatter(config, scope.row)"></div>
+    </template>
+  </TMagicTableColumn>
+</template>
+
+<script lang="ts" setup>
+import { TMagicButton, TMagicForm, TMagicTableColumn, TMagicTag } from '@tmagic/design';
+
+import { ColumnConfig } from './schema';
+import { formatter } from './utils';
+
+defineOptions({
+  name: 'MTableColumn',
+});
+
+withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+    editState?: any;
+  }>(),
+  {
+    config: () => ({}),
+    editState: () => ({}),
+  },
+);
+</script>

package/src/index.ts

@@ -0,0 +1,31 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 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';
+export * from './schema';
+export * from './utils';
+
+export default {
+  install(app: App) {
+    app.component('m-table', Table);
+  },
+};

package/src/schema.ts

@@ -0,0 +1,71 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 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';
+  buttonType?: string;
+  display?: (row: any) => boolean;
+  text?: string | ((row: any) => string);
+  name?: string;
+  tooltip?: string;
+  tooltipPlacement?: string;
+  icon?: any;
+  handler?: (row: any, index: number) => Promise<any> | any;
+  before?: (row: any, index: number) => Promise<void> | void;
+  after?: (row: any, index: number) => Promise<void> | void;
+  action?: (data: { data: any }) => Promise<void> | void;
+}
+
+export interface ColumnConfig<T = any> {
+  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' | 'component' | string | ((value: any, row: T) => string);
+  text?: string;
+  prop?: string;
+  showHeader?: boolean;
+  table?: ColumnConfig[];
+  formatter?: 'datetime' | ((item: any, row: T) => any);
+  popover?: {
+    placement: string;
+    width: string;
+    trigger: string;
+    tableEmbed: boolean;
+  };
+  sortable?: boolean | 'custom';
+  action?: 'tip' | 'actionLink' | 'img' | 'link' | 'tag';
+  handler?: (row: T) => void;
+  /** 当type为expand时有效，展开为html */
+  expandContent?: (row: T, prop?: string) => string;
+  /** 当type为expand时，展开为vue组件；当type为component时显示的组件 */
+  component?: any;
+  /** 当type为expand时，展开的vue组件props；当type为component时显示的组件的props */
+  props?: any;
+  /** 当type为component时显示的组件的事件监听 */
+  listeners?: any;
+  /** 当type为tip时有效，显示文案 */
+  buttonText?: string;
+}

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,39 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 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.prop) return '';
+
+  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];
+  }
+};