@open-feishu-card/renderer 0.2.3 → 0.2.5

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 (5) hide show
  1. package/dist/all.css +5 -0
  2. package/dist/index.cjs +17 -8
  3. package/dist/index.js +17 -8
  4. package/dist/styles.css +5 -0
  5. package/package.json +1 -1
package/dist/all.css CHANGED
@@ -186,6 +186,8 @@
186
186
  --Y800: #573601;
187
187
  --Y900: #382201;
188
188
  /* END PALETTE VARS */
189
+ /* 真机 light：--bg-float-overlay: var(--N50)。column_set background_style=grey 走此 token */
190
+ --bg-float-overlay: var(--N50);
189
191
  }
190
192
  .universal-card-root *,
191
193
  .universal-card-root *::before,
@@ -322,6 +324,9 @@
322
324
  /* ---- 布局：column_set / column ---- */
323
325
  .universal-card-column-set { display: flex; }
324
326
  .universal-card-column { box-sizing: border-box; overflow-wrap: anywhere; }
327
+ /* 真机：有背景才挂 --bg。column_set 额外 4px 内边距；column 只圆角、不加默认 padding。 */
328
+ .universal-card-column-set--bg { padding: 4px; border-radius: 6px; }
329
+ .universal-card-column--bg { border-radius: 6px; }
325
330
  /* 列内纵向间距唯一来源是 column 组件输出的 flex row-gap（默认 8px，可被 vertical_spacing 覆盖）。
326
331
  这里不再给相邻子元素设 margin-top——否则与 row-gap 叠加，间距翻倍。 */
327
332
 
package/dist/index.cjs CHANGED
@@ -720,6 +720,7 @@ function bgStyleToColor(style) {
720
720
  if (typeof style !== "string") return null;
721
721
  const v = style.trim();
722
722
  if (!v || v === "default" || v === "none" || v === "transparent") return null;
723
+ if (v === "grey" || v === "gray" || v === "1") return "var(--bg-float-overlay)";
723
724
  return resolveColor(v) || null;
724
725
  }
725
726
 
@@ -1001,6 +1002,8 @@ var BASE_STYLES_CSS = `/**
1001
1002
  --Y800: #573601;
1002
1003
  --Y900: #382201;
1003
1004
  /* END PALETTE VARS */
1005
+ /* \u771F\u673A light\uFF1A--bg-float-overlay: var(--N50)\u3002column_set background_style=grey \u8D70\u6B64 token */
1006
+ --bg-float-overlay: var(--N50);
1004
1007
  }
1005
1008
  .universal-card-root *,
1006
1009
  .universal-card-root *::before,
@@ -1137,6 +1140,9 @@ var BASE_STYLES_CSS = `/**
1137
1140
  /* ---- \u5E03\u5C40\uFF1Acolumn_set / column ---- */
1138
1141
  .universal-card-column-set { display: flex; }
1139
1142
  .universal-card-column { box-sizing: border-box; overflow-wrap: anywhere; }
1143
+ /* \u771F\u673A\uFF1A\u6709\u80CC\u666F\u624D\u6302 --bg\u3002column_set \u989D\u5916 4px \u5185\u8FB9\u8DDD\uFF1Bcolumn \u53EA\u5706\u89D2\u3001\u4E0D\u52A0\u9ED8\u8BA4 padding\u3002 */
1144
+ .universal-card-column-set--bg { padding: 4px; border-radius: 6px; }
1145
+ .universal-card-column--bg { border-radius: 6px; }
1140
1146
  /* \u5217\u5185\u7EB5\u5411\u95F4\u8DDD\u552F\u4E00\u6765\u6E90\u662F column \u7EC4\u4EF6\u8F93\u51FA\u7684 flex row-gap\uFF08\u9ED8\u8BA4 8px\uFF0C\u53EF\u88AB vertical_spacing \u8986\u76D6\uFF09\u3002
1141
1147
  \u8FD9\u91CC\u4E0D\u518D\u7ED9\u76F8\u90BB\u5B50\u5143\u7D20\u8BBE margin-top\u2014\u2014\u5426\u5219\u4E0E row-gap \u53E0\u52A0\uFF0C\u95F4\u8DDD\u7FFB\u500D\u3002 */
1142
1148
 
@@ -5453,7 +5459,12 @@ function registerBuiltins() {
5453
5459
  }
5454
5460
  const mg = boxToStyle(p.margin);
5455
5461
  if (mg) style.margin = mg;
