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

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

@@ -0,0 +1,282 @@
+import { useI18n } from "../../i18n/useI18n.js";
+import "../../i18n/index.js";
+import { cn } from "../../lib/utils.js";
+import { LoadingIndicator } from "../Loading/Loading.js";
+import "../Loading/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { Input } from "../Input/Input.js";
+import "../Input/index.js";
+import { useDropdownPositioning } from "../hooks/useDropdownPositioning.js";
+import { Popup } from "../Popup/Popup.js";
+import "../Popup/index.js";
+import { getSelectDropdownPosition } from "./dropdownPositioning.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronUp, X } from "lucide-react";
+//#region packages/react/ui/components/Select/Select.tsx
+var Select = forwardRef(({ options, value: controlledValue, defaultValue, placeholder, onChange, className, disabled, loading, clearable = true, searchable = true, getPopupContainer }, ref) => {
+	const t = useI18n();
+	const [isOpen, setIsOpen] = useState(false);
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [isHover, setIsHover] = useState(false);
+	const [searchTerm, setSearchTerm] = useState("");
+	const [activeOptionIndex, setActiveOptionIndex] = useState(0);
+	const rootRef = useRef(null);
+	const selectRef = useRef(null);
+	const dropdownRef = useRef(null);
+	const inputRef = useRef(null);
+	const popupContainerRef = useRef(null);
+	const reactId = useId();
+	const listboxId = `${reactId}-listbox`;
+	const isParentPopupContainer = getPopupContainer === "parent";
+	popupContainerRef.current = isParentPopupContainer ? rootRef.current?.parentElement ?? null : null;
+	useEffect(() => {
+		if (!isParentPopupContainer) return;
+		const container = rootRef.current?.parentElement;
+		popupContainerRef.current = container ?? null;
+		if (!container || window.getComputedStyle(container).position !== "static") return;
+		const previousPosition = container.style.position;
+		container.style.position = "relative";
+		return () => {
+			container.style.position = previousPosition;
+		};
+	}, [isParentPopupContainer]);
+	const setRefs = useCallback((node) => {
+		selectRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const isControlled = controlledValue !== void 0;
+	const value = isControlled ? controlledValue : internalValue;
+	const selectedOption = options.find((opt) => opt.value === value);
+	const displayText = selectedOption ? selectedOption.label : placeholder || "";
+	const filteredOptions = useMemo(() => {
+		if (!searchable || !searchTerm.trim()) return options;
+		const lower = searchTerm.trim().toLowerCase();
+		return options.filter((opt) => {
+			return (opt.searchText ?? (typeof opt.label === "string" || typeof opt.label === "number" ? String(opt.label) : "")).toLowerCase().includes(lower);
+		});
+	}, [
+		options,
+		searchTerm,
+		searchable
+	]);
+	const activeOptionId = filteredOptions[activeOptionIndex] ? `${reactId}-option-${activeOptionIndex}` : void 0;
+	useEffect(() => {
+		setActiveOptionIndex((current) => {
+			if (filteredOptions.length === 0) return 0;
+			return Math.min(current, filteredOptions.length - 1);
+		});
+	}, [filteredOptions.length]);
+	const positioning = useDropdownPositioning({
+		open: isOpen,
+		anchorRef: selectRef,
+		contentRef: dropdownRef,
+		placement: "bottom-start",
+		offset: 4,
+		matchAnchorWidth: true,
+		strategy: getSelectDropdownPosition,
+		estimateSize: () => ({ height: Math.min(filteredOptions.length * 40 + 8, 240) }),
+		watchDeps: [
+			filteredOptions.length,
+			searchTerm,
+			searchable
+		],
+		containerRef: isParentPopupContainer ? popupContainerRef : void 0,
+		positionMode: isParentPopupContainer ? "absolute" : "fixed"
+	});
+	useEffect(() => {
+		if (isOpen) requestAnimationFrame(() => {
+			if (searchable) inputRef.current?.focus();
+		});
+	}, [isOpen, searchable]);
+	const handleToggle = useCallback(() => {
+		if (disabled) return;
+		setIsOpen((prev) => {
+			const next = !prev;
+			if (next && searchable) setSearchTerm("");
+			if (next) setActiveOptionIndex(Math.max(options.findIndex((opt) => opt.value === value), 0));
+			return next;
+		});
+	}, [
+		disabled,
+		options,
+		searchable,
+		value
+	]);
+	const openSelect = useCallback(() => {
+		if (disabled) return;
+		if (searchable) setSearchTerm("");
+		setActiveOptionIndex(Math.max(options.findIndex((opt) => opt.value === value), 0));
+		setIsOpen(true);
+	}, [
+		disabled,
+		options,
+		searchable,
+		value
+	]);
+	const handleSelect = useCallback((optionValue) => {
+		if (!isControlled) setInternalValue(optionValue);
+		onChange?.(optionValue);
+		setIsOpen(false);
+	}, [isControlled, onChange]);
+	const handleClear = useCallback((event) => {
+		event.stopPropagation();
+		if (disabled) return;
+		setInternalValue(void 0);
+		onChange?.(void 0);
+	}, [disabled, onChange]);
+	const handleSearchChange = useCallback((event) => {
+		setSearchTerm(event.target.value);
+		setActiveOptionIndex(0);
+	}, []);
+	const moveActiveOption = useCallback((direction) => {
+		if (filteredOptions.length === 0) return;
+		setActiveOptionIndex((current) => {
+			const nextIndex = current + direction;
+			if (nextIndex < 0) return filteredOptions.length - 1;
+			if (nextIndex >= filteredOptions.length) return 0;
+			return nextIndex;
+		});
+	}, [filteredOptions.length]);
+	const selectActiveOption = useCallback(() => {
+		const option = filteredOptions[activeOptionIndex];
+		if (option) handleSelect(option.value);
+	}, [
+		activeOptionIndex,
+		filteredOptions,
+		handleSelect
+	]);
+	const handleKeyDown = useCallback((event) => {
+		if (disabled) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				if (!isOpen) openSelect();
+				else moveActiveOption(1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				if (!isOpen) openSelect();
+				else moveActiveOption(-1);
+				break;
+			case "Enter":
+				event.preventDefault();
+				if (!isOpen) openSelect();
+				else selectActiveOption();
+				break;
+			case " ":
+				if (event.currentTarget !== inputRef.current) {
+					event.preventDefault();
+					if (!isOpen) openSelect();
+				}
+				break;
+			case "Escape":
+				if (isOpen) {
+					event.preventDefault();
+					setIsOpen(false);
+					selectRef.current?.focus();
+				}
+				break;
+			default: break;
+		}
+	}, [
+		disabled,
+		isOpen,
+		moveActiveOption,
+		openSelect,
+		selectActiveOption
+	]);
+	const popupContainer = getPopupContainer === "parent" ? rootRef.current?.parentElement ?? void 0 : getPopupContainer?.();
+	const inputIcon = () => {
+		if (loading) return /* @__PURE__ */ jsx(LoadingIndicator, { size: "sm" });
+		return clearable && !disabled && value !== void 0 && isHover ? /* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			type: "button",
+			onClick: handleClear,
+			className: "ml-2 flex items-center justify-center text-muted-foreground hover:text-foreground cursor-pointer",
+			"aria-label": "Clear selection",
+			title: "Clear",
+			children: /* @__PURE__ */ jsx(X, { size: 14 })
+		}) : /* @__PURE__ */ jsx(ChevronUp, {
+			size: 16,
+			className: cn("ml-2 transition-transform duration-200", isOpen ? "rotate-0" : "rotate-180")
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: cn("tc-ui-select relative w-full", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: setRefs,
+			onClick: handleToggle,
+			onKeyDown: handleKeyDown,
+			onMouseEnter: () => setIsHover(true),
+			onMouseLeave: () => setIsHover(false),
+			role: "combobox",
+			"aria-expanded": isOpen,
+			"aria-haspopup": "listbox",
+			"aria-controls": listboxId,
+			"aria-activedescendant": isOpen ? activeOptionId : void 0,
+			tabIndex: disabled ? -1 : 0,
+			className: cn("flex h-10 w-full items-center justify-between rounded-lg px-3 py-0 text-sm", "border transition-colors duration-200", "focus:outline-none focus-visible:border-theme focus-visible:ring-2 focus-visible:ring-theme/25", disabled ? "cursor-not-allowed bg-muted border-border" : "cursor-pointer bg-background", !disabled && isOpen && "border-theme ring-2 ring-theme/25", !disabled && !isOpen && "border-border"),
+			children: [searchable && isOpen ? /* @__PURE__ */ jsx(Input, {
+				ref: inputRef,
+				value: searchTerm,
+				onChange: (_, e) => handleSearchChange(e),
+				onClick: (e) => e.stopPropagation(),
+				onKeyDown: (e) => {
+					e.stopPropagation();
+					handleKeyDown(e);
+				},
+				placeholder: typeof displayText === "string" ? displayText : placeholder,
+				className: "min-w-0 flex-1",
+				inputClassName: cn("h-5 min-w-0 flex-1 rounded-none border-0 bg-transparent px-0 py-0 text-left leading-5 outline-none ring-0", "placeholder:text-muted-foreground", disabled && "text-muted-foreground cursor-not-allowed"),
+				role: "searchbox",
+				"aria-controls": listboxId,
+				"aria-activedescendant": isOpen ? activeOptionId : void 0,
+				disabled
+			}) : /* @__PURE__ */ jsx("span", {
+				className: cn("min-h-5 min-w-0 flex-1 text-left truncate leading-5", disabled ? "text-muted-foreground" : !selectedOption && "text-muted-foreground"),
+				children: displayText
+			}), inputIcon()]
+		}), /* @__PURE__ */ jsx(Popup, {
+			open: isOpen,
+			anchorRef: selectRef,
+			contentRef: dropdownRef,
+			positioning,
+			keepMounted: true,
+			onOpenChange: setIsOpen,
+			container: popupContainer,
+			positionMode: isParentPopupContainer ? "absolute" : "fixed",
+			className: cn("w-full rounded-xl border border-border/60 bg-popover text-popover-foreground", "shadow-[var(--shadow-floating)]", "max-h-60 overflow-auto"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("w-full", !isOpen && "hidden"),
+				children: /* @__PURE__ */ jsx("div", {
+					id: listboxId,
+					role: "listbox",
+					className: "p-1",
+					children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+						const isSelected = option.value === value;
+						const isActive = index === activeOptionIndex;
+						return /* @__PURE__ */ jsx("div", {
+							id: `${reactId}-option-${index}`,
+							role: "option",
+							"aria-selected": isSelected,
+							onClick: () => handleSelect(option.value),
+							onMouseEnter: () => setActiveOptionIndex(index),
+							className: cn("px-4 py-2 text-sm cursor-pointer transition-colors rounded-md", "hover:bg-foreground/8", (isSelected || isActive) && "bg-theme/12 text-foreground"),
+							children: option.label
+						}, option.value);
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "px-4 py-2 text-sm text-muted-foreground text-center",
+						children: t("components.select.empty")
+					})
+				})
+			})
+		})]
+	});
+});
+Select.displayName = "Select";
+//#endregion
+export { Select };

