mirror of https://github.com/requarks/wiki
NGPixel
1 year ago
parent
c87f4ce770
commit
5c6965b544
@ -0,0 +1,224 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
q-toolbar(
|
||||||
|
style='height: 64px;'
|
||||||
|
dark
|
||||||
|
v-if='siteStore.features.search'
|
||||||
|
)
|
||||||
|
q-input(
|
||||||
|
dark
|
||||||
|
v-model='siteStore.search'
|
||||||
|
standout='bg-white text-dark'
|
||||||
|
dense
|
||||||
|
rounded
|
||||||
|
ref='searchField'
|
||||||
|
style='width: 100%;'
|
||||||
|
label='Search...'
|
||||||
|
@keyup.enter='onSearchEnter'
|
||||||
|
@focus='state.searchIsFocused = true'
|
||||||
|
@blur='checkSearchFocus'
|
||||||
|
)
|
||||||
|
template(v-slot:prepend)
|
||||||
|
q-circular-progress.q-mr-xs(
|
||||||
|
v-if='siteStore.searchIsLoading && route.path !== `/_search`'
|
||||||
|
instant-feedback
|
||||||
|
indeterminate
|
||||||
|
rounded
|
||||||
|
color='primary'
|
||||||
|
size='20px'
|
||||||
|
)
|
||||||
|
q-icon(v-else, name='las la-search')
|
||||||
|
template(v-slot:append)
|
||||||
|
q-badge.q-mr-sm(
|
||||||
|
v-if='!state.searchIsFocused'
|
||||||
|
label='Ctrl+K'
|
||||||
|
color='grey-7'
|
||||||
|
outline
|
||||||
|
@click='searchField.focus()'
|
||||||
|
)
|
||||||
|
q-badge.q-mr-sm(
|
||||||
|
v-else-if='siteStore.search && siteStore.search !== siteStore.searchLastQuery'
|
||||||
|
label='Press Enter'
|
||||||
|
color='grey-7'
|
||||||
|
outline
|
||||||
|
@click='searchField.focus()'
|
||||||
|
)
|
||||||
|
q-icon.cursor-pointer(
|
||||||
|
name='las la-times'
|
||||||
|
size='20px'
|
||||||
|
@click='siteStore.search=``'
|
||||||
|
v-if='siteStore.search.length > 0'
|
||||||
|
color='grey-6'
|
||||||
|
)
|
||||||
|
.searchpanel(
|
||||||
|
ref='searchPanel'
|
||||||
|
v-if='searchPanelIsShown'
|
||||||
|
)
|
||||||
|
template(v-if='siteStore.tagsLoaded && siteStore.tags.length > 0')
|
||||||
|
.searchpanel-header
|
||||||
|
span Popular Tags
|
||||||
|
q-space
|
||||||
|
q-btn.acrylic-btn(
|
||||||
|
flat
|
||||||
|
label='View All'
|
||||||
|
rounded
|
||||||
|
size='xs'
|
||||||
|
)
|
||||||
|
.flex.q-mb-md
|
||||||
|
q-chip(
|
||||||
|
v-for='tag of popularTags'
|
||||||
|
square
|
||||||
|
color='grey-8'
|
||||||
|
text-color='white'
|
||||||
|
icon='las la-hashtag'
|
||||||
|
size='sm'
|
||||||
|
clickable
|
||||||
|
@click='addTag(tag)'
|
||||||
|
) {{ tag }}
|
||||||
|
.searchpanel-header Search Operators
|
||||||
|
.searchpanel-tip #[code !foo] or #[code -bar] to exclude "foo" and "bar".
|
||||||
|
.searchpanel-tip #[code bana*] for to match any term starting with "bana" (e.g. banana).
|
||||||
|
.searchpanel-tip #[code foo,bar] or #[code foo|bar] to search for "foo" OR "bar".
|
||||||
|
.searchpanel-tip #[code "foo bar"] to match exactly the phrase "foo bar".
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useQuasar } from 'quasar'
|
||||||
|
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
|
||||||
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
import { orderBy } from 'lodash-es'
|
||||||
|
|
||||||
|
import { useSiteStore } from 'src/stores/site'
|
||||||
|
|
||||||
|
// QUASAR
|
||||||
|
|
||||||
|
const $q = useQuasar()
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
|
||||||
|
// ROUTER
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
searchIsFocused: false
|
||||||
|
})
|
||||||
|
|
||||||
|
const searchPanel = ref(null)
|
||||||
|
const searchField = ref(null)
|
||||||
|
|
||||||
|
// COMPUTED
|
||||||
|
|
||||||
|
const searchPanelIsShown = computed(() => {
|
||||||
|
return state.searchIsFocused && (siteStore.search !== siteStore.searchLastQuery || siteStore.search === '')
|
||||||
|
})
|
||||||
|
|
||||||
|
const popularTags = computed(() => {
|
||||||
|
return orderBy(siteStore.tags, ['usageCount', 'desc']).map(t => t.tag)
|
||||||
|
})
|
||||||
|
|
||||||
|
// WATCHERS
|
||||||
|
|
||||||
|
watch(searchPanelIsShown, (newValue) => {
|
||||||
|
if (newValue) {
|
||||||
|
siteStore.fetchTags()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
function handleKeyPress (ev) {
|
||||||
|
if (siteStore.features.search) {
|
||||||
|
if (ev.ctrlKey && ev.key === 'k') {
|
||||||
|
ev.preventDefault()
|
||||||
|
searchField.value.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSearchEnter () {
|
||||||
|
if (!siteStore.search) { return }
|
||||||
|
if (route.path === '/_search') {
|
||||||
|
router.replace({ path: '/_search', query: { q: siteStore.search } })
|
||||||
|
} else {
|
||||||
|
siteStore.searchIsLoading = true
|
||||||
|
router.push({ path: '/_search', query: { q: siteStore.search } })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkSearchFocus (ev) {
|
||||||
|
if (!searchPanel.value?.contains(ev.relatedTarget)) {
|
||||||
|
state.searchIsFocused = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addTag (tag) {
|
||||||
|
if (!siteStore.search.includes(`#${tag}`)) {
|
||||||
|
siteStore.search = siteStore.search ? `${siteStore.search} #${tag}` : `#${tag}`
|
||||||
|
}
|
||||||
|
searchField.value.focus()
|
||||||
|
}
|
||||||
|
|
||||||
|
// MOUNTED
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (process.env.CLIENT) {
|
||||||
|
window.addEventListener('keydown', handleKeyPress)
|
||||||
|
}
|
||||||
|
if (route.path.startsWith('/_search')) {
|
||||||
|
searchField.value.focus()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (process.env.CLIENT) {
|
||||||
|
window.removeEventListener('keydown', handleKeyPress)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.searchpanel {
|
||||||
|
position: absolute;
|
||||||
|
top: 64px;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(0,0,0,.7);
|
||||||
|
border-radius: 0 0 12px 12px;
|
||||||
|
color: #FFF;
|
||||||
|
padding: .5rem 1rem 1rem;
|
||||||
|
width: 100%;
|
||||||
|
backdrop-filter: blur(7px);
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
&-header {
|
||||||
|
font-weight: 500;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,.2);
|
||||||
|
padding: 0 0 .5rem 0;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-tip {
|
||||||
|
+ .searchpanel-tip {
|
||||||
|
margin-top: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background-color: rgba(0,0,0,.7);
|
||||||
|
padding: 2px 8px;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue