@_tc/template-core 0.1.16 → 0.2.0-bate.0

package/fe/packages/{ui/react → react/ui}/components/Layout/Layout.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 export type LayoutProps = {
     header?: ReactNode;
     sidebar?: ReactNode;
@@ -8,4 +8,3 @@ export type LayoutProps = {
 };
 declare const Layout: import("react").ForwardRefExoticComponent<LayoutProps & import("react").RefAttributes<HTMLDivElement>>;
 export { Layout };
-//# sourceMappingURL=Layout.d.ts.map

package/fe/packages/react/ui/components/Layout/Layout.js

@@ -0,0 +1,33 @@
+import { cn } from "../../lib/utils.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Layout/Layout.tsx
+var Layout = forwardRef(({ header, sidebar, children, footer, className }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("tc-ui-layout flex h-screen flex-col", className),
+		children: [
+			header && /* @__PURE__ */ jsx("header", {
+				className: "tc-ui-layout-header shrink-0 border-b bg-background",
+				children: header
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "tc-ui-layout-body flex flex-1 overflow-hidden",
+				children: [sidebar && /* @__PURE__ */ jsx("aside", {
+					className: "tc-ui-layout-sidebar w-60 shrink-0 border-r bg-background overflow-y-auto",
+					children: sidebar
+				}), /* @__PURE__ */ jsx("main", {
+					className: "tc-ui-layout-content flex-1 overflow-y-auto p-4",
+					children
+				})]
+			}),
+			footer && /* @__PURE__ */ jsx("footer", {
+				className: "tc-ui-layout-footer shrink-0 border-t bg-background",
+				children: footer
+			})
+		]
+	});
+});
+Layout.displayName = "Layout";
+//#endregion
+export { Layout };

package/fe/packages/react/ui/components/Layout/index.d.ts

@@ -0,0 +1 @@
+export * from "./Layout";

package/fe/packages/react/ui/components/Layout/index.js

@@ -0,0 +1,2 @@
+import { Layout } from "./Layout.js";
+export { Layout };

package/fe/packages/{ui/react → react/ui}/components/Loading/Loading.d.ts

@@ -1,25 +1,13 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 export type LoadingProps = {
-    /**
-     * 加载图标尺寸
-     * @default 'md'
-     */
     size?: 'sm' | 'md' | 'lg';
-    /**
-     * 加载文案
-     */
     text?: ReactNode;
     className?: string;
 };
 export type LoadingIndicatorProps = {
-    /**
-     * 仅图标尺寸，适合被 Button 等组件复用
-     * @default 'md'
-     */
     size?: 'sm' | 'md' | 'lg';
     className?: string;
 };
 export declare function LoadingIndicator({ size, className }: LoadingIndicatorProps): import("react/jsx-runtime").JSX.Element;
 declare const Loading: import("react").ForwardRefExoticComponent<LoadingProps & import("react").RefAttributes<HTMLDivElement>>;
 export { Loading };
-//# sourceMappingURL=Loading.d.ts.map

package/fe/packages/react/ui/components/Loading/Loading.js

@@ -0,0 +1,48 @@
+import { cn } from "../../lib/utils.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Loading/Loading.tsx
+var sizeStyles = {
+	sm: "h-4 w-4",
+	md: "h-6 w-6",
+	lg: "h-8 w-8"
+};
+var textStyles = {
+	sm: "text-xs",
+	md: "text-xs",
+	lg: "text-sm"
+};
+function LoadingIndicator({ size = "md", className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: cn("animate-spin text-theme", sizeStyles[size], className),
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4"
+		}), /* @__PURE__ */ jsx("path", {
+			className: "opacity-75",
+			fill: "currentColor",
+			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		})]
+	});
+}
+var Loading = forwardRef(({ size = "md", text, className }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("tc-ui-loading inline-flex flex-col items-center justify-center gap-2 text-muted-foreground", className),
+		children: [/* @__PURE__ */ jsx(LoadingIndicator, { size }), text && /* @__PURE__ */ jsx("span", {
+			className: cn("font-medium leading-none tracking-normal text-muted-foreground", textStyles[size]),
+			children: text
+		})]
+	});
+});
+Loading.displayName = "Loading";
+//#endregion
+export { Loading, LoadingIndicator };

