Skip to content

Commit ae62259

Browse files
author
Jeff
committed
- update webpack config
- move Sandbox to VuePress folder
1 parent 51bd7ee commit ae62259

File tree

11 files changed

+319
-263
lines changed

11 files changed

+319
-263
lines changed

‎build/webpack.dev.conf.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ module.exports = merge(baseWebpackConfig, {
1010
entry: './dev/dev.js',
1111
plugins: [
1212
new HtmlWebpackPlugin({
13-
filename: 'index.html',
1413
template: './dev/dev.html',
1514
inject: true,
1615
}),

‎dev/Dev.vue

Lines changed: 12 additions & 244 deletions
Original file line numberDiff line numberDiff line change
@@ -1,263 +1,31 @@
11
<template>
22
<div id="app">
3+
<sandbox hide-help>
4+
<template slot-scope="config">
35

4-
<div id="config">
5-
<div class="form-control">
6-
<label for="multiple">
7-
<input id="multiple" type="checkbox" v-model="configuration.multiple">
8-
<code>multiple</code>
9-
</label>
10-
</div>
6+
<v-select v-bind="config" />
117

12-
<div class="form-control">
13-
<label for="disabled">
14-
<input id="disabled" type="checkbox" v-model="configuration.disabled">
15-
<code>disabled</code>
16-
</label>
17-
</div>
18-
19-
<div class="form-control">
20-
<label for="rtl">
21-
<input id="rtl" type="radio" v-model="configuration.dir" value="rtl">
22-
<code>dir="rtl"</code>
23-
</label>
24-
<label for="ltr">
25-
<input id="ltr" type="radio" v-model="configuration.dir" value="ltr">
26-
<code>dir="ltr"</code>
27-
</label>
28-
</div>
29-
30-
<div class="form-control">
31-
<label for="taggable">
32-
<input id="taggable" type="checkbox" v-model="configuration.taggable">
33-
<code>taggable</code>
34-
</label>
35-
</div>
36-
37-
<div class="form-control">
38-
<label for="noDrop">
39-
<input id="noDrop" type="checkbox" v-model="configuration.noDrop">
40-
<code>no-drop</code>
41-
</label>
42-
</div>
43-
44-
<div class="form-control">
45-
<label for="pushTags">
46-
<input id="pushTags" type="checkbox" v-model="configuration.pushTags">
47-
<code>push-tags</code>
48-
</label>
49-
</div>
50-
51-
<div class="form-control">
52-
<label for="selectOnTab">
53-
<input id="selectOnTab" type="checkbox" v-model="configuration.selectOnTab">
54-
<code>select-on-tab</code>
55-
</label>
56-
</div>
57-
58-
<div class="form-control">
59-
<label for="clearable">
60-
<input id="clearable" type="checkbox" v-model="configuration.clearable">
61-
<code>clearable</code>
62-
</label>
63-
</div>
64-
65-
<div class="form-control">
66-
<label for="searchable">
67-
<input id="searchable" type="checkbox" v-model="configuration.searchable">
68-
<code>searchable</code>
69-
</label>
70-
</div>
71-
72-
<div class="form-control">
73-
<label for="closeOnSelect">
74-
<input id="closeOnSelect" type="checkbox" v-model="configuration.closeOnSelect">
75-
<code>close-on-select</code>
76-
</label>
77-
</div>
78-
</div>
79-
80-
<div id="sandbox">
81-
82-
<div class="example">
83-
<v-select v-bind="configuration" placeholder="country objects"></v-select>
84-
</div>
85-
86-
<div class="example">
87-
<v-select v-bind="configuration" placeholder="country objects, using option scoped slots">
88-
<template slot="selected-option" slot-scope="{ label, value }">
89-
{{ label }} -- {{ value }}
90-
</template>
91-
<template slot="option" slot-scope="{ label, value }">
92-
{{ label }} ({{ value }})
93-
</template>
94-
</v-select>
95-
</div>
96-
97-
<div class="example">
98-
<v-select v-bind="configuration" :options="['cat', 'dog', 'bear']" placeholder="string options, option slots">
99-
<template slot="selected-option" slot-scope="{ label }">
100-
{{ label }}
101-
</template>
102-
<template slot="option" slot-scope="{ label }">
103-
{{ label }}
104-
</template>
105-
</v-select>
106-
</div>
107-
108-
<div class="example">
109-
<v-select v-bind="configuration" options="[1,5,10]" placeholder="options=[1,5,10]"></v-select>
110-
</div>
111-
112-
<div class="example">
113-
<v-select v-bind="configuration" label="title" :options="optionDataSets.books" :filter="fuseSearch" placeholder="advanced filtering w/ fuse.js + scoped slots">
114-
<template slot="option" slot-scope="option">
115-
<strong>{{ option.title }}</strong><br>
116-
<em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
117-
</template>
118-
</v-select>
119-
</div>
120-
121-
<div class="example">
122-
<v-select v-bind="configuration" :options="[]" placeholder=":options=[]"></v-select>
123-
</div>
124-
</div>
125-
126-
127-
<!--<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>-->
128-
129-
130-
<!--<v-select multiple placeholder="custom label template" :options="options">-->
131-
<!--<span-->
132-
<!--slot="selected-option-container"-->
133-
<!--slot-scope="props"-->
134-
<!--class="selected-tag"-->
135-
<!--&gt;-->
136-
<!--{{ props.option.label }} ({{ props.option.value }})-->
137-
<!--<button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option">-->
138-
<!--<span aria-hidden="true">&times;</span>-->
139-
<!--</button>-->
140-
<!--</span>-->
141-
<!--</v-select>-->
142-
<!--<v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>-->
8+
</template>
9+
</sandbox>
14310
</div>
14411
</template>
14512

14613
<script>
147-
import Fuse from 'fuse.js';
148-
import debounce from 'lodash/debounce';
149-
import vSelect from '../src/components/Select.vue';
150-
import countries from './data/countryCodes';
151-
import books from './data/books';
152-
153-
const defaultConfig = () => ({
154-
options: countries,
155-
multiple: false,
156-
dir: 'ltr',
157-
clearable: true,
158-
searchable: true,
159-
noDrop: false,
160-
closeOnSelect: true,
161-
disabled: false,
162-
selectOntab: false,
163-
placeholder: 'placeholder',
164-
});
14+
import vSelect from '../src/components/Select';
15+
import Sandbox from '../docs/.vuepress/components/Sandbox';
16+
// import countries from '../docs/.vuepress/data/countryCodes';
17+
// import books from '../docs/.vuepress/data/books';
16518
16619
export default {
167-
components: {vSelect},
168-
data () {
169-
return {
170-
configuration: defaultConfig(),
171-
value: null,
172-
ajaxRes: [],
173-
people: [],
174-
optionDataSet: 'countries',
175-
optionDataSets: {
176-
countries,
177-
books,
178-
},
179-
};
180-
},
181-
methods: {
182-
search (search, loading) {
183-
loading(true);
184-
this.getRepositories(search, loading, this);
185-
},
186-
searchPeople (search, loading) {
187-
loading(true);
188-
this.getPeople(loading, this);
189-
},
190-
getPeople: debounce((loading, vm) => {
191-
vm.$http.get(`https://reqres.in/api/users?per_page=10`).then(res => {
192-
vm.people = res.data.data;
193-
loading(false);
194-
});
195-
}, 250),
196-
getRepositories: debounce((search, loading, vm) => {
197-
vm.$http
198-
.get(`https://api.github.com/search/repositories?q=${search}`)
199-
.then(res => {
200-
vm.ajaxRes = res.data.items;
201-
loading(false);
202-
});
203-
}, 250),
204-
fuseSearch (options, search) {
205-
return new Fuse(options, {
206-
keys: ['title', 'author.firstName', 'author.lastName'],
207-
}).search(search);
208-
},
209-
},
20+
components: {Sandbox, vSelect},
21021
};
21122
</script>
21223

21324
<style>
214-
/*@import "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css";*/
215-
/*@import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css";*/
216-
/*@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";*/
217-
/*@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css";*/
218-
219-
body,
220-
html {
25+
html,
26+
body {
22127
margin: 0;
22228
height: 100%;
22329
font-family: -apple-system, sans-serif;
22430
}
225-
226-
#app {
227-
min-height: 100%;
228-
display: grid;
229-
grid-template-columns: 25% 75%;
230-
grid-template-rows: 100%;
231-
}
232-
233-
#config {
234-
border-right: 1px solid #d9d9d9;
235-
display: flex;
236-
flex-direction: column;
237-
justify-content: center;
238-
}
239-
240-
#sandbox {
241-
display: flex;
242-
flex-direction: column;
243-
justify-content: center;
244-
align-items: center;
245-
}
246-
247-
.form-control {
248-
margin-bottom: 1rem;
249-
padding: 1rem 1rem 0;
250-
}
251-
252-
.form-control:not(:first-child) {
253-
border-top: 1px solid #d9d9d9;
254-
}
255-
256-
.example {
257-
margin-bottom: 2rem;
258-
}
259-
260-
.v-select {
261-
width: 25em;
262-
}
26331
</style>

‎dev/dev.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
5-
<meta charset="utf-8">
6-
<title>Vue Select Dev</title>
4+
<meta charset="utf-8">
5+
<title>Vue Select Dev</title>
6+
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">-->
7+
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css">-->
8+
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">-->
9+
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
710
</head>
811
<body>
9-
<div id="app">
10-
<dev />
11-
</div>
12+
<div id="app"></div>
1213
</body>
1314
</html>

0 commit comments

Comments
 (0)