@cozeloop/components 0.0.1

package/dist/es/resize-sidesheet/index_module.css

@@ -0,0 +1,9 @@
+.sheet_935c5 .semi-sidesheet-header {
+  display: flex;
+  align-items: flex-start;
+  padding: 18px 24px;
+  border-bottom: 1px solid var(--semi-color-border);
+}
+.sheet_935c5 .semi-sidesheet-footer {
+  border-top: 1px solid var(--semi-color-border);
+}

package/dist/es/resize-sidesheet/use-drag.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from "react";
+import { useMouseDownOffset } from "../hooks/use-mouse-down-offset";
+const DEFAULT_WIDTH = 500;
+const MAX_WIDTH = 800;
+const MIN_WIDTH = 300;
+const useDrag = (options = {}) => {
+  const {
+    defaultWidth = DEFAULT_WIDTH,
+    maxWidth = MAX_WIDTH,
+    minWidth = MIN_WIDTH
+  } = options;
+  const [sidePaneWidth, setSidePaneWidth] = useState(defaultWidth);
+  const prevWidthRef = useRef(sidePaneWidth);
+  const { ref, isActive } = useMouseDownOffset(({ offsetX }) => {
+    const newWidth = prevWidthRef.current - offsetX;
+    setSidePaneWidth([maxWidth, newWidth, minWidth].sort((a, b) => a - b)[1]);
+  });
+  useEffect(() => {
+    prevWidthRef.current = sidePaneWidth;
+    document.body.style.cursor = isActive ? "col-resize" : "";
+    document.body.style.userSelect = isActive ? "none" : "auto";
+  }, [isActive]);
+  return {
+    sidePaneWidth,
+    containerRef: ref,
+    isActive
+  };
+};
+export {
+  useDrag
+};

package/dist/es/table/index.js

@@ -0,0 +1,56 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { IconCozIllusEmpty } from "@coze-arch/coze-design/illustrations";
+import { EmptyState, Table } from "@coze-arch/coze-design";
+import styles from "./index.module";
+const LoopTable = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    Table,
+    __spreadProps(__spreadValues({
+      empty: /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          size: "full_screen",
+          icon: /* @__PURE__ */ jsx(IconCozIllusEmpty, {}),
+          title: "暂无数据"
+        }
+      )
+    }, props), {
+      id: styles["fornax-table"]
+    })
+  );
+};
+export {
+  LoopTable
+};

package/dist/es/table/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "fornax-table": "fornax-table_8eb2d" };
+export {
+  index_module_default as default
+};

package/dist/es/table/index_module.css

