release: WRNexusJS 0.6.0

packages/ui/components/Combobox.wrn

@@ -1,71 +1,74 @@
 component ComboBox {
+  outputs {
+    search(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)
+    select(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)
+    clear(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)
+    open(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
+    close(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
+    load(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
+    error(payload: { error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)
+  }
+
   props {
-    size = "default"
-    color = "primary"
-    label = "ComboBox"
-    name = ""
-    value = ""
-    options = []
-    groups = []
-    placeholder = "Search or select an option"
-    searchPlaceholder = "Start typing…"
-    clearable = true
-    allowCustomValue = false
-    disabled = false
-    required = false
-    invalid = false
-    validationMessage = ""
-    helpText = ""
-    loading = false
-    loadingLabel = "Loading suggestions…"
-    emptyLabel = "No matching options"
-    clearLabel = "Clear value"
-    toggleLabel = "Toggle suggestions"
-    searchMode = "contains"
-    searchFields = "label,description"
-    minSearchLength = 0
-    searchResultLimit = 0
-    optionTemplate = "default"
-    defaultOpen = false
-    closeOnSelect = true
-    fixed = false
-    placement = "bottom"
-    autocomplete = "off"
-    remote = false
-    remoteUrl = ""
-    remoteQueryParam = "q"
-    remoteDebounce = 250
-    remoteAutoLoad = true
-    infinite = false
-    hasMore = false
-    page = 1
-    loadMoreLabel = "Load more"
-    class = ""
-    @event search = function
-    @event select = function
-    @event change = function
-    @event clear = function
-    @event open = function
-    @event close = function
-    @event load = function
-    @event error = function
+    size: string = "default"
+    color: string = "primary"
+    label: string = "ComboBox"
+    name: string = ""
+    value: string = ""
+    options: unknown[] = []
+    groups: unknown[] = []
+    placeholder: string = "Search or select an option"
+    searchPlaceholder: string = "Start typing…"
+    clearable: boolean = true
+    allowCustomValue: boolean = false
+    disabled: boolean = false
+    required: boolean = false
+    invalid: boolean = false
+    validationMessage: string = ""
+    helpText: string = ""
+    loading: boolean = false
+    loadingLabel: string = "Loading suggestions…"
+    emptyLabel: string = "No matching options"
+    clearLabel: string = "Clear value"
+    toggleLabel: string = "Toggle suggestions"
+    searchMode: string = "contains"
+    searchFields: string = "label,description"
+    minSearchLength: number = 0
+    searchResultLimit: number = 0
+    optionTemplate: string = "default"
+    defaultOpen: boolean = false
+    closeOnSelect: boolean = true
+    fixed: boolean = false
+    placement: string = "bottom"
+    autocomplete: string = "off"
+    remote: boolean = false
+    remoteUrl: string = ""
+    remoteQueryParam: string = "q"
+    remoteDebounce: number = 250
+    remoteAutoLoad: boolean = true
+    infinite: boolean = false
+    hasMore: boolean = false
+    page: number = 1
+    loadMoreLabel: string = "Load more"
+    class: string = ""
   }
 
   state open = defaultOpen
-  state query = ""
+  state query: string = ""
   state selectedValue = value
-  state activeIndex = -1
+  state activeIndex: number = -1
 
   functions {
-    function allOptions() {
+    shared function allOptions() {
       return [...groups.flatMap((group) => group.options || []), ...options]
     }
 
-    function searchableText(option) {
+    shared function searchableText(option) {
       return ((option.label || "") + " " + (option.description || "")).toLowerCase()
     }
 
-    function matches(option) {
+    shared function matches(option) {
       if (!query || query.length < minSearchLength) {
         return true
       }
@@ -78,38 +81,38 @@ component ComboBox {
       return searchableText(option).includes(query.toLowerCase())
     }
 
-    function matchingOptions(list) {
+    shared function matchingOptions(list) {
       return list.filter((option) => matches(option))
     }
 
-    function visibleOptions(list) {
+    shared function visibleOptions(list) {
       if (searchResultLimit > 0) {
         return matchingOptions(list).slice(0, searchResultLimit)
       }
       return matchingOptions(list)
     }
 
-    function flatVisibleOptions() {
+    shared function flatVisibleOptions() {
       return visibleOptions(allOptions())
     }
 
-    function isSelected(option) {
+    shared function isSelected(option) {
       return selectedValue === option.value
     }
 
-    function selectedOptions() {
+    shared function selectedOptions() {
       return allOptions().filter((option) => isSelected(option))
     }
 
-    function selectedText() {
+    shared function selectedText() {
       return selectedOptions().length ? selectedOptions()[0].label : selectedValue
     }
 
-    function inputText() {
+    shared function inputText() {
       return query || selectedText()
     }
 
-    function shouldShowDropdown() {
+    shared function shouldShowDropdown() {
       if (!open) {
         return false
       }
@@ -125,11 +128,11 @@ component ComboBox {
       return infinite && hasMore
     }
 
-    function canSelect(option) {
+    shared function canSelect(option) {
       return !option.disabled
     }
 
-    function chooseOption(option) {
+    shared function chooseOption(option) {
       if (!canSelect(option)) {
         return
       }
@@ -141,14 +144,14 @@ component ComboBox {
       }
     }
 
-    function updateQuery(event) {
+    client function updateQuery(event) {
       query = event.target.value
       selectedValue = allowCustomValue ? event.target.value : ""
       open = true
       activeIndex = flatVisibleOptions().length ? 0 : -1
     }
 
-    function clearValue(event) {
+    client function clearValue(event) {
       if (event) {
         event.stopPropagation()
       }
@@ -158,18 +161,18 @@ component ComboBox {
       open = false
     }
 
-    function openDropdown() {
+    shared function openDropdown() {
       if (!disabled) {
         open = true
         activeIndex = flatVisibleOptions().length ? 0 : -1
       }
     }
 
-    function closeDropdown() {
+    shared function closeDropdown() {
       open = false
     }
 
-    function toggle() {
+    shared function toggle() {
       if (open) {
         closeDropdown()
       } else {
@@ -177,19 +180,19 @@ component ComboBox {
       }
     }
 
-    function setValue(nextValue) {
+    shared function setValue(nextValue) {
       selectedValue = nextValue
       query = ""
     }
 
-    function moveActive(direction) {
+    shared function moveActive(direction) {
       if (!flatVisibleOptions().length) {
         return
       }
       activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length
     }
 
-    function handleKeydown(event) {
+    client function handleKeydown(event) {
       if (disabled) {
         return
       }
@@ -215,7 +218,7 @@ component ComboBox {
       }
     }
 
-    function optionIndex(option) {
+    shared function optionIndex(option) {
       return flatVisibleOptions().findIndex((item) => item.value === option.value)
     }
   }