@_tc/template-core 0.0.1-bate.45 → 0.0.1-bate.47

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

@@ -0,0 +1,36 @@
+export * from "./breadcrumb";
+export * from "./Button";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./ConfirmDialog";
+export * from "./DataTable";
+export * from "./Drawer";
+export * from "./Dropdown";
+export * from "./Popup";
+export * from "./Form";
+export * from "./hooks/useDropdownPositioning";
+export * from "./ImagePreview";
+export * from "./Input";
+export * from "./InputNumber";
+export * from "./Label";
+export * from "./Layout";
+export * from "./Loading";
+export * from "./Menu";
+export * from "./Message";
+export * from "./Modal";
+export * from "./Notification";
+export * from "./Overlay";
+export * from "./Pagination";
+export * from "./Radio";
+export * from "./Search";
+export * from "./Select";
+export * from "./Skeleton";
+export * from "./Switch";
+export * from "./table";
+export * from "./TableSearch";
+export * from "./Tabs";
+export * from "./Textarea";
+export * from "./Tooltip";
+export * from "./TreeSelect";
+export * from "./Upload";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,81 @@
+import { Loading, LoadingIndicator } from "./Loading/Loading.js";
+import "./Loading/index.js";
+import { Button } from "./Button/Button.js";
+import { AsynchronousButton, SubmitButton } from "./Button/SubmitButton.js";
+import "./Button/index.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, SimpleBreadcrumb } from "./breadcrumb/breadcrumb.js";
+import "./breadcrumb/index.js";
+import { Card } from "./Card/Card.js";
+import "./Card/index.js";
+import { Checkbox } from "./Checkbox/Checkbox.js";
+import "./Checkbox/index.js";
+import { Overlay, canUseDocument } from "./Overlay/Overlay.js";
+import "./Overlay/index.js";
+import { Modal } from "./Modal/Modal.js";
+import { modal } from "./Modal/ModalManager.js";
+import "./Modal/index.js";
+import { ConfirmDialog } from "./ConfirmDialog/ConfirmDialog.js";
+import "./ConfirmDialog/index.js";
+import { Input } from "./Input/Input.js";
+import "./Input/index.js";
+import { getDefaultDropdownPosition, useDropdownPositioning } from "./hooks/useDropdownPositioning.js";
+import { Popup } from "./Popup/Popup.js";
+import "./Popup/index.js";
+import { Select } from "./Select/Select.js";
+import "./Select/index.js";
+import { Pagination } from "./Pagination/Pagination.js";
+import "./Pagination/index.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table/table.js";
+import "./table/index.js";
+import { Skeleton } from "./Skeleton/Skeleton.js";
+import "./Skeleton/index.js";
+import { Dropdown } from "./Dropdown/Dropdown.js";
+import "./Dropdown/index.js";
+import { ActionBtn } from "./DataTable/ActionBtn.js";
+import { DataTable } from "./DataTable/index.js";
+import { Drawer } from "./Drawer/Drawer.js";
+import "./Drawer/index.js";
+import { Form } from "./Form/Form.js";
+import { Label } from "./Label/Label.js";
+import "./Label/index.js";
+import { FormItem } from "./Form/FormItem.js";
+import { useForm } from "./Form/useForm.js";
+import { SchemaForm } from "./Form/SchemaForm/index.js";
+import "./Form/index.js";
+import { ImagePreviewController } from "./ImagePreview/ImagePreview.js";
+import { PreviewImage } from "./ImagePreview/PreviewImage.js";
+import "./ImagePreview/index.js";
+import { InputNumber } from "./InputNumber/InputNumber.js";
+import "./InputNumber/index.js";
+import { Layout } from "./Layout/Layout.js";
+import "./Layout/index.js";
+import { useMenuStore } from "./Menu/MenuContext.js";
+import { MenuItem } from "./Menu/MenuItem.js";
+import { SubMenu } from "./Menu/SubMenu.js";
+import { CollapseToggle, Menu } from "./Menu/Menu.js";
+import "./Menu/index.js";
+import { message } from "./Message/MessageManager.js";
+import "./Message/index.js";
+import { Notification } from "./Notification/Notification.js";
+import "./Notification/index.js";
+import { RadioGroup, useRadioGroupContext } from "./Radio/RadioGroup.js";
+import { Radio } from "./Radio/Radio.js";
+import "./Radio/index.js";
+import Search from "./Search/Search.js";
+import "./Search/index.js";
+import { Switch } from "./Switch/Switch.js";
+import "./Switch/index.js";
+import TableSearch from "./TableSearch/TableSearch.js";
+import "./TableSearch/index.js";
+import { Tabs } from "./Tabs/Tabs.js";
+import "./Tabs/index.js";
+import { Textarea } from "./Textarea/Textarea.js";
+import "./Textarea/index.js";
+import { Tooltip } from "./Tooltip/Tooltip.js";
+import "./Tooltip/index.js";
+import { TreeSelect } from "./TreeSelect/TreeSelect.js";
+import "./TreeSelect/index.js";
+import { FileUpload } from "./Upload/Upload.js";
+import { ImageUpload } from "./Upload/ImageUpload.js";
+import "./Upload/index.js";
+export { ActionBtn, AsynchronousButton, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Checkbox, CollapseToggle, ConfirmDialog, DataTable, Drawer, Dropdown, FileUpload, Form, FormItem, ImagePreviewController, ImageUpload, Input, InputNumber, Label, Layout, Loading, LoadingIndicator, Menu, MenuItem, Modal, Notification, Overlay, Pagination, Popup, PreviewImage, Radio, RadioGroup, SchemaForm, Search, Select, SimpleBreadcrumb, Skeleton, SubMenu, SubmitButton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSearch, Tabs, Textarea, Tooltip, TreeSelect, canUseDocument, getDefaultDropdownPosition, message, modal, useDropdownPositioning, useForm, useMenuStore, useRadioGroupContext };

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

