feat: merge upstream into beta channel (#1589)

src/components/Select.vue

@@ -1,5 +1,5 @@
-<style lang="scss">
-@import '../scss/vue-select.scss';
+<style>
+@import '../css/vue-select.css';
 </style>
 
 <template>
@@ -33,8 +33,7 @@
             </slot>
             <button
               v-if="multiple"
-              ref="deselectButtons"
-              :ref="el => deselectButtons[i] = el"
+              :ref="(el) => (deselectButtons[i] = el)"
               :disabled="disabled"
               type="button"
               class="vs__deselect"
@@ -119,9 +118,9 @@
           </slot>
         </li>
         <li v-if="filteredOptions.length === 0" class="vs__no-options">
-          <slot name="no-options" v-bind="scope.noOptions"
-            >Sorry, no matching options.</slot
-          >
+          <slot name="no-options" v-bind="scope.noOptions">
+            Sorry, no matching options.
+          </slot>
         </li>
         <slot name="list-footer" v-bind="scope.listFooter" />
       </ul>
@@ -694,7 +693,7 @@ export default {
       pushedTags: [],
       // eslint-disable-next-line vue/no-reserved-keys
       _value: [], // Internal value managed by Vue Select if no `value` prop is passed
-      deselectButtons: []
+      deselectButtons: [],
     }
   },
 
@@ -723,7 +722,7 @@ export default {
         value = this.$data._value
       }
 
