@tsingroc/tsingroc-components 5.0.0-alpha.11 → 5.0.0-alpha.13

package/dist/components/Header.d.ts

@@ -0,0 +1,67 @@
+import { type MenuProps } from "antd";
+import type { CSSProperties, ReactNode } from "react";
+export type MenuItem = Required<MenuProps>["items"][number];
+export interface HeaderProps extends MenuProps {
+    /**
+     * 网站 logo 的 URL。
+     *
+     * 建议导入图片，然后填入导入得到的地址，而不要硬编码地址。
+     */
+    logo?: string;
+    /** 顶栏的标题。*/
+    title?: string;
+    /**
+     * 顶栏左端部分（logo 和标题）的宽度。在与边栏搭配时，推荐设置成与边栏同宽。
+     * @default 260
+     */
+    leftEndWidth?: number | string;
+    /**
+     * 顶栏左端的内容（logo 和标题）。设置了该属性时，
+     * {@linkcode HeaderProps.logo | logo}、
+     * {@linkcode HeaderProps.title | title} 和
+     * {@linkcode HeaderProps.leftEndWidth | leftEndWidth} 将失去作用。
+     * 填 `null` 可以隐藏掉默认值（与 `undefined` 不同！）。
+     */
+    leftEnd?: ReactNode;
+    /**
+     * 菜单项配置，默认为空。
+     *
+     * 该属性以及其余属性的用法可参考 [`Menu` 组件的文档][1]。
+     *
+     * [1]: https://ant-design.antgroup.com/components/menu-cn
+     */
+    items?: MenuItem[];
+    /** 当前选中的菜单项 key 数组。 */
+    selectedKeys?: string[];
+    /** 当前展开的子菜单 key 数组。 */
+    openKeys?: string[];
+    /** 菜单项被选中时的回调函数。 */
+    onSelect?: MenuProps["onSelect"];
+    /** 子菜单展开/收起时的回调函数。 */
+    onOpenChange?: MenuProps["onOpenChange"];
+    /**
+     * 顶栏右端的额外内容。默认使用 {@linkcode UserButton} 组件。
+     * 填 `null` 可以隐藏掉默认值（与 `undefined` 不同！）。
+     * @default <UserButton layout="header" />
+     */
+    rightEnd?: ReactNode;
+    /** 额外的 `className`。*/
+    className?: string;
+    /** 额外的 CSS 样式。*/
+    style?: CSSProperties;
+}
+/**
+ * 顶栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
+ * 如果没有指定 {@linkcode HeaderProps.rightEnd | rightEnd} 属性，
+ * 那么还需要包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后
+ * 才能正常显示顶栏右端的用户信息按钮。
+ *
+ * 一般来说，使用该组件时至少需要提供 `logo`、`items` 和 `onSelect` 三个属性，具体用法请参照范例。
+ *
+ * 除了文档中列出的属性之外，该组件会把额外的属性全部传递给内部的菜单 [`Menu` 组件][2]。
+ *
+ * [1]: https://ant-design.antgroup.com/components/layout-cn
+ * [2]: https://ant-design.antgroup.com/components/menu-cn
+ */
+declare function Header(props: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/components/Header.js

@@ -0,0 +1,171 @@
+import { c as _c } from "react/compiler-runtime";
+import { Flex, Layout, Menu, theme } from "antd";
+import UserButton from "./UserButton";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 顶栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
+ * 如果没有指定 {@linkcode HeaderProps.rightEnd | rightEnd} 属性，
+ * 那么还需要包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后
+ * 才能正常显示顶栏右端的用户信息按钮。
+ *
+ * 一般来说，使用该组件时至少需要提供 `logo`、`items` 和 `onSelect` 三个属性，具体用法请参照范例。
+ *
+ * 除了文档中列出的属性之外，该组件会把额外的属性全部传递给内部的菜单 [`Menu` 组件][2]。
+ *
+ * [1]: https://ant-design.antgroup.com/components/layout-cn
+ * [2]: https://ant-design.antgroup.com/components/menu-cn
+ */
+function Header(props) {
+  const $ = _c(34);
+  const {
+    token
+  } = theme.useToken();
+  let className;
+  let leftEnd;
+  let logo;
+  let rest;
+  let rightEnd;
+  let style;
+  let t0;
+  let title;
+  if ($[0] !== props) {
+    ({
+      logo,
+      title,
+      leftEndWidth: t0,
+      leftEnd,
+      rightEnd,
+      className,
+      style,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = className;
+    $[2] = leftEnd;
+    $[3] = logo;
+    $[4] = rest;
+    $[5] = rightEnd;
+    $[6] = style;
+    $[7] = t0;
+    $[8] = title;
+  } else {
+    className = $[1];
+    leftEnd = $[2];
+    logo = $[3];
+    rest = $[4];
+    rightEnd = $[5];
+    style = $[6];
+    t0 = $[7];
+    title = $[8];
+  }
+  const leftEndWidth = t0 === undefined ? 260 : t0;
+  let t1;
+  if ($[9] !== style || $[10] !== token.colorBgContainer || $[11] !== token.colorText) {
+    t1 = {
+      display: "flex",
+      alignItems: "center",
+      boxShadow: "rgba(0, 0, 0, 0.15) 0 0 8px",
+      zIndex: 1,
+      background: token.colorBgContainer,
+      padding: 0,
+      color: token.colorText,
+      ...style
+    };
+    $[9] = style;
+    $[10] = token.colorBgContainer;
+    $[11] = token.colorText;
+    $[12] = t1;
+  } else {
+    t1 = $[12];
+  }
+  let t2;
+  if ($[13] !== leftEnd || $[14] !== leftEndWidth || $[15] !== logo || $[16] !== title || $[17] !== token.colorText || $[18] !== token.marginSM || $[19] !== token.paddingLG || $[20] !== token.paddingSM || $[21] !== token.paddingXXS) {
+    t2 = leftEnd !== undefined ? leftEnd : /*#__PURE__*/_jsxs(Flex, {
+      align: "center",
+      gap: token.marginSM,
+      style: {
+        minWidth: leftEndWidth,
+        height: "100%",
+        paddingInlineStart: token.paddingLG + token.paddingXXS,
+        paddingInlineEnd: token.paddingSM
+      },
+      children: [/*#__PURE__*/_jsx("img", {
+        alt: "logo",
+        src: logo,
+        style: {
+          height: "50%"
+        }
+      }), /*#__PURE__*/_jsx("h1", {
+        style: {
+          flexBasis: "100%",
+          textAlign: "center",
+          color: token.colorText
+        },
+        children: title
+      })]
+    });
+    $[13] = leftEnd;
+    $[14] = leftEndWidth;
+    $[15] = logo;
+    $[16] = title;
+    $[17] = token.colorText;
+    $[18] = token.marginSM;
+    $[19] = token.paddingLG;
+    $[20] = token.paddingSM;
+    $[21] = token.paddingXXS;
+    $[22] = t2;
+  } else {
+    t2 = $[22];
+  }
+  let t3;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      flexBasis: "100%",
+      height: "100%",
+      borderBlockEnd: "none"
+    };
+    $[23] = t3;
+  } else {
+    t3 = $[23];
+  }
+  let t4;
+  if ($[24] !== rest) {
+    t4 = /*#__PURE__*/_jsx(Menu, {
+      mode: "horizontal",
+      ...rest,
+      style: t3
+    });
+    $[24] = rest;
+    $[25] = t4;
+  } else {
+    t4 = $[25];
+  }
+  let t5;
+  if ($[26] !== rightEnd) {
+    t5 = rightEnd !== undefined ? rightEnd : /*#__PURE__*/_jsx(UserButton, {
+      layout: "header"
+    });
+    $[26] = rightEnd;
+    $[27] = t5;
+  } else {
+    t5 = $[27];
+  }
+  let t6;
+  if ($[28] !== className || $[29] !== t1 || $[30] !== t2 || $[31] !== t4 || $[32] !== t5) {
+    t6 = /*#__PURE__*/_jsxs(Layout.Header, {
+      className: className,
+      style: t1,
+      children: [t2, t4, t5]
+    });
+    $[28] = className;
+    $[29] = t1;
+    $[30] = t2;
+    $[31] = t4;
+    $[32] = t5;
+    $[33] = t6;
+  } else {
+    t6 = $[33];
+  }
+  return t6;
+}
+export default Header;

package/dist/components/ImageBackground.d.ts

@@ -0,0 +1,32 @@
+export interface ImageBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 图片的 URL。
+     *
+     * 建议导入图片，然后填入导入得到的地址，而不要硬编码地址。
+     *
+     * ```jsx
+     * import img from "../public/image.png";
+     * <ImageBackground url={img}>...</ImageBackground>
+     * ```
+     */
+    url: string;
+    children: React.ReactNode;
+    /**
+     * 容器的宽度。
+     * @default "100%"
+     */
+    width?: React.CSSProperties["width"];
+    /**
+     * 容器的高度。
+     * @default "100%"
+     */
+    height?: React.CSSProperties["height"];
+    style?: React.CSSProperties;
+}
+/**
+ * 以图片作为背景的块级容器。除了文档列出的属性以外，也兼容所有 [HTML Div 元素][1] 的属性。
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+declare function ImageBackground(props: ImageBackgroundProps): import("react/jsx-runtime").JSX.Element;
+export default ImageBackground;

package/dist/components/ImageBackground.js

@@ -0,0 +1,76 @@
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 以图片作为背景的块级容器。除了文档列出的属性以外，也兼容所有 [HTML Div 元素][1] 的属性。
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+function ImageBackground(props) {
+  const $ = _c(16);
+  let children;
+  let rest;
+  let style;
+  let t0;
+  let t1;
+  let url;
+  if ($[0] !== props) {
+    ({
+      url,
+      children,
+      width: t0,
+      height: t1,
+      style,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = children;
+    $[2] = rest;
+    $[3] = style;
+    $[4] = t0;
+    $[5] = t1;
+    $[6] = url;
+  } else {
+    children = $[1];
+    rest = $[2];
+    style = $[3];
+    t0 = $[4];
+    t1 = $[5];
+    url = $[6];
+  }
+  const width = t0 === undefined ? "100%" : t0;
+  const height = t1 === undefined ? "100%" : t1;
+  const t2 = `url('${url}')`;
+  let t3;
+  if ($[7] !== height || $[8] !== style || $[9] !== t2 || $[10] !== width) {
+    t3 = {
+      backgroundSize: "100% 100%",
+      width,
+      height,
+      backgroundImage: t2,
+      ...style
+    };
+    $[7] = height;
+    $[8] = style;
+    $[9] = t2;
+    $[10] = width;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== children || $[13] !== rest || $[14] !== t3) {
+    t4 = /*#__PURE__*/_jsx("div", {
+      ...rest,
+      style: t3,
+      children: children
+    });
+    $[12] = children;
+    $[13] = rest;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  return t4;
+}
+export default ImageBackground;

