Skip to content

Commit 046d4ce

Browse files
author
Jeff
committed
Update yarn dev command and environment
1 parent 1c15fa0 commit 046d4ce

File tree

4 files changed

+137
-132
lines changed

4 files changed

+137
-132
lines changed

‎dev/Dev.vue

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<template>
2+
<div id="app">
3+
<v-select placeholder="default" :options="options"></v-select>
4+
<v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>
5+
<v-select placeholder="default, options=[1,5,10]" :options="[1,5,10]"></v-select>
6+
<v-select placeholder="multiple" multiple :options="options"></v-select>
7+
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
8+
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
9+
<v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>
10+
<v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>
11+
<v-select placeholder="searchable=false" :options="options" :searchable="false"></v-select>
12+
<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
13+
<v-select placeholder="custom option template" :options="options" multiple>
14+
<template slot="selected-option" slot-scope="option">
15+
{{option.label}}
16+
</template>
17+
<template slot="option" slot-scope="option">
18+
{{option.label}} ({{option.value}})
19+
</template>
20+
</v-select>
21+
<v-select placeholder="custom option template for string array" taggable :options="['cat', 'dog', 'bear']" multiple>
22+
<template slot="selected-option" slot-scope="option">
23+
{{option.label}}
24+
</template>
25+
<template slot="option" slot-scope="option">
26+
{{option.label}}
27+
</template>
28+
</v-select>
29+
<v-select multiple placeholder="custom label template" :options="options">
30+
<span
31+
slot="selected-option-container"
32+
slot-scope="props"
33+
class="selected-tag"
34+
>
35+
{{ props.option.label }} ({{ props.option.value }})
36+
<button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option">
37+
<span aria-hidden="true">&times;</span>
38+
</button>
39+
</span>
40+
</v-select>
41+
<v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select>
42+
<v-select placeholder="disabled" disabled value="disabled"></v-select>
43+
<v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
44+
<v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
45+
<v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch">
46+
<template slot="option" scope="option">
47+
<strong>{{ option.title }}</strong><br>
48+
<em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
49+
</template>
50+
</v-select>
51+
</div>
52+
</template>
53+
54+
<script>
55+
import Fuse from "fuse.js";
56+
import debounce from "lodash/debounce";
57+
import vSelect from "../src/components/Select.vue";
58+
import countries from "./data/countryCodes";
59+
import fuseSearchOptions from "./data/books";
60+
61+
export default {
62+
components: { vSelect },
63+
data() {
64+
return {
65+
placeholder: "placeholder",
66+
value: null,
67+
options: countries,
68+
ajaxRes: [],
69+
people: [],
70+
fuseSearchOptions
71+
};
72+
},
73+
methods: {
74+
search(search, loading) {
75+
loading(true);
76+
this.getRepositories(search, loading, this);
77+
},
78+
searchPeople(search, loading) {
79+
loading(true);
80+
this.getPeople(loading, this);
81+
},
82+
getPeople: debounce((loading, vm) => {
83+
vm.$http.get(`https://reqres.in/api/users?per_page=10`).then(res => {
84+
vm.people = res.data.data;
85+
loading(false);
86+
});
87+
}, 250),
88+
getRepositories: debounce((search, loading, vm) => {
89+
vm.$http
90+
.get(`https://api.github.com/search/repositories?q=${search}`)
91+
.then(res => {
92+
vm.ajaxRes = res.data.items;
93+
loading(false);
94+
});
95+
}, 250),
96+
fuseSearch(options, search) {
97+
return new Fuse(options, {
98+
keys: ["title", "author.firstName", "author.lastName"]
99+
}).search(search);
100+
}
101+
}
102+
};
103+
</script>
104+
105+
<style>
106+
/*@import "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css";*/
107+
/*@import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css";*/
108+
/*@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";*/
109+
/*@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css";*/
110+
111+
body,
112+
html {
113+
font-family: -apple-system, sans-serif;
114+
}
115+
116+
#app {
117+
height: 95vh;
118+
display: flex;
119+
flex-direction: column;
120+
align-items: center;
121+
justify-content: flex-start;
122+
flex-wrap: wrap;
123+
align-content: center;
124+
}
125+
126+
.v-select {
127+
width: 25em;
128+
margin: 1em;
129+
}
130+
</style>

‎dev/dev.html

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎dev/dev.js

Lines changed: 5 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,8 @@
1-
import Vue from 'vue'
2-
import Fuse from 'fuse.js'
3-
import debounce from 'lodash/debounce'
4-
import resource from 'vue-resource'
5-
import vSelect from '../src/components/Select.vue'
6-
import countries from './data/countryCodes'
7-
import fuseSearchOptions from './data/books'
1+
import Vue from "vue";
2+
import Dev from "./Dev.vue";
83

9-
Vue.use(resource)
10-
Vue.component('v-select', vSelect)
4+
Vue.config.productionTip = false;
115

12-
/* eslint-disable no-new */
136
new Vue({
14-
el: '#app',
15-
data: {
16-
placeholder: "placeholder",
17-
value: null,
18-
options: countries,
19-
ajaxRes: [],
20-
people: [],
21-
fuseSearchOptions
22-
},
23-
methods: {
24-
search(search, loading) {
25-
loading(true);
26-
this.getRepositories(search, loading, this)
27-
},
28-
searchPeople(search, loading) {
29-
loading(true)
30-
this.getPeople(loading, this)
31-
},
32-
getPeople: debounce((loading, vm) => {
33-
vm.$http.get(`https://reqres.in/api/users?per_page=10`).then(res => {
34-
vm.people = res.data.data
35-
loading(false)
36-
})
37-
}, 250),
38-
getRepositories: debounce((search, loading, vm) => {
39-
vm.$http.get(`https://api.github.com/search/repositories?q=${search}`).then(res => {
40-
vm.ajaxRes = res.data.items;
41-
loading(false)
42-
})
43-
}, 250),
44-
fuseSearch(options, search) {
45-
return new Fuse(options, {
46-
keys: ['title', 'author.firstName', 'author.lastName'],
47-
}).search(search);
48-
}
49-
}
50-
});
7+
render: h => h(Dev)
8+
}).$mount("#app");

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
6-
"serve": "vue-cli-service serve",
7-
"build": "vue-cli-service build",
6+
"serve": "vue-cli-service serve ./dev/dev.js",
7+
"build": "vue-cli-service build --target lib ./src/index.js",
88
"lint": "vue-cli-service lint",
99
"test:unit": "vue-cli-service test:unit"
1010
},

0 commit comments

Comments
 (0)