release: WRNexusJS 0.6.0

packages/ui/components/ContextMenu.wrn

@@ -1,40 +1,43 @@
 component ContextMenu {
-  props {
-    @event open = function
-    @event close = function
-    @event select = function
-    @event action = function
+  outputs {
+    open(payload: { x: number; y: number; trigger: string; 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
-    trigger = "contextmenu"
-    placement = "pointer"
-    align = "start"
-    size = "default"
-    color = "primary"
-    variant = "raised"
-    title = ""
-    description = ""
-    label = "Context menu"
-    closeOnSelect = true
-    closeOnOutside = true
-    disabled = false
-    minWidth = "14rem"
-    maxWidth = "20rem"
-    class = ""
+  props {
+
+    items: unknown[] = []
+    open: boolean = false
+    defaultOpen: boolean = false
+    trigger: string = "contextmenu"
+    placement: string = "pointer"
+    align: string = "start"
+    size: string = "default"
+    color: string = "primary"
+    variant: string = "raised"
+    title: string = ""
+    description: string = ""
+    label: string = "Context menu"
+    closeOnSelect: boolean = true
+    closeOnOutside: boolean = true
+    disabled: boolean = false
+    minWidth: string = "14rem"
+    maxWidth: string = "20rem"
+    class: string = ""
   }
 
   state visible = defaultOpen
-  state positionX = 16
-  state positionY = 16
+  state positionX: number = 16
+  state positionY: number = 16
 
   functions {
-    function isOpen() {
+    shared function isOpen() {
       return open || visible
     }
 
-    function showMenu(sourceEvent) {
+    client function showMenu(sourceEvent) {
       if (disabled) {
         return
       }
@@ -46,7 +49,7 @@ component ContextMenu {
         positionY = Math.max(12, Math.min(sourceEvent.clientY || 12, window.innerHeight - 420))
       }
       visible = true
-      $emit("open", {
+      output.open({
         x: positionX,
         y: positionY,
         trigger: trigger,
@@ -54,15 +57,15 @@ component ContextMenu {
       })
     }
 
-    function hideMenu(reason, sourceEvent) {
+    client function hideMenu(reason, sourceEvent) {
       visible = false
-      $emit("close", {
+      output.close({
         reason: reason,
         sourceEvent: sourceEvent
       })
     }
 
-    function toggleMenu(sourceEvent) {
+    client function toggleMenu(sourceEvent) {
       if (isOpen()) {
         hideMenu("toggle", sourceEvent)
       } else {
@@ -70,19 +73,19 @@ component ContextMenu {
       }
     }
 
-    function chooseItem(item, itemIndex, sourceEvent) {
+    client function chooseItem(item, itemIndex, sourceEvent) {
       if (disabled || item.disabled || item.type === "header" || item.type === "divider") {
         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 || "",
@@ -94,7 +97,7 @@ component ContextMenu {
       }
     }
 
-    function moveFocus(sourceEvent, direction) {
+    client function moveFocus(sourceEvent, direction) {
       const root = sourceEvent.currentTarget.closest(".wire-context-menu") || sourceEvent.currentTarget
       const options = [...root.querySelectorAll("[data-context-menu-item]:not([disabled])")]
       if (!options.length) {
@@ -105,7 +108,7 @@ component ContextMenu {
       options[nextIndex].focus()
     }
 
-    function handleKeydown(sourceEvent) {
+    client function handleKeydown(sourceEvent) {
       if (sourceEvent.key === "Escape") {
         sourceEvent.preventDefault()
         hideMenu("escape", sourceEvent)