package/dist/components/IndicatorLight.d.ts

@@ -0,0 +1,44 @@
+import type { HTMLAttributes } from "react";
+export interface IndicatorLightProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * 指示灯的直径。
+     * @default token.sizeXL
+     */
+    size?: number | string;
+    /**
+     * 指示的状态。设置了这一项时，{@linkcode onColor}、{@linkcode mode} 和 {@linkcode period} 会被忽略。
+     *
+     * `"healthy"` 表示常绿，`"attention"` 表示绿色闪烁，
+     * `"danger"` 表示常红，`"emergency"` 表示红色闪烁，
+     * `"off"` 表示关闭。
+     * 具体色值取自 design token。
+     */
+    status?: "healthy" | "attention" | "danger" | "emergency" | "off";
+    /**
+     * 灯亮时的颜色。
+     * @default token.colorError
+     */
+    onColor?: string;
+    /**
+     * 灯灭时的颜色。
+     * @default token.colorFill
+     */
+    offColor?: string;
+    /**
+     * 灯的状态。`"on"` 表示常亮，`"flash"` 表示闪烁，`"off"` 表示常暗。
+     * @default "on"
+     */
+    mode?: "on" | "flash" | "off";
+    /**
+     * 闪烁周期（一亮一暗）的时长，以秒为单位。不可为 `0`、`NaN` 或 `Infinity`。
+     * @default 1
+     */
+    period?: number;
+}
+/**
+ * 一个指示灯。
+ *
+ * 文档内未列出的属性会被传递给组件顶层的 `div` 元素。
+ */
+declare function IndicatorLight(props: IndicatorLightProps): import("react/jsx-runtime").JSX.Element;
+export default IndicatorLight;

