mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +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
+20
-115
@@ -1,130 +1,35 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<v-select placeholder="default" :options="options"></v-select>
|
||||
<v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>
|
||||
<v-select placeholder="default, options=[1,5,10]" :options="[1,5,10]"></v-select>
|
||||
<v-select placeholder="multiple" multiple :options="options"></v-select>
|
||||
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
|
||||
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
|
||||
<v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>
|
||||
<v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>
|
||||
<v-select placeholder="searchable=false" :options="options" :searchable="false"></v-select>
|
||||
<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
|
||||
<v-select placeholder="custom option template" :options="options" multiple>
|
||||
<template slot="selected-option" slot-scope="option">
|
||||
{{option.label}}
|
||||
<sandbox hide-help>
|
||||
<template slot-scope="config">
|
||||
|
||||
<v-select v-bind="config" />
|
||||
|
||||
</template>
|
||||
<template slot="option" slot-scope="option">
|
||||
{{option.label}} ({{option.value}})
|
||||
</template>
|
||||
</v-select>
|
||||
<v-select placeholder="custom option template for string array" taggable :options="['cat', 'dog', 'bear']" multiple>
|
||||
<template slot="selected-option" slot-scope="option">
|
||||
{{option.label}}
|
||||
</template>
|
||||
<template slot="option" slot-scope="option">
|
||||
{{option.label}}
|
||||
</template>
|
||||
</v-select>
|
||||
<v-select multiple placeholder="custom label template" :options="options">
|
||||
<span
|
||||
slot="selected-option-container"
|
||||
slot-scope="props"
|
||||
class="selected-tag"
|
||||
>
|
||||
{{ props.option.label }} ({{ props.option.value }})
|
||||
<button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</span>
|
||||
</v-select>
|
||||
<v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select>
|
||||
<v-select placeholder="disabled" disabled value="disabled"></v-select>
|
||||
<v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
|
||||
<v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
|
||||
<v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch">
|
||||
<template slot="option" slot-scope="option">
|
||||
<strong>{{ option.title }}</strong><br>
|
||||
<em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
|
||||
</template>
|
||||
</v-select>
|
||||
</sandbox>
|
||||
</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 fuseSearchOptions from "./data/books";
|
||||
import vSelect from '../src/components/Select';
|
||||
import Sandbox from '../docs/.vuepress/components/Sandbox';
|
||||
// import countries from '../docs/.vuepress/data/countryCodes';
|
||||
// import books from '../docs/.vuepress/data/books';
|
||||
|
||||
export default {
|
||||
components: { vSelect },
|
||||
data() {
|
||||
return {
|
||||
placeholder: "placeholder",
|
||||
value: null,
|
||||
options: countries,
|
||||
ajaxRes: [],
|
||||
people: [],
|
||||
fuseSearchOptions
|
||||
};
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
components: {Sandbox, vSelect},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*@import "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css";*/
|
||||
/*@import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css";*/
|
||||
/*@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";*/
|
||||
/*@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css";*/
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-family: -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 95vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.v-select {
|
||||
width: 25em;
|
||||
margin: 1em;
|
||||
}
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,164 +0,0 @@
|
||||
/* 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"
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -1,246 +0,0 @@
|
||||
/* 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'];
|
||||
@@ -1,247 +0,0 @@
|
||||
/* 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"},
|
||||
];
|
||||
+7
-80
@@ -1,87 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Vue Select Dev</title>
|
||||
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">-->
|
||||
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">-->
|
||||
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
|
||||
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
|
||||
<style>
|
||||
|
||||
#app {
|
||||
height: 95vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
font-family: -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.v-select {
|
||||
width: 25em;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<title>Vue Select Dev</title>
|
||||
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">-->
|
||||
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">-->
|
||||
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">-->
|
||||
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<v-select placeholder="default" :options="options"></v-select>
|
||||
<v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>
|
||||
<v-select placeholder="default, options=[1,5,10]" :options="[1,5,10]"></v-select>
|
||||
<v-select placeholder="multiple" multiple :options="options"></v-select>
|
||||
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
|
||||
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
|
||||
<v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>
|
||||
<v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>
|
||||
<v-select placeholder="searchable=false" :options="options" :searchable="false"></v-select>
|
||||
<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
|
||||
<v-select placeholder="custom option template" :options="options" multiple>
|
||||
<template slot="selected-option" slot-scope="option">
|
||||
{{option.label}}
|
||||
</template>
|
||||
<template slot="option" slot-scope="option">
|
||||
{{option.label}} ({{option.value}})
|
||||
</template>
|
||||
</v-select>
|
||||
<v-select placeholder="custom option template for string array" taggable :options="['cat', 'dog', 'bear']" multiple>
|
||||
<template slot="selected-option" slot-scope="option">
|
||||
{{option.label}}
|
||||
</template>
|
||||
<template slot="option" slot-scope="option">
|
||||
{{option.label}}
|
||||
</template>
|
||||
</v-select>
|
||||
<v-select multiple placeholder="custom label template" :options="options">
|
||||
<span
|
||||
slot="selected-option-container"
|
||||
slot-scope="props"
|
||||
class="selected-tag"
|
||||
>
|
||||
{{ props.option.label }} ({{ props.option.value }})
|
||||
<button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</span>
|
||||
</v-select>
|
||||
<v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select>
|
||||
<v-select placeholder="disabled" disabled value="disabled"></v-select>
|
||||
<v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
|
||||
<v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
|
||||
<v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch">
|
||||
<template slot="option" scope="option">
|
||||
<strong>{{ option.title }}</strong><br>
|
||||
<em>{{ option.author.firstName + ' ' + option.author.lastName }}</em>
|
||||
</template>
|
||||
</v-select>
|
||||
<v-select placeholder="Vue select with no options and a custom no-option span" >
|
||||
<span slot="no-options">Custom no options message</span>
|
||||
</v-select>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user