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

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

@@ -0,0 +1,146 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { Dropdown } from "../Dropdown/Dropdown.js";
+import "../Dropdown/index.js";
+import Search from "../Search/Search.js";
+import "../Search/index.js";
+import { ExportType } from "../../lib/export.js";
+import { useTableSearchLocaleStore } from "./tableSearchLocaleStore.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+//#region packages/react/ui/components/TableSearch/TableSearch.tsx
+var EXPAND_BOUNDARIES = 4;
+var TableSearch = (props) => {
+	const { onSearch, onReset, exportMenuItems, btnConfig: PBtnText, expandBoundaries = EXPAND_BOUNDARIES, schemas, onExport, additionalButtons, defaultExpand = true, renderActionBtnArea, ...searchProps } = props;
+	const formRef = useRef(void 0);
+	const [isExpanded, setIsExpanded] = useState(defaultExpand);
+	const handleSearch = () => {
+		const values = formRef.current?.getFieldsValue();
+		onSearch?.(values);
+	};
+	const handleReset = () => {
+		formRef.current?.resetFields();
+		if (onReset) onReset();
+	};
+	const handleExpand = () => {
+		setIsExpanded(!isExpanded);
+	};
+	const locale = useTableSearchLocaleStore((state) => state.locale);
+	const defaultExportItems = useMemo(() => exportMenuItems || [{
+		key: "export-current-page",
+		label: locale.exportCurrentPage,
+		onClick: () => {
+			const values = formRef.current?.getFieldsValue();
+			onExport?.(ExportType.current, values);
+		}
+	}, {
+		key: "export-current-query",
+		label: locale.exportCurrentQuery,
+		onClick: () => {
+			const values = formRef.current?.getFieldsValue();
+			onExport?.(ExportType.all, values);
+		}
+	}], [
+		exportMenuItems,
+		locale.exportCurrentPage,
+		locale.exportCurrentQuery,
+		onExport
+	]);
+	const btnConfig = useMemo(() => {
+		const resetBtn = PBtnText?.reset || locale.reset;
+		const searchBtn = PBtnText?.search || locale.search;
+		const exportBtn = PBtnText?.export || locale.export;
+		return {
+			resetBtn,
+			searchBtn,
+			expandBtn: PBtnText?.expand || locale.expand,
+			collapseBtn: PBtnText?.collapse || locale.collapse,
+			exportBtn,
+			expandIcon: PBtnText?.expandIcon || /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+		};
+	}, [
+		PBtnText?.reset,
+		PBtnText?.search,
+		PBtnText?.export,
+		PBtnText?.expand,
+		PBtnText?.collapse,
+		PBtnText?.expandIcon,
+		locale
+	]);
+	const { permanentSchemas, alternativeSchemas } = useMemo(() => {
+		const alternativeSchemas = [];
+		const tmp = [];
+		for (let index = 0; index < schemas.length; index++) {
+			const item = schemas[index];
+			if (item.isPermanent) tmp.push(item);
+			else alternativeSchemas.push(item);
+		}
+		if (tmp.length < expandBoundaries) {
+			const candidates = expandBoundaries - tmp.length;
+			for (let index = 0; index < candidates; index++) tmp.push(alternativeSchemas[index]);
+			alternativeSchemas.splice(0, candidates);
+		}
+		return {
+			alternativeSchemas,
+			permanentSchemas: tmp
+		};
+	}, [expandBoundaries, schemas]);
+	const showExpandedBtn = schemas.length > expandBoundaries;
+	let SSchemas;
+	if (showExpandedBtn) SSchemas = isExpanded ? schemas : [...permanentSchemas, {
+		type: "group",
+		fieldProps: { style: { display: "none" } },
+		key: "gropu1",
+		childrens: alternativeSchemas
+	}];
+	else SSchemas = schemas;
+	return /* @__PURE__ */ jsx("div", {
+		className: "tc-ui-table-search",
+		children: /* @__PURE__ */ jsxs(Search, {
+			getForm: (form) => {
+				formRef.current = form;
+			},
+			schemas: SSchemas,
+			...searchProps,
+			children: [
+				showExpandedBtn && /* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					size: "sm",
+					onClick: handleExpand,
+					rightIcon: /* @__PURE__ */ jsx("span", {
+						className: cn("transition-transform duration-200", isExpanded && "rotate-180"),
+						children: btnConfig.expandIcon
+					}),
+					children: isExpanded ? btnConfig.collapseBtn : btnConfig.expandBtn
+				}, "expandedBtn"),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					size: "sm",
+					onClick: handleSearch,
+					children: btnConfig.searchBtn
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					size: "sm",
+					onClick: handleReset,
+					children: btnConfig.resetBtn
+				}),
+				renderActionBtnArea ? renderActionBtnArea() : /* @__PURE__ */ jsx(Dropdown, {
+					items: defaultExportItems,
+					placement: "bottom-end",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "default",
+						size: "sm",
+						rightIcon: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }),
+						children: btnConfig.exportBtn
+					})
+				}),
+				additionalButtons
+			]
+		})
+	});
+};
+//#endregion
+export { TableSearch as default };

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