package/fe/packages/react/ui/components/Select/dropdownPositioning.d.ts

@@ -0,0 +1,2 @@
+import type { DropdownPositioningStrategy } from "../hooks/useDropdownPositioning";
+export declare const getSelectDropdownPosition: DropdownPositioningStrategy;

package/fe/packages/react/ui/components/Select/dropdownPositioning.js

@@ -0,0 +1,16 @@
+//#region packages/react/ui/components/Select/dropdownPositioning.ts
+var getSelectDropdownPosition = ({ anchorRect, contentRect, containerRect, viewportHeight, offset, matchAnchorWidth }) => {
+	const dropdownHeight = contentRect?.height ?? 240;
+	const spaceBelow = viewportHeight - anchorRect.bottom;
+	const spaceAbove = anchorRect.top;
+	const shouldPlaceTop = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
+	const containerTop = containerRect?.top ?? 0;
+	const containerLeft = containerRect?.left ?? 0;
+	return {
+		top: (shouldPlaceTop ? anchorRect.top - dropdownHeight - offset : anchorRect.bottom + offset) - containerTop,
+		left: anchorRect.left - containerLeft,
+		width: matchAnchorWidth ? anchorRect.width : void 0
+	};
+};
+//#endregion
+export { getSelectDropdownPosition };

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

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

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

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

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

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "react";
+export type SkeletonMode = 'pageloading' | 'tableloading' | 'componentsloading';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    mode?: SkeletonMode;
+    rows?: number;
+    showTitle?: boolean;
+    showActions?: boolean;
+}
+export declare const Skeleton: {
+    ({ mode, className, rows, showTitle, showActions, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,101 @@
+import { cn } from "../../lib/utils.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
+import "../table/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Skeleton/Skeleton.tsx
+var SkeletonItem = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("animate-pulse rounded bg-gray-200/60 dark:bg-gray-700/60", className),
+	...props
+});
+var SkeletonText = ({ width = "100%", className }) => /* @__PURE__ */ jsx(SkeletonItem, {
+	className: cn("h-4", className),
+	style: { width: typeof width === "number" ? `${width}px` : width }
+});
+var PageLoadingSkeleton = ({ rows = 5, showTitle = true, showActions = true }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full space-y-6 p-6",
+		children: [
+			showTitle && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-48" }), showActions && /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-3",
+					children: [/* @__PURE__ */ jsx(SkeletonItem, { className: "h-10 w-24" }), /* @__PURE__ */ jsx(SkeletonItem, { className: "h-10 w-24" })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-4",
+				children: [
+					/* @__PURE__ */ jsx(SkeletonItem, { className: "h-10 flex-1" }),
+					/* @__PURE__ */ jsx(SkeletonItem, { className: "h-10 w-24" }),
+					/* @__PURE__ */ jsx(SkeletonItem, { className: "h-10 w-24" })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-4",
+					children: [
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-20 flex-1" }),
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-20 w-32" }),
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-20 w-32" })
+					]
+				}, index))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx(SkeletonItem, { className: "h-4 w-32" }), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-8" }),
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-8" }),
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-8" })
+					]
+				})]
+			})
+		]
+	});
+};
+var TableLoadingSkeleton = ({ rows = 5 }) => {
+	const columnCount = 6;
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "bg-background rounded-[20px] overflow-hidden",
+			children: /* @__PURE__ */ jsxs(Table, {
+				containerClassName: "rounded-b-none",
+				children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columnCount }).map((_, index) => /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(SkeletonText, { width: index === 0 ? 120 : index === columnCount - 1 ? 80 : 150 }) }, index)) }) }), /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columnCount }).map((_, colIndex) => /* @__PURE__ */ jsx(TableCell, { children: colIndex === columnCount - 1 ? /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-16" }), /* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-16" })]
+				}) : /* @__PURE__ */ jsx(SkeletonText, { width: colIndex === 0 ? 120 : colIndex === 1 ? "80%" : 150 }) }, colIndex)) }, rowIndex)) })]
+			})
+		})
+	});
+};
+var ComponentsLoadingSkeleton = ({ rows = 3 }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full space-y-3",
+		children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx(SkeletonItem, { className: "h-4 w-full" }, index))
+	});
+};
+var Skeleton = ({ mode = "componentsloading", className, rows, showTitle, showActions, ...props }) => {
+	const renderSkeleton = () => {
+		switch (mode) {
+			case "pageloading": return /* @__PURE__ */ jsx(PageLoadingSkeleton, {
+				rows,
+				showTitle,
+				showActions
+			});
+			case "tableloading": return /* @__PURE__ */ jsx(TableLoadingSkeleton, { rows });
+			case "componentsloading": return /* @__PURE__ */ jsx(ComponentsLoadingSkeleton, { rows });
+			default: return /* @__PURE__ */ jsx(ComponentsLoadingSkeleton, { rows });
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("tc-ui-skeleton w-full", className),
+		...props,
+		children: renderSkeleton()
+	});
+};
+Skeleton.displayName = "Skeleton";
+//#endregion
+export { Skeleton };

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