package/fe/packages/react/ui/components/Loading/index.d.ts

@@ -0,0 +1 @@
+export * from "./Loading";

package/fe/packages/react/ui/components/Loading/index.js

@@ -0,0 +1,2 @@
+import { Loading, LoadingIndicator } from "./Loading.js";
+export { Loading, LoadingIndicator };

package/fe/packages/{ui/react → react/ui}/components/Menu/Menu.d.ts

@@ -15,4 +15,3 @@ export declare const Menu: FC<MenuProps> & {
     SubMenu: typeof SubMenu;
     CollapseToggle: typeof CollapseToggle;
 };
-//# sourceMappingURL=Menu.d.ts.map

package/fe/packages/react/ui/components/Menu/Menu.js

@@ -0,0 +1,147 @@
+import { cn } from "../../lib/utils.js";
+import { CollapsedContext, MenuStoreContext, createMenuContextValue, useMenuStore } from "./MenuContext.js";
+import { MenuItem } from "./MenuItem.js";
+import { SubMenu } from "./SubMenu.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region packages/react/ui/components/Menu/Menu.tsx
+function renderItems(items, parentKey) {
+	return items.map((item) => {
+		if (item.children && item.children.length > 0) return /* @__PURE__ */ jsx(SubMenu, {
+			eventKey: item.key,
+			label: item.label,
+			icon: item.icon,
+			disabled: item.disabled,
+			popup: item.popup,
+			parentKey,
+			children: renderItems(item.children, item.key)
+		}, item.key);
+		return /* @__PURE__ */ jsx(MenuItem, {
+			eventKey: item.key,
+			icon: item.icon,
+			disabled: item.disabled,
+			danger: item.danger,
+			onClick: item.onClick,
+			className: item.className,
+			style: item.style,
+			width: item.width,
+			minWidth: item.minWidth,
+			maxWidth: item.maxWidth,
+			children: item.label
+		}, item.key);
+	});
+}
+var CollapseToggle = forwardRef(({ className }, ref) => {
+	const collapsed = useMenuStore((s) => s.collapsed);
+	const setCollapsed = useMenuStore((s) => s.setCollapsed);
+	const onCollapse = useMenuStore((s) => s.onCollapse);
+	const propsCollapsed = useMenuStore((s) => s.propsCollapsed);
+	const shouldShowCollapseToggle = () => {
+		/**
+		* 传入 collapsed 且没有 onCollapse 时，表示折叠状态完全由外部控制。
+		* 内部控制器无法改变状态，因此不渲染。
+		*/
+		if (typeof propsCollapsed !== "undefined" && typeof onCollapse === "undefined") return false;
+		return true;
+	};
+	const toggleCollapsed = () => setCollapsed(!collapsed);
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			toggleCollapsed();
+		}
+	};
+	useImperativeHandle(ref, () => ({
+		collapse: () => setCollapsed(true),
+		expand: () => setCollapsed(false)
+	}), [setCollapsed]);
+	if (!shouldShowCollapseToggle()) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": collapsed ? "Expand menu" : "Collapse menu",
+		"aria-expanded": !collapsed,
+		onClick: toggleCollapsed,
+		onKeyDown: handleKeyDown,
+		className: cn("mx-1 mb-1 flex h-9 cursor-pointer items-center justify-center rounded-lg", "text-muted-foreground transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-0", "hover:bg-foreground/8 hover:text-foreground", className),
+		children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+	});
+});
+CollapseToggle.displayName = "CollapseToggle";
+function MenuInner({ children, items, className, mode }) {
+	const collapsed = useMenuStore((s) => s.collapsed);
+	const collapsedWidth = useMenuStore((s) => s.collapsedWidth);
+	const content = items ? renderItems(items) : children;
+	return /* @__PURE__ */ jsxs("nav", {
+		role: "menu",
+		className: cn("tc-ui-menu relative overflow-hidden rounded-xl bg-card shadow-none", mode === "left" && "flex flex-col p-1", mode === "top" && "flex flex-row items-center p-[3px]", className),
+		style: mode === "left" && collapsed ? { width: collapsedWidth } : void 0,
+		children: [mode === "left" && /* @__PURE__ */ jsx(CollapseToggle, {}), /* @__PURE__ */ jsx(CollapsedContext.Provider, {
+			value: mode === "left" && collapsed,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn(mode === "left" && "flex flex-col gap-1", mode === "top" && "flex flex-row items-center gap-1"),
+				children: content
+			})
+		})]
+	});
+}
+var Menu = ({ mode = "left", expandTrigger = "click", expandMode = "accordion", selectedKey: controlledSelectedKey, defaultSelectedKey, onSelect, items, children, className, collapsed: controlledCollapsed, defaultCollapsed, onCollapse, collapsedWidth = 64, collapsedLabelTooltip = true }) => {
+	const storeRef = useRef(null);
+	if (!storeRef.current) storeRef.current = createMenuContextValue({
+		mode,
+		expandTrigger,
+		expandMode,
+		selectedKey: controlledSelectedKey,
+		defaultSelectedKey,
+		collapsed: controlledCollapsed,
+		propsCollapsed: controlledCollapsed,
+		defaultCollapsed,
+		collapsedWidth,
+		collapsedLabelTooltip,
+		onSelect,
+		onCollapse
+	});
+	const store = storeRef.current;
+	useEffect(() => {
+		store.setState({
+			mode,
+			expandTrigger,
+			expandMode,
+			propsCollapsed: controlledCollapsed,
+			collapsedWidth,
+			collapsedLabelTooltip,
+			onSelect,
+			onCollapse
+		});
+	}, [
+		mode,
+		expandTrigger,
+		expandMode,
+		controlledCollapsed,
+		collapsedWidth,
+		collapsedLabelTooltip,
+		onSelect,
+		onCollapse,
+		store
+	]);
+	useEffect(() => {
+		if (controlledSelectedKey !== void 0) store.setState({ selectedKey: controlledSelectedKey });
+	}, [controlledSelectedKey, store]);
+	useEffect(() => {
+		if (controlledCollapsed !== void 0) store.setState({ collapsed: controlledCollapsed });
+	}, [controlledCollapsed, store]);
+	return /* @__PURE__ */ jsx(MenuStoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx(MenuInner, {
+			mode,
+			items,
+			className,
+			children
+		})
+	});
+};
+Menu.Item = MenuItem;
+Menu.SubMenu = SubMenu;
+Menu.CollapseToggle = CollapseToggle;
+//#endregion
+export { CollapseToggle, Menu };

