@tmagic/table 1.3.0-beta.2 → 1.3.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/tmagic-table.js +10 -4
  2. package/dist/tmagic-table.js.map +1 -1
  3. package/dist/tmagic-table.umd.cjs +9 -3
  4. package/dist/tmagic-table.umd.cjs.map +1 -1
  5. package/package.json +5 -5
  6. package/src/ComponentColumn.vue +14 -3
  7. package/src/schema.ts +3 -1
  8. package/types/schema.d.ts +3 -1
package/dist/tmagic-table.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, withDirectives, createVNode, createElementVNode, vShow, createTextVNode, resolveDynamicComponent, normalizeProps, guardReactiveProps, createCommentVNode, mergeProps, toDisplayString, resolveComponent, ref, computed, resolveDirective } from 'vue';
1
+ import { defineComponent, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, withDirectives, createVNode, createElementVNode, vShow, createTextVNode, resolveDynamicComponent, mergeProps, toHandlers, createCommentVNode, normalizeProps, toDisplayString, resolveComponent, ref, computed, resolveDirective } from 'vue';
2
2
  import { cloneDeep } from 'lodash-es';
3
3
  import { TMagicTableColumn, TMagicTooltip, TMagicButton, tMagicMessage, TMagicPopover, TMagicForm, TMagicTag, getConfig, TMagicTable } from '@tmagic/design';
4
4
  import { MForm } from '@tmagic/form';
@@ -146,12 +146,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
146
146
  },
147
147
  setup(__props) {
148
148
  const props = __props;
149
- const componentProps = (row) => {
149
+ const componentProps = (row, index) => {
150
150
  if (typeof props.config.props === "function") {
151
- return props.config.props(row) || {};
151
+ return props.config.props(row, index) || {};
152
152
  }
153
153
  return props.config.props || {};
154
154
  };
155
+ const componentListeners = (row, index) => {
156
+ if (typeof props.config.listeners === "function") {
157
+ return props.config.listeners(row, index) || {};
158
+ }
159
+ return props.config.listeners || {};
160
+ };
155
161
  return (_ctx, _cache) => {
156
162
  return openBlock(), createBlock(unref(TMagicTableColumn), {
157
163
  "show-overflow-tooltip": "",
@@ -162,7 +168,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
162
168
  prop: _ctx.config.prop
163
169
  }, {
164
170
  default: withCtx((scope) => [
165
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.component), normalizeProps(guardReactiveProps(componentProps(scope.row))), null, 16))
171
+ (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.component), mergeProps(componentProps(scope.row, scope.$index), toHandlers(componentListeners(scope.row, scope.$index))), null, 16))
166
172
  ]),
167
173
  _: 1
168
174
  }, 8, ["label", "width", "fixed", "sortable", "prop"]);