5456
- return h("div", { className: `${CLS}-column-set`, style }, renderElements(p.columns, ctx));
5462
+ const bg = bgStyleToColor(p.backgroundStyle ?? p.background_style);
5463
+ if (bg) style.background = bg;
5464
+ const pad = boxToStyle(p.padding);
5465
+ if (pad) style.padding = pad;
5466
+ const cls = `${CLS}-column-set` + (bg ? ` ${CLS}-column-set--bg` : "");
5467
+ return h("div", { className: cls, style }, renderElements(p.columns, ctx));
5457
5468
  });
5458
5469
  registerComponent("column", (el, ctx) => {
5459
5470
  const p = el.property || {};
@@ -5484,16 +5495,14 @@ function registerBuiltins() {
5484
5495
  }
5485
5496
  const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
5486
5497
  style.rowGap = (vGap != null ? spacingToPx(vGap) : 8) + "px";
5487
- const bg = bgStyleToColor(p.backgroundStyle);
5488
- if (bg) {
5489
- style.background = bg;
5490
- style.borderRadius = "6px";
5491
- }
5498
+ const bg = bgStyleToColor(p.backgroundStyle ?? p.background_style);
5499
+ if (bg) style.background = bg;
5492
5500
  const pad = boxToStyle(p.padding);
5493
5501
  if (pad) style.padding = pad;
5494
5502
  const mg = boxToStyle(p.margin);
5495
5503
  if (mg) style.margin = mg;
5496
- return h("div", { className: `${CLS}-column`, style }, renderElements(p.elements, ctx));
5504
+ const cls = `${CLS}-column` + (bg ? ` ${CLS}-column--bg` : "");
5505
+ return h("div", { className: cls, style }, renderElements(p.elements, ctx));
5497
5506
  });
