@deepnoid/ui 0.1.25 → 0.1.27

package/dist/components/tree/tree.js

@@ -102,6 +102,7 @@ var require_plugin = __commonJS({
 // src/components/tree/tree.tsx
 var tree_exports = {};
 __export(tree_exports, {
+  Tree: () => Tree,
   default: () => tree_default
 });
 module.exports = __toCommonJS(tree_exports);
@@ -4336,74 +4337,152 @@ function toVal(mix) {
 
 // src/components/tree/tree.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var TreeNodeItem = (0, import_react.forwardRef)(({ node, depth, fileIcon, isLoading, classNames }) => {
-  var _a;
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  const slots = (0, import_react.useMemo)(() => treeStyle(), []);
-  const toggleOpen = (0, import_react.useCallback)(() => {
-    setIsOpen((prev) => !prev);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      className: clsx(
-        depth > 1 ? "ml-[30px]" : "",
-        "transition-all duration-150 ease-out",
-        isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), onClick: toggleOpen, children: [
-          node.children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            Icon_default,
+var TreeNodeItem = (0, import_react.forwardRef)(
+  ({ node, depth, fileIcon, isLoading, classNames, onExpand }, ref) => {
+    const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+    const [children, setChildren] = (0, import_react.useState)(node.children);
+    const [isLoadingChildren, setIsLoadingChildren] = (0, import_react.useState)(false);
+    const slots = (0, import_react.useMemo)(() => treeStyle(), []);
+    const hasMore = (0, import_react.useMemo)(() => {
+      if (node.isLeaf) return false;
+      if (Array.isArray(children)) return children.length > 0;
+      return typeof onExpand === "function";
+    }, [node.isLeaf, children, onExpand]);
+    const toggleOpen = (0, import_react.useCallback)(async () => {
+      if (!isOpen && !children && onExpand && !node.isLeaf) {
+        setIsLoadingChildren(true);
+        try {
+          const result = await onExpand(node);
+          setChildren(result);
+        } catch (e) {
+          console.error("Failed to load child nodes ", e);
+        } finally {
+          setIsLoadingChildren(false);
+        }
+      }
+      setIsOpen((prev) => !prev);
+    }, [isOpen, children, onExpand, node]);
+    const handleClick = () => {
+      var _a;
+      toggleOpen();
+      (_a = node.onClick) == null ? void 0 : _a.call(node);
+    };
+    const handleRightClick = (e) => {
+      var _a;
+      e.preventDefault();
+      (_a = node.onRightClick) == null ? void 0 : _a.call(node, e);
+    };
+    const marginClass = depth > 1 ? hasMore ? "ml-[30px]" : "ml-[55px]" : hasMore ? "" : "ml-[25px]";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ref,
+        className: clsx(
+          marginClass,
+          "transition-all duration-150 ease-out",
+          isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
             {
-              name: "right-chevron",
-              className: `text-neutral-main cursor-pointer transition-transform duration-150 ${isOpen ? "rotate-90" : "rotate-0"}`
+              className: slots.group({ class: classNames == null ? void 0 : classNames.group }),
+              onClick: handleClick,
+              onContextMenu: handleRightClick,
+              children: [
+                hasMore && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  Icon_default,
+                  {
+                    name: "right-chevron",
+                    className: clsx(
+                      "text-neutral-main cursor-pointer transition-transform duration-150",
+                      isOpen ? "rotate-90" : "rotate-0"
+                    )
+                  }
+                ),
+                fileIcon,
+                node.label
+              ]
             }
           ),
-          fileIcon,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), onClick: () => {
-            var _a2;
-            return (_a2 = node.onClick) == null ? void 0 : _a2.call(node);
-          }, children: node.label })
-        ] }),
-        isOpen && ((_a = node.children) == null ? void 0 : _a.map((child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TreeNodeItem, { node: child, depth: depth + 1, classNames, fileIcon }, child.id)))
-      ]
-    }
-  );
-});
-var Tree = (0, import_react.forwardRef)(
-  ({ headerContent, group, groupIcon, fileIcon, isLoading, classNames }) => {
-    const { label, data, onClick } = group;
-    const slots = (0, import_react.useMemo)(() => treeStyle(), []);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-      headerContent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: headerContent }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-          groupIcon,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), onClick, children: label })
-        ] }),
-        data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          TreeNodeItem,
-          {
-            node,
-            depth: 1,
-            classNames,
-            fileIcon,
-            isLoading
-          },
-          node.id
-        ))
-      ] })
-    ] });
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+            isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
+            children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              TreeNodeItem,
+              {
+                node: child,
+                depth: depth + 1,
+                classNames,
+                fileIcon,
+                onExpand
+              },
+              child.id
+            ))
+          ] })
+        ]
+      }
+    );
   }
 );
 TreeNodeItem.displayName = "TreeNodeItem";
