Skip to content

Commit dc91310

Browse files
sagalbotsagalbot
authored
Sass & Class Renames (sagalbot#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 sagalbot#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
1 parent 06800bf commit dc91310

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1122
-1644
lines changed

‎.travis.yml

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
language: node_js
2+
cache: npm
3+
24
node_js:
35
- node
4-
cache:
5-
directories:
6-
- node_modules
6+
77
script:
8-
- yarn test --coverage --coverageReporters=text-lcov | coveralls
8+
- yarn test --coverage --coverageReporters=text-lcov
9+
- codecov

‎build/webpack.base.conf.js

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
const path = require('path');
22
const webpack = require('webpack');
3-
const chokidar = require('chokidar');
43
const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
54
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
65

76
const env = process.env.NODE_ENV === 'production'
87
? 'production'
98
: 'development';
109

11-
const extractOrInjectStyles = process.env.NODE_ENV !== 'production'
10+
const devtool = env === 'production' ? 'source-map' : 'eval-source-map';
11+
12+
const extractOrInjectStyles = env !== 'production'
1213
? 'vue-style-loader'
1314
: MiniCssExtractPlugin.loader;
1415

@@ -19,7 +20,7 @@ module.exports = {
1920
publicPath: '/',
2021
filename: '[name].js',
2122
},
22-
// devtool: env === 'production' ? 'source-map' : 'eval-source-map',
23+
devtool,
2324
resolve: {
2425
extensions: ['.js', '.vue'],
2526
alias: {
@@ -47,13 +48,10 @@ module.exports = {
4748
use: [
4849
extractOrInjectStyles,
4950
'css-loader',
51+
'postcss-loader',
5052
'sass-loader',
5153
],
5254
},
53-
{
54-
test: /\.html$/,
55-
loader: 'vue-html-loader',
56-
},
5755
],
5856
},
5957
plugins: [
@@ -65,17 +63,8 @@ module.exports = {
6563
}),
6664
new VueLoaderPlugin(),
6765
],
68-
devServer: {
69-
hot: true,
70-
hotOnly: true,
71-
inline: true,
72-
port: 8080,
73-
before (app, server) {
74-
chokidar.watch([
75-
'./**/*.html',
76-
]).on('all', function () {
77-
server.sockWrite(server.sockets, 'content-changed');
78-
});
79-
},
66+
stats: {
67+
children: false,
68+
modules: false,
8069
},
8170
};

‎build/webpack.dev.conf.js

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,39 @@
11
const merge = require('webpack-merge');
2+
const chokidar = require('chokidar');
23
const HtmlWebpackPlugin = require('html-webpack-plugin');
34
const baseWebpackConfig = require('./webpack.base.conf');
45

6+
/**
7+
*
8+
*/
59
module.exports = merge(baseWebpackConfig, {
610
entry: './dev/dev.js',
711
plugins: [
812
new HtmlWebpackPlugin({
9-
filename: 'index.html',
1013
template: './dev/dev.html',
1114
inject: true,
1215
}),
1316
],
1417
optimization: {
1518
noEmitOnErrors: true,
1619
},
20+
devServer: {
21+
hot: true,
22+
hotOnly: true,
23+
open: true,
24+
inline: true,
25+
stats: {
26+
children: false,
27+
modules: false,
28+
chunks: false,
29+
},
30+
port: 8080,
31+
before (app, server) {
32+
chokidar.watch([
33+
'./**/*.html',
34+
]).on('all', function () {
35+
server.sockWrite(server.sockets, 'content-changed');
36+
});
37+
},
38+
},
1739
});

‎dev/Dev.vue

Lines changed: 20 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,35 @@
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>
3+
<sandbox hide-help>
4+
<template slot-scope="config">
5+
6+
<v-select v-bind="config" />
7+
498
</template>
50-
</v-select>
9+
</sandbox>
5110
</div>
5211
</template>
5312

5413
<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";
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';
6018
6119
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-
}
20+
components: {Sandbox, vSelect},
10221
};
10322
</script>
10423

10524
<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-
}
25+
html,
26+
body {
27+
margin: 0;
28+
height: 100%;
29+
font-family: -apple-system, sans-serif;
30+
}
12531
126-
.v-select {
127-
width: 25em;
128-
margin: 1em;
129-
}
32+
#app {
33+
height: 100%;
34+
}
13035
</style>

‎dev/dev.html

Lines changed: 7 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
5-
<meta charset="utf-8">
6-
<title>Vue Select Dev</title>
7-
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">-->
8-
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">-->
9-
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
10-
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
11-
<style>
12-
13-
#app {
14-
height: 95vh;
15-
display: flex;
16-
flex-direction: column;
17-
align-items: center;
18-
justify-content: flex-start;
19-
flex-wrap: wrap;
20-
align-content: center;
21-
font-family: -apple-system, sans-serif;
22-
}
23-
24-
.v-select {
25-
width: 25em;
26-
margin: 1em;
27-
}
28-
</style>
4+
<meta charset="utf-8">
5+
<title>Vue Select Dev</title>
6+
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">-->
7+
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/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">-->
2910
</head>
30-
3111
<body>
32-
<div id="app">
33-
<v-select placeholder="default" :options="options"></v-select>
34-
<v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>
35-
<v-select placeholder="default, options=[1,5,10]" :options="[1,5,10]"></v-select>
36-
<v-select placeholder="multiple" multiple :options="options"></v-select>
37-
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
38-
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
39-
<v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>
40-
<v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>
41-
<v-select placeholder="searchable=false" :options="options" :searchable="false"></v-select>
42-
<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
43-
<v-select placeholder="custom option template" :options="options" multiple>
44-
<template slot="selected-option" slot-scope="option">
45-
{{option.label}}
46-
</template>
47-
<template slot="option" slot-scope="option">
48-
{{option.label}} ({{option.value}})
49-
</template>
50-
</v-select>
51-
<v-select placeholder="custom option template for string array" taggable :options="['cat', 'dog', 'bear']" multiple>
52-
<template slot="selected-option" slot-scope="option">
53-
{{option.label}}
54-
</template>
55-
<template slot="option" slot-scope="option">
56-
{{option.label}}
57-
</template>
58-
</v-select>
59-
<v-select multiple placeholder="custom label template" :options="options">
60-
<span
61-
slot="selected-option-container"
62-
slot-scope="props"
63-
class="selected-tag"
64-
>
65-
{{ props.option.label }} ({{ props.option.value }})
66-
<button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option">
67-
<span aria-hidden="true">&times;</span>
68-
</button>
69-
</span>
70-
</v-select>
71-
<v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select>
72-
<v-select placeholder="disabled" disabled value="disabled"></v-select>
73-
<v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
74-
<v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
75-
<v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch">
76-
<template slot="option" scope="option">
77-
<strong>{{ option.title }}</strong><br>
78-
<em>{{ option.author.firstName + ' ' + option.author.lastName }}</em>
79-
</template>
80-
</v-select>
81-
<v-select placeholder="Vue select with no options and a custom no-option span" >
82-
<span slot="no-options">Custom no options message</span>
83-
</v-select>
84-
</div>
12+
<div id="app"></div>
8513
</body>
86-
8714
</html>

0 commit comments

Comments
 (0)