WIP

- use `grid` instead of `flex` in dropdown-menu
- make long values centered by dropping the height of the search input to zero when select is filled

docs/.vuepress/components/OptionWrapStrategy.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-select
+    :dropdown-option-wrap="wrap"
+    :options="[
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      'Mauris molestie, orci non dapibus interdum, sapien velit gravida ex, vel rutrum purus augue tempor ligula.',
+      'Cras et felis in massa maximus tempor. Praesent malesuada enim eget sollicitudin luctus. Praesent ullamcorper euismod nisi, vel volutpat diam volutpat eu.',
+      'Nunc suscipit laoreet nunc. Donec rhoncus blandit nibh et auctor. Mauris euismod erat non gravida egestas.',
+    ]"
+  />
+</template>
+
+<script>
+export default {
+  name: 'OptionWrapStrategy',
+  props: ['wrap'],
+}
+</script>

docs/guide/css.md

@@ -2,16 +2,16 @@ Vue Select offers many APIs for customizing the look and feel from the component
 [scoped slots](../api/slots.md), [custom child components](components.md), or modify the built in
 SCSS variables.
 
-::: tip
+::: tip Support for CSS variables (custom properties) is currently on the road map for those that
-Support for CSS variables (custom properties) is currently on the road map for those
+are not using sass in their projects.
-that are not using sass in their projects. 
 :::
 
 ## SCSS Variables
 
 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.
@@ -26,9 +26,9 @@ 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
 – 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. 
+In order to override a default property in your app, you should add one level of specificity. The
-The easiest way to do this, is to add `.v-select` before the `vs__*` selector if you want to adjust
+easiest way to do this, is to add `.v-select` before the `vs__*` selector if you want to adjust all
-all instances of Vue Select, or add your own classname if you just want to affect one.
+instances of Vue Select, or add your own classname if you just want to affect one.
 
 <CssSpecificity />  
 
@@ -44,11 +44,12 @@ uses the [VueJS transition system](https://vuejs.org/v2/guide/transitions.html).
    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 
+2. You can also override the default CSS for the `vs__fade` transition. Again, if you wanted to
-wanted to eliminate the transition entirely:
+   eliminate the transition entirely:
 
 ```css
 .vs__fade-enter-active,
@@ -56,3 +57,39 @@ wanted to eliminate the transition entirely:
     transition: none;
 }
 ```
+
+## Option Wrapping Strategy
+
+When options in the dropdown are wider than the dropdown itself, there are three strategies
+available. The strategy can be set with the `dropdownOptionWrap` prop. This prop accepts one of
+three strings:
+
+### `wrap`
+
+Break options that are wider than the dropdown onto the next line. No horizontal scrollbar.
+
+```vue
+<v-select dropdown-option-wrap="wrap" />
+```
+
+<OptionWrapStrategy wrap="wrap" />
+
+### `truncate`
+
+Truncate options that are wider than the dropdown using an ellipsis `...`. No horizontal scrollbar.
+
+```vue
+<v-select dropdown-option-wrap="truncate" />
+```
+
+<OptionWrapStrategy wrap="truncate" />
+
+### `nowrap`
+
+Don't wrap or truncate options wider than the dropdown. Introduces horizontal scrollbar.
+
+```vue
+<v-select dropdown-option-wrap="nowrap" />
+```
+
+<OptionWrapStrategy wrap="nowrap" />

src/components/Select.vue

@@ -835,6 +835,8 @@ export default {
         'vs--open': this.dropdownOpen,
         'vs--single': !this.multiple,
         'vs--multiple': this.multiple,
+        'vs--empty': this.selectedValue.length === 0,
+        'vs--not-empty': this.selectedValue.length !== 0,
         'vs--searching': this.searching && !this.noDrop,
         'vs--searchable': this.searchable && !this.noDrop,
         'vs--unsearchable': !this.searchable,

src/scss/modules/_dropdown-menu.scss

@@ -12,10 +12,12 @@ $min-width: $vs-dropdown-min-width;
 $max-height: $vs-dropdown-max-height;
 
 .vs__dropdown-menu {
-  display: block;
+    display: grid;
     box-sizing: border-box;
     position: absolute;
-  top: calc(100% - #{$border-width}); // -{#$border-width} here ensures the left and right borders of the dropdown appear flush with the toggle.
+    top: calc(
+        100% - #{$border-width}
+    ); // -{#$border-width} here ensures the left and right borders of the dropdown appear flush with the toggle.
     left: 0;
     z-index: $z-index;
     padding: 5px 0;

src/scss/modules/_search-input.scss

@@ -45,6 +45,14 @@ $font-size: 1em;
     States
  */
 
+// Empty
+.vs--not-empty .vs__search {
+    height: 0;
+}
+.vs--not-empty .vs__search:focus {
+    height: auto;
+}
+
 // Unsearchable
 .vs--unsearchable {
     .vs__search {
@@ -57,6 +65,6 @@ $font-size: 1em;
 // Single, when searching but not loading or open
 .vs--single.vs--searching:not(.vs--open):not(.vs--loading) {
     .vs__search {
-      opacity: .2;
+        opacity: 0.2;
     }
 }