From 649abcac7547e8937be0df7d59f10c9c05a67c53 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Thu, 21 Oct 2021 17:02:51 -0700
Subject: [PATCH] feat: add dropdownOptionWrap prop with 3 strategies

Closes #1455
---
 src/components/Select.vue              | 33 +++++++++++++++-----
 src/scss/modules/_dropdown-option.scss | 43 +++++++++++++++++---------
 2 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 47f810d..aabaace 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -102,13 +102,16 @@
           :key="getOptionKey(option)"
           role="option"
           class="vs__dropdown-option"
-          :class="{
-            'vs__dropdown-option--deselect':
-              isOptionDeselectable(option) && index === typeAheadPointer,
-            'vs__dropdown-option--selected': isOptionSelected(option),
-            'vs__dropdown-option--highlight': index === typeAheadPointer,
-            'vs__dropdown-option--disabled': !selectable(option),
-          }"
+          :class="[
+            `vs__dropdown-option--${dropdownOptionWrap}`,
+            {
+              'vs__dropdown-option--deselect':
+                isOptionDeselectable(option) && index === typeAheadPointer,
+              'vs__dropdown-option--selected': isOptionSelected(option),
+              'vs__dropdown-option--highlight': index === typeAheadPointer,
+              'vs__dropdown-option--disabled': !selectable(option),
+            },
+          ]"
           :aria-selected="index === typeAheadPointer ? true : null"
           @mouseover="selectable(option) ? (typeAheadPointer = index) : null"
           @click.prevent.stop="selectable(option) ? select(option) : null"
@@ -555,6 +558,21 @@ export default {
       default: 'auto',
     },
 
+    /**
+     * Determines how to handle option labels that are
+     * wider than the dropdown itself. Accepts:
+     * - nowrap: don't wrap the option, introduce horizontal scrollbars
+     * - wrap: wrap the option onto the next line
+     * - truncate: truncate text with ...
+     */
+    dropdownOptionWrap: {
+      type: String,
+      default: 'nowrap',
+      validator(wrap) {
+        return ['nowrap', 'wrap', 'truncate'].includes(wrap)
+      },
+    },
+
     /**
      * When true, hitting the 'tab' key will select the current select value
      * @type {Boolean}
@@ -593,7 +611,6 @@ export default {
      * for the search input. Can be used to implement
      * custom behaviour for key presses.
      */
-
     mapKeydown: {
       type: Function,
       /**
diff --git a/src/scss/modules/_dropdown-option.scss b/src/scss/modules/_dropdown-option.scss
index 02a7685..7818f3e 100644
--- a/src/scss/modules/_dropdown-option.scss
+++ b/src/scss/modules/_dropdown-option.scss
@@ -1,26 +1,41 @@
 /* List Items */
 .vs__dropdown-option {
-  line-height: 1.42857143; /* Normalize line height */
-  display: block;
-  padding: 3px 20px;
-  clear: both;
-  color: #333; /* Overrides most CSS frameworks */
-  white-space: nowrap;
-  cursor: pointer;
+    line-height: 1.42857143; /* Normalize line height */
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    color: #333; /* Overrides most CSS frameworks */
+    cursor: pointer;
+}
+
+.vs__dropdown-option--wrap {
+    white-space: normal;
+    line-break: loose;
+    overflow-wrap: anywhere;
+}
+
+.vs__dropdown-option--nowrap {
+    white-space: nowrap;
+}
+
+.vs__dropdown-option--truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .vs__dropdown-option--highlight {
-  background: $vs-state-active-bg;
-  color: $vs-state-active-color;
+    background: $vs-state-active-bg;
+    color: $vs-state-active-color;
 }
 
 .vs__dropdown-option--deselect {
-  background: $vs-state-deselect-bg;
-  color: $vs-state-deselect-color;
+    background: $vs-state-deselect-bg;
+    color: $vs-state-deselect-color;
 }
 
 .vs__dropdown-option--disabled {
-  background: inherit;
-  color: $vs-state-disabled-color;
-  cursor: inherit;
+    background: inherit;
+    color: $vs-state-disabled-color;
+    cursor: inherit;
 }