@@ -0,0 +1,90 @@
+#fornax-table_8eb2d {
+  /* stylelint-disable declaration-no-important */
+  /* stylelint-disable no-descending-specificity */
+}
+#fornax-table_8eb2d .semi-table-container {
+  overflow: hidden;
+  border: 1px solid var(--line-color-border-2, #eaedf1);
+  border-radius: 6px;
+}
+#fornax-table_8eb2d .semi-table-header {
+  background-color: var(--coz-bg, #f0f0f7);
+}
+#fornax-table_8eb2d .semi-spin-wrapper svg {
+  width: 20px;
+  height: 20px;
+}
+#fornax-table_8eb2d .semi-table-row:hover > .semi-table-row-cell:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+#fornax-table_8eb2d .semi-table-row:hover > .semi-table-row-cell:last-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+#fornax-table_8eb2d .semi-table-tbody .semi-table-row:last-child .semi-table-row-cell {
+  border-bottom: none;
+}
+#fornax-table_8eb2d .semi-table-row-head {
+  box-sizing: border-box;
+  height: 42px;
+  padding: 5px 20px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--coz-fg-plus);
+  background: var(--coz-bg, #f0f0f7);
+  background-color: var(--coz-bg, #f0f0f7) !important;
+  border-bottom: 1px solid var(--line-color-border-2, #eaedf1);
+}
+#fornax-table_8eb2d .semi-table-row-head::before {
+  background-color: var(--coz-bg, #f0f0f7) !important;
+}
+#fornax-table_8eb2d .semi-table-row {
+  background-color: var(--coz-bg-max);
+}
+#fornax-table_8eb2d .semi-table-row:hover {
+  border-radius: 0 !important;
+}
+#fornax-table_8eb2d .semi-table-row:hover .semi-table-row-cell {
+  background-color: var(--coz-bg);
+}
+#fornax-table_8eb2d .semi-table-row:hover .semi-table-cell-fixed-left {
+  background-image: linear-gradient(0deg, var(--coz-bg), var(--coz-bg));
+}
+#fornax-table_8eb2d .semi-table-row:hover .semi-table-cell-fixed-right {
+  background-image: linear-gradient(0deg, var(--coz-bg), var(--coz-bg));
+}
+#fornax-table_8eb2d .semi-table-row-cell {
+  overflow: hidden;
+  box-sizing: border-box;
+  height: 42px;
+  padding: 10px 20px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--coz-fg-primary);
+  vertical-align: top;
+  background-color: #fff;
+  border-radius: 0;
+  vertical-align: middle;
+}
+#fornax-table_8eb2d .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last,
+#fornax-table_8eb2d .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last {
+  border-right: none;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
+}
+#fornax-table_8eb2d .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first,
+#fornax-table_8eb2d .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first {
+  border-left: none;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
+}
+#fornax-table_8eb2d .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last,
+#fornax-table_8eb2d .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last,
+#fornax-table_8eb2d .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first,
+#fornax-table_8eb2d .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first {
+  box-shadow: none !important;
+}
+#fornax-table_8eb2d .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head:last-child,
+#fornax-table_8eb2d .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell:last-child {
+  border-right: none;
+}

package/dist/es/table/sort-icon.js

@@ -0,0 +1,105 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@coze-arch/coze-design";
+import IconButtonContainer from "../id-render/icon-button-container";
+const activeColor = "rgb(var(--coze-up-brand-9))";
+const unActiveColor = "var(--coz-fg-dim)";
+const IconSortArrow = (_a) => {
+  var _b = _a, {
+    sortOrder
+  } = _b, rest = __objRest(_b, [
+    "sortOrder"
+  ]);
+  let descendColor = "currentColor";
+  let ascendColor = "currentColor";
+  if (sortOrder === "descend") {
+    descendColor = activeColor;
+    ascendColor = unActiveColor;
+  } else if (sortOrder === "ascend") {
+    descendColor = unActiveColor;
+    ascendColor = activeColor;
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    __spreadProps(__spreadValues({
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M7.00012 1.99976C7.55241 1.99976 8.00012 2.44747 8.00012 2.99976V17.2677L9.6341 14.4376C9.91024 13.9593 10.5218 13.7954 11.0001 14.0715C11.4784 14.3477 11.6423 14.9593 11.3661 15.4376L7.8758 21.483C7.85628 21.5183 7.83468 21.5523 7.81118 21.5849C7.72727 21.7015 7.62174 21.7953 7.50337 21.8641C7.38229 21.9347 7.24502 21.9807 7.09848 21.995C7.06439 21.9984 7.03007 22 6.99566 21.9999C6.64882 22.0011 6.31102 21.8217 6.12517 21.4998L2.62517 15.4376C2.34903 14.9593 2.5129 14.3477 2.99119 14.0715C3.46949 13.7954 4.08108 13.9593 4.35722 14.4376L6.00012 17.2832V2.99976C6.00012 2.44747 6.44784 1.99976 7.00012 1.99976Z",
+            fill: descendColor
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M17.001 21.9999C16.4487 21.9999 16.001 21.5522 16.001 20.9999L16.001 6.73198L14.367 9.5621C14.0909 10.0404 13.4793 10.2043 13.001 9.92813C12.5227 9.65199 12.3589 9.04039 12.635 8.5621L16.1253 2.51665C16.1449 2.48135 16.1665 2.44735 16.19 2.41482C16.2739 2.29823 16.3794 2.20436 16.4978 2.13559C16.6189 2.06494 16.7561 2.019 16.9027 2.0047C16.9368 2.0013 16.9711 1.99964 17.0055 1.99977C17.3523 1.99854 17.6901 2.17802 17.876 2.49993L21.376 8.5621C21.6521 9.0404 21.4882 9.65199 21.0099 9.92813C20.5317 10.2043 19.9201 10.0404 19.6439 9.5621L18.001 6.71652L18.001 20.9999C18.001 21.5522 17.5533 21.9999 17.001 21.9999Z",
+            fill: ascendColor
+          }
+        )
+      ]
+    })
+  );
+};
+function LoopTableSortIcon({
+  sortOrder
+}) {
+  let tooltip = "点击升序";
+  if (sortOrder === "ascend") {
+    tooltip = "点击降序";
+  } else if (sortOrder === "descend") {
+    tooltip = "点击恢复默认排序";
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { theme: "dark", content: tooltip, children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+    IconButtonContainer,
+    {
+      icon: /* @__PURE__ */ jsx(
+        IconSortArrow,
+        {
+          sortOrder,
+          className: "text-[var(--coz-fg-secondary)]"
+        }
+      )
+    }
+  ) }) });
+}
+export {
+  IconSortArrow,
+  LoopTableSortIcon as default
+};

