Skip to content

Commit cd7d4dc

Browse files
author
Gautam
committed
Feature, limit props added
1 parent 8577536 commit cd7d4dc

File tree

6 files changed

+168
-30
lines changed

6 files changed

+168
-30
lines changed

‎dev/Dev.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app">
3-
<v-select v-model="selected" v-bind="config" />
3+
<v-select v-model="selected" v-bind="config"/>
44
</div>
55
</template>
66

‎docs/.vuepress/components/SlotLimit.vue

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<div>
3+
<v-select
4+
v-model="selected"
5+
:options="books"
6+
:limit="2"
7+
multiple
8+
label="title"
9+
>
10+
<template #option="{ title, author }">
11+
<h3 style="margin: 0">{{ title }}</h3>
12+
<em>{{ author.firstName }} {{ author.lastName }}</em>
13+
</template>
14+
<template #limit="{ length }">
15+
<span>and {{ length }} more</span>
16+
</template>
17+
</v-select>
18+
</div>
19+
</template>
20+
<script>
21+
const books = [
22+
{
23+
title: "Old Man's War",
24+
author: {
25+
firstName: 'John',
26+
lastName: 'Scalzi',
27+
},
28+
},
29+
{
30+
title: 'To Kill a Mockingbird',
31+
author: {
32+
firstName: 'Harper',
33+
lastName: 'Lee',
34+
},
35+
},
36+
{
37+
title: 'The Great Gatsby',
38+
author: {
39+
firstName: 'F. Scott',
40+
lastName: 'Fitzgerald',
41+
},
42+
},
43+
]
44+
45+
export default {
46+
data: () => ({
47+
books: books,
48+
selected: books,
49+
}),
50+
}
51+
</script>

‎docs/api/props.md

+10
Original file line numberDiff line numberDiff line change
@@ -605,3 +605,13 @@ value: {
605605
default: null
606606
},
607607
```
608+
609+
## limit
610+
611+
It will limit the display of selected options. The rest will be hidden. only work when multiple selections are made.
612+
613+
```js
614+
limit: {
615+
default: 0
616+
},
617+
```

‎docs/api/slots.md

+7
Original file line numberDiff line numberDiff line change
@@ -185,4 +185,11 @@ or have fine grain control over the markup.
185185
<SlotSpinner />
186186
<<< @/.vuepress/components/SlotSpinner.vue
187187

188+
## `limit`
189+
190+
- `limit {Number}` - if the limit props is provided
191+
192+
<SlotLimit />
193+
<<< @/.vuepress/components/SlotLimit.vue
194+
188195
</div>

‎src/components/Select.vue

+90-29
Original file line numberDiff line numberDiff line change
@@ -16,36 +16,85 @@
1616
@mousedown="toggleDropdown($event)"
1717
>
1818
<div ref="selectedOptions" class="vs__selected-options">
19-
<slot
20-
v-for="option in selectedValue"
21-
name="selected-option-container"
22-
:option="normalizeOptionForSlot(option)"
23-
:deselect="deselect"
24-
:multiple="multiple"
25-
:disabled="disabled"
26-
>
27-
<span :key="getOptionKey(option)" class="vs__selected">
28-
<slot
29-
name="selected-option"
30-
v-bind="normalizeOptionForSlot(option)"
31-
>
32-
{{ getOptionLabel(option) }}
33-
</slot>
34-
<button
35-
v-if="multiple"
36-
ref="deselectButtons"
37-
:disabled="disabled"
38-
type="button"
39-
class="vs__deselect"
40-
:title="`Deselect ${getOptionLabel(option)}`"
41-
:aria-label="`Deselect ${getOptionLabel(option)}`"
42-
@click="deselect(option)"
43-
>
44-
<component :is="childComponents.Deselect" />
45-
</button>
46-
</span>
47-
</slot>
19+
<template v-if="multiple">
20+
<slot
21+
v-for="option in selectedValue.slice(0, limit > 0 ? limit : selectedValue.length)"
22+
name="selected-option-container"
23+
:option="normalizeOptionForSlot(option)"
24+
:deselect="deselect"
25+
:multiple="multiple"
26+
:disabled="disabled"
27+
>
28+
<span :key="getOptionKey(option)" class="vs__selected">
29+
<slot
30+
name="selected-option"
31+
v-bind="normalizeOptionForSlot(option)"
32+
>
33+
{{ getOptionLabel(option) }}
34+
</slot>
35+
<button
36+
v-if="multiple"
37+
ref="deselectButtons"
38+
:disabled="disabled"
39+
type="button"
40+
class="vs__deselect"
41+
:title="`Deselect ${getOptionLabel(option)}`"
42+
:aria-label="`Deselect ${getOptionLabel(option)}`"
43+
@click="deselect(option)"
44+
>
45+
<component :is="childComponents.Deselect" />
46+
</button>
47+
</span>
48+
</slot>
4849

50+
<template v-if="selectedValue.length > limit && limit > 0">
51+
<span class="vs__limit-label">
52+
<slot
53+
v-if="$slots.limit"
54+
name="limit"
55+
:length="scope.limit.length"
56+
>
57+
<template #default="{ length }">
58+
{{ selectedValue.length - length }} more
59+
</template>
60+
</slot>
61+
<template v-else>
62+
{{ selectedValue.length - limit }} more
63+
</template>
64+
</span>
65+
</template>
66+
</template>
67+
<template v-else>
68+
<slot
69+
v-for="option in selectedValue"
70+
name="selected-option-container"
71+
:option="normalizeOptionForSlot(option)"
72+
:deselect="deselect"
73+
:multiple="multiple"
74+
:disabled="disabled"
75+
>
76+
<span :key="getOptionKey(option)" class="vs__selected">
77+
<slot
78+
name="selected-option"
79+
v-bind="normalizeOptionForSlot(option)"
80+
>
81+
{{ getOptionLabel(option) }}
82+
</slot>
83+
<button
84+
v-if="multiple"
85+
ref="deselectButtons"
86+
:disabled="disabled"
87+
type="button"
88+
class="vs__deselect"
89+
:title="`Deselect ${getOptionLabel(option)}`"
90+
:aria-label="`Deselect ${getOptionLabel(option)}`"
91+
@click="deselect(option)"
92+
>
93+
<component :is="childComponents.Deselect" />
94+
</button>
95+
</span>
96+
</slot>
97+
</template>
4998
<slot name="search" v-bind="scope.search">
5099
<input
51100
class="vs__search"
@@ -668,6 +717,15 @@ export default {
668717
type: [String, Number],
669718
default: () => uniqueId(),
670719
},
720+
721+
/**
722+
* To limit the visibility with multiple options.
723+
* @type {Number}
724+
*/
725+
limit: {
726+
type: Number,
727+
default: 0,
728+
},
671729
},
672730
673731
data() {
@@ -780,6 +838,9 @@ export default {
780838
spinner: {
781839
loading: this.mutableLoading,
782840
},
841+
limit: {
842+
length: this.selectedValue.length,
843+
},
783844
noOptions: {
784845
search: this.search,
785846
loading: this.mutableLoading,

‎src/css/modules/selected.css

+9
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,12 @@
4141
display: none;
4242
}
4343
}
44+
45+
.vs__limit-label {
46+
display: flex;
47+
align-items: center;
48+
color: var(--vs-selected-color);
49+
line-height: var(--vs-line-height);
50+
padding: 0 0.25em;
51+
z-index: 0;
52+
}

0 commit comments

Comments
 (0)