mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-16 09:10:33 +03:00
Sass & Class Renames (#759)
* - add autoprefixer - add cssnano - add postcss-loader - remove unused packages * create RTL scss module * add vs__ prefix to open-indicator, extract to module * module for dropdown-toggle * vs__clear module * vs__dropdown-menu module * rename `selected-tag` to `vs__selected` * remove rtl class * remove dropdown class * search-input scss module * move animations to global module * refactor dropdown list items * - spinner slot is now scoped with `loading` variable - move spinner to scss module * apply vs__search class directly to search input: if you're using the slot, you might not want default styles * finish global modules * make RTL a component state * - update component states to use vs-- prefix - rename dropdownClasses to stateClasses * remove unused property * Closes #760 * fix states * more state fixes * rename .close to vs__deselect * - simplify dev.html - start on 'sandbox' development * update build * - update webpack config - move Sandbox to VuePress folder * update external framework version links * assign grid areas, ensure 100% height outside of docs * limit specificity * first pass at assigning variables * assign 'darkest' * remove max-height prop * rename 'component' variables to 'state' * update badges * add deprecation notice to docs * bump travis config * add coveralls coverage reporter * bump netlify config * additional pass pulling up to variables * start converting to SVG icons * middle align action icons * update netlify config * netlify bump * fix travis * fix travis * try lcov * netlify attempt * prune old packages * bump travis config
This commit is contained in:
Jeff Sagal
@@ -1,123 +0,0 @@
|
||||
<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,281 @@
|
||||
<template>
|
||||
<div id="sandbox-wrap">
|
||||
<div id="config">
|
||||
|
||||
<div class="list-item" v-if="!hideHelp">
|
||||
<p>Use the controls below to adjust the props used
|
||||
by the vue-select components.</p>
|
||||
<p>The API provides
|
||||
more props than are shown here, these are some
|
||||
commonly adjusted settings.</p>
|
||||
</div>
|
||||
|
||||
<h5 class="list-item">Basic Features</h5>
|
||||
|
||||
<div class="list-item">
|
||||
<label for="multiple">
|
||||
<input id="multiple" type="checkbox" v-model="configuration.multiple">
|
||||
<code>:multiple="{{ configuration.multiple ? 'true' : 'false' }}"</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<label for="disabled">
|
||||
<input id="disabled" type="checkbox" v-model="configuration.disabled">
|
||||
<code>:disabled="{{ configuration.disabled ? 'true' : 'false' }}"</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<label for="clearable">
|
||||
<input id="clearable" type="checkbox" v-model="configuration.clearable">
|
||||
<code>:clearable="{{ configuration.clearable ? 'true' : 'false' }}"</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<label for="searchable">
|
||||
<input id="searchable" type="checkbox" v-model="configuration.searchable">
|
||||
<code>:searchable="{{ configuration.searchable ? 'true' : 'false' }}"</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<label for="filterable">
|
||||
<input id="filterable" type="checkbox" v-model="configuration.filterable">
|
||||
<code>:filterable="{{ configuration.searchable ? 'true' : 'false' }}"</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h5 class="list-item">Tagging</h5>
|
||||
|
||||
<div class="list-item">
|
||||
<label for="taggable">
|
||||
<input id="taggable" type="checkbox" v-model="configuration.taggable">
|
||||
<code>:taggable="{{ configuration.taggable ? 'true' : 'false' }}"</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<label for="noDrop">
|
||||
<input id="noDrop" type="checkbox" v-model="configuration.noDrop">
|
||||
<code>:no-drop="{{ configuration.noDrop ? 'true' : 'false' }}"</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<label for="pushTags">
|
||||
<input id="pushTags" type="checkbox" v-model="configuration.pushTags">
|
||||
<code>:push-tags="{{ configuration.pushTags ? 'true' : 'false' }}"</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h5 class="list-item">UX</h5>
|
||||
|
||||
<div class="list-item">
|
||||
<label for="selectOnTab">
|
||||
<input id="selectOnTab" type="checkbox" v-model="configuration.selectOnTab">
|
||||
<code>:select-on-tab="{{ configuration.selectOnTab ? 'true' : 'false' }}"</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<label for="closeOnSelect">
|
||||
<input id="closeOnSelect" type="checkbox" v-model="configuration.closeOnSelect">
|
||||
<code>:close-on-select="{{ configuration.closeOnSelect ? 'true' : 'false' }}"</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h5 class="list-item">Localization / i18n</h5>
|
||||
|
||||
<div class="list-item">
|
||||
<label for="rtl">
|
||||
<input id="rtl" type="radio" v-model="configuration.dir" value="rtl">
|
||||
<code>dir="rtl"</code>
|
||||
</label>
|
||||
<label for="ltr">
|
||||
<input id="ltr" type="radio" v-model="configuration.dir" value="ltr">
|
||||
<code>dir="ltr"</code>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sandbox">
|
||||
<slot v-bind="configuration">
|
||||
<div class="example">
|
||||
<v-select v-bind="configuration" placeholder="country objects"></v-select>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<v-select v-bind="configuration" placeholder="country objects, using option scoped slots">
|
||||
<template slot="selected-option" slot-scope="{ label, value }">
|
||||
{{ label }} -- {{ value }}
|
||||
</template>
|
||||
<template slot="option" slot-scope="{ label, value }">
|
||||
{{ label }} ({{ value }})
|
||||
</template>
|
||||
</v-select>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<v-select v-bind="configuration" :options="['cat', 'dog', 'bear']" placeholder="string options, option slots">
|
||||
<template slot="selected-option" slot-scope="{ label }">
|
||||
{{ label }}
|
||||
</template>
|
||||
<template slot="option" slot-scope="{ label }">
|
||||
{{ label }}
|
||||
</template>
|
||||
</v-select>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<v-select v-bind="configuration" :options="[1,5,10]" placeholder="options=[1,5,10]"></v-select>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<v-select v-bind="configuration" label="title" :options="optionDataSets.books" :filter="fuseSearch"
|
||||
placeholder="advanced filtering w/ fuse.js + scoped slots">
|
||||
<template slot="option" slot-scope="option">
|
||||
<strong>{{ option.title }}</strong><br>
|
||||
<em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
|
||||
</template>
|
||||
</v-select>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<v-select
|
||||
v-bind="configuration"
|
||||
placeholder="search github repositories.."
|
||||
label="full_name"
|
||||
@search="search"
|
||||
:options="ajaxRes"
|
||||
>
|
||||
</v-select>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<v-select v-bind="configuration" :options="[]" placeholder="options=[]"></v-select>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Fuse from 'fuse.js';
|
||||
import debounce from 'lodash/debounce';
|
||||
import vSelect from '../../../src/components/Select.vue';
|
||||
import countries from '../data/countryCodes';
|
||||
import books from '../data/books';
|
||||
|
||||
const defaultConfig = () => ({
|
||||
options: countries,
|
||||
multiple: false,
|
||||
dir: 'ltr',
|
||||
clearable: true,
|
||||
searchable: true,
|
||||
filterable: true,
|
||||
noDrop: false,
|
||||
closeOnSelect: true,
|
||||
disabled: false,
|
||||
selectOntab: false,
|
||||
placeholder: 'placeholder',
|
||||
});
|
||||
|
||||
export default {
|
||||
props: {
|
||||
hideHelp: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
components: {vSelect},
|
||||
data () {
|
||||
return {
|
||||
configuration: defaultConfig(),
|
||||
value: null,
|
||||
ajaxRes: [],
|
||||
people: [],
|
||||
optionDataSet: 'countries',
|
||||
optionDataSets: {
|
||||
countries,
|
||||
books,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search (search, loading) {
|
||||
loading(true);
|
||||
this.getRepositories(search, loading, this);
|
||||
},
|
||||
searchPeople (search, loading) {
|
||||
loading(true);
|
||||
this.getPeople(loading, this);
|
||||
},
|
||||
getPeople: debounce((loading, vm) => {
|
||||
vm.$http.get(`https://reqres.in/api/users?per_page=10`).then(res => {
|
||||
vm.people = res.data.data;
|
||||
loading(false);
|
||||
});
|
||||
}, 250),
|
||||
getRepositories: debounce((search, loading, vm) => {
|
||||
vm.$http
|
||||
.get(`https://api.github.com/search/repositories?q=${search}`)
|
||||
.then(res => {
|
||||
vm.ajaxRes = res.data.items;
|
||||
loading(false);
|
||||
});
|
||||
}, 250),
|
||||
fuseSearch (options, search) {
|
||||
return new Fuse(options, {
|
||||
keys: ['title', 'author.firstName', 'author.lastName'],
|
||||
}).search(search);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#sandbox-wrap {
|
||||
min-height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 75%;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"sidebar component"
|
||||
}
|
||||
|
||||
#config {
|
||||
grid-area: sidebar;
|
||||
border-right: 1px solid #eaecef;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#sandbox {
|
||||
grid-area: component;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem 1rem 0;
|
||||
}
|
||||
|
||||
.list-item:not(:first-child) {
|
||||
border-top: 1px solid #eaecef;
|
||||
}
|
||||
|
||||
.example {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.v-select {
|
||||
width: 25em;
|
||||
}
|
||||
</style>
|
||||
+52
-35
@@ -1,34 +1,44 @@
|
||||
const isDeployPreview = process.env.hasOwnProperty('DEPLOY_PREVIEW');
|
||||
|
||||
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',
|
||||
description: 'Everything you wish the native <select> element could do, wrapped up into a zero dependency, highly extensible Vue component.',
|
||||
url: 'http://sagalbot.github.io/vue-select/',
|
||||
icon: '/vue-logo.png',
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
title: 'Vue Select',
|
||||
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',
|
||||
}],
|
||||
let 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', { rel: 'icon', href: `/vue-logo.png` }],
|
||||
['meta', { name: 'theme-color', content: '#3eaf7c' }],
|
||||
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
|
||||
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
|
||||
['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],
|
||||
['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
|
||||
['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
|
||||
['meta', { name: 'msapplication-TileColor', content: '#000000' }]
|
||||
];
|
||||
|
||||
if (isDeployPreview) {
|
||||
head.push(
|
||||
['meta', {name: 'robots', content: 'noindex'}],
|
||||
['meta', {name: 'googlebot', content: 'noindex'}],
|
||||
);
|
||||
} else {
|
||||
head.push(
|
||||
['meta', {name: 'title', content: meta.title}],
|
||||
['meta', {name: 'description', content: meta.description}],
|
||||
['link', {rel: 'icon', href: meta.icon, type: 'image/png'}],
|
||||
@@ -40,16 +50,24 @@ module.exports = {
|
||||
['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',
|
||||
['meta', {property: 'og:url', content: meta.url}],
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
title: 'Vue Select',
|
||||
description: meta.description,
|
||||
head,
|
||||
serviceWorker: !isDeployPreview,
|
||||
ga: isDeployPreview ? '' : 'UA-12818324-8',
|
||||
themeConfig: {
|
||||
repo: 'sagalbot/vue-select',
|
||||
editLinks: true,
|
||||
docsDir: 'docs',
|
||||
nav: [
|
||||
{text: 'Home', link: '/'},
|
||||
{text: 'Sandbox', link: '/sandbox'},
|
||||
],
|
||||
sidebar: {
|
||||
'/': [
|
||||
{
|
||||
@@ -78,11 +96,10 @@ module.exports = {
|
||||
children: [
|
||||
['api/props', 'Props'],
|
||||
['api/slots', 'Slots'],
|
||||
['api/events', 'Events']
|
||||
['api/events', 'Events'],
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
/* eslint-disable */
|
||||
export default [
|
||||
{
|
||||
title: "Old Man's War",
|
||||
author: {
|
||||
firstName: "John",
|
||||
lastName: "Scalzi"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "The Lock Artist",
|
||||
author: {
|
||||
firstName: "Steve",
|
||||
lastName: "Hamilton"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "HTML5",
|
||||
author: {
|
||||
firstName: "Remy",
|
||||
lastName: "Sharp"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Right Ho Jeeves",
|
||||
author: {
|
||||
firstName: "P.D",
|
||||
lastName: "Woodhouse"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "The Code of the Wooster",
|
||||
author: {
|
||||
firstName: "P.D",
|
||||
lastName: "Woodhouse"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Thank You Jeeves",
|
||||
author: {
|
||||
firstName: "P.D",
|
||||
lastName: "Woodhouse"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "The DaVinci Code",
|
||||
author: {
|
||||
firstName: "Dan",
|
||||
lastName: "Brown"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Angels & Demons",
|
||||
author: {
|
||||
firstName: "Dan",
|
||||
lastName: "Brown"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "The Silmarillion",
|
||||
author: {
|
||||
firstName: "J.R.R",
|
||||
lastName: "Tolkien"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Syrup",
|
||||
author: {
|
||||
firstName: "Max",
|
||||
lastName: "Barry"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "The Lost Symbol",
|
||||
author: {
|
||||
firstName: "Dan",
|
||||
lastName: "Brown"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "The Book of Lies",
|
||||
author: {
|
||||
firstName: "Brad",
|
||||
lastName: "Meltzer"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Lamb",
|
||||
author: {
|
||||
firstName: "Christopher",
|
||||
lastName: "Moore"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Fool",
|
||||
author: {
|
||||
firstName: "Christopher",
|
||||
lastName: "Moore"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Incompetence",
|
||||
author: {
|
||||
firstName: "Rob",
|
||||
lastName: "Grant"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Fat",
|
||||
author: {
|
||||
firstName: "Rob",
|
||||
lastName: "Grant"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Colony",
|
||||
author: {
|
||||
firstName: "Rob",
|
||||
lastName: "Grant"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Backwards, Red Dwarf",
|
||||
author: {
|
||||
firstName: "Rob",
|
||||
lastName: "Grant"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "The Grand Design",
|
||||
author: {
|
||||
firstName: "Stephen",
|
||||
lastName: "Hawking"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "The Book of Samson",
|
||||
author: {
|
||||
firstName: "David",
|
||||
lastName: "Maine"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "The Preservationist",
|
||||
author: {
|
||||
firstName: "David",
|
||||
lastName: "Maine"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Fallen",
|
||||
author: {
|
||||
firstName: "David",
|
||||
lastName: "Maine"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Monster 1959",
|
||||
author: {
|
||||
firstName: "David",
|
||||
lastName: "Maine"
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,246 @@
|
||||
/* eslint-disable */
|
||||
export default [
|
||||
'Afghanistan',
|
||||
'Åland Islands',
|
||||
'Albania',
|
||||
'Algeria',
|
||||
'American Samoa',
|
||||
'Andorra',
|
||||
'Angola',
|
||||
'Anguilla',
|
||||
'Antarctica',
|
||||
'Antigua and Barbuda',
|
||||
'Argentina',
|
||||
'Armenia',
|
||||
'Aruba',
|
||||
'Australia',
|
||||
'Austria',
|
||||
'Azerbaijan',
|
||||
'Bahamas',
|
||||
'Bahrain',
|
||||
'Bangladesh',
|
||||
'Barbados',
|
||||
'Belarus',
|
||||
'Belgium',
|
||||
'Belize',
|
||||
'Benin',
|
||||
'Bermuda',
|
||||
'Bhutan',
|
||||
'Bolivia',
|
||||
'Bosnia and Herzegovina',
|
||||
'Botswana',
|
||||
'Bouvet Island',
|
||||
'Brazil',
|
||||
'British Indian Ocean Territory',
|
||||
'Brunei Darussalam',
|
||||
'Bulgaria',
|
||||
'Burkina Faso',
|
||||
'Burundi',
|
||||
'Cambodia',
|
||||
'Cameroon',
|
||||
'Canada',
|
||||
'Cape Verde',
|
||||
'Cayman Islands',
|
||||
'Central African Republic',
|
||||
'Chad',
|
||||
'Chile',
|
||||
'China',
|
||||
'Christmas Island',
|
||||
'Cocos (Keeling) Islands',
|
||||
'Colombia',
|
||||
'Comoros',
|
||||
'Congo',
|
||||
'Congo, The Democratic Republic of The',
|
||||
'Cook Islands',
|
||||
'Costa Rica',
|
||||
'Cote D\'ivoire',
|
||||
'Croatia',
|
||||
'Cuba',
|
||||
'Cyprus',
|
||||
'Czech Republic',
|
||||
'Denmark',
|
||||
'Djibouti',
|
||||
'Dominica',
|
||||
'Dominican Republic',
|
||||
'Ecuador',
|
||||
'Egypt',
|
||||
'El Salvador',
|
||||
'Equatorial Guinea',
|
||||
'Eritrea',
|
||||
'Estonia',
|
||||
'Ethiopia',
|
||||
'Falkland Islands (Malvinas)',
|
||||
'Faroe Islands',
|
||||
'Fiji',
|
||||
'Finland',
|
||||
'France',
|
||||
'French Guiana',
|
||||
'French Polynesia',
|
||||
'French Southern Territories',
|
||||
'Gabon',
|
||||
'Gambia',
|
||||
'Georgia',
|
||||
'Germany',
|
||||
'Ghana',
|
||||
'Gibraltar',
|
||||
'Greece',
|
||||
'Greenland',
|
||||
'Grenada',
|
||||
'Guadeloupe',
|
||||
'Guam',
|
||||
'Guatemala',
|
||||
'Guernsey',
|
||||
'Guinea',
|
||||
'Guinea-bissau',
|
||||
'Guyana',
|
||||
'Haiti',
|
||||
'Heard Island and Mcdonald Islands',
|
||||
'Holy See (Vatican City State)',
|
||||
'Honduras',
|
||||
'Hong Kong',
|
||||
'Hungary',
|
||||
'Iceland',
|
||||
'India',
|
||||
'Indonesia',
|
||||
'Iran, Islamic Republic of',
|
||||
'Iraq',
|
||||
'Ireland',
|
||||
'Isle of Man',
|
||||
'Israel',
|
||||
'Italy',
|
||||
'Jamaica',
|
||||
'Japan',
|
||||
'Jersey',
|
||||
'Jordan',
|
||||
'Kazakhstan',
|
||||
'Kenya',
|
||||
'Kiribati',
|
||||
'Korea, Democratic People\'s Republic of',
|
||||
'Korea, Republic of',
|
||||
'Kuwait',
|
||||
'Kyrgyzstan',
|
||||
'Lao People\'s Democratic Republic',
|
||||
'Latvia',
|
||||
'Lebanon',
|
||||
'Lesotho',
|
||||
'Liberia',
|
||||
'Libyan Arab Jamahiriya',
|
||||
'Liechtenstein',
|
||||
'Lithuania',
|
||||
'Luxembourg',
|
||||
'Macao',
|
||||
'Macedonia, The Former Yugoslav Republic of',
|
||||
'Madagascar',
|
||||
'Malawi',
|
||||
'Malaysia',
|
||||
'Maldives',
|
||||
'Mali',
|
||||
'Malta',
|
||||
'Marshall Islands',
|
||||
'Martinique',
|
||||
'Mauritania',
|
||||
'Mauritius',
|
||||
'Mayotte',
|
||||
'Mexico',
|
||||
'Micronesia, Federated States of',
|
||||
'Moldova, Republic of',
|
||||
'Monaco',
|
||||
'Mongolia',
|
||||
'Montenegro',
|
||||
'Montserrat',
|
||||
'Morocco',
|
||||
'Mozambique',
|
||||
'Myanmar',
|
||||
'Namibia',
|
||||
'Nauru',
|
||||
'Nepal',
|
||||
'Netherlands',
|
||||
'Netherlands Antilles',
|
||||
'New Caledonia',
|
||||
'New Zealand',
|
||||
'Nicaragua',
|
||||
'Niger',
|
||||
'Nigeria',
|
||||
'Niue',
|
||||
'Norfolk Island',
|
||||
'Northern Mariana Islands',
|
||||
'Norway',
|
||||
'Oman',
|
||||
'Pakistan',
|
||||
'Palau',
|
||||
'Palestinian Territory, Occupied',
|
||||
'Panama',
|
||||
'Papua New Guinea',
|
||||
'Paraguay',
|
||||
'Peru',
|
||||
'Philippines',
|
||||
'Pitcairn',
|
||||
'Poland',
|
||||
'Portugal',
|
||||
'Puerto Rico',
|
||||
'Qatar',
|
||||
'Reunion',
|
||||
'Romania',
|
||||
'Russian Federation',
|
||||
'Rwanda',
|
||||
'Saint Helena',
|
||||
'Saint Kitts and Nevis',
|
||||
'Saint Lucia',
|
||||
'Saint Pierre and Miquelon',
|
||||
'Saint Vincent and The Grenadines',
|
||||
'Samoa',
|
||||
'San Marino',
|
||||
'Sao Tome and Principe',
|
||||
'Saudi Arabia',
|
||||
'Senegal',
|
||||
'Serbia',
|
||||
'Seychelles',
|
||||
'Sierra Leone',
|
||||
'Singapore',
|
||||
'Slovakia',
|
||||
'Slovenia',
|
||||
'Solomon Islands',
|
||||
'Somalia',
|
||||
'South Africa',
|
||||
'South Georgia and The South Sandwich Islands',
|
||||
'Spain',
|
||||
'Sri Lanka',
|
||||
'Sudan',
|
||||
'Suriname',
|
||||
'Svalbard and Jan Mayen',
|
||||
'Swaziland',
|
||||
'Sweden',
|
||||
'Switzerland',
|
||||
'Syrian Arab Republic',
|
||||
'Taiwan, Province of China',
|
||||
'Tajikistan',
|
||||
'Tanzania, United Republic of',
|
||||
'Thailand',
|
||||
'Timor-leste',
|
||||
'Togo',
|
||||
'Tokelau',
|
||||
'Tonga',
|
||||
'Trinidad and Tobago',
|
||||
'Tunisia',
|
||||
'Turkey',
|
||||
'Turkmenistan',
|
||||
'Turks and Caicos Islands',
|
||||
'Tuvalu',
|
||||
'Uganda',
|
||||
'Ukraine',
|
||||
'United Arab Emirates',
|
||||
'United Kingdom',
|
||||
'United States',
|
||||
'United States Minor Outlying Islands',
|
||||
'Uruguay',
|
||||
'Uzbekistan',
|
||||
'Vanuatu',
|
||||
'Venezuela',
|
||||
'Viet Nam',
|
||||
'Virgin Islands, British',
|
||||
'Virgin Islands, U.S.',
|
||||
'Wallis and Futuna',
|
||||
'Western Sahara',
|
||||
'Yemen',
|
||||
'Zambia',
|
||||
'Zimbabwe'];
|
||||
@@ -0,0 +1,247 @@
|
||||
/* eslint-disable */
|
||||
export default [
|
||||
{value: "AF", label: "Afghanistan"},
|
||||
{value: "AX", label: "Åland Islands"},
|
||||
{value: "AL", label: "Albania"},
|
||||
{value: "DZ", label: "Algeria"},
|
||||
{value: "AS", label: "American Samoa"},
|
||||
{value: "AD", label: "Andorra"},
|
||||
{value: "AO", label: "Angola"},
|
||||
{value: "AI", label: "Anguilla"},
|
||||
{value: "AQ", label: "Antarctica"},
|
||||
{value: "AG", label: "Antigua and Barbuda"},
|
||||
{value: "AR", label: "Argentina"},
|
||||
{value: "AM", label: "Armenia"},
|
||||
{value: "AW", label: "Aruba"},
|
||||
{value: "AU", label: "Australia"},
|
||||
{value: "AT", label: "Austria"},
|
||||
{value: "AZ", label: "Azerbaijan"},
|
||||
{value: "BS", label: "Bahamas"},
|
||||
{value: "BH", label: "Bahrain"},
|
||||
{value: "BD", label: "Bangladesh"},
|
||||
{value: "BB", label: "Barbados"},
|
||||
{value: "BY", label: "Belarus"},
|
||||
{value: "BE", label: "Belgium"},
|
||||
{value: "BZ", label: "Belize"},
|
||||
{value: "BJ", label: "Benin"},
|
||||
{value: "BM", label: "Bermuda"},
|
||||
{value: "BT", label: "Bhutan"},
|
||||
{value: "BO", label: "Bolivia"},
|
||||
{value: "BA", label: "Bosnia and Herzegovina"},
|
||||
{value: "BW", label: "Botswana"},
|
||||
{value: "BV", label: "Bouvet Island"},
|
||||
{value: "BR", label: "Brazil"},
|
||||
{value: "IO", label: "British Indian Ocean Territory"},
|
||||
{value: "BN", label: "Brunei Darussalam"},
|
||||
{value: "BG", label: "Bulgaria"},
|
||||
{value: "BF", label: "Burkina Faso"},
|
||||
{value: "BI", label: "Burundi"},
|
||||
{value: "KH", label: "Cambodia"},
|
||||
{value: "CM", label: "Cameroon"},
|
||||
{value: "CA", label: "Canada"},
|
||||
{value: "CV", label: "Cape Verde"},
|
||||
{value: "KY", label: "Cayman Islands"},
|
||||
{value: "CF", label: "Central African Republic"},
|
||||
{value: "TD", label: "Chad"},
|
||||
{value: "CL", label: "Chile"},
|
||||
{value: "CN", label: "China"},
|
||||
{value: "CX", label: "Christmas Island"},
|
||||
{value: "CC", label: "Cocos (Keeling) Islands"},
|
||||
{value: "CO", label: "Colombia"},
|
||||
{value: "KM", label: "Comoros"},
|
||||
{value: "CG", label: "Congo"},
|
||||
{value: "CD", label: "Congo, The Democratic Republic of The"},
|
||||
{value: "CK", label: "Cook Islands"},
|
||||
{value: "CR", label: "Costa Rica"},
|
||||
{value: "CI", label: "Cote D'ivoire"},
|
||||
{value: "HR", label: "Croatia"},
|
||||
{value: "CU", label: "Cuba"},
|
||||
{value: "CY", label: "Cyprus"},
|
||||
{value: "CZ", label: "Czech Republic"},
|
||||
{value: "DK", label: "Denmark"},
|
||||
{value: "DJ", label: "Djibouti"},
|
||||
{value: "DM", label: "Dominica"},
|
||||
{value: "DO", label: "Dominican Republic"},
|
||||
{value: "EC", label: "Ecuador"},
|
||||
{value: "EG", label: "Egypt"},
|
||||
{value: "SV", label: "El Salvador"},
|
||||
{value: "GQ", label: "Equatorial Guinea"},
|
||||
{value: "ER", label: "Eritrea"},
|
||||
{value: "EE", label: "Estonia"},
|
||||
{value: "ET", label: "Ethiopia"},
|
||||
{value: "FK", label: "Falkland Islands (Malvinas)"},
|
||||
{value: "FO", label: "Faroe Islands"},
|
||||
{value: "FJ", label: "Fiji"},
|
||||
{value: "FI", label: "Finland"},
|
||||
{value: "FR", label: "France"},
|
||||
{value: "GF", label: "French Guiana"},
|
||||
{value: "PF", label: "French Polynesia"},
|
||||
{value: "TF", label: "French Southern Territories"},
|
||||
{value: "GA", label: "Gabon"},
|
||||
{value: "GM", label: "Gambia"},
|
||||
{value: "GE", label: "Georgia"},
|
||||
{value: "DE", label: "Germany"},
|
||||
{value: "GH", label: "Ghana"},
|
||||
{value: "GI", label: "Gibraltar"},
|
||||
{value: "GR", label: "Greece"},
|
||||
{value: "GL", label: "Greenland"},
|
||||
{value: "GD", label: "Grenada"},
|
||||
{value: "GP", label: "Guadeloupe"},
|
||||
{value: "GU", label: "Guam"},
|
||||
{value: "GT", label: "Guatemala"},
|
||||
{value: "GG", label: "Guernsey"},
|
||||
{value: "GN", label: "Guinea"},
|
||||
{value: "GW", label: "Guinea-bissau"},
|
||||
{value: "GY", label: "Guyana"},
|
||||
{value: "HT", label: "Haiti"},
|
||||
{value: "HM", label: "Heard Island and Mcdonald Islands"},
|
||||
{value: "VA", label: "Holy See (Vatican City State)"},
|
||||
{value: "HN", label: "Honduras"},
|
||||
{value: "HK", label: "Hong Kong"},
|
||||
{value: "HU", label: "Hungary"},
|
||||
{value: "IS", label: "Iceland"},
|
||||
{value: "IN", label: "India"},
|
||||
{value: "ID", label: "Indonesia"},
|
||||
{value: "IR", label: "Iran, Islamic Republic of"},
|
||||
{value: "IQ", label: "Iraq"},
|
||||
{value: "IE", label: "Ireland"},
|
||||
{value: "IM", label: "Isle of Man"},
|
||||
{value: "IL", label: "Israel"},
|
||||
{value: "IT", label: "Italy"},
|
||||
{value: "JM", label: "Jamaica"},
|
||||
{value: "JP", label: "Japan"},
|
||||
{value: "JE", label: "Jersey"},
|
||||
{value: "JO", label: "Jordan"},
|
||||
{value: "KZ", label: "Kazakhstan"},
|
||||
{value: "KE", label: "Kenya"},
|
||||
{value: "KI", label: "Kiribati"},
|
||||
{value: "KP", label: "Korea, Democratic People's Republic of"},
|
||||
{value: "KR", label: "Korea, Republic of"},
|
||||
{value: "KW", label: "Kuwait"},
|
||||
{value: "KG", label: "Kyrgyzstan"},
|
||||
{value: "LA", label: "Lao People's Democratic Republic"},
|
||||
{value: "LV", label: "Latvia"},
|
||||
{value: "LB", label: "Lebanon"},
|
||||
{value: "LS", label: "Lesotho"},
|
||||
{value: "LR", label: "Liberia"},
|
||||
{value: "LY", label: "Libyan Arab Jamahiriya"},
|
||||
{value: "LI", label: "Liechtenstein"},
|
||||
{value: "LT", label: "Lithuania"},
|
||||
{value: "LU", label: "Luxembourg"},
|
||||
{value: "MO", label: "Macao"},
|
||||
{value: "MK", label: "Macedonia, The Former Yugoslav Republic of"},
|
||||
{value: "MG", label: "Madagascar"},
|
||||
{value: "MW", label: "Malawi"},
|
||||
{value: "MY", label: "Malaysia"},
|
||||
{value: "MV", label: "Maldives"},
|
||||
{value: "ML", label: "Mali"},
|
||||
{value: "MT", label: "Malta"},
|
||||
{value: "MH", label: "Marshall Islands"},
|
||||
{value: "MQ", label: "Martinique"},
|
||||
{value: "MR", label: "Mauritania"},
|
||||
{value: "MU", label: "Mauritius"},
|
||||
{value: "YT", label: "Mayotte"},
|
||||
{value: "MX", label: "Mexico"},
|
||||
{value: "FM", label: "Micronesia, Federated States of"},
|
||||
{value: "MD", label: "Moldova, Republic of"},
|
||||
{value: "MC", label: "Monaco"},
|
||||
{value: "MN", label: "Mongolia"},
|
||||
{value: "ME", label: "Montenegro"},
|
||||
{value: "MS", label: "Montserrat"},
|
||||
{value: "MA", label: "Morocco"},
|
||||
{value: "MZ", label: "Mozambique"},
|
||||
{value: "MM", label: "Myanmar"},
|
||||
{value: "NA", label: "Namibia"},
|
||||
{value: "NR", label: "Nauru"},
|
||||
{value: "NP", label: "Nepal"},
|
||||
{value: "NL", label: "Netherlands"},
|
||||
{value: "AN", label: "Netherlands Antilles"},
|
||||
{value: "NC", label: "New Caledonia"},
|
||||
{value: "NZ", label: "New Zealand"},
|
||||
{value: "NI", label: "Nicaragua"},
|
||||
{value: "NE", label: "Niger"},
|
||||
{value: "NG", label: "Nigeria"},
|
||||
{value: "NU", label: "Niue"},
|
||||
{value: "NF", label: "Norfolk Island"},
|
||||
{value: "MP", label: "Northern Mariana Islands"},
|
||||
{value: "NO", label: "Norway"},
|
||||
{value: "OM", label: "Oman"},
|
||||
{value: "PK", label: "Pakistan"},
|
||||
{value: "PW", label: "Palau"},
|
||||
{value: "PS", label: "Palestinian Territory, Occupied"},
|
||||
{value: "PA", label: "Panama"},
|
||||
{value: "PG", label: "Papua New Guinea"},
|
||||
{value: "PY", label: "Paraguay"},
|
||||
{value: "PE", label: "Peru"},
|
||||
{value: "PH", label: "Philippines"},
|
||||
{value: "PN", label: "Pitcairn"},
|
||||
{value: "PL", label: "Poland"},
|
||||
{value: "PT", label: "Portugal"},
|
||||
{value: "PR", label: "Puerto Rico"},
|
||||
{value: "QA", label: "Qatar"},
|
||||
{value: "RE", label: "Reunion"},
|
||||
{value: "RO", label: "Romania"},
|
||||
{value: "RU", label: "Russian Federation"},
|
||||
{value: "RW", label: "Rwanda"},
|
||||
{value: "SH", label: "Saint Helena"},
|
||||
{value: "KN", label: "Saint Kitts and Nevis"},
|
||||
{value: "LC", label: "Saint Lucia"},
|
||||
{value: "PM", label: "Saint Pierre and Miquelon"},
|
||||
{value: "VC", label: "Saint Vincent and The Grenadines"},
|
||||
{value: "WS", label: "Samoa"},
|
||||
{value: "SM", label: "San Marino"},
|
||||
{value: "ST", label: "Sao Tome and Principe"},
|
||||
{value: "SA", label: "Saudi Arabia"},
|
||||
{value: "SN", label: "Senegal"},
|
||||
{value: "RS", label: "Serbia"},
|
||||
{value: "SC", label: "Seychelles"},
|
||||
{value: "SL", label: "Sierra Leone"},
|
||||
{value: "SG", label: "Singapore"},
|
||||
{value: "SK", label: "Slovakia"},
|
||||
{value: "SI", label: "Slovenia"},
|
||||
{value: "SB", label: "Solomon Islands"},
|
||||
{value: "SO", label: "Somalia"},
|
||||
{value: "ZA", label: "South Africa"},
|
||||
{value: "GS", label: "South Georgia and The South Sandwich Islands"},
|
||||
{value: "ES", label: "Spain"},
|
||||
{value: "LK", label: "Sri Lanka"},
|
||||
{value: "SD", label: "Sudan"},
|
||||
{value: "SR", label: "Suriname"},
|
||||
{value: "SJ", label: "Svalbard and Jan Mayen"},
|
||||
{value: "SZ", label: "Swaziland"},
|
||||
{value: "SE", label: "Sweden"},
|
||||
{value: "CH", label: "Switzerland"},
|
||||
{value: "SY", label: "Syrian Arab Republic"},
|
||||
{value: "TW", label: "Taiwan, Province of China"},
|
||||
{value: "TJ", label: "Tajikistan"},
|
||||
{value: "TZ", label: "Tanzania, United Republic of"},
|
||||
{value: "TH", label: "Thailand"},
|
||||
{value: "TL", label: "Timor-leste"},
|
||||
{value: "TG", label: "Togo"},
|
||||
{value: "TK", label: "Tokelau"},
|
||||
{value: "TO", label: "Tonga"},
|
||||
{value: "TT", label: "Trinidad and Tobago"},
|
||||
{value: "TN", label: "Tunisia"},
|
||||
{value: "TR", label: "Turkey"},
|
||||
{value: "TM", label: "Turkmenistan"},
|
||||
{value: "TC", label: "Turks and Caicos Islands"},
|
||||
{value: "TV", label: "Tuvalu"},
|
||||
{value: "UG", label: "Uganda"},
|
||||
{value: "UA", label: "Ukraine"},
|
||||
{value: "AE", label: "United Arab Emirates"},
|
||||
{value: "GB", label: "United Kingdom"},
|
||||
{value: "US", label: "United States"},
|
||||
{value: "UM", label: "United States Minor Outlying Islands"},
|
||||
{value: "UY", label: "Uruguay"},
|
||||
{value: "UZ", label: "Uzbekistan"},
|
||||
{value: "VU", label: "Vanuatu"},
|
||||
{value: "VE", label: "Venezuela"},
|
||||
{value: "VN", label: "Viet Nam"},
|
||||
{value: "VG", label: "Virgin Islands, British"},
|
||||
{value: "VI", label: "Virgin Islands, U.S."},
|
||||
{value: "WF", label: "Wallis and Futuna"},
|
||||
{value: "EH", label: "Western Sahara"},
|
||||
{value: "YE", label: "Yemen"},
|
||||
{value: "ZM", label: "Zambia"},
|
||||
{value: "ZW", label: "Zimbabwe"},
|
||||
];
|
||||
@@ -1,47 +0,0 @@
|
||||
@import 'variables';
|
||||
|
||||
#v-select {
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
|
||||
.dropdown-toggle {
|
||||
background: #fff;
|
||||
border-color: rgba(82, 166, 183, 0.39);
|
||||
}
|
||||
|
||||
&.dropdown.open .dropdown-toggle,
|
||||
&.dropdown.open .dropdown-menu,
|
||||
&.dropdown.open .open-indicator:before {
|
||||
border-color: #4CC3D9;
|
||||
}
|
||||
.active a {
|
||||
background: rgba(50, 50, 50, .1);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.dropdown li {
|
||||
border-bottom: 1px solid rgba($code-grey, .1);
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown li a {
|
||||
padding: 10px 20px;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
.octicon {
|
||||
font-size: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
}
|
||||
&.dropdown .highlight a,
|
||||
&.dropdown li:hover a {
|
||||
background: #4CC3D9;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,17 +0,0 @@
|
||||
$orange: #e96900;
|
||||
$yellow: #FFC65D;
|
||||
$green: #42b983;
|
||||
$blue: #4CC3D9;
|
||||
$purple: #93648D;
|
||||
$black: #34495e;
|
||||
$red: #ff6666;
|
||||
|
||||
$gradient: linear-gradient(45deg, rgba(76,195,217,0) 0%,rgba(152,227,234,1) 100%);
|
||||
|
||||
// Code
|
||||
$code-blue: #66d9ef;
|
||||
$code-purple: #ae81ff;
|
||||
$code-black: #272822;
|
||||
$code-white: #f8f8f8;
|
||||
$code-grey: #708090;
|
||||
$code-green: #a6e22e;
|
||||
@@ -1,3 +0,0 @@
|
||||
@import '~normalize.css';
|
||||
@import 'demo';
|
||||
@import 'cyan_theme';
|
||||
+12
-7
@@ -1,10 +1,11 @@
|
||||
# Vue Select
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> Everything you wish the native `<select>` element could do, wrapped
|
||||
up into a zero dependency, highly extensible Vue component.
|
||||
@@ -14,17 +15,21 @@ template that fits the 80% use case for a select dropdown. Here it is by default
|
||||
|
||||
<div style="max-width:50%; margin: 0 auto; padding: 1rem 0;">
|
||||
<v-select :options="['Option One','Option Two','Option Three']" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
If you want to get a quick sense of what vue-select can do, check out
|
||||
[the sandbox](sandbox.md).
|
||||
|
||||
#### Features
|
||||
- AJAX Support
|
||||
- Tagging
|
||||
- List Filtering/Searching
|
||||
- Supports Vuex
|
||||
- Filtering/Searching
|
||||
- Vuex Support
|
||||
- AJAX Support
|
||||
- SSR Support
|
||||
- Select Single/Multiple Options
|
||||
- Tested with Bootstrap 3/4, Bulma, Foundation
|
||||
- +95% Test Coverage
|
||||
- ~33kb minified with CSS
|
||||
- ~20kb Total / ~5kb CSS / ~15kb JS
|
||||
- Zero dependencies
|
||||
|
||||
#### Resources
|
||||
|
||||
@@ -50,6 +50,11 @@ clearable: {
|
||||
|
||||
## maxHeight
|
||||
|
||||
::: warning Deprecated in `v2.x` & Removed in `v3.0`
|
||||
This prop was removed in `v3.0`. You can use the `$vs-dropdown-max-height`
|
||||
SCSS variable to adjust this setting in `v3.x`.
|
||||
:::
|
||||
|
||||
Sets the max-height property on the dropdown list.
|
||||
|
||||
```js
|
||||
|
||||
@@ -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 url="Kqxbjw" height="25"/>
|
||||
<CodePen url="Kqxbjw" height="250"/>
|
||||
|
||||
If you don't require the `value` to be synced, you can also pass the prop directly:
|
||||
|
||||
@@ -31,14 +31,10 @@ By default, `vue-select` supports choosing a single value. If you need multiple
|
||||
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.
|
||||
|
||||
```html
|
||||
<v-select taggable></v-select>
|
||||
```
|
||||
<CodePen url="XVoWxm" height="350"/>
|
||||
|
||||
## Return a Single Key from an Object
|
||||
|
||||
<CodePen url="XVoWxm" height="350"/>
|
||||
|
||||
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:
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
sidebar: false
|
||||
editLink: false
|
||||
layout: Sandbox
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user