Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 11x 11x 11x 11x 3x 3x 3x 11x 11x 11x 11x 11x 11x 3x 11x 11x | <template>
<span class="cdx-search-result-title">
<!-- All on one line to avoid introducing unwanted whitespace into the UI. -->
<!--eslint-disable-next-line max-len-->
<bdi>{{ titleChunks[ 0 ] }}<span class="cdx-search-result-title__match">{{ titleChunks[ 1 ] }}</span>{{ titleChunks[ 2 ] }}</bdi>
</span>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { splitStringAtMatch } from '../../utils/stringHelpers';
/**
* Title with highlighted search query.
*
* This component can be used to display the title of a search result with the
* current search query visually differentiated within the title text.
*/
export default defineComponent( {
name: 'CdxSearchResultTitle',
props: {
/**
* Title text.
*/
title: {
type: String,
required: true
},
/**
* The current search query.
*/
searchQuery: {
type: String,
default: ''
}
},
setup: ( props ) => {
// Splits the title into three chunks: the part before the search query, the part containing
// the search query, and the part after the search query.
const titleChunks = computed( () =>
splitStringAtMatch( props.searchQuery, String( props.title ) ) );
return {
titleChunks
};
}
} );
</script>
<style lang="less">
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';
.cdx-search-result-title {
display: inline-block;
// Make sure long words won't overflow the container.
max-width: @size-full;
font-weight: @font-weight-bold;
&__match {
font-weight: @font-weight-normal;
}
}
</style>
|