feat: header, footer, list-header, list-footer slots (#1085)

docs/api/slots.md

@@ -3,6 +3,39 @@ Vue Select leverages scoped slots to allow for total customization of the presen
 Slots can be used to change the look and feel of the UI, or to simply swap out text.
 :::
 
+## Wrapper
+
+### `header` <Badge text="3.8.0+" />
+
+Displayed at the top of the component, above `.vs__dropdown-toggle`.
+
+- `search {string}` - the current search query
+- `loading {boolean}` - is the component loading
+- `searching {boolean}` - is the component searching
+- `filteredOptions {array}` - options filtered by the search text
+- `deselect {function}` - function to deselect an option
+
+```html
+<slot name="header" v-bind="scope.header" />
+```
+
+### `footer` <Badge text="3.8.0+" />
+
+Displayed at the bottom of the component, below `.vs__dropdown-toggle`.
+
+When implementing this slot, you'll likely need to use `appendToBody` to position the dropdown.
+Otherwise content in this slot will affect it's positioning.
+
+- `search {string}` - the current search query
+- `loading {boolean}` - is the component loading
+- `searching {boolean}` - is the component searching
+- `filteredOptions {array}` - options filtered by the search text
+- `deselect {function}` - function to deselect an option
+
+```html
+<slot name="footer" v-bind="scope.footer" />
+```
+
 ## Selected Option(s)
 
 ### `selected-option`
@@ -91,8 +124,38 @@ attributes : {
 
 ## Dropdown
 
+### `list-header` <Badge text="3.8.0+" />
+
+Displayed as the first item in the dropdown. No content by default. Parent element is the `<ul>`,
+so this slot should contain a root `<li>`.
+
+- `search {string}` - the current search query
+- `loading {boolean}` - is the component loading
+- `searching {boolean}` - is the component searching
+- `filteredOptions {array}` - options filtered by the search text
+
+```html
+<slot name="list-header" v-bind="scope.listHeader" />
+```
+
+### `list-footer` <Badge text="3.8.0+" />
+
+Displayed as the last item in the dropdown. No content by default. Parent element is the `<ul>`,
+so this slot should contain a root `<li>`.
+
+- `search {string}` - the current search query
+- `loading {boolean}` - is the component loading
+- `searching {boolean}` - is the component searching
+- `filteredOptions {array}` - options filtered by the search text
+
+```html
+<slot name="footer" v-bind="scope.listFooter" />
+```
+
 ### `option`
 
+The current option within the dropdown, contained within `<li>`.
+
 - `option {Object}` - The currently iterated option from `filteredOptions`
 
 ```html