Update examples

Author: bendera

packages/demo/src/main.tsx

@@ -12,6 +12,7 @@ import SplitLayoutPage from "./routes/SplitLayout.tsx";
 import TablePage from "./routes/TablePage.tsx";
 import TextareaPage from "./routes/Textarea.tsx";
 import TextfieldPage from "./routes/Textfield.tsx";
+import TreePage from "./routes/Tree.tsx";
 
 if (import.meta.env.DEV) {
   await import("@vscode-elements/webview-playground");
@@ -58,6 +59,10 @@ const router = createBrowserRouter([
         path: "/textfield",
         element: <TextfieldPage />,
       },
+      {
+        path: "/tree",
+        element: <TreePage />,
+      },
     ],
   },
 ]);

packages/demo/src/routes/Root.tsx

@@ -34,6 +34,9 @@ export default function Root() {
           <li>
             <a href="/textfield">Textfield</a>
           </li>
+          <li>
+            <a href="/tree">Tree</a>
+          </li>
         </ul>
       </aside>
       <main>

packages/demo/src/routes/Tree.tsx

@@ -0,0 +1,57 @@
+import { VscodeTree, VscodeTreeItem } from "@vscode-elements/react-elements";
+
+function logEvents(ev: unknown) {
+  console.log(ev);
+}
+
+export default function TextfieldPage() {
+  return (
+    <div>
+      <h1>Tree</h1>
+      <VscodeTree id="tree-basic-example" onVscTreeSelect={logEvents}>
+        <VscodeTreeItem>
+          Fruits
+          <VscodeTreeItem>
+            Citrus Fruits
+            <VscodeTreeItem>Orange</VscodeTreeItem>
+            <VscodeTreeItem>Lemon</VscodeTreeItem>
+            <VscodeTreeItem>Grapefruit</VscodeTreeItem>
+          </VscodeTreeItem>
+          <VscodeTreeItem>
+            Berries
+            <VscodeTreeItem>Strawberry</VscodeTreeItem>
+            <VscodeTreeItem>Blueberry</VscodeTreeItem>
+            <VscodeTreeItem>Raspberry</VscodeTreeItem>
+          </VscodeTreeItem>
+          <VscodeTreeItem>
+            Tropical Fruits
+            <VscodeTreeItem>Mango</VscodeTreeItem>
+            <VscodeTreeItem>Pineapple</VscodeTreeItem>
+            <VscodeTreeItem>Papaya</VscodeTreeItem>
+          </VscodeTreeItem>
+        </VscodeTreeItem>
+        <VscodeTreeItem>
+          Vegetables
+          <VscodeTreeItem>
+            Leafy Greens
+            <VscodeTreeItem>Spinach</VscodeTreeItem>
+            <VscodeTreeItem>Lettuce</VscodeTreeItem>
+            <VscodeTreeItem>Kale</VscodeTreeItem>
+          </VscodeTreeItem>
+          <VscodeTreeItem>
+            Root Vegetables
+            <VscodeTreeItem>Carrot</VscodeTreeItem>
+            <VscodeTreeItem>Beetroot</VscodeTreeItem>
+            <VscodeTreeItem>Radish</VscodeTreeItem>
+          </VscodeTreeItem>
+          <VscodeTreeItem>
+            Nightshades
+            <VscodeTreeItem>Tomato</VscodeTreeItem>
+            <VscodeTreeItem>Eggplant</VscodeTreeItem>
+            <VscodeTreeItem>Bell Pepper</VscodeTreeItem>
+          </VscodeTreeItem>
+        </VscodeTreeItem>
+      </VscodeTree>
+    </div>
+  );
+}

packages/lib/src/components/VscodeTree.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { createComponent, type EventName } from "@lit/react";
 import {
-  type VscTreeActionEvent,
   type VscTreeSelectEvent,
   VscodeTree as WC,
 } from "@vscode-elements/elements/dist/vscode-tree/vscode-tree.js";
@@ -12,7 +11,6 @@ const VscodeTree = createComponent({
   react: React,
   displayName: "VscodeTree",
   events: {
-    onVscTreeAction: "vsc-tree-action" as EventName<VscTreeActionEvent>,
     onVscTreeSelect: "vsc-tree-select" as EventName<VscTreeSelectEvent>,
   },
 });

packages/lib/src/components/VscodeTreeItem.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { VscodeTreeItem as WC } from "@vscode-elements/elements/dist/vscode-tree-item/vscode-tree-item.js";
+
+const VscodeTree = createComponent({
+  tagName: "vscode-tree-item",
+  elementClass: WC,
+  react: React,
+  displayName: "VscodeTreeItem",
+});
+
+export default VscodeTree;

packages/lib/src/main.ts

@@ -31,6 +31,7 @@ import VscodeTabs from "./components/VscodeTabs.js";
 import VscodeTextarea from "./components/VscodeTextarea.js";
 import VscodeTextfield from "./components/VscodeTextfield.js";
 import VscodeTree from "./components/VscodeTree.js";
+import VscodeTreeItem from "./components/VscodeTreeItem.js";
 
 export {
   VscodeBadge,
@@ -66,4 +67,5 @@ export {
   VscodeTextarea,
   VscodeTextfield,
   VscodeTree,
+  VscodeTreeItem,
 };