package/dist/components/IndicatorLight.js

@@ -0,0 +1,124 @@
+import { c as _c } from "react/compiler-runtime";
+import { createStyles, keyframes } from "antd-style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ANIMATION_MAP = {
+  on: "linear(0, 0) paused",
+  flash: "cubic-bezier(0.9, 0, 0.1, 1) infinite alternate",
+  off: "linear(1, 1) paused"
+};
+const useStyles = createStyles(({
+  token,
+  css
+}, props) => {
+  const size = props.size ?? token.sizeXL;
+  const sizeCss = typeof size === "number" ? `${size}px` : size;
+  const colorMap = {
+    healthy: {
+      onColor: token.colorSuccess,
+      mode: "on"
+    },
+    attention: {
+      onColor: token.colorSuccess,
+      mode: "flash"
+    },
+    danger: {
+      onColor: token.colorError,
+      mode: "on"
+    },
+    emergency: {
+      onColor: token.colorError,
+      mode: "flash"
+    },
+    off: {
+      onColor: token.colorError,
+      mode: "off"
+    }
+  };
+  const {
+    onColor = token.colorError,
+    mode = "on"
+  } = props.status ? colorMap[props.status] : props;
+  const offColor = props.offColor ?? token.colorFillSecondary;
+  const halfPeriod = (props.period ?? 1) / 2;
+  const flash = keyframes`
+    from {
+      background-color: ${onColor};
+      box-shadow: 0 0 6px 2px ${onColor};
+    }
+    to {
+      background-color: ${offColor};
+    }
+  `;
+  return {
+    light: css`
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      animation: ${flash} ${halfPeriod}s ${ANIMATION_MAP[mode]};
+    `,
+    lightBorder: css`
+      height: ${sizeCss};
+      aspect-ratio: 1;
+      border: ${token.colorBorder} 2px solid;
+      border-radius: 50%;
+    `
+  };
+});
+
+/**
+ * 一个指示灯。
+ *
+ * 文档内未列出的属性会被传递给组件顶层的 `div` 元素。
+ */
+function IndicatorLight(props) {
+  const $ = _c(9);
+  const {
+    size,
+    status,
+    onColor,
+    offColor,
+    mode,
+    period,
+    ...rest
+  } = props;
+  const {
+    cx,
+    styles
+  } = useStyles(props);
+  const t0 = cx(styles.lightBorder, rest.className);
+  let t1;
+  if ($[0] !== cx || $[1] !== styles.light) {
+    t1 = cx(styles.light);
+    $[0] = cx;
+    $[1] = styles.light;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      className: t1
+    });
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== rest || $[6] !== t0 || $[7] !== t2) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      ...rest,
+      className: t0,
+      children: t2
+    });
+    $[5] = rest;
+    $[6] = t0;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
+}
+export default IndicatorLight;

