Skip to content

Commit 33feacf

Browse files
johnleiderjohnleider
committed
docs(Search): improve ui
1 parent a925651 commit 33feacf

File tree

3 files changed

+95
-74
lines changed

3 files changed

+95
-74
lines changed

‎packages/docs/src/components/app/search/Search.vue‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<!-- possible bug with dialog overflow with scrollable -->
44
<v-dialog
55
v-model="model"
6-
content-class="overflow-visible"
7-
height="500"
6+
content-class="overflow-visible align-self-start mt-16"
7+
max-height="900"
88
scrollable
99
width="600"
1010
@after-leave="searchString = ''"
@@ -35,36 +35,23 @@
3535
</app-btn>
3636
</template>
3737

38-
<v-card height="100%">
39-
<v-toolbar color="primary" class="ps-3 pe-4">
40-
<v-icon icon="$vuetify" size="x-large" />
41-
42-
<v-toolbar-title class="ms-2">
43-
{{ t('search.label') }} Vuetify
44-
</v-toolbar-title>
45-
46-
<v-spacer />
47-
48-
<v-btn
49-
class="me-n2"
50-
icon="mdi-close"
51-
size="x-small"
52-
variant="text"
53-
@click="model = false"
54-
/>
55-
</v-toolbar>
56-
38+
<v-card>
5739
<app-text-field
5840
v-model="searchString"
5941
:placeholder="`${t('search.looking') }...`"
6042
autofocus
61-
class="flex-grow-0 pa-4"
62-
clearable
63-
variant="outlined"
64-
/>
65-
66-
<v-card-text class="px-4 pb-4 pt-0">
67-
<div v-if="!searchString" class="mt-6 text-center">
43+
class="flex-grow-0 mb-4"
44+
variant="filled"
45+
>
46+
<template #append-inner>
47+
<app-btn border size="small">
48+
<span class="text-caption text-disabled">{{ t('esc') }}</span>
49+
</app-btn>
50+
</template>
51+
</app-text-field>
52+
53+
<v-card-text :class="['px-4 py-0 d-flex justify-center', searchString ? 'align-start' : 'align-center']">
54+
<div v-if="!searchString" class="text-center">
6855
<v-icon
6956
class="mb-6 mx-auto text-disabled"
7057
icon="mdi-text-box-search-outline"
@@ -80,6 +67,7 @@
8067

8168
<ais-instant-search
8269
v-else
70+
class="flex-grow-1"
8371
:search-client="searchClient"
8472
index-name="vuetifyjs-v3"
8573
@state-change="searchFunction"
@@ -96,6 +84,8 @@
9684
</ais-instant-search>
9785
</v-card-text>
9886

87+
<v-divider class="my-4" />
88+
9989
<AisPoweredBy class="ms-auto me-4 mb-2" />
10090
</v-card>
10191
</v-dialog>

‎packages/docs/src/components/app/search/SearchResults.vue‎

Lines changed: 76 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,62 +5,80 @@
55
<v-list
66
ref="rootEl"
77
bg-color="transparent"
8-
class="py-0"
8+
class="pa-0"
99
density="compact"
1010
nav
1111
>
1212
<template v-for="(group, i) in props.groups">
13-
<v-divider
14-
v-if="i !== 0"
15-
class="mb-2 mt-2 ms-2 me-n2"
16-
/>
17-
18-
<div class="text-high-emphasis font-weight-black text-uppercase">
19-
{{ group.name }}
20-
</div>
21-
22-
<template v-for="(child, ci) in group.items">
23-
<v-list-item
24-
v-if="child.items[0]._highlightResult.hierarchy.lvl1.matchLevel === 'full'"
25-
:key="`search-${i}-${ci}`"
26-
:to="getPathname(child)"
27-
>
28-
<v-list-item-title>
29-
<div class="d-inline-block" v-html="child.items[0]._highlightResult.hierarchy.lvl1.value" />
30-
31-
<v-list-item-subtitle class="d-inline-flex ps-1">
32-
&rsaquo; Home
33-
</v-list-item-subtitle>
34-
</v-list-item-title>
35-
</v-list-item>
36-
37-
<template v-else>
13+
<app-sheet border :class="['pa-3', i !== 0 && 'mt-4']">
14+
<div class="text-high-emphasis font-weight-bold d-flex align-center text-h6">
15+
<v-icon
16+
:icon="getIcon(group)"
17+
color="medium-emphasis"
18+
class="me-2"
19+
size="22"
20+
/>
21+
22+
{{ group.name }}
23+
</div>
24+
25+
<template v-for="(child, ci) in group.items">
3826
<v-list-item
39-
:key="`search-${i}-${child.name}`"
27+
v-if="child.items[0]._highlightResult.hierarchy.lvl1.matchLevel === 'full'"
28+
:key="`search-${i}-${ci}`"
29+
:to="getPathname(child)"
4030
class="mb-0"
31+
append-icon="mdi-chevron-right"
32+
prepend-icon="mdi-home-outline"
4133
>
42-
<v-list-item-title v-html="child.name" />
43-
</v-list-item>
34+
<template #prepend>
35+
<v-icon class="me-n6" size="18" />
36+
</template>
4437

