@ramesesinc/platform-core 0.1.9 → 0.1.11

package/dist/components/input/Combo.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import UIComponent from "../common/UIComponent";
+import useUIInput from "../common/UIInput";
+const RADIUS_STYLES = {
+    none: "rounded-none",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    "3xl": "rounded-3xl",
+    full: "rounded-full",
+};
+const variantStyles = {
+    primary: "border bg-blue-500 text-blue-50",
+    secondary: "border bg-white text-gray-700",
+    danger: "border bg-red-600 text-white",
+    text: "border bg-transparent text-blue-600",
+    contained: "border bg-blue-500 text-blue-50",
+    outlined: "border border-1 bg-transparent text-black",
+};
+const Combo = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { name, immediate = true, items = [], data = {}, placeholder, variant = "outlined", radius = "md", className = "", } = props !== null && props !== void 0 ? props : {};
+    const { params } = data !== null && data !== void 0 ? data : {};
+    const { projection } = params !== null && params !== void 0 ? params : {};
+    const selectRef = useRef(null);
+    const pageContext = usePageContext();
+    const [listItems, setListItems] = useState(items);
+    const [rawItems, setRawItems] = useState([]);
+    const [selectValue, setSelectValue] = useState("");
+    // derive label/value keys from projection
+    const projectedKeys = Object.keys(projection !== null && projection !== void 0 ? projection : {});
+    const labelKey = (_b = (_a = data.labelKey) !== null && _a !== void 0 ? _a : projectedKeys[0]) !== null && _b !== void 0 ? _b : "label";
+    const valueKey = (_d = (_c = data.valueKey) !== null && _c !== void 0 ? _c : projectedKeys[0]) !== null && _d !== void 0 ? _d : "value";
+    const isSpecificField = (_e = props.name) === null || _e === void 0 ? void 0 : _e.includes(".");
+    const buildValue = (rawItem) => {
+        if (isSpecificField) {
+            return rawItem[valueKey];
+        }
+        else {
+            return Object.keys(projection !== null && projection !== void 0 ? projection : {}).reduce((acc, key) => {
+                acc[key] = rawItem[key];
+                return acc;
+            }, {});
+        }
+    };
+    const onRefresh = () => {
+        var _a;
+        const val = getValue();
+        if (val != null && typeof val === "object") {
+            setSelectValue(String((_a = val[valueKey]) !== null && _a !== void 0 ? _a : ""));
+        }
+        else {
+            setSelectValue(val !== null && val !== void 0 ? val : "");
+        }
+    };
+    const { getValue, setValue } = useUIInput(Object.assign(Object.assign({}, props), { onRefresh }));
+    const fetchItems = async () => {
+        var _a, _b, _c, _d;
+        if (data === null || data === void 0 ? void 0 : data.api) {
+            const res = await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.execService(data.api, (_a = data.params) !== null && _a !== void 0 ? _a : {}));
+            const raw = (_c = (_b = res === null || res === void 0 ? void 0 : res.data) !== null && _b !== void 0 ? _b : res) !== null && _c !== void 0 ? _c : [];
+            setRawItems(raw);
+            const mapped = raw
+                .map((item) => {
+                var _a, _b, _c;
+                return ({
+                    label: String((_a = item[labelKey]) !== null && _a !== void 0 ? _a : ""),
+                    value: String((_c = (_b = item[valueKey]) !== null && _b !== void 0 ? _b : item["_id"]) !== null && _c !== void 0 ? _c : ""),
+                });
+            })
+                .sort((a, b) => a.label.localeCompare(b.label));
+            setListItems(mapped);
+            // auto-select first item
+            if (mapped.length > 0) {
+                const currentVal = getValue();
+                if (currentVal != null && currentVal !== "" && currentVal !== undefined) {
+                    // value already set, just sync display
+                    if (typeof currentVal === "object") {
+                        setSelectValue(String((_d = currentVal[valueKey]) !== null && _d !== void 0 ? _d : ""));
+                    }
+                    else {
+                        setSelectValue(String(currentVal));
+                    }
+                }
+                else {
+                    // no value set, auto-select first
+                    const firstMapped = mapped[0];
+                    const firstItem = raw.find((item) => { var _a, _b; return String((_b = (_a = item[valueKey]) !== null && _a !== void 0 ? _a : item["_id"]) !== null && _b !== void 0 ? _b : "") === firstMapped.value; });
+                    if (firstItem) {
+                        setSelectValue(firstMapped.value);
+                        setValue(buildValue(firstItem));
+                    }
+                }
+            }
+            return;
+        }
+        setListItems([...items].sort((a, b) => a.label.localeCompare(b.label)));
+    };
+    useEffect(() => {
+        fetchItems();
+    }, []);
+    useEffect(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.api)) {
+            setListItems([...items].sort((a, b) => a.label.localeCompare(b.label)));
+        }
+    }, [items]);
+    const handleBlur = () => {
+        if (!immediate) {
+            setValue(selectValue);
+        }
+    };
+    const onChange = (e) => {
+        var _a, _b;
+        const text = (_a = e.target.value) !== null && _a !== void 0 ? _a : "";
+        setSelectValue(text);
+        if (immediate) {
+            const rawItem = rawItems.find((item) => { var _a, _b; return String((_b = (_a = item[valueKey]) !== null && _a !== void 0 ? _a : item["_id"]) !== null && _b !== void 0 ? _b : "") === text; });
+            if (rawItem) {
+                setValue(buildValue(rawItem));
+            }
+            else {
+                setValue(text);
+            }
+        }
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, text);
+    };
+    const baseStyles = "w-full appearance-none cursor-pointer pl-4 pr-10 py-[4px] text-md font-medium transition-all duration-150 ease-in-out bg-transparent";
+    const focusStyles = "focus:outline-none focus:ring-0 focus:shadow-none";
+    const roundingStyle = (_f = RADIUS_STYLES[radius]) !== null && _f !== void 0 ? _f : RADIUS_STYLES["md"];
+    const finalClassName = [baseStyles, focusStyles, roundingStyle].filter(Boolean).join(" ");
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("div", { className: `relative inline-flex items-center overflow-hidden ${roundingStyle} ${variantStyles[variant]} ${className}`, children: [_jsxs("select", { ref: selectRef, onChange: onChange, value: selectValue, onBlur: handleBlur, className: finalClassName, children: [_jsx("option", { value: "", children: placeholder !== null && placeholder !== void 0 ? placeholder : "Select..." }), listItems.map((item) => (_jsx("option", { value: item.value, children: item.label }, item.value)))] }), _jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none flex items-center", children: _jsx(ChevronDown, { size: 16 }) })] }) })));
+};
+export default Combo;

package/dist/components/input/DateField.js

@@ -29,7 +29,7 @@ const DateField = (props) => {
     const getCurrentDate = () => {
         if (inputValue && inputValue.match(/^\d{4}-\d{2}-\d{2}$/)) {
             // Parse ISO date string as local date to avoid timezone issues
-            const parts = inputValue.split('-');
+            const parts = inputValue.split("-");
             const year = parseInt(parts[0], 10);
             const month = parseInt(parts[1], 10) - 1; // Month is 0-indexed
             const day = parseInt(parts[2], 10);
@@ -46,7 +46,7 @@ const DateField = (props) => {
             setInputValue(text);
             // Update calendar date when user types a valid date
             if (text && text.match(/^\d{4}-\d{2}-\d{2}$/)) {
-                const parts = text.split('-');
+                const parts = text.split("-");
                 const year = parseInt(parts[0], 10);
                 const month = parseInt(parts[1], 10) - 1;
                 const day = parseInt(parts[2], 10);
@@ -103,27 +103,20 @@ const DateField = (props) => {
         if (!inputValue || !inputValue.match(/^\d{4}-\d{2}-\d{2}$/))
             return false;
         // Parse ISO date string as local date
-        const parts = inputValue.split('-');
+        const parts = inputValue.split("-");
         const selectedYear = parseInt(parts[0], 10);
         const selectedMonth = parseInt(parts[1], 10) - 1;
         const selectedDay = parseInt(parts[2], 10);
-        return (date.getDate() === selectedDay &&
-            date.getMonth() === selectedMonth &&
-            date.getFullYear() === selectedYear);
+        return date.getDate() === selectedDay && date.getMonth() === selectedMonth && date.getFullYear() === selectedYear;
     };
     const isToday = (date) => {
         const today = new globalThis.Date();
-        return (date.getDate() === today.getDate() &&
-            date.getMonth() === today.getMonth() &&
-            date.getFullYear() === today.getFullYear());
+        return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
     };
-    const monthNames = [
-        "January", "February", "March", "April", "May", "June",
-        "July", "August", "September", "October", "November", "December"
-    ];
+    const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
     const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
     const calendarDays = generateCalendarDays();
-    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex gap-1", children: [_jsx("input", { type: "date", ref: inputRef, onChange: onChange, value: inputValue, onFocus: handleFocus, onBlur: handleBlur, className: className, min: min, max: max }), _jsx("button", { type: "button", onClick: toggleCalendar, className: "border rounded px-3 py-1 bg-white hover:bg-gray-50", children: "\uD83D\uDCC5" })] }), showCalendar && (_jsxs("div", { ref: calendarRef, className: "absolute z-10 mt-1 bg-white border rounded shadow-lg p-4", style: { minWidth: "280px" }, children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("button", { type: "button", onClick: previousMonth, className: "px-2 py-1 hover:bg-gray-100 rounded", children: "\u25C0" }), _jsxs("div", { className: "font-semibold", children: [monthNames[calendarDate.getMonth()], " ", calendarDate.getFullYear()] }), _jsx("button", { type: "button", onClick: nextMonth, className: "px-2 py-1 hover:bg-gray-100 rounded", children: "\u25B6" })] }), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => (_jsx("div", { className: "text-center text-xs font-medium text-gray-600 py-1", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "flex gap-1", children: _jsx("input", { type: "date", ref: inputRef, onChange: onChange, value: inputValue, onFocus: handleFocus, onBlur: handleBlur, className: className, min: min, max: max }) }), showCalendar && (_jsxs("div", { ref: calendarRef, className: "absolute z-10 mt-1 bg-white border rounded shadow-lg p-4", style: { minWidth: "280px" }, children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("button", { type: "button", onClick: previousMonth, className: "px-2 py-1 hover:bg-gray-100 rounded", children: "\u25C0" }), _jsxs("div", { className: "font-semibold", children: [monthNames[calendarDate.getMonth()], " ", calendarDate.getFullYear()] }), _jsx("button", { type: "button", onClick: nextMonth, className: "px-2 py-1 hover:bg-gray-100 rounded", children: "\u25B6" })] }), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => (_jsx("div", { className: "text-center text-xs font-medium text-gray-600 py-1", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
                                 if (!date) {
                                     return _jsx("div", { className: "aspect-square" }, index);
                                 }

package/dist/components/input/Text.d.ts

@@ -1,7 +1,12 @@
 import { UIInputProps } from "../common/UIInput";
+export type TextCase = "upper" | "lower" | "capitalize" | "none";
+export declare const applyTextCase: (value: string, mode: TextCase) => string;
 type TextFieldProps = UIInputProps & {
     required?: boolean;
     immediate?: boolean;
+    align?: "left" | "center" | "right";
+    noSpace?: boolean;
+    placeholder?: string;
 };
 declare const TextField: (props: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default TextField;

package/dist/components/input/Text.js

@@ -2,20 +2,38 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import UIComponent from "../common/UIComponent";
 import useUIInput from "../common/UIInput";
+class TextCaseFormatter {
+    apply(value, mode) {
+        switch (mode) {
+            case "upper":
+                return value.toUpperCase();
+            case "lower":
+                return value.toLowerCase();
+            case "capitalize":
+                return value.replace(/\b\w/g, (char) => char.toUpperCase());
+            case "none":
+            default:
+                return value;
+        }
+    }
+}
+export const applyTextCase = (value, mode) => {
+    return new TextCaseFormatter().apply(value, mode);
+};
 const TextField = (props) => {
-    const { name, immediate = true } = props !== null && props !== void 0 ? props : {};
-    const [focused, setFocused] = useState(false);
+    var _a, _b;
+    const { immediate = true, align = "left", noSpace = false, required = false, placeholder } = props !== null && props !== void 0 ? props : {};
+    // const [focused, setFocused] = useState(false);
     const inputRef = useRef(null);
     const valueRef = useRef("");
-    const className = "border rounded px-2 py-1 w-full";
     const handleFocus = () => {
-        setFocused(true);
+        // setFocused(true);
     };
     const handleBlur = () => {
         if (!immediate) {
             setValue(inputValue);
         }
-        setFocused(false);
+        // setFocused(false);
     };
     const onRefresh = () => {
         setInputValue(getValue());
@@ -25,7 +43,10 @@ const TextField = (props) => {
     const [inputValue, setInputValue] = useState(valueRef.current);
     const onChange = (e) => {
         var _a;
-        const text = (_a = e.target.value) !== null && _a !== void 0 ? _a : "";
+        let text = (_a = e.target.value) !== null && _a !== void 0 ? _a : "";
+        if (noSpace) {
+            text = text.replace(/\s+/g, "");
+        }
         if (text !== inputValue) {
             valueRef.current = text;
             setInputValue(valueRef.current);
@@ -34,6 +55,20 @@ const TextField = (props) => {
             setValue(text);
         }
     };
-    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsx("input", { type: "text", ref: inputRef, onChange: onChange, value: inputValue, onFocus: handleFocus, onBlur: handleBlur, className: className }) })));
+    const handleKeyDown = (e) => {
+        if (noSpace && e.key === " ") {
+            e.preventDefault();
+        }
+    };
+    const alignClass = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    }[align];
+    const inReadMode = (_b = (_a = binding === null || binding === void 0 ? void 0 : binding.isReadMode) === null || _a === void 0 ? void 0 : _a.call(binding)) !== null && _b !== void 0 ? _b : false;
+    const defaultStyleClass = "text-sm px-2 py-2 border rounded-md shadow-sm transition-colors duration-150 ease-in-out w-full";
+    const focusStyleClass = `focus:outline-none ${inReadMode ? "bg-gray-50" : "focus:bg-yellow-50"} focus:ring-1 focus:ring-blue-400`;
+    const borderClass = "border-gray-300";
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsx("input", { type: "text", ref: inputRef, onChange: onChange, onKeyDown: handleKeyDown, value: inputValue, onFocus: handleFocus, onBlur: handleBlur, required: required, disabled: inReadMode, placeholder: inReadMode ? "" : placeholder, className: `${defaultStyleClass} ${focusStyleClass} ${alignClass} ${borderClass}` }) })));
 };
 export default TextField;

package/dist/components/input/YearPicker.js

@@ -18,9 +18,10 @@ const YearPicker = (props) => {
     valueRef.current = initialValue !== null && initialValue !== void 0 ? initialValue : "";
     const [inputValue, setInputValue] = useState(valueRef.current);
     const handleChange = (e) => {
-        const year = e.target.value;
+        const raw = e.target.value;
+        const year = raw !== "" ? parseInt(raw, 10) : "";
         if (year !== inputValue) {
-            valueRef.current = year;
+            valueRef.current = String(year);
             setInputValue(valueRef.current);
         }
         if (immediate) {

package/dist/components/list/EditableMenu.d.ts

@@ -0,0 +1,2 @@
+declare const EditableMenu: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default EditableMenu;

package/dist/components/list/EditableMenu.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Eye } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { DataBindingProvider } from "../../core/DataContext";
+import DynamicIcon from "../../core/DynamicIcon";
+import { usePageContext } from "../../core/PageContext";
+import { usePageViewContext } from "../../core/PageViewContext";
+import useDependHandler from "../../core/UIDependHandler";
+import { replaceValues } from "../../lib/utils/BeanUtils";
+import ViewPage from "../action/ViewPage";
+import useUIMenu from "../common/UIMenu";
+const EditableMenu = (props) => {
+    const { name, depends, title, menugroup, items: itemsProp, data, addPage, viewPage } = props !== null && props !== void 0 ? props : {};
+    const [activeItem, setActiveItem] = useState(null);
+    const [resolvedData, setResolvedData] = useState(data);
+    const [sortedItems, setSortedItems] = useState([]);
+    const pageContext = usePageContext();
+    const pageView = usePageViewContext();
+    const uuid = Math.random().toString(36).slice(2);
+    const dragHandler = useDragHandler({
+        items: sortedItems,
+        onSort: setSortedItems,
+        onDrop: async (draggedItem, updatedItems) => {
+            const reordered = updatedItems.map((item, idx) => ({
+                id: item.id,
+                sortorder: idx + 1, // ← 1-based sortorder
+            }));
+            console.log("resolvedData", JSON.stringify(resolvedData, null, 2));
+            console.log("reordered", JSON.stringify(reordered, null, 2));
+            // const status = await pageContext?.postMgmt("menus", "reorder", {
+            //   type: resolvedData?.params?.type,
+            //   groupid: resolvedData?.params?.groupid,
+            //   items: reordered,
+            // });
+            // console.log("status", status);
+        },
+    });
+    const { items } = useUIMenu({ menugroup, items: itemsProp, data: resolvedData });
+    const handleItemClick = (item) => {
+        // console.log("Item clicked:", item);
+        pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(name, item);
+        setActiveItem(item);
+    };
+    const handleAdd = () => {
+        console.log("Add clicked", addPage);
+        const { url, mode } = addPage !== null && addPage !== void 0 ? addPage : {};
+        const idx = ["window", "popup"].indexOf(String(mode).toLowerCase());
+        console.log(idx);
+        if (idx >= 0) {
+            // pageView.setPage(url, { mode });
+        }
+        else {
+            // pageView.setSelectedPage(url);
+            pageContext.set(name, url);
+        }
+    };
+    const handleView = (item) => {
+        const { url, mode } = viewPage !== null && viewPage !== void 0 ? viewPage : {};
+        console.log("View clicked", url, mode, item);
+    };
+    const handleDelete = (item) => console.log("Delete clicked", item);
+    useEffect(() => {
+        if (items.length === 0)
+            return;
+        const firstItem = items[0];
+        setActiveItem(firstItem);
+        setSortedItems(items);
+        pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(name, items[0]);
+    }, [items]);
+    const resolveData = () => {
+        var _a;
+        if (!(data === null || data === void 0 ? void 0 : data.params))
+            return data;
+        const dependsValue = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.get(depends)) !== null && _a !== void 0 ? _a : {};
+        const resolvedParams = replaceValues(data.params, dependsValue);
+        return Object.assign(Object.assign({}, data), { params: resolvedParams });
+    };
+    const onRefresh = () => {
+        // when depends changes → re-resolve params
+        setResolvedData(resolveData());
+        // setActiveItem(null); // reset active item
+    };
+    useDependHandler({ name: depends, onRefresh });
+    return (_jsxs("div", { className: "p-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-lg font-semibold", children: title }), _jsx(ViewPage, { url: addPage === null || addPage === void 0 ? void 0 : addPage.url, mode: addPage === null || addPage === void 0 ? void 0 : addPage.mode, iconOnly: true, icon: _jsx(DynamicIcon, { icon: "Plus", size: 18 }), title: title })] }), _jsx("div", { className: "border-b border-gray-200 my-2" }), _jsx("div", { className: "flex flex-col gap-2", children: sortedItems.map((item, index) => {
+                    var _a;
+                    const isActive = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id) === item.id; // ← use activeItem
+                    return (_jsx(DataBindingProvider, { data: { data: item }, children: _jsxs("div", { draggable: true, onDragStart: () => dragHandler.handleDragStart(index), onDragOver: (e) => dragHandler.handleDragOver(e, index), onDrop: dragHandler.handleDrop, onDragEnd: dragHandler.handleDragEnd, className: `flex items-center justify-between border-b p-2 cursor-pointer transition-colors
+                ${isActive ? "bg-gray-200" : "bg-gray-50 border-gray-200 hover:bg-gray-200"}`, onClick: () => handleItemClick(item), children: [_jsx("span", { className: "text-gray-400 cursor-grab mr-2", children: _jsx(DynamicIcon, { icon: "GripVertical", size: 16 }) }), _jsx("span", { className: `text-base flex-1 ${isActive ? "font-medium" : ""}`, children: item.title }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ViewPage, { url: viewPage === null || viewPage === void 0 ? void 0 : viewPage.url, mode: viewPage === null || viewPage === void 0 ? void 0 : viewPage.mode, popupClassName: viewPage === null || viewPage === void 0 ? void 0 : viewPage.popupClassName, iconOnly: true, icon: _jsx(Eye, { size: 16, color: "blue" }) }), renderButton((_a = item.deleteIcon) !== null && _a !== void 0 ? _a : "Trash", () => handleDelete(item), "text-red-500")] })] }) }, `${uuid}-${index}`));
+                }) })] }));
+};
+export default EditableMenu;
+/* ------------------------------------------------------------------ */
+/* Render Button */
+/* ------------------------------------------------------------------ */
+const renderButton = (icon, onClick, color = "text-gray-500") => (_jsx("span", { className: `${color} cursor-pointer hover:opacity-70 transition-opacity`, onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+    }, children: _jsx(DynamicIcon, { icon: icon, size: 18 }) }));
+const useDragHandler = ({ items, onSort, onDrop }) => {
+    const dragIndexRef = useRef(null);
+    const dragOverIndexRef = useRef(null);
+    const handleDragStart = (index) => {
+        dragIndexRef.current = index;
+    };
+    const handleDragOver = (e, index) => {
+        e.preventDefault();
+        dragOverIndexRef.current = index;
+    };
+    const handleDrop = () => {
+        const from = dragIndexRef.current;
+        const to = dragOverIndexRef.current;
+        if (from == null || to == null || from === to)
+            return;
+        const draggedItem = items[from];
+        const updated = [...items];
+        const [moved] = updated.splice(from, 1);
+        updated.splice(to, 0, moved);
+        onSort(updated);
+        onDrop === null || onDrop === void 0 ? void 0 : onDrop(draggedItem, updated);
+        dragIndexRef.current = null;
+        dragOverIndexRef.current = null;
+    };
+    const handleDragEnd = () => {
+        dragIndexRef.current = null;
+        dragOverIndexRef.current = null;
+    };
+    return { handleDragStart, handleDragOver, handleDrop, handleDragEnd };
+};