-      if (value) {
+      if (value !== undefined && value !== null) {
         return [].concat(value)
       }
 

src/css/global/animations.css

@@ -0,0 +1,35 @@
+:root {
+    --vs-transition-timing-function: cubic-bezier(1, 0.5, 0.8, 1);
+    --vs-transition-duration: 0.15s;
+}
+
+/* KeyFrames */
+@-webkit-keyframes vSelectSpinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes vSelectSpinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Dropdown Default Transition */
+.vs__fade-enter-active,
+.vs__fade-leave-active {
+    pointer-events: none;
+    transition: opacity var(--vs-transition-duration)
+        var(--vs-transition-timing-function);
+}
+.vs__fade-enter,
+.vs__fade-leave-to {
+    opacity: 0;
+}

src/css/global/component.css

@@ -0,0 +1,9 @@
+.v-select {
+  position: relative;
+  font-family: inherit;
+}
+
+.v-select,
+.v-select * {
+  box-sizing: border-box;
+}

src/css/global/states.css

@@ -0,0 +1,55 @@
+/** Component States */
+
+/*
+ * Disabled
+ *
+ * When the component is disabled, all interaction
+ * should be prevented. Here we modify the bg color,
+ * and change the cursor displayed on the interactive
+ * components.
+ */
+
+:root {
+    --vs-disabled-bg: var(--vs-state-disabled-bg);
+    --vs-disabled-color: var(--vs-state-disabled-color);
+    --vs-disabled-cursor: var(--vs-state-disabled-cursor);
+}
+
+.vs--disabled {
+    .vs__dropdown-toggle,
+    .vs__clear,
+    .vs__search,
+    .vs__selected,
+    .vs__open-indicator {
+        cursor: var(--vs-disabled-cursor);
+        background-color: var(--vs-disabled-bg);
+    }
+}
+
+/*
+ *  RTL - Right to Left Support
+ *
+ *  Because we're using a flexbox layout, the `dir="rtl"`
+ *  HTML attribute does most of the work for us by
+ *  rearranging the child elements visually.
+ */
+
+.v-select[dir='rtl'] {
+    .vs__actions {
+        padding: 0 3px 0 6px;
+    }
+
+    .vs__clear {
+        margin-left: 6px;
+        margin-right: 0;
+    }
+
+    .vs__deselect {
+        margin-left: 0;
+        margin-right: 2px;
+    }
+
+    .vs__dropdown-menu {
+        text-align: right;
+    }
+}

src/css/global/variables.css

@@ -0,0 +1,66 @@
+:root {
+    --vs-colors--lightest: rgba(60, 60, 60, 0.26);
+    --vs-colors--light: rgba(60, 60, 60, 0.5);
+    --vs-colors--dark: #333;
+    --vs-colors--darkest: rgba(0, 0, 0, 0.15);
+
+    /* Search Input */
+    --vs-search-input-color: inherit;
+    --vs-search-input-placeholder-color: inherit;
+
+    /* Font */
+    --vs-font-size: 1rem;
+    --vs-line-height: 1.4;
+
+    /* Disabled State */
+    --vs-state-disabled-bg: rgb(248, 248, 248);
+    --vs-state-disabled-color: var(--vs-colors--light);
+    --vs-state-disabled-controls-color: var(--vs-colors--light);
+    --vs-state-disabled-cursor: not-allowed;
+
+    /* Borders */
+    --vs-border-color: var(--vs-colors--lightest);
+    --vs-border-width: 1px;
+    --vs-border-style: solid;
+    --vs-border-radius: 4px;
+
+    /* Actions: house the component controls */
+    --vs-actions-padding: 4px 6px 0 3px;
+
+    /* Component Controls: Clear, Open Indicator */
+    --vs-controls-color: var(--vs-colors--light);
+    --vs-controls-size: 1;
+    --vs-controls--deselect-text-shadow: 0 1px 0 #fff;
+
+    /* Selected */
+    --vs-selected-bg: #f0f0f0;
+    --vs-selected-color: var(--vs-colors--dark);
+    --vs-selected-border-color: var(--vs-border-color);
+    --vs-selected-border-style: var(--vs-border-style);
+    --vs-selected-border-width: var(--vs-border-width);
+
+    /* Dropdown */
+    --vs-dropdown-bg: #fff;
+    --vs-dropdown-color: inherit;
+    --vs-dropdown-z-index: 1000;
+    --vs-dropdown-min-width: 160px;
+    --vs-dropdown-max-height: 350px;
+    --vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest);
+
+    /* Options */
+    --vs-dropdown-option-bg: #000;
+    --vs-dropdown-option-color: var(--vs-dropdown-color);
+    --vs-dropdown-option-padding: 3px 20px;
+
+    /* Active State */
+    --vs-dropdown-option--active-bg: #5897fb;
+    --vs-dropdown-option--active-color: #fff;
+
+    /* Deselect State */
+    --vs-dropdown-option--deselect-bg: #fb5858;
+    --vs-dropdown-option--deselect-color: #fff;
+
+    /* Transitions */
+    --vs-transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
+    --vs-transition-duration: 150ms;
+}

src/css/modules/clear.css

@@ -0,0 +1,10 @@
+/* Clear Button */
+
+.vs__clear {
+    fill: var(--vs-controls-color);
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+    margin-right: 8px;
+}

src/css/modules/dropdown-menu.css

@@ -0,0 +1,29 @@
+/* Dropdown Menu */
+
+.vs__dropdown-menu {
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    /* calc to ensure the left and right borders of the dropdown appear flush with the toggle. */
+    top: calc(100% - var(--vs-border-width));
+    left: 0;
+    z-index: var(--vs-dropdown-z-index);
+    padding: 5px 0;
+    margin: 0;
+    width: 100%;
+    max-height: var(--vs-dropdown-max-height);
+    min-width: var(--vs-dropdown-min-width);
+    overflow-y: auto;
+    box-shadow: var(--vs-dropdown-box-shadow);
+    border: var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);
+    border-top-style: none;
+    border-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);
+    text-align: left;
+    list-style: none;
+    background: var(--vs-dropdown-bg);
+    color: var(--vs-dropdown-color);
+}
+
+.vs__no-options {
+    text-align: center;
+}

src/css/modules/dropdown-option.css

