release: WRNexusJS 0.6.0

packages/ui/components/select.wrn

@@ -1,47 +1,50 @@
 component Select {
+  outputs {
+    input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
+    change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
+    focus(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
+    blur(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
+    open(payload: { name: string; sourceEvent: Event })
+    close(payload: { name: string; sourceEvent: Event })
+    invalid(payload: { name: string; message: string; sourceEvent: Event })
+  }
+
   props {
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    @event open = function
-    @event close = function
-    @event invalid = function
-    size = "default"
-    color = "primary"
-    id = ""
-    name = ""
-    label = "Select"
-    hiddenLabel = false
-    value = ""
-    values = []
-    options = []
-    placeholder = "Select an option"
-    variant = "normal"
-    icon = ""
-    iconPosition = "start"
-    helperText = ""
-    cornerHint = ""
-    error = ""
-    inline = false
-    multiple = false
-    readonly = false
-    disabled = false
-    required = false
-    class = ""
+size: string = "default"
+    color: string = "primary"
+    id: string = ""
+    name: string = ""
+    label: string = "Select"
+    hiddenLabel: boolean = false
+    value: string = ""
+    values: unknown[] = []
+    options: unknown[] = []
+    placeholder: string = "Select an option"
+    variant: string = "normal"
+    icon: string = ""
+    iconPosition: string = "start"
+    helperText: string = ""
+    cornerHint: string = ""
+    error: string = ""
+    inline: boolean = false
+    multiple: boolean = false
+    readonly: boolean = false
+    disabled: boolean = false
+    required: boolean = false
+    class: string = ""
   }
   functions {
-    function selected(option) {
+    shared function selected(option) {
       if (multiple) return values.includes(option.value)
       return option.value === value
     }
-    function emitField(nameEvent, sourceEvent) {
+    client function emitField(nameEvent, sourceEvent) {
       sourceEvent.stopPropagation()
-      $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent })
+      output[nameEvent]({ value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent })
     }
-    function handleFocus(sourceEvent) { emitField("focus", sourceEvent); $emit("open", { name: name, sourceEvent: sourceEvent }) }
-    function handleBlur(sourceEvent) { emitField("blur", sourceEvent); $emit("close", { name: name, sourceEvent: sourceEvent }) }
-    function handleInvalid(sourceEvent) { $emit("invalid", { name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
+    client function handleFocus(sourceEvent) { emitField("focus", sourceEvent); output.open({ name: name, sourceEvent: sourceEvent }) }
+    client function handleBlur(sourceEvent) { emitField("blur", sourceEvent); output.close({ name: name, sourceEvent: sourceEvent }) }
+    client function handleInvalid(sourceEvent) { output.invalid({ name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
   }
   view {
     <div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--select {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}" data-readonly="{readonly}">