package/dist/tmagic-table.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tmagic-table.js","sources":["../src/ActionsColumn.vue","../src/ComponentColumn.vue","../src/ExpandColumn.vue","../src/utils.ts","../src/Table.vue","../src/index.ts"],"sourcesContent":["<template>\n <TMagicTableColumn :label=\"config.label\" :width=\"config.width\" :fixed=\"config.fixed\">\n <template v-slot=\"scope\">\n <TMagicTooltip\n v-for=\"(action, actionIndex) in config.actions\"\n :placement=\"action.tooltipPlacement || 'top'\"\n :key=\"actionIndex\"\n :disabled=\"!Boolean(action.tooltip)\"\n :content=\"action.tooltip\"\n >\n <TMagicButton\n v-show=\"display(action.display, scope.row) && !editState[scope.$index]\"\n class=\"action-btn\"\n text\n size=\"small\"\n :type=\"action.buttonType || 'primary'\"\n :icon=\"action.icon\"\n @click=\"actionHandler(action, scope.row, scope.$index)\"\n ><span v-html=\"formatter(action.text, scope.row)\"></span\n ></TMagicButton>\n </TMagicTooltip>\n <TMagicButton\n class=\"action-btn\"\n v-show=\"editState[scope.$index]\"\n text\n type=\"primary\"\n size=\"small\"\n @click=\"save(scope.$index, config)\"\n >保存</TMagicButton\n >\n <TMagicButton\n class=\"action-btn\"\n v-show=\"editState[scope.$index]\"\n text\n type=\"primary\"\n size=\"small\"\n @click=\"editState[scope.$index] = undefined\"\n >取消</TMagicButton\n >\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicButton, tMagicMessage, TMagicTableColumn, TMagicTooltip } from '@tmagic/design';\n\nimport { ColumnActionConfig, ColumnConfig } from './schema';\n\ndefineOptions({\n name: 'MTableActionsColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n columns: any[];\n config: ColumnConfig;\n rowkeyName?: string;\n editState?: any;\n }>(),\n {\n columns: () => [],\n config: () => ({}),\n rowkeyName: 'c_id',\n editState: () => [],\n },\n);\n\nconst emit = defineEmits(['after-action']);\n\nconst display = (fuc: boolean | Function | undefined, row: any) => {\n if (typeof fuc === 'function') {\n return fuc(row);\n }\n return true;\n};\n\nconst formatter = (fuc: string | Function | undefined, row: any) => {\n if (typeof fuc === 'function') {\n return fuc(row);\n }\n return fuc;\n};\n\nconst actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {\n await action.before?.(row, index);\n if (action.type === 'edit') {\n props.editState[index] = row;\n } else {\n await action.handler?.(row, index);\n }\n action.after?.(row, index);\n};\n\nconst save = async (index: number, config: ColumnConfig) => {\n const action = config.actions?.find((item) => item.type === 'edit')?.action;\n if (!action) return;\n\n const data: any = {};\n const row = props.editState[index];\n props.columns\n .filter((item) => item.type)\n .forEach((column) => {\n data[column.prop] = row[column.prop];\n });\n\n const res: any = await action({\n data,\n });\n\n if (res) {\n if (res.ret === 0) {\n tMagicMessage.success('保存成功');\n props.editState[index] = undefined;\n emit('after-action');\n } else {\n tMagicMessage.error(res.msg || '保存失败');\n }\n } else {\n props.editState[index] = undefined;\n emit('after-action');\n }\n};\n</script>\n","<template>\n <TMagicTableColumn\n show-overflow-tooltip\n :label=\"config.label\"\n :width=\"config.width\"\n :fixed=\"config.fixed\"\n :sortable=\"config.sortable\"\n :prop=\"config.prop\"\n >\n <template v-slot=\"scope\">\n <component :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\n\nimport { ColumnConfig } from './schema';\n\ndefineOptions({\n name: 'MTableColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n config: ColumnConfig;\n }>(),\n {\n config: () => ({}),\n },\n);\n\nconst componentProps = (row: any) => {\n if (typeof props.config.props === 'function') {\n return props.config.props(row) || {};\n }\n return props.config.props || {};\n};\n</script>\n","<template>\n <TMagicTableColumn type=\"expand\">\n <template #default=\"scope\">\n <MTable\n v-if=\"config.table\"\n :show-header=\"false\"\n :columns=\"config.table\"\n :data=\"(config.prop && scope.row[config.prop]) || []\"\n ></MTable>\n <MForm\n v-if=\"config.form\"\n :config=\"config.form\"\n :init-values=\"config.values || (config.prop && scope.row[config.prop]) || {}\"\n ></MForm>\n <div v-if=\"config.expandContent\" v-html=\"config.expandContent(scope.row, config.prop)\"></div>\n <component v-if=\"config.component\" :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\nimport { MForm } from '@tmagic/form';\n\nimport { ColumnConfig } from './schema';\nimport MTable from './Table.vue';\n\ndefineOptions({\n name: 'MTableExpandColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n config: ColumnConfig;\n }>(),\n {\n config: () => ({}),\n },\n);\n\nconst componentProps = (row: any) => {\n if (typeof props.config.props === 'function') {\n return props.config.props(row) || {};\n }\n return props.config.props || {};\n};\n</script>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { datetimeFormatter } from '@tmagic/utils';\n\nimport { ColumnConfig } from './schema';\n\nexport const formatter = (item: ColumnConfig, row: any) => {\n if (!item.prop) return '';\n\n if (item.formatter) {\n if (item.formatter === 'datetime') {\n // eslint-disable-next-line no-param-reassign\n item.formatter = (value: string) => datetimeFormatter(value);\n }\n try {\n return item.formatter(row[item.prop], row);\n } catch (e) {\n return row[item.prop];\n }\n } else {\n return row[item.prop];\n }\n};\n","<template>\n <TMagicTable\n tooltip-effect=\"dark\"\n class=\"m-table\"\n ref=\"tMagicTable\"\n v-loading=\"loading\"\n :data=\"tableData\"\n :show-header=\"showHeader\"\n :max-height=\"bodyHeight\"\n :default-expand-all=\"defaultExpandAll\"\n :border=\"hasBorder\"\n :row-key=\"rowkeyName || 'id'\"\n :tree-props=\"{ children: 'children' }\"\n :empty-text=\"emptyText || '暂无数据'\"\n :span-method=\"objectSpanMethod\"\n @sort-change=\"sortChange\"\n @select=\"selectHandler\"\n @select-all=\"selectAllHandler\"\n @selection-change=\"selectionChangeHandler\"\n @cell-click=\"cellClickHandler\"\n @expand-change=\"expandChange\"\n >\n <template v-for=\"(item, columnIndex) in columns\">\n <template v-if=\"item.type === 'expand'\">\n <ExpandColumn :config=\"item\" :key=\"columnIndex\"></ExpandColumn>\n </template>\n\n <template v-else-if=\"item.type === 'component'\">\n <ComponentColumn :config=\"item\" :key=\"columnIndex\"></ComponentColumn>\n </template>\n\n <template v-else-if=\"item.selection\">\n <component\n width=\"40\"\n type=\"selection\"\n :is=\"tableColumnComponent?.component || 'el-table-column'\"\n :key=\"columnIndex\"\n :selectable=\"item.selectable\"\n ></component>\n </template>\n\n <template v-else-if=\"item.actions\">\n <ActionsColumn\n :columns=\"columns\"\n :config=\"item\"\n :rowkey-name=\"rowkeyName\"\n :edit-state=\"editState\"\n :key=\"columnIndex\"\n @after-action=\"$emit('after-action')\"\n ></ActionsColumn>\n </template>\n\n <template v-else-if=\"item.type === 'popover'\">\n <PopoverColumn :key=\"columnIndex\" :config=\"item\"></PopoverColumn>\n </template>\n\n <template v-else>\n <TextColumn :key=\"columnIndex\" :config=\"item\" :edit-state=\"editState\"></TextColumn>\n </template>\n </template>\n </TMagicTable>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { cloneDeep } from 'lodash-es';\n\nimport { getConfig, TMagicTable } from '@tmagic/design';\n\nimport ActionsColumn from './ActionsColumn.vue';\nimport ComponentColumn from './ComponentColumn.vue';\nimport ExpandColumn from './ExpandColumn.vue';\nimport PopoverColumn from './PopoverColumn.vue';\nimport TextColumn from './TextColumn.vue';\n\ndefineOptions({\n name: 'MTable',\n});\n\nconst props = withDefaults(\n defineProps<{\n data: any[];\n columns?: any[];\n /** 合并行或列的计算方法 */\n spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];\n loading?: boolean;\n /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */\n bodyHeight?: string | number;\n /** 是否显示表头 */\n showHeader?: boolean;\n /** 空数据时显示的文本内容 */\n emptyText?: string;\n /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */\n defaultExpandAll?: boolean;\n rowkeyName?: string;\n /** 是否带有纵向边框 */\n border?: boolean;\n }>(),\n {\n columns: () => [],\n loading: false,\n showHeader: true,\n defaultExpandAll: false,\n border: false,\n },\n);\n\nconst emit = defineEmits([\n 'sort-change',\n 'after-action',\n 'select',\n 'select-all',\n 'selection-change',\n 'expand-change',\n 'cell-click',\n]);\n\nconst tMagicTable = ref<InstanceType<typeof TMagicTable>>();\n\nconst editState = ref([]);\n\nconst tableColumnComponent = getConfig('components')?.tableColumn;\nconst selectionColumn = computed(() => {\n const column = props.columns.filter((item) => item.selection);\n return column.length ? column[0] : null;\n});\n\nconst tableData = computed(() => {\n if (selectionColumn.value) {\n return props.data || [];\n }\n\n return cloneDeep(props.data) || [];\n});\n\nconst hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));\n\nconst sortChange = (data: any) => {\n emit('sort-change', data);\n};\n\nconst selectHandler = (selection: any, row: any) => {\n const column = selectionColumn.value;\n if (!column) {\n return;\n }\n\n if (column.selection === 'single') {\n // this.clearSelection()\n // this.toggleRowSelection(row, true)\n }\n emit('select', selection, row);\n};\n\nconst selectAllHandler = (selection: any) => {\n emit('select-all', selection);\n};\n\nconst selectionChangeHandler = (selection: any) => {\n emit('selection-change', selection);\n};\n\nconst cellClickHandler = (...args: any[]) => {\n emit('cell-click', ...args);\n};\n\nconst expandChange = (...args: any[]) => {\n emit('expand-change', ...args);\n};\n\nconst toggleRowSelection = (row: any, selected: boolean) => {\n tMagicTable.value?.toggleRowSelection(row, selected);\n};\n\nconst toggleRowExpansion = (row: any, expanded: boolean) => {\n tMagicTable.value?.toggleRowExpansion(row, expanded);\n};\n\nconst clearSelection = () => {\n tMagicTable.value?.clearSelection();\n};\n\nconst objectSpanMethod = (data: any) => {\n if (typeof props.spanMethod === 'function') {\n return props.spanMethod(data);\n }\n return () => ({\n rowspan: 0,\n colspan: 0,\n });\n};\n\ndefineExpose({\n toggleRowSelection,\n toggleRowExpansion,\n clearSelection,\n});\n</script>\n\n<style lang=\"scss\">\n.m-table {\n .el-button.action-btn + .el-button.action-btn {\n margin-left: 0;\n }\n .keep-all {\n word-break: keep-all;\n }\n .el-table .cell > div {\n display: inline-block;\n vertical-align: middle;\n }\n .el-table__row.el-table__row--level-1 {\n color: #999;\n }\n}\n</style>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { App } from 'vue';\n\nimport Table from './Table.vue';\n\nexport { default as MagicTable } from './Table.vue';\n\nexport default {\n install(app: App) {\n app.component('m-table', Table);\n },\n};\n"],"names":["Table"],"mappings":"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"}
1
+ {"version":3,"file":"tmagic-table.js","sources":["../src/ActionsColumn.vue","../src/ComponentColumn.vue","../src/ExpandColumn.vue","../src/utils.ts","../src/Table.vue","../src/index.ts"],"sourcesContent":["<template>\n <TMagicTableColumn :label=\"config.label\" :width=\"config.width\" :fixed=\"config.fixed\">\n <template v-slot=\"scope\">\n <TMagicTooltip\n v-for=\"(action, actionIndex) in config.actions\"\n :placement=\"action.tooltipPlacement || 'top'\"\n :key=\"actionIndex\"\n :disabled=\"!Boolean(action.tooltip)\"\n :content=\"action.tooltip\"\n >\n <TMagicButton\n v-show=\"display(action.display, scope.row) && !editState[scope.$index]\"\n class=\"action-btn\"\n text\n size=\"small\"\n :type=\"action.buttonType || 'primary'\"\n :icon=\"action.icon\"\n @click=\"actionHandler(action, scope.row, scope.$index)\"\n ><span v-html=\"formatter(action.text, scope.row)\"></span\n ></TMagicButton>\n </TMagicTooltip>\n <TMagicButton\n class=\"action-btn\"\n v-show=\"editState[scope.$index]\"\n text\n type=\"primary\"\n size=\"small\"\n @click=\"save(scope.$index, config)\"\n >保存</TMagicButton\n >\n <TMagicButton\n class=\"action-btn\"\n v-show=\"editState[scope.$index]\"\n text\n type=\"primary\"\n size=\"small\"\n @click=\"editState[scope.$index] = undefined\"\n >取消</TMagicButton\n >\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicButton, tMagicMessage, TMagicTableColumn, TMagicTooltip } from '@tmagic/design';\n\nimport { ColumnActionConfig, ColumnConfig } from './schema';\n\ndefineOptions({\n name: 'MTableActionsColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n columns: any[];\n config: ColumnConfig;\n rowkeyName?: string;\n editState?: any;\n }>(),\n {\n columns: () => [],\n config: () => ({}),\n rowkeyName: 'c_id',\n editState: () => [],\n },\n);\n\nconst emit = defineEmits(['after-action']);\n\nconst display = (fuc: boolean | Function | undefined, row: any) => {\n if (typeof fuc === 'function') {\n return fuc(row);\n }\n return true;\n};\n\nconst formatter = (fuc: string | Function | undefined, row: any) => {\n if (typeof fuc === 'function') {\n return fuc(row);\n }\n return fuc;\n};\n\nconst actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {\n await action.before?.(row, index);\n if (action.type === 'edit') {\n props.editState[index] = row;\n } else {\n await action.handler?.(row, index);\n }\n action.after?.(row, index);\n};\n\nconst save = async (index: number, config: ColumnConfig) => {\n const action = config.actions?.find((item) => item.type === 'edit')?.action;\n if (!action) return;\n\n const data: any = {};\n const row = props.editState[index];\n props.columns\n .filter((item) => item.type)\n .forEach((column) => {\n data[column.prop] = row[column.prop];\n });\n\n const res: any = await action({\n data,\n });\n\n if (res) {\n if (res.ret === 0) {\n tMagicMessage.success('保存成功');\n props.editState[index] = undefined;\n emit('after-action');\n } else {\n tMagicMessage.error(res.msg || '保存失败');\n }\n } else {\n props.editState[index] = undefined;\n emit('after-action');\n }\n};\n</script>\n","<template>\n <TMagicTableColumn\n show-overflow-tooltip\n :label=\"config.label\"\n :width=\"config.width\"\n :fixed=\"config.fixed\"\n :sortable=\"config.sortable\"\n :prop=\"config.prop\"\n >\n <template v-slot=\"scope\">\n <component\n :is=\"config.component\"\n v-bind=\"componentProps(scope.row, scope.$index)\"\n v-on=\"componentListeners(scope.row, scope.$index)\"\n ></component>\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\n\nimport { ColumnConfig } from './schema';\n\ndefineOptions({\n name: 'MTableColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n config: ColumnConfig;\n }>(),\n {\n config: () => ({}),\n },\n);\n\nconst componentProps = (row: any, index: number) => {\n if (typeof props.config.props === 'function') {\n return props.config.props(row, index) || {};\n }\n return props.config.props || {};\n};\n\nconst componentListeners = (row: any, index: number) => {\n if (typeof props.config.listeners === 'function') {\n return props.config.listeners(row, index) || {};\n }\n return props.config.listeners || {};\n};\n</script>\n","<template>\n <TMagicTableColumn type=\"expand\">\n <template #default=\"scope\">\n <MTable\n v-if=\"config.table\"\n :show-header=\"false\"\n :columns=\"config.table\"\n :data=\"(config.prop && scope.row[config.prop]) || []\"\n ></MTable>\n <MForm\n v-if=\"config.form\"\n :config=\"config.form\"\n :init-values=\"config.values || (config.prop && scope.row[config.prop]) || {}\"\n ></MForm>\n <div v-if=\"config.expandContent\" v-html=\"config.expandContent(scope.row, config.prop)\"></div>\n <component v-if=\"config.component\" :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\nimport { MForm } from '@tmagic/form';\n\nimport { ColumnConfig } from './schema';\nimport MTable from './Table.vue';\n\ndefineOptions({\n name: 'MTableExpandColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n config: ColumnConfig;\n }>(),\n {\n config: () => ({}),\n },\n);\n\nconst componentProps = (row: any) => {\n if (typeof props.config.props === 'function') {\n return props.config.props(row) || {};\n }\n return props.config.props || {};\n};\n</script>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { datetimeFormatter } from '@tmagic/utils';\n\nimport { ColumnConfig } from './schema';\n\nexport const formatter = (item: ColumnConfig, row: any) => {\n if (!item.prop) return '';\n\n if (item.formatter) {\n if (item.formatter === 'datetime') {\n // eslint-disable-next-line no-param-reassign\n item.formatter = (value: string) => datetimeFormatter(value);\n }\n try {\n return item.formatter(row[item.prop], row);\n } catch (e) {\n return row[item.prop];\n }\n } else {\n return row[item.prop];\n }\n};\n","<template>\n <TMagicTable\n tooltip-effect=\"dark\"\n class=\"m-table\"\n ref=\"tMagicTable\"\n v-loading=\"loading\"\n :data=\"tableData\"\n :show-header=\"showHeader\"\n :max-height=\"bodyHeight\"\n :default-expand-all=\"defaultExpandAll\"\n :border=\"hasBorder\"\n :row-key=\"rowkeyName || 'id'\"\n :tree-props=\"{ children: 'children' }\"\n :empty-text=\"emptyText || '暂无数据'\"\n :span-method=\"objectSpanMethod\"\n @sort-change=\"sortChange\"\n @select=\"selectHandler\"\n @select-all=\"selectAllHandler\"\n @selection-change=\"selectionChangeHandler\"\n @cell-click=\"cellClickHandler\"\n @expand-change=\"expandChange\"\n >\n <template v-for=\"(item, columnIndex) in columns\">\n <template v-if=\"item.type === 'expand'\">\n <ExpandColumn :config=\"item\" :key=\"columnIndex\"></ExpandColumn>\n </template>\n\n <template v-else-if=\"item.type === 'component'\">\n <ComponentColumn :config=\"item\" :key=\"columnIndex\"></ComponentColumn>\n </template>\n\n <template v-else-if=\"item.selection\">\n <component\n width=\"40\"\n type=\"selection\"\n :is=\"tableColumnComponent?.component || 'el-table-column'\"\n :key=\"columnIndex\"\n :selectable=\"item.selectable\"\n ></component>\n </template>\n\n <template v-else-if=\"item.actions\">\n <ActionsColumn\n :columns=\"columns\"\n :config=\"item\"\n :rowkey-name=\"rowkeyName\"\n :edit-state=\"editState\"\n :key=\"columnIndex\"\n @after-action=\"$emit('after-action')\"\n ></ActionsColumn>\n </template>\n\n <template v-else-if=\"item.type === 'popover'\">\n <PopoverColumn :key=\"columnIndex\" :config=\"item\"></PopoverColumn>\n </template>\n\n <template v-else>\n <TextColumn :key=\"columnIndex\" :config=\"item\" :edit-state=\"editState\"></TextColumn>\n </template>\n </template>\n </TMagicTable>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { cloneDeep } from 'lodash-es';\n\nimport { getConfig, TMagicTable } from '@tmagic/design';\n\nimport ActionsColumn from './ActionsColumn.vue';\nimport ComponentColumn from './ComponentColumn.vue';\nimport ExpandColumn from './ExpandColumn.vue';\nimport PopoverColumn from './PopoverColumn.vue';\nimport TextColumn from './TextColumn.vue';\n\ndefineOptions({\n name: 'MTable',\n});\n\nconst props = withDefaults(\n defineProps<{\n data: any[];\n columns?: any[];\n /** 合并行或列的计算方法 */\n spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];\n loading?: boolean;\n /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */\n bodyHeight?: string | number;\n /** 是否显示表头 */\n showHeader?: boolean;\n /** 空数据时显示的文本内容 */\n emptyText?: string;\n /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */\n defaultExpandAll?: boolean;\n rowkeyName?: string;\n /** 是否带有纵向边框 */\n border?: boolean;\n }>(),\n {\n columns: () => [],\n loading: false,\n showHeader: true,\n defaultExpandAll: false,\n border: false,\n },\n);\n\nconst emit = defineEmits([\n 'sort-change',\n 'after-action',\n 'select',\n 'select-all',\n 'selection-change',\n 'expand-change',\n 'cell-click',\n]);\n\nconst tMagicTable = ref<InstanceType<typeof TMagicTable>>();\n\nconst editState = ref([]);\n\nconst tableColumnComponent = getConfig('components')?.tableColumn;\nconst selectionColumn = computed(() => {\n const column = props.columns.filter((item) => item.selection);\n return column.length ? column[0] : null;\n});\n\nconst tableData = computed(() => {\n if (selectionColumn.value) {\n return props.data || [];\n }\n\n return cloneDeep(props.data) || [];\n});\n\nconst hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));\n\nconst sortChange = (data: any) => {\n emit('sort-change', data);\n};\n\nconst selectHandler = (selection: any, row: any) => {\n const column = selectionColumn.value;\n if (!column) {\n return;\n }\n\n if (column.selection === 'single') {\n // this.clearSelection()\n // this.toggleRowSelection(row, true)\n }\n emit('select', selection, row);\n};\n\nconst selectAllHandler = (selection: any) => {\n emit('select-all', selection);\n};\n\nconst selectionChangeHandler = (selection: any) => {\n emit('selection-change', selection);\n};\n\nconst cellClickHandler = (...args: any[]) => {\n emit('cell-click', ...args);\n};\n\nconst expandChange = (...args: any[]) => {\n emit('expand-change', ...args);\n};\n\nconst toggleRowSelection = (row: any, selected: boolean) => {\n tMagicTable.value?.toggleRowSelection(row, selected);\n};\n\nconst toggleRowExpansion = (row: any, expanded: boolean) => {\n tMagicTable.value?.toggleRowExpansion(row, expanded);\n};\n\nconst clearSelection = () => {\n tMagicTable.value?.clearSelection();\n};\n\nconst objectSpanMethod = (data: any) => {\n if (typeof props.spanMethod === 'function') {\n return props.spanMethod(data);\n }\n return () => ({\n rowspan: 0,\n colspan: 0,\n });\n};\n\ndefineExpose({\n toggleRowSelection,\n toggleRowExpansion,\n clearSelection,\n});\n</script>\n\n<style lang=\"scss\">\n.m-table {\n .el-button.action-btn + .el-button.action-btn {\n margin-left: 0;\n }\n .keep-all {\n word-break: keep-all;\n }\n .el-table .cell > div {\n display: inline-block;\n vertical-align: middle;\n }\n .el-table__row.el-table__row--level-1 {\n color: #999;\n }\n}\n</style>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { App } from 'vue';\n\nimport Table from './Table.vue';\n\nexport { default as MagicTable } from './Table.vue';\n\nexport default {\n install(app: App) {\n app.component('m-table', Table);\n },\n};\n"],"names":["Table"],"mappings":"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"}
package/dist/tmagic-table.umd.cjs CHANGED
@@ -146,12 +146,18 @@
146
146
  },
147
147
  setup(__props) {
148
148
  const props = __props;
149
- const componentProps = (row) => {
149
+ const componentProps = (row, index) => {
150
150
  if (typeof props.config.props === "function") {
151
- return props.config.props(row) || {};
151
+ return props.config.props(row, index) || {};
152
152
  }
153
153
  return props.config.props || {};
154
154
  };
155
+ const componentListeners = (row, index) => {
156
+ if (typeof props.config.listeners === "function") {
157
+ return props.config.listeners(row, index) || {};
158
+ }
159
+ return props.config.listeners || {};
160
+ };
155
161
  return (_ctx, _cache) => {
156
162
  return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
157
163
  "show-overflow-tooltip": "",
@@ -162,7 +168,7 @@
162
168
  prop: _ctx.config.prop
163
169
  }, {
164
170
  default: vue.withCtx((scope) => [
165
- (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.component), vue.normalizeProps(vue.guardReactiveProps(componentProps(scope.row))), null, 16))
171
+ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.component), vue.mergeProps(componentProps(scope.row, scope.$index), vue.toHandlers(componentListeners(scope.row, scope.$index))), null, 16))
166
172
  ]),
167
173
  _: 1
168
174
  }, 8, ["label", "width", "fixed", "sortable", "prop"]);
package/dist/tmagic-table.umd.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tmagic-table.umd.cjs","sources":["../src/ActionsColumn.vue","../src/ComponentColumn.vue","../src/ExpandColumn.vue","../src/utils.ts","../src/Table.vue","../src/index.ts"],"sourcesContent":["<template>\n <TMagicTableColumn :label=\"config.label\" :width=\"config.width\" :fixed=\"config.fixed\">\n <template v-slot=\"scope\">\n <TMagicTooltip\n v-for=\"(action, actionIndex) in config.actions\"\n :placement=\"action.tooltipPlacement || 'top'\"\n :key=\"actionIndex\"\n :disabled=\"!Boolean(action.tooltip)\"\n :content=\"action.tooltip\"\n >\n <TMagicButton\n v-show=\"display(action.display, scope.row) && !editState[scope.$index]\"\n class=\"action-btn\"\n text\n size=\"small\"\n :type=\"action.buttonType || 'primary'\"\n :icon=\"action.icon\"\n @click=\"actionHandler(action, scope.row, scope.$index)\"\n ><span v-html=\"formatter(action.text, scope.row)\"></span\n ></TMagicButton>\n </TMagicTooltip>\n <TMagicButton\n class=\"action-btn\"\n v-show=\"editState[scope.$index]\"\n text\n type=\"primary\"\n size=\"small\"\n @click=\"save(scope.$index, config)\"\n >保存</TMagicButton\n >\n <TMagicButton\n class=\"action-btn\"\n v-show=\"editState[scope.$index]\"\n text\n type=\"primary\"\n size=\"small\"\n @click=\"editState[scope.$index] = undefined\"\n >取消</TMagicButton\n >\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicButton, tMagicMessage, TMagicTableColumn, TMagicTooltip } from '@tmagic/design';\n\nimport { ColumnActionConfig, ColumnConfig } from './schema';\n\ndefineOptions({\n name: 'MTableActionsColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n columns: any[];\n config: ColumnConfig;\n rowkeyName?: string;\n editState?: any;\n }>(),\n {\n columns: () => [],\n config: () => ({}),\n rowkeyName: 'c_id',\n editState: () => [],\n },\n);\n\nconst emit = defineEmits(['after-action']);\n\nconst display = (fuc: boolean | Function | undefined, row: any) => {\n if (typeof fuc === 'function') {\n return fuc(row);\n }\n return true;\n};\n\nconst formatter = (fuc: string | Function | undefined, row: any) => {\n if (typeof fuc === 'function') {\n return fuc(row);\n }\n return fuc;\n};\n\nconst actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {\n await action.before?.(row, index);\n if (action.type === 'edit') {\n props.editState[index] = row;\n } else {\n await action.handler?.(row, index);\n }\n action.after?.(row, index);\n};\n\nconst save = async (index: number, config: ColumnConfig) => {\n const action = config.actions?.find((item) => item.type === 'edit')?.action;\n if (!action) return;\n\n const data: any = {};\n const row = props.editState[index];\n props.columns\n .filter((item) => item.type)\n .forEach((column) => {\n data[column.prop] = row[column.prop];\n });\n\n const res: any = await action({\n data,\n });\n\n if (res) {\n if (res.ret === 0) {\n tMagicMessage.success('保存成功');\n props.editState[index] = undefined;\n emit('after-action');\n } else {\n tMagicMessage.error(res.msg || '保存失败');\n }\n } else {\n props.editState[index] = undefined;\n emit('after-action');\n }\n};\n</script>\n","<template>\n <TMagicTableColumn\n show-overflow-tooltip\n :label=\"config.label\"\n :width=\"config.width\"\n :fixed=\"config.fixed\"\n :sortable=\"config.sortable\"\n :prop=\"config.prop\"\n >\n <template v-slot=\"scope\">\n <component :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\n\nimport { ColumnConfig } from './schema';\n\ndefineOptions({\n name: 'MTableColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n config: ColumnConfig;\n }>(),\n {\n config: () => ({}),\n },\n);\n\nconst componentProps = (row: any) => {\n if (typeof props.config.props === 'function') {\n return props.config.props(row) || {};\n }\n return props.config.props || {};\n};\n</script>\n","<template>\n <TMagicTableColumn type=\"expand\">\n <template #default=\"scope\">\n <MTable\n v-if=\"config.table\"\n :show-header=\"false\"\n :columns=\"config.table\"\n :data=\"(config.prop && scope.row[config.prop]) || []\"\n ></MTable>\n <MForm\n v-if=\"config.form\"\n :config=\"config.form\"\n :init-values=\"config.values || (config.prop && scope.row[config.prop]) || {}\"\n ></MForm>\n <div v-if=\"config.expandContent\" v-html=\"config.expandContent(scope.row, config.prop)\"></div>\n <component v-if=\"config.component\" :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\nimport { MForm } from '@tmagic/form';\n\nimport { ColumnConfig } from './schema';\nimport MTable from './Table.vue';\n\ndefineOptions({\n name: 'MTableExpandColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n config: ColumnConfig;\n }>(),\n {\n config: () => ({}),\n },\n);\n\nconst componentProps = (row: any) => {\n if (typeof props.config.props === 'function') {\n return props.config.props(row) || {};\n }\n return props.config.props || {};\n};\n</script>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { datetimeFormatter } from '@tmagic/utils';\n\nimport { ColumnConfig } from './schema';\n\nexport const formatter = (item: ColumnConfig, row: any) => {\n if (!item.prop) return '';\n\n if (item.formatter) {\n if (item.formatter === 'datetime') {\n // eslint-disable-next-line no-param-reassign\n item.formatter = (value: string) => datetimeFormatter(value);\n }\n try {\n return item.formatter(row[item.prop], row);\n } catch (e) {\n return row[item.prop];\n }\n } else {\n return row[item.prop];\n }\n};\n","<template>\n <TMagicTable\n tooltip-effect=\"dark\"\n class=\"m-table\"\n ref=\"tMagicTable\"\n v-loading=\"loading\"\n :data=\"tableData\"\n :show-header=\"showHeader\"\n :max-height=\"bodyHeight\"\n :default-expand-all=\"defaultExpandAll\"\n :border=\"hasBorder\"\n :row-key=\"rowkeyName || 'id'\"\n :tree-props=\"{ children: 'children' }\"\n :empty-text=\"emptyText || '暂无数据'\"\n :span-method=\"objectSpanMethod\"\n @sort-change=\"sortChange\"\n @select=\"selectHandler\"\n @select-all=\"selectAllHandler\"\n @selection-change=\"selectionChangeHandler\"\n @cell-click=\"cellClickHandler\"\n @expand-change=\"expandChange\"\n >\n <template v-for=\"(item, columnIndex) in columns\">\n <template v-if=\"item.type === 'expand'\">\n <ExpandColumn :config=\"item\" :key=\"columnIndex\"></ExpandColumn>\n </template>\n\n <template v-else-if=\"item.type === 'component'\">\n <ComponentColumn :config=\"item\" :key=\"columnIndex\"></ComponentColumn>\n </template>\n\n <template v-else-if=\"item.selection\">\n <component\n width=\"40\"\n type=\"selection\"\n :is=\"tableColumnComponent?.component || 'el-table-column'\"\n :key=\"columnIndex\"\n :selectable=\"item.selectable\"\n ></component>\n </template>\n\n <template v-else-if=\"item.actions\">\n <ActionsColumn\n :columns=\"columns\"\n :config=\"item\"\n :rowkey-name=\"rowkeyName\"\n :edit-state=\"editState\"\n :key=\"columnIndex\"\n @after-action=\"$emit('after-action')\"\n ></ActionsColumn>\n </template>\n\n <template v-else-if=\"item.type === 'popover'\">\n <PopoverColumn :key=\"columnIndex\" :config=\"item\"></PopoverColumn>\n </template>\n\n <template v-else>\n <TextColumn :key=\"columnIndex\" :config=\"item\" :edit-state=\"editState\"></TextColumn>\n </template>\n </template>\n </TMagicTable>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { cloneDeep } from 'lodash-es';\n\nimport { getConfig, TMagicTable } from '@tmagic/design';\n\nimport ActionsColumn from './ActionsColumn.vue';\nimport ComponentColumn from './ComponentColumn.vue';\nimport ExpandColumn from './ExpandColumn.vue';\nimport PopoverColumn from './PopoverColumn.vue';\nimport TextColumn from './TextColumn.vue';\n\ndefineOptions({\n name: 'MTable',\n});\n\nconst props = withDefaults(\n defineProps<{\n data: any[];\n columns?: any[];\n /** 合并行或列的计算方法 */\n spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];\n loading?: boolean;\n /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */\n bodyHeight?: string | number;\n /** 是否显示表头 */\n showHeader?: boolean;\n /** 空数据时显示的文本内容 */\n emptyText?: string;\n /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */\n defaultExpandAll?: boolean;\n rowkeyName?: string;\n /** 是否带有纵向边框 */\n border?: boolean;\n }>(),\n {\n columns: () => [],\n loading: false,\n showHeader: true,\n defaultExpandAll: false,\n border: false,\n },\n);\n\nconst emit = defineEmits([\n 'sort-change',\n 'after-action',\n 'select',\n 'select-all',\n 'selection-change',\n 'expand-change',\n 'cell-click',\n]);\n\nconst tMagicTable = ref<InstanceType<typeof TMagicTable>>();\n\nconst editState = ref([]);\n\nconst tableColumnComponent = getConfig('components')?.tableColumn;\nconst selectionColumn = computed(() => {\n const column = props.columns.filter((item) => item.selection);\n return column.length ? column[0] : null;\n});\n\nconst tableData = computed(() => {\n if (selectionColumn.value) {\n return props.data || [];\n }\n\n return cloneDeep(props.data) || [];\n});\n\nconst hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));\n\nconst sortChange = (data: any) => {\n emit('sort-change', data);\n};\n\nconst selectHandler = (selection: any, row: any) => {\n const column = selectionColumn.value;\n if (!column) {\n return;\n }\n\n if (column.selection === 'single') {\n // this.clearSelection()\n // this.toggleRowSelection(row, true)\n }\n emit('select', selection, row);\n};\n\nconst selectAllHandler = (selection: any) => {\n emit('select-all', selection);\n};\n\nconst selectionChangeHandler = (selection: any) => {\n emit('selection-change', selection);\n};\n\nconst cellClickHandler = (...args: any[]) => {\n emit('cell-click', ...args);\n};\n\nconst expandChange = (...args: any[]) => {\n emit('expand-change', ...args);\n};\n\nconst toggleRowSelection = (row: any, selected: boolean) => {\n tMagicTable.value?.toggleRowSelection(row, selected);\n};\n\nconst toggleRowExpansion = (row: any, expanded: boolean) => {\n tMagicTable.value?.toggleRowExpansion(row, expanded);\n};\n\nconst clearSelection = () => {\n tMagicTable.value?.clearSelection();\n};\n\nconst objectSpanMethod = (data: any) => {\n if (typeof props.spanMethod === 'function') {\n return props.spanMethod(data);\n }\n return () => ({\n rowspan: 0,\n colspan: 0,\n });\n};\n\ndefineExpose({\n toggleRowSelection,\n toggleRowExpansion,\n clearSelection,\n});\n</script>\n\n<style lang=\"scss\">\n.m-table {\n .el-button.action-btn + .el-button.action-btn {\n margin-left: 0;\n }\n .keep-all {\n word-break: keep-all;\n }\n .el-table .cell > div {\n display: inline-block;\n vertical-align: middle;\n }\n .el-table__row.el-table__row--level-1 {\n color: #999;\n }\n}\n</style>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { App } from 'vue';\n\nimport Table from './Table.vue';\n\nexport { default as MagicTable } from './Table.vue';\n\nexport default {\n install(app: App) {\n app.component('m-table', Table);\n },\n};\n"],"names":["tMagicMessage","datetimeFormatter","ref","getConfig","computed","cloneDeep","Table"],"mappings":"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"}
1
+ {"version":3,"file":"tmagic-table.umd.cjs","sources":["../src/ActionsColumn.vue","../src/ComponentColumn.vue","../src/ExpandColumn.vue","../src/utils.ts","../src/Table.vue","../src/index.ts"],"sourcesContent":["<template>\n <TMagicTableColumn :label=\"config.label\" :width=\"config.width\" :fixed=\"config.fixed\">\n <template v-slot=\"scope\">\n <TMagicTooltip\n v-for=\"(action, actionIndex) in config.actions\"\n :placement=\"action.tooltipPlacement || 'top'\"\n :key=\"actionIndex\"\n :disabled=\"!Boolean(action.tooltip)\"\n :content=\"action.tooltip\"\n >\n <TMagicButton\n v-show=\"display(action.display, scope.row) && !editState[scope.$index]\"\n class=\"action-btn\"\n text\n size=\"small\"\n :type=\"action.buttonType || 'primary'\"\n :icon=\"action.icon\"\n @click=\"actionHandler(action, scope.row, scope.$index)\"\n ><span v-html=\"formatter(action.text, scope.row)\"></span\n ></TMagicButton>\n </TMagicTooltip>\n <TMagicButton\n class=\"action-btn\"\n v-show=\"editState[scope.$index]\"\n text\n type=\"primary\"\n size=\"small\"\n @click=\"save(scope.$index, config)\"\n >保存</TMagicButton\n >\n <TMagicButton\n class=\"action-btn\"\n v-show=\"editState[scope.$index]\"\n text\n type=\"primary\"\n size=\"small\"\n @click=\"editState[scope.$index] = undefined\"\n >取消</TMagicButton\n >\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicButton, tMagicMessage, TMagicTableColumn, TMagicTooltip } from '@tmagic/design';\n\nimport { ColumnActionConfig, ColumnConfig } from './schema';\n\ndefineOptions({\n name: 'MTableActionsColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n columns: any[];\n config: ColumnConfig;\n rowkeyName?: string;\n editState?: any;\n }>(),\n {\n columns: () => [],\n config: () => ({}),\n rowkeyName: 'c_id',\n editState: () => [],\n },\n);\n\nconst emit = defineEmits(['after-action']);\n\nconst display = (fuc: boolean | Function | undefined, row: any) => {\n if (typeof fuc === 'function') {\n return fuc(row);\n }\n return true;\n};\n\nconst formatter = (fuc: string | Function | undefined, row: any) => {\n if (typeof fuc === 'function') {\n return fuc(row);\n }\n return fuc;\n};\n\nconst actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {\n await action.before?.(row, index);\n if (action.type === 'edit') {\n props.editState[index] = row;\n } else {\n await action.handler?.(row, index);\n }\n action.after?.(row, index);\n};\n\nconst save = async (index: number, config: ColumnConfig) => {\n const action = config.actions?.find((item) => item.type === 'edit')?.action;\n if (!action) return;\n\n const data: any = {};\n const row = props.editState[index];\n props.columns\n .filter((item) => item.type)\n .forEach((column) => {\n data[column.prop] = row[column.prop];\n });\n\n const res: any = await action({\n data,\n });\n\n if (res) {\n if (res.ret === 0) {\n tMagicMessage.success('保存成功');\n props.editState[index] = undefined;\n emit('after-action');\n } else {\n tMagicMessage.error(res.msg || '保存失败');\n }\n } else {\n props.editState[index] = undefined;\n emit('after-action');\n }\n};\n</script>\n","<template>\n <TMagicTableColumn\n show-overflow-tooltip\n :label=\"config.label\"\n :width=\"config.width\"\n :fixed=\"config.fixed\"\n :sortable=\"config.sortable\"\n :prop=\"config.prop\"\n >\n <template v-slot=\"scope\">\n <component\n :is=\"config.component\"\n v-bind=\"componentProps(scope.row, scope.$index)\"\n v-on=\"componentListeners(scope.row, scope.$index)\"\n ></component>\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\n\nimport { ColumnConfig } from './schema';\n\ndefineOptions({\n name: 'MTableColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n config: ColumnConfig;\n }>(),\n {\n config: () => ({}),\n },\n);\n\nconst componentProps = (row: any, index: number) => {\n if (typeof props.config.props === 'function') {\n return props.config.props(row, index) || {};\n }\n return props.config.props || {};\n};\n\nconst componentListeners = (row: any, index: number) => {\n if (typeof props.config.listeners === 'function') {\n return props.config.listeners(row, index) || {};\n }\n return props.config.listeners || {};\n};\n</script>\n","<template>\n <TMagicTableColumn type=\"expand\">\n <template #default=\"scope\">\n <MTable\n v-if=\"config.table\"\n :show-header=\"false\"\n :columns=\"config.table\"\n :data=\"(config.prop && scope.row[config.prop]) || []\"\n ></MTable>\n <MForm\n v-if=\"config.form\"\n :config=\"config.form\"\n :init-values=\"config.values || (config.prop && scope.row[config.prop]) || {}\"\n ></MForm>\n <div v-if=\"config.expandContent\" v-html=\"config.expandContent(scope.row, config.prop)\"></div>\n <component v-if=\"config.component\" :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n </template>\n </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\nimport { MForm } from '@tmagic/form';\n\nimport { ColumnConfig } from './schema';\nimport MTable from './Table.vue';\n\ndefineOptions({\n name: 'MTableExpandColumn',\n});\n\nconst props = withDefaults(\n defineProps<{\n config: ColumnConfig;\n }>(),\n {\n config: () => ({}),\n },\n);\n\nconst componentProps = (row: any) => {\n if (typeof props.config.props === 'function') {\n return props.config.props(row) || {};\n }\n return props.config.props || {};\n};\n</script>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { datetimeFormatter } from '@tmagic/utils';\n\nimport { ColumnConfig } from './schema';\n\nexport const formatter = (item: ColumnConfig, row: any) => {\n if (!item.prop) return '';\n\n if (item.formatter) {\n if (item.formatter === 'datetime') {\n // eslint-disable-next-line no-param-reassign\n item.formatter = (value: string) => datetimeFormatter(value);\n }\n try {\n return item.formatter(row[item.prop], row);\n } catch (e) {\n return row[item.prop];\n }\n } else {\n return row[item.prop];\n }\n};\n","<template>\n <TMagicTable\n tooltip-effect=\"dark\"\n class=\"m-table\"\n ref=\"tMagicTable\"\n v-loading=\"loading\"\n :data=\"tableData\"\n :show-header=\"showHeader\"\n :max-height=\"bodyHeight\"\n :default-expand-all=\"defaultExpandAll\"\n :border=\"hasBorder\"\n :row-key=\"rowkeyName || 'id'\"\n :tree-props=\"{ children: 'children' }\"\n :empty-text=\"emptyText || '暂无数据'\"\n :span-method=\"objectSpanMethod\"\n @sort-change=\"sortChange\"\n @select=\"selectHandler\"\n @select-all=\"selectAllHandler\"\n @selection-change=\"selectionChangeHandler\"\n @cell-click=\"cellClickHandler\"\n @expand-change=\"expandChange\"\n >\n <template v-for=\"(item, columnIndex) in columns\">\n <template v-if=\"item.type === 'expand'\">\n <ExpandColumn :config=\"item\" :key=\"columnIndex\"></ExpandColumn>\n </template>\n\n <template v-else-if=\"item.type === 'component'\">\n <ComponentColumn :config=\"item\" :key=\"columnIndex\"></ComponentColumn>\n </template>\n\n <template v-else-if=\"item.selection\">\n <component\n width=\"40\"\n type=\"selection\"\n :is=\"tableColumnComponent?.component || 'el-table-column'\"\n :key=\"columnIndex\"\n :selectable=\"item.selectable\"\n ></component>\n </template>\n\n <template v-else-if=\"item.actions\">\n <ActionsColumn\n :columns=\"columns\"\n :config=\"item\"\n :rowkey-name=\"rowkeyName\"\n :edit-state=\"editState\"\n :key=\"columnIndex\"\n @after-action=\"$emit('after-action')\"\n ></ActionsColumn>\n </template>\n\n <template v-else-if=\"item.type === 'popover'\">\n <PopoverColumn :key=\"columnIndex\" :config=\"item\"></PopoverColumn>\n </template>\n\n <template v-else>\n <TextColumn :key=\"columnIndex\" :config=\"item\" :edit-state=\"editState\"></TextColumn>\n </template>\n </template>\n </TMagicTable>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { cloneDeep } from 'lodash-es';\n\nimport { getConfig, TMagicTable } from '@tmagic/design';\n\nimport ActionsColumn from './ActionsColumn.vue';\nimport ComponentColumn from './ComponentColumn.vue';\nimport ExpandColumn from './ExpandColumn.vue';\nimport PopoverColumn from './PopoverColumn.vue';\nimport TextColumn from './TextColumn.vue';\n\ndefineOptions({\n name: 'MTable',\n});\n\nconst props = withDefaults(\n defineProps<{\n data: any[];\n columns?: any[];\n /** 合并行或列的计算方法 */\n spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];\n loading?: boolean;\n /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */\n bodyHeight?: string | number;\n /** 是否显示表头 */\n showHeader?: boolean;\n /** 空数据时显示的文本内容 */\n emptyText?: string;\n /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */\n defaultExpandAll?: boolean;\n rowkeyName?: string;\n /** 是否带有纵向边框 */\n border?: boolean;\n }>(),\n {\n columns: () => [],\n loading: false,\n showHeader: true,\n defaultExpandAll: false,\n border: false,\n },\n);\n\nconst emit = defineEmits([\n 'sort-change',\n 'after-action',\n 'select',\n 'select-all',\n 'selection-change',\n 'expand-change',\n 'cell-click',\n]);\n\nconst tMagicTable = ref<InstanceType<typeof TMagicTable>>();\n\nconst editState = ref([]);\n\nconst tableColumnComponent = getConfig('components')?.tableColumn;\nconst selectionColumn = computed(() => {\n const column = props.columns.filter((item) => item.selection);\n return column.length ? column[0] : null;\n});\n\nconst tableData = computed(() => {\n if (selectionColumn.value) {\n return props.data || [];\n }\n\n return cloneDeep(props.data) || [];\n});\n\nconst hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));\n\nconst sortChange = (data: any) => {\n emit('sort-change', data);\n};\n\nconst selectHandler = (selection: any, row: any) => {\n const column = selectionColumn.value;\n if (!column) {\n return;\n }\n\n if (column.selection === 'single') {\n // this.clearSelection()\n // this.toggleRowSelection(row, true)\n }\n emit('select', selection, row);\n};\n\nconst selectAllHandler = (selection: any) => {\n emit('select-all', selection);\n};\n\nconst selectionChangeHandler = (selection: any) => {\n emit('selection-change', selection);\n};\n\nconst cellClickHandler = (...args: any[]) => {\n emit('cell-click', ...args);\n};\n\nconst expandChange = (...args: any[]) => {\n emit('expand-change', ...args);\n};\n\nconst toggleRowSelection = (row: any, selected: boolean) => {\n tMagicTable.value?.toggleRowSelection(row, selected);\n};\n\nconst toggleRowExpansion = (row: any, expanded: boolean) => {\n tMagicTable.value?.toggleRowExpansion(row, expanded);\n};\n\nconst clearSelection = () => {\n tMagicTable.value?.clearSelection();\n};\n\nconst objectSpanMethod = (data: any) => {\n if (typeof props.spanMethod === 'function') {\n return props.spanMethod(data);\n }\n return () => ({\n rowspan: 0,\n colspan: 0,\n });\n};\n\ndefineExpose({\n toggleRowSelection,\n toggleRowExpansion,\n clearSelection,\n});\n</script>\n\n<style lang=\"scss\">\n.m-table {\n .el-button.action-btn + .el-button.action-btn {\n margin-left: 0;\n }\n .keep-all {\n word-break: keep-all;\n }\n .el-table .cell > div {\n display: inline-block;\n vertical-align: middle;\n }\n .el-table__row.el-table__row--level-1 {\n color: #999;\n }\n}\n</style>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { App } from 'vue';\n\nimport Table from './Table.vue';\n\nexport { default as MagicTable } from './Table.vue';\n\nexport default {\n install(app: App) {\n app.component('m-table', Table);\n },\n};\n"],"names":["tMagicMessage","datetimeFormatter","ref","getConfig","computed","cloneDeep","Table"],"mappings":"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"}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.3.0-beta.2",
2
+ "version": "1.3.0-beta.3",
3
3
  "name": "@tmagic/table",
4
4
  "type": "module",
5
5
  "sideEffects": [
@@ -33,14 +33,14 @@
33
33
  "url": "https://github.com/Tencent/tmagic-editor.git"
34
34
  },
35
35
  "dependencies": {
36
- "@tmagic/design": "1.3.0-beta.2",
37
- "@tmagic/form": "1.3.0-beta.2",
38
- "@tmagic/utils": "1.3.0-beta.2",
36
+ "@tmagic/design": "1.3.0-beta.3",
37
+ "@tmagic/form": "1.3.0-beta.3",
38
+ "@tmagic/utils": "1.3.0-beta.3",
39
39
  "lodash-es": "^4.17.21",
40
40
  "vue": "^3.3.4"
41
41
  },
42
42
  "peerDependencies": {
43
- "@tmagic/form": "1.3.0-beta.2",
43
+ "@tmagic/form": "1.3.0-beta.3",
44
44
  "vue": "^3.3.4"
45
45
  },
46
46
  "devDependencies": {
package/src/ComponentColumn.vue CHANGED
@@ -8,7 +8,11 @@
8
8
  :prop="config.prop"
9
9
  >
10
10
  <template v-slot="scope">
11
- <component :is="config.component" v-bind="componentProps(scope.row)"></component>
11
+ <component
12
+ :is="config.component"
13
+ v-bind="componentProps(scope.row, scope.$index)"
14
+ v-on="componentListeners(scope.row, scope.$index)"
15
+ ></component>
12
16
  </template>
13
17
  </TMagicTableColumn>
14
18
  </template>
@@ -31,10 +35,17 @@ const props = withDefaults(
31
35
  },
32
36
  );
