Skip to content

Commit eed421b

Browse files
author
Jeff
committed
- simplify dev.html
- start on 'sandbox' development
1 parent 4d7d576 commit eed421b

File tree

8 files changed

+222
-508
lines changed

8 files changed

+222
-508
lines changed

‎dev/Dev.vue

Lines changed: 221 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,189 @@
11
<template>
22
<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" slot-scope="option">
47-
<strong>{{ option.title }}</strong><br>
48-
<em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
49-
</template>
50-
</v-select>
3+
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>
11+
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>-->
51143
</div>
52144
</template>
53145

54146
<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";
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+
});
60165
61166
export default {
62-
components: { vSelect },
63-
data() {
167+
components: {vSelect},
168+
data () {
64169
return {
65-
placeholder: "placeholder",
170+
configuration: defaultConfig(),
66171
value: null,
67-
options: countries,
68172
ajaxRes: [],
69173
people: [],
70-
fuseSearchOptions
174+
optionDataSet: 'countries',
175+
optionDataSets: {
176+
countries,
177+
books,
178+
},
71179
};
72180
},
73181
methods: {
74-
search(search, loading) {
182+
search (search, loading) {
75183
loading(true);
76184
this.getRepositories(search, loading, this);
77185
},
78-
searchPeople(search, loading) {
186+
searchPeople (search, loading) {
79187
loading(true);
80188
this.getPeople(loading, this);
81189
},
@@ -93,38 +201,63 @@ export default {
93201
loading(false);
94202
});
95203
}, 250),
96-
fuseSearch(options, search) {
204+
fuseSearch (options, search) {
97205
return new Fuse(options, {
98-
keys: ["title", "author.firstName", "author.lastName"]
206+
keys: ['title', 'author.firstName', 'author.lastName'],
99207
}).search(search);
100-
}
101-
}
208+
},
209+
},
102210
};
103211
</script>
104212

105213
<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-
}
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 {
221+
margin: 0;
222+
height: 100%;
223+
font-family: -apple-system, sans-serif;
224+
}
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+
}
130263
</style>

0 commit comments

Comments
 (0)