Initial version

2026-07-11 21:14:49 -05:00
commit e812fe8b72
8 changed files with 1226 additions and 0 deletions
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Checkbox Tree Demo</title>
+    <link rel="stylesheet" href="../src/checkbox-tree.css">
+    <style>
+      body { max-width: 40rem; margin: 2rem auto; padding: 0 1rem; font-family: system-ui, sans-serif; }
+      #selection { padding: 0.75rem; background: #f3f3f3; }
+    </style>
+  </head>
+  <body>
+    <h1>Checkbox Tree</h1>
+    <p>A representative sample of countries, U.S. states, and North Dakota counties.</p>
+    <div id="tree"></div>
+    <h2>Selected places</h2>
+    <pre id="selection">[]</pre>
+    <script type="module">
+      import { CheckboxTree } from "../src/checkbox-tree.js";
+
+      const output = document.querySelector("#selection");
+      const tree = new CheckboxTree(document.querySelector("#tree"), {
+        initiallySelected: true,
+        onSelectionChange({ selectedIds }) {
+          output.textContent = JSON.stringify(selectedIds, null, 2);
+        },
+      });
+
+      tree.setData([
+        { id: "country:argentina", label: "Argentina" },
+        { id: "country:australia", label: "Australia" },
+        { id: "country:brazil", label: "Brazil" },
+        { id: "country:canada", label: "Canada" },
+        { id: "country:france", label: "France" },
+        { id: "country:germany", label: "Germany" },
+        { id: "country:india", label: "India" },
+        { id: "country:japan", label: "Japan" },
+        { id: "country:mexico", label: "Mexico" },
+        { id: "country:united-kingdom", label: "United Kingdom" },
+        {
+          id: "country:usa",
+          label: "United States of America (USA)",
+          children: [
+            { id: "state:california", label: "California" },
+            { id: "state:florida", label: "Florida" },
+            { id: "state:illinois", label: "Illinois" },
+            { id: "state:minnesota", label: "Minnesota" },
+            { id: "state:montana", label: "Montana" },
+            {
+              id: "state:north-dakota",
+              label: "North Dakota",
+              children: [
+                { id: "county:adams-nd", label: "Adams County" },
+                { id: "county:barnes-nd", label: "Barnes County" },
+                { id: "county:burleigh-nd", label: "Burleigh County" },
+                { id: "county:cass-nd", label: "Cass County" },
+                { id: "county:grand-forks-nd", label: "Grand Forks County" },
+                { id: "county:mckenzie-nd", label: "McKenzie County" },
+                { id: "county:morton-nd", label: "Morton County" },
+                { id: "county:ramsey-nd", label: "Ramsey County" },
+                { id: "county:stark-nd", label: "Stark County" },
+                { id: "county:ward-nd", label: "Ward County" },
+              ],
+            },
+            { id: "state:new-york", label: "New York" },
+            { id: "state:south-dakota", label: "South Dakota" },
+            { id: "state:texas", label: "Texas" },
+            { id: "state:washington", label: "Washington" },
+          ],
+        },
+        { id: "country:south-africa", label: "South Africa" },
+      ]);
+      output.textContent = JSON.stringify(tree.getSelectedIds(), null, 2);
+    </script>
+  </body>
+</html>