@open-feishu-card/renderer 0.2.32 → 0.3.1

package/dist/all.css

@@ -443,6 +443,32 @@
 /* 非跳转按钮：保留外观，但不可点（默认光标、无 hover、不响应点击） */
 .universal-card-button--static { cursor: default; pointer-events: none; }
 
+/* ---- overflow 折叠按钮组 ---- */
+/* 真机是一个「…」图标按钮，点击弹出选项菜单。静态预览只画触发器（--static 不可点）。 */
+.universal-card-overflow { display: inline-flex; position: relative; vertical-align: middle; }
+.universal-card-overflow--static { display: inline-flex; }
+.universal-card-overflow__summary {
+  list-style: none; cursor: pointer; display: inline-flex;
+}
+/* 去掉 <summary> 的浏览器默认三角标记 */
+.universal-card-overflow__summary::-webkit-details-marker { display: none; }
+.universal-card-overflow__summary::marker { content: ''; }
+/* 菜单：默认隐藏，<details open> 时浮在触发器下方 */
+.universal-card-overflow__menu {
+  display: none;
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
+  min-width: 120px; padding: 4px 0;
+  background: #fff; border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(31, 35, 41, 0.15), 0 0 1px rgba(31, 35, 41, 0.2);
+}
+.universal-card-overflow[open] > .universal-card-overflow__menu { display: block; }
+.universal-card-overflow__item {
+  display: block; padding: 6px 12px;
+  font-size: 14px; line-height: 22px; color: #1f2329;
+  text-decoration: none; white-space: nowrap; cursor: pointer;
+}
+.universal-card-overflow__item:hover { background: #f5f6f7; }
+
 /* ---- 表单（预览：仅透传，无表单语义） ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }

package/dist/index.cjs

@@ -1413,6 +1413,32 @@ var BASE_STYLES_CSS = `/**
 /* \u975E\u8DF3\u8F6C\u6309\u94AE\uFF1A\u4FDD\u7559\u5916\u89C2\uFF0C\u4F46\u4E0D\u53EF\u70B9\uFF08\u9ED8\u8BA4\u5149\u6807\u3001\u65E0 hover\u3001\u4E0D\u54CD\u5E94\u70B9\u51FB\uFF09 */
 .universal-card-button--static { cursor: default; pointer-events: none; }
 
+/* ---- overflow \u6298\u53E0\u6309\u94AE\u7EC4 ---- */
+/* \u771F\u673A\u662F\u4E00\u4E2A\u300C\u2026\u300D\u56FE\u6807\u6309\u94AE\uFF0C\u70B9\u51FB\u5F39\u51FA\u9009\u9879\u83DC\u5355\u3002\u9759\u6001\u9884\u89C8\u53EA\u753B\u89E6\u53D1\u5668\uFF08--static \u4E0D\u53EF\u70B9\uFF09\u3002 */
+.universal-card-overflow { display: inline-flex; position: relative; vertical-align: middle; }
+.universal-card-overflow--static { display: inline-flex; }
+.universal-card-overflow__summary {
+  list-style: none; cursor: pointer; display: inline-flex;
+}
+/* \u53BB\u6389 <summary> \u7684\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0 */
+.universal-card-overflow__summary::-webkit-details-marker { display: none; }
+.universal-card-overflow__summary::marker { content: ''; }
+/* \u83DC\u5355\uFF1A\u9ED8\u8BA4\u9690\u85CF\uFF0C<details open> \u65F6\u6D6E\u5728\u89E6\u53D1\u5668\u4E0B\u65B9 */
+.universal-card-overflow__menu {
+  display: none;
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
+  min-width: 120px; padding: 4px 0;
+  background: #fff; border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(31, 35, 41, 0.15), 0 0 1px rgba(31, 35, 41, 0.2);
+}
+.universal-card-overflow[open] > .universal-card-overflow__menu { display: block; }
+.universal-card-overflow__item {
+  display: block; padding: 6px 12px;
+  font-size: 14px; line-height: 22px; color: #1f2329;
+  text-decoration: none; white-space: nowrap; cursor: pointer;
+}
+.universal-card-overflow__item:hover { background: #f5f6f7; }
+
 /* ---- \u8868\u5355\uFF08\u9884\u89C8\uFF1A\u4EC5\u900F\u4F20\uFF0C\u65E0\u8868\u5355\u8BED\u4E49\uFF09 ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }
@@ -6035,8 +6061,9 @@ function registerBuiltins() {
     const tip = extractText(p.hoverTips);
     const borderNamed = p.border_color ?? p.borderColor;
     const borderCustom = adapter.resolveCustomBorderLight(p);
-    const borderColor = (borderCustom ? resolveColor(borderCustom) : void 0) ?? resolveColor(borderNamed);
-    const hasBorder = borderColor != null || p.hasBorder === true || p.has_border === true;
+    const borderColorResolved = (borderCustom ? resolveColor(borderCustom) : void 0) ?? resolveColor(borderNamed);
+    const hasBorder = p.hasBorder === true || p.has_border === true;
+    const borderColor = hasBorder ? borderColorResolved : void 0;
     const cls = `${CLS}-interactive-container` + (clickable ? ` ${CLS}-interactive-container--action` : "") + (hasBorder && !borderColor ? ` ${CLS}-interactive-container--bordered` : "") + (disabled ? ` ${CLS}-interactive-container--disabled` : "");
     const style = {};
     const bg = propertyBackgroundColor(p);
@@ -6046,6 +6073,18 @@ function registerBuiltins() {
     if (borderColor) style.border = `1px solid ${borderColor}`;
     const radius = resolveCornerRadius(p);
     if (radius != null) style.borderRadius = radius;
+    const horizontalDir = p.direction === "horizontal";
+    if (horizontalDir) style.flexDirection = "row";
+    const hAlign = p.horizontal_align ?? p.horizontalAlign;
+    const vAlign = p.vertical_align ?? p.verticalAlign;
+    const H_ALIGN = { left: "flex-start", center: "center", right: "flex-end" };
+    const V_ALIGN = { top: "flex-start", center: "center", bottom: "flex-end" };
+    const justify = horizontalDir ? H_ALIGN[hAlign] : V_ALIGN[vAlign];
+    const align = horizontalDir ? V_ALIGN[vAlign] : H_ALIGN[hAlign];
+    if (justify) style.justifyContent = justify;
+    if (align) style.alignItems = align;
+    const hGap = p.horizontalSpacingValue?.value ?? p.horizontal_spacing ?? p.horizontalSpacing;
+    if (hGap != null) style.columnGap = horizontalSpacingToPx(hGap) + "px";
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
     if (vGap != null) style.rowGap = verticalSpacingToPx(vGap) + "px";
     const icWv = p.widthValue;
@@ -6192,6 +6231,43 @@ function registerBuiltins() {
     };
     return fromList(p.actions) ?? fromList(p.behaviors) ?? (isRecord(p.value) ? p.value : null);
   }
+  registerComponent("overflow", (el, ctx) => {
+    const p = el.property || {};
+    const disabled = p.disabled === true;
+    const options = Array.isArray(p.options) ? p.options : [];
+    const widthTok = p.width ?? p.widthValue?.value;
+    const block = widthTok === "fill";
+    const triggerIcon = renderIcon(
+      { property: { token: "more_outlined", size: "14px" } },
+      ctx
+    );
+    const triggerCls = `${CLS}-button ${CLS}-button--default ${CLS}-button--static ${CLS}-overflow__trigger` + (disabled ? ` ${CLS}-button--disabled` : "") + (block ? ` ${CLS}-button--block` : "");
+    const trigger = triggerIcon ? h("span", { className: triggerCls }, h("span", { className: `${CLS}-button__icon` }, triggerIcon)) : h("span", { className: triggerCls }, "\xB7\xB7\xB7");
+    const items = options.map((raw) => {
+      const opt = isRecord(raw) ? raw : {};
+      const textObj = opt.text;
+      const label = (isRecord(textObj) && typeof textObj.content === "string" ? textObj.content : extractPlainText(textObj)) || extractPlainText(opt);
+      const multi = isRecord(opt.multi_url) ? opt.multi_url : void 0;
+      const href = resolveURL(multi?.url ?? opt.url);
+      const itemCls = `${CLS}-overflow__item`;
+      if (href && !disabled) {
+        return h("a", { className: itemCls, href, target: "_blank", rel: "noopener" }, label);
+      }
+      return h("span", { className: itemCls }, label);
+    });
+    const style = {};
+    if (p.margin) applyOuterMargin(style, p.margin);
+    const styleProp = Object.keys(style).length ? { style } : {};
+    if (!ctx.options.interactive) {
+      return h("span", { className: `${CLS}-overflow ${CLS}-overflow--static`, ...styleProp }, trigger);
+    }
+    return h(
+      "details",
+      { className: `${CLS}-overflow`, ...styleProp },
+      h("summary", { className: `${CLS}-overflow__summary` }, trigger),
+      h("div", { className: `${CLS}-overflow__menu` }, items)
+    );
+  });
   registerComponent("form", (el, ctx) => {
     const children = renderElements(el.property?.elements, ctx);
     const className = `${CLS}-form`;

package/dist/index.js

@@ -1412,6 +1412,32 @@ var BASE_STYLES_CSS = `/**
 /* \u975E\u8DF3\u8F6C\u6309\u94AE\uFF1A\u4FDD\u7559\u5916\u89C2\uFF0C\u4F46\u4E0D\u53EF\u70B9\uFF08\u9ED8\u8BA4\u5149\u6807\u3001\u65E0 hover\u3001\u4E0D\u54CD\u5E94\u70B9\u51FB\uFF09 */
 .universal-card-button--static { cursor: default; pointer-events: none; }
 
+/* ---- overflow \u6298\u53E0\u6309\u94AE\u7EC4 ---- */
+/* \u771F\u673A\u662F\u4E00\u4E2A\u300C\u2026\u300D\u56FE\u6807\u6309\u94AE\uFF0C\u70B9\u51FB\u5F39\u51FA\u9009\u9879\u83DC\u5355\u3002\u9759\u6001\u9884\u89C8\u53EA\u753B\u89E6\u53D1\u5668\uFF08--static \u4E0D\u53EF\u70B9\uFF09\u3002 */
+.universal-card-overflow { display: inline-flex; position: relative; vertical-align: middle; }
+.universal-card-overflow--static { display: inline-flex; }
+.universal-card-overflow__summary {
+  list-style: none; cursor: pointer; display: inline-flex;
+}
+/* \u53BB\u6389 <summary> \u7684\u6D4F\u89C8\u5668\u9ED8\u8BA4\u4E09\u89D2\u6807\u8BB0 */
+.universal-card-overflow__summary::-webkit-details-marker { display: none; }
+.universal-card-overflow__summary::marker { content: ''; }
+/* \u83DC\u5355\uFF1A\u9ED8\u8BA4\u9690\u85CF\uFF0C<details open> \u65F6\u6D6E\u5728\u89E6\u53D1\u5668\u4E0B\u65B9 */
+.universal-card-overflow__menu {
+  display: none;
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
+  min-width: 120px; padding: 4px 0;
+  background: #fff; border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(31, 35, 41, 0.15), 0 0 1px rgba(31, 35, 41, 0.2);
+}
+.universal-card-overflow[open] > .universal-card-overflow__menu { display: block; }
+.universal-card-overflow__item {
+  display: block; padding: 6px 12px;
+  font-size: 14px; line-height: 22px; color: #1f2329;
+  text-decoration: none; white-space: nowrap; cursor: pointer;
+}
+.universal-card-overflow__item:hover { background: #f5f6f7; }
+
 /* ---- \u8868\u5355\uFF08\u9884\u89C8\uFF1A\u4EC5\u900F\u4F20\uFF0C\u65E0\u8868\u5355\u8BED\u4E49\uFF09 ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }
@@ -6034,8 +6060,9 @@ function registerBuiltins() {
     const tip = extractText(p.hoverTips);
     const borderNamed = p.border_color ?? p.borderColor;
     const borderCustom = resolveCustomBorderLight(p);
-    const borderColor = (borderCustom ? resolveColor(borderCustom) : void 0) ?? resolveColor(borderNamed);
-    const hasBorder = borderColor != null || p.hasBorder === true || p.has_border === true;
+    const borderColorResolved = (borderCustom ? resolveColor(borderCustom) : void 0) ?? resolveColor(borderNamed);
+    const hasBorder = p.hasBorder === true || p.has_border === true;
+    const borderColor = hasBorder ? borderColorResolved : void 0;
     const cls = `${CLS}-interactive-container` + (clickable ? ` ${CLS}-interactive-container--action` : "") + (hasBorder && !borderColor ? ` ${CLS}-interactive-container--bordered` : "") + (disabled ? ` ${CLS}-interactive-container--disabled` : "");
     const style = {};
     const bg = propertyBackgroundColor(p);
@@ -6045,6 +6072,18 @@ function registerBuiltins() {
     if (borderColor) style.border = `1px solid ${borderColor}`;
     const radius = resolveCornerRadius(p);
     if (radius != null) style.borderRadius = radius;
+    const horizontalDir = p.direction === "horizontal";
+    if (horizontalDir) style.flexDirection = "row";
+    const hAlign = p.horizontal_align ?? p.horizontalAlign;
+    const vAlign = p.vertical_align ?? p.verticalAlign;
+    const H_ALIGN = { left: "flex-start", center: "center", right: "flex-end" };
+    const V_ALIGN = { top: "flex-start", center: "center", bottom: "flex-end" };
+    const justify = horizontalDir ? H_ALIGN[hAlign] : V_ALIGN[vAlign];
+    const align = horizontalDir ? V_ALIGN[vAlign] : H_ALIGN[hAlign];
+    if (justify) style.justifyContent = justify;
+    if (align) style.alignItems = align;
+    const hGap = p.horizontalSpacingValue?.value ?? p.horizontal_spacing ?? p.horizontalSpacing;
+    if (hGap != null) style.columnGap = horizontalSpacingToPx(hGap) + "px";
     const vGap = p.verticalSpacingValue?.value ?? p.vertical_spacing;
     if (vGap != null) style.rowGap = verticalSpacingToPx(vGap) + "px";
     const icWv = p.widthValue;
@@ -6191,6 +6230,43 @@ function registerBuiltins() {
     };
     return fromList(p.actions) ?? fromList(p.behaviors) ?? (isRecord(p.value) ? p.value : null);
   }
+  registerComponent("overflow", (el, ctx) => {
+    const p = el.property || {};
+    const disabled = p.disabled === true;
+    const options = Array.isArray(p.options) ? p.options : [];
+    const widthTok = p.width ?? p.widthValue?.value;
+    const block = widthTok === "fill";
+    const triggerIcon = renderIcon(
+      { property: { token: "more_outlined", size: "14px" } },
+      ctx
+    );
+    const triggerCls = `${CLS}-button ${CLS}-button--default ${CLS}-button--static ${CLS}-overflow__trigger` + (disabled ? ` ${CLS}-button--disabled` : "") + (block ? ` ${CLS}-button--block` : "");
+    const trigger = triggerIcon ? h("span", { className: triggerCls }, h("span", { className: `${CLS}-button__icon` }, triggerIcon)) : h("span", { className: triggerCls }, "\xB7\xB7\xB7");
+    const items = options.map((raw) => {
+      const opt = isRecord(raw) ? raw : {};
+      const textObj = opt.text;
+      const label = (isRecord(textObj) && typeof textObj.content === "string" ? textObj.content : extractPlainText(textObj)) || extractPlainText(opt);
+      const multi = isRecord(opt.multi_url) ? opt.multi_url : void 0;
+      const href = resolveURL(multi?.url ?? opt.url);
+      const itemCls = `${CLS}-overflow__item`;
+      if (href && !disabled) {
+        return h("a", { className: itemCls, href, target: "_blank", rel: "noopener" }, label);
+      }
+      return h("span", { className: itemCls }, label);
+    });
+    const style = {};
+    if (p.margin) applyOuterMargin(style, p.margin);
+    const styleProp = Object.keys(style).length ? { style } : {};
+    if (!ctx.options.interactive) {
+      return h("span", { className: `${CLS}-overflow ${CLS}-overflow--static`, ...styleProp }, trigger);
+    }
+    return h(
+      "details",
+      { className: `${CLS}-overflow`, ...styleProp },
+      h("summary", { className: `${CLS}-overflow__summary` }, trigger),
+      h("div", { className: `${CLS}-overflow__menu` }, items)
+    );
+  });
   registerComponent("form", (el, ctx) => {
     const children = renderElements(el.property?.elements, ctx);
     const className = `${CLS}-form`;

package/dist/styles.css

@@ -443,6 +443,32 @@
 /* 非跳转按钮：保留外观，但不可点（默认光标、无 hover、不响应点击） */
 .universal-card-button--static { cursor: default; pointer-events: none; }
 
+/* ---- overflow 折叠按钮组 ---- */
+/* 真机是一个「…」图标按钮，点击弹出选项菜单。静态预览只画触发器（--static 不可点）。 */
+.universal-card-overflow { display: inline-flex; position: relative; vertical-align: middle; }
+.universal-card-overflow--static { display: inline-flex; }
+.universal-card-overflow__summary {
+  list-style: none; cursor: pointer; display: inline-flex;
+}
+/* 去掉 <summary> 的浏览器默认三角标记 */
+.universal-card-overflow__summary::-webkit-details-marker { display: none; }
+.universal-card-overflow__summary::marker { content: ''; }
+/* 菜单：默认隐藏，<details open> 时浮在触发器下方 */
+.universal-card-overflow__menu {
+  display: none;
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
+  min-width: 120px; padding: 4px 0;
+  background: #fff; border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(31, 35, 41, 0.15), 0 0 1px rgba(31, 35, 41, 0.2);
+}
+.universal-card-overflow[open] > .universal-card-overflow__menu { display: block; }
+.universal-card-overflow__item {
+  display: block; padding: 6px 12px;
+  font-size: 14px; line-height: 22px; color: #1f2329;
+  text-decoration: none; white-space: nowrap; cursor: pointer;
+}
+.universal-card-overflow__item:hover { background: #f5f6f7; }
+
 /* ---- 表单（预览：仅透传，无表单语义） ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-feishu-card/renderer",
-  "version": "0.2.32",
+  "version": "0.3.1",
   "description": "零框架依赖的飞书卡片渲染引擎：Web / DOM / SSR，输入 RAW 或公开 DSL，输出真实 DOM 或 HTML 字符串",
   "type": "module",
   "main": "./dist/index.cjs",