@sia.soul/sia-react-ui 0.1.53 → 0.1.54

package/dist/core.css

@@ -4176,6 +4176,56 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   align-items: center;
   min-width: 0;
 }
+.sia-table__cell--tree-lines {
+  padding-block: 0;
+}
+.sia-table__cell--tree-lines > .sia-table__cell-content {
+  position: absolute;
+  inset: 0 12px;
+}
+.sia-table__tree-cell--lines {
+  height: 100%;
+}
+.sia-table__tree-guide {
+  position: relative;
+  align-self: stretch;
+  flex: 0 0 18px;
+  width: 18px;
+}
+.sia-table__tree-guide--branch::before,
+.sia-table__tree-guide--continued::before {
+  position: absolute;
+  content: "";
+  left: 10px;
+  top: 0;
+  height: 50%;
+  border-left: 1px solid var(--sia-color-border);
+}
+.sia-table__tree-guide--continued::before {
+  height: 100%;
+}
+.sia-table__tree-guide--branch::after {
+  position: absolute;
+  content: "";
+  left: 10px;
+  right: 0;
+  top: 50%;
+  border-top: 1px solid var(--sia-color-border);
+}
+.sia-table__tree-node {
+  position: relative;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 20px;
+}
+.sia-table__tree-stem {
+  position: absolute;
+  left: 10px;
+  top: calc(50% + 10px);
+  bottom: 0;
+  border-left: 1px solid var(--sia-color-border);
+}
 .sia-table__tree-toggle,
 .sia-table__tree-placeholder {
   display: inline-grid;

package/dist/index.cjs

@@ -13612,14 +13612,15 @@ function createTreePlugin(options = {}) {
     transformRows(rows, context) {
       if (options.ignoreChildrenColumn ?? true) return rows;
       const result = [];
-      const walk = (items, depth) => {
-        for (const row of items) {
+      const walk = (items, depth, guides) => {
+        for (const [rowIndex, row] of items.entries()) {
+          const hasNextSibling = rowIndex < items.length - 1;
           const children = row.record[childKey];
           const hasChildren = Array.isArray(children) && children.length > 0 && (options.canExpand?.(row.record) ?? true);
           result.push({
             ...row,
             depth,
-            meta: { ...row.meta, treeHasChildren: hasChildren }
+            meta: { ...row.meta, treeHasChildren: hasChildren, treeGuides: guides, treeHasNextSibling: hasNextSibling }
           });
           if (hasChildren && current(context).includes(row.key)) {
             walk(
@@ -13630,12 +13631,13 @@ function createTreePlugin(options = {}) {
                 depth: depth + 1,
                 meta: {}
               })),
-              depth + 1
+              depth + 1,
+              depth > 0 ? [...guides, hasNextSibling] : guides
             );
           }
         }
       };
-      walk(rows, 0);
+      walk(rows, 0, []);
       return result;
     },
     transformColumns(columns, context) {
@@ -13647,32 +13649,40 @@ function createTreePlugin(options = {}) {
         const previousRender = column.render;
         return {
           ...column,
+          ...options.showLine ? { ellipsis: false, meta: { ...column.meta, treeLines: true } } : {},
           render: (value, record, index, info) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
             "span",
             {
-              className: "sia-table__tree-cell",
-              style: { paddingLeft: info.row.depth * 18 },
+              className: `sia-table__tree-cell${options.showLine ? " sia-table__tree-cell--lines" : ""}`,
+              style: options.showLine ? void 0 : { paddingLeft: info.row.depth * 18 },
               children: [
-                info.row.meta.treeHasChildren ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    className: "sia-table__tree-toggle",
-                    "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9",
-                    "aria-expanded": current(context).includes(info.row.key),
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      toggle(info.row.key, context);
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                      Icon,
-                      {
-                        name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right",
-                        size: 13
-                      }
-                    )
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "sia-table__tree-placeholder" }),
+                options.showLine && info.row.depth > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+                  info.row.meta.treeGuides.map((continued, level) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "aria-hidden": "true", className: `sia-table__tree-guide${continued ? " sia-table__tree-guide--continued" : ""}` }, level)),
+                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "aria-hidden": "true", className: `sia-table__tree-guide sia-table__tree-guide--branch${info.row.meta.treeHasNextSibling ? " sia-table__tree-guide--continued" : ""}` })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: options.showLine ? "sia-table__tree-node" : void 0, style: options.showLine ? void 0 : { display: "contents" }, children: [
+                  options.showLine && !!info.row.meta.treeHasChildren && current(context).includes(info.row.key) && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "aria-hidden": "true", className: "sia-table__tree-stem" }),
+                  info.row.meta.treeHasChildren ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sia-table__tree-toggle",
+                      "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9",
+                      "aria-expanded": current(context).includes(info.row.key),
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        toggle(info.row.key, context);
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                        Icon,
+                        {
+                          name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right",
+                          size: 13
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "sia-table__tree-placeholder" })
+                ] }),
                 previousRender ? previousRender(value, record, index, info) : value
               ]
             }
