release: WRNexusJS 0.6.0

.publish/ui/components/Sidebar.wrn

@@ -1,36 +1,39 @@
 component Sidebar {
-  props {
-    @event toggle = function
-    @event open = function
-    @event close = function
-    @event select = function
-    size = "default"
-    color = "primary"
-    label = "Sidebar"
-    items = []
-    active = ""
-    orientation = "horizontal"
-    mobileLabel = "Open navigation"
-    class = ""
+  outputs {
+    toggle(payload: { open: boolean })
+    open(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
+    close(payload: { source: string })
+    select(payload: { item: string | number | boolean | null | object; value: string | number | boolean; level: string })
   }
 
-  state mobileOpen = false
+  props {
+    size: string = "default"
+    color: string = "primary"
+    label: string = "Sidebar"
+    items: unknown[] = []
+    active: string = ""
+    orientation: string = "horizontal"
+    mobileLabel: string = "Open navigation"
+    class: string = ""
+  }
+
+  state mobileOpen: boolean = false
 
   functions {
-    function toggleSidebar() {
+    client function toggleSidebar() {
       mobileOpen = !mobileOpen
-      $emit("toggle", { open: mobileOpen })
-      $emit(mobileOpen ? "open" : "close", { source: "mobile" })
+      output.toggle({ open: mobileOpen })
+      output[mobileOpen ? "open" : "close"]({ source: "mobile" })
     }
 
-    function closeSidebar() {
+    client function closeSidebar() {
       mobileOpen = false
-      $emit("close", { source: "mobile" })
+      output.close({ source: "mobile" })
     }
 
-    function selectItem(item, level) {
+    client function selectItem(item, level) {
       mobileOpen = false
-      $emit("select", { item: item, value: item.value || "", level: level })
+      output.select({ item: item, value: item.value || "", level: level })
     }
   }