feat: merge upstream into beta channel

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,38 +1,27 @@
 ---
-name: Bug report
-about: Create a report to help us improve
+name: Bug Report
+about: Create a bug report to help fix an issue with the component.
 title: ''
-labels: ''
+labels: 'bug'
 assignees: ''
-
 ---
 
+> Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.
+
+- Vue Version: 
+- Vue Select Version: 
+
 **Describe the bug**
 A clear and concise description of what the bug is.
 
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
+**Reproduction Link**
+A link to a reproduction of the bug. This is a huge help.
+
+**Steps To Reproduce**
+Outline the steps to reproduce the bug.
 
 **Expected behavior**
 A clear and concise description of what you expected to happen.
 
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Discussions
+    url: https://github.com/sagalbot/vue-select/discussions
+    about: If you're not submitting a bug or feature request, please use discussions instead.

build/webpack.base.conf.js

@@ -41,12 +41,14 @@ module.exports = {
         exclude: /node_modules/,
       },
       {
-        test: /\.s?css$/,
+        test: /\.css$/i,
         use: [
           extractOrInjectStyles,
-          'css-loader',
+          {
+            loader: 'css-loader',
+            options: { importLoaders: 1 },
+          },
           'postcss-loader',
-          'sass-loader',
         ],
       },
     ],

build/webpack.dev.conf.js

@@ -1,37 +1,21 @@
-const merge = require('webpack-merge')
-const chokidar = require('chokidar')
+const { merge } = require('webpack-merge')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const baseWebpackConfig = require('./webpack.base.conf')
 
-/**
- *
- */
 module.exports = merge(baseWebpackConfig, {
   entry: './dev/dev.js',
+  devServer: {
+    open: true,
+    static: false,
+    client: { overlay: true },
+    watchFiles: ['dev/dev.html'],
+  },
+  stats: false,
   plugins: [
     new HtmlWebpackPlugin({
+      title: 'dev',
       template: './dev/dev.html',
       inject: true,
     }),
   ],
-  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')
-      })
-    },
-  },
 })

build/webpack.prod.conf.js

@@ -1,5 +1,5 @@
 const TerserPlugin = require('terser-webpack-plugin')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
 
 module.exports = merge(baseWebpackConfig, {
@@ -14,10 +14,7 @@ module.exports = merge(baseWebpackConfig, {
     vue: 'vue',
   },
   optimization: {
-    minimizer: [
-      new TerserPlugin({
-        sourceMap: true,
-      }),
-    ],
+    minimize: true,
+    minimizer: [new TerserPlugin()],
   },
 })

docs/.vuepress/components/CssVariables.vue

@@ -0,0 +1,31 @@
+<template>
+  <div style="background: #282c34; padding: 1rem; border-radius: 0.3rem">
+    <v-select :options="countries" />
+  </div>
+</template>
+
+<script>
+import countries from '../data/countries.js'
+export default {
+  data: () => ({ countries }),
+}
+</script>
+
+<style scoped>
+>>> {
+  --vs-controls-color: #664cc3;
+  --vs-border-color: #664cc3;
+
+  --vs-dropdown-bg: #282c34;
+  --vs-dropdown-color: #cc99cd;
+  --vs-dropdown-option-color: #cc99cd;
+
+  --vs-selected-bg: #664cc3;
+  --vs-selected-color: #eeeeee;
+
+  --vs-search-input-color: #eeeeee;
+
+  --vs-dropdown-option--active-bg: #664cc3;
+  --vs-dropdown-option--active-color: #eeeeee;
+}
+</style>

docs/.vuepress/components/ReducedWithNoMatchingOption.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-select
+    v-model="selected"
+    :reduce="(option) => option.id"
+    :options="[
+      { label: 'One', id: 1 },
+      { label: 'Two', id: 2 },
+    ]"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: 3,
+    }
+  },
+}
+</script>

docs/guide/css.md

@@ -1,17 +1,47 @@
-Vue Select offers many APIs for customizing the look and feel from the component. You can use 
-[scoped slots](../api/slots.md), [custom child components](components.md), or modify the built in 
-SCSS variables. 
+Vue Select offers many APIs for customizing the look and feel from the component. You can use
+[scoped slots](../api/slots.md), [custom child components](components.md), or modify the built in
+CSS properties.
 
-::: tip
-Support for CSS variables (custom properties) is currently on the road map for those
-that are not using sass in their projects. 
-::: 
+## CSS Variables
 