5498
5507
  registerComponent("img", (el, ctx) => {
5499
5508
  const p = el.property || {};
@@ -5659,7 +5668,7 @@ function registerBuiltins() {
5659
5668
  const hasBorder = borderColor != null || p.hasBorder === true;
5660
5669
  const cls = `${CLS}-interactive-container` + (hasBorder && !borderColor ? ` ${CLS}-interactive-container--bordered` : "") + (disabled ? ` ${CLS}-interactive-container--disabled` : "");
5661
5670
  const style = {};
5662
- const bg = bgStyleToColor(p.backgroundStyle);
5671
+ const bg = bgStyleToColor(p.backgroundStyle ?? p.background_style);
5663
5672
  if (bg) style.background = bg;
5664
5673
  const pad = boxToStyle(p.padding);
5665
5674
  if (pad) style.padding = pad;
package/dist/index.js CHANGED
@@ -719,6 +719,7 @@ function bgStyleToColor(style) {
719
719
  if (typeof style !== "string") return null;
720
720
  const v = style.trim();
721
721
  if (!v || v === "default" || v === "none" || v === "transparent") return null;
722
+ if (v === "grey" || v === "gray" || v === "1") return "var(--bg-float-overlay)";
722
723
  return resolveColor(v) || null;
723
724
  }
724
725
 
@@ -1000,6 +1001,8 @@ var BASE_STYLES_CSS = `/**
1000
1001
  --Y800: #573601;
1001
1002
  --Y900: #382201;
1002
1003
  /* END PALETTE VARS */
1004
+ /* \u771F\u673A light\uFF1A--bg-float-overlay: var(--N50)\u3002column_set background_style=grey \u8D70\u6B64 token */
1005
+ --bg-float-overlay: var(--N50);
1003
1006
  }
1004
1007
  .universal-card-root *,
1005
1008
  .universal-card-root *::before,
@@ -1136,6 +1139,9 @@ var BASE_STYLES_CSS = `/**
1136
1139
  /* ---- \u5E03\u5C40\uFF1Acolumn_set / column ---- */
1137
1140
  .universal-card-column-set { display: flex; }
1138
1141
  .universal-card-column { box-sizing: border-box; overflow-wrap: anywhere; }
1142
+ /* \u771F\u673A\uFF1A\u6709\u80CC\u666F\u624D\u6302 --bg\u3002column_set \u989D\u5916 4px \u5185\u8FB9\u8DDD\uFF1Bcolumn \u53EA\u5706\u89D2\u3001\u4E0D\u52A0\u9ED8\u8BA4 padding\u3002 */
1143
+ .universal-card-column-set--bg { padding: 4px; border-radius: 6px; }
1144
+ .universal-card-column--bg { border-radius: 6px; }
1139
1145
  /* \u5217\u5185\u7EB5\u5411\u95F4\u8DDD\u552F\u4E00\u6765\u6E90\u662F column \u7EC4\u4EF6\u8F93\u51FA\u7684 flex row-gap\uFF08\u9ED8\u8BA4 8px\uFF0C\u53EF\u88AB vertical_spacing \u8986\u76D6\uFF09\u3002
1140
1146
  \u8FD9\u91CC\u4E0D\u518D\u7ED9\u76F8\u90BB\u5B50\u5143\u7D20\u8BBE margin-top\u2014\u2014\u5426\u5219\u4E0E row-gap \u53E0\u52A0\uFF0C\u95F4\u8DDD\u7FFB\u500D\u3002 */
1141
1147
 
@@ -5452,7 +5458,12 @@ function registerBuiltins() {
5452
5458
  }
5453
5459
  const mg = boxToStyle(p.margin);
5454
5460
  if (mg) style.margin = mg;
5455
- return h("div", { className: `${CLS}-column-set`, style }, renderElements(p.columns, ctx));
5461
+ const bg = bgStyleToColor(p.backgroundStyle ?? p.background_style);
5462
+ if (bg) style.background = bg;
5463
+ const pad = boxToStyle(p.padding);
5464
+ if (pad) style.padding = pad;
5465
+ const cls = `${CLS}-column-set` + (bg ? ` ${CLS}-column-set--bg` : "");
5466
+ return h("div", { className: cls, style }, renderElements(p.columns, ctx));
5456
5467
  });
5457
5468
  registerComponent("column", (el, ctx) => {
5458
5469
  const p = el.property || {};
@@ -5483,16 +5494,14 @@ function registerBuiltins() {
5483
5494
  }
5484
5495
  const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
5485
5496
  style.rowGap = (vGap != null ? spacingToPx(vGap) : 8) + "px";
5486
- const bg = bgStyleToColor(p.backgroundStyle);
5487
- if (bg) {
5488
- style.background = bg;
5489
- style.borderRadius = "6px";
5490
- }
5497
+ const bg = bgStyleToColor(p.backgroundStyle ?? p.background_style);
5498
+ if (bg) style.background = bg;
5491
5499
  const pad = boxToStyle(p.padding);
5492
5500
  if (pad) style.padding = pad;
5493
5501
  const mg = boxToStyle(p.margin);
5494
5502
  if (mg) style.margin = mg;
5495
- return h("div", { className: `${CLS}-column`, style }, renderElements(p.elements, ctx));
5503
+ const cls = `${CLS}-column` + (bg ? ` ${CLS}-column--bg` : "");
5504
+ return h("div", { className: cls, style }, renderElements(p.elements, ctx));
5496
5505
  });
5497
5506
  registerComponent("img", (el, ctx) => {
5498
5507
  const p = el.property || {};
@@ -5658,7 +5667,7 @@ function registerBuiltins() {
5658
5667
  const hasBorder = borderColor != null || p.hasBorder === true;
5659
5668
  const cls = `${CLS}-interactive-container` + (hasBorder && !borderColor ? ` ${CLS}-interactive-container--bordered` : "") + (disabled ? ` ${CLS}-interactive-container--disabled` : "");
5660
5669
  const style = {};
5661
- const bg = bgStyleToColor(p.backgroundStyle);
5670
+ const bg = bgStyleToColor(p.backgroundStyle ?? p.background_style);
5662
5671
  if (bg) style.background = bg;
5663
5672
  const pad = boxToStyle(p.padding);
5664
5673
  if (pad) style.padding = pad;
package/dist/styles.css CHANGED
@@ -186,6 +186,8 @@
186
186
  --Y800: #573601;
187
187
  --Y900: #382201;
188
188
  /* END PALETTE VARS */
189
+ /* 真机 light：--bg-float-overlay: var(--N50)。column_set background_style=grey 走此 token */
190
+ --bg-float-overlay: var(--N50);
189
191
  }
190
192
  .universal-card-root *,
191
193
  .universal-card-root *::before,
@@ -322,6 +324,9 @@
322
324
  /* ---- 布局：column_set / column ---- */
323
325
  .universal-card-column-set { display: flex; }
324
326
  .universal-card-column { box-sizing: border-box; overflow-wrap: anywhere; }
327
+ /* 真机：有背景才挂 --bg。column_set 额外 4px 内边距；column 只圆角、不加默认 padding。 */
328
+ .universal-card-column-set--bg { padding: 4px; border-radius: 6px; }
329
+ .universal-card-column--bg { border-radius: 6px; }
325
330
  /* 列内纵向间距唯一来源是 column 组件输出的 flex row-gap（默认 8px，可被 vertical_spacing 覆盖）。
326
331
  这里不再给相邻子元素设 margin-top——否则与 row-gap 叠加，间距翻倍。 */
327
332
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@open-feishu-card/renderer",
3
- "version": "0.2.3",
3
+ "version": "0.2.5",
4
4
  "description": "零框架依赖的飞书卡片渲染引擎：Web / DOM / SSR，输入 RAW 或公开 DSL，输出真实 DOM 或 HTML 字符串",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",