release: WRNexusJS 0.6.0

packages/ui/components/MetricCard.wrn

@@ -1,47 +1,50 @@
 component MetricCard {
-  props {
-    @event select = function
-    @event action = function
+  outputs {
+    select(payload: { label: string; value: string; href: string; sourceEvent: Event })
+    action(payload: { label: string; value: string; href: string; sourceEvent: Event })
+  }
 
-    label = "Metric"
-    value = "0"
-    description = ""
-    icon = ""
-    iconStyle = "soft"
-    prefix = ""
-    suffix = ""
-    badge = ""
-    trend = ""
-    trendLabel = ""
-    trendDirection = "neutral"
-    progress = -1
-    progressLabel = ""
-    href = ""
-    target = ""
-    rel = ""
-    external = false
-    actionLabel = ""
-    actionIcon = ""
-    showArrow = true
-    selectable = false
-    disabled = false
-    size = "default"
-    color = "primary"
-    variant = "default"
-    hover = "lift"
-    align = "left"
-    class = ""
+  props {
+
+    label: string = "Metric"
+    value: string = "0"
+    description: string = ""
+    icon: string = ""
+    iconStyle: string = "soft"
+    prefix: string = ""
+    suffix: string = ""
+    badge: string = ""
+    trend: string = ""
+    trendLabel: string = ""
+    trendDirection: string = "neutral"
+    progress: number = -1
+    progressLabel: string = ""
+    href: string = ""
+    target: string = ""
+    rel: string = ""
+    external: boolean = false
+    actionLabel: string = ""
+    actionIcon: string = ""
+    showArrow: boolean = true
+    selectable: boolean = false
+    disabled: boolean = false
+    size: string = "default"
+    color: string = "primary"
+    variant: string = "default"
+    hover: string = "lift"
+    align: string = "left"
+    class: string = ""
   }
 
   functions {
-    function selectCard(sourceEvent) {
+    client function selectCard(sourceEvent) {
       if (disabled || !selectable) {
         return
       }
       if (sourceEvent.target.closest(".wire-metric-card__action")) {
         return
       }
-      $emit("select", {
+      output.select({
         label: label,
         value: value,
         href: href,
@@ -49,12 +52,12 @@ component MetricCard {
       })
     }
 
-    function activateAction(sourceEvent) {
+    client function activateAction(sourceEvent) {
       if (disabled) {
         sourceEvent.preventDefault()
         return
       }
-      $emit("action", {
+      output.action({
         label: label,
         value: value,
         href: href,