package/fe/packages/{ui/react → react/ui}/components/Menu/MenuContext.d.ts

@@ -36,4 +36,3 @@ export declare function createMenuContextValue(overrides: {
 }): import("zustand").StoreApi<MenuStore>;
 export { MenuStoreContext };
 export type { MenuStore };
-//# sourceMappingURL=MenuContext.d.ts.map

package/fe/packages/react/ui/components/Menu/MenuContext.js

@@ -0,0 +1,88 @@
+import { createContext, useContext } from "react";
+import { createStore, useStore } from "zustand";
+//#region packages/react/ui/components/Menu/MenuContext.tsx
+var CollapsedContext = createContext(false);
+function createMenuStore(props) {
+	const { mode, expandTrigger, propsCollapsed, expandMode, collapsedWidth } = props;
+	const isControlledSelected = props.selectedKey !== void 0;
+	const isControlledCollapsed = props.collapsed !== void 0;
+	return createStore((set, get) => ({
+		mode,
+		expandTrigger,
+		expandMode,
+		selectedKey: props.selectedKey ?? props.defaultSelectedKey,
+		openKeys: [],
+		openKeyParents: {},
+		collapsed: props.collapsed ?? props.defaultCollapsed ?? false,
+		propsCollapsed,
+		collapsedWidth,
+		collapsedLabelTooltip: props.collapsedLabelTooltip,
+		onSelect: props.onSelect,
+		onCollapse: props.onCollapse,
+		isControlledSelected,
+		isControlledCollapsed,
+		setSelectedKey: (key) => {
+			const { isControlledSelected, onSelect } = get();
+			if (!isControlledSelected) set({ selectedKey: key });
+			onSelect?.(key);
+		},
+		toggleOpenKey: (key, parentKey) => {
+			const { openKeys, openKeyParents, expandMode } = get();
+			const isOpen = openKeys.includes(key);
+			if (expandMode === "accordion") {
+				const nextParents = { ...openKeyParents };
+				if (isOpen) delete nextParents[key];
+				else {
+					openKeys.filter((k) => openKeyParents[k] === parentKey).forEach((k) => delete nextParents[k]);
+					if (parentKey) nextParents[key] = parentKey;
+				}
+				set({
+					openKeys: isOpen ? openKeys.filter((k) => k !== key) : openKeys.filter((k) => openKeyParents[k] !== parentKey).concat(key),
+					openKeyParents: nextParents
+				});
+			} else if (isOpen) {
+				const nextParents = { ...openKeyParents };
+				delete nextParents[key];
+				set({
+					openKeys: openKeys.filter((k) => k !== key),
+					openKeyParents: nextParents
+				});
+			} else set({
+				openKeys: [...openKeys, key],
+				openKeyParents: parentKey ? {
+					...openKeyParents,
+					[key]: parentKey
+				} : openKeyParents
+			});
+		},
+		setCollapsed: (collapsed) => {
+			const { isControlledCollapsed, onCollapse } = get();
+			if (!isControlledCollapsed) set({ collapsed });
+			onCollapse?.(collapsed);
+		}
+	}));
+}
+var MenuStoreContext = createContext(null);
+function useMenuStore(selector) {
+	const store = useContext(MenuStoreContext);
+	if (!store) throw new Error("Menu compound components must be used within <Menu>");
+	return useStore(store, selector);
+}
+function createMenuContextValue(overrides) {
+	return createMenuStore({
+		mode: overrides.mode ?? "left",
+		expandTrigger: overrides.expandTrigger ?? "click",
+		expandMode: overrides.expandMode ?? "accordion",
+		selectedKey: overrides.selectedKey,
+		defaultSelectedKey: overrides.defaultSelectedKey,
+		collapsed: overrides.collapsed,
+		propsCollapsed: overrides.propsCollapsed,
+		defaultCollapsed: overrides.defaultCollapsed,
+		collapsedWidth: overrides.collapsedWidth ?? 64,
+		collapsedLabelTooltip: overrides.collapsedLabelTooltip ?? true,
+		onSelect: overrides.onSelect,
+		onCollapse: overrides.onCollapse
+	});
+}
+//#endregion
+export { CollapsedContext, MenuStoreContext, createMenuContextValue, useMenuStore };

