@open-feishu-card/renderer 0.2.26 → 0.2.27

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 -9
  2. package/dist/index.cjs +7 -12
  3. package/dist/index.js +7 -12
  4. package/dist/styles.css +5 -9
  5. package/package.json +1 -1
package/dist/all.css CHANGED
@@ -384,14 +384,9 @@
384
384
  flex-shrink: 0; height: 1.2em; color: inherit;
385
385
  }
386
386
  .universal-card-button__icon .universal-card-icon { color: inherit; }
387
- /* default 宽度：按内容收缩。列是 flex column（默认 align-items:stretch），
388
- body 又有 > * { width:100% }，不加这两条会被撑满所在列。 */
389
- .universal-card-button:not(.universal-card-button--block) {
390
- width: auto;
391
- max-width: 100%;
392
- align-self: flex-start;
393
- }
394
- /* fill（width:"fill"）：撑满所在列 */
387
+ /* 宽度：对齐真机——body > * { width:100% }、列 flex stretch 会把按钮撑满所在行/列。
388
+ 不再强制 width:auto（那是网页版观感；真机独立成行的按钮默认占满整行）。
389
+ width:"fill" 显式挂 --block，与缺省撑满同宽，并供 margin calc 识别。 */
395
390
  .universal-card-button--block { width: 100%; }
396
391
 
397
392
  /* —— outlined 描边族 —— */
@@ -413,11 +408,12 @@
413
408
  }
