release: WRNexusJS 0.6.0

packages/ui/components/Dropdown.wrn

@@ -1,53 +1,55 @@
 component Dropdown {
-  props {
-    @event toggle = function
-    @event open = function
-    @event close = function
-    @event select = function
-    @event action = function
+  outputs {
+    toggle(payload: { open: boolean; sourceEvent: Event; reason?: object })
+    open(payload: { sourceEvent: Event })
+    close(payload: { reason: string; sourceEvent: Event })
+    select(payload: { item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })
+    action(payload: { item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })
+  }
 
-    items = []
-    open = false
-    defaultOpen = false
-    label = "Open menu"
-    icon = ""
-    showChevron = true
-    menuLabel = "Dropdown menu"
-    placement = "bottom-start"
-    width = "md"
-    size = "default"
-    color = "primary"
-    variant = "raised"
-    closeOnSelect = true
-    closeOnOutside = true
-    disabled = false
-    emptyLabel = "No menu items"
-    class = ""
+  props {
+items: unknown[] = []
+    open: boolean = false
+    defaultOpen: boolean = false
+    label: string = "Open menu"
+    icon: string = ""
+    showChevron: boolean = true
+    menuLabel: string = "Dropdown menu"
+    placement: string = "bottom-start"
+    width: string = "md"
+    size: string = "default"
+    color: string = "primary"
+    variant: string = "raised"
+    closeOnSelect: boolean = true
+    closeOnOutside: boolean = true
+    disabled: boolean = false
+    emptyLabel: string = "No menu items"
+    class: string = ""
   }
 
   state visible = defaultOpen
 
   functions {
-    function isOpen() {
+    shared function isOpen() {
       return open || visible
     }
 
-    function showMenu(sourceEvent) {
+    client function showMenu(sourceEvent) {
       if (disabled) {
         return
       }
       visible = true
-      $emit("open", { sourceEvent: sourceEvent })
-      $emit("toggle", { open: true, sourceEvent: sourceEvent })
+      output.open({ sourceEvent: sourceEvent })
+      output.toggle({ open: true, sourceEvent: sourceEvent })
     }
 
-    function hideMenu(reason, sourceEvent) {
+    client function hideMenu(reason, sourceEvent) {
       visible = false
-      $emit("close", { reason: reason, sourceEvent: sourceEvent })
-      $emit("toggle", { open: false, reason: reason, sourceEvent: sourceEvent })
+      output.close({ reason: reason, sourceEvent: sourceEvent })
+      output.toggle({ open: false, reason: reason, sourceEvent: sourceEvent })
     }
 
-    function toggleMenu(sourceEvent) {
+    client function toggleMenu(sourceEvent) {
       if (isOpen()) {
         hideMenu("toggle", sourceEvent)
       } else {
@@ -55,19 +57,19 @@ component Dropdown {
       }
     }
 
-    function chooseItem(item, itemIndex, sourceEvent) {
+    client function chooseItem(item, itemIndex, sourceEvent) {
       if (disabled || item.disabled || item.type === "divider" || item.type === "header") {
         sourceEvent.preventDefault()
         return
       }
-      $emit("select", {
+      output.select({
         item: item,
         itemIndex: itemIndex,
         value: item.value || "",
         sourceEvent: sourceEvent
       })
       if (item.action) {
-        $emit("action", {
+        output.action({
           item: item,
           itemIndex: itemIndex,
           value: item.value || "",
@@ -79,7 +81,7 @@ component Dropdown {
       }
     }
 
-    function moveFocus(sourceEvent, direction) {
+    client function moveFocus(sourceEvent, direction) {
       const root = sourceEvent.currentTarget.closest(".wire-dropdown") || sourceEvent.currentTarget
       const options = [...root.querySelectorAll("[data-dropdown-item]:not([disabled])")]
       if (!options.length) {
@@ -90,7 +92,7 @@ component Dropdown {
       options[nextIndex].focus()
     }
 
-    function handleKeydown(sourceEvent) {
+    client function handleKeydown(sourceEvent) {
       if (sourceEvent.key === "Escape") {
         sourceEvent.preventDefault()
         hideMenu("escape", sourceEvent)