Skip to content

Commit 83939c9

Browse files
author
Guillaume Chau
committed
feat(ui): Plugin add search (wip)
1 parent 088d316 commit 83939c9

17 files changed

+725
-58
lines changed

‎packages/@vue/cli-ui/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"vue": "^2.5.13",
4040
"vue-apollo": "^3.0.0-beta.5",
4141
"vue-cli-plugin-apollo": "^0.4.1",
42+
"vue-instantsearch": "^1.5.1",
4243
"vue-router": "^3.0.1",
4344
"vue-template-compiler": "^2.5.13",
4445
"xterm": "^3.2.0"

‎packages/@vue/cli-ui/src/assets/search-by-algolia.svg

+1
Loading

‎packages/@vue/cli-ui/src/components/InstantSearchInput.vue

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div class="instant-search-input">
3+
<VueInput
4+
icon-left="search"
5+
v-model="query"
6+
class="big"
7+
placeholder="Search a plugin"
8+
>
9+
<template slot="right">
10+
<VueButton
11+
class="icon-button flat"
12+
icon-left="clear"
13+
@click="clear()"
14+
/>
15+
</template>
16+
</VueInput>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import { Component } from 'vue-instantsearch'
22+
23+
export default {
24+
mixins: [
25+
Component
26+
],
27+
28+
computed: {
29+
query: {
30+
get() {
31+
return this.searchStore.query
32+
},
33+
set (value) {
34+
this.searchStore.stop()
35+
this.searchStore.query = value
36+
this.$emit('query', value)
37+
// We here ensure we give the time to listeners to alter the store's state
38+
// without triggering in between ghost queries.
39+
this.$nextTick(() => {
40+
this.searchStore.start()
41+
this.searchStore.refresh()
42+
})
43+
}
44+
}
45+
},
46+
47+
methods: {
48+
clear () {
49+
this.searchStore.stop()
50+
if (this.searchStore.query.length > 0) {
51+
this.searchStore.query = ''
52+
}
53+
if (this.searchStore.activeRefinements.length > 0) {
54+
this.searchStore.clearRefinements()
55+
}
56+
this.searchStore.start()
57+
this.searchStore.refresh()
58+
}
59+
}
60+
}
61+
</script>
62+
63+
<style lang="stylus" scoped>
64+
.instant-search-input
65+
.vue-input
66+
width 100%
67+
</style>

‎packages/@vue/cli-ui/src/components/InstantSearchPagination.vue

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div
3+
v-show="totalResults > 0"
4+
class="instant-search-pagination"
5+
>
6+
<div class="content">
7+
<VueButton
8+
class="icon-button"
9+
icon-left="first_page"
10+
:disabled="page === 1"
11+
@click="goToFirstPage()"
12+
/>
13+
14+
<VueButton
15+
class="icon-button"
16+
icon-left="chevron_left"
17+
:disabled="page === 1"
18+
@click="goToPreviousPage()"
19+
/>
20+
21+
<VueButton
22+
v-for="item in pages"
23+
:key="item"
24+
class="icon-button"
25+
:class="{
26+
primary: page === item
27+
}"
28+
:label="item.toString()"
29+
@click="goToPage(item)"
30+
/>
31+
32+
<VueButton
33+
class="icon-button"
34+
icon-left="chevron_right"
35+
:disabled="page >= totalPages"
36+
@click="goToNextPage()"
37+
/>
38+
39+
<VueButton
40+
class="icon-button"
41+
icon-left="last_page"
42+
:disabled="page >= totalPages"
43+
@click="goToLastPage()"
44+
/>
45+
</div>
46+
</div>
47+
</template>
48+
49+
<script>
50+
import { Pagination } from 'vue-instantsearch'
51+
52+
export default {
53+
extends: Pagination
54+
}
55+
</script>
56+
57+
<style lang="stylus" scoped>
58+
@import "~@/style/imports"
59+
60+
.instant-search-pagination
61+
.content
62+
h-box()
63+
box-center()
64+
65+
> .vue-button
66+
space-between-x(6px)
67+
</style>

