release: WRNexusJS 0.6.0

packages/ui/components/Navbar.wrn

@@ -1,45 +1,48 @@
 component Navbar {
-  props {
-    @event toggle = function
-    @event open = function
-    @event close = function
-    @event select = function
-    @event action = function
-    size = "default"
-    color = "primary"
-    label = "Primary navigation"
-    topbarLabel = "Utility navigation"
-    brand = {}
-    items = []
-    actions = []
-    active = ""
-    sticky = false
-    openOnHover = false
-    maxWidth = "full"
-    mobileLabel = "Toggle navigation"
-    class = ""
+  outputs {
+    toggle(payload: { open: boolean })
+    open(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
+    close(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
+    select(payload: { item: string | number | boolean | null | object; value: string | number | boolean; level: string })
+    action(payload: { item: string | number | boolean | null | object; value: string | number | boolean })
   }
 
-  state mobileOpen = false
+  props {
+size: string = "default"
+    color: string = "primary"
+    label: string = "Primary navigation"
+    topbarLabel: string = "Utility navigation"
+    brand: Record<string, unknown> = {}
+    items: unknown[] = []
+    actions: unknown[] = []
+    active: string = ""
+    sticky: boolean = false
+    openOnHover: boolean = false
+    maxWidth: string = "full"
+    mobileLabel: string = "Toggle navigation"
+    class: string = ""
+  }
+
+  state mobileOpen: boolean = false
 
   functions {
-    function toggleNavigation() {
+    client function toggleNavigation() {
       mobileOpen = !mobileOpen
-      $emit("toggle", { open: mobileOpen })
-      $emit(mobileOpen ? "open" : "close", { source: "mobile" })
+      output.toggle({ open: mobileOpen })
+      output[mobileOpen ? "open" : "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 })
     }
 
-    function selectAction(item) {
+    client function selectAction(item) {
       mobileOpen = false
-      $emit("action", { item: item, value: item.value || "" })
+      output.action({ item: item, value: item.value || "" })
     }
 
-    function isItemActive(item) {
+    shared function isItemActive(item) {
       if (!item) return false
       if (item.value && item.value === active) return true
       if (!item.children || !item.children.length) return false
@@ -48,8 +51,8 @@ component Navbar {
       })
     }
 
-    function toggleDropdown(event, item) {
-      $emit(event.currentTarget.open ? "open" : "close", {
+    client function toggleDropdown(event, item) {
+      output[event.currentTarget.open ? "open" : "close"]({
         source: "menu",
         item: item
       })
@@ -86,7 +89,7 @@ component Navbar {
           <nav class="wire-navbar__menus" aria-label="{label}">
             {#each items as item}
               {#if item.children && item.children.length}
-                <details class="wire-navbar__dropdown wire-navbar__dropdown--{item.type || 'dropdown'}" name="wire-navbar-menu" @toggle="toggleDropdown($event, item)">
+                <details class="wire-navbar__dropdown wire-navbar__dropdown--{item.type || 'dropdown'}" name="wire-navbar-menu" @toggle="toggleDropdown(event, item)">
                   <summary aria-current="{isItemActive(item) ? 'page' : ''}">
                     {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
                     <span>{item.label}</span>