package/dist/components/LeftAlignedECharts.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+import type { EChartsHOCType, EChartsProps } from "./ECharts";
+/**
+ * 为 {@linkcode LeftAlignedECharts} 和
+ * {@linkcode withLeftAlign | withLeftAlign(ECharts)}
+ * 提供对齐上下文。
+ */
+export declare function EChartsLeftAligner({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * 为 ECharts 添加与其它 ECharts 纵轴左对齐的能力。
+ *
+ * 使用该组件时必须满足下列限制：
+ *
+ * - 必须包裹在 {@linkcode EChartsLeftAligner} 内，否则会立即抛出错误。
+ * - 图像所在的容器本身必须已经左对齐。
+ * - 图像中必须包含且仅包含一个 grid 坐标系。
+ *   如果图像不包含 grid，那么该组件不会产生任何效果。
+ *   如果图像包含多个 grid，那么该组件只会对齐其中一个 grid，且无法保证是哪一个。
+ * - grid 必须有且仅有一个纵轴，并且在左侧，不满足这一条件的影响同上一条。
+ * - grid 坐标系必须被设置为 `{ containLabel: true }` 或者
+ *   `{ outerBoundsMode: "same", outerBoundsContain: "axisLabel" }`。
+ *   这也是组件库内的 `echarts.grid()` 的默认设置。
+ *   如果你不这么设置，而是使用 `left` 和 `bottom` 来手动对齐轴线，那就没必要使用这个组件，强行使用可能导致布局异常。
+ * - grid 坐标系的 `left` 属性会被该组件覆盖，最终效果总是会使得纵轴标签最宽的坐标系的标签紧贴容器左边缘（即 `left === 0`）。
+ * - 左对齐时原本的过渡动画会被打断。
+ */
+export declare const withLeftAlign: EChartsHOCType;
+/**
+ * 预置了纵轴左对齐、联动和自适应容器尺寸能力的 ECharts 组件。
+ *
+ * @see {@linkcode withLeftAlign}
+ * @see {@linkcode withConnector}
+ * @see {@linkcode withAutoResize}
+ */
+declare const LeftAlignedECharts: import("./ECharts").EChartsComponentType<EChartsProps<import("echarts/core").EChartsCoreOption> & {
+    group?: string;
+}> & {
+    displayName: string;
+};
+export default LeftAlignedECharts;