@open-feishu-card/renderer 0.2.31 → 0.3.0

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 (7) hide show
  1. package/dist/all.css +25 -3
  2. package/dist/index.cjs +40 -5
  3. package/dist/index.d.cts +2 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.js +40 -5
  6. package/dist/styles.css +25 -3
  7. package/package.json +1 -1
package/dist/all.css CHANGED
@@ -1067,16 +1067,38 @@
1067
1067
  align-items: center;
1068
1068
  gap: 8px;
1069
1069
  max-width: 600px; /* 客户端 .ud__toast max-width:600px */
1070
- padding: 10px 16px;
1071
- border-radius: 8px;
1070
+ padding: 9px 16px; /* 客户端 .ud__notice--filled padding:9px 0 9px 16px */
1071
+ border-radius: 6px; /* 客户端 .ud__notice border-radius:6px */
1072
1072
  background: rgba(31, 35, 41, 0.92); /* N900 深色半透明，白字 */
1073
1073
  color: #fff;
1074
1074
  font-size: 14px;
1075
1075
  line-height: 1.5;
1076
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
1076
+ box-shadow: var(--shadow-s4-down, 0 4px 16px rgba(0, 0, 0, 0.16));
1077
1077
  margin-bottom: 16px; /* 客户端 .ud__toast margin-bottom:16px */
1078
1078
  animation: universal-card-toast-in 0.3s cubic-bezier(0.2, 0, 0, 1);
1079
1079
  }
1080
+ /* outlined 浅色变体：对齐客户端 .ud__notice--outlined.ud__notice-{type}
1081
+ 浅底 + 同色描边 + 深色文字（真机第二张：浅橙底橙边 warning） */
1082
+ .universal-card-toast--outlined {
1083
+ background: #fff;
1084
+ color: #1f2329;
1085
+ }
1086
+ .universal-card-toast--outlined.universal-card-toast--warning {
1087
+ background: #fff7e6;
1088
+ border: 1px solid #ff9d4c;
1089
+ }
1090
+ .universal-card-toast--outlined.universal-card-toast--error {
1091
+ background: #fef1f1;
1092
+ border: 1px solid #f54a45;
1093
+ }
1094
+ .universal-card-toast--outlined.universal-card-toast--info {
1095
+ background: #e8f0ff;
1096
+ border: 1px solid #3370ff;
1097
+ }
1098
+ .universal-card-toast--outlined.universal-card-toast--success {
1099
+ background: #f0fbef;
1100
+ border: 1px solid #34c724;
1101
+ }
1080
1102
  .universal-card-toast--leave {
1081
1103
  animation: universal-card-toast-out 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
1082
1104
  }