@@ -0,0 +1,2 @@
+export { Skeleton } from "./Skeleton";
+export type { SkeletonProps, SkeletonMode } from "./Skeleton";

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export type SwitchProps = {
     checked?: boolean;
     defaultChecked?: boolean;
@@ -8,4 +8,3 @@ export type SwitchProps = {
 };
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
 export { Switch };
-//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1,28 @@
+import { cn } from "../../lib/utils.js";
+import React, { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/react/ui/components/Switch/Switch.tsx
+var Switch = forwardRef(({ checked: controlledChecked, defaultChecked, onChange, disabled, className }, ref) => {
+	const [internalChecked, setInternalChecked] = React.useState(defaultChecked || false);
+	const isControlled = controlledChecked !== void 0;
+	const checked = isControlled ? controlledChecked : internalChecked;
+	const handleToggle = () => {
+		if (disabled) return;
+		const newChecked = !checked;
+		if (!isControlled) setInternalChecked(newChecked);
+		onChange?.(newChecked);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		role: "switch",
+		"aria-checked": checked,
+		disabled,
+		onClick: handleToggle,
+		className: cn("tc-ui-switch relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", disabled && "cursor-not-allowed opacity-50", !disabled && "cursor-pointer", checked ? "bg-[hsl(var(--ring))] dark:bg-[hsl(var(--ring))]" : "bg-muted dark:bg-muted", className),
+		children: /* @__PURE__ */ jsx("span", { className: cn("inline-block h-4 w-4 transform rounded-full bg-background transition-transform duration-200", checked ? "translate-x-6" : "translate-x-1") })
+	});
+});
+Switch.displayName = "Switch";
+//#endregion
+export { Switch };

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { ExportType } from "../../lib/export";
+import type { MOmit } from "../../types/index";
+import { type ReactNode } from "react";
+import { type DropdownItem } from "../Dropdown";
+import type { FormFieldSchema } from "../Form";
+import type { SearchProps } from "../Search/Search";
+export type TableSearchSchema<T> = MOmit<FormFieldSchema<T>, 'rules' | 'required'> & {
+    isPermanent?: boolean;
+};
+type TableSearchProps<T> = MOmit<SearchProps<T>, 'children' | 'schemas'> & {
+    onSearch?: (values: T) => void;
+    onReset?: () => void;
+    renderActionBtnArea?: () => ReactNode;
+    schemas: TableSearchSchema<T>[];
+    exportMenuItems?: DropdownItem[];
+    btnConfig?: Partial<{
+        export?: ReactNode;
+        collapse?: ReactNode;
+        expandIcon?: ReactNode;
+        expand?: ReactNode;
+        reset?: ReactNode;
+        search?: ReactNode;
+    }>;
+    expandBoundaries?: number;
+    onExport?: (exportType: ExportType, searchData: T) => void;
+    additionalButtons?: ReactNode;
+    defaultExpand?: boolean;
+};
+declare const TableSearch: <T extends object>(props: TableSearchProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TableSearch;

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