33
37
 
34
- const componentProps = (row: any) => {
38
+ const componentProps = (row: any, index: number) => {
35
39
  if (typeof props.config.props === 'function') {
36
- return props.config.props(row) || {};
40
+ return props.config.props(row, index) || {};
37
41
  }
38
42
  return props.config.props || {};
39
43
  };
44
+
45
+ const componentListeners = (row: any, index: number) => {
46
+ if (typeof props.config.listeners === 'function') {
47
+ return props.config.listeners(row, index) || {};
48
+ }
49
+ return props.config.listeners || {};
50
+ };
40
51
  </script>
package/src/schema.ts CHANGED
@@ -62,8 +62,10 @@ export type ColumnConfig = {
62
62
  expandContent?: (row: any, prop?: string) => string;
63
63
  /** 当type为expand时，展开为vue组件；当type为component时显示的组件 */
64
64
  component?: any;
65
- /** 当type为expand时有效，展开的vue组件props */
65
+ /** 当type为expand时，展开的vue组件props；当type为component时显示的组件的props */
66
66
  props?: any;
67
+ /** 当type为component时显示的组件的事件监听 */
68
+ listeners?: any;
67
69
  /** 当type为tip时有效，显示文案 */
68
70
  buttonText?: string;
69
71
  };
package/types/schema.d.ts CHANGED
@@ -44,8 +44,10 @@ export type ColumnConfig = {
44
44
  expandContent?: (row: any, prop?: string) => string;
45
45
  /** 当type为expand时，展开为vue组件；当type为component时显示的组件 */
46
46
  component?: any;
47
- /** 当type为expand时有效，展开的vue组件props */
47
+ /** 当type为expand时，展开的vue组件props；当type为component时显示的组件的props */
48
48
  props?: any;
49
+ /** 当type为component时显示的组件的事件监听 */
50
+ listeners?: any;
49
51
  /** 当type为tip时有效，显示文案 */
50
52
  buttonText?: string;
51
53
  };