@@ -0,0 +1,2 @@
+export { default as TableSearch } from "./TableSearch";
+export type { TableSearchSchema } from "./TableSearch";

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

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

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

@@ -12,4 +12,3 @@ export declare const enUSLocale: TableSearchLocaleConfig;
 export declare const defaultLocale: TableSearchLocaleConfig;
 export declare const btnConfig: TableSearchLocaleConfig;
 export declare const updateBtnConfig: (config: Partial<TableSearchLocaleConfig>) => void;
-//# sourceMappingURL=lang.d.ts.map

package/fe/packages/react/ui/components/TableSearch/lang.js

@@ -0,0 +1,14 @@
+import { defaultLanguageResources } from "../../../../common/i18n/default.js";
+import { defaultEnglishResources } from "../../../../common/i18n/en-US.js";
+//#region packages/react/ui/components/TableSearch/lang.ts
+var tableSearchDefaultLocale = defaultLanguageResources.components.tableSearch;
+var tableSearchDefaultEnglishLocale = defaultEnglishResources.components.tableSearch;
+var zhCNLocale = { ...tableSearchDefaultLocale };
+var enUSLocale = { ...tableSearchDefaultEnglishLocale };
+var defaultLocale = zhCNLocale;
+var btnConfig = defaultLocale;
+var updateBtnConfig = (config) => {
+	Object.assign(btnConfig, config);
+};
+//#endregion
+export { btnConfig, defaultLocale, enUSLocale, updateBtnConfig, zhCNLocale };

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

@@ -1,4 +1,4 @@
-import { type TableSearchLocaleConfig } from './lang';
+import { type TableSearchLocaleConfig } from "./lang";
 type TableSearchLocaleState = {
     locale: TableSearchLocaleConfig;
     replaceLocale: (nextLocale: TableSearchLocaleConfig) => void;
@@ -6,4 +6,3 @@ type TableSearchLocaleState = {
 };
 export declare const useTableSearchLocaleStore: import("zustand").UseBoundStore<import("zustand").StoreApi<TableSearchLocaleState>>;
 export {};
-//# sourceMappingURL=tableSearchLocaleStore.d.ts.map

package/fe/packages/react/ui/components/TableSearch/tableSearchLocaleStore.js

@@ -0,0 +1,10 @@
+import { defaultLocale } from "./lang.js";
+import { create } from "zustand";
+//#region packages/react/ui/components/TableSearch/tableSearchLocaleStore.ts
+var useTableSearchLocaleStore = create((set) => ({
+	locale: defaultLocale,
+	replaceLocale: (nextLocale) => set(() => ({ locale: nextLocale })),
+	resetLocale: () => set(() => ({ locale: defaultLocale }))
+}));
+//#endregion
+export { useTableSearchLocaleStore };

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 export type TabItem = {
     key: string;
     label: ReactNode;
@@ -13,4 +13,3 @@ export type TabsProps = {
 };
 declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
 export { Tabs };
-//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1,33 @@
+import { cn } from "../../lib/utils.js";
+import { forwardRef, useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/react/ui/components/Tabs/Tabs.tsx
+var Tabs = forwardRef(({ items, activeKey: controlledKey, defaultActiveKey, onChange, className }, ref) => {
+	const [internalKey, setInternalKey] = useState(defaultActiveKey ?? items[0]?.key ?? "");
+	const isControlled = controlledKey !== void 0;
+	const activeKey = isControlled ? controlledKey : internalKey;
+	const handleTabClick = useCallback((key) => {
+		if (!isControlled) setInternalKey(key);
+		onChange?.(key);
+	}, [isControlled, onChange]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("tc-ui-tabs", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "tc-ui-tabs-nav flex border-b border-border",
+			role: "tablist",
+			children: items.map((item) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": activeKey === item.key,
+				disabled: item.disabled,
+				onClick: () => !item.disabled && handleTabClick(item.key),
+				className: cn("tc-ui-tabs-tab px-4 py-2 text-sm font-medium transition-colors", "border-b-2 -mb-px", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", activeKey === item.key ? "border-theme text-theme" : "border-transparent text-muted-foreground hover:text-foreground", item.disabled && "cursor-not-allowed opacity-50"),
+				children: item.label
+			}, item.key))
+		})
+	});
+});
+Tabs.displayName = "Tabs";
+//#endregion
+export { Tabs };

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

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

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

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

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

