|
|
@ -13,13 +13,23 @@ |
|
|
|
|
|
|
|
|
const dispatch = createEventDispatcher() |
|
|
const dispatch = createEventDispatcher() |
|
|
let open = false |
|
|
let open = false |
|
|
$: isNull = value == null || value === "" |
|
|
$: fieldText = getFieldText(value, options, placeholder) |
|
|
$: placeholderText = placeholder || "Choose an option" |
|
|
|
|
|
$: selectedOption = options.find(option => getOptionValue(option) === value) |
|
|
const getFieldText = (value, options, placeholder) => { |
|
|
$: selectedLabel = selectedOption |
|
|
// Always use placeholder if no value |
|
|
? getOptionLabel(selectedOption) |
|
|
if (value == null || value === "") { |
|
|
: placeholderText |
|
|
return placeholder || "Choose an option" |
|
|
$: fieldText = isNull ? placeholderText : selectedLabel |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Wait for options to load if there is a value but no options |
|
|
|
|
|
if (!options?.length) { |
|
|
|
|
|
return "" |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Render the label if the selected option is found, otherwide raw value |
|
|
|
|
|
const selected = options.find(option => getOptionValue(option) === value) |
|
|
|
|
|
return selected ? getOptionLabel(selected) : value |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const selectOption = value => { |
|
|
const selectOption = value => { |
|
|
dispatch("change", value) |
|
|
dispatch("change", value) |
|
|
@ -36,7 +46,7 @@ |
|
|
{options} |
|
|
{options} |
|
|
{getOptionLabel} |
|
|
{getOptionLabel} |
|
|
{getOptionValue} |
|
|
{getOptionValue} |
|
|
isPlaceholder={isNull} |
|
|
isPlaceholder={value == null || value === ''} |
|
|
placeholderOption={placeholder} |
|
|
placeholderOption={placeholder} |
|
|
isOptionSelected={option => option === value} |
|
|
isOptionSelected={option => option === value} |
|
|
onSelectOption={selectOption} /> |
|
|
onSelectOption={selectOption} /> |
|
|
|