Global Config
Svelecte provides global config with many of settings. Basically it is an export from <script context="module"></script>
so when you call it before you create any <Svelecte /> instance, you can change some defaults for your whole app.
Part of global config is also global i18n object, although it can be set also on component level.
Example
Toggle buttons and visit another pages. YOu will see the settings are applied globally.
Settings
export type Settings = {
valueField: string | null;
labelField: string | null;
groupLabelField: string;
groupItemsField: string;
disabledField: string;
placeholder: string;
valueAsObject: boolean;
searchable: boolean;
clearable: boolean;
highlightFirstItem: boolean;
selectOnTab: boolean | 'select-navigate';
resetOnBlur: boolean;
resetOnSelect: boolean;
fetchResetOnBlur: boolean;
fetchDebounceTime: number;
multiple: boolean;
closeAfterSelect: boolean | string;
max: number;
collapseSelection: 'blur' | 'always' | null;
keepSelectionInList: 'auto' | boolean;
creatable: boolean;
creatablePrefix: string;
keepCreated: boolean;
allowEditing: boolean;
delimiter: string;
fetchCallback: Function;
minQuery: number;
lazyDropdown: boolean;
virtualList: boolean;
vlItemSize: number | null;
vlHeight: number | null;
i18n: I18nObject;
requestFactory: import("./utils/fetch").RequestFactoryFn;
}export type Settings = {
valueField: string | null;
labelField: string | null;
groupLabelField: string;
groupItemsField: string;
disabledField: string;
placeholder: string;
valueAsObject: boolean;
searchable: boolean;
clearable: boolean;
highlightFirstItem: boolean;
selectOnTab: boolean | 'select-navigate';
resetOnBlur: boolean;
resetOnSelect: boolean;
fetchResetOnBlur: boolean;
fetchDebounceTime: number;
multiple: boolean;
closeAfterSelect: boolean | string;
max: number;
collapseSelection: 'blur' | 'always' | null;
keepSelectionInList: 'auto' | boolean;
creatable: boolean;
creatablePrefix: string;
keepCreated: boolean;
allowEditing: boolean;
delimiter: string;
fetchCallback: Function;
minQuery: number;
lazyDropdown: boolean;
virtualList: boolean;
vlItemSize: number | null;
vlHeight: number | null;
i18n: I18nObject;
requestFactory: import("./utils/fetch").RequestFactoryFn;
}const settings = {
valueField: null,
labelField: null,
groupLabelField: 'label',
groupItemsField: 'options',
disabledField: '$disabled',
placeholder: 'Select',
valueAsObject: false,
searchable: true,
clearable: false,
highlightFirstItem: true,
selectOnTab: false,
resetOnBlur: true,
resetOnSelect: true,
fetchResetOnBlur: true,
fetchDebounceTime: 300,
multiple: false,
closeAfterSelect: 'auto',
max: 0,
collapseSelection: null,
keepSelectionInList: 'auto',
creatable: false,
creatablePrefix: '*',
keepCreated: true,
allowEditing: false,
delimiter: ',',
fetchCallback: null,
minQuery: 1,
lazyDropdown: true,
virtualList: false,
vlItemSize: null,
vlHeight: null,const settings = {
valueField: null,
labelField: null,
groupLabelField: 'label',
groupItemsField: 'options',
disabledField: '$disabled',
placeholder: 'Select',
valueAsObject: false,
searchable: true,
clearable: false,
highlightFirstItem: true,
selectOnTab: false,
resetOnBlur: true,
resetOnSelect: true,
fetchResetOnBlur: true,
fetchDebounceTime: 300,
multiple: false,
closeAfterSelect: 'auto',
max: 0,
collapseSelection: null,
keepSelectionInList: 'auto',
creatable: false,
creatablePrefix: '*',
keepCreated: true,
allowEditing: false,
delimiter: ',',
fetchCallback: null,
minQuery: 1,
lazyDropdown: true,
virtualList: false,
vlItemSize: null,
vlHeight: null,I18n
I18n section contains some ARIA related properties.
export type I18nObject = {
empty: string;
nomatch: string;
max: (max: number) => string;
fetchBefore: string;
fetchQuery: (minQuery: number, inputLength: number) => string;
fetchInit: string;
fetchEmpty: string;
collapsedSelection: (count: number) => string;
createRowLabel: (value: string) => string;
aria_selected: (opts: string[]) => string;
aria_listActive: (opt: object, labelField: string, resultCount: number) => string;
aria_inputFocused: () => string;
aria_label: string;
aria_describedby: string;
}export type I18nObject = {
empty: string;
nomatch: string;
max: (max: number) => string;
fetchBefore: string;
fetchQuery: (minQuery: number, inputLength: number) => string;
fetchInit: string;
fetchEmpty: string;
collapsedSelection: (count: number) => string;
createRowLabel: (value: string) => string;
aria_selected: (opts: string[]) => string;
aria_listActive: (opt: object, labelField: string, resultCount: number) => string;
aria_inputFocused: () => string;
aria_label: string;
aria_describedby: string;
}i18n: {
aria_label: '',
aria_describedby: '',
aria_selected: (opts) => opts.length ? `Option${opts.length > 1 ? 's' : ''} ${opts.join(', ')} selected.` : '',
aria_listActive: (opt, labelField, count) => `You are currently focused on option ${opt[labelField]}. ${count} result${count>1?'s': ''} available.`,
aria_inputFocused: () => 'Select is focused, type to refine list, press down to scroll through the list',
empty: 'No options',
nomatch: 'No matching options',
max: num => `Maximum items ${num} selected`,
fetchBefore: 'Type to start searching',
fetchQuery: (minQuery, inputLength) => `Type at least ${minQuery} character${
minQuery > 1 ? 's' : ''
} to start searching`
,
fetchInit: 'Fetching data, please wait...',
fetchEmpty: 'No data related to your search',
collapsedSelection: count => `${count} selected`,
createRowLabel: value => `Add '${value}'`,
emptyCreatable: 'Add new by typing'
}i18n: {
aria_label: '',
aria_describedby: '',
aria_selected: (opts) => opts.length ? `Option${opts.length > 1 ? 's' : ''} ${opts.join(', ')} selected.` : '',
aria_listActive: (opt, labelField, count) => `You are currently focused on option ${opt[labelField]}. ${count} result${count>1?'s': ''} available.`,
aria_inputFocused: () => 'Select is focused, type to refine list, press down to scroll through the list',
empty: 'No options',
nomatch: 'No matching options',
max: num => `Maximum items ${num} selected`,
fetchBefore: 'Type to start searching',
fetchQuery: (minQuery, inputLength) => `Type at least ${minQuery} character${
minQuery > 1 ? 's' : ''
} to start searching`
,
fetchInit: 'Fetching data, please wait...',
fetchEmpty: 'No data related to your search',
collapsedSelection: count => `${count} selected`,
createRowLabel: value => `Add '${value}'`,
emptyCreatable: 'Add new by typing'
}