414
409
  .universal-card-button--danger:not(.universal-card-button--static):hover { background: #fef0f0; }
415
410
 
416
- /* —— text 纯文字族（无边框/无底色，按内容宽） —— */
411
+ /* —— text 纯文字族（无边框/无底色；撑满时文字靠左，对齐真机） —— */
417
412
  .universal-card-button--text,
418
413
  .universal-card-button--primary_text,
419
414
  .universal-card-button--danger_text {
420
415
  border-color: transparent; background: transparent; padding: 4px 8px;
416
+ justify-content: flex-start;
421
417
  }
422
418
  .universal-card-button--text { color: #1f2329; }
423
419
  .universal-card-button--primary_text { color: #1456f0; }
package/dist/index.cjs CHANGED
@@ -1313,14 +1313,9 @@ var BASE_STYLES_CSS = `/**
1313
1313
  flex-shrink: 0; height: 1.2em; color: inherit;
1314
1314
  }
1315
1315
  .universal-card-button__icon .universal-card-icon { color: inherit; }
1316
- /* default \u5BBD\u5EA6\uFF1A\u6309\u5185\u5BB9\u6536\u7F29\u3002\u5217\u662F flex column\uFF08\u9ED8\u8BA4 align-items:stretch\uFF09\uFF0C
1317
- body \u53C8\u6709 > * { width:100% }\uFF0C\u4E0D\u52A0\u8FD9\u4E24\u6761\u4F1A\u88AB\u6491\u6EE1\u6240\u5728\u5217\u3002 */
1318
- .universal-card-button:not(.universal-card-button--block) {
1319
- width: auto;
1320
- max-width: 100%;
1321
- align-self: flex-start;
1322
- }
1323
- /* fill\uFF08width:"fill"\uFF09\uFF1A\u6491\u6EE1\u6240\u5728\u5217 */
1316
+ /* \u5BBD\u5EA6\uFF1A\u5BF9\u9F50\u771F\u673A\u2014\u2014body > * { width:100% }\u3001\u5217 flex stretch \u4F1A\u628A\u6309\u94AE\u6491\u6EE1\u6240\u5728\u884C/\u5217\u3002
1317
+ \u4E0D\u518D\u5F3A\u5236 width:auto\uFF08\u90A3\u662F\u7F51\u9875\u7248\u89C2\u611F\uFF1B\u771F\u673A\u72EC\u7ACB\u6210\u884C\u7684\u6309\u94AE\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C\uFF09\u3002
1318
+ width:"fill" \u663E\u5F0F\u6302 --block\uFF0C\u4E0E\u7F3A\u7701\u6491\u6EE1\u540C\u5BBD\uFF0C\u5E76\u4F9B margin calc \u8BC6\u522B\u3002 */
1324
1319
  .universal-card-button--block { width: 100%; }
1325
1320
 
1326
1321
  /* \u2014\u2014 outlined \u63CF\u8FB9\u65CF \u2014\u2014 */
@@ -1342,11 +1337,12 @@ var BASE_STYLES_CSS = `/**
1342
1337
  }
1343
1338
  .universal-card-button--danger:not(.universal-card-button--static):hover { background: #fef0f0; }
1344
1339
 
1345
- /* \u2014\u2014 text \u7EAF\u6587\u5B57\u65CF\uFF08\u65E0\u8FB9\u6846/\u65E0\u5E95\u8272\uFF0C\u6309\u5185\u5BB9\u5BBD\uFF09 \u2014\u2014 */
1340
+ /* \u2014\u2014 text \u7EAF\u6587\u5B57\u65CF\uFF08\u65E0\u8FB9\u6846/\u65E0\u5E95\u8272\uFF1B\u6491\u6EE1\u65F6\u6587\u5B57\u9760\u5DE6\uFF0C\u5BF9\u9F50\u771F\u673A\uFF09 \u2014\u2014 */
1346
1341
  .universal-card-button--text,
1347
1342
  .universal-card-button--primary_text,
1348
1343
  .universal-card-button--danger_text {
1349
1344
  border-color: transparent; background: transparent; padding: 4px 8px;
1345
+ justify-content: flex-start;
1350
1346
  }
1351
1347
  .universal-card-button--text { color: #1f2329; }
1352
1348
  .universal-card-button--primary_text { color: #1456f0; }
@@ -5988,14 +5984,13 @@ function registerBuiltins() {
5988
5984
  const children = iconVNode ? [iconVNode, label] : [label];
5989
5985
  const actionUrl = Array.isArray(p.actions) ? resolveURL(p.actions.find((a) => a.type === "open_url")?.action?.url) : "";
5990
5986
  const url = actionUrl || resolveURL(p.url) || p.behaviors?.[0]?.default_url?.url;
5991
- const isText = type === "text" || type === "primary_text" || type === "danger_text";
5992
5987
  const wv = p.widthValue;
5993
5988
  const widthTok = p.width ?? wv?.value;
5994
- const block = widthTok === "fill" && !isText;
5989
+ const block = widthTok === "fill";
5995
5990
  const base = `${CLS}-button ${CLS}-button--${type}${block ? ` ${CLS}-button--block` : ""}`;
5996
5991
  const style = {};
5997
5992
  if (p.margin) {
5998
- style.width = block ? "100%" : "auto";
5993
+ style.width = "100%";
5999
5994
  applyOuterMargin(style, p.margin);
6000
5995
  }
6001
5996
  const styleProp = Object.keys(style).length ? { style } : {};
package/dist/index.js CHANGED
@@ -1312,14 +1312,9 @@ var BASE_STYLES_CSS = `/**
1312
1312
  flex-shrink: 0; height: 1.2em; color: inherit;
1313
1313
  }
1314
1314
  .universal-card-button__icon .universal-card-icon { color: inherit; }
1315
- /* default \u5BBD\u5EA6\uFF1A\u6309\u5185\u5BB9\u6536\u7F29\u3002\u5217\u662F flex column\uFF08\u9ED8\u8BA4 align-items:stretch\uFF09\uFF0C
1316
- body \u53C8\u6709 > * { width:100% }\uFF0C\u4E0D\u52A0\u8FD9\u4E24\u6761\u4F1A\u88AB\u6491\u6EE1\u6240\u5728\u5217\u3002 */
1317
- .universal-card-button:not(.universal-card-button--block) {
1318
- width: auto;
1319
- max-width: 100%;
1320
- align-self: flex-start;
1321
- }
1322
- /* fill\uFF08width:"fill"\uFF09\uFF1A\u6491\u6EE1\u6240\u5728\u5217 */
1315
+ /* \u5BBD\u5EA6\uFF1A\u5BF9\u9F50\u771F\u673A\u2014\u2014body > * { width:100% }\u3001\u5217 flex stretch \u4F1A\u628A\u6309\u94AE\u6491\u6EE1\u6240\u5728\u884C/\u5217\u3002
1316
+ \u4E0D\u518D\u5F3A\u5236 width:auto\uFF08\u90A3\u662F\u7F51\u9875\u7248\u89C2\u611F\uFF1B\u771F\u673A\u72EC\u7ACB\u6210\u884C\u7684\u6309\u94AE\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C\uFF09\u3002
1317
+ width:"fill" \u663E\u5F0F\u6302 --block\uFF0C\u4E0E\u7F3A\u7701\u6491\u6EE1\u540C\u5BBD\uFF0C\u5E76\u4F9B margin calc \u8BC6\u522B\u3002 */
1323
1318
  .universal-card-button--block { width: 100%; }
1324
1319
 
1325
1320
  /* \u2014\u2014 outlined \u63CF\u8FB9\u65CF \u2014\u2014 */
@@ -1341,11 +1336,12 @@ var BASE_STYLES_CSS = `/**
1341
1336
  }
1342
1337
  .universal-card-button--danger:not(.universal-card-button--static):hover { background: #fef0f0; }
1343
1338
 
1344
- /* \u2014\u2014 text \u7EAF\u6587\u5B57\u65CF\uFF08\u65E0\u8FB9\u6846/\u65E0\u5E95\u8272\uFF0C\u6309\u5185\u5BB9\u5BBD\uFF09 \u2014\u2014 */
1339
+ /* \u2014\u2014 text \u7EAF\u6587\u5B57\u65CF\uFF08\u65E0\u8FB9\u6846/\u65E0\u5E95\u8272\uFF1B\u6491\u6EE1\u65F6\u6587\u5B57\u9760\u5DE6\uFF0C\u5BF9\u9F50\u771F\u673A\uFF09 \u2014\u2014 */
1345
1340
  .universal-card-button--text,
1346
1341
  .universal-card-button--primary_text,
1347
1342
  .universal-card-button--danger_text {
1348
1343
  border-color: transparent; background: transparent; padding: 4px 8px;
1344
+ justify-content: flex-start;
1349
1345
  }
1350
1346
  .universal-card-button--text { color: #1f2329; }
1351
1347
  .universal-card-button--primary_text { color: #1456f0; }
@@ -5987,14 +5983,13 @@ function registerBuiltins() {
5987
5983
  const children = iconVNode ? [iconVNode, label] : [label];
5988
5984
  const actionUrl = Array.isArray(p.actions) ? resolveURL(p.actions.find((a) => a.type === "open_url")?.action?.url) : "";
5989
5985
  const url = actionUrl || resolveURL(p.url) || p.behaviors?.[0]?.default_url?.url;
5990
- const isText = type === "text" || type === "primary_text" || type === "danger_text";
5991
5986
  const wv = p.widthValue;
5992
5987
  const widthTok = p.width ?? wv?.value;
5993
- const block = widthTok === "fill" && !isText;
5988
+ const block = widthTok === "fill";
5994
5989
  const base = `${CLS}-button ${CLS}-button--${type}${block ? ` ${CLS}-button--block` : ""}`;
5995
5990
  const style = {};
5996
5991
  if (p.margin) {
5997
- style.width = block ? "100%" : "auto";
5992
+ style.width = "100%";
5998
5993
  applyOuterMargin(style, p.margin);
5999
5994
  }
6000
5995
  const styleProp = Object.keys(style).length ? { style } : {};
package/dist/styles.css CHANGED
@@ -384,14 +384,9 @@
384
384
  flex-shrink: 0; height: 1.2em; color: inherit;
385
385
  }
386
386
  .universal-card-button__icon .universal-card-icon { color: inherit; }
387
- /* default 宽度：按内容收缩。列是 flex column（默认 align-items:stretch），
388
- body 又有 > * { width:100% }，不加这两条会被撑满所在列。 */
389
- .universal-card-button:not(.universal-card-button--block) {
390
- width: auto;
391
- max-width: 100%;
392
- align-self: flex-start;
393
- }
394
- /* fill（width:"fill"）：撑满所在列 */
387
+ /* 宽度：对齐真机——body > * { width:100% }、列 flex stretch 会把按钮撑满所在行/列。
388
+ 不再强制 width:auto（那是网页版观感；真机独立成行的按钮默认占满整行）。
389
+ width:"fill" 显式挂 --block，与缺省撑满同宽，并供 margin calc 识别。 */
395
390
  .universal-card-button--block { width: 100%; }
396
391
 
397
392
  /* —— outlined 描边族 —— */
@@ -413,11 +408,12 @@
413
408
  }
414
409
  .universal-card-button--danger:not(.universal-card-button--static):hover { background: #fef0f0; }
415
410
 
416
- /* —— text 纯文字族（无边框/无底色，按内容宽） —— */
411
+ /* —— text 纯文字族（无边框/无底色；撑满时文字靠左，对齐真机） —— */
417
412
  .universal-card-button--text,
418
413
  .universal-card-button--primary_text,
419
414
  .universal-card-button--danger_text {
420
415
  border-color: transparent; background: transparent; padding: 4px 8px;
416
+ justify-content: flex-start;
421
417
  }
422
418
  .universal-card-button--text { color: #1f2329; }
423
419
  .universal-card-button--primary_text { color: #1456f0; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@open-feishu-card/renderer",
3
- "version": "0.2.26",
3
+ "version": "0.2.27",
4
4
  "description": "零框架依赖的飞书卡片渲染引擎：Web / DOM / SSR，输入 RAW 或公开 DSL，输出真实 DOM 或 HTML 字符串",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",