package/fe/packages/{ui/react → react/ui}/components/Menu/MenuItem.d.ts

@@ -1,3 +1,2 @@
 import type { MenuItemProps } from "./menuTypes";
 export declare function MenuItem({ eventKey, icon, disabled, danger, onClick, children, className, style, width, minWidth, maxWidth, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=MenuItem.d.ts.map

package/fe/packages/react/ui/components/Menu/MenuItem.js

@@ -0,0 +1,78 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { Popup } from "../Popup/Popup.js";
+import "../Popup/index.js";
+import { CollapsedContext, useMenuStore } from "./MenuContext.js";
+import { getFirstChar } from "./utils.js";
+import { useCallback, useContext, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Menu/MenuItem.tsx
+function MenuItem({ eventKey, icon, disabled, danger, onClick, children, className, style, width, minWidth, maxWidth, ...props }) {
+	const mode = useMenuStore((s) => s.mode);
+	const selectedKey = useMenuStore((s) => s.selectedKey);
+	const setSelectedKey = useMenuStore((s) => s.setSelectedKey);
+	const collapsed = useContext(CollapsedContext);
+	const collapsedLabelTooltip = useMenuStore((s) => s.collapsedLabelTooltip);
+	const isSelected = selectedKey === eventKey;
+	const triggerRef = useRef(null);
+	const [showTooltip, setShowTooltip] = useState(false);
+	const handleClick = useCallback(() => {
+		if (disabled) return;
+		eventKey && setSelectedKey(eventKey);
+		onClick?.();
+	}, [
+		disabled,
+		eventKey,
+		onClick,
+		setSelectedKey
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: triggerRef,
+		className: "relative",
+		onMouseEnter: () => collapsed && collapsedLabelTooltip && setShowTooltip(true),
+		onMouseLeave: () => collapsed && collapsedLabelTooltip && setShowTooltip(false),
+		children: [/* @__PURE__ */ jsxs(Button, {
+			...props,
+			variant: "text",
+			role: "menuitem",
+			disabled,
+			onClick: handleClick,
+			className: cn("menuitem group relative flex items-center rounded-lg text-sm outline-none transition-all", "focus-visible:ring-2 focus-visible:ring-theme/30 focus-visible:ring-offset-0", mode === "top" && "h-10 w-auto min-w-fit justify-start gap-3 px-3 py-2 text-left", mode === "left" && collapsed && "h-10 w-full justify-center gap-0 px-0 py-2", mode === "left" && !collapsed && "min-h-10 w-full gap-3 px-3 py-2.5 text-left", isSelected && "bg-theme/12 text-foreground", !isSelected && !danger && "text-foreground hover:bg-foreground/8", danger && !isSelected && "text-destructive hover:bg-destructive/10", disabled && "cursor-not-allowed opacity-50", className),
+			style: collapsed ? style : {
+				width,
+				minWidth,
+				maxWidth,
+				...style
+			},
+			children: [
+				icon && /* @__PURE__ */ jsx("span", {
+					className: cn("flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md transition-colors", "[&>svg]:h-4 [&>svg]:w-4", isSelected ? "bg-foreground/8 text-foreground" : "text-muted-foreground group-hover:text-foreground"),
+					children: icon
+				}),
+				!collapsed && /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
+					children
+				}),
+				collapsed && !icon && collapsedLabelTooltip && /* @__PURE__ */ jsx("span", {
+					className: "absolute left-0 right-0 top-0 flex h-full items-center justify-center text-[10px]",
+					children: getFirstChar(children)
+				})
+			]
+		}), /* @__PURE__ */ jsx(Popup, {
+			open: showTooltip,
+			anchorRef: triggerRef,
+			placement: "right-start",
+			offset: 8,
+			onOpenChange: setShowTooltip,
+			className: "border-0 bg-transparent p-0 shadow-none",
+			keepMounted: true,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "whitespace-nowrap rounded-lg border border-border/60 bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-[0_12px_30px_hsl(var(--background)/0.45)]",
+				children
+			})
+		})]
+	});
+}
+//#endregion
+export { MenuItem };

package/fe/packages/react/ui/components/Menu/SubMenu.d.ts

@@ -0,0 +1,2 @@
+import type { SubMenuProps } from "./menuTypes";
+export declare function SubMenu({ eventKey, label, icon, disabled, popup: forcePopup, parentKey, children, }: SubMenuProps): import("react/jsx-runtime").JSX.Element;