mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-19 09:50:33 +03:00
might as well just do it all in once commit 🤷♂️
This commit is contained in:
Jeff
+2
-5
@@ -22,9 +22,6 @@ yarn-error.log*
|
|||||||
# Project specific
|
# Project specific
|
||||||
coverage
|
coverage
|
||||||
test/unit/coverage
|
test/unit/coverage
|
||||||
.coveralls.yml
|
package-lock.json
|
||||||
.flowconfig
|
|
||||||
docs/gitbook/_book
|
|
||||||
docs/node_modules
|
|
||||||
site
|
|
||||||
dev/dist
|
dev/dist
|
||||||
|
docs/.vuepress/dist
|
||||||
|
|||||||
@@ -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';
|
@import 'variables';
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
[v-cloak] {
|
[v-cloak] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
#home {
|
||||||
|
min-height: 100vh;
|
||||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
@@ -21,12 +17,13 @@ body {
|
|||||||
background: $blue;
|
background: $blue;
|
||||||
background: $gradient;
|
background: $gradient;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
.container {
|
||||||
text-align: center;
|
|
||||||
max-width: 50em;
|
max-width: 50em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,3 +1,9 @@
|
|||||||
|
---
|
||||||
|
layout: HomePage
|
||||||
|
navbar: false
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
# vue-select
|
# 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
|
## 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
|
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`.
|
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
|
Using the `option` slot with `slot-scope="option"` gives the
|
||||||
provides the current option variable to the template.
|
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>
|
></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 ~2.0` use `vue-select ~2.0`
|
||||||
- `vue ~1.0` use `vue-select ~1.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);
|
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.
|
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`.
|
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.
|
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:*
|
*Slot Definition:*
|
||||||
```html
|
```html
|
||||||
<slot name="spinner">
|
<slot name="spinner">
|
||||||
@@ -26,7 +26,7 @@ All of the text within the component has been wrapped within [slots](https://vue
|
|||||||
</v-select>
|
</v-select>
|
||||||
```
|
```
|
||||||
|
|
||||||
##### No Options Text
|
### No Options Text
|
||||||
*Slot Definition:*
|
*Slot Definition:*
|
||||||
```html
|
```html
|
||||||
<slot name="no-options">Sorry, no matching options.</slot>
|
<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>
|
</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:
|
`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>
|
<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.
|
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>
|
<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.
|
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>
|
<v-select index="value" :options="countries"></v-select>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Null / Empty Options
|
||||||
### 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 `[]`.
|
`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.
|
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>
|
<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:
|
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.
|
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:
|
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>
|
<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.
|
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.
|
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>
|
<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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
# Global settings applied to the whole site.
|
||||||
|
#
|
||||||
|
# “publish” is the directory to publish (relative to root of your repo),
|
||||||
|
# “command” is your build command,
|
||||||
|
|
||||||
|
[build]
|
||||||
|
publish = "dev/dist"
|
||||||
|
command = "yarn build:dev"
|
||||||
|
|
||||||
|
# Production context: All deploys to the main
|
||||||
|
# repository branch will inherit these settings.
|
||||||
|
[context.branch-site]
|
||||||
|
publish = "docs/.vuepress/dist"
|
||||||
|
command = "yarn build:docs"
|
||||||
+6
-1
@@ -4,8 +4,10 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve ./dev/dev.js",
|
"serve": "vue-cli-service serve ./dev/dev.js",
|
||||||
|
"serve:docs": "vuepress dev docs",
|
||||||
"build": "vue-cli-service build --target lib ./src/index.js",
|
"build": "vue-cli-service build --target lib ./src/index.js",
|
||||||
"build:dev": "vue-cli-service build --dest ./dev/dist ./dev/dev.js ",
|
"build:dev": "vue-cli-service build --dest ./dev/dist ./dev/dev.js ",
|
||||||
|
"build:docs": "vuepress build docs",
|
||||||
"lint": "vue-cli-service lint",
|
"lint": "vue-cli-service lint",
|
||||||
"test": "vue-cli-service test:unit"
|
"test": "vue-cli-service test:unit"
|
||||||
},
|
},
|
||||||
@@ -26,10 +28,13 @@
|
|||||||
"gh-pages": "^0.11.0",
|
"gh-pages": "^0.11.0",
|
||||||
"lint-staged": "^7.2.0",
|
"lint-staged": "^7.2.0",
|
||||||
"lodash": "^4.17.10",
|
"lodash": "^4.17.10",
|
||||||
|
"node-sass": "^4.9.3",
|
||||||
"normalize.css": "^7.0.0",
|
"normalize.css": "^7.0.0",
|
||||||
"prismjs": "^1.15.0",
|
"prismjs": "^1.15.0",
|
||||||
|
"sass-loader": "^7.1.0",
|
||||||
"vue-select": "*",
|
"vue-select": "*",
|
||||||
"vue-template-compiler": "^2.5.17"
|
"vue-template-compiler": "^2.5.17",
|
||||||
|
"vuepress": "^0.14.1"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"root": true,
|
"root": true,
|
||||||
|
|||||||
Reference in New Issue
Block a user