WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release: WRNexusJS 0.6.0

Browse Source
This commit is contained in:
Clintchiz
2026-08-01 01:09:58 +05:30
parent 3e565e8d03
commit 687d345882
502 changed files with 33038 additions and 11358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/AdvancedSelect.wrn
+85 -82
View File
@@ -1,82 +1,85 @@
component AdvancedSelect {
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 = "Advanced Select"
name = ""
value = ""
values = []
options = []
groups = []
placeholder = "Select an option"
placeholderIcon = ""
searchPlaceholder = "Search options…"
multiple = false
searchable = true
defaultOpen = false
clearable = true
allowEmpty = true
tags = false
disabled = false
required = false
invalid = false
validationMessage = ""
helpText = ""
loading = false
loadingLabel = "Loading options…"
emptyLabel = "No options found"
selectedOptionsLabel = "Selected options"
clearLabel = "Clear selection"
createLabel = "Create"
loadMoreLabel = "Load more"
searchMode = "contains"
searchFields = "label,description"
minSearchLength = 0
searchResultLimit = 0
maxSelections = 0
showCounter = false
counterTemplate = "{selected} selected"
optionTemplate = "default"
selectedTemplate = "default"
closeOnSelect = true
scrollToSelected = true
fixed = false
placement = "bottom"
remote = false
remoteUrl = ""
remoteQueryParam = "q"
remoteDebounce = 250
remoteAutoLoad = true
infinite = false
hasMore = false
page = 1
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 = "Advanced Select"
name: string = ""
value: string = ""
values: unknown[] = []
options: unknown[] = []
groups: unknown[] = []
placeholder: string = "Select an option"
placeholderIcon: string = ""
searchPlaceholder: string = "Search options…"
multiple: boolean = false
searchable: boolean = true
defaultOpen: boolean = false
clearable: boolean = true
allowEmpty: boolean = true
tags: boolean = false
disabled: boolean = false
required: boolean = false
invalid: boolean = false
validationMessage: string = ""
helpText: string = ""
loading: boolean = false
loadingLabel: string = "Loading options…"
emptyLabel: string = "No options found"
selectedOptionsLabel: string = "Selected options"
clearLabel: string = "Clear selection"
createLabel: string = "Create"
loadMoreLabel: string = "Load more"
searchMode: string = "contains"
searchFields: string = "label,description"
minSearchLength: number = 0
searchResultLimit: number = 0
maxSelections: number = 0
showCounter: boolean = false
counterTemplate: string = "{selected} selected"
optionTemplate: string = "default"
selectedTemplate: string = "default"
closeOnSelect: boolean = true
scrollToSelected: boolean = true
fixed: boolean = false
placement: string = "bottom"
remote: boolean = false
remoteUrl: string = ""
remoteQueryParam: string = "q"
remoteDebounce: number = 250
remoteAutoLoad: boolean = true
infinite: boolean = false
hasMore: boolean = false
page: number = 1
class: string = ""
}
state open = defaultOpen
state query = ""
state activeIndex = -1
state query: string = ""
state activeIndex: number = -1
state selectedValue = value
state selectedValues = values
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 < Number(minSearchLength || 0)) {
return true
}
@@ -89,22 +92,22 @@ component AdvancedSelect {
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, Number(searchResultLimit))
}
return matchingOptions(list)
}
function flatVisibleOptions() {
shared function flatVisibleOptions() {
return visibleOptions(allOptions())
}
function isSelected(option) {
shared function isSelected(option) {
return (
multiple
? selectedValues.includes(option.value)
@@ -112,15 +115,15 @@ component AdvancedSelect {
)
}
function selectedOptions() {
shared function selectedOptions() {
return allOptions().filter((option) => isSelected(option))
}
function selectedCount() {
shared function selectedCount() {
return multiple ? selectedValues.length : selectedValue ? 1 : 0
}
function counterText() {
shared function counterText() {
return (
maxSelections
? selectedCount() + " / " + maxSelections + " selected"
@@ -128,7 +131,7 @@ component AdvancedSelect {
)
}
function selectedText() {
shared function selectedText() {
return (
multiple
? selectedValues.join(", ")
@@ -138,11 +141,11 @@ component AdvancedSelect {
)
}
function triggerText() {
shared function triggerText() {
return selectedCount() ? selectedText() : placeholder
}
function canSelect(option) {
shared function canSelect(option) {
if (option.disabled) {
return false
}
@@ -155,7 +158,7 @@ component AdvancedSelect {
return selectedCount() < maxSelections
}
function chooseSingle(option) {
shared function chooseSingle(option) {
if (!canSelect(option)) {
return
}
@@ -166,7 +169,7 @@ component AdvancedSelect {
}
}
function chooseMultiple(option) {
shared function chooseMultiple(option) {
if (!canSelect(option)) {
return
}
@@ -178,7 +181,7 @@ component AdvancedSelect {
query = ""
}
function chooseOption(option) {
shared function chooseOption(option) {
if (multiple) {
chooseMultiple(option)
return
@@ -186,7 +189,7 @@ component AdvancedSelect {
chooseSingle(option)
}
function clearSelection(event) {
client function clearSelection(event) {
event.stopPropagation()
selectedValue = ""
selectedValues = []
@@ -194,7 +197,7 @@ component AdvancedSelect {
open = false
}
function toggle() {
shared function toggle() {
if (disabled) {
return;
};
@@ -202,14 +205,14 @@ component AdvancedSelect {
activeIndex = open && flatVisibleOptions().length ? 0 : -1;
}
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
}
@@ -243,7 +246,7 @@ component AdvancedSelect {
}
}
function optionIndex(option) {
shared function optionIndex(option) {
return flatVisibleOptions().findIndex((item) => item.value === option.value)
}
}