@@ -0,0 +1,2 @@
+export * from "./table";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

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

@@ -1,6 +1,16 @@
-import * as React from 'react';
+import * as React from "react";
+type TableFixed = 'left' | 'right';
+type TableFixedCellProps = {
+    fixed?: TableFixed;
+    fixedOffset?: React.CSSProperties['left'];
+    fixedShadow?: boolean;
+    fixedActive?: boolean;
+    fixedZIndex?: React.CSSProperties['zIndex'];
+};
 declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
     containerClassName?: string;
+    containerRef?: React.Ref<HTMLDivElement>;
+    onContainerScroll?: React.UIEventHandler<HTMLDivElement>;
 } & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
@@ -8,10 +18,13 @@ declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<
 declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
 declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & {
     isAction?: boolean;
-} & React.RefAttributes<HTMLTableCellElement>>;
+    showSeparator?: boolean;
+    hideSeparatorWhenFixedActive?: boolean;
+} & TableFixedCellProps & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & {
     isAction?: boolean;
-} & React.RefAttributes<HTMLTableCellElement>>;
+} & TableFixedCellProps & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export type { TableFixed };
 //# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1,166 @@
+import { cn } from "../../lib/utils.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/table/table.tsx
+var fixedShadowClassNames = {
+	left: "data-[fixed-shadow=visible]:after:pointer-events-none data-[fixed-shadow=visible]:after:absolute data-[fixed-shadow=visible]:after:inset-y-0 data-[fixed-shadow=visible]:after:-right-[3px] data-[fixed-shadow=visible]:after:w-[3px] data-[fixed-shadow=visible]:after:bg-gradient-to-r data-[fixed-shadow=visible]:after:from-white/30 data-[fixed-shadow=visible]:after:via-white/8 data-[fixed-shadow=visible]:after:to-transparent data-[fixed-shadow=visible]:after:content-['']",
+	right: "data-[fixed-shadow=visible]:before:pointer-events-none data-[fixed-shadow=visible]:before:absolute data-[fixed-shadow=visible]:before:inset-y-0 data-[fixed-shadow=visible]:before:-left-[3px] data-[fixed-shadow=visible]:before:w-[3px] data-[fixed-shadow=visible]:before:bg-gradient-to-l data-[fixed-shadow=visible]:before:from-white/30 data-[fixed-shadow=visible]:before:via-white/8 data-[fixed-shadow=visible]:before:to-transparent data-[fixed-shadow=visible]:before:content-['']"
+};
+var getFixedCellStyle = ({ fixed, fixedOffset = 0, fixedZIndex = 1, style }) => {
+	if (!fixed) return style;
+	return {
+		position: "sticky",
+		[fixed]: fixedOffset,
+		zIndex: fixedZIndex,
+		...style
+	};
+};
+var setRef = (ref, value) => {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) ref.current = value;
+};
+var getFixedPixelOffset = (cell, fixed) => {
+	const fixedOffset = Number.parseFloat(window.getComputedStyle(cell).getPropertyValue(fixed));
+	return Number.isFinite(fixedOffset) ? fixedOffset : 0;
+};
+var isFixedCellActive = (cell, fixed, containerRect) => {
+	const cellRect = cell.getBoundingClientRect();
+	const fixedOffset = getFixedPixelOffset(cell, fixed);
+	if (fixed === "left") return cellRect.left <= containerRect.left + fixedOffset + 1;
+	return cellRect.right >= containerRect.right - fixedOffset - 1;
+};
+var updateFixedSideState = (row, fixed, containerRect, canShow) => {
+	if (!canShow) return;
+	const activeCells = Array.from(row.querySelectorAll(`[data-tc-table-fixed="${fixed}"][data-tc-table-fixed-active="true"]`)).filter((cell) => isFixedCellActive(cell, fixed, containerRect));
+	if (activeCells.length === 0) return;
+	activeCells.forEach((cell) => {
+		cell.dataset.fixedActive = "true";
+	});
+	const shadowCell = activeCells.reduce((current, cell) => {
+		const currentRect = current.getBoundingClientRect();
+		const cellRect = cell.getBoundingClientRect();
+		if (fixed === "left") return cellRect.right > currentRect.right ? cell : current;
+		return cellRect.left < currentRect.left ? cell : current;
+	});
+	shadowCell.dataset.fixedShadow = "visible";
+};
+var Table = React$1.forwardRef(({ className, containerClassName, containerRef, onContainerScroll, children, ...props }, ref) => {
+	const internalContainerRef = React$1.useRef(null);
+	const updateFixedShadowState = React$1.useCallback(() => {
+		const container = internalContainerRef.current;
+		if (!container) return;
+		const scrollLeft = container.scrollLeft;
+		const maxScrollLeft = container.scrollWidth - container.clientWidth;
+		const containerRect = container.getBoundingClientRect();
+		container.querySelectorAll("[data-fixed-shadow=\"visible\"], [data-fixed-active=\"true\"]").forEach((cell) => {
+			delete cell.dataset.fixedShadow;
+			delete cell.dataset.fixedActive;
+		});
+		container.querySelectorAll("tr").forEach((row) => {
+			updateFixedSideState(row, "left", containerRect, scrollLeft > 1);
+			updateFixedSideState(row, "right", containerRect, maxScrollLeft - scrollLeft > 1);
+		});
+	}, []);
+	const handleContainerRef = React$1.useCallback((node) => {
+		internalContainerRef.current = node;
+		setRef(containerRef, node);
+	}, [containerRef]);
+	const handleContainerScroll = React$1.useCallback((event) => {
+		updateFixedShadowState();
+		onContainerScroll?.(event);
+	}, [onContainerScroll, updateFixedShadowState]);
+	React$1.useLayoutEffect(() => {
+		updateFixedShadowState();
+		const container = internalContainerRef.current;
+		if (!container || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(updateFixedShadowState);
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, [children, updateFixedShadowState]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: handleContainerRef,
+		onScroll: handleContainerScroll,
+		className: cn("tc-ui-table relative w-full overflow-auto rounded-[20px]", containerClassName),
+		children: /* @__PURE__ */ jsx("table", {
+			ref,
+			className: cn("w-full caption-bottom text-sm", className),
+			...props,
+			children
+		})
+	});
+});
+Table.displayName = "Table";
+var TableHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
+	ref,
+	className: cn("tc-ui-table-header bg-table-header", className),
+	...props
+}));
+TableHeader.displayName = "TableHeader";
+var TableBody = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", {
+	ref,
+	className: cn("tc-ui-table-body [&_tr:last-child]:border-0", className),
+	...props
+}));
+TableBody.displayName = "TableBody";
+var TableFooter = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", {
+	ref,
+	className: cn("tc-ui-table-footer border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+	...props
+}));
+TableFooter.displayName = "TableFooter";
+var TableRow = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", {
+	ref,
+	className: cn("tc-ui-table-row border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+	...props
+}));
+TableRow.displayName = "TableRow";
+var TableHead = React$1.forwardRef(({ className, children, isAction, showSeparator = true, hideSeparatorWhenFixedActive, fixed, fixedOffset, fixedShadow = true, fixedActive = true, fixedZIndex = 10, style, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("th", {
+		ref,
+		"data-tc-table-fixed": fixed,
+		"data-tc-table-fixed-shadow": fixed && fixedShadow ? "true" : void 0,
+		"data-tc-table-fixed-active": fixed && fixedActive ? "true" : void 0,
+		"data-hide-separator-when-fixed-active": hideSeparatorWhenFixedActive ? "true" : void 0,
+		className: cn("tc-ui-table-head relative h-12 px-4 text-left align-middle text-xs font-normal", "text-table-head-text", "first:[&>.tc-ui-table-head-separator]:hidden", isAction && "bg-table-header text-table-head-text w-[96px] text-center", fixed && "data-[fixed-active=true]:bg-table-header", fixed && fixedShadow && fixedShadowClassNames[fixed], className),
+		style: getFixedCellStyle({
+			fixed,
+			fixedOffset,
+			fixedZIndex,
+			style
+		}),
+		...props,
+		children: [showSeparator && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "tc-ui-table-head-separator pointer-events-none absolute left-0 top-1/2 h-5 w-px -translate-y-1/2 bg-[hsl(var(--table-head-text)/0.5)]"
+		}), children]
+	});
+});
+TableHead.displayName = "TableHead";
+var TableCell = React$1.forwardRef(({ className, isAction, fixed, fixedOffset, fixedShadow = true, fixedActive = true, fixedZIndex = 1, style, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("td", {
+		ref,
+		"data-tc-table-fixed": fixed,
+		"data-tc-table-fixed-shadow": fixed && fixedShadow ? "true" : void 0,
+		"data-tc-table-fixed-active": fixed && fixedActive ? "true" : void 0,
+		className: cn("tc-ui-table-cell p-4 align-middle text-sm font-normal", "text-table-cell-text", isAction && "text-table-action-text w-[96px] text-center", isAction && !fixed && "bg-background", fixed && "data-[fixed-active=true]:bg-background", fixed && fixedShadow && fixedShadowClassNames[fixed], className),
+		style: getFixedCellStyle({
+			fixed,
+			fixedOffset,
+			fixedZIndex,
+			style
+		}),
+		...props
+	});
+});
+TableCell.displayName = "TableCell";
+var TableCaption = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", {
+	ref,
+	className: cn("tc-ui-table-caption mt-4 text-sm text-muted-foreground", className),
+	...props
+}));
+TableCaption.displayName = "TableCaption";
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };