@open-feishu-card/renderer 0.3.3 → 0.3.4

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 +4 -1
  2. package/dist/index.cjs +7 -3
  3. package/dist/index.js +7 -3
  4. package/dist/styles.css +4 -1
  5. package/package.json +1 -1
package/dist/all.css CHANGED
@@ -361,8 +361,11 @@
361
361
  这里不再给相邻子元素设 margin-top——否则与 row-gap 叠加，间距翻倍。 */
362
362
 
363
363
  /* ---- 图片 ---- */
364
+ /* 真机网页版 .universal-card-image__host{border-radius:0}：图片默认直角，
365
+ 圆角只由 DSL/RAW 的 corner_radius 内联给出（见 img 组件）。
366
+ 之前这里写死 4px，导致没写 corner_radius 的图在渲染器里四角被圆掉，与真机不符。 */
364
367
  .universal-card-image__wrapper { display: flex; max-width: 100%; }
365
- .universal-card-image__host { max-width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
368
+ .universal-card-image__host { max-width: 100%; height: auto; object-fit: cover; border-radius: 0; }
366
369
  .universal-card-image__placeholder {
367
370
  display: inline-flex; align-items: center; justify-content: center;
368
371
  min-width: 80px; min-height: 48px; padding: 8px 12px;
package/dist/index.cjs CHANGED
@@ -772,11 +772,12 @@ function applyOuterMargin(style, margin) {
772
772
  style.margin = mg;
773
773
  const { left, right } = horizontalMarginPx(margin);
774
774
  const inset = left + right;
775
- if (inset <= 0) return;
775
+ if (inset === 0) return;
776
776
  const w = style.width;
777
777
  if (w && /px$/i.test(w) && !w.includes("%")) return;
778
778
  if (!w || w === "100%" || w === "fill") {
779
- style.width = `calc(100% - ${inset}px)`;
779
+ style.width = inset > 0 ? `calc(100% - ${inset}px)` : `calc(100% + ${-inset}px)`;
780
+ if (inset < 0) style.maxWidth = "none";
780
781
  }
781
782
  }
782
783
  function resolveDimensionPx(direct, valueObj) {
@@ -1331,8 +1332,11 @@ var BASE_STYLES_CSS = `/**
1331
1332
  \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 */
1332
1333
 
1333
1334
  /* ---- \u56FE\u7247 ---- */
1335
+ /* \u771F\u673A\u7F51\u9875\u7248 .universal-card-image__host{border-radius:0}\uFF1A\u56FE\u7247\u9ED8\u8BA4\u76F4\u89D2\uFF0C
1336
+ \u5706\u89D2\u53EA\u7531 DSL/RAW \u7684 corner_radius \u5185\u8054\u7ED9\u51FA\uFF08\u89C1 img \u7EC4\u4EF6\uFF09\u3002
1337
+ \u4E4B\u524D\u8FD9\u91CC\u5199\u6B7B 4px\uFF0C\u5BFC\u81F4\u6CA1\u5199 corner_radius \u7684\u56FE\u5728\u6E32\u67D3\u5668\u91CC\u56DB\u89D2\u88AB\u5706\u6389\uFF0C\u4E0E\u771F\u673A\u4E0D\u7B26\u3002 */
1334
1338
  .universal-card-image__wrapper { display: flex; max-width: 100%; }
1335
- .universal-card-image__host { max-width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
1339
+ .universal-card-image__host { max-width: 100%; height: auto; object-fit: cover; border-radius: 0; }
1336
1340
  .universal-card-image__placeholder {
1337
1341
  display: inline-flex; align-items: center; justify-content: center;
1338
1342
  min-width: 80px; min-height: 48px; padding: 8px 12px;
package/dist/index.js CHANGED
@@ -771,11 +771,12 @@ function applyOuterMargin(style, margin) {
771
771
  style.margin = mg;
772
772
  const { left, right } = horizontalMarginPx(margin);
773
773
  const inset = left + right;
774
- if (inset <= 0) return;
774
+ if (inset === 0) return;
775
775
  const w = style.width;
776
776
  if (w && /px$/i.test(w) && !w.includes("%")) return;
777
777
  if (!w || w === "100%" || w === "fill") {
778
- style.width = `calc(100% - ${inset}px)`;
778
+ style.width = inset > 0 ? `calc(100% - ${inset}px)` : `calc(100% + ${-inset}px)`;
779
+ if (inset < 0) style.maxWidth = "none";
779
780
  }
780
781
  }
781
782
  function resolveDimensionPx(direct, valueObj) {
@@ -1330,8 +1331,11 @@ var BASE_STYLES_CSS = `/**
1330
1331
  \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 */
1331
1332
 
1332
1333
  /* ---- \u56FE\u7247 ---- */
1334
+ /* \u771F\u673A\u7F51\u9875\u7248 .universal-card-image__host{border-radius:0}\uFF1A\u56FE\u7247\u9ED8\u8BA4\u76F4\u89D2\uFF0C
1335
+ \u5706\u89D2\u53EA\u7531 DSL/RAW \u7684 corner_radius \u5185\u8054\u7ED9\u51FA\uFF08\u89C1 img \u7EC4\u4EF6\uFF09\u3002
1336
+ \u4E4B\u524D\u8FD9\u91CC\u5199\u6B7B 4px\uFF0C\u5BFC\u81F4\u6CA1\u5199 corner_radius \u7684\u56FE\u5728\u6E32\u67D3\u5668\u91CC\u56DB\u89D2\u88AB\u5706\u6389\uFF0C\u4E0E\u771F\u673A\u4E0D\u7B26\u3002 */
1333
1337
  .universal-card-image__wrapper { display: flex; max-width: 100%; }
1334
- .universal-card-image__host { max-width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
1338
+ .universal-card-image__host { max-width: 100%; height: auto; object-fit: cover; border-radius: 0; }
1335
1339
  .universal-card-image__placeholder {
1336
1340
  display: inline-flex; align-items: center; justify-content: center;
1337
1341
  min-width: 80px; min-height: 48px; padding: 8px 12px;
package/dist/styles.css CHANGED
@@ -361,8 +361,11 @@
361
361
  这里不再给相邻子元素设 margin-top——否则与 row-gap 叠加，间距翻倍。 */
362
362
 
363
363
  /* ---- 图片 ---- */
364
+ /* 真机网页版 .universal-card-image__host{border-radius:0}：图片默认直角，
365
+ 圆角只由 DSL/RAW 的 corner_radius 内联给出（见 img 组件）。
366
+ 之前这里写死 4px，导致没写 corner_radius 的图在渲染器里四角被圆掉，与真机不符。 */
364
367
  .universal-card-image__wrapper { display: flex; max-width: 100%; }
365
- .universal-card-image__host { max-width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
368
+ .universal-card-image__host { max-width: 100%; height: auto; object-fit: cover; border-radius: 0; }
366
369
  .universal-card-image__placeholder {
367
370
  display: inline-flex; align-items: center; justify-content: center;
368
371
  min-width: 80px; min-height: 48px; padding: 8px 12px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@open-feishu-card/renderer",
3
- "version": "0.3.3",
3
+ "version": "0.3.4",
4
4
  "description": "零框架依赖的飞书卡片渲染引擎：Web / DOM / SSR，输入 RAW 或公开 DSL，输出真实 DOM 或 HTML 字符串",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",