feat: add kotlin views for tree

src/main/kotlin/com/webforj/samples/views/tree/TreeIconsKotlinView.kt

@@ -0,0 +1,101 @@
+package com.webforj.samples.views.tree
+
+import com.webforj.component.Composite
+import com.webforj.component.icons.FeatherIcon
+import com.webforj.component.layout.flexlayout.FlexDirection
+import com.webforj.component.layout.flexlayout.FlexLayout
+import com.webforj.kotlin.dsl.component.tree.tree
+import com.webforj.kotlin.dsl.component.tree.treeNode
+import com.webforj.kotlin.extension.set
+import com.webforj.kotlin.extension.styles
+import com.webforj.kotlin.extension.vh
+import com.webforj.router.annotation.FrameTitle
+import com.webforj.router.annotation.Route
+
+@Route
+@FrameTitle("Tree Icons View")
+class TreeIconsKotlinView: Composite<FlexLayout>() {
+  private val self = boundComponent
+
+  init {
+    self.apply {
+      direction = FlexDirection.COLUMN
+      height = 100.vh
+      styles["overflow"] = "auto"
+      tree {
+        styles["margin"] = "var(--dwc-space-l)"
+        setCollapsedIcon(FeatherIcon.CHEVRON_RIGHT.create())
+        setExpandedIcon(FeatherIcon.CHEVRON_DOWN.create())
+        treeNode("Documents") {
+          tooltipText = "Work and personal documents"
+          treeNode("Reports") {
+            tooltipText = "Monthly and annual reports"
+            treeNode("2023") {
+              treeNode("January.pdf") {
+                tooltipText = "January report"
+                setIcon(FeatherIcon.FILE.create())
+                setSelectedIcon(FeatherIcon.FILE_TEXT.create())
+              }
+              treeNode("February.pdf") {
+                tooltipText = "February report"
+                setIcon(FeatherIcon.FILE.create())
+                setSelectedIcon(FeatherIcon.FILE_TEXT.create())
+              }
+            }
+            treeNode("2022") {
+              treeNode("Q4.pdf") {
+                tooltipText = "Quarter 4 report"
+                setIcon(FeatherIcon.FILE.create())
+                setSelectedIcon(FeatherIcon.FILE_TEXT.create())
+              }
+              treeNode("Q3.pdf") {
+                tooltipText = "Quarter 3 report"
+                setIcon(FeatherIcon.FILE.create())
+                setSelectedIcon(FeatherIcon.FILE_TEXT.create())
+              }
+            }
+          }
+          treeNode("Invoices") {
+            tooltipText = "Invoices and billing"
+            treeNode("ClientA.pdf") {
+              tooltipText = "Invoice for Client A"
+              setIcon(FeatherIcon.FILE.create())
+              setSelectedIcon(FeatherIcon.FILE_TEXT.create())
+            }
+            treeNode("ClientB.pdf") {
+              tooltipText = "Invoice for Client B"
+              setIcon(FeatherIcon.FILE.create())
+              setSelectedIcon(FeatherIcon.FILE_TEXT.create())
+            }
+          }
+        }
+        treeNode("Pictures") {
+          tooltipText = "Photos and images"
+          treeNode("Vacations") {
+            treeNode("Beach.png") {
+              tooltipText = "Beach photo"
+              setIcon(FeatherIcon.IMAGE.create())
+              setSelectedIcon(FeatherIcon.IMAGE.create())
+            }
+            treeNode("Mountains.png") {
+              tooltipText = "Mountain photo"
+              setIcon(FeatherIcon.IMAGE.create())
+              setSelectedIcon(FeatherIcon.IMAGE.create())
+            }
+          }
+          treeNode("Events") {
+            treeNode("Birthday.jpg") {
+              tooltipText = "Birthday party"
+              setIcon(FeatherIcon.IMAGE.create())
+              setSelectedIcon(FeatherIcon.IMAGE.create())
+            }
+          }
+        }
+        expand("Documents")
+        expand("Pictures")
+        expand("Vacations")
+        selectKey("Mountains.png")
+      }
+    }
+  }
+}

src/main/kotlin/com/webforj/samples/views/tree/TreeKotlinView.kt

