Skip to content

Latest commit

 

History

History
98 lines (80 loc) · 2.88 KB

MIGRATION_GUIDE.md

File metadata and controls

98 lines (80 loc) · 2.88 KB
Raw

Migrating for v4 to v5

v5 is a major release that that includes some ⚠️ BREAKING CHANGES ⚠️

Event changes:

Updated in 5.0.0-beta.39

on:change event fires when the user selects an option.

on:input event fires when the value has been changed.

Removed

Removed getOptionLabel, getGroupHeaderLabel and noOptionsMessage.

Removed Selection, ChevronIcon, ClearIcon, LoadingIcon, Icon, List and Item components. Please use named slots instead:

<Select bind:items bind:value>
  <div slot="prepend" />
  <div slot="selection" let:selection />
  <div slot="clear-icon" />  
  <div slot="multi-clear-icon" />
  <div slot="loading-icon" />  
  <div slot="chevron-icon" />  
  <div slot="list" let:filteredItems />  
  <div slot="item" let:item let:index />  
  <div slot="empty" />  
</Select>

isVirtualList Removed

You can use named slots to achieve the same results, with more flexibility. Example at svelte-select-examples

isCreatable Removed

Removed isCreatable prop and itemCreated event, named slots can be used to build your own create method. Example at svelte-select-examples

CSS Camel to kebab:

CSS classes and custom properties changed (only depreciated, no need to update if upgrading from v4) from camel to kebab case. For example selectedItem → selected-item and --borderRadius → --border-radius

Redundant CSS custom properties:

The following CSS custom properties were removed in v5.

--clearSelectColor
--clearSelectFocusColor
--clearSelectHoverColor
--groupTitleTextTransform
--indicatorColor
--indicatorFill
--indicatorHeight
--listLeft
--listRight
--multiClearBG
--multiClearFill
--multiClearHeight
--multiClearHoverBG
--multiClearHoverFill
--multiClearPadding
--multiClearRadius
--multiClearTextAlign
--multiClearTop
--multiClearWidth
--multiItemActiveBG
--multiItemActiveColor
--spinnerLeft
--spinnerRight
--virtualListHeight

Other CSS class name changes:

selectContainer → svelte-select
listContainer → svelte-select-list
indicator → chevron
--clear-icon-colour → --clear-icon-color
virtual-list removed

Prop changes:

containerClasses → class
MultiSelection → Multi
indicatorSvg → ChevronIcon
showIndicator → showChevron
loadOptionsInterval → debounceWait
isMulti → multiple
isWaiting → loading
isClearable → clearable
isFocused → focused
isGroupHeaderSelectable → groupHeaderSelectable
isDisabled → disabled
isSearchable → searchable
labelIdentifier -> label
optionIdentifier -> itemId
selectedValue removed (was already deprecated in v4 in favour of value)