mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
Update yarn dev command and environment
This commit is contained in:
Jeff
+130
@@ -0,0 +1,130 @@
|
|||||||
|
<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}}
|
||||||
|
</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>
|
||||||
|
</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";
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</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";*/
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
<!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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-select {
|
|
||||||
width: 25em;
|
|
||||||
margin: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
+5
-47
@@ -1,50 +1,8 @@
|
|||||||
import Vue from 'vue'
|
import Vue from "vue";
|
||||||
import Fuse from 'fuse.js'
|
import Dev from "./Dev.vue";
|
||||||
import debounce from 'lodash/debounce'
|
|
||||||
import resource from 'vue-resource'
|
|
||||||
import vSelect from '../src/components/Select.vue'
|
|
||||||
import countries from './data/countryCodes'
|
|
||||||
import fuseSearchOptions from './data/books'
|
|
||||||
|
|
||||||
Vue.use(resource)
|
Vue.config.productionTip = false;
|
||||||
Vue.component('v-select', vSelect)
|
|
||||||
|
|
||||||
/* eslint-disable no-new */
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
render: h => h(Dev)
|
||||||
data: {
|
}).$mount("#app");
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
+2
-2
@@ -3,8 +3,8 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"serve": "vue-cli-service serve ./dev/dev.js",
|
||||||
"build": "vue-cli-service build",
|
"build": "vue-cli-service build --target lib ./src/index.js",
|
||||||
"lint": "vue-cli-service lint",
|
"lint": "vue-cli-service lint",
|
||||||
"test:unit": "vue-cli-service test:unit"
|
"test:unit": "vue-cli-service test:unit"
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user