@@ -1,67 +1,20 @@
 import type { ChangeEvent, TextareaHTMLAttributes } from "react";
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "defaultValue"> & {
     value?: string;
-    /**
-     *
-     * @param v textarea value
-     * @param e changeEvent
-     */
     onChange?: (v: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * 只有初始化时会使用
-     * 如果会改变请使用value
-     */
     defaultValue?: string;
-    /**
-     * 最大字符数限制
-     * @default 500
-     */
     maxLength?: number;
-    /**
-     * 是否显示字符计数器
-     * @default true
-     */
     showCount?: boolean;
-    /**
-     * 占位符文本
-     */
     placeholder?: string;
-    /**
-     * 原生 textarea 节点的自定义 className
-     */
     textareaClassName?: string;
 };
 declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> & {
     value?: string;
-    /**
-     *
-     * @param v textarea value
-     * @param e changeEvent
-     */
     onChange?: (v: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * 只有初始化时会使用
-     * 如果会改变请使用value
-     */
     defaultValue?: string;
-    /**
-     * 最大字符数限制
-     * @default 500
-     */
     maxLength?: number;
-    /**
-     * 是否显示字符计数器
-     * @default true
-     */
     showCount?: boolean;
-    /**
-     * 占位符文本
-     */
     placeholder?: string;
-    /**
-     * 原生 textarea 节点的自定义 className
-     */
     textareaClassName?: string;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };
-//# sourceMappingURL=Textarea.d.ts.map

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

@@ -0,0 +1,58 @@
+import { cn } from "../../lib/utils.js";
+import { useInputController } from "../hooks/useInputController.js";
+import { forwardRef, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Textarea/Textarea.tsx
+var Textarea = forwardRef(({ className, textareaClassName, value: controlledValue, onChange, defaultValue, maxLength = 500, showCount = true, placeholder, disabled, ...props }, ref) => {
+	const { isFocused, setIsFocused, setInternalValue, setRefs, value, isControlledRef, currentLength } = useInputController({
+		controlledValue,
+		defaultValue,
+		ref
+	});
+	const handleChange = useCallback((e) => {
+		const newValue = e.target.value;
+		if (maxLength && newValue.length > maxLength) return;
+		if (!isControlledRef.current) setInternalValue(newValue);
+		onChange?.(newValue, e);
+	}, [
+		maxLength,
+		isControlledRef,
+		onChange,
+		setInternalValue
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tc-ui-textarea relative w-fit", className),
+		children: [/* @__PURE__ */ jsx("textarea", {
+			ref: setRefs,
+			value,
+			onChange: handleChange,
+			maxLength,
+			placeholder,
+			className: cn("flex min-h-24 w-full rounded-lg px-3 py-2 text-sm", "border transition-colors duration-200", "placeholder:text-muted-foreground", "focus:outline-none", "resize-none", showCount && "pb-10", disabled ? "cursor-not-allowed bg-muted border-border text-muted-foreground" : "bg-background", !disabled && !isFocused && "border-border", !disabled && isFocused && "border-theme ring-2 ring-theme/25", textareaClassName),
+			onFocus: (e) => {
+				if (!disabled) {
+					setIsFocused(true);
+					props.onFocus?.(e);
+				}
+			},
+			onBlur: (e) => {
+				if (!disabled) {
+					setIsFocused(false);
+					props.onBlur?.(e);
+				}
+			},
+			disabled,
+			...props
+		}), showCount && /* @__PURE__ */ jsxs("div", {
+			className: cn("text-end", "text-xs text-muted-foreground", "pointer-events-none"),
+			children: [
+				currentLength,
+				"/",
+				maxLength
+			]
+		})]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+export { Textarea };

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

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

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

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

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

@@ -1,25 +1,8 @@
 export interface TooltipProps {
-    /**
-     * 提示内容
-     */
     content: React.ReactNode;
-    /**
-     * 触发元素
-     */
     children: React.ReactElement;
-    /**
-     * 提示位置
-     * @default 'right'
-     */
     placement?: "top" | "bottom" | "left" | "right";
-    /**
-     * 是否显示
-     */
     visible?: boolean;
-    /**
-     * 类名
-     */
     className?: string;
 }
 export declare function Tooltip({ content, children, placement, visible, className, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1,77 @@
+import { cn } from "../../lib/utils.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region packages/react/ui/components/Tooltip/Tooltip.tsx
+function Tooltip({ content, children, placement = "right", visible, className }) {
+	const [isVisible, setIsVisible] = useState(false);
+	const [position, setPosition] = useState({
+		top: 0,
+		left: 0
+	});
+	const triggerRef = useRef(null);
+	const tooltipRef = useRef(null);
+	const showTooltip = () => {
+		if (visible !== void 0) setIsVisible(visible);
+		else setIsVisible(true);
+	};
+	const hideTooltip = () => {
+		if (visible === void 0) setIsVisible(false);
+	};
+	useEffect(() => {
+		if (visible !== void 0) setIsVisible(visible);
+	}, [visible]);
+	useEffect(() => {
+		if (isVisible && triggerRef.current && tooltipRef.current) requestAnimationFrame(() => {
+			if (!triggerRef.current || !tooltipRef.current) return;
+			const triggerRect = triggerRef.current.getBoundingClientRect();
+			const tooltipRect = tooltipRef.current.getBoundingClientRect();
+			const padding = 8;
+			let top = 0;
+			let left = 0;
+			switch (placement) {
+				case "top":
+					top = triggerRect.top - tooltipRect.height - padding;
+					left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+					break;
+				case "bottom":
+					top = triggerRect.bottom + padding;
+					left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+					break;
+				case "left":
+					top = triggerRect.top;
+					left = triggerRect.left - tooltipRect.width - padding;
+					break;
+				case "right":
+					top = triggerRect.top;
+					left = triggerRect.right + padding;
+					break;
+			}
+			setPosition({
+				top,
+				left
+			});
+		});
+		if (!isVisible) setPosition({
+			top: -100,
+			left: -100
+		});
+	}, [isVisible, placement]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: triggerRef,
+		onMouseEnter: showTooltip,
+		onMouseLeave: hideTooltip,
+		className: "tc-ui-tooltip inline-block",
+		children
+	}), isVisible && createPortal(/* @__PURE__ */ jsx("div", {
+		ref: tooltipRef,
+		className: cn("fixed z-[1000] px-3 py-2", "rounded-xl border border-border/50 bg-popover text-xs text-popover-foreground", "shadow-[var(--shadow-floating)]", "pointer-events-none", "max-w-xs", className),
+		style: {
+			top: `${position.top}px`,
+			left: `${position.left}px`
+		},
+		children: content
+	}), document.body)] });
+}
+//#endregion
+export { Tooltip };

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

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

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

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

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

@@ -5,21 +5,14 @@ export interface TreeNode {
     children?: TreeNode[];
 }
 export interface TreeSelectProps {
-    /** 树形数据 */
     data: TreeNode[];
-    /** 已选中的节点 ID 数组 */
     value?: (string | number)[];
-    /** 选中状态改变回调，返回选中的 keys 和半选的 keys */
     onChange?: (keys: {
         checked: (string | number)[];
         indeterminate: (string | number)[];
     }) => void;
-    /** 节点文本字段名 */
     labelField?: 'name' | 'desctext';
-    /** 是否可以选择 */
     checkable?: boolean;
-    /** 自定义类名 */
     className?: string;
 }
 export declare function TreeSelect({ data, value, onChange, labelField, checkable, className, }: TreeSelectProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TreeSelect.d.ts.map