Skip to content

Commit 65b2c14

Browse files
lennyrouanetlennyrouanet
authored
Merge pull request #1 from frontello/vuejs-3-compatibility
V2
2 parents d226af6 + ca78ce1 commit 65b2c14

File tree

3 files changed

+74
-66
lines changed

3 files changed

+74
-66
lines changed

‎README.md‎

Lines changed: 39 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Suggestion component for VueJS
1+
# Suggestion component for VueJS 3
22

33
Easy to use.
44

@@ -10,46 +10,53 @@ Easy to use.
1010

1111
Add these lines in the `<head>` tag :
1212
```
13-
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
14-
<script src="./node_modules/vue-component-suggestion/suggestion.js"></script>
13+
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
1514
<link rel="stylesheet" href="./node_modules/vue-component-suggestion/suggestion.css">
1615
17-
<script>
18-
document.addEventListener('DOMContentLoaded', function () {
19-
new Vue({ el: '#vue-app' });
20-
});
16+
<script type="module">
17+
import {suggestion} from './node_modules/vue-component-suggestion/suggestion.js';
2118
22-
function loadSuggestions(search, callback) {
23-
fetch('https://localhost/api/search' + escape(search))
24-
.then((response) => {
25-
return response.json();
26-
})
27-
.then((datas) => {
28-
let results = [];
29-
30-
datas.forEach( data => {
31-
results.push({
32-
label: data.label,
33-
datas: data,
34-
});
35-
});
36-
37-
callback(results);
38-
})
39-
.catch((err) => {
40-
callback([]);
19+
document.addEventListener('DOMContentLoaded', function () {
20+
21+
const app = Vue.createApp({
22+
components: {
23+
'suggestion': suggestion
24+
},
25+
methods: {
26+
loadSuggestions(search, callback) {
27+
fetch('https://localhost/api/search' + escape(search))
28+
.then((response) => {
29+
return response.json();
30+
})
31+
.then((datas) => {
32+
let results = [];
33+
34+
datas.forEach( data => {
35+
results.push({
36+
label: data.label,
37+
datas: data,
38+
});
39+
});
40+
41+
callback(results);
42+
})
43+
.catch((err) => {
44+
callback([]);
45+
});
46+
},
47+
chooseSuggestion(search, datas) {
48+
location.href = datas.link;
49+
}
50+
}
4151
});
42-
}
43-
44-
function chooseSuggestion(search, datas) {
45-
location.href = datas.link;
46-
}
52+
app.mount('#vue-app');
53+
});
4754
</script>
4855
```
4956

5057
And this in the `<body>` tag :
5158
```
5259
<div id="vue-app">
53-
<suggestion name="search" placeholder="Enter your search" :load-suggestion-callback="loadSuggestions" :choose-suggestion-callback="chooseSuggestion"></suggestion>
60+
<suggestion name="search" placeholder="Enter your search" @load-suggestion="loadSuggestions" @choose-suggestion="chooseSuggestion"></suggestion>
5461
</div>
5562
```

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-component-suggestion",
3-
"version": "1.0.1",
4-
"description": "Suggestion component for VueJS",
3+
"version": "2.0.0",
4+
"description": "Suggestion component for VueJS 3",
55
"main": "suggestion.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1"

‎suggestion.js‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,40 @@
11
'use strict';
22

3-
Vue.component('suggestion', {
3+
const suggestion = {
44
template: `
55
<div v-bind:class="[suggestions.length > 0 ? [suggestionContainerClass, suggestionActivatedClass] : suggestionContainerClass]">
6-
<input :type="type" :name="name" :placeholder="placeholder" v-model="search" :autocomplete="autocomplete" v-on:keyup="keyboardHandle" v-on:search="keyboardHandle" v-focus>
6+
<input :type="type" :name="name" :placeholder="placeholder" :autocomplete="autocomplete" v-model="search" v-on:keyup="keyboardHandle" v-on:search="keyboardHandle" v-focus>
77
<ul v-if="suggestions">
88
<li v-for="suggestion in suggestions" v-bind:class="{ selected: suggestion.selected }" v-on:click="chooseSuggestion(suggestion)">{{ suggestion.label }}</li>
99
</ul>
1010
</div>
11-
`,
12-
data: () => {
13-
return {
14-
currentSuggestion: null,
15-
suggestions: [],
16-
loadTimeout: null
17-
}
18-
},
11+
`,
12+
components: {},
13+
emits: [
14+
'loadSuggestion',
15+
'chooseSuggestion'
16+
],
1917
props: {
20-
name: {
18+
type: {
2119
type: String,
2220
default: 'search'
2321
},
24-
placeholder: {
22+
name: {
2523
type: String,
2624
default: 'search'
2725
},
28-
type: {
26+
placeholder: {
2927
type: String,
30-
default: 'search'
31-
},
32-
search: {
33-
type: String,
34-
default: ''
28+
default: 'Enter your search'
3529
},
3630
autocomplete: {
3731
type: String,
3832
default: 'off'
3933
},
34+
value: {
35+
type: String,
36+
default: ''
37+
},
4038
loadSuggestionFromTheNumberOfCharacters: {
4139
type: Number,
4240
default: 3
@@ -45,16 +43,6 @@ Vue.component('suggestion', {
4543
type: Number,
4644
default: 100
4745
},
48-
loadSuggestionCallback: {
49-
type: Function,
50-
require: true,
51-
default: null
52-
},
53-
chooseSuggestionCallback: {
54-
type: Function,
55-
require: true,
56-
default: null
57-
},
5846
suggestionContainerClass: {
5947
type: String,
6048
default: 'vue-suggestion'
@@ -76,16 +64,27 @@ Vue.component('suggestion', {
7664
default: true
7765
}
7866
},
67+
data() {
68+
return {
69+
search: '',
70+
currentSuggestion: null,
71+
suggestions: [],
72+
loadTimeout: null
73+
}
74+
},
7975
directives: {
8076
focus: {
8177
inserted: function (el) {
82-
el.focus()
78+
el.focus();
8379
}
8480
}
8581
},
8682
created () {
8783
window.addEventListener('wheel', this.mouseHandle);
8884
},
85+
mounted() {
86+
this.search = this.value;
87+
},
8988
destroyed () {
9089
window.removeEventListener('wheel', this.mouseHandle);
9190
},
@@ -97,7 +96,7 @@ Vue.component('suggestion', {
9796
clearTimeout(this.loadTimeout);
9897

9998
this.loadTimeout = setTimeout( () => {
100-
this.loadSuggestionCallback(this.search, (suggestions) => {
99+
this.$emit('loadSuggestion', this.search, (suggestions) => {
101100
suggestions.forEach( suggestion => {
102101
if (undefined === suggestion.selected) {
103102
suggestion.selected = false;
@@ -122,7 +121,7 @@ Vue.component('suggestion', {
122121
chooseSuggestion: function (suggestion) {
123122
this.setCurrentSuggestion(suggestion);
124123
this.closeSuggestionList();
125-
this.chooseSuggestionCallback(suggestion.label, suggestion.datas);
124+
this.$emit('chooseSuggestion', suggestion.label, suggestion.datas);
126125
},
127126
suggestionListNavigation: function(direction) {
128127
if (this.currentSuggestion) {
@@ -206,4 +205,6 @@ Vue.component('suggestion', {
206205
}
207206
},
208207
}
209-
});
208+
}
209+
210+
export { suggestion };

0 commit comments

Comments
 (0)