Skip non selectable items

.gitignore

@@ -1,9 +1,9 @@
 node_modules
 .DS_Store
-.idea
-.nova
-/dist/
-/test/public/index.js
-/test/public/bundle.css
+/test/public/tests.js
+/test/public/tests.css
 /spec/page/public/build
-/test-results
+/.svelte-kit
+/package
+/src/lib/no-styles
+.env

.prettierrc

@@ -2,6 +2,8 @@
     "useTabs": false,
     "singleQuote": true,
     "tabWidth": 4,
+    "printWidth": 120,
+    "bracketSameLine": true,
     "overrides": [
         {
             "files": ["*.svelte"],
@@ -10,6 +12,6 @@
             }
         }
     ],
-    "svelteSortOrder": "scripts-styles-markup",
+    "svelteSortOrder": "scripts-markup-styles",
     "svelteBracketNewLine": false
 }

CHANGELOG.md

@@ -1,5 +1,74 @@
 # svelte-select changelog
 
+## 5.0.0
+
+* Removed `hasError` prop use `class` instead
+* Removed CSS prop `--input-font-size`
+* Removed CSS prop `--multi-item-border`
+* Removed CSS prop `--multi-label-margin`
+* Added CSS props `--loading--margin , --loading-color, --loading-height, --loading-width`
+* Added CSS prop `--chevron-border`
+* Added CSS prop `--font-size`
+* Added CSS prop `--multi-item-gap`
+* Added named slot `multi-clear-icon`
+* Added named slot `list`
+* Added named slot `item`
+* Removed Virtual list
+* noOptionsMessage removed
+* optionIdentifier -> itemId
+* getOptionLabel removed
+* getGroupHeaderLabel removed
+* itemCreated event removed
+* labelIdentifier -> label
+* creatable removed, use named slots and bake in your create own logic
+* isGroupHeaderSelectable -> groupHeaderSelectable
+* isSearchable -> searchable
+* isFocused -> focused
+* isCreatable -> creatable
+* isClearable -> clearable
+* isWaiting -> loading
+* Added named slot `prepend`
+* Added named slot `chevron`
+* Added named slot `clear-icon`
+* Added named slot `loading-icon`
+* Removed iconProps
+* Removed ClearIcon component
+* Removed ChevronIcon component
+* Removed Multi component
+* Added named slot `selection`
+* Removed Selection component
+* isMulti -> multiple
+* Other improvements (see docs)
+* select-container -> svelte-select
+* added justValue
+* Placeholder default change from 'Select...' to 'Please select'
+* added blur and focus events
+* computePlacement now computes to fixed list
+* removed isOutOfViewport and clickOutside
+* new debounce method
+* filterMethod changed to filter
+* added support for svelte-tiny-virtual-list
+* removed virtual-list class and css props
+* loadOptionsInterval -> debounceWait
+* selectedValue removed
+* MultiSelection -> Multi
+* added postcss to example, tests
+* tailwind css option
+* breaking: containerClasses -> class
+* listGroupTitle -> list-group-title
+* listContainer -> list 
+* selectContainer and other CSS class names updated, selectContainer -> svelte-select for example
+* LoadingIcon prop added
+* CSS props updates. Added .icons and removed some css vars
+* Removed logic to show chevron if isSearchable is false
+* indicator class renamed to chevron 
+* showIndicator renamed showChevron
+* indicatorSvg removed, use ChevronIcon going forward
+* removed playwright and puppeteer, tests now just run in the browser with sirv
+* debounce method is now exported as a prop
+* Convert repo to use SvelteKit
+* Change licence from LIL to ISC
+
 ## 4.4.1
 
 * Added missing prop 'placeholderAlwaysShow' to TypeScript declaration file (#305) - thanks to @paolotiu
@@ -27,7 +96,7 @@
 
 ## 4.2.5
 
-* isMulti on:select fix (#276)
+* multiple on:select fix (#276)
 
 ## 4.2.4
 
@@ -77,7 +146,7 @@
 
 ## 3.15.0
 
-* Added new prop multiFullItemClearable for easier clearable items when isMulti is true - thanks to @stephenlrandall
+* Added new prop multiFullItemClearable for easier clearable items when multiple is true - thanks to @stephenlrandall
 
 ## 3.14.3
 
@@ -294,7 +363,7 @@
 
 ## 1.5.5
 
-*  isMulti on:select bug fix
+*  multiple on:select bug fix
 
 ## 1.5.4
 

EXAMPLES.md

@@ -0,0 +1,3 @@
+# svelte-select examples
+
+All props, slots and events have an example file located in: `src/routes/examples`.

MIGRATION_GUIDE.md

@@ -0,0 +1,112 @@
+## Migrating for v4 to v5
+
+v5 is a major release that that includes some ⚠️ BREAKING CHANGES ⚠️ 
+
+Removed `hasError`. Not needed.<br/>
+Removed `getOptionLabel`. Not needed.<br/>
+Removed `getGroupHeaderLabel`. Not needed.<br/>
+Removed `noOptionsMessage`. Not needed.
+
+Removed `Selection`, `ChevronIcon`, `ClearIcon`, `LoadingIcon`, `Icon`, `List` and `Item` components, use named slots instead:
+
+```html
+<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>
+```
+
+Removed `isVirtualList`. Use named slots.
+
+```svelte
+<script>
+  import VirtualList from 'svelte-tiny-virtual-list';
+  ...
+</script>
+
+<Select>
+  <div slot="list" let:filteredItems>  
+    <VirtualList {...} />
+  </div>
+</Select>
+```
+
+Removed `isCreatable` prop and `itemCreated` event, named slots can be used to bake in your own create method
+
+```html
+<Select>
+  <div slot="empty" on:click={..your-create-method-here...}>
+    CREATE: {filterText}
+  </div>
+</Select>
+```
+
+### 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.
+
+```css
+--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`<br/>
+`listContainer` → `svelte-select-list`<br/>
+`indicator` → `chevron`<br/>
+`--clear-icon-colour` → `--clear-icon-color`<br/>
+`virtual-list` removed
+
+
+### Prop changes:
+`containerClasses` → `class`<br/>
+`MultiSelection` → `Multi`<br/>
+`indicatorSvg` → `ChevronIcon`<br/>
+`showIndicator` → `showChevron`<br/>
+`loadOptionsInterval` → `debounceWait`<br/>
+`isMulti` → `multiple`<br/>
+`isWaiting` → `loading`<br/>
+`isClearable` → `clearable`<br/>
+`isFocused` → `focused`<br/>
+`isGroupHeaderSelectable` → `groupHeaderSelectable`<br/>
+`isDisabled` → `disabled`<br/>
+`labelIdentifier` -> `label`<br/>
+`optionIdentifier` -> `itemId`<br/>
+`selectedValue` removed (was already deprecated in v4 in favour of `value`)<br/>
+
+### Event change:
+The `select` event now only fires when the user selects an item. If you also want to track programmatic changes use the new `change` event.