@@ -0,0 +1,26 @@
+/* List Items */
+.vs__dropdown-option {
+    line-height: 1.42857143; /* Normalize line height */
+    display: block;
+    padding: var(--vs-dropdown-option-padding);
+    clear: both;
+    color: var(--vs-dropdown-option-color); /* Overrides most CSS frameworks */
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.vs__dropdown-option--highlight {
+    background: var(--vs-dropdown-option--active-bg);
+    color: var(--vs-dropdown-option--active-color);
+}
+
+.vs__dropdown-option--deselect {
+    background: var(--vs-dropdown-option--deselect-bg);
+    color: var(--vs-dropdown-option--deselect-color);
+}
+
+.vs__dropdown-option--disabled {
+    background: var(--vs-state-disabled-bg);
+    color: var(--vs-state-disabled-color);
+    cursor: var(--vs-state-disabled-cursor);
+}

src/css/modules/dropdown-toggle.css

@@ -0,0 +1,49 @@
+/**
+    Dropdown Toggle
+
+    The dropdown toggle is the primary wrapper of the component. It
+    has two direct descendants: .vs__selected-options, and .vs__actions.
+
+    .vs__selected-options holds the .vs__selected's as well as the
+    main search input.
+
+    .vs__actions holds the clear button and dropdown toggle.
+ */
+
+.vs__dropdown-toggle {
+    appearance: none;
+    display: flex;
+    padding: 0 0 4px 0;
+    background: none;
+    border: var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);
+    border-radius: var(--vs-border-radius);
+    white-space: normal;
+}
+
+.vs__selected-options {
+    display: flex;
+    flex-basis: 100%;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    padding: 0 2px;
+    position: relative;
+}
+
+.vs__actions {
+    display: flex;
+    align-items: center;
+    padding: var(--vs-actions-padding);
+}
+
+/* Dropdown Toggle States */
+.vs--searchable .vs__dropdown-toggle {
+    cursor: text;
+}
+.vs--unsearchable .vs__dropdown-toggle {
+    cursor: pointer;
+}
+.vs--open .vs__dropdown-toggle {
+    border-bottom-color: transparent;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}

src/css/modules/open-indicator.css

@@ -0,0 +1,26 @@
+/* Open Indicator */
+
+/*
+  The open indicator appears as a down facing
+  caret on the right side of the select.
+ */
+
+.vs__open-indicator {
+    fill: var(--vs-controls-color);
+    transform: scale(var(--vs-controls-size));
+    transition: transform var(--vs-transition-duration)
+        var(--vs-transition-timing-function);
+    transition-timing-function: var(--vs-transition-timing-function);
+}
+
+/* Open State */
+
+.vs--open .vs__open-indicator {
+    transform: rotate(180deg) scale(var(--vs-controls-size));
+}
+
+/* Loading State */
+
+.vs--loading .vs__open-indicator {
+    opacity: 0;
+}

src/css/modules/search-input.css

@@ -0,0 +1,61 @@
+/* Search Input */
+
+/**
+ * Super weird bug... If this declaration is grouped
+ * below, the cancel button will still appear in chrome.
+ * If it's up here on it's own, it'll hide it.
+ */
+.vs__search::-webkit-search-cancel-button {
+    display: none;
+}
+
+.vs__search::-webkit-search-decoration,
+.vs__search::-webkit-search-results-button,
+.vs__search::-webkit-search-results-decoration,
+.vs__search::-ms-clear {
+    display: none;
+}
+
+.vs__search,
+.vs__search:focus {
+    color: var(--vs-search-input-color);
+    appearance: none;
+    line-height: var(--vs-line-height);
+    font-size: var(--vs-font-size);
+    border: 1px solid transparent;
+    border-left: none;
+    outline: none;
+    margin: 4px 0 0 0;
+    padding: 0 7px;
+    background: none;
+    box-shadow: none;
+    width: 0;
+    max-width: 100%;
+    flex-grow: 1;
+    z-index: 1;
+}
+
+.vs__search::placeholder {
+    color: var(--vs-search-input-placeholder-color);
+}
+
+/**
+    States
+ */
+
+/* Unsearchable */
+.vs--unsearchable {
+    .vs__search {
+        opacity: 1;
+    }
+    &:not(.vs--disabled) .vs__search {
+        cursor: pointer;
+    }
+}
+
+/* Single, when searching but not loading or open */
+.vs--single.vs--searching:not(.vs--open):not(.vs--loading) {
+    .vs__search {
+        opacity: 0.2;
+    }
+}

