monto-email-core 0.0.15 → 0.0.16

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 (3) hide show
  1. package/dist/blocks/ColumnsContainer/ColumnsContainerReader.d.ts.map +1 -1
  2. package/dist/blocks/ColumnsContainer/ColumnsContainerReader.js +68 -29
  3. package/package.json +1 -1
package/dist/blocks/ColumnsContainer/ColumnsContainerReader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColumnsContainerReader.d.ts","sourceRoot":"","sources":["../../../src/blocks/ColumnsContainer/ColumnsContainerReader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAmCtE,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,qBAAqB,qBAgFrF"}
1
+ {"version":3,"file":"ColumnsContainerReader.d.ts","sourceRoot":"","sources":["../../../src/blocks/ColumnsContainer/ColumnsContainerReader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAuDtE,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,qBAAqB,qBA0HrF"}
package/dist/blocks/ColumnsContainer/ColumnsContainerReader.js CHANGED
@@ -12,31 +12,46 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import React from 'react';
13
13
  import { ReaderBlock, useReaderDocument } from '../../Reader/core';
14
14
  const STRETCH_BLOCK_TYPES = ['Heading', 'Text', 'Container'];
15
- const CONTENT_ALIGNMENT_MAP = {
16
- top: 'flex-start',
17
- middle: 'center',
18
- bottom: 'flex-end',
19
- stretch: 'stretch',
15
+ // 垂直对齐映射：table 的 valign 属性
16
+ const VERTICAL_ALIGNMENT_MAP = {
17
+ top: 'top',
18
+ middle: 'middle',
19
+ bottom: 'bottom',
20
+ stretch: 'top', // stretch 模式需要特殊处理
20
21
  };
21
22
  const COLUMN_WORD_WRAP = {
22
23
  wordWrap: 'break-word',
23
24
  wordBreak: 'break-word',
24
25
  overflowWrap: 'break-word',
25
26
  };
26
- /** 不等分比例时：小列 0 0 X%，大列 flex: 1 1 0 铺满剩余；数值 <=100 视为百分比 */
27
- function getColumnFlex(fixedWidths, index, count) {
27
+ /** 计算列的宽度（用于 table 布局） */
28
+ function getColumnWidth(fixedWidths, index, columnsCount) {
28
29
  const fixedW = fixedWidths === null || fixedWidths === void 0 ? void 0 : fixedWidths[index];
29
- if (fixedW == null)
30
- return '1 1 0';
31
- const inUse = (fixedWidths ? Array.from(fixedWidths) : []).slice(0, count).filter((v) => v != null);
30
+ // 如果没有固定宽度，均分所有列
31
+ if (fixedW == null) {
32
+ // 计算每列的宽度百分比
33
+ const equalWidth = 100 / columnsCount;
34
+ // 最后一列使用剩余宽度，确保总和为 100%
35
+ if (index === columnsCount - 1) {
36
+ const previousColumnsWidth = equalWidth * (columnsCount - 1);
37
+ const remainingWidth = 100 - previousColumnsWidth;
38
+ return `${remainingWidth.toFixed(2)}%`;
39
+ }
40
+ return `${equalWidth.toFixed(2)}%`;
41
+ }
42
+ const inUse = (fixedWidths !== null && fixedWidths !== void 0 ? fixedWidths : []).slice(0, columnsCount).filter((v) => v != null);
32
43
  const usePercentage = inUse.length > 0 && inUse.every((v) => v <= 100);
33
44
  if (usePercentage) {
34
45
  const maxVal = Math.max(...inUse);
35
- if (fixedW === maxVal)
36
- return '1 1 0';
37
- return `0 0 ${fixedW}%`;
46
+ if (fixedW === maxVal) {
47
+ // 大列铺满剩余，计算剩余百分比
48
+ const fixedTotal = inUse.filter((v) => v !== maxVal).reduce((sum, v) => sum + v, 0);
49
+ const remainingPercent = 100 - fixedTotal;
50
+ return `${remainingPercent.toFixed(2)}%`;
51
+ }
52
+ return `${fixedW}%`;
38
53
  }
39
- return `0 0 ${fixedW}px`;
54
+ return `${fixedW}px`;
40
55
  }
41
56
  export default function ColumnsContainerReader({ style, props }) {
42
57
  var _a, _b, _c, _d, _e;
@@ -54,25 +69,49 @@ export default function ColumnsContainerReader({ style, props }) {
54
69
  const blockType = (_a = document[childId]) === null || _a === void 0 ? void 0 : _a.type;
55
70
  const content = React.createElement(ReaderBlock, { key: childId, id: childId });
56
71
  if (isStretch && blockType && STRETCH_BLOCK_TYPES.includes(blockType)) {
57
- return (React.createElement("div", { key: childId, "data-stretch-block-wrapper": "true", style: { height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column' } }, content));
72
+ return (React.createElement("div", { key: childId, "data-stretch-block-wrapper": "true", style: { height: '100%', minHeight: 0, width: '100%' } }, content));
58
73
  }
59
74
  return content;
60
75
  }));
61
76
  }
62
- const wStyle = Object.assign({ backgroundColor: (_d = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _d !== void 0 ? _d : undefined, padding: (style === null || style === void 0 ? void 0 : style.padding)
77
+ const wStyle = {
78
+ width: '100%',
79
+ boxSizing: 'border-box',
80
+ backgroundColor: (_d = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _d !== void 0 ? _d : undefined,
81
+ padding: (style === null || style === void 0 ? void 0 : style.padding)
63
82
  ? `${style.padding.top}px ${style.padding.right}px ${style.padding.bottom}px ${style.padding.left}px`
64
- : undefined }, (isStretch && { height: '100%', display: 'flex', flexDirection: 'column', minHeight: 0 }));
65
- const alignItems = (_e = CONTENT_ALIGNMENT_MAP[contentAlignment]) !== null && _e !== void 0 ? _e : 'center';
66
- const flexRowStyle = Object.assign({ display: 'flex', flexDirection: 'row', width: '100%', gap: columnsGap, alignItems }, (isStretch && { flex: 1, minHeight: 0, alignSelf: 'stretch' }));
83
+ : undefined,
84
+ };
85
+ // 计算列间距的 padding（左右各一半）
86
+ const gapPadding = columnsGap / 2;
87
+ const valign = (_e = VERTICAL_ALIGNMENT_MAP[contentAlignment]) !== null && _e !== void 0 ? _e : 'middle';
67
88
  return (React.createElement("div", { style: wStyle },
68
- React.createElement("div", { style: flexRowStyle }, cols === null || cols === void 0 ? void 0 : cols.map((col, index) => {
69
- var _a;
70
- if (index >= count)
71
- return null;
72
- const flexVal = getColumnFlex(fixedWidths, index, count);
73
- const flexStyle = Object.assign(Object.assign({ boxSizing: 'content-box', flex: flexVal, minWidth: 0, display: 'flex', flexDirection: 'column' }, (isStretch
74
- ? { minHeight: 0, alignSelf: 'stretch' }
75
- : { justifyContent: ((_a = CONTENT_ALIGNMENT_MAP[contentAlignment]) !== null && _a !== void 0 ? _a : 'center') })), COLUMN_WORD_WRAP);
76
- return (React.createElement("div", { key: index, style: flexStyle }, isStretch ? (React.createElement("div", { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' } }, col)) : (col)));
77
- }))));
89
+ React.createElement("table", { width: "100%", cellPadding: "0", cellSpacing: "0", border: 0, style: {
90
+ width: '100%',
91
+ borderCollapse: 'collapse',
92
+ display: 'table',
93
+ } },
94
+ React.createElement("tbody", null,
95
+ React.createElement("tr", null, cols === null || cols === void 0 ? void 0 : cols.map((col, index) => {
96
+ if (index >= count)
97
+ return null;
98
+ const columnWidth = getColumnWidth(fixedWidths, index, count);
99
+ // 计算 padding：第一列只有右边距，最后一列只有左边距，中间列左右都有
100
+ const paddingLeft = index === 0 ? 0 : gapPadding;
101
+ const paddingRight = index === count - 1 ? 0 : gapPadding;
102
+ const tdStyle = Object.assign({ width: columnWidth, padding: `0 ${paddingRight}px 0 ${paddingLeft}px`, verticalAlign: valign }, COLUMN_WORD_WRAP);
103
+ // 如果是 stretch 模式，需要嵌套 table 来实现高度拉伸
104
+ if (isStretch) {
105
+ return (React.createElement("td", { key: index, width: columnWidth, valign: "top", style: tdStyle },
106
+ React.createElement("table", { width: "100%", cellPadding: "0", cellSpacing: "0", border: 0, style: {
107
+ width: '100%',
108
+ height: '100%',
109
+ borderCollapse: 'collapse',
110
+ } },
111
+ React.createElement("tbody", null,
112
+ React.createElement("tr", null,
113
+ React.createElement("td", { valign: "top", style: Object.assign({ height: '100%' }, COLUMN_WORD_WRAP) }, col))))));
114
+ }
115
+ return (React.createElement("td", { key: index, width: columnWidth, valign: valign, style: tdStyle }, col));
116
+ }))))));
78
117
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "monto-email-core",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
4
4
  "description": "React component to render email messages",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",