package/dist/index.cjs CHANGED
@@ -2037,16 +2037,38 @@ var BASE_STYLES_CSS = `/**
2037
2037
  align-items: center;
2038
2038
  gap: 8px;
2039
2039
  max-width: 600px; /* \u5BA2\u6237\u7AEF .ud__toast max-width:600px */
2040
- padding: 10px 16px;
2041
- border-radius: 8px;
2040
+ padding: 9px 16px; /* \u5BA2\u6237\u7AEF .ud__notice--filled padding:9px 0 9px 16px */
2041
+ border-radius: 6px; /* \u5BA2\u6237\u7AEF .ud__notice border-radius:6px */
2042
2042
  background: rgba(31, 35, 41, 0.92); /* N900 \u6DF1\u8272\u534A\u900F\u660E\uFF0C\u767D\u5B57 */
2043
2043
  color: #fff;
2044
2044
  font-size: 14px;
2045
2045
  line-height: 1.5;
2046
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
2046
+ box-shadow: var(--shadow-s4-down, 0 4px 16px rgba(0, 0, 0, 0.16));
2047
2047
  margin-bottom: 16px; /* \u5BA2\u6237\u7AEF .ud__toast margin-bottom:16px */
2048
2048
  animation: universal-card-toast-in 0.3s cubic-bezier(0.2, 0, 0, 1);
2049
2049
  }
2050
+ /* outlined \u6D45\u8272\u53D8\u4F53\uFF1A\u5BF9\u9F50\u5BA2\u6237\u7AEF .ud__notice--outlined.ud__notice-{type}
2051
+ \u6D45\u5E95 + \u540C\u8272\u63CF\u8FB9 + \u6DF1\u8272\u6587\u5B57\uFF08\u771F\u673A\u7B2C\u4E8C\u5F20\uFF1A\u6D45\u6A59\u5E95\u6A59\u8FB9 warning\uFF09 */
2052
+ .universal-card-toast--outlined {
2053
+ background: #fff;
2054
+ color: #1f2329;
2055
+ }
2056
+ .universal-card-toast--outlined.universal-card-toast--warning {
2057
+ background: #fff7e6;
2058
+ border: 1px solid #ff9d4c;
2059
+ }
2060
+ .universal-card-toast--outlined.universal-card-toast--error {
2061
+ background: #fef1f1;
2062
+ border: 1px solid #f54a45;
2063
+ }
2064
+ .universal-card-toast--outlined.universal-card-toast--info {
2065
+ background: #e8f0ff;
2066
+ border: 1px solid #3370ff;
2067
+ }
2068
+ .universal-card-toast--outlined.universal-card-toast--success {
2069
+ background: #f0fbef;
2070
+ border: 1px solid #34c724;
2071
+ }
2050
2072
  .universal-card-toast--leave {
2051
2073
  animation: universal-card-toast-out 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
2052
2074
  }
@@ -6024,6 +6046,18 @@ function registerBuiltins() {
6024
6046
  if (borderColor) style.border = `1px solid ${borderColor}`;
6025
6047
  const radius = resolveCornerRadius(p);
6026
6048
  if (radius != null) style.borderRadius = radius;
6049
+ const horizontalDir = p.direction === "horizontal";
6050
+ if (horizontalDir) style.flexDirection = "row";
6051
+ const hAlign = p.horizontal_align ?? p.horizontalAlign;
6052
+ const vAlign = p.vertical_align ?? p.verticalAlign;
6053
+ const H_ALIGN = { left: "flex-start", center: "center", right: "flex-end" };
6054
+ const V_ALIGN = { top: "flex-start", center: "center", bottom: "flex-end" };
6055
+ const justify = horizontalDir ? H_ALIGN[hAlign] : V_ALIGN[vAlign];
6056
+ const align = horizontalDir ? V_ALIGN[vAlign] : H_ALIGN[hAlign];
6057
+ if (justify) style.justifyContent = justify;
6058
+ if (align) style.alignItems = align;
6059
+ const hGap = p.horizontalSpacingValue?.value ?? p.horizontal_spacing ?? p.horizontalSpacing;
6060
+ if (hGap != null) style.columnGap = horizontalSpacingToPx(hGap) + "px";
6027
6061
  const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
6028
6062
  if (vGap != null) style.rowGap = verticalSpacingToPx(vGap) + "px";
6029
6063
  const icWv = p.widthValue;
@@ -6872,7 +6906,7 @@ var DEFAULT_SHOW_TIME = 2e3;
6872
6906
  var TYPE_ICON = {
6873
6907
  success: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#34c724"/><path d="M4.5 8.2l2.2 2.2 4.8-4.8" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
6874
6908
  info: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#3370ff"/><circle cx="8" cy="4.6" r="1" fill="#fff"/><rect x="7.2" y="7" width="1.6" height="4.2" rx="0.8" fill="#fff"/></svg>',
6875
- warning: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#fad355"/><rect x="7.2" y="3.8" width="1.6" height="4.6" rx="0.8" fill="#1f2329"/><circle cx="8" cy="11.8" r="1" fill="#1f2329"/></svg>',
6909
+ warning: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#fad355"/><rect x="7.2" y="3.8" width="1.6" height="4.6" rx="0.8" fill="#fff"/><circle cx="8" cy="11.8" r="1" fill="#fff"/></svg>',
6876
6910
  error: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#f54a45"/><path d="M5.6 5.6l4.8 4.8M10.4 5.6l-4.8 4.8" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg>'
6877
6911
  };
6878
6912
  function escapeHTML(s) {
@@ -6881,7 +6915,8 @@ function escapeHTML(s) {
6881
6915
  function renderToastHTML(type, opts) {
6882
6916
  const maxLines = opts.maxLines ?? 1;
6883
6917
  const styleAttr = maxLines > 1 ? ` style="-webkit-line-clamp:${maxLines};"` : "";
6884
- return `<div class="universal-card-toast universal-card-toast--${type}" role="status" aria-live="polite"><span class="universal-card-toast__icon">${TYPE_ICON[type]}</span><span class="universal-card-toast__text"${styleAttr}>${escapeHTML(opts.content)}</span></div>`;
6918
+ const variantClass = opts.variant === "outlined" ? " universal-card-toast--outlined" : "";
6919
+ return `<div class="universal-card-toast universal-card-toast--${type}${variantClass}" role="status" aria-live="polite"><span class="universal-card-toast__icon">${TYPE_ICON[type]}</span><span class="universal-card-toast__text"${styleAttr}>${escapeHTML(opts.content)}</span></div>`;
6885
6920
  }
6886
6921
  function createToastHost(container) {
6887
6922
  const hostEl = typeof document === "undefined" ? null : container ?? document.body;
package/dist/index.d.cts CHANGED
@@ -635,6 +635,8 @@ interface ToastOptions {
635
635
  showTime?: number;
636
636
  /** 最大行数，超出截断省略，默认 1（客户端 maxLines:1） */
637
637
  maxLines?: number;
638
+ /** 视觉形态：'dark' 深色悬浮胶囊（默认）；'outlined' 浅底彩边（对齐客户端 .ud__notice--outlined） */
639
+ variant?: 'dark' | 'outlined';
638
640
  }
639
641
  interface ToastAPI {
640
642
  success: (opts: ToastOptions) => void;
package/dist/index.d.ts CHANGED
@@ -635,6 +635,8 @@ interface ToastOptions {
635
635
  showTime?: number;
636
636
  /** 最大行数，超出截断省略，默认 1（客户端 maxLines:1） */
637
637
  maxLines?: number;
638
+ /** 视觉形态：'dark' 深色悬浮胶囊（默认）；'outlined' 浅底彩边（对齐客户端 .ud__notice--outlined） */
639
+ variant?: 'dark' | 'outlined';
638
640
  }
639
641
  interface ToastAPI {
640
642
  success: (opts: ToastOptions) => void;
package/dist/index.js CHANGED
@@ -2036,16 +2036,38 @@ var BASE_STYLES_CSS = `/**
2036
2036
  align-items: center;
2037
2037
  gap: 8px;
2038
2038
  max-width: 600px; /* \u5BA2\u6237\u7AEF .ud__toast max-width:600px */