@@ -13680,6 +13690,9 @@ function createTreePlugin(options = {}) {
         };
       });
     },
+    getCellProps(_row, column) {
+      return column.meta?.treeLines ? { className: "sia-table__cell--tree-lines" } : void 0;
+    },
     getApi: (context) => ({
       getExpandedKeys: () => current(context),
       setExpandedKeys: (keys) => setKeys(keys, context),

package/dist/index.css

@@ -4176,6 +4176,56 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   align-items: center;
   min-width: 0;
 }
+.sia-table__cell--tree-lines {
+  padding-block: 0;
+}
+.sia-table__cell--tree-lines > .sia-table__cell-content {
+  position: absolute;
+  inset: 0 12px;
+}
+.sia-table__tree-cell--lines {
+  height: 100%;
+}
+.sia-table__tree-guide {
+  position: relative;
+  align-self: stretch;
+  flex: 0 0 18px;
+  width: 18px;
+}
+.sia-table__tree-guide--branch::before,
+.sia-table__tree-guide--continued::before {
+  position: absolute;
+  content: "";
+  left: 10px;
+  top: 0;
+  height: 50%;
+  border-left: 1px solid var(--sia-color-border);
+}
+.sia-table__tree-guide--continued::before {
+  height: 100%;
+}
+.sia-table__tree-guide--branch::after {
+  position: absolute;
+  content: "";
+  left: 10px;
+  right: 0;
+  top: 50%;
+  border-top: 1px solid var(--sia-color-border);
+}
+.sia-table__tree-node {
+  position: relative;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 20px;
+}
+.sia-table__tree-stem {
+  position: absolute;
+  left: 10px;
+  top: calc(50% + 10px);
+  bottom: 0;
+  border-left: 1px solid var(--sia-color-border);
+}
 .sia-table__tree-toggle,
 .sia-table__tree-placeholder {
   display: inline-grid;

package/dist/index.d.cts

@@ -2587,6 +2587,8 @@ interface TableIndexPluginOptions {
 declare function createIndexPlugin<T extends Record<string, unknown>>(options?: TableIndexPluginOptions): TablePlugin<T, undefined>;
 /** TableTree的插件配置。 */
 interface TableTreePluginOptions<T> {
+    /** 显示树形层级连接线；仅在 ignoreChildrenColumn=false 时生效，默认 false。 */
+    showLine?: boolean;
     /** 行数据中存放子行的字段名。 */
     childrenColumnName?: string;
     /** 是否忽略数据内的子行字段。 */

package/dist/index.d.ts

@@ -2587,6 +2587,8 @@ interface TableIndexPluginOptions {
 declare function createIndexPlugin<T extends Record<string, unknown>>(options?: TableIndexPluginOptions): TablePlugin<T, undefined>;
 /** TableTree的插件配置。 */
 interface TableTreePluginOptions<T> {
+    /** 显示树形层级连接线；仅在 ignoreChildrenColumn=false 时生效，默认 false。 */
+    showLine?: boolean;
     /** 行数据中存放子行的字段名。 */
     childrenColumnName?: string;
     /** 是否忽略数据内的子行字段。 */

package/dist/index.js

@@ -6359,14 +6359,15 @@ function createTreePlugin(options = {}) {
     transformRows(rows, context) {
       if (options.ignoreChildrenColumn ?? true) return rows;
       const result = [];
-      const walk = (items, depth) => {
-        for (const row of items) {
+      const walk = (items, depth, guides) => {
+        for (const [rowIndex, row] of items.entries()) {
+          const hasNextSibling = rowIndex < items.length - 1;
           const children = row.record[childKey];
           const hasChildren = Array.isArray(children) && children.length > 0 && (options.canExpand?.(row.record) ?? true);
           result.push({
             ...row,
             depth,
-            meta: { ...row.meta, treeHasChildren: hasChildren }
+            meta: { ...row.meta, treeHasChildren: hasChildren, treeGuides: guides, treeHasNextSibling: hasNextSibling }
           });
           if (hasChildren && current(context).includes(row.key)) {
             walk(
@@ -6377,12 +6378,13 @@ function createTreePlugin(options = {}) {
                 depth: depth + 1,
                 meta: {}
               })),
-              depth + 1
+              depth + 1,
+              depth > 0 ? [...guides, hasNextSibling] : guides
             );
           }
         }
       };
-      walk(rows, 0);
+      walk(rows, 0, []);
       return result;
     },
     transformColumns(columns, context) {
@@ -6394,32 +6396,40 @@ function createTreePlugin(options = {}) {
         const previousRender = column.render;
         return {
           ...column,
+          ...options.showLine ? { ellipsis: false, meta: { ...column.meta, treeLines: true } } : {},
           render: (value, record, index, info) => /* @__PURE__ */ jsxs20(
             "span",
             {
-              className: "sia-table__tree-cell",
-              style: { paddingLeft: info.row.depth * 18 },
+              className: `sia-table__tree-cell${options.showLine ? " sia-table__tree-cell--lines" : ""}`,
+              style: options.showLine ? void 0 : { paddingLeft: info.row.depth * 18 },
               children: [
-                info.row.meta.treeHasChildren ? /* @__PURE__ */ jsx22(
-                  "button",
-                  {
-                    type: "button",
-                    className: "sia-table__tree-toggle",
-                    "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9",
-                    "aria-expanded": current(context).includes(info.row.key),
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      toggle(info.row.key, context);
-                    },
-                    children: /* @__PURE__ */ jsx22(
-                      Icon,
-                      {
-                        name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right",
-                        size: 13
-                      }
-                    )
-                  }
-                ) : /* @__PURE__ */ jsx22("span", { className: "sia-table__tree-placeholder" }),
+                options.showLine && info.row.depth > 0 && /* @__PURE__ */ jsxs20(Fragment7, { children: [
+                  info.row.meta.treeGuides.map((continued, level) => /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: `sia-table__tree-guide${continued ? " sia-table__tree-guide--continued" : ""}` }, level)),
+                  /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: `sia-table__tree-guide sia-table__tree-guide--branch${info.row.meta.treeHasNextSibling ? " sia-table__tree-guide--continued" : ""}` })
+                ] }),
+                /* @__PURE__ */ jsxs20("span", { className: options.showLine ? "sia-table__tree-node" : void 0, style: options.showLine ? void 0 : { display: "contents" }, children: [
+                  options.showLine && !!info.row.meta.treeHasChildren && current(context).includes(info.row.key) && /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: "sia-table__tree-stem" }),
+                  info.row.meta.treeHasChildren ? /* @__PURE__ */ jsx22(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sia-table__tree-toggle",
+                      "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9",
+                      "aria-expanded": current(context).includes(info.row.key),
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        toggle(info.row.key, context);
+                      },
+                      children: /* @__PURE__ */ jsx22(
+                        Icon,
+                        {
+                          name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right",
+                          size: 13
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx22("span", { className: "sia-table__tree-placeholder" })
+                ] }),
                 previousRender ? previousRender(value, record, index, info) : value
               ]
             }
@@ -6427,6 +6437,9 @@ function createTreePlugin(options = {}) {
         };
       });
     },
+    getCellProps(_row, column) {
+      return column.meta?.treeLines ? { className: "sia-table__cell--tree-lines" } : void 0;
+    },
     getApi: (context) => ({
       getExpandedKeys: () => current(context),
       setExpandedKeys: (keys) => setKeys(keys, context),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.53",
+  "version": "0.1.54",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",