@@ -0,0 +1,81 @@
+package com.webforj.samples.views.tree
+
+import com.webforj.component.Composite
+import com.webforj.component.layout.flexlayout.FlexDirection
+import com.webforj.component.layout.flexlayout.FlexLayout
+import com.webforj.kotlin.dsl.component.tree.tree
+import com.webforj.kotlin.dsl.component.tree.treeNode
+import com.webforj.kotlin.extension.set
+import com.webforj.kotlin.extension.size
+import com.webforj.kotlin.extension.styles
+import com.webforj.kotlin.extension.vh
+import com.webforj.router.annotation.FrameTitle
+import com.webforj.router.annotation.Route
+
+@Route
+@FrameTitle("Tree View")
+class TreeKotlinView: Composite<FlexLayout>() {
+  private val self = boundComponent
+
+  init {
+    self.apply {
+      direction = FlexDirection.COLUMN
+      size = "min-content" to 100.vh
+      styles["overflow"] = "auto"
+      tree {
+        styles["margin"] = "var(--dwc-space-l)"
+        treeNode("Documents") {
+          tooltipText = "Work and personal documents"
+          treeNode("Reports") {
+            tooltipText = "Monthly and annual reports"
+            treeNode("2023") {
+              treeNode("January.pdf") {
+                tooltipText = "January report"
+              }
+              treeNode("February.pdf") {
+                tooltipText = "February report"
+              }
+            }
+            treeNode("2022") {
+              treeNode("Q4.pdf") {
+                tooltipText = "Quarter 4 report"
+              }
+              treeNode("Q3.pdf") {
+                tooltipText = "Quarter 3 report"
+              }
+            }
+          }
+          treeNode("Invoices") {
+            tooltipText = "Invoices and billing"
+            treeNode("ClientA.pdf") {
+              tooltipText = "Invoice for Client A"
+            }
+            treeNode("ClientB.pdf") {
+              tooltipText = "Invoice for Client B"
+            }
+          }
+        }
+        treeNode("Pictures") {
+          tooltipText = "Photos and images"
+          treeNode("Vacations") {
+            treeNode("Beach.png") {
+              tooltipText = "Beach photo"
+            }
+            treeNode("Mountains.png") {
+              tooltipText = "Mountain photo"
+            }
+          }
+          treeNode("Events") {
+            treeNode("Birthday.jpg") {
+              tooltipText = "Birthday party"
+            }
+          }
+        }
+        expand("Documents")
+        expand("Pictures")
+        expand("Vacations")
+        selectKey("Mountains.png")
+      }
+    }
+  }
+}

src/main/kotlin/com/webforj/samples/views/tree/TreeLazyLoadKotlinView.kt