package/dist/components/list/TabMenu.js

@@ -4,8 +4,8 @@ import { useEffect, useState } from "react";
 import { usePageContext } from "../../core/PageContext";
 import { usePageViewContext } from "../../core/PageViewContext";
 import useDependHandler from "../../core/UIDependHandler";
-import HPanel from "../../layouts/HPanel";
-import VPanel from "../../layouts/VPanel";
+import { HPanel } from "../../layouts/HPanel";
+import { VPanel } from "../../layouts/VPanel";
 const TabMenu = (props) => {
     var _a;
     const { name, depends, items = [], data, menugroup, orientation = "horizontal" } = props !== null && props !== void 0 ? props : {};

package/dist/components/list/TreeMenu.js

@@ -13,9 +13,26 @@ const buildItems = (raw) => {
     const mapped = [];
     for (const entry of raw) {
         if (Array.isArray(entry.items)) {
-            mapped.push(Object.assign(Object.assign({}, entry), { isDropdown: (_a = entry.isDropdown) !== null && _a !== void 0 ? _a : true, items: buildItems(entry.items) }));
+            const visibleItems = entry.items.filter((it) => !it.hidden);
+            // category hidden + multiple items → skip entirely
+            if (entry.hidden && visibleItems.length !== 1)
+                continue;
+            // category hidden + only one visible item → show item flat without category header
+            if (entry.hidden && visibleItems.length === 1) {
+                const lastGroup = mapped[mapped.length - 1];
+                if (lastGroup && lastGroup.title === "" && !lastGroup.isDropdown) {
+                    lastGroup.items.push(visibleItems[0]);
+                }
+                else {
+                    mapped.push({ title: "", icon: undefined, isDropdown: false, items: [visibleItems[0]] });
+                }
+                continue;
+            }
+            mapped.push(Object.assign(Object.assign({}, entry), { isDropdown: (_a = entry.isDropdown) !== null && _a !== void 0 ? _a : true, items: buildItems(visibleItems) }));
         }
         else {
+            if (entry.hidden)
+                continue;
             const lastGroup = mapped[mapped.length - 1];
             if (lastGroup && lastGroup.title === "" && !lastGroup.isDropdown) {
                 lastGroup.items.push(entry);
@@ -84,6 +101,7 @@ const TreeMenu = (props) => {
     const [openGroups, setOpenGroups] = useState([]);
     const [activeItem, setActiveItem] = useState({});
     const [items, setItems] = useState([]);
+    const [hashPage, setHashPage] = useState(null);
     const initializedRef = useRef(false);
     const { items: rawItems } = useUIMenu({
         items: itemsProp,
@@ -95,7 +113,9 @@ const TreeMenu = (props) => {
         const { path = "" } = (_a = pageView.getOriginalLocationInfo()) !== null && _a !== void 0 ? _a : {};
         const [, ...anchors] = path.split("#");
         const [selectedPath] = anchors;
-        pageContext.set(contextKey, selectedPath);
+        if (selectedPath) {
+            pageContext.set(contextKey, selectedPath);
+        }
     }, []);
     /* ---------------------- Sync active item from page view ---------------------- */
     useLayoutEffect(() => {
@@ -115,23 +135,27 @@ const TreeMenu = (props) => {
     }, [rawItems]);
     /* ---------------------- Auto-select first item on init ---------------------- */
     useEffect(() => {
+        var _a;
         if (initializedRef.current || items.length === 0)
             return;
         const firstItem = findFirstItem(items);
         if (!(firstItem === null || firstItem === void 0 ? void 0 : firstItem.page))
             return;
         let selectedPage = pageContext.get(contextKey);
-        // console.log("treemenu selected page from context", contextKey, selectedPage);
-        if (selectedPage == null && contextKey === "selectedPage") {
-            selectedPage = pageView.getSelectedPage();
-            // console.log("treemenu selected page fallback from context", contextKey, selectedPage);
+        if (selectedPage == null) {
+            // fallback to window.location.hash
+            const hash = (_a = window.location.hash) !== null && _a !== void 0 ? _a : "";
+            const [, firstAnchor] = hash.split("#");
+            if (firstAnchor) {
+                selectedPage = firstAnchor; // strip query params
+                setHashPage(selectedPage);
+            }
         }
-        // console.log("treemenu selected page final", contextKey, selectedPage);
         if (selectedPage != null) {
             const selectedItem = findItemByPage(items, selectedPage);
-            // console.log("treemenu findItemByPage", selectedPage, selectedItem);
             if (selectedItem) {
-                setOpenGroups(findGroupPath(items, selectedPage));
+                const groupPath = findGroupPath(items, selectedPage);
+                setOpenGroups(groupPath);
                 setActiveItem(selectedItem);
             }
             else {
@@ -144,7 +168,7 @@ const TreeMenu = (props) => {
             setActiveItem(firstItem);
         }
         initializedRef.current = true;
-    }, [items, contextKey]);
+    }, [items, contextKey, hashPage]);
     /* ---------------------- Sync page context on active item change ---------------------- */
     useEffect(() => {
         const { mode, page } = (activeItem !== null && activeItem !== void 0 ? activeItem : {});
@@ -155,7 +179,6 @@ const TreeMenu = (props) => {
             pageView.setPage(page, { mode });
         }
         else {
-            pageView.setSelectedPage(page);
             pageContext.set(contextKey, page);
         }
     }, [activeItem]);
@@ -182,8 +205,7 @@ const TreeMenu = (props) => {
     };
     /* ---------------------- Events ---------------------- */
     const handleSubItemClick = (item) => {
-        if (!item.page || item.page === activeItem.page)
-            return;
+        // if (!item.page || item.page === activeItem.page) return;
         setActiveItem(item);
     };
     /* ---------------------- Recursive render ---------------------- */

package/dist/components/table/DataList.d.ts

@@ -50,7 +50,7 @@ export interface DataListAttr {
     searchDebounce?: number;
     onSearchChange?: (text: string) => void;
     filters?: FilterDefinition[] | FilterDefinition[][];
-    showFilterPanel?: boolean;
+    filterPage?: Record<string, any>;
     onFilterChange?: (filters: Record<string, any>) => void;
     sortable?: boolean;
     defaultSort?: {