package/dist/es/table/table-with-pagination.js

@@ -0,0 +1,112 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { useSize } from "ahooks";
+import { CozPagination } from "@coze-arch/coze-design";
+import LoopTableSortIcon from "./sort-icon";
+import { LoopTable } from "./index";
+const PAGE_SIZE_OPTIONS = [10, 20, 50];
+const DEFAULT_PAGE_SIZE = 10;
+function TableWithPagination(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const {
+    pageSizeOpts,
+    service,
+    header,
+    heightFull = false,
+    footerWithPagination
+  } = props;
+  const { columns } = (_a = props.tableProps) != null ? _a : {};
+  const tableContainerRef = useRef(null);
+  const size = useSize(tableContainerRef.current);
+  const tableHeaderSize = useSize(
+    (_b = tableContainerRef.current) == null ? void 0 : _b.querySelector(".semi-table-header")
+  );
+  const tablePagination = useMemo(
+    () => ({
+      currentPage: service.pagination.current,
+      pageSize: service.pagination.pageSize,
+      total: Number(service.pagination.total),
+      onChange: (page, pageSize) => {
+        service.pagination.onChange(page, pageSize);
+      },
+      showSizeChanger: true,
+      pageSizeOpts: pageSizeOpts != null ? pageSizeOpts : PAGE_SIZE_OPTIONS
+    }),
+    [service.pagination, pageSizeOpts]
+  );
+  useEffect(() => {
+    var _a2, _b2;
+    if (service.pagination.current > 1 && ((_b2 = (_a2 = service == null ? void 0 : service.data) == null ? void 0 : _a2.list) == null ? void 0 : _b2.length) === 0) {
+      service.pagination.changeCurrent(1);
+    }
+  }, [service.pagination.current, (_c = service == null ? void 0 : service.data) == null ? void 0 : _c.list]);
+  const tableHeaderHeight = (_d = tableHeaderSize == null ? void 0 : tableHeaderSize.height) != null ? _d : 56;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${heightFull ? "h-full flex overflow-hidden" : ""} flex flex-col gap-3`,
+      children: [
+        header ? header : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: tableContainerRef,
+            className: heightFull ? "flex-1 overflow-hidden" : "",
+            children: /* @__PURE__ */ jsx(
+              LoopTable,
+              __spreadProps(__spreadValues({}, props), {
+                tableProps: __spreadProps(__spreadValues({
+                  empty: /* @__PURE__ */ jsx(Fragment, {})
+                }, (_e = props.tableProps) != null ? _e : {}), {
+                  scroll: __spreadValues({
+                    // 表格容器的高度减去表格头的高度
+                    y: (size == null ? void 0 : size.height) === void 0 || !heightFull ? void 0 : size.height - tableHeaderHeight - 2
+                  }, (_g = (_f = props.tableProps) == null ? void 0 : _f.scroll) != null ? _g : {}),
+                  loading: service == null ? void 0 : service.loading,
+                  columns: (_h = columns == null ? void 0 : columns.filter(
+                    (column) => column.hidden !== true && column.checked !== false
+                  )) == null ? void 0 : _h.map((column) => __spreadValues(__spreadValues({}, column), column.sorter && !column.sortIcon ? { sortIcon: LoopTableSortIcon } : {})),
+                  dataSource: (_j = (_i = service == null ? void 0 : service.data) == null ? void 0 : _i.list) != null ? _j : []
+                })
+              })
+            )
+          }
+        ),
+        service.pagination.current > 1 || ((_l = (_k = service == null ? void 0 : service.data) == null ? void 0 : _k.list) == null ? void 0 : _l.length) && ((_n = (_m = service == null ? void 0 : service.data) == null ? void 0 : _m.list) == null ? void 0 : _n.length) > 0 ? /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex flex-row-reverse justify-between items-center", children: [
+          /* @__PURE__ */ jsx(
+            CozPagination,
+            __spreadProps(__spreadValues({}, tablePagination), {
+              showTotal: true,
+              showSizeChanger: true
+            })
+          ),
+          footerWithPagination
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_PAGE_SIZE,
+  PAGE_SIZE_OPTIONS,
+  TableWithPagination
+};

package/dist/es/table/table-without-pagniation.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useSize } from "ahooks";
+import LoopTableSortIcon from "./sort-icon";
+import { LoopTable } from "./index";
+const PAGE_SIZE_OPTIONS = [10, 20, 50];
+const DEFAULT_PAGE_SIZE = 10;
+function TableWithoutPagination(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { header, heightFull = false } = props;
+  const { columns } = (_a = props.tableProps) != null ? _a : {};
+  const tableContainerRef = useRef(null);
+  const size = useSize(tableContainerRef.current);
+  const tableHeaderSize = useSize(
+    (_b = tableContainerRef.current) == null ? void 0 : _b.querySelector(".semi-table-header")
+  );
+  const tableHeaderHeight = (_c = tableHeaderSize == null ? void 0 : tableHeaderSize.height) != null ? _c : 56;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${heightFull ? "h-full flex overflow-hidden" : ""} flex flex-col gap-3`,
+      children: [
+        header ? header : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: tableContainerRef,
+            className: heightFull ? "flex-1 overflow-hidden" : "",
+            children: /* @__PURE__ */ jsx(
+              LoopTable,
+              __spreadProps(__spreadValues({}, props), {
+                tableProps: __spreadProps(__spreadValues({
+                  empty: /* @__PURE__ */ jsx(Fragment, {})
+                }, (_d = props.tableProps) != null ? _d : {}), {
+                  scroll: __spreadValues({
+                    // 表格容器的高度减去表格头的高度
+                    y: (size == null ? void 0 : size.height) === void 0 || !heightFull ? void 0 : size.height - tableHeaderHeight - 2
+                  }, (_f = (_e = props.tableProps) == null ? void 0 : _e.scroll) != null ? _f : {}),
+                  columns: (_g = columns == null ? void 0 : columns.filter(
+                    (column) => column.hidden !== true && column.checked !== false
+                  )) == null ? void 0 : _g.map((column) => __spreadValues(__spreadValues({}, column), column.sorter && !column.sortIcon ? { sortIcon: LoopTableSortIcon } : {}))
+                })
+              })
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_PAGE_SIZE,
+  PAGE_SIZE_OPTIONS,
+  TableWithoutPagination
+};

package/dist/es/table-col-actions/index.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconCozMore } from "@coze-arch/coze-design/icons";
+import {
+  Dropdown,
+  Space,
+  Typography
+} from "@coze-arch/coze-design";
+import { TooltipWhenDisabled } from "../tooltip-with-disabled";
+function TableColActions({ actions, maxCount = 2, disabled }) {
+  const [visible, setVisible] = useState(false);
+  const filteredActions = actions.filter((action) => !action.hide);
+  const firstActions = filteredActions.slice(0, maxCount);
+  const moreActions = filteredActions.slice(maxCount);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      children: /* @__PURE__ */ jsxs(Space, { spacing: 12, children: [
+        firstActions.map((action, index) => {
+          var _a;
+          return /* @__PURE__ */ jsx(
+            TooltipWhenDisabled,
+            {
+              content: action.disabledTooltip || action.label,
+              disabled: Boolean(action.disabled),
+              children: /* @__PURE__ */ jsx(
+                Typography.Text,
+                {
+                  size: "small",
+                  className: "!text-[13px]",
+                  type: action.type,
+                  disabled: (_a = action.disabled) != null ? _a : disabled,
+                  onClick: () => {
+                    var _a2, _b;
+                    if (!((_a2 = action.disabled) != null ? _a2 : disabled)) {
+                      (_b = action.onClick) == null ? void 0 : _b.call(action);
+                    }
+                  },
+                  link: !action.type,
+                  children: action.icon ? null : action.label
+                }
+              )
+            },
+            index
+          );
+        }),
+        moreActions.length > 0 && /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            position: "bottomLeft",
+            visible,
+            trigger: "custom",
+            onClickOutSide: () => setVisible(false),
+            render: /* @__PURE__ */ jsx(Dropdown.Menu, { mode: "menu", children: moreActions.map((action, index) => {
+              var _a;
+              return /* @__PURE__ */ jsx(
+                Dropdown.Item,
+                {
+                  disabled: (_a = action.disabled) != null ? _a : disabled,
+                  onClick: () => {
+                    var _a2, _b;
+                    if (!((_a2 = action.disabled) != null ? _a2 : disabled)) {
+                      setVisible(false);
+                      (_b = action.onClick) == null ? void 0 : _b.call(action);
+                    }
+                  },
+                  className: "min-w-[90px] !p-0 !pl-2",
+                  icon: action.icon,
+                  style: { minWidth: "90px" },
+                  children: /* @__PURE__ */ jsx(
+                    Typography.Text,
+                    {
+                      type: action.type,
+                      size: "small",
+                      className: "!text-[13px]",
+                      link: !action.type,
+                      children: action.label
+                    }
+                  )
+                },
+                index
+              );
+            }) }),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex items-center justify-center",
+                onClick: () => setVisible(true),
+                children: /* @__PURE__ */ jsx(IconCozMore, { className: "text-[#5A4DED]" })
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  TableColActions
+};

package/dist/es/table-header/index.js

@@ -0,0 +1,68 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { IconCozRefresh } from "@coze-arch/coze-design/icons";
+import {
+  Button,
+  Space,
+  Tooltip
+} from "@coze-arch/coze-design";
+import { ColumnSelector } from "../columns-select";
+import styles from "./index.module";
+function TableHeader({
+  columnSelectorConfigProps,
+  filterForm,
+  actions,
+  className,
+  style,
+  spaceProps,
+  refreshButtonPros
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("flex flex-row justify-between w-full ", className),
+      style,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classNames("flex flex-row", styles["table-header-form"]), children: filterForm }),
+        /* @__PURE__ */ jsxs(Space, __spreadProps(__spreadValues({}, spaceProps || {}), { children: [
+          refreshButtonPros ? /* @__PURE__ */ jsx(Tooltip, { content: "刷新", theme: "dark", children: /* @__PURE__ */ jsx(
+            Button,
+            __spreadValues({
+              color: "primary",
+              icon: /* @__PURE__ */ jsx(IconCozRefresh, {})
+            }, refreshButtonPros)
+          ) }) : null,
+          columnSelectorConfigProps ? /* @__PURE__ */ jsx(
+            ColumnSelector,
+            __spreadValues({
+              className: classNames(columnSelectorConfigProps.className)
+            }, columnSelectorConfigProps)
+          ) : null,
+          actions
+        ] }))
+      ]
+    }
+  );
+}
+export {
+  TableHeader
+};

package/dist/es/table-header/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "table-header-form": "table-header-form_47d15" };
+export {
+  index_module_default as default
+};

package/dist/es/table-header/index_module.css

@@ -0,0 +1,3 @@
+.table-header-form_47d15 .semi-form-horizontal .semi-form-field {
+  padding-right: 8px;
+}