mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
might as well just do it all in once commit 🤷♂️
This commit is contained in:
Jeff
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<p :data-height="height"
|
||||
data-theme-id="dark"
|
||||
:data-slug-hash="url"
|
||||
data-default-tab="result"
|
||||
data-user="sagalbot"
|
||||
class="codepen">
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['url', 'height'],
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div id="home">
|
||||
<div class="container">
|
||||
<h1>Vue Select</h1>
|
||||
|
||||
<p class="accolades lead">
|
||||
<a href="https://github.com/sagalbot/vue-select">
|
||||
<img src="https://img.shields.io/github/stars/sagalbot/vue-select.svg?label=Stars&style=flat-square"
|
||||
alt="GitHub Stars">
|
||||
</a>
|
||||
<a href="https://www.npmjs.com/package/vue-select">
|
||||
<img src="https://img.shields.io/npm/dm/vue-select.svg?style=flat-square" alt="Downloads per Month">
|
||||
</a>
|
||||
<a href="https://codeclimate.com/github/sagalbot/vue-select/maintainability">
|
||||
<img src="https://img.shields.io/codeclimate/maintainability/sagalbot/vue-select.svg?style=flat-square"
|
||||
alt="Maintainability"/>
|
||||
</a>
|
||||
|
||||
<img src="https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square" alt="MIT License">
|
||||
<img src="https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square"
|
||||
alt="Current Release">
|
||||
</p>
|
||||
|
||||
<p class="lead">
|
||||
A Vue.js select component that provides similar functionality
|
||||
to Select2/Chosen without the overhead of jQuery.
|
||||
</p>
|
||||
|
||||
<ClientOnly>
|
||||
<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>
|
||||
</ClientOnly>
|
||||
|
||||
<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 Algorithms</li>
|
||||
</ul>
|
||||
|
||||
<ul class="list-vue">
|
||||
<li>+95% Test Coverage</li>
|
||||
<li>Select Single/Multiple</li>
|
||||
<li>Typeahead Suggestions</li>
|
||||
<li>Supports RTL & Translations</li>
|
||||
<li>Plays nice with CSS Frameworks</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
And so much more! Get started with: <br>
|
||||
<code>yarn add vue-select</code>
|
||||
</p>
|
||||
|
||||
<div class="cta">
|
||||
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
|
||||
<span class="octicon octicon-mark-github"></span> View on GitHub
|
||||
</a>
|
||||
|
||||
<router-link class="btn btn-primary btn-outline btn-lg" to="/docs/">
|
||||
<span class="octicon octicon-book"></span> Read the Docs
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../scss/home";
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
selected: null,
|
||||
options: [
|
||||
{
|
||||
title: 'Read the Docs',
|
||||
icon: 'octicon-book',
|
||||
url: 'docs/',
|
||||
},
|
||||
{
|
||||
title: 'View on GitHub',
|
||||
icon: 'octicon-mark-github',
|
||||
url: 'https://github.com/sagalbot/vue-select',
|
||||
},
|
||||
{
|
||||
title: 'View on NPM',
|
||||
icon: 'octicon-database',
|
||||
url: 'https://www.npmjs.com/package/vue-select',
|
||||
},
|
||||
{
|
||||
title: 'View Code Climate Analysis',
|
||||
icon: 'octicon-graph',
|
||||
url: 'https://codeclimate.com/github/sagalbot/vue-select',
|
||||
},
|
||||
{
|
||||
title: 'View Codepen Examples',
|
||||
icon: 'octicon-pencil',
|
||||
url: 'https://codepen.io/collection/nrkgxV/',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
redirect (option) {
|
||||
// if (window) {
|
||||
// window.location = option.url;
|
||||
// }
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,91 @@
|
||||
const meta = {
|
||||
title: 'Vue Select | VueJS Select2/Chosen Component',
|
||||
description: 'A well-tested, native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.',
|
||||
icon: 'static/vue-logo.png',
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
title: 'VueSelect',
|
||||
description: meta.description,
|
||||
head: [
|
||||
[
|
||||
'link',
|
||||
{
|
||||
href: '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono',
|
||||
rel: 'stylesheet',
|
||||
type: 'text/css',
|
||||
}],
|
||||
[
|
||||
'link',
|
||||
{
|
||||
href: '//fonts.googleapis.com/css?family=Dosis:300&text=Vue Select',
|
||||
rel: 'stylesheet',
|
||||
type: 'text/css',
|
||||
}],
|
||||
[
|
||||
'link',
|
||||
{
|
||||
href: 'https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css',
|
||||
rel: 'stylesheet',
|
||||
type: 'text/css',
|
||||
}],
|
||||
['meta', {name: 'title', content: meta.title}],
|
||||
['meta', {name: 'description', content: meta.description}],
|
||||
['link', {rel: 'icon', href: meta.icon, type: 'image/png'}],
|
||||
['meta', {property: 'og:image', content: meta.icon}],
|
||||
['meta', {property: 'twitter:image', content: meta.icon}],
|
||||
['meta', {name: 'description', content: meta.description}],
|
||||
['meta', {property: 'og:description', content: ''}],
|
||||
['meta', {property: 'twitter:description', content: meta.description}],
|
||||
['meta', {property: 'twitter:title', content: meta.title}],
|
||||
['meta', {property: 'og:title', content: meta.title}],
|
||||
['meta', {property: 'og:site_name', content: meta.title}],
|
||||
[
|
||||
'meta',
|
||||
{property: 'og:url', content: 'http://sagalbot.github.io/vue-select/'}],
|
||||
],
|
||||
serviceWorker: true,
|
||||
ga: 'UA-12818324-8',
|
||||
themeConfig: {
|
||||
repo: 'sagalbot/vue-select',
|
||||
editLinks: true,
|
||||
docsDir: 'docs',
|
||||
nav: [
|
||||
{text: 'Docs', link: '/guide/'},
|
||||
],
|
||||
sidebar: {
|
||||
'/docs/': [
|
||||
{
|
||||
title: 'Getting Started',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['getting-started/install', 'Installation'],
|
||||
['getting-started/options', 'Dropdown Options'],
|
||||
['getting-started/values', 'Selecting Values'],
|
||||
['getting-started/localization', 'Localization'],
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Digging Deeper',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['digging-deeper/templating', 'Templating & Slots'],
|
||||
['digging-deeper/vuex', 'Vuex'],
|
||||
['digging-deeper/ajax', 'AJAX'],
|
||||
['digging-deeper/examples', 'Examples'],
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'API',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['api/props', 'Props'],
|
||||
['api/slots', 'Slots'],
|
||||
['api/events', 'Events']
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
export default ({
|
||||
Vue, // the version of Vue being used in the VuePress app
|
||||
options, // the options for the root Vue instance
|
||||
router, // the router instance for the app
|
||||
siteData // site metadata
|
||||
}) => {
|
||||
console.log(options)
|
||||
}
|
||||
@@ -1,15 +1,11 @@
|
||||
@import 'variables';
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
#home {
|
||||
min-height: 100vh;
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@@ -21,12 +17,13 @@ body {
|
||||
background: $blue;
|
||||
background: $gradient;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
text-align: center;
|
||||
.container {
|
||||
max-width: 50em;
|
||||
}
|
||||
|
||||
@@ -145,4 +142,4 @@ code {
|
||||
|
||||
.dropdown-action {
|
||||
margin-top: 5em;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
@import '~normalize.css';
|
||||
@import 'demo';
|
||||
@import 'cyan_theme';
|
||||
@import 'cyan_theme';
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
layout: HomePage
|
||||
navbar: false
|
||||
---
|
||||
|
||||
|
||||
# vue-select
|
||||
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
# vue-select
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> Everything you wish the native `<select>` element could do, wrapped up into a
|
||||
zero dependency, highly extensible Vue component.
|
||||
|
||||
#### Features
|
||||
- AJAX Support
|
||||
- Tagging
|
||||
- List Filtering/Searching
|
||||
- Supports Vuex
|
||||
- Select Single/Multiple Options
|
||||
- Tested with Bootstrap 3/4, Bulma, Foundation
|
||||
- +95% Test Coverage
|
||||
- ~33kb minified with CSS
|
||||
- Zero dependencies
|
||||
|
||||
#### Resources
|
||||
- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
|
||||
- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
|
||||
- **[GitHub](https://github.com/sagalbot/vue-select)**
|
||||
@@ -0,0 +1,39 @@
|
||||
## `input`
|
||||
|
||||
Triggered when the selected value changes. Used internally for `v-model`.
|
||||
|
||||
```js
|
||||
/**
|
||||
* @param val {Object|String}` - selected option.
|
||||
*/
|
||||
this.$emit("input", val);
|
||||
```
|
||||
|
||||
## `option:created`
|
||||
|
||||
Triggered when `taggable` is `true` and a new option has been created.
|
||||
|
||||
```js
|
||||
/**
|
||||
* @param newOption {Object} - created option
|
||||
*/
|
||||
this.$emit("option:created", newOption);
|
||||
```
|
||||
|
||||
## `search:blur`
|
||||
|
||||
Triggered when the text input loses focus. The dropdown will close immediately before this
|
||||
event is triggered.
|
||||
|
||||
```js
|
||||
this.$emit("search:blur");
|
||||
```
|
||||
|
||||
## `search:focus`
|
||||
|
||||
Triggered when the text input gains focus. The dropdown will open immediately before this
|
||||
event is triggered.
|
||||
|
||||
```js
|
||||
this.$emit("search:focus");
|
||||
```
|
||||
@@ -0,0 +1,369 @@
|
||||
## `value`
|
||||
|
||||
Contains the currently selected value. Very similar to a
|
||||
`value` attribute on an `<input>`. You can listen for changes
|
||||
using 'change' event using v-on.
|
||||
|
||||
```js
|
||||
value: {
|
||||
default: null
|
||||
},
|
||||
```
|
||||
|
||||
## `options`
|
||||
|
||||
An array of strings or objects to be used as dropdown choices.
|
||||
If you are using an array of objects, vue-select will look for
|
||||
a `label` key (ex. `[{label: 'This is Foo', value: 'foo'}]`). A
|
||||
custom label key can be set with the `label` prop.
|
||||
|
||||
```js
|
||||
options: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
## `disabled`
|
||||
|
||||
Disable the entire component.
|
||||
|
||||
```js
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
```
|
||||
|
||||
## `clearable`
|
||||
|
||||
Can the user clear the selected property?
|
||||
|
||||
```js
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
```
|
||||
|
||||
## `maxHeight`
|
||||
|
||||
Sets the max-height property on the dropdown list.
|
||||
|
||||
```js
|
||||
maxHeight: {
|
||||
type: String,
|
||||
default: "400px"
|
||||
},
|
||||
```
|
||||
|
||||
## `searchable`
|
||||
|
||||
Enable/disable filtering the options.
|
||||
|
||||
```js
|
||||
searchable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
```
|
||||
|
||||
## `multiple`
|
||||
|
||||
Equivalent to the `multiple` attribute on a `<select>` input.
|
||||
|
||||
```js
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
```
|
||||
|
||||
## `placeholder`
|
||||
|
||||
Equivalent to the `placeholder` attribute on an `<input>`.
|
||||
|
||||
```js
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
```
|
||||
|
||||
## `transition`
|
||||
|
||||
Sets a Vue transition property on the `.dropdown-menu`. vue-select
|
||||
does not include CSS for transitions, you'll need to add them yourself.
|
||||
|
||||
```js
|
||||
transition: {
|
||||
type: String,
|
||||
default: "fade"
|
||||
},
|
||||
```
|
||||
|
||||
## `clearSearchOnSelect`
|
||||
|
||||
Enables/disables clearing the search text when an option is selected.
|
||||
|
||||
```js
|
||||
clearSearchOnSelect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
```
|
||||
|
||||
## `closeOnSelect`
|
||||
|
||||
Close a dropdown when an option is chosen. Set to false to keep the dropdown
|
||||
open (useful when combined with multi-select, for example)
|
||||
|
||||
```js
|
||||
closeOnSelect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
```
|
||||
|
||||
## `label`
|
||||
|
||||
Tells vue-select what key to use when generating option
|
||||
labels when each `option` is an object.
|
||||
|
||||
```js
|
||||
label: {
|
||||
type: String,
|
||||
default: "label"
|
||||
},
|
||||
```
|
||||
|
||||
## `index`
|
||||
|
||||
Tells vue-select what key to use when generating option
|
||||
values when each `option` is an object.
|
||||
|
||||
```js
|
||||
index: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
```
|
||||
|
||||
## `getOptionLabel`
|
||||
|
||||
Callback to generate the label text. If `{option}`
|
||||
is an object, returns `option[this.label]` by default.
|
||||
|
||||
Label text is used for filtering comparison and
|
||||
displaying. If you only need to adjust the
|
||||
display, you should use the `option` and
|
||||
`selected-option` slots.
|
||||
|
||||
```js
|
||||
getOptionLabel: {
|
||||
type: Function,
|
||||
default(option) {
|
||||
if (this.index) {
|
||||
option = this.findOptionByIndexValue(option);
|
||||
}
|
||||
|
||||
if (typeof option === "object") {
|
||||
if (!option.hasOwnProperty(this.label)) {
|
||||
return console.warn(
|
||||
`[vue-select warn]: Label key "option.${this.label}" does not` +
|
||||
` exist in options object ${JSON.stringify(option)}.\n` +
|
||||
"http://sagalbot.github.io/vue-select/#ex-labels"
|
||||
);
|
||||
}
|
||||
return option[this.label];
|
||||
}
|
||||
return option;
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
## `onChange`
|
||||
|
||||
An optional callback function that is called each time the selected
|
||||
value(s) change. When integrating with Vuex, use this callback to trigger
|
||||
an action, rather than using `v-model` to retrieve the selected value.
|
||||
|
||||
```js
|
||||
onChange: {
|
||||
type: Function,
|
||||
default: function(val) {
|
||||
this.$emit("input", val);
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
## `onTab`
|
||||
|
||||
Select the current value if `selectOnTab` is enabled
|
||||
|
||||
```js
|
||||
onTab: {
|
||||
type: Function,
|
||||
default: function() {
|
||||
if (this.selectOnTab) {
|
||||
this.typeAheadSelect();
|
||||
}
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
## `taggable`
|
||||
|
||||
Enable/disable creating options from searchInput.
|
||||
|
||||
```js
|
||||
taggable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
```
|
||||
|
||||
## `tabindex`
|
||||
|
||||
Set the tabindex for the input field.
|
||||
|
||||
```js
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
```
|
||||
|
||||
## `pushTags`
|
||||
|
||||
When true, newly created tags will be added to
|
||||
the options list.
|
||||
|
||||
```js
|
||||
pushTags: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
```
|
||||
|
||||
## `filterable`
|
||||
|
||||
When true, existing options will be filtered
|
||||
by the search text. Should not be used in conjunction
|
||||
with taggable.
|
||||
|
||||
```js
|
||||
filterable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
```
|
||||
|
||||
## `filterBy`
|
||||
|
||||
Callback to determine if the provided option should
|
||||
match the current search text. Used to determine
|
||||
if the option should be displayed.
|
||||
|
||||
```js
|
||||
filterBy: {
|
||||
type: Function,
|
||||
default(option, label, search) {
|
||||
return (label | "").toLowerCase().indexOf(search.toLowerCase()) > -1;
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
## `filter`
|
||||
|
||||
Callback to filter results when search text
|
||||
is provided. Default implementation loops
|
||||
each option, and returns the result of
|
||||
this.filterBy.
|
||||
|
||||
```js
|
||||
filter: {
|
||||
type: Function,
|
||||
default(options, search) {
|
||||
return options.filter(option => {
|
||||
let label = this.getOptionLabel(option);
|
||||
if (typeof label === "number") {
|
||||
label = label.toString();
|
||||
}
|
||||
return this.filterBy(option, label, search);
|
||||
});
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
## `createOption`
|
||||
|
||||
User defined function for adding Options
|
||||
|
||||
```js
|
||||
createOption: {
|
||||
type: Function,
|
||||
default(newOption) {
|
||||
if (typeof this.mutableOptions[0] === "object") {
|
||||
newOption = { [this.label]: newOption };
|
||||
}
|
||||
this.$emit("option:created", newOption);
|
||||
return newOption;
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
## `resetOnOptionsChange`
|
||||
|
||||
When false, updating the options will not reset the select value
|
||||
|
||||
```js
|
||||
resetOnOptionsChange: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
```
|
||||
|
||||
## `noDrop`
|
||||
|
||||
Disable the dropdown entirely.
|
||||
|
||||
```js
|
||||
noDrop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
```
|
||||
|
||||
## `inputId`
|
||||
|
||||
Sets the id of the input element.
|
||||
|
||||
```js
|
||||
inputId: {
|
||||
type: String
|
||||
},
|
||||
```
|
||||
|
||||
## `dir`
|
||||
|
||||
Sets RTL support. Accepts `ltr`, `rtl`, `auto`.
|
||||
|
||||
```js
|
||||
dir: {
|
||||
type: String,
|
||||
default: "auto"
|
||||
},
|
||||
```
|
||||
|
||||
## `selectOnTab`
|
||||
|
||||
When true, hitting the 'tab' key will select the current select value
|
||||
|
||||
```js
|
||||
selectOnTab: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
::: tip
|
||||
VueSelect 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">×</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>
|
||||
```
|
||||
@@ -1,6 +1,6 @@
|
||||
## AJAX Remote Option Loading
|
||||
|
||||
[](codepen://sagalbot/POMeOX?height=400)
|
||||
<CodePen url="POMeOX" height="40"/>
|
||||
|
||||
The `onSearch` prop allows you to load options via ajax in a parent component
|
||||
when the search text is updated. It is invoked with two parameters, `search` & `loading`.
|
||||
@@ -14,4 +14,4 @@ vue-select provides the scoped `option` slot in order to create custom dropdown
|
||||
Using the `option` slot with `slot-scope="option"` gives the
|
||||
provides the current option variable to the template.
|
||||
|
||||
[](codepen://sagalbot/NXBwYG?height=500)
|
||||
<CodePen url="NXBwYG" height="50"/>
|
||||
@@ -13,4 +13,4 @@ action, or trigger a mutation.
|
||||
></v-select>
|
||||
```
|
||||
|
||||
[](codepen://sagalbot/aJQJyp?height=500)
|
||||
<CodePen url="aJQJyp" height="50"/>
|
||||
@@ -1,4 +1,4 @@
|
||||
## Vue Compatibility
|
||||
### Vue Compatibility
|
||||
- `vue ~2.0` use `vue-select ~2.0`
|
||||
- `vue ~1.0` use `vue-select ~1.0`
|
||||
|
||||
@@ -40,4 +40,4 @@ Then register the component in your javascript:
|
||||
Vue.component('v-select', VueSelect.VueSelect);
|
||||
```
|
||||
|
||||
[](codepen://sagalbot/dJjzeP)
|
||||
<CodePen url="dJjzeP" />
|
||||
@@ -1,4 +1,4 @@
|
||||
### RTL
|
||||
## RTL
|
||||
|
||||
vue-select supports RTL using the standard HTML API using the `dir` attribute.
|
||||
|
||||
@@ -8,11 +8,11 @@ vue-select supports RTL using the standard HTML API using the `dir` attribute.
|
||||
|
||||
The `dir` attribute accepts the same values as the [HTML spec](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir): `rtl`,`ltr`, and `auto`.
|
||||
|
||||
### Component Text
|
||||
## Component Text
|
||||
|
||||
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
|
||||
### Loading Spinner
|
||||
*Slot Definition:*
|
||||
```html
|
||||
<slot name="spinner">
|
||||
@@ -26,7 +26,7 @@ All of the text within the component has been wrapped within [slots](https://vue
|
||||
</v-select>
|
||||
```
|
||||
|
||||
##### No Options Text
|
||||
### No Options Text
|
||||
*Slot Definition:*
|
||||
```html
|
||||
<slot name="no-options">Sorry, no matching options.</slot>
|
||||
@@ -38,6 +38,6 @@ All of the text within the component has been wrapped within [slots](https://vue
|
||||
</v-select>
|
||||
```
|
||||
|
||||
For a full list of component slots, view the [slots API docs](Api/Slots.md).
|
||||
For a full list of component slots, view the [slots API docs](../api/slots.md).
|
||||
|
||||
[](codepen://sagalbot/oZmLVN?height=250)
|
||||
<CodePen url="oZmLVN" height="25"/>
|
||||
@@ -1,4 +1,4 @@
|
||||
## Dropdown Options {#options}
|
||||
# Dropdown Options
|
||||
|
||||
`vue-select` accepts arrays of strings or objects to use as options through the `options` prop:
|
||||
|
||||
@@ -12,7 +12,7 @@ When provided an array of objects, `vue-select` will display a single value of t
|
||||
<v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select>
|
||||
```
|
||||
|
||||
### Option Labels {#labels}
|
||||
## Option Labels
|
||||
|
||||
When the `options` array contains objects, `vue-select` looks for the `label` key to display by default. You can set your own label to match your source data using the `label` prop.
|
||||
|
||||
@@ -31,10 +31,10 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
|
||||
<v-select label="countryName" :options="countries"></v-select>
|
||||
```
|
||||
|
||||
[](codepen://sagalbot/aEjLPB?height=500)
|
||||
<CodePen url="aEjLPB" height="50"/>
|
||||
|
||||
|
||||
### Option index {#values}
|
||||
## Option Object Key
|
||||
|
||||
When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection. You can specify your own `index` prop to return only the value contained in the specific property.
|
||||
|
||||
@@ -53,7 +53,6 @@ If you wanted to return `CA` in the dropdown when `Canada` is selected, you'd us
|
||||
<v-select index="value" :options="countries"></v-select>
|
||||
```
|
||||
|
||||
|
||||
### Null / Empty Options {#null}
|
||||
## Null / Empty Options
|
||||
|
||||
`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 `[]`.
|
||||
@@ -1,4 +1,4 @@
|
||||
## Selecting Values {#single}
|
||||
# Selecting Values
|
||||
|
||||
The most common use case for `vue-select` is to have the chosen value synced with a parent component. `vue-select` takes advantage of the `v-model` syntax to sync values with a parent.
|
||||
|
||||
@@ -6,7 +6,7 @@ The most common use case for `vue-select` is to have the chosen value synced wit
|
||||
<v-select v-model="selected"></v-select>
|
||||
```
|
||||
|
||||
[](codepen://sagalbot/Kqxbjw?height=250)
|
||||
<CodePen url="Kqxbjw" height="25"/>
|
||||
|
||||
If you don't require the `value` to be synced, you can also pass the prop directly:
|
||||
|
||||
@@ -16,7 +16,7 @@ If you don't require the `value` to be synced, you can also pass the prop direct
|
||||
|
||||
This method allows you to pre-select a value(s), without syncing any changes to the parent component. This is also very useful when using a state management tool, like Vuex.
|
||||
|
||||
### Single/Multiple Selection {#multiple}
|
||||
## Single/Multiple Selection
|
||||
|
||||
By default, `vue-select` supports choosing a single value. If you need multiple values, use the `multiple` prop:
|
||||
|
||||
@@ -24,9 +24,9 @@ By default, `vue-select` supports choosing a single value. If you need multiple
|
||||
<v-select multiple v-model="selected"></v-select>
|
||||
```
|
||||
|
||||
[](codepen://sagalbot/opMGro?height=250)
|
||||
<CodePen url="opMGro" height="25"/>
|
||||
|
||||
### Tagging {#tagging}
|
||||
## Tagging
|
||||
|
||||
To allow input that's not present within the options, set the `taggable` prop to true.
|
||||
If you want new tags to be pushed to the options list, set `push-tags` to true.
|
||||
@@ -35,4 +35,23 @@ If you want new tags to be pushed to the options list, set `push-tags` to true.
|
||||
<v-select taggable></v-select>
|
||||
```
|
||||
|
||||
[](codepen://sagalbot/XVoWxm?height=350)
|
||||
## Return a Single Key from an Object
|
||||
|
||||
<CodePen url="XVoWxm" height="35"/>
|
||||
|
||||
When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection. You can specify your own `index` prop to return only the value contained in the specific property.
|
||||
|
||||
For example, consider an object with `value` and `label` properties:
|
||||
|
||||
```json
|
||||
{
|
||||
value: "CA",
|
||||
label: "Canada"
|
||||
}
|
||||
```
|
||||
|
||||
If you wanted to return `CA` in the dropdown when `Canada` is selected, you'd use the `index` key:
|
||||
|
||||
```html
|
||||
<v-select index="value" :options="countries"></v-select>
|
||||
```
|
||||
@@ -0,0 +1 @@
|
||||
<CodePen url="zZQJKW" height="60"/>
|
||||
@@ -1 +0,0 @@
|
||||
[](codepen://sagalbot/zZQJKW?height=600)
|
||||
@@ -1,290 +0,0 @@
|
||||
## Select
|
||||
|
||||
```js
|
||||
/**
|
||||
* Contains the currently selected value. Very similar to a
|
||||
* `value` attribute on an <input>. You can listen for changes
|
||||
* using 'change' event using v-on
|
||||
* @type {Object||String||null}
|
||||
*/
|
||||
value: {
|
||||
default: null
|
||||
},
|
||||
|
||||
/**
|
||||
* An array of strings or objects to be used as dropdown choices.
|
||||
* If you are using an array of objects, vue-select will look for
|
||||
* a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A
|
||||
* custom label key can be set with the `label` prop.
|
||||
* @type {Array}
|
||||
*/
|
||||
options: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Disable the entire component.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the max-height property on the dropdown list.
|
||||
* @deprecated
|
||||
* @type {String}
|
||||
*/
|
||||
maxHeight: {
|
||||
type: String,
|
||||
default: '400px'
|
||||
},
|
||||
|
||||
/**
|
||||
* Enable/disable filtering the options.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
searchable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Equivalent to the `multiple` attribute on a `<select>` input.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Equivalent to the `placeholder` attribute on an `<input>`.
|
||||
* @type {String}
|
||||
*/
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets a Vue transition property on the `.dropdown-menu`. vue-select
|
||||
* does not include CSS for transitions, you'll need to add them yourself.
|
||||
* @type {String}
|
||||
*/
|
||||
transition: {
|
||||
type: String,
|
||||
default: 'fade'
|
||||
},
|
||||
|
||||
/**
|
||||
* Enables/disables clearing the search text when an option is selected.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
clearSearchOnSelect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Close a dropdown when an option is chosen. Set to false to keep the dropdown
|
||||
* open (useful when combined with multi-select, for example)
|
||||
* @type {Boolean}
|
||||
*/
|
||||
closeOnSelect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Tells vue-select what key to use when generating option
|
||||
* labels when each `option` is an object.
|
||||
* @type {String}
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
|
||||
/**
|
||||
* Callback to generate the label text. If {option}
|
||||
* is an object, returns option[this.label] by default.
|
||||
* @type {Function}
|
||||
* @param {Object || String} option
|
||||
* @return {String}
|
||||
*/
|
||||
getOptionLabel: {
|
||||
type: Function,
|
||||
default(option) {
|
||||
if (typeof option === 'object') {
|
||||
if (!option.hasOwnProperty(this.label)) {
|
||||
return console.warn(
|
||||
`[vue-select warn]: Label key "option.${this.label}" does not` +
|
||||
` exist in options object ${JSON.stringify(option)}.\n` +
|
||||
'http://sagalbot.github.io/vue-select/#ex-labels'
|
||||
)
|
||||
}
|
||||
if (this.label && option[this.label]) {
|
||||
return option[this.label]
|
||||
}
|
||||
}
|
||||
return option;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Callback to filter the search result the label text.
|
||||
* @type {Function}
|
||||
* @param {Object || String} option
|
||||
* @param {String} label
|
||||
* @param {String} search
|
||||
* @return {Boolean}
|
||||
*/
|
||||
filterFunction: {
|
||||
type: Function,
|
||||
default(option, label, search) {
|
||||
return (label || '').toLowerCase().indexOf(search.toLowerCase()) > -1
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* An optional callback function that is called each time the selected
|
||||
* value(s) change. When integrating with Vuex, use this callback to trigger
|
||||
* an action, rather than using :value.sync to retreive the selected value.
|
||||
* @type {Function}
|
||||
* @param {Object || String} val
|
||||
*/
|
||||
onChange: {
|
||||
type: Function,
|
||||
default: function (val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Enable/disable creating options from searchInput.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
taggable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Set the tabindex for the input field.
|
||||
* @type {Number}
|
||||
*/
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
|
||||
/**
|
||||
* When true, newly created tags will be added to
|
||||
* the options list.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
pushTags: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* When true, existing options will be filtered
|
||||
* by the search text. Should not be used in conjunction
|
||||
* with taggable.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
filterable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
/**
|
||||
* User defined function for adding Options
|
||||
* @type {Function}
|
||||
*/
|
||||
createOption: {
|
||||
type: Function,
|
||||
default(newOption) {
|
||||
if (typeof this.mutableOptions[0] === 'object') {
|
||||
newOption = {[this.label]: newOption}
|
||||
}
|
||||
this.$emit('option:created', newOption)
|
||||
return newOption
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* When false, updating the options will not reset the select value
|
||||
* @type {Boolean}
|
||||
*/
|
||||
resetOnOptionsChange: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Disable the dropdown entirely.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
noDrop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the id of the input element.
|
||||
* @type {String}
|
||||
* @default {null}
|
||||
*/
|
||||
inputId: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets RTL support. Accepts 'ltr', 'rtl', 'auto'.
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
|
||||
* @type {String}
|
||||
* @default 'auto'
|
||||
*/
|
||||
dir: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
```
|
||||
|
||||
## AJAX
|
||||
|
||||
```js
|
||||
/**
|
||||
* Toggles the adding of a 'loading' class to the main
|
||||
* .v-select wrapper. Useful to control UI state when
|
||||
* results are being processed through AJAX.
|
||||
*/
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Accept a callback function that will be
|
||||
* run when the search text changes.
|
||||
*
|
||||
* loading() accepts a boolean value, and can
|
||||
* be used to toggle a loading class from
|
||||
* the onSearch callback.
|
||||
*
|
||||
* @param {search} String Current search text
|
||||
* @param {loading} Function(bool) Toggle loading class
|
||||
*/
|
||||
onSearch: {
|
||||
type: Function,
|
||||
default: function(search, loading){}
|
||||
}
|
||||
```
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
name,type
|
||||
value,Object||String||null
|
||||
options,Array
|
||||
disabled,Boolean
|
||||
maxHeight,String
|
||||
searchable,Boolean
|
||||
multiple,Boolean
|
||||
placeholder,String
|
||||
transition,String
|
||||
clearSearchOnSelect,Boolean
|
||||
closeOnSelect,Boolean
|
||||
label,String
|
||||
getOptionLabel,Function
|
||||
filterFunction,Function
|
||||
filter,Function
|
||||
onChange,Function
|
||||
taggable,Boolean
|
||||
tabindex,Number
|
||||
pushTags,Boolean
|
||||
filterable,Boolean
|
||||
createOption,Function
|
||||
resetOnOptionsChange,Boolean
|
||||
noDrop,Boolean
|
||||
inputId,String
|
||||
dir,String
|
||||
|
@@ -1 +0,0 @@
|
||||
## Getting Started
|
||||
@@ -1,228 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
|
||||
|
||||
body {
|
||||
letter-spacing: 0;
|
||||
color: #34495e;
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #34495e;
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* LANGS.md index page */
|
||||
.book-langs-index {
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
.book-langs-index .inner .languages {
|
||||
padding: 20px 0px;
|
||||
}
|
||||
.book-langs-index .inner .languages li {
|
||||
float: none;
|
||||
}
|
||||
li a {
|
||||
color: #42b983;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* set correct fonts on sidebar and main page */
|
||||
.book .book-body .page-wrapper .page-inner section.normal, .book-summary { font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; }
|
||||
|
||||
/* sidebar */
|
||||
.book-summary ul.summary li a,
|
||||
.book-summary ul.summary li span {
|
||||
color: #7f8c8d;
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
.book .book-summary ul.summary li span {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.book-summary ul.summary li.active>a {
|
||||
color: #42b983;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#book-search-input { background-color: #fafafa; }
|
||||
.book-summary { background-color: #fff; }
|
||||
|
||||
/* markdown content found on pages */
|
||||
.markdown-section h1,
|
||||
.markdown-section h2,
|
||||
.markdown-section h3,
|
||||
.markdown-section h4,
|
||||
.markdown-section strong {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
.markdown-section a {
|
||||
color: #42b983;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-section p,
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
word-spacing: 0.05em;
|
||||
}
|
||||
.markdown-section em {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.markdown-section pre {
|
||||
padding: 1.2em 1.4em;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown-section code, .markdown-section pre {
|
||||
font-family: 'Roboto Mono', Monaco, courier, monospace;
|
||||
-webkit-font-smoothing: initial;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
code span.css,
|
||||
code span.javascript,
|
||||
code span.html,
|
||||
span[class^="hljs-"] {
|
||||
-webkit-font-smoothing: initial;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
}
|
||||
.markdown-section pre>code {
|
||||
font-size: 0.8em;
|
||||
display: block;
|
||||
}
|
||||
.markdown-section code:after, .markdown-section code:before {
|
||||
content: none;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family: 'Roboto Mono', Monaco, courier, monospace;
|
||||
font-size: 0.8em;
|
||||
background-color: #f8f8f8;
|
||||
-webkit-font-smoothing: initial;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
}
|
||||
code {
|
||||
color: #e96900;
|
||||
padding: 3px 5px;
|
||||
margin: 0 2px;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
code .token {
|
||||
min-height: 1.5em;
|
||||
-webkit-font-smoothing: initial;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
}
|
||||
pre code { position: relative; }
|
||||
pre code.lang-html:after,
|
||||
pre code.lang-js:after,
|
||||
pre code.lang-bash:after,
|
||||
pre code.lang-css:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #ccc;
|
||||
text-align: right;
|
||||
font-size: 0.75em;
|
||||
padding: 5px 10px 0;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
pre code.lang-html:after {
|
||||
content: 'HTML';
|
||||
}
|
||||
pre code.lang-js:after {
|
||||
content: 'JS';
|
||||
}
|
||||
pre code.lang-bash:after {
|
||||
content: 'Shell';
|
||||
}
|
||||
pre code.lang-css:after {
|
||||
content: 'CSS';
|
||||
}
|
||||
.content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.content span.light {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
.content span.info {
|
||||
font-size: 0.85em;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 280px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.markdown-section h1 {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
.markdown-section h2 {
|
||||
margin: 45px 0 0.8em;
|
||||
padding-bottom: 0.7em;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.markdown-section h3 {
|
||||
margin: 52px 0 1.2em;
|
||||
}
|
||||
.markdown-section figure,
|
||||
.markdown-section p,
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
.markdown-section p,
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
line-height: 1.6em;
|
||||
}
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
.markdown-section a {
|
||||
color: #42b983;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-section blockquote {
|
||||
margin: 2em 0;
|
||||
padding-left: 20px;
|
||||
border-left: 4px solid #42b983;
|
||||
}
|
||||
.markdown-section blockquote p {
|
||||
font-weight: 600;
|
||||
margin-left: 0;
|
||||
}
|
||||
.markdown-section iframe {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/* these aren't in gitbook at the moment, but leaving them in for future reference */
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
.highlight {
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
background-color: #f8f8f8;
|
||||
padding: 0.8em 0.8em 0.4em;
|
||||
line-height: 1.1em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.highlight table,
|
||||
.highlight tr,
|
||||
.highlight td {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.highlight .gutter {
|
||||
width: 1.5em;
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Vue Select | VueJS Select2 Component</title>
|
||||
|
||||
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/css?family=Dosis:300&text=Vue Select" rel="stylesheet" type="text/css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<meta name="title" content="Vue Select | VueJS Select2/Chosen Component">
|
||||
<meta name="description"
|
||||
content="A well-tested, native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
|
||||
|
||||
<link rel="icon" href="static/vue-logo.png" type="image/png">
|
||||
<meta property="og:image" content="static/vue-logo.png">
|
||||
<meta property="twitter:image" content="static/vue-logo.png">
|
||||
|
||||
<meta name="description"
|
||||
content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
|
||||
<meta property="og:description"
|
||||
content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
|
||||
<meta property="twitter:description"
|
||||
content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
|
||||
|
||||
<meta property="twitter:title" content="Vue Select | VueJS Select2/Chosen Component">
|
||||
<meta property="og:title" content="Vue Select | VueJS Select2/Chosen Component">
|
||||
<meta property="og:site_name" content="Vue Select | VueJS Select2/Chosen Component">
|
||||
<meta property="og:url" content="http://sagalbot.github.io/vue-select/">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
<h1>Vue Select</h1>
|
||||
|
||||
<p class="accolades lead">
|
||||
<a href="https://github.com/sagalbot/vue-select">
|
||||
<img src="https://img.shields.io/github/stars/sagalbot/vue-select.svg?label=Stars&style=flat-square"
|
||||
alt="GitHub Stars">
|
||||
</a>
|
||||
<a href="https://www.npmjs.com/package/vue-select">
|
||||
<img src="https://img.shields.io/npm/dm/vue-select.svg?style=flat-square" alt="Downloads per Month">
|
||||
</a>
|
||||
<a href="https://codeclimate.com/github/sagalbot/vue-select/maintainability">
|
||||
<img src="https://img.shields.io/codeclimate/maintainability/sagalbot/vue-select.svg?style=flat-square"
|
||||
alt="Maintainability"/>
|
||||
</a>
|
||||
<a href="https://gemnasium.com/github.com/sagalbot/vue-select">
|
||||
<img src="https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square"
|
||||
alt="No Dependencies"/>
|
||||
</a>
|
||||
<img src="https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square" alt="MIT License">
|
||||
<img src="https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square"
|
||||
alt="Current Release">
|
||||
</p>
|
||||
|
||||
<p class="lead">
|
||||
A Vue.js select component that provides similar functionality
|
||||
to Select2/Chosen without the overhead of jQuery.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<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 Algorithms</li>
|
||||
</ul>
|
||||
|
||||
<ul class="list-vue">
|
||||
<li>+95% Test Coverage</li>
|
||||
<li>Select Single/Multiple</li>
|
||||
<li>Typeahead Suggestions</li>
|
||||
<li>Supports RTL & Translations</li>
|
||||
<li>Plays nice with CSS Frameworks</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
And so much more! Get started with: <br>
|
||||
<code>yarn add vue-select</code>
|
||||
</p>
|
||||
|
||||
<div class="cta">
|
||||
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
|
||||
<span class="octicon octicon-mark-github"></span> View on GitHub
|
||||
</a>
|
||||
|
||||
<a class="btn btn-primary btn-outline btn-lg" href="docs/">
|
||||
<span class="octicon octicon-book"></span> Read the Docs
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
(function (i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function () {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
ga('create', 'UA-12818324-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
import './assets/scss/home.scss'
|
||||
|
||||
Vue.component('v-select', vSelect);
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
selected: null,
|
||||
options: [
|
||||
{
|
||||
title: 'Read the Docs',
|
||||
icon: 'octicon-book',
|
||||
url: 'docs/'
|
||||
},
|
||||
{
|
||||
title: 'View on GitHub',
|
||||
icon: 'octicon-mark-github',
|
||||
url: 'https://github.com/sagalbot/vue-select'
|
||||
},
|
||||
{
|
||||
title: 'View on NPM',
|
||||
icon: 'octicon-database',
|
||||
url: 'https://www.npmjs.com/package/vue-select'
|
||||
},
|
||||
{
|
||||
title: 'View Code Climate Analysis',
|
||||
icon: 'octicon-graph',
|
||||
url: 'https://codeclimate.com/github/sagalbot/vue-select'
|
||||
},
|
||||
{
|
||||
title: 'View Codepen Examples',
|
||||
icon: 'octicon-pencil',
|
||||
url: 'https://codepen.io/collection/nrkgxV/'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
redirect(option) {
|
||||
window.location = option.url;
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user