diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte index 94d4f2b768..3eb1add267 100644 --- a/packages/bbui/src/Form/Core/Multiselect.svelte +++ b/packages/bbui/src/Form/Core/Multiselect.svelte @@ -12,6 +12,7 @@ export let getOptionValue = option => option export let readonly = false export let autocomplete = false + export let sort = false const dispatch = createEventDispatcher() $: selectedLookupMap = getSelectedLookupMap(value) @@ -83,4 +84,5 @@ {getOptionLabel} {getOptionValue} onSelectOption={toggleOption} + {sort} /> diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index de7bfb02b8..8acbc4e1a6 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -25,11 +25,12 @@ export let quiet = false export let autoWidth = false export let autocomplete = false + export let sort = false const dispatch = createEventDispatcher() let searchTerm = null - $: sortedOptions = getSortedOptions(options, getOptionLabel) + $: sortedOptions = getSortedOptions(options, getOptionLabel, sort) $: filteredOptions = getFilteredOptions( sortedOptions, searchTerm, @@ -45,10 +46,13 @@ open = true } - const getSortedOptions = (options, getLabel) => { + const getSortedOptions = (options, getLabel, sort) => { if (!options?.length || !Array.isArray(options)) { return [] } + if (!sort) { + return options + } return options.sort((a, b) => { const labelA = getLabel(a) const labelB = getLabel(b) diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte index 3a2daf25cf..413b11dd34 100644 --- a/packages/bbui/src/Form/Core/Select.svelte +++ b/packages/bbui/src/Form/Core/Select.svelte @@ -15,6 +15,7 @@ export let quiet = false export let autoWidth = false export let autocomplete = false + export let sort = false const dispatch = createEventDispatcher() let open = false @@ -72,6 +73,7 @@ {getOptionIcon} {fieldIcon} {autocomplete} + {sort} isPlaceholder={value == null || value === ""} placeholderOption={placeholder} isOptionSelected={option => option === value} diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte index 1bb0039914..957dcccddf 100644 --- a/packages/bbui/src/Form/Multiselect.svelte +++ b/packages/bbui/src/Form/Multiselect.svelte @@ -13,6 +13,7 @@ export let options = [] export let getOptionLabel = option => option export let getOptionValue = option => option + export let sort = false const dispatch = createEventDispatcher() const onChange = e => { @@ -29,6 +30,7 @@ {value} {options} {placeholder} + {sort} {getOptionLabel} {getOptionValue} on:change={onChange} diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte index eecc719a9a..b6547c0a98 100644 --- a/packages/bbui/src/Form/Select.svelte +++ b/packages/bbui/src/Form/Select.svelte @@ -16,6 +16,7 @@ export let getOptionIcon = option => option?.icon export let quiet = false export let autoWidth = false + export let sort = false const dispatch = createEventDispatcher() const onChange = e => { @@ -41,6 +42,7 @@ {options} {placeholder} {autoWidth} + {sort} {getOptionLabel} {getOptionValue} {getOptionIcon} diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte index 078dbf25b2..0724016679 100644 --- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte +++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte @@ -19,6 +19,7 @@ data-cy="{meta.name}-select" bind:value options={meta.constraints.inclusion} + sort /> {:else if type === "datetime"} diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte index 8ce2ebe7f9..2bbbb471c2 100644 --- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte +++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte @@ -153,6 +153,7 @@ label="Display Column" bind:value={primaryDisplay} options={fields} + sort /> {/if} diff --git a/packages/builder/src/components/common/LinkedRowSelector.svelte b/packages/builder/src/components/common/LinkedRowSelector.svelte index 080f09809d..1f3dea137f 100644 --- a/packages/builder/src/components/common/LinkedRowSelector.svelte +++ b/packages/builder/src/components/common/LinkedRowSelector.svelte @@ -47,6 +47,7 @@ getOptionValue={row => row._id} on:change={e => (linkedIds = e.detail ? [e.detail] : [])} {label} + sort /> {:else} row._id} + sort /> {/if} diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte index 9f3e4a4557..c5efa6f58d 100644 --- a/packages/standard-components/src/forms/OptionsField.svelte +++ b/packages/standard-components/src/forms/OptionsField.svelte @@ -87,6 +87,7 @@ getOptionLabel={flatOptions ? x => x : x => x.label} getOptionValue={flatOptions ? x => x : x => x.value} {autocomplete} + sort={true} /> {:else if optionsType === "radio"} option._id} {placeholder} + sort={true} /> {/if}