From dc913108600f5b3f564bb08c76c84694c93c5527 Mon Sep 17 00:00:00 2001 From: Jeff Sagal Date: Mon, 18 Feb 2019 22:01:39 -0800 Subject: [PATCH] Sass & Class Renames (#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 #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 --- .travis.yml | 9 +- build/webpack.base.conf.js | 27 +- build/webpack.dev.conf.js | 24 +- dev/Dev.vue | 135 +-- dev/dev.html | 87 +- docs/.vuepress/components/HomePage.vue | 123 --- docs/.vuepress/components/Sandbox.vue | 281 ++++++ docs/.vuepress/config.js | 87 +- {dev => docs/.vuepress}/data/books.js | 0 {dev => docs/.vuepress}/data/countries.js | 0 {dev => docs/.vuepress}/data/countryCodes.js | 0 docs/.vuepress/scss/_cyan_theme.scss | 47 - docs/.vuepress/scss/_demo.scss | 145 ---- docs/.vuepress/scss/_variables.scss | 17 - docs/.vuepress/scss/home.scss | 3 - docs/README.md | 19 +- docs/api/props.md | 5 + docs/getting-started/values.md | 8 +- docs/sandbox.md | 6 + netlify.toml | 9 +- package.json | 19 +- postcss.config.js | 8 + src/components/Deselect.vue | 5 + src/components/OpenIndicator.vue | 5 + src/components/Select.vue | 403 ++------- src/scss/global/_animations.scss | 31 + src/scss/global/_component.scss | 9 + src/scss/global/_states.scss | 53 ++ src/scss/global/_variables.scss | 44 + src/scss/modules/_clear.scss | 10 + src/scss/modules/_dropdown-menu.scss | 37 + src/scss/modules/_dropdown-option.scss | 18 + src/scss/modules/_dropdown-toggle.scss | 54 ++ src/scss/modules/_open-indicator.scss | 29 + src/scss/modules/_search-input.scss | 54 ++ src/scss/modules/_selected.scss | 40 + src/scss/modules/_spinner.scss | 26 + src/scss/vue-select.scss | 13 + tests/unit/Deselecting.spec.js | 8 +- tests/unit/Dropdown.spec.js | 6 +- tests/unit/Labels.spec.js | 2 +- tests/unit/ObjectIndex.spec.js | 2 +- yarn.lock | 858 ++++--------------- 43 files changed, 1122 insertions(+), 1644 deletions(-) delete mode 100644 docs/.vuepress/components/HomePage.vue create mode 100644 docs/.vuepress/components/Sandbox.vue rename {dev => docs/.vuepress}/data/books.js (100%) rename {dev => docs/.vuepress}/data/countries.js (100%) rename {dev => docs/.vuepress}/data/countryCodes.js (100%) delete mode 100644 docs/.vuepress/scss/_cyan_theme.scss delete mode 100644 docs/.vuepress/scss/_demo.scss delete mode 100644 docs/.vuepress/scss/_variables.scss delete mode 100644 docs/.vuepress/scss/home.scss create mode 100644 docs/sandbox.md create mode 100644 postcss.config.js create mode 100644 src/components/Deselect.vue create mode 100644 src/components/OpenIndicator.vue create mode 100644 src/scss/global/_animations.scss create mode 100644 src/scss/global/_component.scss create mode 100644 src/scss/global/_states.scss create mode 100644 src/scss/global/_variables.scss create mode 100644 src/scss/modules/_clear.scss create mode 100644 src/scss/modules/_dropdown-menu.scss create mode 100644 src/scss/modules/_dropdown-option.scss create mode 100644 src/scss/modules/_dropdown-toggle.scss create mode 100644 src/scss/modules/_open-indicator.scss create mode 100644 src/scss/modules/_search-input.scss create mode 100644 src/scss/modules/_selected.scss create mode 100644 src/scss/modules/_spinner.scss create mode 100644 src/scss/vue-select.scss diff --git a/.travis.yml b/.travis.yml index 17c7bc4..58dc582 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,8 +1,9 @@ language: node_js +cache: npm + node_js: - node -cache: - directories: - - node_modules + script: - - yarn test --coverage --coverageReporters=text-lcov | coveralls + - yarn test --coverage --coverageReporters=text-lcov + - codecov diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index c145a8c..6e10a20 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -1,6 +1,5 @@ const path = require('path'); const webpack = require('webpack'); -const chokidar = require('chokidar'); const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin; const MiniCssExtractPlugin = require('mini-css-extract-plugin'); @@ -8,7 +7,9 @@ const env = process.env.NODE_ENV === 'production' ? 'production' : 'development'; -const extractOrInjectStyles = process.env.NODE_ENV !== 'production' +const devtool = env === 'production' ? 'source-map' : 'eval-source-map'; + +const extractOrInjectStyles = env !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader; @@ -19,7 +20,7 @@ module.exports = { publicPath: '/', filename: '[name].js', }, - // devtool: env === 'production' ? 'source-map' : 'eval-source-map', + devtool, resolve: { extensions: ['.js', '.vue'], alias: { @@ -47,13 +48,10 @@ module.exports = { use: [ extractOrInjectStyles, 'css-loader', + 'postcss-loader', 'sass-loader', ], }, - { - test: /\.html$/, - loader: 'vue-html-loader', - }, ], }, plugins: [ @@ -65,17 +63,8 @@ module.exports = { }), new VueLoaderPlugin(), ], - devServer: { - hot: true, - hotOnly: true, - inline: true, - port: 8080, - before (app, server) { - chokidar.watch([ - './**/*.html', - ]).on('all', function () { - server.sockWrite(server.sockets, 'content-changed'); - }); - }, + stats: { + children: false, + modules: false, }, }; diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index 437a6d6..9c0d519 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -1,12 +1,15 @@ const merge = require('webpack-merge'); +const chokidar = require('chokidar'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const baseWebpackConfig = require('./webpack.base.conf'); +/** + * + */ module.exports = merge(baseWebpackConfig, { entry: './dev/dev.js', plugins: [ new HtmlWebpackPlugin({ - filename: 'index.html', template: './dev/dev.html', inject: true, }), @@ -14,4 +17,23 @@ module.exports = merge(baseWebpackConfig, { optimization: { noEmitOnErrors: true, }, + devServer: { + hot: true, + hotOnly: true, + open: true, + inline: true, + stats: { + children: false, + modules: false, + chunks: false, + }, + port: 8080, + before (app, server) { + chokidar.watch([ + './**/*.html', + ]).on('all', function () { + server.sockWrite(server.sockets, 'content-changed'); + }); + }, + }, }); diff --git a/dev/Dev.vue b/dev/Dev.vue index 8db82ff..62735dc 100644 --- a/dev/Dev.vue +++ b/dev/Dev.vue @@ -1,130 +1,35 @@