release: WRNexusJS 0.6.0

packages/ui/components/Modal.wrn

@@ -1,78 +1,81 @@
 component Modal {
-  props {
-    @event open = function
-    @event close = function
-    @event cancel = function
-    @event confirm = function
+  outputs {
+    open(payload: { sourceEvent: Event })
+    close(payload: { reason: string; sourceEvent: Event })
+    cancel(payload: { sourceEvent: Event })
+    confirm(payload: { sourceEvent: Event })
+  }
 
-    isOpen = false
-    defaultOpen = false
-    title = "Modal"
-    description = ""
-    icon = ""
-    label = "Modal dialog"
-    size = "md"
-    placement = "center"
-    color = "primary"
-    variant = "default"
-    showClose = true
-    closeLabel = "Close modal"
-    closeOnBackdrop = true
-    closeOnEscape = true
-    closeOnCancel = true
-    closeOnConfirm = false
-    showFooter = true
-    cancelLabel = "Cancel"
-    cancelIcon = ""
-    confirmLabel = "Confirm"
-    confirmIcon = ""
-    confirmDisabled = false
-    confirmLoading = false
-    destructive = false
-    triggerLabel = ""
-    triggerIcon = ""
-    scrollable = true
-    class = ""
+  props {
+
+    open: boolean = false
+    defaultOpen: boolean = false
+    title: string = "Modal"
+    description: string = ""
+    icon: string = ""
+    label: string = "Modal dialog"
+    size: string = "md"
+    placement: string = "center"
+    color: string = "primary"
+    variant: string = "default"
+    showClose: boolean = true
+    closeLabel: string = "Close modal"
+    closeOnBackdrop: boolean = true
+    closeOnEscape: boolean = true
+    closeOnCancel: boolean = true
+    closeOnConfirm: boolean = false
+    showFooter: boolean = true
+    cancelLabel: string = "Cancel"
+    cancelIcon: string = ""
+    confirmLabel: string = "Confirm"
+    confirmIcon: string = ""
+    confirmDisabled: boolean = false
+    confirmLoading: boolean = false
+    destructive: boolean = false
+    triggerLabel: string = ""
+    triggerIcon: string = ""
+    scrollable: boolean = true
+    class: string = ""
   }
 
   state visible = defaultOpen
 
   functions {
-    function isOpen() {
+    shared function isOpen() {
       return open || visible
     }
 
-    function showModal(sourceEvent) {
+    client function showModal(sourceEvent) {
       visible = true
-      $emit("open", { sourceEvent: sourceEvent })
+      output.open({ sourceEvent: sourceEvent })
     }
 
-    function hideModal(reason, sourceEvent) {
+    client function hideModal(reason, sourceEvent) {
       visible = false
-      $emit("close", {
+      output.close({
         reason: reason,
         sourceEvent: sourceEvent
       })
     }
 
-    function cancelModal(sourceEvent) {
-      $emit("cancel", { sourceEvent: sourceEvent })
+    client function cancelModal(sourceEvent) {
+      output.cancel({ sourceEvent: sourceEvent })
       if (closeOnCancel) {
         hideModal("cancel", sourceEvent)
       }
     }
 
-    function confirmModal(sourceEvent) {
+    client function confirmModal(sourceEvent) {
       if (confirmDisabled || confirmLoading) {
         return
       }
-      $emit("confirm", { sourceEvent: sourceEvent })
+      output.confirm({ sourceEvent: sourceEvent })
       if (closeOnConfirm) {
         hideModal("confirm", sourceEvent)
       }
     }
 
-    function handleKeydown(sourceEvent) {
+    client function handleKeydown(sourceEvent) {
       if (closeOnEscape && sourceEvent.key === "Escape") {
         sourceEvent.preventDefault()
         cancelModal(sourceEvent)