45-
<v-list-item
46-
v-for="(item, it) in child.items"
47-
:key="`search-${i}-${ci}-${it}-children`"
48-
:to="item.url"
49-
class="ps-4 mb-0"
50-
>
51-
<v-list-item-subtitle
52-
class="text-wrap font-weight-medium"
53-
v-html="makeBreadcrumbs(item)"
54-
/>
55-
56-
<v-list-item-subtitle
57-
v-if="item.content"
58-
class="text-caption text-wrap text-high-emphasis font-weight-regular ps-2"
59-
v-html="truncateContent(item)"
60-
/>
38+
<template #append>
39+
<v-icon size="16" />
40+
</template>
41+
42+
<v-list-item-title>
43+
<div class="d-inline-block" v-html="child.items[0]._highlightResult.hierarchy.lvl1.value" />
44+
45+
<v-list-item-subtitle class="d-inline-flex ps-1">
46+
&rsaquo; Home
47+
</v-list-item-subtitle>
48+
</v-list-item-title>
6149
</v-list-item>
50+
51+
<template v-else>
52+
<v-list-item
53+
v-for="(item, it) in child.items"
54+
:key="`search-${i}-${ci}-${it}-children`"
55+
:to="item.url"
56+
:prepend-icon="item.url.indexOf('#') > -1 ? 'mdi-pound' : undefined"
57+
:append-icon="item.url.indexOf('#') > -1 ? 'mdi-chevron-right' : undefined"
58+
class="ps-4 mb-0"
59+
>
60+
<template #prepend>
61+
<v-icon size="14" class="me-n6 ms-1" />
62+
</template>
63+
64+
<template #append>
65+
<v-icon size="16" />
66+
</template>
67+
68+
<v-list-item-subtitle
69+
class="text-wrap font-weight-bold"
70+
v-html="makeBreadcrumbs(item)"
71+
/>
72+
73+
<v-list-item-subtitle
74+
v-if="item.content"
75+
class="text-caption text-wrap text-high-emphasis font-weight-regular"
76+
v-html="truncateContent(item)"
77+
/>
78+
</v-list-item>
79+
</template>
6280
</template>
63-
</template>
81+
</app-sheet>
6482
</template>
6583
</v-list>
6684
</template>
@@ -69,8 +87,13 @@
6987
import { ref } from 'vue'
7088
import type { VList } from 'vuetify/components'
7189
90+
// Stores
91+
import { useAppStore } from '@/store/app'
92+
7293
const props = defineProps<{ groups: any[] }>()
7394
95+
const app = useAppStore()
96+
7497
const rootEl = ref<VList>()
7598
defineExpose({ rootEl })
7699
@@ -103,6 +126,13 @@
103126
function getPathname (group: any) {
104127
return new URL(location.origin + group.items[0].url).pathname
105128
}
129+
function getIcon (group: Record<string, any>) {
130+
let name = group.name.toLowerCase().replace(/[^a-z]/g, '-')
131+
132+
if (name === 'styles-and-animations') name = 'styles'
133+
134+
return app.categories?.[name]?.icon ?? '$vuetify'
135+
}
106136
</script>
107137

108138
<style lang="sass" scoped>

‎packages/docs/src/i18n/messages/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@
138138
"enable-notifications-message": "Notifications are located at the top right of the screen in the actions bar and provide information about new releases, updates, and other important information.",
139139
"enterprise": "Enterprise",
140140
"email-address": "Email address",
141+
"esc": "Esc",
141142
"extra-extra-large": "Extra extra large",
142143
"extra-large": "Extra large",
143144
"extra-small": "Extra small",

0 commit comments

Comments
 (0)