2039
- padding: 10px 16px;
2040
- border-radius: 8px;
2039
+ padding: 9px 16px; /* \u5BA2\u6237\u7AEF .ud__notice--filled padding:9px 0 9px 16px */
2040
+ border-radius: 6px; /* \u5BA2\u6237\u7AEF .ud__notice border-radius:6px */
2041
2041
  background: rgba(31, 35, 41, 0.92); /* N900 \u6DF1\u8272\u534A\u900F\u660E\uFF0C\u767D\u5B57 */
2042
2042
  color: #fff;
2043
2043
  font-size: 14px;
2044
2044
  line-height: 1.5;
2045
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
2045
+ box-shadow: var(--shadow-s4-down, 0 4px 16px rgba(0, 0, 0, 0.16));
2046
2046
  margin-bottom: 16px; /* \u5BA2\u6237\u7AEF .ud__toast margin-bottom:16px */
2047
2047
  animation: universal-card-toast-in 0.3s cubic-bezier(0.2, 0, 0, 1);
2048
2048
  }
2049
+ /* outlined \u6D45\u8272\u53D8\u4F53\uFF1A\u5BF9\u9F50\u5BA2\u6237\u7AEF .ud__notice--outlined.ud__notice-{type}
2050
+ \u6D45\u5E95 + \u540C\u8272\u63CF\u8FB9 + \u6DF1\u8272\u6587\u5B57\uFF08\u771F\u673A\u7B2C\u4E8C\u5F20\uFF1A\u6D45\u6A59\u5E95\u6A59\u8FB9 warning\uFF09 */
2051
+ .universal-card-toast--outlined {
2052
+ background: #fff;
2053
+ color: #1f2329;
2054
+ }
2055
+ .universal-card-toast--outlined.universal-card-toast--warning {
2056
+ background: #fff7e6;
2057
+ border: 1px solid #ff9d4c;
2058
+ }
2059
+ .universal-card-toast--outlined.universal-card-toast--error {
2060
+ background: #fef1f1;
2061
+ border: 1px solid #f54a45;
2062
+ }
2063
+ .universal-card-toast--outlined.universal-card-toast--info {
2064
+ background: #e8f0ff;
2065
+ border: 1px solid #3370ff;
2066
+ }
2067
+ .universal-card-toast--outlined.universal-card-toast--success {
2068
+ background: #f0fbef;
2069
+ border: 1px solid #34c724;
2070
+ }
2049
2071
  .universal-card-toast--leave {
2050
2072
  animation: universal-card-toast-out 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
2051
2073
  }
