|
|
|
|
@ -1,13 +1,29 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { markRaw, nextTick, onMounted, ref, shallowRef, watch, type Ref, createApp } from 'vue'
|
|
|
|
|
import { useRouter } from 'vitepress'
|
|
|
|
|
import { onKeyStroke, useSessionStorage, debouncedWatch, useLocalStorage, useEventListener, computedAsync } from '@vueuse/core'
|
|
|
|
|
import MiniSearch, { type SearchResult } from 'minisearch'
|
|
|
|
|
import localSearchIndex from '@localSearchIndex'
|
|
|
|
|
import {
|
|
|
|
|
computedAsync,
|
|
|
|
|
debouncedWatch,
|
|
|
|
|
onKeyStroke,
|
|
|
|
|
useEventListener,
|
|
|
|
|
useLocalStorage,
|
|
|
|
|
useSessionStorage
|
|
|
|
|
} from '@vueuse/core'
|
|
|
|
|
import MiniSearch, { type SearchResult } from 'minisearch'
|
|
|
|
|
import { useRouter } from 'vitepress'
|
|
|
|
|
import {
|
|
|
|
|
createApp,
|
|
|
|
|
markRaw,
|
|
|
|
|
nextTick,
|
|
|
|
|
onMounted,
|
|
|
|
|
ref,
|
|
|
|
|
shallowRef,
|
|
|
|
|
watch,
|
|
|
|
|
type Ref
|
|
|
|
|
} from 'vue'
|
|
|
|
|
import type { ModalTranslations } from '../../../../types/local-search'
|
|
|
|
|
import { pathToFile, withBase } from '../../app/utils'
|
|
|
|
|
import { useData } from '../composables/data'
|
|
|
|
|
import { createTranslate } from '../support/translation'
|
|
|
|
|
import type { ModalTranslations } from '../../../../types/local-search'
|
|
|
|
|
import { pathToFile, withBase } from '../../app/utils.js'
|
|
|
|
|
|
|
|
|
|
defineProps<{
|
|
|
|
|
placeholder: string
|
|
|
|
|
@ -40,19 +56,29 @@ interface Result {
|
|
|
|
|
|
|
|
|
|
const { localeIndex } = useData()
|
|
|
|
|
|
|
|
|
|
const searchIndex = computedAsync(async () => markRaw(MiniSearch.loadJSON<Result>((await searchIndexData.value[localeIndex.value]?.())?.default, {
|
|
|
|
|
fields: ['title', 'titles', 'text'],
|
|
|
|
|
storeFields: ['title', 'titles'],
|
|
|
|
|
searchOptions: {
|
|
|
|
|
fuzzy: 0.2,
|
|
|
|
|
prefix: true,
|
|
|
|
|
boost: { title: 4, text: 2, titles: 1 },
|
|
|
|
|
},
|
|
|
|
|
})))
|
|
|
|
|
const searchIndex = computedAsync(async () =>
|
|
|
|
|
markRaw(
|
|
|
|
|
MiniSearch.loadJSON<Result>(
|
|
|
|
|
(await searchIndexData.value[localeIndex.value]?.())?.default,
|
|
|
|
|
{
|
|
|
|
|
fields: ['title', 'titles', 'text'],
|
|
|
|
|
storeFields: ['title', 'titles'],
|
|
|
|
|
searchOptions: {
|
|
|
|
|
fuzzy: 0.2,
|
|
|
|
|
prefix: true,
|
|
|
|
|
boost: { title: 4, text: 2, titles: 1 }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
)
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const filterText = useSessionStorage('vitepress:local-search-filter', '')
|
|
|
|
|
|
|
|
|
|
const showDetailedList = useLocalStorage('vitepress:local-search-detailed-list', false)
|
|
|
|
|
const showDetailedList = useLocalStorage(
|
|
|
|
|
'vitepress:local-search-detailed-list',
|
|
|
|
|
false
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const results: Ref<(SearchResult & Result)[]> = shallowRef([])
|
|
|
|
|
|
|
|
|
|
@ -66,92 +92,100 @@ watch(filterText, () => {
|
|
|
|
|
enableNoResults.value = false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
debouncedWatch(() => [searchIndex.value, filterText.value, showDetailedList.value] as const, async ([index, filterTextValue, showDetailedListValue], old, onCleanup) => {
|
|
|
|
|
let canceled = false
|
|
|
|
|
onCleanup(() => {
|
|
|
|
|
canceled = true
|
|
|
|
|
})
|
|
|
|
|
debouncedWatch(
|
|
|
|
|
() => [searchIndex.value, filterText.value, showDetailedList.value] as const,
|
|
|
|
|
async ([index, filterTextValue, showDetailedListValue], old, onCleanup) => {
|
|
|
|
|
let canceled = false
|
|
|
|
|
onCleanup(() => {
|
|
|
|
|
canceled = true
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
if (!index) return
|
|
|
|
|
|
|
|
|
|
// Search
|
|
|
|
|
results.value = index.search(filterTextValue).slice(0, 16) as (SearchResult & Result)[]
|
|
|
|
|
enableNoResults.value = true
|
|
|
|
|
|
|
|
|
|
// Highlighting
|
|
|
|
|
const mods = showDetailedListValue ? await Promise.all(results.value.map(r => fetchExcerpt(r.id))) : []
|
|
|
|
|
if (canceled) return
|
|
|
|
|
const c = new Map<string, Map<string, string>>()
|
|
|
|
|
for (const { id, mod } of mods) {
|
|
|
|
|
const comp = mod.default ?? mod
|
|
|
|
|
if (comp?.render) {
|
|
|
|
|
const app = createApp(comp)
|
|
|
|
|
// Silence warnings about missing components
|
|
|
|
|
app.config.warnHandler = () => {}
|
|
|
|
|
const div = document.createElement('div')
|
|
|
|
|
app.mount(div)
|
|
|
|
|
const sections = div.innerHTML.split(headingRegex)
|
|
|
|
|
app.unmount()
|
|
|
|
|
sections.shift()
|
|
|
|
|
const mapId = id.slice(0, id.indexOf('#'))
|
|
|
|
|
let map = c.get(mapId)
|
|
|
|
|
if (!map) {
|
|
|
|
|
map = new Map()
|
|
|
|
|
c.set(mapId, map)
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < sections.length; i += 3) {
|
|
|
|
|
const anchor = sections[i + 1]
|
|
|
|
|
const html = sections[i + 2]
|
|
|
|
|
map.set(anchor, html)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!index) return
|
|
|
|
|
|
|
|
|
|
// Search
|
|
|
|
|
results.value = index
|
|
|
|
|
.search(filterTextValue)
|
|
|
|
|
.slice(0, 16) as (SearchResult & Result)[]
|
|
|
|
|
enableNoResults.value = true
|
|
|
|
|
|
|
|
|
|
// Highlighting
|
|
|
|
|
const mods = showDetailedListValue
|
|
|
|
|
? await Promise.all(results.value.map((r) => fetchExcerpt(r.id)))
|
|
|
|
|
: []
|
|
|
|
|
if (canceled) return
|
|
|
|
|
}
|
|
|
|
|
results.value = results.value.map(r => {
|
|
|
|
|
let title = r.title
|
|
|
|
|
let titles = r.titles
|
|
|
|
|
let text = ''
|
|
|
|
|
|
|
|
|
|
// Highlight in text
|
|
|
|
|
const [id, anchor] = r.id.split('#')
|
|
|
|
|
const map = c.get(id)
|
|
|
|
|
if (map) {
|
|
|
|
|
text = map.get(anchor) ?? ''
|
|
|
|
|
const c = new Map<string, Map<string, string>>()
|
|
|
|
|
for (const { id, mod } of mods) {
|
|
|
|
|
const comp = mod.default ?? mod
|
|
|
|
|
if (comp?.render) {
|
|
|
|
|
const app = createApp(comp)
|
|
|
|
|
// Silence warnings about missing components
|
|
|
|
|
app.config.warnHandler = () => {}
|
|
|
|
|
const div = document.createElement('div')
|
|
|
|
|
app.mount(div)
|
|
|
|
|
const sections = div.innerHTML.split(headingRegex)
|
|
|
|
|
app.unmount()
|
|
|
|
|
sections.shift()
|
|
|
|
|
const mapId = id.slice(0, id.indexOf('#'))
|
|
|
|
|
let map = c.get(mapId)
|
|
|
|
|
if (!map) {
|
|
|
|
|
map = new Map()
|
|
|
|
|
c.set(mapId, map)
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < sections.length; i += 3) {
|
|
|
|
|
const anchor = sections[i + 1]
|
|
|
|
|
const html = sections[i + 2]
|
|
|
|
|
map.set(anchor, html)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (canceled) return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (const term in r.match) {
|
|
|
|
|
const match = r.match[term]
|
|
|
|
|
const reg = new RegExp(term, 'gi')
|
|
|
|
|
if (match.includes('title')) {
|
|
|
|
|
title = title.replace(reg, `<mark>$&</mark>`)
|
|
|
|
|
results.value = results.value.map((r) => {
|
|
|
|
|
let title = r.title
|
|
|
|
|
let titles = r.titles
|
|
|
|
|
let text = ''
|
|
|
|
|
|
|
|
|
|
// Highlight in text
|
|
|
|
|
const [id, anchor] = r.id.split('#')
|
|
|
|
|
const map = c.get(id)
|
|
|
|
|
if (map) {
|
|
|
|
|
text = map.get(anchor) ?? ''
|
|
|
|
|
}
|
|
|
|
|
if (match.includes('titles')) {
|
|
|
|
|
titles = titles.map(t => t.replace(reg, `<mark>$&</mark>`))
|
|
|
|
|
|
|
|
|
|
for (const term in r.match) {
|
|
|
|
|
const match = r.match[term]
|
|
|
|
|
const reg = new RegExp(term, 'gi')
|
|
|
|
|
if (match.includes('title')) {
|
|
|
|
|
title = title.replace(reg, `<mark>$&</mark>`)
|
|
|
|
|
}
|
|
|
|
|
if (match.includes('titles')) {
|
|
|
|
|
titles = titles.map((t) => t.replace(reg, `<mark>$&</mark>`))
|
|
|
|
|
}
|
|
|
|
|
if (showDetailedListValue && match.includes('text')) {
|
|
|
|
|
text = text.replace(reg, `<mark>$&</mark>`)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (showDetailedListValue && match.includes('text')) {
|
|
|
|
|
text = text.replace(reg, `<mark>$&</mark>`)
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
...r,
|
|
|
|
|
title,
|
|
|
|
|
titles,
|
|
|
|
|
text
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
contents.value = c
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
...r,
|
|
|
|
|
title,
|
|
|
|
|
titles,
|
|
|
|
|
text,
|
|
|
|
|
await nextTick()
|
|
|
|
|
const excerpts = el.value?.querySelectorAll('.result .excerpt') ?? []
|
|
|
|
|
for (const excerpt of excerpts) {
|
|
|
|
|
excerpt.querySelector('mark')?.scrollIntoView({
|
|
|
|
|
block: 'center'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
contents.value = c
|
|
|
|
|
|
|
|
|
|
await nextTick()
|
|
|
|
|
const excerpts = el.value?.querySelectorAll('.result .excerpt') ?? []
|
|
|
|
|
for (const excerpt of excerpts) {
|
|
|
|
|
excerpt.querySelector('mark')?.scrollIntoView({
|
|
|
|
|
block: 'center',
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}, { debounce: 200, immediate: true })
|
|
|
|
|
},
|
|
|
|
|
{ debounce: 200, immediate: true }
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
async function fetchExcerpt (id: string) {
|
|
|
|
|
async function fetchExcerpt(id: string) {
|
|
|
|
|
const file = pathToFile(withBase(id.slice(0, id.indexOf('#'))))
|
|
|
|
|
try {
|
|
|
|
|
return { id, mod: await import(/*@vite-ignore*/ file) }
|
|
|
|
|
@ -165,7 +199,7 @@ async function fetchExcerpt (id: string) {
|
|
|
|
|
|
|
|
|
|
const searchInput = ref<HTMLInputElement>()
|
|
|
|
|
|
|
|
|
|
function focusSearchInput () {
|
|
|
|
|
function focusSearchInput() {
|
|
|
|
|
searchInput.value?.focus()
|
|
|
|
|
searchInput.value?.select()
|
|
|
|
|
}
|
|
|
|
|
@ -174,7 +208,7 @@ onMounted(() => {
|
|
|
|
|
focusSearchInput()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function onSearchBarClick (event: PointerEvent) {
|
|
|
|
|
function onSearchBarClick(event: PointerEvent) {
|
|
|
|
|
if (event.pointerType === 'mouse') {
|
|
|
|
|
focusSearchInput()
|
|
|
|
|
}
|
|
|
|
|
@ -190,12 +224,12 @@ watch(results, () => {
|
|
|
|
|
scrollToSelectedResult()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function scrollToSelectedResult () {
|
|
|
|
|
function scrollToSelectedResult() {
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
const selectedEl = document.querySelector('.result.selected')
|
|
|
|
|
if (selectedEl) {
|
|
|
|
|
selectedEl.scrollIntoView({
|
|
|
|
|
block: 'nearest',
|
|
|
|
|
block: 'nearest'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
@ -250,12 +284,12 @@ const defaultTranslations: { modal: ModalTranslations } = {
|
|
|
|
|
selectKeyAriaLabel: 'enter',
|
|
|
|
|
navigateText: 'to navigate',
|
|
|
|
|
navigateUpKeyAriaLabel: 'up arrow',
|
|
|
|
|
navigateDownKeyAriaLabel: 'down arrow',
|
|
|
|
|
navigateDownKeyAriaLabel: 'down arrow'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const $t = createTranslate(theme.value.localSearch, defaultTranslations)
|
|
|
|
|
const $t = createTranslate(theme.value.search?.options, defaultTranslations)
|
|
|
|
|
|
|
|
|
|
// Back
|
|
|
|
|
|
|
|
|
|
@ -264,7 +298,7 @@ onMounted(() => {
|
|
|
|
|
window.history.pushState(null, '', null)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
useEventListener('popstate', event => {
|
|
|
|
|
useEventListener('popstate', (event) => {
|
|
|
|
|
event.preventDefault()
|
|
|
|
|
emit('close')
|
|
|
|
|
})
|
|
|
|
|
@ -277,14 +311,34 @@ useEventListener('popstate', event => {
|
|
|
|
|
|
|
|
|
|
<div class="shell">
|
|
|
|
|
<div class="search-bar" @pointerup="onSearchBarClick($event)">
|
|
|
|
|
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21l-4.35-4.35"/></g></svg>
|
|
|
|
|
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24">
|
|
|
|
|
<g
|
|
|
|
|
fill="none"
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
>
|
|
|
|
|
<circle cx="11" cy="11" r="8" />
|
|
|
|
|
<path d="m21 21l-4.35-4.35" />
|
|
|
|
|
</g>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="search-actions before">
|
|
|
|
|
<button
|
|
|
|
|
class="back-button"
|
|
|
|
|
:title="$t('modal.backButtonTitle')"
|
|
|
|
|
@click="$emit('close')"
|
|
|
|
|
>
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m7 7l-7-7l7-7"/></svg>
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24">
|
|
|
|
|
<path
|
|
|
|
|
fill="none"
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
d="M19 12H5m7 7l-7-7l7-7"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<input
|
|
|
|
|
@ -292,17 +346,26 @@ useEventListener('popstate', event => {
|
|
|
|
|
v-model="filterText"
|
|
|
|
|
:placeholder="placeholder"
|
|
|
|
|
class="search-input"
|
|
|
|
|
>
|
|
|
|
|
/>
|
|
|
|
|
<div class="search-actions">
|
|
|
|
|
<button
|
|
|
|
|
class="toggle-layout-button"
|
|
|
|
|
:class="{
|
|
|
|
|
'detailed-list': showDetailedList,
|
|
|
|
|
'detailed-list': showDetailedList
|
|
|
|
|
}"
|
|
|
|
|
:title="$t('modal.displayDetails')"
|
|
|
|
|
@click="showDetailedList = !showDetailedList"
|
|
|
|
|
>
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 14h7v7H3zM3 3h7v7H3zm11 1h7m-7 5h7m-7 6h7m-7 5h7"/></svg>
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24">
|
|
|
|
|
<path
|
|
|
|
|
fill="none"
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
d="M3 14h7v7H3zM3 3h7v7H3zm11 1h7m-7 5h7m-7 6h7m-7 5h7"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
@ -310,22 +373,28 @@ useEventListener('popstate', event => {
|
|
|
|
|
:title="$t('modal.resetButtonTitle')"
|
|
|
|
|
@click="filterText = ''"
|
|
|
|
|
>
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 5H9l-7 7l7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-2 4l-6 6m0-6l6 6"/></svg>
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24">
|
|
|
|
|
<path
|
|
|
|
|
fill="none"
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
d="M20 5H9l-7 7l7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-2 4l-6 6m0-6l6 6"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
class="results"
|
|
|
|
|
@mousemove="disableMouseOver = false"
|
|
|
|
|
>
|
|
|
|
|
<div class="results" @mousemove="disableMouseOver = false">
|
|
|
|
|
<a
|
|
|
|
|
v-for="(p, index) in results"
|
|
|
|
|
:key="p.id"
|
|
|
|
|
:href="withBase(p.id)"
|
|
|
|
|
class="result"
|
|
|
|
|
:class="{
|
|
|
|
|
selected: selectedIndex === index,
|
|
|
|
|
selected: selectedIndex === index
|
|
|
|
|
}"
|
|
|
|
|
:aria-title="[...p.titles, p.title].join(' > ')"
|
|
|
|
|
@mouseenter="!disableMouseOver && (selectedIndex = index)"
|
|
|
|
|
@ -334,13 +403,18 @@ useEventListener('popstate', event => {
|
|
|
|
|
<div>
|
|
|
|
|
<div class="titles">
|
|
|
|
|
<span class="title-icon">#</span>
|
|
|
|
|
<span
|
|
|
|
|
v-for="(t, index) in p.titles"
|
|
|
|
|
:key="index"
|
|
|
|
|
class="title"
|
|
|
|
|
>
|
|
|
|
|
<span v-for="(t, index) in p.titles" :key="index" class="title">
|
|
|
|
|
<span class="text" v-html="t" />
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"/></svg>
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24">
|
|
|
|
|
<path
|
|
|
|
|
fill="none"
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
d="m9 18l6-6l-6-6"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="title main">
|
|
|
|
|
<span class="text" v-html="p.title" />
|
|
|
|
|
@ -357,18 +431,59 @@ useEventListener('popstate', event => {
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div v-if="filterText && !results.length && enableNoResults" class="no-results">
|
|
|
|
|
{{ $t('modal.noResultsText') }} "<strong>{{ filterText }}</strong>"
|
|
|
|
|
<div
|
|
|
|
|
v-if="filterText && !results.length && enableNoResults"
|
|
|
|
|
class="no-results"
|
|
|
|
|
>
|
|
|
|
|
{{ $t('modal.noResultsText') }} "<strong>{{ filterText }}</strong
|
|
|
|
|
>"
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="search-keyboard-shortcuts">
|
|
|
|
|
<span>
|
|
|
|
|
<kbd :aria-title="$t('modal.footer.navigateUpKeyAriaLabel')"><svg width="14" height="14" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19V5m-7 7l7-7l7 7"/></svg></kbd> <kbd :aria-title="$t('modal.footer.navigateDownKeyAriaLabel')"><svg width="14" height="14" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m7-7l-7 7l-7-7"/></svg></kbd>
|
|
|
|
|
<kbd :aria-title="$t('modal.footer.navigateUpKeyAriaLabel')">
|
|
|
|
|
<svg width="14" height="14" viewBox="0 0 24 24">
|
|
|
|
|
<path
|
|
|
|
|
fill="none"
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
d="M12 19V5m-7 7l7-7l7 7"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</kbd>
|
|
|
|
|
{{ ' ' }}
|
|
|
|
|
<kbd :aria-title="$t('modal.footer.navigateDownKeyAriaLabel')">
|
|
|
|
|
<svg width="14" height="14" viewBox="0 0 24 24">
|
|
|
|
|
<path
|
|
|
|
|
fill="none"
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
d="M12 5v14m7-7l-7 7l-7-7"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</kbd>
|
|
|
|
|
{{ $t('modal.footer.navigateText') }}
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<kbd :aria-title="$t('modal.footer.selectKeyAriaLabel')"><svg width="14" height="14" viewBox="0 0 24 24"><g fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m9 10l-5 5l5 5"/><path d="M20 4v7a4 4 0 0 1-4 4H4"/></g></svg></kbd>
|
|
|
|
|
<kbd :aria-title="$t('modal.footer.selectKeyAriaLabel')"
|
|
|
|
|
><svg width="14" height="14" viewBox="0 0 24 24">
|
|
|
|
|
<g
|
|
|
|
|
fill="none"
|
|
|
|
|
stroke="currentcolor"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
>
|
|
|
|
|
<path d="m9 10l-5 5l5 5" />
|
|
|
|
|
<path d="M20 4v7a4 4 0 0 1-4 4H4" />
|
|
|
|
|
</g>
|
|
|
|
|
</svg>
|
|
|
|
|
</kbd>
|
|
|
|
|
{{ $t('modal.footer.selectText') }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
Divyansh Singh
2 years ago
committed by
GitHub