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

package/fe/packages/react/ui/components/DataTable/ActionBtn.js

@@ -0,0 +1,116 @@
+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 { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { MoreHorizontal } from "lucide-react";
+//#region packages/react/ui/components/DataTable/ActionBtn.tsx
+var isInlineAction = (action) => !("render" in action);
+var renderActionLabel = (action) => /* @__PURE__ */ jsxs(Fragment$1, { children: [action.icon && /* @__PURE__ */ jsx("span", {
+	className: "flex-shrink-0",
+	children: action.icon
+}), /* @__PURE__ */ jsx("span", {
+	className: "truncate",
+	children: action.label
+})] });
+var canShowInlineActions = (actions) => actions.every(isInlineAction);
+var InlineActions = ({ actions }) => /* @__PURE__ */ jsx("div", {
+	className: "tc-ui-action-btn-list inline-flex max-w-full items-center justify-center gap-1 whitespace-nowrap",
+	children: actions.map((action) => isInlineAction(action) ? /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		onClick: action.onClick,
+		className: cn("tc-ui-action-btn inline-flex h-8 max-w-full items-center justify-center gap-1 rounded px-2 text-sm transition-colors", action.danger ? "text-destructive hover:bg-destructive/10" : "text-table-action-text hover:bg-background/60"),
+		children: renderActionLabel(action)
+	}, action.key) : null)
+});
+var DropdownActions = ({ actions }) => /* @__PURE__ */ jsx(Dropdown, {
+	items: actions,
+	placement: "bottom-end",
+	children: /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		state: "ghost",
+		variant: "text",
+		"aria-label": "More actions",
+		className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-table-action-text transition-colors hover:bg-background/60 focus-visible:ring-border",
+		children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-5 w-5 opacity-70" })
+	})
+});
+var AutoActionBtn = ({ actions }) => {
+	const containerRef = useRef(null);
+	const measureRef = useRef(null);
+	const [canShowInline, setCanShowInline] = useState(false);
+	const updateOverflow = useCallback(() => {
+		const container = containerRef.current;
+		const measure = measureRef.current;
+		if (!container || !measure) {
+			setCanShowInline(false);
+			return;
+		}
+		const containerWidth = container.clientWidth;
+		const actionsWidth = measure.scrollWidth;
+		setCanShowInline(containerWidth > 0 && actionsWidth <= containerWidth);
+	}, []);
+	useLayoutEffect(() => {
+		if (!canShowInlineActions(actions)) return;
+		if (actions.length <= 1) return;
+		updateOverflow();
+		let rafId = 0;
+		const scheduleUpdate = () => {
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(updateOverflow);
+		};
+		if (typeof ResizeObserver === "undefined") {
+			window.addEventListener("resize", scheduleUpdate);
+			return () => {
+				cancelAnimationFrame(rafId);
+				window.removeEventListener("resize", scheduleUpdate);
+			};
+		}
+		const observer = new ResizeObserver(scheduleUpdate);
+		if (containerRef.current) observer.observe(containerRef.current);
+		if (measureRef.current) observer.observe(measureRef.current);
+		window.addEventListener("resize", scheduleUpdate);
+		return () => {
+			cancelAnimationFrame(rafId);
+			observer.disconnect();
+			window.removeEventListener("resize", scheduleUpdate);
+		};
+	}, [actions, updateOverflow]);
+	if (actions.length === 0) return "-";
+	if (actions.length === 1) {
+		if (!canShowInlineActions(actions)) return /* @__PURE__ */ jsx(DropdownActions, { actions });
+		return /* @__PURE__ */ jsx(InlineActions, { actions });
+	}
+	if (!canShowInlineActions(actions)) return /* @__PURE__ */ jsx(DropdownActions, { actions });
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative w-full min-w-0",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: measureRef,
+			"aria-hidden": "true",
+			className: "pointer-events-none invisible absolute left-0 top-0 w-max max-w-none",
+			children: /* @__PURE__ */ jsx(InlineActions, { actions })
+		}), canShowInline ? /* @__PURE__ */ jsx(InlineActions, { actions }) : /* @__PURE__ */ jsx(DropdownActions, { actions })]
+	});
+};
+var ActionBtn = ({ actions, overflow }) => {
+	if (overflow === "dropdown") return actions.length === 0 ? "-" : /* @__PURE__ */ jsx(DropdownActions, { actions });
+	if (overflow === "auto") return /* @__PURE__ */ jsx(AutoActionBtn, { actions });
+	if (actions.length === 0) return "-";
+	if (overflow === "inline") return canShowInlineActions(actions) ? /* @__PURE__ */ jsx(InlineActions, { actions }) : /* @__PURE__ */ jsx(DropdownActions, { actions });
+	if (actions.length === 1) {
+		const action = actions[0];
+		if (!isInlineAction(action)) return /* @__PURE__ */ jsx(DropdownActions, { actions });
+		return /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			onClick: action.onClick,
+			className: "tc-ui-action-btn inline-flex items-center justify-center w-8 h-8 rounded transition-colors",
+			children: action.label
+		});
+	}
+	return /* @__PURE__ */ jsx(DropdownActions, { actions });
+};
+//#endregion
+export { ActionBtn };

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

