mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-16 09:10:33 +03:00
Merge branch 'master' into pr/423
# Conflicts: # docs/gitbook/Basics/Options.md
This commit is contained in:
Jeff
@@ -12,20 +12,32 @@ The `dir` attribute accepts the same values as the [HTML spec](https://developer
|
||||
|
||||
All of the text within the component has been wrapped within [slots](https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots) and can be replaced in your app.
|
||||
|
||||
|
||||
##### Loading Spinner
|
||||
|
||||
*Slot Definition:*
|
||||
```html
|
||||
<slot name="spinner">
|
||||
<div class="spinner" v-show="mutableLoading">Loading...</div>
|
||||
</slot>
|
||||
```
|
||||
*Implementation:*
|
||||
```html
|
||||
<v-select>
|
||||
<i slot="spinner" class="icon icon-spinner"></i>
|
||||
</v-select>
|
||||
```
|
||||
|
||||
##### No Options Text
|
||||
|
||||
*Slot Definition:*
|
||||
```html
|
||||
<slot name="no-options">Sorry, no matching options.</slot>
|
||||
```
|
||||
*Implementation:*
|
||||
```html
|
||||
<v-select>
|
||||
<span slot="no-options">No Options Here!</div>
|
||||
</v-select>
|
||||
```
|
||||
|
||||
For a full list of component slots, view the [slots API docs](Api/Slots.md).
|
||||
|
||||
[](codepen://sagalbot/oZmLVN?height=250)
|
||||
@@ -54,6 +54,6 @@ If you wanted to return `CA` in the dropdown when `Canada` is selected, you'd us
|
||||
```
|
||||
|
||||
|
||||
### Null / Empty Options {#emptyOptions}
|
||||
### Null / Empty Options {#null}
|
||||
|
||||
`vue-select` requires the `option` property to be an `array`. If you are using Vue in development mode, you will get warnings attempting to pass anything other than an `array` to the `options` prop. If you need a `null`/`empty` value, use an empty array `[]`.
|
||||
|
||||
@@ -35,4 +35,4 @@ If you want new tags to be pushed to the options list, set `push-tags` to true.
|
||||
<v-select taggable></v-select>
|
||||
```
|
||||
|
||||
[](codepen://sagalbot/NpwrQO?height=250)
|
||||
[](codepen://sagalbot/XVoWxm?height=350)
|
||||
|
||||
+10
-11
@@ -1,4 +1,11 @@
|
||||
# vue-select [](https://travis-ci.org/sagalbot/vue-select) [](https://lima.codeclimate.com/github/sagalbot/vue-select) [](https://codeclimate.com/github/sagalbot/vue-select) [](https://gemnasium.com/github.com/sagalbot/vue-select)  
|
||||
# vue-select
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> A Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
|
||||
|
||||
@@ -13,14 +20,6 @@
|
||||
- ~33kb minified with CSS
|
||||
- Zero dependencies
|
||||
|
||||
## Documentation
|
||||
- **[Demo & Docs](http://sagalbot.github.io/vue-select/)**
|
||||
- **[Example on JSBin](http://jsbin.com/saxaru/8/edit?html,js,output)**
|
||||
#### Resources
|
||||
- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
|
||||
- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
|
||||
|
||||
## Install
|
||||
|
||||
###### Vue Compatibility
|
||||
- `vue ~2.0` use `vue-select ~2.0`
|
||||
- `vue ~1.0` use `vue-select ~1.0`
|
||||
- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
|
||||
@@ -4,19 +4,13 @@
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
|
||||
.dropdown-toggle {
|
||||
background: #fff;
|
||||
border-color: rgba(82, 166, 183, 0.39);
|
||||
}
|
||||
//.selected-tag {
|
||||
// color: #147688;
|
||||
// background-color: #d7f3f9;
|
||||
// border-color: #91ddec;
|
||||
// .close {
|
||||
// color: #147688;
|
||||
// opacity: .5;
|
||||
// }
|
||||
//}
|
||||
|
||||
&.dropdown.open .dropdown-toggle,
|
||||
&.dropdown.open .dropdown-menu,
|
||||
&.dropdown.open .open-indicator:before {
|
||||
|
||||
+3
-12
@@ -59,29 +59,21 @@
|
||||
to Select2/Chosen without the overhead of jQuery.
|
||||
</p>
|
||||
|
||||
<v-select id="v-select" :options="options" v-model="selected" label="title">
|
||||
<v-select id="v-select" :options="options" @input="redirect" label="title">
|
||||
<template slot="option" slot-scope="option">
|
||||
<span class="octicon" :class="option.icon"></span>
|
||||
{{ option.title }}
|
||||
</template>
|
||||
</v-select>
|
||||
|
||||
<div v-cloak v-if="!! selected" class="dropdown-action">
|
||||
<a class="btn btn-primary btn-outline btn-lg" :href="selected.url">
|
||||
<span class="octicon" :class="selected.icon"></span>
|
||||
{{ selected.title }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<section class="content" :class="{ hidden: selected }">
|
||||
|
||||
<section class="content">
|
||||
<div class="feature-list">
|
||||
<ul class="list-vue">
|
||||
<li>Supports Vuex</li>
|
||||
<li>Tagging Support</li>
|
||||
<li>Custom Templating</li>
|
||||
<li>Zero JS/CSS dependencies</li>
|
||||
<li>Custom Filtering Algoirthms</li>
|
||||
<li>Custom Filtering Algorithms</li>
|
||||
</ul>
|
||||
|
||||
<ul class="list-vue">
|
||||
@@ -108,7 +100,6 @@
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
(function (i, s, o, g, r, a, m) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import vSelect from '../../src/components/Select'
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
import './assets/scss/home.scss'
|
||||
|
||||
@@ -40,5 +40,10 @@ new Vue({
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
redirect(option) {
|
||||
window.location = option.url;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user