+var Tree = ({
+  headerContent,
+  group,
+  groupIcon,
+  fileIcon,
+  isLoading = false,
+  classNames,
+  onExpand
+}) => {
+  const slots = (0, import_react.useMemo)(() => treeStyle(), []);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(true);
+  const handleToggle = () => {
+    var _a;
+    setIsOpen((prev) => !prev);
+    (_a = group.onClick) == null ? void 0 : _a.call(group);
+  };
+  const handleRightClick = (e) => {
+    var _a;
+    e.preventDefault();
+    (_a = group.onRightClick) == null ? void 0 : _a.call(group, e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    headerContent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: headerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: slots.group({ class: classNames == null ? void 0 : classNames.group }),
+          onClick: handleToggle,
+          onContextMenu: handleRightClick,
+          children: [
+            groupIcon,
+            group.label
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        TreeNodeItem,
+        {
+          node,
+          depth: 1,
+          classNames,
+          fileIcon,
+          isLoading,
+          onExpand
+        },
+        node.id
+      )) })
+    ] })
+  ] });
+};
 Tree.displayName = "Tree";
 var tree_default = Tree;
 var treeStyle = tv({
   slots: {
     base: ["border", "border-neutral-light", "rounded-xl", "p-[20px]", "flex", "flex-col", "gap-[20px]", "select-none"],
-    wrapper: [
+    wrapper: ["flex", "flex-col", "gap-[5px]"],
+    group: [
       "flex",
       "items-center",
       "gap-[5px]",
@@ -4412,8 +4491,12 @@ var treeStyle = tv({
       "text-body-foreground",
       "hover:bg-neutral-soft",
       "p-[5px]",
-      "rounded-[5px]"
-    ],
-    label: ["cursor-pointer"]
+      "rounded-[5px]",
+      "cursor-pointer"
+    ]
   }
 });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tree
+});

package/dist/components/tree/tree.mjs

@@ -1,7 +1,8 @@
 "use client";
 import {
+  Tree,
   tree_default
-} from "../../chunk-K4QY2F5J.mjs";
+} from "../../chunk-PX4PFLJ3.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-HWL7TPUN.mjs";
 import "../../chunk-3IU2RPSM.mjs";
@@ -9,5 +10,6 @@ import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
+  Tree,
   tree_default as default
 };

package/dist/index.d.mts

@@ -9,7 +9,7 @@ export { default as Input } from './components/input/input.mjs';
 export { default as Tabs, TabsDataType } from './components/tabs/tabs.mjs';
 export { default as Textarea } from './components/textarea/textarea.mjs';
 export { default as Table, TableColumn, TableRow } from './components/table/table.mjs';
-export { default as FormTable } from './components/table/form-table.mjs';
+export { default as DefinitionTable } from './components/table/definition-table.mjs';
 export { default as Select } from './components/select/select.mjs';
 export { default as CheckBox } from './components/checkbox/checkbox.mjs';
 export { default as Chip } from './components/chip/chip.mjs';

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { default as Input } from './components/input/input.js';
 export { default as Tabs, TabsDataType } from './components/tabs/tabs.js';
 export { default as Textarea } from './components/textarea/textarea.js';
 export { default as Table, TableColumn, TableRow } from './components/table/table.js';
-export { default as FormTable } from './components/table/form-table.js';
+export { default as DefinitionTable } from './components/table/definition-table.js';
 export { default as Select } from './components/select/select.js';
 export { default as CheckBox } from './components/checkbox/checkbox.js';
 export { default as Chip } from './components/chip/chip.js';