mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00
Code Activity

update tests to use mount where required, start new slot docs

Browse Source
This commit is contained in:
Jeff
2019-11-06 13:10:51 -08:00
parent 83c1c795db
commit 218a9e5c99
7 changed files with 134 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/api/slots.md
-65
View File
@@ -1,65 +0,0 @@
::: tip
Vue Select leverages scoped slots to allow for total customization of the presentation layer.
Slots can be used to change the look and feel of the UI, or to simply swap out text.
:::
## Selected Option(s)
### `selected-option`
#### Scope:
- `option {Object}` - A selected option
```html
<slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}">
{{ getOptionLabel(option) }}
</slot>
```
### `selected-option-container`
#### Scope:
- `option {Object}` - A selected option
- `deselect {Function}` - Method used to deselect a given option when `multiple` is true
- `disabled {Boolean}` - Determine if the component is disabled
- `multiple {Boolean}` - If the component supports the selection of multiple values
```html
<slot v-for="option in valueAsArray" name="selected-option-container"
:option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled">
<span class="selected-tag" v-bind:key="option.index">
<slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}">
{{ getOptionLabel(option) }}
</slot>
<button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
<span aria-hidden="true">&times;</span>
</button>
</span>
</slot>
```
## Component Actions
### `spinner`
```html
<slot name="spinner">
<div class="spinner" v-show="mutableLoading">Loading...</div>
</slot>
```
## Dropdown
### `option`
#### Scope:
- `option {Object}` - The currently iterated option from `filteredOptions`
```html
<slot name="option" v-bind="(typeof option === 'object')?option:{[label]: option}">
{{ getOptionLabel(option) }}
</slot>
```
docs/guide/slots.md
+9 -18
View File
@@ -1,22 +1,13 @@
::: tip 🚧
This section of the guide is a work in progress! Check back soon for an update.
Vue Select currently offers quite a few scoped slots, and you can check out the
[API Docs for Slots](../api/slots.md) in the meantime while a good guide is put together.
:::
## Scoped Slots
#### Scoped Slot `option`
Vue Select offers a number of scoped slots that allow you to customize many parts of the
component for your app. You can make small adjustments with slots, or you can swap out all elements
of the default UI for your own.
vue-select provides the scoped `option` slot in order to create custom dropdown templates.
All of Vue Selects scoped slots follow a similar pattern. Each slot is scoped with an object with at
least two keys: `bindings` and `events`.
```html
<v-select :options="options" label="title">
<template v-slot:option="option">
<span :class="option.icon"></span>
{{ option.title }}
</template>
</v-select>
```
`bindings {Object}` Data that is bound to an element within the slot (HTML attributes, classes, etc)
`events {Object}` Event handlers for elements within the slot
Using the `option` slot with props `"option"` provides the current option variable to the template.
<CodePen url="NXBwYG" height="500"/>