src/css/modules/selected.css

@@ -0,0 +1,43 @@
+/* Selected Tags */
+.vs__selected {
+    display: flex;
+    align-items: center;
+    background-color: var(--vs-selected-bg);
+    border: var(--vs-selected-border-width) var(--vs-selected-border-style)
+        var(--vs-selected-border-color);
+    border-radius: var(--vs-border-radius);
+    color: var(--vs-selected-color);
+    line-height: var(--vs-line-height);
+    margin: 4px 2px 0px 2px;
+    padding: 0 0.25em;
+    z-index: 0;
+}
+
+.vs__deselect {
+    display: inline-flex;
+    appearance: none;
+    margin-left: 4px;
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+    background: none;
+    fill: var(--vs-controls-color);
+    text-shadow: var(--vs-controls--deselect-text-shadow);
+}
+
+/* States */
+
+.vs--single {
+    .vs__selected {
+        background-color: transparent;
+        border-color: transparent;
+    }
+    &.vs--open .vs__selected,
+    &.vs--loading .vs__selected {
+        position: absolute;
+        opacity: 0.4;
+    }
+    &.vs--searching .vs__selected {
+        display: none;
+    }
+}

src/css/modules/spinner.css

@@ -0,0 +1,28 @@
+/* Loading Spinner */
+.vs__spinner {
+    align-self: center;
+    opacity: 0;
+    font-size: 5px;
+    text-indent: -9999em;
+    overflow: hidden;
+    border-top: 0.9em solid rgba(100, 100, 100, 0.1);
+    border-right: 0.9em solid rgba(100, 100, 100, 0.1);
+    border-bottom: 0.9em solid rgba(100, 100, 100, 0.1);
+    border-left: 0.9em solid rgba(60, 60, 60, 0.45);
+    transform: translateZ(0)
+        scale(var(--vs-controls--spinner-size, var(--vs-controls-size)));
+    animation: vSelectSpinner 1.1s infinite linear;
+    transition: opacity 0.1s;
+}
+.vs__spinner,
+.vs__spinner:after {
+    border-radius: 50%;
+    width: 5em;
+    height: 5em;
+    transform: scale(var(--vs-controls--spinner-size, var(--vs-controls-size)));
+}
+
+/* Loading Spinner States */
+.vs--loading .vs__spinner {
+    opacity: 1;
+}

src/css/vue-select.css

@@ -0,0 +1,13 @@
+@import 'global/variables.css';
+@import 'global/component.css';
+@import 'global/animations.css';
+@import 'global/states.css';
+
+@import 'modules/dropdown-toggle.css';
+@import 'modules/open-indicator.css';
+@import 'modules/clear.css';
+@import 'modules/dropdown-menu.css';
+@import 'modules/dropdown-option.css';
+@import 'modules/selected.css';
+@import 'modules/search-input.css';
+@import 'modules/spinner.css';

src/mixins/typeAheadPointer.js

@@ -14,6 +14,16 @@ export default {
         }
       }
     },
