Skip to content

Commit 39de46d

Browse files
antoinematyjaantoinematyja
committed
Rewrite component to use objects in v-model
1 parent b990536 commit 39de46d

File tree

5 files changed

+216
-116
lines changed

5 files changed

+216
-116
lines changed

‎demo/views/Api.vue

+9
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,15 @@
8888
<td><code>true</code></td>
8989
<td>Enable option on top to (un)select all options</td>
9090
</tr>
91+
<tr>
92+
<td>
93+
<code>clear-button</code>
94+
<div><span class="badge badge-secondary">multiple only</span></div>
95+
</td>
96+
<td><code>Boolean</code></td>
97+
<td><code>false</code></td>
98+
<td>Enable button to clear selection</td>
99+
</tr>
91100
<tr>
92101
<td>
93102
<code>display-tags</code>

‎demo/views/Demo.vue

+41-27
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@
5151
<label class="form-check-label" for="selectAllOption">"Select all" option</label>
5252
</div>
5353
</div>
54+
<div class="form-group">
55+
<div class="form-check form-switch">
56+
<input class="form-check-input" type="checkbox" id="clearButton" v-model="clearButton">
57+
<label class="form-check-label" for="clearButton">Clear button</label>
58+
</div>
59+
</div>
5460
<div class="form-group">
5561
<div class="form-check form-switch">
5662
<input class="form-check-input" type="checkbox" id="displayTags" v-model="displayTags">
@@ -62,12 +68,7 @@
6268
<!-- Single -->
6369
<div class="col-span-4">
6470
<h4>Single</h4>
65-
<div class="form-group">
66-
<samp>v-model</samp>
67-
<div>
68-
<code>{{ JSON.stringify(value) }}</code>
69-
</div>
70-
</div>
71+
7172
<div class="form-group">
7273
<label>Favorite pokémon</label>
7374
<!-- Actual component -->
@@ -88,17 +89,19 @@
8889
</template>
8990
</vue-select>
9091
</div>
91-
</div>
9292

93-
<!-- Multiple -->
94-
<div class="col-span-4">
95-
<h4>Multiple</h4>
9693
<div class="form-group">
9794
<samp>v-model</samp>
9895
<div>
99-
<code>{{ JSON.stringify(valueMultiple) }}</code>
96+
<code>{{ JSON.stringify(value) }}</code>
10097
</div>
10198
</div>
99+
</div>
100+
101+
<!-- Multiple -->
102+
<div class="col-span-4">
103+
<h4>Multiple</h4>
104+
102105
<div class="form-group">
103106
<label>Pokémon team</label>
104107
<!-- Actual component -->
@@ -115,6 +118,7 @@
115118
:page-size="parseInt(pageSize)"
116119
:displaySelectedOptionsFirst="displaySelectedOptionsFirst"
117120
:select-all-option="selectAllOption"
121+
:clear-button="clearButton"
118122
:display-tags="displayTags">
119123
<template v-slot:option="{ option }">
120124
<img :src="option.iconUrl" class="pokemon-icon">
@@ -130,6 +134,13 @@
130134
</template>-->
131135
</vue-select>
132136
</div>
137+
138+
<div class="form-group">
139+
<samp>v-model</samp>
140+
<div>
141+
<code>{{ JSON.stringify(valueMultiple) }}</code>
142+
</div>
143+
</div>
133144
</div>
134145
</div>
135146
</div>
@@ -139,28 +150,31 @@
139150
export default {
140151
name: 'Demo',
141152
data: function() {
153+
const options = Object.freeze([
154+
{ value: 1, name: 'Bulbasaur', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/001.png' },
155+
{ value: 2, name: 'Ivysaur', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/002.png' },
156+
{ value: 3, name: 'Venusaur', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/003.png' },
157+
{ value: 4, name: 'Charmander', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/004.png' },
158+
{ value: 5, name: 'Charmeleon', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/005.png' },
159+
{ value: 6, name: 'Charizard', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/006.png' },
160+
{ value: 7, name: 'Squirtle', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/007.png' },
161+
{ value: 8, name: 'Wartortle', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/008.png' },
162+
{ value: 9, name: 'Blastoise', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/009.png' },
163+
{ value: 10, name: 'Caterpie', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/010.png' },
164+
{ value: 11, name: 'Metapod', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/011.png' },
165+
{ value: 12, name: 'Butterfree', iconUrl: 'https://www.serebii.net/pokedex-xy/icon/012.png' }
166+
])
167+
142168
return {
143-
options: Object.freeze([
144-
{ value: 1, name: 'Bulbasaur', iconUrl: 'https://cdn.bulbagarden.net/upload/e/ec/001MS.png' },
145-
{ value: 2, name: 'Ivysaur', iconUrl: 'https://cdn.bulbagarden.net/upload/6/6b/002MS.png' },
146-
{ value: 3, name: 'Venusaur', iconUrl: 'https://cdn.bulbagarden.net/upload/e/e5/003XYMS.png' },
147-
{ value: 4, name: 'Charmander', iconUrl: 'https://cdn.bulbagarden.net/upload/b/bb/004MS.png' },
148-
{ value: 5, name: 'Charmeleon', iconUrl: 'https://cdn.bulbagarden.net/upload/d/dc/005MS.png' },
149-
{ value: 6, name: 'Charizard', iconUrl: 'https://cdn.bulbagarden.net/upload/6/62/006XYMS.png' },
150-
{ value: 7, name: 'Squirtle', iconUrl: 'https://cdn.bulbagarden.net/upload/9/92/007MS.png' },
151-
{ value: 8, name: 'Wartortle', iconUrl: 'https://cdn.bulbagarden.net/upload/f/f3/008MS.png' },
152-
{ value: 9, name: 'Blastoise', iconUrl: 'https://cdn.bulbagarden.net/upload/5/59/009XYMS.png' },
153-
{ value: 10, name: 'Caterpie', iconUrl: 'https://cdn.bulbagarden.net/upload/6/69/010MS.png' },
154-
{ value: 11, name: 'Metapod', iconUrl: 'https://cdn.bulbagarden.net/upload/c/ce/011MS.png' },
155-
{ value: 12, name: 'Butterfree', iconUrl: 'https://cdn.bulbagarden.net/upload/1/14/012MS.png' }
156-
]),
157-
value: 11,
158-
valueMultiple: [1, 4, 7],
169+
options,
170+
value: options[0],
171+
valueMultiple: [options[0], options[3], options[6]],
159172
alwaysOpen: false,
160173
filterable: true,
161174
checkboxesStyle: false,
162175
selectAllOption: true,
163176
closeOnSelect: false,
177+
clearButton: false,
164178
displayTags: false,
165179
pagination: false,
166180
pageSize: 10,

‎package-lock.json

+72-22
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,14 @@
2323
"main": "dist/vue-select.umd.js",
2424
"dependencies": {
2525
"core-js": "^3.6.4",
26+
"lodash": "^4.17.15",
2627
"vue": "^2.6.11"
2728
},
2829
"devDependencies": {
2930
"@vue/cli-plugin-babel": "~4.3.0",
3031
"@vue/cli-service": "~4.3.0",
31-
"bootstrap": "^4.4.1",
32-
"bootstrap-vue": "^2.11.0",
32+
"bootstrap": "^4.6.0",
33+
"bootstrap-vue": "^2.21.2",
3334
"sass": "^1.26.3",
3435
"sass-loader": "^8.0.2",
3536
"vue-router": "^3.1.6",

0 commit comments

Comments
 (0)