‎packages/@vue/cli-ui/src/components/ItemLogo.vue

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<template>
2+
<div
3+
class="item-logo"
4+
:class="{
5+
selected,
6+
loaded
7+
}"
8+
>
9+
<div class="wrapper">
10+
<VueIcon
11+
v-if="selected"
12+
icon="done"
13+
/>
14+
<img
15+
v-else-if="image"
16+
class="image"
17+
:src="image"
18+
:key="image"
19+
@load="loaded = true"
20+
>
21+
<VueIcon
22+
v-else
23+
:icon="icon"
24+
/>
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script>
30+
export default {
31+
props: {
32+
image: {
33+
type: String,
34+
default: null
35+
},
36+
37+
icon: {
38+
type: String,
39+
default: 'widgets'
40+
},
41+
42+
selected: {
43+
type: Boolean,
44+
default: false
45+
}
46+
},
47+
48+
data () {
49+
return {
50+
loaded: false
51+
}
52+
},
53+
54+
watch: {
55+
image (value) {
56+
this.loaded = false
57+
}
58+
}
59+
}
60+
</script>
61+
62+
<style lang="stylus" scoped>
63+
@import "~@/style/imports"
64+
65+
.item-logo
66+
margin-right $padding-item
67+
.wrapper
68+
h-box()
69+
box-center()
70+
width 42px
71+
height @width
72+
background rgba(black, .03)
73+
border-radius 50%
74+
overflow hidden
75+
.image
76+
width 100%
77+
height @width
78+
transform scale(0)
79+
.vue-icon
80+
width 24px
81+
height @width
82+
>>> svg
83+
fill rgba($color-text-light, .3)
84+
85+
&.loaded
86+
.image
87+
animation zoom .1s
88+
transform none
89+
90+
&.selected
91+
.wrapper
92+
background $vue-color-primary
93+
animation zoom .1s
94+
.vue-icon
95+
>>> svg
96+
fill $vue-color-light
97+
98+
@keyframes zoom
99+
0%
100+
transform scale(0)
101+
100%
102+
transform scale(1)
103+
</style>

‎packages/@vue/cli-ui/src/components/ListItemInfo.vue

+24-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
selected
66
}"
77
>
8-
<div class="name">{{ name }}</div>
8+
<div class="name">
9+
<slot name="name">
10+
{{ name }}
11+
</slot>
12+
</div>
913
<div v-if="description || link || showDescription" class="description">
1014
<slot name="description">
1115
{{ description }}
@@ -14,8 +18,10 @@
1418
v-if="link"
1519
:href="link"
1620
target="_blank"
21+
class="more-info"
1722
@click.stop="() => {}"
1823
>
24+
<VueIcon icon="open_in_new" class="medium top"/>
1925
More info
2026
</a>
2127
</div>
@@ -37,7 +43,7 @@ export default {
3743
3844
name: {
3945
type: String,
40-
required: true
46+
default: null
4147
},
4248
4349
selected: {
@@ -68,6 +74,22 @@ export default {
6874
svg
6975
fill @color
7076
77+
.more-info
78+
color $vue-color-primary
79+
padding 0 4px 0 2px
80+
border-radius $br
81+
.vue-icon
82+
>>> svg
83+
fill @color
84+
&:hover
85+
color $vue-color-light
86+
background $vue-color-primary
87+
.vue-icon
88+
>>> svg
89+
fill @color
90+
&:active
91+
background darken($vue-color-primary, 10%)
92+
7193
&.selected
7294
.name
7395
color $vue-color-primary

‎packages/@vue/cli-ui/src/components/LoggerView.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
/>
2020
<VueButton
2121
class="icon-button"
22-
icon-left="arrow_downward"
22+
icon-left="subdirectory_arrow_left"
2323
v-tooltip="'Scroll to bottom'"
2424
@click="scrollToBottom()"
2525
/>

0 commit comments

Comments
 (0)