@tsingroc/tsingroc-components 5.0.1 → 5.1.0

package/dist/components/LoadingSkeleton/index.js

@@ -0,0 +1,634 @@
+import { c as _c } from "react/compiler-runtime";
+import { Skeleton } from "antd";
+import { ARIA_LABELS, ARIA_ROLES } from "#src/utils/accessibility";
+
+/**
+ * Props for LoadingSkeleton component
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LoadingSkeleton - Textual content skeleton
+ *
+ * **Usage:** Text paragraphs, lists, form content
+ *
+ * Displays skeleton placeholder for textual content with accessibility support.
+ *
+ * @example
+ * ```tsx
+ * // Compact text skeleton (for stats cards, small areas)
+ * <LoadingSkeleton type="compact" rows={2} />
+ *
+ * // Table skeleton
+ * <LoadingSkeleton type="table" rows={8} />
+ *
+ * // Summary skeleton (header + content)
+ * <LoadingSkeleton type="summary" rows={4} />
+ *
+ * // Custom skeleton (default paragraph style)
+ * <LoadingSkeleton rows={4} />
+ * ```
+ */
+export function LoadingSkeleton(t0) {
+  const $ = _c(95);
+  const {
+    type: t1,
+    rows: t2,
+    cards: t3,
+    active: t4,
+    className,
+    style
+  } = t0;
+  const type = t1 === undefined ? "custom" : t1;
+  const rows = t2 === undefined ? 6 : t2;
+  const cards = t3 === undefined ? 3 : t3;
+  const active = t4 === undefined ? true : t4;
+  let t5;
+  if ($[0] !== active || $[1] !== className || $[2] !== style) {
+    t5 = {
+      active,
+      className,
+      style
+    };
+    $[0] = active;
+    $[1] = className;
+    $[2] = style;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  const skeletonProps = t5;
+  switch (type) {
+    case "table":
+      {
+        let t6;
+        if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+          t6 = {
+            width: "100%",
+            padding: "20px"
+          };
+          $[4] = t6;
+        } else {
+          t6 = $[4];
+        }
+        let t7;
+        if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+          t7 = {
+            marginBottom: 20
+          };
+          $[5] = t7;
+        } else {
+          t7 = $[5];
+        }
+        let t8;
+        if ($[6] !== active) {
+          t8 = /*#__PURE__*/_jsx(Skeleton.Input, {
+            active: active,
+            block: true,
+            style: t7
+          });
+          $[6] = active;
+          $[7] = t8;
+        } else {
+          t8 = $[7];
+        }
+        let t9;
+        if ($[8] !== rows) {
+          t9 = Array.from({
+            length: rows
+          });
+          $[8] = rows;
+          $[9] = t9;
+        } else {
+          t9 = $[9];
+        }
+        let t10;
+        if ($[10] !== active || $[11] !== t9) {
+          t10 = t9.map((__2, i_2) => /*#__PURE__*/_jsx("div", {
+            style: {
+              marginBottom: 12
+            },
+            children: /*#__PURE__*/_jsx(Skeleton.Input, {
+              active: active,
+              block: true
+            })
+          }, i_2));
+          $[10] = active;
+          $[11] = t9;
+          $[12] = t10;
+        } else {
+          t10 = $[12];
+        }
+        let t11;
+        if ($[13] !== t10 || $[14] !== t8) {
+          t11 = /*#__PURE__*/_jsxs("div", {
+            style: t6,
+            role: ARIA_ROLES.STATUS,
+            "aria-live": "polite",
+            "aria-label": ARIA_LABELS.LOADING,
+            children: [t8, t10]
+          });
+          $[13] = t10;
+          $[14] = t8;
+          $[15] = t11;
+        } else {
+          t11 = $[15];
+        }
+        return t11;
+      }
+    case "form":
+      {
+        let t6;
+        if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+          t6 = {
+            width: "100%",
+            padding: "20px"
+          };
+          $[16] = t6;
+        } else {
+          t6 = $[16];
+        }
+        let t7;
+        if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+          t7 = {
+            marginBottom: 20
+          };
+          $[17] = t7;
+        } else {
+          t7 = $[17];
+        }
+        let t8;
+        if ($[18] !== active) {
+          t8 = /*#__PURE__*/_jsx(Skeleton.Input, {
+            active: active,
+            block: true,
+            size: "large",
+            style: t7
+          });
+          $[18] = active;
+          $[19] = t8;
+        } else {
+          t8 = $[19];
+        }
+        let t9;
+        if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+          t9 = {
+            marginBottom: 15
+          };
+          $[20] = t9;
+        } else {
+          t9 = $[20];
+        }
+        let t10;
+        if ($[21] !== active) {
+          t10 = /*#__PURE__*/_jsx(Skeleton.Input, {
+            active: active,
+            block: true,
+            size: "large",
+            style: t9
+          });
+          $[21] = active;
+          $[22] = t10;
+        } else {
+          t10 = $[22];
+        }
+        let t11;
+        if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+          t11 = {
+            marginBottom: 15
+          };
+          $[23] = t11;
+        } else {
+          t11 = $[23];
+        }
+        let t12;
+        if ($[24] !== active) {
+          t12 = /*#__PURE__*/_jsx(Skeleton.Input, {
+            active: active,
+            block: true,
+            size: "large",
+            style: t11
+          });
+          $[24] = active;
+          $[25] = t12;
+        } else {
+          t12 = $[25];
+        }
+        let t13;
+        if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+          t13 = {
+            marginBottom: 15
+          };
+          $[26] = t13;
+        } else {
+          t13 = $[26];
+        }
+        let t14;
+        if ($[27] !== active) {
+          t14 = /*#__PURE__*/_jsx(Skeleton.Input, {
+            active: active,
+            block: true,
+            size: "large",
+            style: t13
+          });
+          $[27] = active;
+          $[28] = t14;
+        } else {
+          t14 = $[28];
+        }
+        let t15;
+        if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+          t15 = {
+            marginTop: 20,
+            display: "flex",
+            gap: 10
+          };
+          $[29] = t15;
+        } else {
+          t15 = $[29];
+        }
+        let t16;
+        if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+          t16 = {
+            width: 100
+          };
+          $[30] = t16;
+        } else {
+          t16 = $[30];
+        }
+        let t17;
+        if ($[31] !== active) {
+          t17 = /*#__PURE__*/_jsx(Skeleton.Button, {
+            active: active,
+            style: t16
+          });
+          $[31] = active;
+          $[32] = t17;
+        } else {
+          t17 = $[32];
+        }
+        let t18;
+        if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+          t18 = {
+            width: 100
+          };
+          $[33] = t18;
+        } else {
+          t18 = $[33];
+        }
+        let t19;
+        if ($[34] !== active) {
+          t19 = /*#__PURE__*/_jsx(Skeleton.Button, {
+            active: active,
+            style: t18
+          });
+          $[34] = active;
+          $[35] = t19;
+        } else {
+          t19 = $[35];
+        }
+        let t20;
+        if ($[36] !== t17 || $[37] !== t19) {
+          t20 = /*#__PURE__*/_jsxs("div", {
+            style: t15,
+            children: [t17, t19]
+          });
+          $[36] = t17;
+          $[37] = t19;
+          $[38] = t20;
+        } else {
+          t20 = $[38];
+        }
+        let t21;
+        if ($[39] !== t10 || $[40] !== t12 || $[41] !== t14 || $[42] !== t20 || $[43] !== t8) {
+          t21 = /*#__PURE__*/_jsxs("div", {
+            style: t6,
+            role: ARIA_ROLES.STATUS,
+            "aria-live": "polite",
+            "aria-label": ARIA_LABELS.LOADING,
+            children: [t8, t10, t12, t14, t20]
+          });
+          $[39] = t10;
+          $[40] = t12;
+          $[41] = t14;
+          $[42] = t20;
+          $[43] = t8;
+          $[44] = t21;
+        } else {
+          t21 = $[44];
+        }
+        return t21;
+      }
+    case "card":
+      {
+        let t6;
+        if ($[45] !== style) {
+          t6 = {
+            width: "100%",
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+            gap: 16,
+            padding: "20px",
+            ...style
+          };
+          $[45] = style;
+          $[46] = t6;
+        } else {
+          t6 = $[46];
+        }
+        let t7;
+        if ($[47] !== cards) {
+          t7 = Array.from({
+            length: cards
+          });
+          $[47] = cards;
+          $[48] = t7;
+        } else {
+          t7 = $[48];
+        }
+        let t8;
+        if ($[49] !== active || $[50] !== t7) {
+          t8 = t7.map((__1, i_1) => /*#__PURE__*/_jsx(Skeleton, {
+            active: active,
+            style: {
+              width: "100%"
+            }
+          }, i_1));
+          $[49] = active;
+          $[50] = t7;
+          $[51] = t8;
+        } else {
+          t8 = $[51];
+        }
+        let t9;
+        if ($[52] !== className || $[53] !== t6 || $[54] !== t8) {
+          t9 = /*#__PURE__*/_jsx("div", {
+            style: t6,
+            className: className,
+            role: ARIA_ROLES.STATUS,
+            "aria-live": "polite",
+            "aria-label": ARIA_LABELS.LOADING,
+            children: t8
+          });
+          $[52] = className;
+          $[53] = t6;
+          $[54] = t8;
+          $[55] = t9;
+        } else {
+          t9 = $[55];
+        }
+        return t9;
+      }
+    case "list":
+      {
+        let t6;
+        if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
+          t6 = {
+            width: "100%",
+            padding: "20px"
+          };
+          $[56] = t6;
+        } else {
+          t6 = $[56];
+        }
+        let t7;
+        if ($[57] !== rows) {
+          t7 = Array.from({
+            length: rows
+          });
+          $[57] = rows;
+          $[58] = t7;
+        } else {
+          t7 = $[58];
+        }
+        let t8;
+        if ($[59] !== active || $[60] !== t7) {
+          t8 = /*#__PURE__*/_jsx("div", {
+            style: t6,
+            role: ARIA_ROLES.STATUS,
+            "aria-live": "polite",
+            "aria-label": ARIA_LABELS.LOADING,
+            children: t7.map((__0, i_0) => /*#__PURE__*/_jsxs("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                marginBottom: 16
+              },
+              children: [/*#__PURE__*/_jsx(Skeleton.Avatar, {
+                active: active,
+                size: 48,
+                style: {
+                  marginRight: 16
+                }
+              }), /*#__PURE__*/_jsxs("div", {
+                style: {
+                  flex: 1,
+                  width: "100%",
+                  minWidth: 0
+                },
+                children: [/*#__PURE__*/_jsx(Skeleton.Input, {
+                  active: active,
+                  block: true,
+                  style: {
+                    marginBottom: 8
+                  }
+                }), /*#__PURE__*/_jsx(Skeleton.Input, {
+                  active: active,
+                  block: true
+                })]
+              })]
+            }, i_0))
+          });
+          $[59] = active;
+          $[60] = t7;
+          $[61] = t8;
+        } else {
+          t8 = $[61];
+        }
+        return t8;
+      }
+    case "summary":
+      {
+        let t6;
+        if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
+          t6 = {
+            width: "100%",
+            padding: "20px"
+          };
+          $[62] = t6;
+        } else {
+          t6 = $[62];
+        }
+        let t7;
+        if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
+          t7 = {
+            marginBottom: 16
+          };
+          $[63] = t7;
+        } else {
+          t7 = $[63];
+        }
+        let t8;
+        if ($[64] !== active) {
+          t8 = /*#__PURE__*/_jsx(Skeleton.Input, {
+            active: active,
+            block: true,
+            style: t7
+          });
+          $[64] = active;
+          $[65] = t8;
+        } else {
+          t8 = $[65];
+        }
+        let t9;
+        if ($[66] !== rows) {
+          t9 = Array.from({
+            length: rows
+          });
+          $[66] = rows;
+          $[67] = t9;
+        } else {
+          t9 = $[67];
+        }
+        let t10;
+        if ($[68] !== active || $[69] !== t9) {
+          t10 = t9.map((_, i) => /*#__PURE__*/_jsx("div", {
+            style: {
+              marginBottom: 12
+            },
+            children: /*#__PURE__*/_jsx(Skeleton.Input, {
+              active: active,
+              block: true
+            })
+          }, i));
+          $[68] = active;
+          $[69] = t9;
+          $[70] = t10;
+        } else {
+          t10 = $[70];
+        }
+        let t11;
+        if ($[71] !== t10 || $[72] !== t8) {
+          t11 = /*#__PURE__*/_jsxs("div", {
+            style: t6,
+            role: ARIA_ROLES.STATUS,
+            "aria-live": "polite",
+            "aria-label": ARIA_LABELS.LOADING,
+            children: [t8, t10]
+          });
+          $[71] = t10;
+          $[72] = t8;
+          $[73] = t11;
+        } else {
+          t11 = $[73];
+        }
+        return t11;
+      }
+    case "compact":
+      {
+        let t6;
+        if ($[74] !== style) {
+          t6 = {
+            width: "100%",
+            ...style
+          };
+          $[74] = style;
+          $[75] = t6;
+        } else {
+          t6 = $[75];
+        }
+        let t7;
+        if ($[76] !== rows) {
+          t7 = {
+            rows
+          };
+          $[76] = rows;
+          $[77] = t7;
+        } else {
+          t7 = $[77];
+        }
+        let t8;
+        if ($[78] !== skeletonProps || $[79] !== t7) {
+          t8 = /*#__PURE__*/_jsx(Skeleton, {
+            ...skeletonProps,
+            paragraph: t7,
+            title: false
+          });
+          $[78] = skeletonProps;
+          $[79] = t7;
+          $[80] = t8;
+        } else {
+          t8 = $[80];
+        }
+        let t9;
+        if ($[81] !== className || $[82] !== t6 || $[83] !== t8) {
+          t9 = /*#__PURE__*/_jsx("div", {
+            role: ARIA_ROLES.STATUS,
+            "aria-live": "polite",
+            "aria-label": ARIA_LABELS.LOADING,
+            style: t6,
+            className: className,
+            children: t8
+          });
+          $[81] = className;
+          $[82] = t6;
+          $[83] = t8;
+          $[84] = t9;
+        } else {
+          t9 = $[84];
+        }
+        return t9;
+      }
+    default:
+      {
+        let t6;
+        if ($[85] !== style) {
+          t6 = {
+            width: "100%",
+            ...style
+          };
+          $[85] = style;
+          $[86] = t6;
+        } else {
+          t6 = $[86];
+        }
+        let t7;
+        if ($[87] !== rows) {
+          t7 = {
+            rows
+          };
+          $[87] = rows;
+          $[88] = t7;
+        } else {
+          t7 = $[88];
+        }
+        let t8;
+        if ($[89] !== skeletonProps || $[90] !== t7) {
+          t8 = /*#__PURE__*/_jsx(Skeleton, {
+            ...skeletonProps,
+            paragraph: t7
+          });
+          $[89] = skeletonProps;
+          $[90] = t7;
+          $[91] = t8;
+        } else {
+          t8 = $[91];
+        }
+        let t9;
+        if ($[92] !== t6 || $[93] !== t8) {
+          t9 = /*#__PURE__*/_jsx("div", {
+            role: ARIA_ROLES.STATUS,
+            "aria-live": "polite",
+            "aria-label": ARIA_LABELS.LOADING,
+            style: t6,
+            children: t8
+          });
+          $[92] = t6;
+          $[93] = t8;
+          $[94] = t9;
+        } else {
+          t9 = $[94];
+        }
+        return t9;
+      }
+  }
+}

