mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-19 09:50:33 +03:00
Code Activity

feat: add dropdownOptionWrap prop with 3 strategies

Browse Source 
Closes #1455
This commit is contained in:
Jeff Sagal
2021-10-21 17:02:51 -07:00
parent 5a6c9bf707
commit 649abcac75
2 changed files with 54 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Select.vue
+25 -8
View File
@@ -102,13 +102,16 @@
:key="getOptionKey(option)" :key="getOptionKey(option)"
role="option" role="option"
class="vs__dropdown-option" class="vs__dropdown-option"
:class="{ :class="[
'vs__dropdown-option--deselect': `vs__dropdown-option--${dropdownOptionWrap}`,
isOptionDeselectable(option) && index === typeAheadPointer, {
'vs__dropdown-option--selected': isOptionSelected(option), 'vs__dropdown-option--deselect':
'vs__dropdown-option--highlight': index === typeAheadPointer, isOptionDeselectable(option) && index === typeAheadPointer,
'vs__dropdown-option--disabled': !selectable(option), 'vs__dropdown-option--selected': isOptionSelected(option),
}" 'vs__dropdown-option--highlight': index === typeAheadPointer,
'vs__dropdown-option--disabled': !selectable(option),
},
]"
:aria-selected="index === typeAheadPointer ? true : null" :aria-selected="index === typeAheadPointer ? true : null"
@mouseover="selectable(option) ? (typeAheadPointer = index) : null" @mouseover="selectable(option) ? (typeAheadPointer = index) : null"
@click.prevent.stop="selectable(option) ? select(option) : null" @click.prevent.stop="selectable(option) ? select(option) : null"
@@ -555,6 +558,21 @@ export default {
default: 'auto', 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 * When true, hitting the 'tab' key will select the current select value
* @type {Boolean} * @type {Boolean}
@@ -593,7 +611,6 @@ export default {
* for the search input. Can be used to implement * for the search input. Can be used to implement
* custom behaviour for key presses. * custom behaviour for key presses.
*/ */
mapKeydown: { mapKeydown: {
type: Function, type: Function,
/** /**
src/scss/modules/_dropdown-option.scss
+29 -14
View File
@@ -1,26 +1,41 @@
/* List Items */ /* List Items */
.vs__dropdown-option { .vs__dropdown-option {
line-height: 1.42857143; /* Normalize line height */ line-height: 1.42857143; /* Normalize line height */
display: block; display: block;
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
color: #333; /* Overrides most CSS frameworks */ color: #333; /* Overrides most CSS frameworks */
white-space: nowrap; cursor: pointer;
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 { .vs__dropdown-option--highlight {
background: $vs-state-active-bg; background: $vs-state-active-bg;
color: $vs-state-active-color; color: $vs-state-active-color;
} }
.vs__dropdown-option--deselect { .vs__dropdown-option--deselect {
background: $vs-state-deselect-bg; background: $vs-state-deselect-bg;
color: $vs-state-deselect-color; color: $vs-state-deselect-color;
} }
.vs__dropdown-option--disabled { .vs__dropdown-option--disabled {
background: inherit; background: inherit;
color: $vs-state-disabled-color; color: $vs-state-disabled-color;
cursor: inherit; cursor: inherit;
} }