@tsingroc/tsingroc-components 3.2.0 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Header.d.ts +65 -0
- package/dist/components/Header.js +41 -0
- package/dist/components/Header.js.map +1 -0
- package/dist/components/Sidebar.d.ts +5 -1
- package/dist/components/Sidebar.js +3 -4
- package/dist/components/Sidebar.js.map +1 -1
- package/dist/components/UserButton.d.ts +5 -0
- package/dist/components/UserButton.js +20 -8
- package/dist/components/UserButton.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import type { CSSProperties, ReactNode } from "react";
|
|
2
|
+
import { type MenuProps } from "antd";
|
|
3
|
+
export type MenuItem = Required<MenuProps>["items"][number];
|
|
4
|
+
export interface HeaderProps extends MenuProps {
|
|
5
|
+
/**
|
|
6
|
+
* 网站 logo 的 URL。
|
|
7
|
+
*
|
|
8
|
+
* 建议导入图片，然后填入导入得到的地址，而不要硬编码地址。
|
|
9
|
+
*/
|
|
10
|
+
logo?: string;
|
|
11
|
+
/** 顶栏的标题。*/
|
|
12
|
+
title?: string;
|
|
13
|
+
/**
|
|
14
|
+
* 顶栏左端部分（logo 和标题）的宽度。在与边栏搭配时，推荐设置成与边栏同宽。
|
|
15
|
+
* @default 260
|
|
16
|
+
*/
|
|
17
|
+
leftEndWidth?: number | string;
|
|
18
|
+
/**
|
|
19
|
+
* 顶栏左端的内容（logo 和标题）。设置了该属性时，
|
|
20
|
+
* {@linkcode HeaderProps.logo | logo}、
|
|
21
|
+
* {@linkcode HeaderProps.title | title} 和
|
|
22
|
+
* {@linkcode HeaderProps.leftEndWidth | leftEndWidth} 将失去作用。
|
|
23
|
+
*/
|
|
24
|
+
leftEnd?: ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* 菜单项配置，默认为空。
|
|
27
|
+
*
|
|
28
|
+
* 该属性以及其余属性的用法可参考 [`Menu` 组件的文档][1]。
|
|
29
|
+
*
|
|
30
|
+
* [1]: https://ant-design.antgroup.com/components/menu-cn
|
|
31
|
+
*/
|
|
32
|
+
items?: MenuItem[];
|
|
33
|
+
/** 当前选中的菜单项 key 数组。 */
|
|
34
|
+
selectedKeys?: string[];
|
|
35
|
+
/** 当前展开的子菜单 key 数组。 */
|
|
36
|
+
openKeys?: string[];
|
|
37
|
+
/** 菜单项被选中时的回调函数。 */
|
|
38
|
+
onSelect?: MenuProps["onSelect"];
|
|
39
|
+
/** 子菜单展开/收起时的回调函数。 */
|
|
40
|
+
onOpenChange?: MenuProps["onOpenChange"];
|
|
41
|
+
/**
|
|
42
|
+
* 顶栏右端的额外内容。默认使用 {@linkcode UserButton} 组件。
|
|
43
|
+
* @default <UserButton layout="header" />
|
|
44
|
+
*/
|
|
45
|
+
rightEnd?: ReactNode;
|
|
46
|
+
/** 额外的 `className`。*/
|
|
47
|
+
className?: string;
|
|
48
|
+
/** 额外的 CSS 样式。*/
|
|
49
|
+
style?: CSSProperties;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* 顶栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
|
|
53
|
+
* 如果没有指定 {@linkcode HeaderProps.rightEnd | rightEnd} 属性，
|
|
54
|
+
* 那么还需要包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后
|
|
55
|
+
* 才能正常显示顶栏右端的用户信息按钮。
|
|
56
|
+
*
|
|
57
|
+
* 一般来说，使用该组件时至少需要提供 `logo`、`items` 和 `onSelect` 三个属性，具体用法请参照范例。
|
|
58
|
+
*
|
|
59
|
+
* 除了文档中列出的属性之外，该组件会把额外的属性全部传递给内部的菜单 [`Menu` 组件][2]。
|
|
60
|
+
*
|
|
61
|
+
* [1]: https://ant-design.antgroup.com/components/layout-cn
|
|
62
|
+
* [2]: https://ant-design.antgroup.com/components/menu-cn
|
|
63
|
+
*/
|
|
64
|
+
declare function Header(props: HeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
65
|
+
export default Header;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Flex, Layout, Menu, theme } from "antd";
|
|
3
|
+
import UserButton from "./UserButton";
|
|
4
|
+
/**
|
|
5
|
+
* 顶栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
|
|
6
|
+
* 如果没有指定 {@linkcode HeaderProps.rightEnd | rightEnd} 属性，
|
|
7
|
+
* 那么还需要包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后
|
|
8
|
+
* 才能正常显示顶栏右端的用户信息按钮。
|
|
9
|
+
*
|
|
10
|
+
* 一般来说，使用该组件时至少需要提供 `logo`、`items` 和 `onSelect` 三个属性，具体用法请参照范例。
|
|
11
|
+
*
|
|
12
|
+
* 除了文档中列出的属性之外，该组件会把额外的属性全部传递给内部的菜单 [`Menu` 组件][2]。
|
|
13
|
+
*
|
|
14
|
+
* [1]: https://ant-design.antgroup.com/components/layout-cn
|
|
15
|
+
* [2]: https://ant-design.antgroup.com/components/menu-cn
|
|
16
|
+
*/
|
|
17
|
+
function Header(props) {
|
|
18
|
+
const { token } = theme.useToken();
|
|
19
|
+
const { logo, title, leftEndWidth = 260, leftEnd, rightEnd, className, style, ...rest } = props;
|
|
20
|
+
return (_jsxs(Layout.Header, { className: className, style: {
|
|
21
|
+
display: "flex",
|
|
22
|
+
alignItems: "center",
|
|
23
|
+
boxShadow: "rgba(0, 0, 0, 0.15) 0 0 8px",
|
|
24
|
+
zIndex: 1,
|
|
25
|
+
background: token.colorBgContainer,
|
|
26
|
+
padding: 0,
|
|
27
|
+
color: token.colorText,
|
|
28
|
+
...style,
|
|
29
|
+
}, children: [leftEnd ?? (_jsxs(Flex, { align: "center", gap: token.marginSM, style: {
|
|
30
|
+
minWidth: leftEndWidth,
|
|
31
|
+
height: "100%",
|
|
32
|
+
paddingInlineStart: token.paddingLG + token.paddingXXS,
|
|
33
|
+
paddingInlineEnd: token.paddingSM,
|
|
34
|
+
}, children: [_jsx("img", { alt: "logo", src: logo, style: { height: "50%" } }), _jsx("h1", { style: { flexBasis: "100%", textAlign: "center" }, children: title })] })), _jsx(Menu, { mode: "horizontal", ...rest, style: {
|
|
35
|
+
flexBasis: "100%",
|
|
36
|
+
height: "100%",
|
|
37
|
+
borderBlockEnd: "none",
|
|
38
|
+
} }), rightEnd ?? _jsx(UserButton, { layout: "header" })] }));
|
|
39
|
+
}
|
|
40
|
+
export default Header;
|
|
41
|
+
//# sourceMappingURL=Header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAkB,KAAK,EAAE,MAAM,MAAM,CAAC;AAEjE,OAAO,UAAU,MAAM,cAAc,CAAC;AAoDtC;;;;;;;;;;;;GAYG;AACH,SAAS,MAAM,CAAC,KAAkB;IAChC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;IACnC,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,YAAY,GAAG,GAAG,EAClB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IACV,OAAO,CACL,MAAC,MAAM,CAAC,MAAM,IACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,6BAA6B;YACxC,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,KAAK,CAAC,gBAAgB;YAClC,OAAO,EAAE,CAAC;YACV,KAAK,EAAE,KAAK,CAAC,SAAS;YACtB,GAAG,KAAK;SACT,aAEA,OAAO,IAAI,CACV,MAAC,IAAI,IACH,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,KAAK,CAAC,QAAQ,EACnB,KAAK,EAAE;oBACL,QAAQ,EAAE,YAAY;oBACtB,MAAM,EAAE,MAAM;oBACd,kBAAkB,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,UAAU;oBACtD,gBAAgB,EAAE,KAAK,CAAC,SAAS;iBAClC,aAED,cAAK,GAAG,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAI,EACvD,aAAI,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAG,KAAK,GAAM,IAC9D,CACR,EACD,KAAC,IAAI,IACH,IAAI,EAAC,YAAY,KACb,IAAI,EACR,KAAK,EAAE;oBACL,SAAS,EAAE,MAAM;oBACjB,MAAM,EAAE,MAAM;oBACd,cAAc,EAAE,MAAM;iBACvB,GACD,EACD,QAAQ,IAAI,KAAC,UAAU,IAAC,MAAM,EAAC,QAAQ,GAAG,IAC7B,CACjB,CAAC;AACJ,CAAC;AAED,eAAe,MAAM,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type MenuProps } from "antd";
|
|
2
|
-
import { type ReactNode } from "react";
|
|
2
|
+
import { type CSSProperties, type ReactNode } from "react";
|
|
3
3
|
export type MenuItem = Required<MenuProps>["items"][number];
|
|
4
4
|
export interface SidebarProps extends MenuProps {
|
|
5
5
|
/**
|
|
@@ -55,6 +55,10 @@ export interface SidebarProps extends MenuProps {
|
|
|
55
55
|
* @default (collapsed) => <UserButton compact={collapsed} />
|
|
56
56
|
*/
|
|
57
57
|
footer?: (collapsed: boolean) => ReactNode;
|
|
58
|
+
/** 额外的 `className`。*/
|
|
59
|
+
className?: string;
|
|
60
|
+
/** 额外的 CSS 样式。*/
|
|
61
|
+
style?: CSSProperties;
|
|
58
62
|
}
|
|
59
63
|
/**
|
|
60
64
|
* 出自 TMS 系统的侧边栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
|
|
@@ -6,7 +6,6 @@ import { createStyles } from "antd-style";
|
|
|
6
6
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7
7
|
import { AuthCheck, AuthProvider } from "./Auth";
|
|
8
8
|
import UserButton from "./UserButton";
|
|
9
|
-
const { Sider } = Layout;
|
|
10
9
|
const menuItem = (label, key, icon, children) => ({ key, icon, children, label });
|
|
11
10
|
/** 默认菜单项配置，可以作为参考或默认值 */
|
|
12
11
|
const DEFAULT_MENU_ITEMS = [
|
|
@@ -62,7 +61,7 @@ const useStyles = createStyles(({ token, css, cx, prefixCls }, collapsed) => {
|
|
|
62
61
|
`;
|
|
63
62
|
const sidebar = css `
|
|
64
63
|
position: relative;
|
|
65
|
-
box-shadow: rgba(0, 0, 0, 0.15) 0
|
|
64
|
+
box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px;
|
|
66
65
|
|
|
67
66
|
> .${prefixCls}-layout-sider-children {
|
|
68
67
|
display: flex;
|
|
@@ -102,10 +101,10 @@ const useStyles = createStyles(({ token, css, cx, prefixCls }, collapsed) => {
|
|
|
102
101
|
* [2]: https://ant-design.antgroup.com/components/menu-cn
|
|
103
102
|
*/
|
|
104
103
|
function Sidebar(props) {
|
|
105
|
-
const { width = 260, collapsible = false, logo, title, headerHeight = 116, header, items = DEFAULT_MENU_ITEMS,
|
|
104
|
+
const { width = 260, collapsible = false, logo, title, headerHeight = 116, header, items = DEFAULT_MENU_ITEMS, footer = (collapsed) => _jsx(UserButton, { compact: collapsed }), className, style, ...rest } = props;
|
|
106
105
|
const [collapsed, setCollapsed] = useState(false);
|
|
107
106
|
const { cx, styles } = useStyles(collapsed);
|
|
108
|
-
return (_jsxs(Sider, { theme: "light", width: width, collapsed: collapsible ? collapsed : false, collapsible: collapsible, trigger: null, className: cx(styles.sidebar), children: [header ? (header(collapsed)) : (_jsxs(Flex, { vertical: true, align: "center", justify: "center", className: cx(styles.sidebarHeader), style: { height: headerHeight }, children: [_jsx("img", { alt: "logo", src: logo }), _jsx("h1", { children: title })] })), _jsx(Menu, { mode: "inline",
|
|
107
|
+
return (_jsxs(Layout.Sider, { theme: "light", width: width, collapsed: collapsible ? collapsed : false, collapsible: collapsible, trigger: null, className: cx(styles.sidebar, className), style: style, children: [header ? (header(collapsed)) : (_jsxs(Flex, { vertical: true, align: "center", justify: "center", className: cx(styles.sidebarHeader), style: { height: headerHeight }, children: [_jsx("img", { alt: "logo", src: logo }), _jsx("h1", { children: title })] })), _jsx(Menu, { mode: "inline", items: items, inlineCollapsed: collapsible ? collapsed : false, className: cx(styles.sidebarMenu), ...rest }), footer?.(collapsed), collapsible && (_jsx(Button, { className: cx(styles.sidebarBtn), icon: collapsed ? _jsx(RightOutlined, {}) : _jsx(LeftOutlined, {}), onClick: () => setCollapsed(!collapsed) }))] }));
|
|
109
108
|
}
|
|
110
109
|
export default Sidebar;
|
|
111
110
|
//# sourceMappingURL=Sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,YAAY,GACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAkB,MAAM,MAAM,CAAC;AAClE,OAAO,
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,11 @@ export interface UserButtonProps extends ButtonProps {
|
|
|
5
5
|
* @default false
|
|
6
6
|
*/
|
|
7
7
|
compact?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* 使用边栏布局还是顶栏布局。
|
|
10
|
+
* @default "sidebar"
|
|
11
|
+
*/
|
|
12
|
+
layout?: "sidebar" | "header";
|
|
8
13
|
/** 点击“账户”时的操作。若省略，将不显示弹出菜单中的“账户”选项。*/
|
|
9
14
|
onOpenProfile?: () => void;
|
|
10
15
|
/**
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Avatar, Button, Dropdown, theme, } from "antd";
|
|
3
|
-
import { LogoutOutlined, UpOutlined, UserOutlined } from "@ant-design/icons";
|
|
3
|
+
import { DownOutlined, LogoutOutlined, UpOutlined, UserOutlined, } from "@ant-design/icons";
|
|
4
4
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
5
5
|
import { AuthCheck, AuthProvider, useAuth } from "./Auth";
|
|
6
6
|
/**
|
|
@@ -16,11 +16,11 @@ function UserButton(props) {
|
|
|
16
16
|
const { token } = theme.useToken();
|
|
17
17
|
const auth = useAuth("UserButton");
|
|
18
18
|
const userInfo = auth.userInfo;
|
|
19
|
-
const { compact, onOpenProfile, onLogout = () => {
|
|
19
|
+
const { compact, layout = "sidebar", onOpenProfile, onLogout = () => {
|
|
20
20
|
auth.logout();
|
|
21
21
|
location.href = "/";
|
|
22
22
|
}, dropdownProps, ...rest } = props;
|
|
23
|
-
return (_jsx(Dropdown, { trigger: ["click"], placement: "topLeft", ...dropdownProps, menu: {
|
|
23
|
+
return (_jsx(Dropdown, { trigger: ["click"], placement: layout === "sidebar" ? "topLeft" : "bottomRight", ...dropdownProps, menu: {
|
|
24
24
|
items: [
|
|
25
25
|
onOpenProfile
|
|
26
26
|
? {
|
|
@@ -44,12 +44,24 @@ function UserButton(props) {
|
|
|
44
44
|
minWidth: "100%",
|
|
45
45
|
...dropdownProps?.menu?.style,
|
|
46
46
|
},
|
|
47
|
-
}, children: _jsx(Button, { type: "text", icon: _jsx(Avatar, { src: userInfo?.picture, icon: _jsx(UserOutlined, {}) }), ...rest,
|
|
48
|
-
|
|
47
|
+
}, children: _jsx(Button, { type: "text", icon: _jsx(Avatar, { alt: "\u5934\u50CF", src: userInfo?.picture, icon: _jsx(UserOutlined, {}) }), ...rest, styles: {
|
|
48
|
+
icon: {
|
|
49
|
+
display: "inline-flex",
|
|
50
|
+
alignItems: "center",
|
|
51
|
+
...rest.styles?.icon,
|
|
52
|
+
},
|
|
53
|
+
}, style: {
|
|
49
54
|
margin: token.marginXXS,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
55
|
+
...(layout === "sidebar"
|
|
56
|
+
? {
|
|
57
|
+
width: "auto",
|
|
58
|
+
padding: token.paddingXXS,
|
|
59
|
+
}
|
|
60
|
+
: {
|
|
61
|
+
paddingBlock: token.padding + token.paddingXS,
|
|
62
|
+
}),
|
|
63
|
+
...rest.style,
|
|
64
|
+
}, children: !compact && (_jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: token.marginXXS }, children: userInfo?.name ?? userInfo?.prefered_username ?? "平台用户" }), layout === "sidebar" ? _jsx(UpOutlined, {}) : _jsx(DownOutlined, {})] })) }) }));
|
|
53
65
|
}
|
|
54
66
|
export default UserButton;
|
|
55
67
|
//# sourceMappingURL=UserButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserButton.js","sourceRoot":"","sources":["../../src/components/UserButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,MAAM,EAEN,QAAQ,EAER,KAAK,GACN,MAAM,MAAM,CAAC;AACd,OAAO,
|
|
1
|
+
{"version":3,"file":"UserButton.js","sourceRoot":"","sources":["../../src/components/UserButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,MAAM,EAEN,QAAQ,EAER,KAAK,GACN,MAAM,MAAM,CAAC;AACd,OAAO,EACL,YAAY,EACZ,cAAc,EACd,UAAU,EACV,YAAY,GACb,MAAM,mBAAmB,CAAC;AAE3B,6DAA6D;AAC7D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAiC1D;;;;;;;;GAQG;AACH,SAAS,UAAU,CAAC,KAAsB;IACxC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;IACnC,MAAM,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC/B,MAAM,EACJ,OAAO,EACP,MAAM,GAAG,SAAS,EAClB,aAAa,EACb,QAAQ,GAAG,GAAG,EAAE;QACd,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC;IACtB,CAAC,EACD,aAAa,EACb,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IACV,OAAO,CACL,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,OAAO,CAAC,EAClB,SAAS,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,KACvD,aAAa,EACjB,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,aAAa;oBACX,CAAC,CAAC;wBACE,GAAG,EAAE,SAAS;wBACd,KAAK,EAAE,6CAAO,EAAE,0BAA0B;wBAC1C,IAAI,EAAE,KAAC,YAAY,KAAG;wBACtB,KAAK,EAAE,EAAE,EAAE,4BAA4B;wBACvC,OAAO,EAAE,aAAa;qBACvB;oBACH,CAAC,CAAC,IAAI;gBACR;oBACE,GAAG,EAAE,QAAQ;oBACb,IAAI,EAAE,KAAC,cAAc,KAAG;oBACxB,KAAK,EAAE,6CAAO;oBACd,KAAK,EAAE,EAAE;oBACT,OAAO,EAAE,QAAQ;iBAClB;aACF;YACD,GAAG,aAAa,EAAE,IAAI;YACtB,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAM;gBAChB,GAAG,aAAa,EAAE,IAAI,EAAE,KAAK;aAC9B;SACF,YAED,KAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,IAAI,EACF,KAAC,MAAM,IAAC,GAAG,EAAC,cAAI,EAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAC,YAAY,KAAG,GAAI,KAEjE,IAAI,EACR,MAAM,EAAE;gBACN,IAAI,EAAE;oBACJ,OAAO,EAAE,aAAa;oBACtB,UAAU,EAAE,QAAQ;oBACpB,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI;iBACrB;aACF,EACD,KAAK,EAAE;gBACL,MAAM,EAAE,KAAK,CAAC,SAAS;gBACvB,GAAG,CAAC,MAAM,KAAK,SAAS;oBACtB,CAAC,CAAC;wBACE,KAAK,EAAE,MAAM;wBACb,OAAO,EAAE,KAAK,CAAC,UAAU;qBAC1B;oBACH,CAAC,CAAC;wBACE,YAAY,EAAE,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,SAAS;qBAC9C,CAAC;gBACN,GAAG,IAAI,CAAC,KAAK;aACd,YAEA,CAAC,OAAO,IAAI,CACX,8BACE,eAAM,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,SAAS,EAAE,YAC1C,QAAQ,EAAE,IAAI,IAAI,QAAQ,EAAE,iBAAiB,IAAI,MAAM,GACnD,EACN,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,CAAC,CAAC,CAAC,KAAC,YAAY,KAAG,IACxD,CACJ,GACM,GACA,CACZ,CAAC;AACJ,CAAC;AAED,eAAe,UAAU,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { AuthProvider, type AuthProviderProps, AuthCheck, type AuthCheckProps, AuthCallback, type AuthCallbackProps, useAuth, } from "./components/Auth";
|
|
2
2
|
export { default as Calendar, type CalendarProps } from "./components/Calendar";
|
|
3
3
|
export { default as CircularProgress, type CircularProgressProps, } from "./components/CircularProgress";
|
|
4
|
+
export { default as Header, type HeaderProps } from "./components/Header";
|
|
4
5
|
export { default as ImageBackground, type ImageBackgroundProps, } from "./components/ImageBackground";
|
|
5
6
|
export { default as QuickDateRangePicker, type QuickDateRangePickerProps, } from "./components/QuickDateRangePicker";
|
|
6
7
|
export { default as SegmentedButtons, TimeUnitSwitcher, type TimeUnitSwitcherProps, } from "./components/SegmentedButtons";
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { AuthProvider, AuthCheck, AuthCallback, useAuth, } from "./components/Auth";
|
|
2
2
|
export { default as Calendar } from "./components/Calendar";
|
|
3
3
|
export { default as CircularProgress, } from "./components/CircularProgress";
|
|
4
|
+
export { default as Header } from "./components/Header";
|
|
4
5
|
export { default as ImageBackground, } from "./components/ImageBackground";
|
|
5
6
|
export { default as QuickDateRangePicker, } from "./components/QuickDateRangePicker";
|
|
6
7
|
export { default as SegmentedButtons, TimeUnitSwitcher, } from "./components/SegmentedButtons";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAEZ,SAAS,EAET,YAAY,EAEZ,OAAO,GACR,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,uBAAuB,CAAC;AAEhF,OAAO,EACL,OAAO,IAAI,gBAAgB,GAE5B,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EACL,OAAO,IAAI,eAAe,GAE3B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACL,OAAO,IAAI,oBAAoB,GAEhC,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,gBAAgB,GAEjB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAqB,MAAM,sBAAsB,CAAC;AAE7E,OAAO,EACL,OAAO,IAAI,kBAAkB,GAE9B,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,OAAO,IAAI,aAAa,GAEzB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,OAAO,IAAI,UAAU,GAEtB,MAAM,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAEZ,SAAS,EAET,YAAY,EAEZ,OAAO,GACR,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,uBAAuB,CAAC;AAEhF,OAAO,EACL,OAAO,IAAI,gBAAgB,GAE5B,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,qBAAqB,CAAC;AAE1E,OAAO,EACL,OAAO,IAAI,eAAe,GAE3B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACL,OAAO,IAAI,oBAAoB,GAEhC,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,gBAAgB,GAEjB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAqB,MAAM,sBAAsB,CAAC;AAE7E,OAAO,EACL,OAAO,IAAI,kBAAkB,GAE9B,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,OAAO,IAAI,aAAa,GAEzB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,OAAO,IAAI,UAAU,GAEtB,MAAM,yBAAyB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsingroc/tsingroc-components",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@rsbuild/core": "^1.3.11",
|
|
42
42
|
"@rsbuild/plugin-react": "^1.3.0",
|
|
43
43
|
"@rspress/plugin-preview": "^2.0.0-alpha.0",
|
|
44
|
-
"@types/node": "^22.
|
|
44
|
+
"@types/node": "^22.15.2",
|
|
45
45
|
"@types/react": "^18.3.20",
|
|
46
46
|
"@types/react-dom": "^18.3.6",
|
|
47
47
|
"echarts-for-react": "^3.0.2",
|