@@ -1,9 +1,9 @@
-import { type ReactNode } from 'react';
-import type { DropdownItem } from '../Dropdown';
-import { type PaginationProps } from '../Pagination';
-import { type TableFixed } from '../table';
-import type { ColumnDef } from '../types/baseType';
-import { type ActionOverflow } from './ActionBtn';
+import { type ReactNode } from "react";
+import type { DropdownItem } from "../Dropdown";
+import { type PaginationProps } from "../Pagination";
+import { type TableFixed } from "../table";
+import type { ColumnDef } from "../types/baseType";
+import { type ActionOverflow } from "./ActionBtn";
 type DataTableActionColumnOptions<T> = {
     actions?: DropdownItem[] | ((value: unknown, record: T, index: number) => DropdownItem[]);
     actionOverflow?: ActionOverflow;
@@ -11,25 +11,10 @@ type DataTableActionColumnOptions<T> = {
 };
 type TableColumnDef<T = Record<string, unknown>> = ColumnDef<T> & DataTableActionColumnOptions<T>;
 type RowSelection<T> = {
-    /**
-     * 受控用法：完全由外部维护选中 keys
-     */
     selectedRowKeys?: Array<string | number>;
-    /**
-     * 非受控用法：仅作为初始值，后续由内部维护
-     */
     defaultSelectedRowKeys?: Array<string | number>;
-    /**
-     * 选中项变化回调（受控/非受控都会触发）
-     */
     onChange?: (selectedRowKeys: Array<string | number>, selectedRows: T[], isAll: boolean) => void;
-    /**
-     * 全选 受控
-     */
     isAll?: boolean;
-    /**
-     * theader checkbox
-     */
     beforeCheckboxNode?: ReactNode;
 };
 interface DataTableProps<T = Record<string, unknown>> {
@@ -39,14 +24,9 @@ interface DataTableProps<T = Record<string, unknown>> {
     rowSelection?: RowSelection<T>;
     pagination?: PaginationProps;
     loading?: boolean;
-    /**
-     * 统一配置 column width 默认100px
-     * 会被columns[number].width覆盖
-     */
     defaultColumnWidth?: number;
 }
 export declare function DataTable<T = Record<string, unknown>>({ columns, data: pData, loading, rowKey, rowSelection, defaultColumnWidth, pagination: pPagination, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
-export { ActionBtn } from './ActionBtn';
-export type { ActionBtnProps } from './ActionBtn';
+export { ActionBtn } from "./ActionBtn";
+export type { ActionBtnProps } from "./ActionBtn";
 export type { DataTableProps, RowSelection, TableColumnDef };
-//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,235 @@
+import { useI18n } from "../../i18n/useI18n.js";
+import "../../i18n/index.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import "../Checkbox/index.js";
+import no_result_default from "../../assets/table/no-result.js";
+import { Pagination } from "../Pagination/Pagination.js";
+import "../Pagination/index.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
+import "../table/index.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import "../Skeleton/index.js";
+import { ActionBtn } from "./ActionBtn.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/DataTable/index.tsx
+var defaultRowKey = "id";
+var rowSelectionColumnWidth = 48;
+var actionColumnWidth = 96;
+var zeroOffset = "0px";
+var getRowKey = (record, index, rowKey = defaultRowKey) => {
+	if (typeof rowKey === "function") return rowKey(record, index);
+	const key = record[rowKey];
+	return typeof key === "string" || typeof key === "number" ? key : index;
+};
+var renderCellContent = (column, value, record, rowIndex, hasAction) => {
+	if (hasAction && column.actions) return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full min-w-0 justify-center",
+		children: /* @__PURE__ */ jsx(ActionBtn, {
+			actions: typeof column.actions === "function" ? column.actions(value, record, rowIndex) : column.actions,
+			overflow: column.actionOverflow ?? "auto"
+		})
+	});
+	return column.render ? column.render(value, record, rowIndex) : value;
+};
+var getColumnWidth = (column, defaultColumnWidth) => {
+	const hasAction = column.isAction ?? column.key === "action";
+	if (column.width) return column.width;
+	return `${hasAction ? actionColumnWidth : defaultColumnWidth}px`;
+};
+var getColumnStyle = (column, defaultColumnWidth) => {
+	const hasAction = column.isAction ?? column.key === "action";
+	if (column.width || hasAction) {
+		const width = getColumnWidth(column, defaultColumnWidth);
+		return {
+			width,
+			minWidth: width
+		};
+	}
+	return { minWidth: defaultColumnWidth };
+};
+var getFixedOffset = (widths) => {
+	if (widths.length === 0) return zeroOffset;
+	if (widths.length === 1) return widths[0];
+	return `calc(${widths.join(" + ")})`;
+};
+function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowSelection, defaultColumnWidth = 100, pagination: pPagination }) {
+	const t = useI18n();
+	const getCellValue = (record, column) => record[column.dataIndex || column.key];
+	const isControlled = rowSelection && Array.isArray(rowSelection.selectedRowKeys);
+	const [innerSelectedRowKeys, setInnerSelectedRowKeys] = useState(rowSelection?.defaultSelectedRowKeys ?? []);
+	const selectedRowKeys = (isControlled ? rowSelection?.selectedRowKeys : innerSelectedRowKeys) ?? [];
+	const selectedKeySet = new Set(selectedRowKeys);
+	const [currentPage, setCurrentPage] = useState(1);
+	const { showPagination, pagination, data, pageStartIndex } = useMemo(() => {
+		let pagination;
+		let data = pData;
+		let showPagination;
+		let pageStartIndex = 0;
+		if (pPagination) {
+			pagination = pPagination;
+			showPagination = pagination.total > 0;
+		} else {
+			pagination = {
+				onChange(v) {
+					setCurrentPage(v);
+				},
+				current: currentPage,
+				pageSize: 10,
+				total: pData.length
+			};
+			showPagination = pData.length > pagination.pageSize;
+			pageStartIndex = (pagination.current - 1) * pagination.pageSize;
+			data = pData.slice(pageStartIndex, pagination.current * pagination.pageSize);
+		}
+		return {
+			showPagination,
+			pagination,
+			data,
+			pageStartIndex
+		};
+	}, [
+		currentPage,
+		pData,
+		pPagination
+	]);
+	const pageRowKeys = data.map((record, index) => getRowKey(record, pageStartIndex + index, rowKey));
+	const handleRowSelectChange = (key) => {
+		if (!rowSelection) return;
+		const nextSelectedKeys = selectedKeySet.has(key) ? selectedRowKeys.filter((k) => k !== key) : [...selectedRowKeys, key];
+		const nextSelectedKeySet = new Set(nextSelectedKeys);
+		const selectedRows = pData.filter((record, index) => nextSelectedKeySet.has(getRowKey(record, index, rowKey)));
+		if (!isControlled) setInnerSelectedRowKeys(nextSelectedKeys);
+		rowSelection.onChange?.(nextSelectedKeys, selectedRows, false);
+	};
+	const handleSelectAllChange = (event) => {
+		if (!rowSelection) return;
+		const checked = event.target.checked;
+		let nextSelectedKeys;
+		if (checked) {
+			const pageKeySet = new Set(pageRowKeys);
+			nextSelectedKeys = Array.from(new Set([...selectedRowKeys, ...pageRowKeys.filter((key) => !selectedKeySet.has(key))])).filter((key) => pageKeySet.has(key) || selectedKeySet.has(key));
+		} else {
+			const pageKeySet = new Set(pageRowKeys);
+			nextSelectedKeys = selectedRowKeys.filter((key) => !pageKeySet.has(key));
+		}
+		const nextSelectedKeySet = new Set(nextSelectedKeys);
+		const selectedRows = pData.filter((record, index) => nextSelectedKeySet.has(getRowKey(record, index, rowKey)));
+		if (!isControlled) setInnerSelectedRowKeys(nextSelectedKeys);
+		rowSelection.onChange?.(nextSelectedKeys, selectedRows, checked);
+	};
+	const allChecked = rowSelection ? rowSelection.isAll ?? (pageRowKeys.length > 0 && pageRowKeys.every((key) => selectedKeySet.has(key))) : false;
+	const partiallyChecked = rowSelection ? pageRowKeys.some((key) => selectedKeySet.has(key)) && !allChecked : false;
+	const fixedColumns = useMemo(() => {
+		const columnsWithFixed = columns.map((column, index) => {
+			const hasAction = column.isAction ?? column.key === "action";
+			return {
+				column,
+				index,
+				fixed: column.fixed ?? (hasAction ? "right" : void 0),
+				width: getColumnWidth(column, defaultColumnWidth)
+			};
+		});
+		const leftOffsetWidths = rowSelection ? [`${rowSelectionColumnWidth}px`] : [];
+		const leftOffsets = /* @__PURE__ */ new Map();
+		for (const item of columnsWithFixed) {
+			if (item.fixed !== "left") continue;
+			leftOffsets.set(item.index, getFixedOffset(leftOffsetWidths));
+			leftOffsetWidths.push(item.width);
+		}
+		const rightOffsetWidths = [];
+		const rightOffsets = /* @__PURE__ */ new Map();
+		for (const item of [...columnsWithFixed].reverse()) {
+			if (item.fixed !== "right") continue;
+			rightOffsets.set(item.index, getFixedOffset(rightOffsetWidths));
+			rightOffsetWidths.push(item.width);
+		}
+		return columnsWithFixed.map((item) => ({
+			...item,
+			fixedOffset: item.fixed === "left" ? leftOffsets.get(item.index) : item.fixed === "right" ? rightOffsets.get(item.index) : void 0
+		}));
+	}, [
+		columns,
+		defaultColumnWidth,
+		rowSelection
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tc-ui-data-table bg-background rounded-[20px] overflow-hidden relative",
+		children: [
+			/* @__PURE__ */ jsxs(Table, {
+				containerClassName: "rounded-b-none overflow-x-auto",
+				children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [rowSelection && /* @__PURE__ */ jsxs(TableHead, {
+					fixed: "left",
+					showSeparator: false,
+					style: {
+						width: "48px",
+						minWidth: "48px"
+					},
+					children: [rowSelection.beforeCheckboxNode, /* @__PURE__ */ jsx(Checkbox, {
+						checked: allChecked,
+						"aria-label": "Select all rows",
+						indeterminate: partiallyChecked,
+						onChange: (_, event) => handleSelectAllChange(event)
+					})]
+				}), fixedColumns.map(({ column, fixed, fixedOffset }) => {
+					return /* @__PURE__ */ jsx(TableHead, {
+						isAction: column.isAction ?? column.key === "action",
+						fixed,
+						fixedOffset,
+						hideSeparatorWhenFixedActive: fixed === "right",
+						style: getColumnStyle(column, defaultColumnWidth),
+						children: column.title
+					}, column.key);
+				})] }) }), /* @__PURE__ */ jsx(TableBody, { children: data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+					colSpan: columns.length + (rowSelection ? 1 : 0),
+					className: "text-muted-foreground",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-center w-full gap-2.5",
+						children: [/* @__PURE__ */ jsx("img", {
+							src: no_result_default,
+							alt: t("components.dataTable.noData"),
+							className: " w-24 h-24"
+						}), t("components.dataTable.noData")]
+					})
+				}) }) : data.map((record, rowIndex) => {
+					const recordKey = getRowKey(record, pageStartIndex + rowIndex, rowKey);
+					return /* @__PURE__ */ jsxs(TableRow, { children: [rowSelection && /* @__PURE__ */ jsx(TableCell, {
+						fixed: "left",
+						style: {
+							width: "48px",
+							minWidth: "48px"
+						},
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							checked: selectedKeySet.has(recordKey),
+							"aria-label": "Select row",
+							onChange: () => handleRowSelectChange(recordKey)
+						})
+					}), fixedColumns.map(({ column, fixed, fixedOffset }) => {
+						const value = getCellValue(record, column);
+						const hasAction = column.isAction ?? column.key === "action";
+						return /* @__PURE__ */ jsx(TableCell, {
+							isAction: hasAction,
+							fixed,
+							fixedOffset,
+							style: getColumnStyle(column, defaultColumnWidth),
+							children: renderCellContent(column, value, record, rowIndex, hasAction)
+						}, column.key);
+					})] }, recordKey);
+				}) })]
+			}),
+			loading && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 rounded-[20px] bg-background/70 text-sm text-gray-600 z-[100]",
+				children: /* @__PURE__ */ jsx(Skeleton, {
+					mode: "tableloading",
+					rows: 8
+				})
+			}),
+			showPagination && /* @__PURE__ */ jsx("div", {
+				className: "px-6 pb-6 mt-6",
+				children: /* @__PURE__ */ jsx(Pagination, { ...pagination })
+			})
+		]
+	});
+}
+//#endregion
+export { ActionBtn, DataTable };

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

@@ -1,17 +1,11 @@
-import { ModeType } from './data';
-import { type DateLocaleConfig } from './locales';
+import { ModeType } from "./data";
+import { type DateLocaleConfig } from "./locales";
 export type DateRange = {
     from: Date | undefined;
     to?: Date | undefined;
 };
 export type QuickRangePreset = {
-    /**
-     * 展示文案
-     */
     label: string;
-    /**
-     * 返回一个范围对象
-     */
     getRange: () => DateRange;
 };
 export interface CalendarProps {
@@ -21,15 +15,7 @@ export interface CalendarProps {
     disabledDate?: (date: Date) => boolean;
     showTime?: boolean;
     className?: string;
-    /**
-     * 自定义文案配置，会覆盖默认文案
-     */
     locale?: Partial<DateLocaleConfig>;
-    /**
-     * 范围模式下的快捷选择配置
-     * 不传则使用默认预设
-     */
     quickRanges?: QuickRangePreset[];
 }
 export declare function Calendar({ mode, value, onChange, disabledDate, showTime, className, locale: customLocale, quickRanges, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Calendar.d.ts.map