@@ -0,0 +1,53 @@
+package com.webforj.samples.views.tree
+
+import com.webforj.Interval
+import com.webforj.component.Composite
+import com.webforj.component.layout.flexlayout.FlexDirection
+import com.webforj.component.layout.flexlayout.FlexLayout
+import com.webforj.component.tree.Tree
+import com.webforj.kotlin.dsl.component.tree.tree
+import com.webforj.kotlin.dsl.component.tree.treeNode
+import com.webforj.kotlin.extension.set
+import com.webforj.kotlin.extension.styles
+import com.webforj.kotlin.extension.vh
+import com.webforj.router.annotation.FrameTitle
+import com.webforj.router.annotation.Route
+
+@Route
+@FrameTitle("Lazy Load Tree View")
+class TreeLazyLoadKotlinView: Composite<FlexLayout>() {
+  private val self = boundComponent
+
+  init {
+    self.apply {
+      direction = FlexDirection.COLUMN
+      height = 100.vh
+      styles["overflow"] = "auto"
+      tree {
+        styles["margin"] = "var(--dwc-space-l)"
+        for (i in 1..4) {
+          treeNode("Node $i") {
+            treeNode("<dwc-spinner></dwc-spinner>") {
+              setUserData("spinner", true)
+            }
+          }
+        }
+        onExpand { event ->
+          val node = event.node
+          if (node.children.size == 1) {
+            val child = node.children.first()
+            if (child.getUserData("spinner") == true) {
+              Interval(1f) {
+                it.interval.stop()
+                node.remove(child)
+                for (i in 1..3) {
+                  node.treeNode("${node.text} - Child $i")
+                }
+              }.start()
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/main/kotlin/com/webforj/samples/views/tree/TreeModifyKotlinView.kt

@@ -0,0 +1,78 @@
+package com.webforj.samples.views.tree
+
+import com.webforj.annotation.InlineStyleSheet
+import com.webforj.component.Composite
+import com.webforj.component.button.ButtonTheme
+import com.webforj.component.layout.flexlayout.FlexDirection
+import com.webforj.component.layout.flexlayout.FlexLayout
+import com.webforj.component.optiondialog.InputDialog
+import com.webforj.kotlin.dsl.component.tree.tree
+import com.webforj.kotlin.dsl.component.tree.treeNode
+import com.webforj.kotlin.extension.set
+import com.webforj.kotlin.extension.styles
+import com.webforj.kotlin.extension.vh
+import com.webforj.router.annotation.FrameTitle
+import com.webforj.router.annotation.Route
+
+@Route
+@FrameTitle("Tree Modify View")
+@InlineStyleSheet(
+  """
+    :root {
+      --dwc-tree-icon-fill: var(--dwc-color-primary);
+    }
+
+  """
+)
+class TreeModifyKotlinView : Composite<FlexLayout>() {
+  private val self = boundComponent
+
+  init {
+    self.apply {
+      direction = FlexDirection.COLUMN
+      height = 100.vh
+      styles["overflow"] = "auto"
+      tree {
+        styles["margin"] = "var(--dwc-space-l)"
+        treeNode("Projects") {
+          treeNode("Alpha") {
+            treeNode("Planning")
+            treeNode("Execution")
+            treeNode("Review")
+          }
+          treeNode("Beta") {
+            treeNode("Design")
+            treeNode("Development")
+            treeNode("Testing")
+          }
+        }
+        treeNode("Departments") {
+          treeNode("Engineering") {
+            treeNode("Software")
+            treeNode("Hardware")
+          }
+          treeNode("Marketing")
+          treeNode("Human Resources")
+        }
+        expand("Departments")
+        onDoubleClick { event ->
+          event.node?.let { node ->
+            val result = InputDialog(
+              "Enter a new name for the node: ${node.text}",
+              "Modify Node"
+            ).apply {
+              defaultValue = node.text
+              firstButtonText = "Modify"
+              secondButtonText = "Cancel"
+              setFirstButtonTheme(ButtonTheme.PRIMARY)
+            }.run { show() }
+            result?.takeIf { it.isNotEmpty() }?.let {
+              node.text = it
+              node.tooltipText = "Modified: $it"
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/main/kotlin/com/webforj/samples/views/tree/TreeSelectionKotlinView.kt

@@ -0,0 +1,77 @@
+package com.webforj.samples.views.tree
+
+import com.webforj.component.Composite
+import com.webforj.component.layout.flexlayout.FlexDirection
+import com.webforj.component.layout.flexlayout.FlexLayout
+import com.webforj.component.optiondialog.OptionDialog.showMessageDialog
+import com.webforj.component.tree.Tree
+import com.webforj.component.tree.TreeNode
+import com.webforj.kotlin.dsl.component.button.button
+import com.webforj.kotlin.dsl.component.optioninput.switch
+import com.webforj.kotlin.dsl.component.tree.tree
+import com.webforj.kotlin.dsl.component.tree.treeNode
+import com.webforj.kotlin.extension.px
+import com.webforj.kotlin.extension.set
+import com.webforj.kotlin.extension.styles
+import com.webforj.router.annotation.FrameTitle
+import com.webforj.router.annotation.Route
+
+@Route
+@FrameTitle("Tree Selection Example")
+class TreeSelectionKotlinView: Composite<FlexLayout>() {
+  private val self = boundComponent
+
+  init {
+    self.apply {
+      direction = FlexDirection.COLUMN
+      maxWidth = 400.px
+      styles["margin"] = "0 auto"
+      styles["padding"] = "var(--dwc-space-l)"
+      styles["overflow"] = "auto"
+      styles["height"] = "calc(100vh - 2 * var(--dwc-space-l))"
+      val multiSelectToggle = switch("Enable Multi-selection", true)
+      val tree = tree {
+        selectionMode = Tree.SelectionMode.MULTIPLE
+        treeNode("Colors") {
+          treeNode("Red")
+          treeNode("Green")
+          treeNode("Blue")
+        }.also {
+          expand(it)
+          selectChildren(it)
+        }
+        treeNode("Shapes") {
+          treeNode("Circle")
+          treeNode("Square")
+          treeNode("Triangle")
+        }
+        treeNode("Animals") {
+          treeNode("Dog")
+          treeNode("Cat")
+          treeNode("Bird")
+        }
+        multiSelectToggle.onToggle {
+          if (it.isToggled) {
+            selectionMode = Tree.SelectionMode.MULTIPLE
+          } else {
+            selectionMode = Tree.SelectionMode.SINGLE
+          }
+        }
+      }
+      button("Show Selected Nodes") {
+        onClick {
+          val msg = tree.selectedItems.takeIf { it.isNotEmpty() }?.let { selectedNodes ->
+            val nodes = selectedNodes.map(TreeNode::getText)
+              .joinToString("", "<ul>", "</ul>") { "<li>$it</li>" }
+            """
+              <html> You have selected the following nodes
+              $nodes
+              </html>
+            """.trimIndent()
+          } ?: "There are no node selected"
+          showMessageDialog(msg, "Node Selection")
+        }
+      }
+    }
+  }
+}