@@ -6023,6 +6045,18 @@ function registerBuiltins() {
6023
6045
  if (borderColor) style.border = `1px solid ${borderColor}`;
6024
6046
  const radius = resolveCornerRadius(p);
6025
6047
  if (radius != null) style.borderRadius = radius;
6048
+ const horizontalDir = p.direction === "horizontal";
6049
+ if (horizontalDir) style.flexDirection = "row";
6050
+ const hAlign = p.horizontal_align ?? p.horizontalAlign;
6051
+ const vAlign = p.vertical_align ?? p.verticalAlign;
6052
+ const H_ALIGN = { left: "flex-start", center: "center", right: "flex-end" };
6053
+ const V_ALIGN = { top: "flex-start", center: "center", bottom: "flex-end" };
6054
+ const justify = horizontalDir ? H_ALIGN[hAlign] : V_ALIGN[vAlign];
6055
+ const align = horizontalDir ? V_ALIGN[vAlign] : H_ALIGN[hAlign];
6056
+ if (justify) style.justifyContent = justify;
6057
+ if (align) style.alignItems = align;
6058
+ const hGap = p.horizontalSpacingValue?.value ?? p.horizontal_spacing ?? p.horizontalSpacing;
6059
+ if (hGap != null) style.columnGap = horizontalSpacingToPx(hGap) + "px";
6026
6060
  const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
6027
6061
  if (vGap != null) style.rowGap = verticalSpacingToPx(vGap) + "px";
6028
6062
  const icWv = p.widthValue;
@@ -6871,7 +6905,7 @@ var DEFAULT_SHOW_TIME = 2e3;
6871
6905
  var TYPE_ICON = {
6872
6906
  success: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#34c724"/><path d="M4.5 8.2l2.2 2.2 4.8-4.8" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
6873
6907
  info: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#3370ff"/><circle cx="8" cy="4.6" r="1" fill="#fff"/><rect x="7.2" y="7" width="1.6" height="4.2" rx="0.8" fill="#fff"/></svg>',
6874
- warning: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#fad355"/><rect x="7.2" y="3.8" width="1.6" height="4.6" rx="0.8" fill="#1f2329"/><circle cx="8" cy="11.8" r="1" fill="#1f2329"/></svg>',
6908
+ warning: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#fad355"/><rect x="7.2" y="3.8" width="1.6" height="4.6" rx="0.8" fill="#fff"/><circle cx="8" cy="11.8" r="1" fill="#fff"/></svg>',
6875
6909
  error: '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="#f54a45"/><path d="M5.6 5.6l4.8 4.8M10.4 5.6l-4.8 4.8" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg>'
6876
6910
  };
6877
6911
  function escapeHTML(s) {
@@ -6880,7 +6914,8 @@ function escapeHTML(s) {
6880
6914
  function renderToastHTML(type, opts) {
6881
6915
  const maxLines = opts.maxLines ?? 1;
6882
6916
  const styleAttr = maxLines > 1 ? ` style="-webkit-line-clamp:${maxLines};"` : "";
6883
- return `<div class="universal-card-toast universal-card-toast--${type}" role="status" aria-live="polite"><span class="universal-card-toast__icon">${TYPE_ICON[type]}</span><span class="universal-card-toast__text"${styleAttr}>${escapeHTML(opts.content)}</span></div>`;
6917
+ const variantClass = opts.variant === "outlined" ? " universal-card-toast--outlined" : "";
6918
+ return `<div class="universal-card-toast universal-card-toast--${type}${variantClass}" role="status" aria-live="polite"><span class="universal-card-toast__icon">${TYPE_ICON[type]}</span><span class="universal-card-toast__text"${styleAttr}>${escapeHTML(opts.content)}</span></div>`;
6884
6919
  }
6885
6920
  function createToastHost(container) {
6886
6921
  const hostEl = typeof document === "undefined" ? null : container ?? document.body;
package/dist/styles.css CHANGED
@@ -1067,16 +1067,38 @@
1067
1067
  align-items: center;
1068
1068
  gap: 8px;
1069
1069
  max-width: 600px; /* 客户端 .ud__toast max-width:600px */
1070
- padding: 10px 16px;
1071
- border-radius: 8px;
1070
+ padding: 9px 16px; /* 客户端 .ud__notice--filled padding:9px 0 9px 16px */
1071
+ border-radius: 6px; /* 客户端 .ud__notice border-radius:6px */
1072
1072
  background: rgba(31, 35, 41, 0.92); /* N900 深色半透明，白字 */
1073
1073
  color: #fff;
1074
1074
  font-size: 14px;
1075
1075
  line-height: 1.5;
1076
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
1076
+ box-shadow: var(--shadow-s4-down, 0 4px 16px rgba(0, 0, 0, 0.16));
1077
1077
  margin-bottom: 16px; /* 客户端 .ud__toast margin-bottom:16px */
1078
1078
  animation: universal-card-toast-in 0.3s cubic-bezier(0.2, 0, 0, 1);
1079
1079
  }
1080
+ /* outlined 浅色变体：对齐客户端 .ud__notice--outlined.ud__notice-{type}
1081
+ 浅底 + 同色描边 + 深色文字（真机第二张：浅橙底橙边 warning） */
1082
+ .universal-card-toast--outlined {
1083
+ background: #fff;
1084
+ color: #1f2329;
1085
+ }
1086
+ .universal-card-toast--outlined.universal-card-toast--warning {
1087
+ background: #fff7e6;
1088
+ border: 1px solid #ff9d4c;
1089
+ }
1090
+ .universal-card-toast--outlined.universal-card-toast--error {
1091
+ background: #fef1f1;
1092
+ border: 1px solid #f54a45;
1093
+ }
1094
+ .universal-card-toast--outlined.universal-card-toast--info {
1095
+ background: #e8f0ff;
1096
+ border: 1px solid #3370ff;
1097
+ }
1098
+ .universal-card-toast--outlined.universal-card-toast--success {
1099
+ background: #f0fbef;
1100
+ border: 1px solid #34c724;
1101
+ }
1080
1102
  .universal-card-toast--leave {
1081
1103
  animation: universal-card-toast-out 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
1082
1104
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@open-feishu-card/renderer",
3
- "version": "0.2.31",
3
+ "version": "0.3.0",
4
4
  "description": "零框架依赖的飞书卡片渲染引擎：Web / DOM / SSR，输入 RAW 或公开 DSL，输出真实 DOM 或 HTML 字符串",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",