release: WRNexusJS 0.6.0

packages/ui/components/Popover.wrn

@@ -1,58 +1,61 @@
 component Popover {
-  props {
-    @event toggle = function
-    @event open = function
-    @event close = function
-    @event action = function
+  outputs {
+    toggle(payload: { open: boolean; sourceEvent: Event; reason?: object })
+    open(payload: { sourceEvent: Event })
+    close(payload: { reason: string; sourceEvent: Event })
+    action(payload: { href: string; sourceEvent: Event })
+  }
 
-    open = false
-    defaultOpen = false
-    triggerLabel = "Open popover"
-    triggerIcon = ""
-    title = ""
-    description = ""
-    icon = ""
-    placement = "bottom-start"
-    width = "md"
-    size = "default"
-    color = "primary"
-    variant = "raised"
-    showArrow = true
-    showClose = false
-    closeLabel = "Close popover"
-    closeOnOutside = true
-    closeOnEscape = true
-    actionLabel = ""
-    actionHref = ""
-    actionIcon = ""
-    closeOnAction = true
-    disabled = false
-    class = ""
+  props {
+
+    open: boolean = false
+    defaultOpen: boolean = false
+    triggerLabel: string = "Open popover"
+    triggerIcon: string = ""
+    title: string = ""
+    description: string = ""
+    icon: string = ""
+    placement: string = "bottom-start"
+    width: string = "md"
+    size: string = "default"
+    color: string = "primary"
+    variant: string = "raised"
+    showArrow: boolean = true
+    showClose: boolean = false
+    closeLabel: string = "Close popover"
+    closeOnOutside: boolean = true
+    closeOnEscape: boolean = true
+    actionLabel: string = ""
+    actionHref: string = ""
+    actionIcon: string = ""
+    closeOnAction: boolean = true
+    disabled: boolean = false
+    class: string = ""
   }
 
   state visible = defaultOpen
 
   functions {
-    function isOpen() {
+    shared function isOpen() {
       return open || visible
     }
 
-    function showPopover(sourceEvent) {
+    client function showPopover(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 hidePopover(reason, sourceEvent) {
+    client function hidePopover(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 togglePopover(sourceEvent) {
+    client function togglePopover(sourceEvent) {
       if (isOpen()) {
         hidePopover("toggle", sourceEvent)
       } else {
@@ -60,8 +63,8 @@ component Popover {
       }
     }
 
-    function activateAction(sourceEvent) {
-      $emit("action", {
+    client function activateAction(sourceEvent) {
+      output.action({
         href: actionHref,
         sourceEvent: sourceEvent
       })
@@ -70,7 +73,7 @@ component Popover {
       }
     }
 
-    function handleKeydown(sourceEvent) {
+    client function handleKeydown(sourceEvent) {
       if (closeOnEscape && sourceEvent.key === "Escape") {
         sourceEvent.preventDefault()
         hidePopover("escape", sourceEvent)