VEGA-5236 Адаптация результатов поиска в документации
This commit is contained in:
Русович Виолетта Игоревна
committed by
Речкина Елена Валерьевна
Речкина Елена Валерьевна
parent
b669aba0dc
commit
3609f446cb
@@ -79,7 +79,7 @@ export default defineConfig({
|
||||
buttonAriaLabel: 'Поиск'
|
||||
},
|
||||
modal: {
|
||||
noResultsText: 'Нет результатов для',
|
||||
noResultsText: 'Не удалось загрузить данные',
|
||||
resetButtonTitle: 'Сбросить',
|
||||
displayDetails: 'Показать расширенный список',
|
||||
footer: {
|
||||
|
||||
@@ -22,8 +22,7 @@ type ItemFeature = {
|
||||
const style = useCssModule()
|
||||
const classes = computed(() => ({
|
||||
[style.CustomFeature]: true,
|
||||
[style.CustomFeatureDisabled]: disabled || !link,
|
||||
[style.CustomFeatureWithScroll]: scrollTo && !disabled
|
||||
[style.CustomFeatureDisabled]: disabled || !link && !scrollTo,
|
||||
}))
|
||||
|
||||
const handleClick = (event: Event) => {
|
||||
@@ -51,7 +50,11 @@ const handleClick = (event: Event) => {
|
||||
</Component>
|
||||
<div :class="$style.CustomFeatureContainer">
|
||||
<div v-for="(item, i) in items" :key="i">
|
||||
<Component :is="!disabled && item.link ? VPLink : 'article'" v-bind="{ ...(!disabled && item.link && { href: item.link }) }">
|
||||
<Component
|
||||
:is="!disabled && item.link ? VPLink : 'article'"
|
||||
v-bind="{ ...(!disabled && item.link && { href: item.link }) }"
|
||||
:class="{ [style.CustomFeatureDisabled]: disabled || !item.link }"
|
||||
>
|
||||
<p :class="$style.CustomFeatureSubtitle">{{ item.title }}</p>
|
||||
</Component>
|
||||
</div>
|
||||
@@ -94,16 +97,12 @@ const handleClick = (event: Event) => {
|
||||
color: themes.$color-text-active;
|
||||
|
||||
&:hover {
|
||||
color: themes.$color-text-link !important;
|
||||
color: themes.$color-text-link;
|
||||
}
|
||||
|
||||
#{$el}Disabled & {
|
||||
color: themes.$color-text-disabled;
|
||||
}
|
||||
|
||||
#{$el}WithScroll & {
|
||||
color: themes.$color-text-active;
|
||||
}
|
||||
}
|
||||
|
||||
&Subtitle {
|
||||
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
Raw,
|
||||
ref,
|
||||
shallowRef,
|
||||
watch,
|
||||
@@ -132,6 +133,7 @@ watchEffect(() => {
|
||||
const results: Ref<(SearchResult & Result)[]> = shallowRef([])
|
||||
|
||||
const enableNoResults = ref(false)
|
||||
const loadig = ref(true)
|
||||
|
||||
watch(filterText, () => {
|
||||
enableNoResults.value = false
|
||||
@@ -160,11 +162,7 @@ debouncedWatch(
|
||||
if (!index) return
|
||||
|
||||
// Search
|
||||
results.value = index
|
||||
.search(filterTextValue)
|
||||
.slice(0, 16) as (SearchResult & Result)[]
|
||||
enableNoResults.value = true
|
||||
|
||||
retrySearch(index, filterTextValue)
|
||||
// Highlighting
|
||||
const mods = showDetailedListValue
|
||||
? await Promise.all(results.value.map((r) => fetchExcerpt(r.id)))
|
||||
@@ -268,6 +266,16 @@ function focusSearchInput(select = true) {
|
||||
select && searchInput.value?.select()
|
||||
}
|
||||
|
||||
const retrySearch = (index: Raw<MiniSearch<Result>>, filter: string) => {
|
||||
if (!index) return
|
||||
|
||||
results.value = index
|
||||
.search(filter)
|
||||
.slice(0, 16) as (SearchResult & Result)[]
|
||||
|
||||
enableNoResults.value = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
focusSearchInput()
|
||||
})
|
||||
@@ -481,33 +489,6 @@ function formMarkRegex(terms: Set<string>) {
|
||||
class="search-input"
|
||||
/>
|
||||
<div class="search-actions">
|
||||
<button
|
||||
v-if="!disableDetailedView"
|
||||
class="toggle-layout-button"
|
||||
type="button"
|
||||
:class="{ 'detailed-list': showDetailedList }"
|
||||
:title="$t('modal.displayDetails')"
|
||||
@click="
|
||||
selectedIndex > -1 && (showDetailedList = !showDetailedList)
|
||||
"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<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
|
||||
class="clear-button"
|
||||
type="reset"
|
||||
@@ -535,6 +516,7 @@ function formMarkRegex(terms: Set<string>) {
|
||||
</form>
|
||||
|
||||
<ul
|
||||
v-if="!!results.length"
|
||||
ref="resultsEl"
|
||||
:id="results?.length ? 'localsearch-list' : undefined"
|
||||
:role="results?.length ? 'listbox' : undefined"
|
||||
@@ -561,29 +543,21 @@ function formMarkRegex(terms: Set<string>) {
|
||||
>
|
||||
<div>
|
||||
<div class="titles">
|
||||
<span class="title-icon">#</span>
|
||||
<span
|
||||
v-for="(t, index) in p.titles"
|
||||
:key="index"
|
||||
class="title"
|
||||
>
|
||||
<span class="text" v-html="t" />
|
||||
<svg width="18" height="18" 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 class="text"> > </span>
|
||||
</span>
|
||||
<span class="title main">
|
||||
<span class="text" v-html="p.title" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span v-html="p.title" />
|
||||
|
||||
<div v-if="showDetailedList" class="excerpt-wrapper">
|
||||
<div v-if="p.text" class="excerpt" inert>
|
||||
<div class="vp-doc" v-html="p.text" />
|
||||
@@ -594,65 +568,21 @@ function formMarkRegex(terms: Set<string>) {
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
v-if="filterText && !results.length && enableNoResults"
|
||||
</ul>
|
||||
<ul
|
||||
v-else-if="filterText && !results.length && enableNoResults"
|
||||
class="no-results"
|
||||
>
|
||||
{{ $t('modal.noResultsText') }} "<strong>{{ filterText }}</strong
|
||||
>"
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="search-keyboard-shortcuts">
|
||||
<span>
|
||||
<kbd :aria-label="$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-label="$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-label="$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"
|
||||
<p class="no-results-text">
|
||||
{{ $t('modal.noResultsText') }}
|
||||
</p>
|
||||
<button
|
||||
class="no-results-button"
|
||||
@click="retrySearch(searchIndex, filterText)"
|
||||
>
|
||||
<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>
|
||||
<span>
|
||||
<kbd :aria-label="$t('modal.footer.closeKeyAriaLabel')">esc</kbd>
|
||||
{{ $t('modal.footer.closeText') }}
|
||||
</span>
|
||||
</div>
|
||||
Попробовать еще раз
|
||||
</button>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
@@ -675,16 +605,13 @@ function formMarkRegex(terms: Set<string>) {
|
||||
|
||||
.shell {
|
||||
position: relative;
|
||||
padding: 12px;
|
||||
padding: 24px;
|
||||
margin: 64px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
background: var(--vp-local-search-bg);
|
||||
width: min(100vw - 60px, 900px);
|
||||
height: min-content;
|
||||
max-height: min(100vh - 128px, 900px);
|
||||
border-radius: 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@@ -698,7 +625,7 @@ function formMarkRegex(terms: Set<string>) {
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border: 1px solid rgb(32, 33, 35);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -712,10 +639,6 @@ function formMarkRegex(terms: Set<string>) {
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar:focus-within {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
margin: 8px;
|
||||
}
|
||||
@@ -802,27 +725,31 @@ function formMarkRegex(terms: Set<string>) {
|
||||
}
|
||||
|
||||
.results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
box-shadow: var(--vp-c-shadow-3);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(25, 28, 52, 0.18);
|
||||
padding: 8px 0;
|
||||
max-height: min(100vh - 214px, 900px);
|
||||
|
||||
li:hover {
|
||||
background-color: rgba(25, 28, 52, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-radius: 12px;
|
||||
transition: none;
|
||||
line-height: 1rem;
|
||||
border: solid 2px var(--vp-local-search-result-border);
|
||||
outline: none;
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
.result > div {
|
||||
margin: 12px;
|
||||
margin: 12px 16px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -840,6 +767,13 @@ function formMarkRegex(terms: Set<string>) {
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
padding: 2px 0;
|
||||
font-size: 13px !important;
|
||||
line-height: 16px !important;
|
||||
}
|
||||
|
||||
:deep(mark) {
|
||||
background-color: transparent;
|
||||
color: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -852,21 +786,10 @@ function formMarkRegex(terms: Set<string>) {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
opacity: 0.5;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.title svg {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.result.selected {
|
||||
--vp-local-search-result-bg: var(--vp-local-search-result-selected-bg);
|
||||
border-color: var(--vp-local-search-result-selected-border);
|
||||
}
|
||||
|
||||
.excerpt-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
@@ -892,10 +815,7 @@ function formMarkRegex(terms: Set<string>) {
|
||||
|
||||
.titles :deep(mark),
|
||||
.excerpt :deep(mark) {
|
||||
background-color: var(--vp-local-search-highlight-bg);
|
||||
color: var(--vp-local-search-highlight-text);
|
||||
border-radius: 2px;
|
||||
padding: 0 2px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.excerpt :deep(.vp-code-group) .tabs {
|
||||
@@ -932,12 +852,42 @@ function formMarkRegex(terms: Set<string>) {
|
||||
}
|
||||
|
||||
.no-results {
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
padding: 28px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
box-shadow: 0 0 10 0 rgba(0, 0, 0, 0.16);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(25, 28, 52, 0.18);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.no-results-text {
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.no-results-button {
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(25, 28, 52, 0.18);
|
||||
padding: 13px 20px;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
svg {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 13px !important;
|
||||
line-height: 16px !important;
|
||||
color: rgba(25, 28, 52, 0.48);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
|
||||
@use "@beeline/design-tokens/scss/tokens/globals/colors";
|
||||
|
||||
.VPDocAside {
|
||||
.outline-link {
|
||||
@@ -9,10 +10,12 @@
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
white-space: unset;
|
||||
color: colors.$color-text-grey-inactive;
|
||||
}
|
||||
|
||||
.outline-link.active {
|
||||
font-weight: 500 !important;
|
||||
color: colors.$color-text-black-active;
|
||||
}
|
||||
|
||||
.outline-title {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme;
|
||||
@use 'src/assets/scss/app/helpers/media';
|
||||
|
||||
.VPSidebar {
|
||||
--vp-sidebar-bg-color: var(--vp-c-bg);
|
||||
@@ -109,5 +110,7 @@
|
||||
}
|
||||
|
||||
.VPLocalNav.has-sidebar {
|
||||
padding-left: 320px !important;
|
||||
@include media.max(sm) {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
@@ -203,3 +203,6 @@
|
||||
--docsearch-primary-color: var(--vp-c-brand-1) !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
--vp-sidebar-width: 320px;
|
||||
}
|
||||
Reference in New Issue
Block a user