package/dist/components/ScrollableTable/ScrollableTable.module.css

@@ -0,0 +1,21 @@
+@layer tsingroc-components {
+  @scope (.root) to (table, :global(.ant-pagination)) {
+    :scope, :scope * {
+      display: flex;
+      flex-direction: column;
+    }
+    :scope * {
+      min-height: 0;
+      flex: 1;
+    }
+    :global(.ant-table-header) {
+      flex: none;
+    }
+  }
+
+  .root {
+    :global(.ant-pagination) {
+      margin-bottom: 0;
+    }
+  }
+}

package/dist/components/ScrollableTable/index.d.ts

@@ -0,0 +1,13 @@
+import { Table, type GetProps } from "antd";
+/**
+ * 在竖直方向上滚动并且支持调整高度的表格。
+ *
+ * 调用接口与 [Ant Design 的 Table](https://ant-design.antgroup.com/components/table-cn) 完全一致，
+ * 也支持套用 {@linkcode TsingrocTable} 的样式。
+ *
+ * 该组件实际上只在 Table 基础上添加了 CSS 样式并修改了默认值。你可以通过 `ScrollableTable.style` 取得该组件的 CSS 类名。
+ */
+declare const _default: (<DataType extends Record<string, any>>({ scroll, className, ...props }: GetProps<typeof Table<DataType>>) => import("react/jsx-runtime").JSX.Element) & {
+    style: string | undefined;
+};
+export default _default;

package/dist/components/ScrollableTable/index.js

@@ -0,0 +1,29 @@
+import { Table } from "antd";
+import styles from "./ScrollableTable.module.css";
+
+/**
+ * 在竖直方向上滚动并且支持调整高度的表格。
+ *
+ * 调用接口与 [Ant Design 的 Table](https://ant-design.antgroup.com/components/table-cn) 完全一致，
+ * 也支持套用 {@linkcode TsingrocTable} 的样式。
+ *
+ * 该组件实际上只在 Table 基础上添加了 CSS 样式并修改了默认值。你可以通过 `ScrollableTable.style` 取得该组件的 CSS 类名。
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default Object.assign(function ScrollableTable({
+  scroll,
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Table, {
+    scroll: {
+      y: "auto",
+      ...scroll
+    },
+    pagination: false,
+    className: styles.root + " " + (className ?? ""),
+    ...props
+  });
+}, {
+  style: styles.root
+});