-## SCSS Variables
+Vue Select uses custom CSS properties throughout the component to handle visual opinions. This
+allows for quite a bit of flexibility in styling, without having to hook into a build system for
+generating your own styles with something like SASS. If there is a value that you think should use a
+CSS property instead of a hardcoded CSS value, please submit a PR.
+
+## Dark Mode Example
+
+Without writing any CSS yourself, you can completely customize the look and feel of Vue Select
+through the use of CSS variables. In this example, we adjust the colors of the component to match
+for a dark mode application.
+
+In this case, the variables are scoped to only this implementation of the component, but you could
+place these variables anywhere in your applications CSS file to implement at a global level for your
+app.
+
+Check the MDN docs for more info
+about [CSS Custom Properties.](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+
+<CssVariables style="margin-top: 1rem;" />
+
+<<< @/.vuepress/components/CssVariables.vue
+
+### Available CSS Variables <Badge type="primary">3.18+</Badge>
+
+<<< @/../src/css/global/variables.css
+
+## SCSS <Badge type="warning">Deprecated in v3.18</Badge>
+
+::: warning Deprecation Notice 
+The SCSS build been deprecated for the `v3.x` release, and will be
+removed in `v4.0.0`. The files will remain in the v3 codebase if you really need them, but the
+recommended approach is to leverage the included CSS variables instead.
+:::
 
 Variables are leveraged in as much of the component styles as possible. If you really want to dig
 into the SCSS, the files are located in `src/scss`. The variables listed below can be found at
-[`src/scss/global/_variables`](https://github.com/sagalbot/vue-select/blob/master/src/scss/global/_variables.scss).
+[`src/scss/global/_variables`](https://github.com/sagalbot/vue-select/blob/master/src/scss/global/_variables.scss)
+.
 
 All variables are implemented with `!default` in order to make them easier to override in your
 application.
@@ -23,12 +53,12 @@ application.
 Vue Select takes the approach of using selectors with a single level of specificity, while using
 classes that are very specific to Vue Select to avoid collisions with your app.
 
-All classes within Vue Select use the `vs__` prefix, and selectors are generally a single classname 
+Most classes within Vue Select use the `vs__` prefix, and selectors are generally a single classname
 – unless there is a state being applied to the component.
 
-In order to override a default property in your app, you should add one level of specificity. 
-The easiest way to do this, is to add `.v-select` before the `vs__*` selector if you want to adjust
-all instances of Vue Select, or add your own classname if you just want to affect one.
+In order to override a default property in your app, you should add one level of specificity. The
+easiest way to do this, is to add `.v-select` before the `vs__*` selector if you want to adjust all
+instances of Vue Select, or add your own classname if you just want to affect one.
 
 <CssSpecificity />  
 
@@ -38,17 +68,18 @@ all instances of Vue Select, or add your own classname if you just want to affec
 
 By default, the dropdown transitions with a `.15s` cubic-bezier opacity fade in/out. The component
 uses the [VueJS transition system](https://vuejs.org/v2/guide/transitions.html). By default, the
- transition name is `vs__fade`. There's a couple ways to override or change this transition.
+transition name is `vs__fade`. There's a couple ways to override or change this transition.
 
 1. Use the `transition` prop. Applying this prop will change the name of the animation classes and
-negate the default CSS. If you want to remove it entirely, you can set it to an empty string.
+   negate the default CSS. If you want to remove it entirely, you can set it to an empty string.
 
 ```html
+
 <v-select transition="" />
 ```
 
-2. You can also override the default CSS for the `vs__fade` transition. Again, if you 
-wanted to eliminate the transition entirely:
+2. You can also override the default CSS for the `vs__fade` transition. Again, if you wanted to
+   eliminate the transition entirely:
 
 ```css
 .vs__fade-enter-active,

docs/guide/install.md

@@ -1,8 +1,14 @@
 ## Yarn / NPM
-Install with yarn:
+
+Install with yarn or npm:
+
 ```bash
+# vue 2
 yarn add vue-select
 
+# vue 3
+yarn add vue-select@beta
+
 # or, using NPM
 npm install vue-select
 ```
@@ -22,12 +28,6 @@ The component itself does not include any CSS. You'll need to include it separat
 import 'vue-select/dist/vue-select.css';
 ```
 
-Alternatively, you can import the scss for complete control of the component styles:
-
-```scss
-@import "vue-select/src/scss/vue-select.scss";
-```
-
 ## In the Browser
 
 vue-select ships as an UMD module that is accessible in the browser. When loaded
@@ -56,5 +56,5 @@ Vue.component('v-select', VueSelect.VueSelect);
 
 ## Vue Compatibility
 
-- If you're on Vue `1.x`, use vue-select `1.x`. 
-- The `1.x` branch has not received updates since the 2.0 release.  
+- Vue `2.x`, use vue-select `3.x`. 
+- Vue `3.x`, use vue-select `3.x@beta`.