+    open(open) {
+      if (open) {
+        this.typeAheadToLastSelected()
+      }
+    },
+    selectedValue() {
+      if (this.open) {
+        this.typeAheadToLastSelected()
+      }
+    },
   },
 
   methods: {
@@ -57,9 +67,21 @@ export default {
     typeAheadSelect() {
       const typeAheadOption = this.filteredOptions[this.typeAheadPointer]
 
-      if (typeAheadOption) {
+      if (typeAheadOption && this.selectable(typeAheadOption)) {
         this.select(typeAheadOption)
       }
     },
+
+    /**
+     * Moves the pointer to the last selected option.
+     */
+    typeAheadToLastSelected() {
+      this.typeAheadPointer =
+        this.selectedValue.length !== 0
+          ? this.filteredOptions.indexOf(
+              this.selectedValue[this.selectedValue.length - 1]
+            )
+          : -1
+    },
   },
 }

src/scss/global/_variables.scss

@@ -1,11 +1,12 @@
 $vs-colors: (
-        lightest: rgba(60, 60, 60, 0.26),
-        light: rgba(60, 60, 60, 0.5),
-        dark: #333,
-        darkest: rgba(0, 0, 0, .15),
+    lightest: rgba(60, 60, 60, 0.26),
+    light: rgba(60, 60, 60, 0.5),
+    dark: #333,
+    darkest: rgba(0, 0, 0, 0.15),
 ) !default;
 
 //  Global Component Variables
+$vs-component-bg: none !default;
 $vs-component-line-height: 1.4 !default;
 $vs-component-placeholder-color: inherit !default;
 

src/scss/modules/_dropdown-toggle.scss

@@ -16,39 +16,39 @@ $border-color: $vs-border-color;
 $border-radius: $vs-border-radius;
 
 .vs__dropdown-toggle {
-  appearance: none;
-  display: flex;
-  padding: 0 0 4px 0;
-  background: none;
-  border: $border-width $border-style $border-color;
-  border-radius: $border-radius;
-  white-space: normal;
+    appearance: none;
+    display: flex;
+    padding: 0 0 4px 0;
+    background: $vs-component-bg;
+    border: $border-width $border-style $border-color;
+    border-radius: $border-radius;
+    white-space: normal;
 }
 
 .vs__selected-options {
-  display: flex;
-  flex-basis: 100%;
-  flex-grow: 1;
-  flex-wrap: wrap;
-  padding: 0 2px;
-  position: relative;
+    display: flex;
+    flex-basis: 100%;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    padding: 0 2px;
+    position: relative;
 }
 
 .vs__actions {
-  display: flex;
-  align-items: center;
-  padding: 4px 6px 0 3px;
+    display: flex;
+    align-items: center;
+    padding: 4px 6px 0 3px;
 }
 
 /* Dropdown Toggle States */
 .vs--searchable .vs__dropdown-toggle {
-  cursor: text;
+    cursor: text;
 }
 .vs--unsearchable .vs__dropdown-toggle {
-  cursor: pointer;
+    cursor: pointer;
 }
 .vs--open .vs__dropdown-toggle {
-  border-bottom-color: transparent;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+    border-bottom-color: transparent;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }

src/scss/vue-select.scss

@@ -1,13 +1,23 @@
-@import "global/variables";
-@import "global/component";
-@import "global/animations";
-@import "global/states";
+/**
+    Support for SASS is deprecated as of v3.18.
 
-@import "modules/dropdown-toggle";
-@import "modules/open-indicator";
-@import "modules/clear";
-@import "modules/dropdown-menu";
-@import "modules/dropdown-option";
-@import "modules/selected";
-@import "modules/search-input";
-@import "modules/spinner";
+    The files remain here if your build is dependent on them
+    but they will not receive updates in future releases. All
+    SASS variables have been translated into CSS variables, so
+    migration should be quite simple if you'd like to move over.
+
+    In v4, these files will be removed.
+ */
+@import 'global/variables';
+@import 'global/component';
+@import 'global/animations';
+@import 'global/states';
+
+@import 'modules/dropdown-toggle';
+@import 'modules/open-indicator';
+@import 'modules/clear';
+@import 'modules/dropdown-menu';
+@import 'modules/dropdown-option';
+@import 'modules/selected';
+@import 'modules/search-input';
+@import 'modules/spinner';