@open-feishu-card/renderer 0.2.31 → 0.2.32

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 +28 -5
  3. package/dist/index.d.cts +2 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.js +28 -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
  }
@@ -6872,7 +6894,7 @@ var DEFAULT_SHOW_TIME = 2e3;
6872
6894
  var TYPE_ICON = {
6873
6895
  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
6896
  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>',
6897
+ 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
6898
  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
6899
  };
6878
6900
  function escapeHTML(s) {
@@ -6881,7 +6903,8 @@ function escapeHTML(s) {
6881
6903
  function renderToastHTML(type, opts) {
6882
6904
  const maxLines = opts.maxLines ?? 1;
6883
6905
  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>`;
6906
+ const variantClass = opts.variant === "outlined" ? " universal-card-toast--outlined" : "";
6907
+ 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
6908
  }
6886
6909
  function createToastHost(container) {
6887
6910
  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
  }
@@ -6871,7 +6893,7 @@ var DEFAULT_SHOW_TIME = 2e3;
6871
6893
  var TYPE_ICON = {
6872
6894
  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
6895
  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>',
6896
+ 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
6897
  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
6898
  };
6877
6899
  function escapeHTML(s) {
@@ -6880,7 +6902,8 @@ function escapeHTML(s) {
6880
6902
  function renderToastHTML(type, opts) {
6881
6903
  const maxLines = opts.maxLines ?? 1;
6882
6904
  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>`;
6905
+ const variantClass = opts.variant === "outlined" ? " universal-card-toast--outlined" : "";
6906
+ 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
6907
  }
6885
6908
  function createToastHost(container) {
6886
6909
  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.2.32",
4
4
  "description": "零框架依赖的飞书卡片渲染引擎：Web / DOM / SSR，输入 RAW 或公开 DSL，输出真实 DOM 或 HTML 字符串",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",