release: WRNexusJS 0.6.0

packages/ui/components/tooltip.wrn

@@ -1,54 +1,56 @@
 component Tooltip {
-  props {
-    @event toggle = function
-    @event open = function
-    @event close = function
+  outputs {
+    toggle(payload: { open: boolean; reason: string; sourceEvent: Event })
+    open(payload: { reason: string; sourceEvent: Event })
+    close(payload: { reason: string; sourceEvent: Event })
+  }
 
-    id = ""
-    open = false
-    defaultOpen = false
-    title = ""
-    description = ""
-    content = "Tooltip"
-    trigger = "hover"
-    placement = "top"
-    size = "default"
-    color = "primary"
-    variant = "dark"
-    maxWidth = "18rem"
-    offset = 10
-    showArrow = true
-    interactive = false
-    disabled = false
-    class = ""
+  props {
+id: string = ""
+    open: boolean = false
+    defaultOpen: boolean = false
+    title: string = ""
+    description: string = ""
+    content: string = "Tooltip"
+    trigger: string = "hover"
+    placement: string = "top"
+    size: string = "default"
+    color: string = "primary"
+    variant: string = "dark"
+    maxWidth: string = "18rem"
+    offset: number = 10
+    showArrow: boolean = true
+    interactive: boolean = false
+    disabled: boolean = false
+    class: string = ""
   }
 
   state visible = defaultOpen
 
   functions {
-    function isOpen() {
+    shared function isOpen() {
       return open || visible
     }
 
-    function showTooltip(reason, sourceEvent) {
+    client function showTooltip(reason, sourceEvent) {
       if (disabled || trigger === "manual") {
         return
       }
       visible = true
-      $emit("open", { reason: reason, sourceEvent: sourceEvent })
-      $emit("toggle", { open: true, reason: reason, sourceEvent: sourceEvent })
+      output.open({ reason: reason, sourceEvent: sourceEvent })
+      output.toggle({ open: true, reason: reason, sourceEvent: sourceEvent })
     }
 
-    function hideTooltip(reason, sourceEvent) {
+    client function hideTooltip(reason, sourceEvent) {
       if (trigger === "manual") {
         return
       }
       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 toggleTooltip(sourceEvent) {
+    client function toggleTooltip(sourceEvent) {
       if (isOpen()) {
         hideTooltip("click", sourceEvent)
       } else {
@@ -56,7 +58,7 @@ component Tooltip {
       }
     }
 
-    function handleKeydown(sourceEvent) {
+    client function handleKeydown(sourceEvent) {
       if (sourceEvent.key === "Escape") {
         sourceEvent.preventDefault()
         hideTooltip("escape", sourceEvent)