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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 | 1x 2x 9x 2x 2x 1x 5x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 86x 29x 29x 9x 29x 26x 7x 29x 29x 29x 50x 29x 29x 29x 29x 54x 29x 29x 25x 9x 25x 1x 25x 25x 1x 24x 24x 4x 3x 1x 3x 25x 25x 23x 25x 16x 9x 7x 3x 3x 3x 3x 14x 14x 9x 1x 1x 2x 2x 2x 1x 1x 1x 2x 2x 2x 8x 2x 2x 6x 1x 1x 1x 2x 1x 1x 1x 1x 1x 1x 15x 3x 12x 12x 12x 3x 3x 1x 2x 3x 3x 1x 1x 8x 8x 29x 29x 16x 29x 13x 13x 2x 13x 1x 1x 13x 13x 29x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 80x 80x 80x 80x 2x 2x 2x 2x 9x 82x 3x 1x 3x 7x 138x 138x 1x 52x 1x 1x | <template> <div class="cdx-typeahead-search" :class="rootClasses" :style="rootStyle" >E <form :id="id" ref="form" class="cdx-typeahead-search__form" :action="formAction" @submit="onSubmit" > <cdx-search-input ref="searchInput" v-model="inputValue" :button-label="buttonLabel" v-bind="otherAttrs" class="cdx-typeahead-search__input" name="search" role="combobox" autocomplete="off" aria-autocomplete="list" :aria-controls="menuId" :aria-expanded="expanded" :aria-activedescendant="highlightedId" @update:model-value="onUpdateInputValue" @focus="onFocus" @blur="onBlur" @keydown="onKeydown" > <cdx-menu :id="menuId" ref="menu" v-model:expanded="expanded" class="cdx-typeahead-search__menu" :show-pending="showPending" :selected="selection" :menu-items="searchResults" :footer="footer" :search-query="highlightQuery ? searchQuery : ''" :show-no-results-slot="searchQuery.length > 0 && searchResults.length === 0 && $slots['search-no-results-text'] && $slots['search-no-results-text']().length > 0" v-bind="menuConfig" :aria-label="searchResultsLabel" @update:selected="onUpdateMenuSelection" @menu-item-click="( menuItem ) => onSearchResultClick( asSearchResult( menuItem ) )" @menu-item-keyboard-navigation="onSearchResultKeyboardNavigation" @load-more="$emit( 'load-more' )" > <template #pending> <div class="cdx-menu-item__content cdx-typeahead-search__menu-message" :class="menuMessageClass" > <span class="cdx-typeahead-search__menu-message__text"> <!-- @slot A slot for a translated "Loading search results" message. --> <slot name="search-results-pending" /> </span> </div> </template> <template #no-results> <div class="cdx-menu-item__content cdx-typeahead-search__menu-message" :class="menuMessageClass" > <span class="cdx-typeahead-search__menu-message__text"> <!-- @slot A slot for passing in a translated "no results" message. --> <slot name="search-no-results-text" /> </span> </div> </template> <template #default="{ menuItem, active }"> <a v-if="menuItem.value === MenuFooterValue" class="cdx-menu-item__content cdx-typeahead-search__search-footer" :class="{ 'cdx-typeahead-search__search-footer__active': active }" :href="asSearchResult( menuItem ).url" @click.capture.stop="onSearchFooterClick( asSearchResult( menuItem ) )" > <!-- eslint-disable max-len --> <cdx-icon class="cdx-menu-item__thumbnail cdx-typeahead-search__search-footer__icon" :icon="articleIcon" /> <span class="cdx-menu-item__text cdx-typeahead-search__search-footer__text" > <!-- eslint-enable max-len --> <!-- @slot A slot for passing in translated search footer text. @binding {string} search-query Input text entered by the user --> <slot name="search-footer-text" :search-query="searchQuery"> <strong class="cdx-typeahead-search__search-footer__query"> {{ searchQuery }} </strong> </slot> </span> </a> </template> </cdx-menu> </cdx-search-input> <!-- @slot A slot for passing hidden inputs, i.e. `<input type="hidden" name="language" value="en">` --> <slot /> </form> </div> </template> <script lang="ts"> import { PropType, defineComponent, computed, ref, watch, onMounted, toRef } from 'vue'; import { cdxIconArticleSearch } from '@wikimedia/codex-icons'; import CdxIcon from '../icon/Icon.vue'; import CdxMenu from '../menu/Menu.vue'; import CdxSearchInput from '../search-input/SearchInput.vue'; import useGeneratedId from '../../composables/useGeneratedId'; import useSplitAttributes from '../../composables/useSplitAttributes'; import { SearchResult, SearchResultWithId, SearchResultClickEvent, MenuItemDataWithId, MenuConfig } from '../../types'; import { DebounceInterval, PendingDelay, MenuFooterValue } from '../../constants'; /** * A search form that provides a menu with autocomplete suggestions. */ export default defineComponent( { name: 'CdxTypeaheadSearch', components: { CdxIcon, CdxMenu, CdxSearchInput }, /** * Attributes, besides class, will be passed to the TextInput's input element. */ inheritAttrs: false, props: { /** * ID attribute for the form. */ id: { type: String, required: true }, /** * Action attribute for form. */ formAction: { type: String, required: true }, /** * Label attribute for the list of search results. */ searchResultsLabel: { type: String, required: true }, /** * List of search results. See the SearchResult type. */ searchResults: { type: Array as PropType<SearchResult[]>, required: true }, /** * Label for the submit button. * * If no label is provided, the submit button will not be displayed. */ buttonLabel: { type: String, default: '' }, /** * Initial value for the text input. * * Triggers an initial `input` event on mount. */ initialInputValue: { type: String, default: '' }, /** * Link for the final menu item. * * This will typically be a link to the search page for the current search query. */ searchFooterUrl: { type: String, default: '' }, /** * Time interval for debouncing input events, in ms. */ debounceInterval: { type: Number, default: DebounceInterval }, /** * Whether the search query should be highlighted within a search result's title. */ highlightQuery: { type: Boolean, default: false }, /** * Whether to show search results' thumbnails (or a placeholder icon). */ showThumbnail: { type: Boolean, default: false }, /** * Contract the width of the input when unfocused and expand the width of * the input when focused to accommodate the extra width of the thumbnails. * * This prop is ignored if showThumbnail is false. */ autoExpandWidth: { type: Boolean, default: false }, /** * Limit the number of menu items to display before scrolling. * * Setting this prop to anything falsy will show all menu items. * * By default, all menu items are shown. */ visibleItemLimit: { type: Number as PropType<number|null>, default: null } }, emits: [ /** * When the text input value changes. Debounced by default. * * @property {string} value The new input value */ 'input', /** * When a search result is selected. * * @property {SearchResultClickEvent} event Data for the selected result */ 'search-result-click', /**I * When the form is submitted. * * @property {SearchResultClickEvent} event Data for the selected result */ 'submit', /** * When the user scrolls towards the bottom of the menu. * * If it is possible to add or load more menu items, then now would be a good moment * so that the user can experience infinite scrolling. */ 'load-more' ], setup( props, { attrs, emit, slots } ) { const form = ref<HTMLFormElement>(); const menu = ref<InstanceType<typeof CdxMenu>>(); // Generated ID for menu; needed for aria-attributes. const menuId = useGeneratedId( 'typeahead-search-menu' ); // Whether the menu should be displayed. const expanded = ref( false ); I // Whether the component is waiting on its parent to provide it with new search results. const pending = ref( false ); // Whether to display the pending state indicators (in the Menu component). This is separate // from the `pending` ref because the pending state indicators are only displayed after a // delay, to avoid momentarily showing them to users with fast connections. const showPending = ref( false ); // Whether the TypeaheadSearch input is focused. // TODO: consider changing this variable and the one in Lookup to `isFocused` for clarity. const isActive = ref( false ); // Current text input value; initially set to the initialInputValue prop. const inputValue = ref( props.initialInputValue ); // Current search query. This is the query for which search results have been fetched, and // will display in the search footer. // TIhis will typically match the input value, except while results are being fetched and // if the user scrolls through results via the keyboard. const searchQuery = ref( '' ); const highlightedId = computed( () => menu.value?.getHighlightedMenuItem()?.id ); const selection = ref<string|number|null>( null ); const menuMessageClass = computed( () => ( { 'cdEx-typeahead-search__menu-message--has-thumbnail': props.showThumbnail } ) ); const selectedResult = computed( () => props.searchResults.find( ( searchResult ) => searchResult.value === selection.value ) ); const footer = computed( () => props.searchFooterUrl ? { value: MenuFooterValue, url: props.searchFooterUrl } : undefined ); // Get helpers from useSplitAttributes. const internalClasses = computed( () => { return { 'cdx-typeahead-search--show-thumbnail': props.showThumbnail, 'cdx-typeahead-search--expanded': expanded.value, 'cdx-typeahead-search--auto-expand-width': props.showThumbnail && props.autoExpandWidth }; } ); const { rootClasses, rootStyle, otherAttrs } = useSplitAttributes( attrs, internalClasses ); function asSearchResult( menuItem: MenuItemDataWithId ): SearchResultWithId { return menuItem as SearchResultWithId; } // Create MenuConfig to pass into Menu component. const menuConfig = computed( (): MenuConfig => { return { visibleItemLimit: props.visibleItemLimit, showThumbnail: props.showThumbnail, // In case search queries aren't highlighted, default to a bold label. boldLabel: true, hideDescriptionOverflow: true }; } ); let debounceId: ReturnType<typeof setTimeout>|undefined; let pendingDelayId: ReturnType<typeof setTimeout>|undefined; /** * Handle changes to the text input. * * 'input' events with the new value will be emitted, but this will be debounced if a * positive debounceInterval is provided as a prop or if the default DebounceInterval is * used. * * Pending state indicators will also be displayed after a brief delay, then removed once * search results are received. * * TODO: use a library-wide debounce function. * * @param newVal New value of the text input * @param immediate Whether to trigger event emission on leading edge */ function onUpdateInputValue( newVal: string, immediate = false ) { // If there is a selection and it doesn't match the new value, clear it. if ( selectedResult.value && selectedResult.value.label !== newVal && selectedResult.value.value !== newVal ) { selection.value = null; } // Always clear previous pending delay timeout function. if ( pendingDelayId !== undefined ) { clearTimeout( pendingDelayId ); pendingDelayId = undefined; } if ( newVal === '' ) { // If the input is cleared, close the menu. expanded.value = false; } else { // Otherwise, we have new input. Set pending to true to indicate that new search // results are being fetched. pending.value = true; // After a delay, pending state indicators will be displayed to the user by // expanding the menu and setting the Menu component's `showPending` prop to true. // Note that this only happens if the `search-results-pending` slot is populated. if ( slots[ 'search-results-pending' ] ) { pendingDelayId = setTimeout( () => { if ( isActive.value ) { expanded.value = true; } showPending.value = true; }, PendingDelay ); } } // Cancel the last setTimeout callback in case it hasn't executed yet. if ( debounceId !== undefined ) { clearTimeout( debounceId ); debounceId = undefined; } const handleUpdateInputValue = () => { emit( 'input', newVal ); }; if ( immediate ) { handleUpdateInputValue(); } else { debounceId = setTimeout( () => { handleUpdateInputValue(); }, props.debounceInterval ); } } function onUpdateMenuSelection( newVal: string|number|null ) { if ( newVal === MenuFooterValue ) { // If we're trying to select the footer, clear the selection instead selection.value = null; // and restore the text in the input inputValue.value = searchQuery.value; return; }E selection.value = newVal; // If there is a newVal, including an empty string... if ( newVal !== null ) { // If there is a search result selected, show the label (or the value, if there // is no label). Otherwise, set the input to empty. inputValue.value = selectedResult.value ? selectedResult.value.label ?? String( selectedResult.value.value ) : ''; } } function onFocus() { isActive.value = true; if ( searchQuery.value || showPending.value ) { expanded.value = true; } } function onBlur() { isActive.value = false; expanded.value = false; } /** * Handle a click on a search result, * emitting event data if it was a real result. * * @param searchResult */ function onSearchResultClick( searchResult: SearchResultWithId ) { // First, process the search result. We can ditch the generated ID, and if this is the // search footer, we don't want to emit a search result. // eslint-disable-next-line @typescript-eslint/no-unused-vars const { id, ...resultWithoutId } = searchResult; if ( resultWithoutId.value === MenuFooterValue ) { emit( 'search-result-click', { searchResult: null, index: props.searchResults.length, numberOfResults: props.searchResults.length } ); return; } emitSearchResultClick( resultWithoutId ); } /** * Emit event data for a selected real search result on click. * * @param searchResult */ function emitSearchResultClick( searchResult: SearchResult ) { const searchResultClickEvent: SearchResultClickEvent = { searchResult, index: props.searchResults.findIndex( ( r ) => r.value === searchResult.value ), numberOfResults: props.searchResults.length }; emit( 'search-result-click', searchResultClickEvent ); } /** * When the user reaches a search result via keyboard navigation, update * the input value to that item's label or value * * @param searchResult */ function onSearchResultKeyboardNavigation( searchResult: SearchResultWithId ) { // Don't set the input to the value of the menu footer, revert to search query instead if ( searchResult.value === MenuFooterValue ) { inputValue.value = searchQuery.value; return; } inputValue.value = searchResult.value ? searchResult.label ?? String( searchResult.value ) : ''; } /** * Handle search footer click. * * Unlike search results, when the search footer is clicked, we don't want the selection * value to be updated to the value of the search footer item. So, we handle this case * separately here. * * @param footerMenuItem */ function onSearchFooterClick( footerMenuItem: SearchResultWithId ) { // Like we would with other menu items, close the menu and clear the active item. expanded.value = false; menu.value?.clearActive(); // Run the search result click handler. onSearchResultClick( footerMenuItem ); } /** * Emit event data on form submit. * * @param e */ function onSubmit( e: Event ) { if ( selectedResult.value ) { // Treat submit with a selected result like a click on the result: // Emit a click event instead of the submit event... emitSearchResultClick( selectedResult.value ); e.stopPropagation(); // ...and navigate to the URL instead of submitting the form. window.location.assign( selectedResult.value.url ); e.preventDefault(); } else { // Emit event for no selection. const submitEvent: SearchResultClickEvent = { searchResult: null, index: -1, numberOfResults: props.searchResults.length }; emit( 'submit', submitEvent ); } } /** * Respond to key navigation. * * This component has some special cases it needs to cover, then will relegate the rest to * the delegateKeyNavigation function provided by useMenu. * * @param e */ function onKeydown( e: KeyboardEvent ) { if ( !menu.value || !searchQuery.value || e.key === ' ' ) { return; } const highlightedResult = menu.value.getHighlightedMenuItem(); const resultHighlightedViaKeyboard = menu.value.getHighlightedViaKeyboard(); switch ( e.key ) { case 'Enter': if ( highlightedResult ) { // If this is the search footer and it was highlighted via keyboard nav... if ( highlightedResult.value === MenuFooterValue && resultHighlightedViaKeyboard ) { // Directly navigate to the search footer URL so the link is the same on // both mouse and keyboard. window.location.assign( props.searchFooterUrl ); } else { // Otherwise, handle the item change as usual. But don't prevent the // event, otherwise the form won't be submitted menu.value.delegateKeyNavigation( e, { prevent: false } ); } } expanded.value = false; break; case 'Tab': expanded.value = false; break; default: menu.value.delegateKeyNavigation( e ); break; } } // Manually run onUpdateInputValue to fetch initial results. onMounted( () => { if ( props.initialInputValue ) { onUpdateInputValue( props.initialInputValue, true ); } } ); // When the menu items change, maybe show the menu. // This is the main method of opening the menu of the component, since showing the menu // depends mostly on whether there are any menu items to show. watch( toRef( props, 'searchResults' ), () => { // Now that we have received a response, set the searchQuery to the value of the input. // This ensures that the search footer corresponds to the new search results. searchQuery.value = inputValue.value.trim(); // Show the menu if: // 1. The input is currently focused // 2. Pending state is true, which indicates that the new searchResults value was // returned after new user input // 3. The input is not empty // Whether we open the menu doesn't depend on whether there are results to show, because // we always show the search footer, even if there are no results and the no-results // slot is not set. // Note that the menu may already have been expanded if the pending delay threshold has // been met and the pending state is being displayed to the user. if ( isActive.value && pending.value && searchQuery.value.length > 0 ) { expanded.value = true; } // Make sure pending doesn't get set to true by clearing the timeout function, and // explicitly set pending to false. if ( pendingDelayId !== undefined ) { clearTimeout( pendingDelayId ); pendingDelayId = undefined; } pending.value = false; showPending.value = false; } ); return { form, menu, menuId, highlightedId, selection, menuMessageClass, footer, asSearchResult, inputValue, searchQuery, expanded, showPending, rootClasses, rootStyle, otherAttrs, menuConfig, onUpdateInputValue, onUpdateMenuSelection, onFocus, onBlur, onSearchResultClick, onSearchResultKeyboardNavigation, onSearchFooterClick, onSubmit, onKeydown, MenuFooterValue, articleIcon: cdxIconArticleSearch }; }, methods: { /** * Focus the component's input element. * * @public */ focus(): void { const searchInput = this.$refs.searchInput as InstanceType<typeof CdxSearchInput>; // Run the searchInput component's focus method, which will set focus // to the <input> within. searchInput.focus(); } } } ); </script> <style lang="less"> @import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less'; @import ( reference ) '../../themes/mixins/common.less'; @import ( reference ) '../../themes/mixins/icon-alignment.less'; .cdx-typeahead-search { &__menu.cdx-menu { border-top-left-radius: @border-radius-sharp; border-top-right-radius: @border-radius-sharp; } .cdx-menu-item { // Unset padding so we can add it to the anchor elements instead. This is necessary to get // proper styling on the search footer. padding: 0; &__content { padding: @spacing-50 @spacing-75; } } &__search-footer { &.cdx-menu-item { box-sizing: @box-sizing-base; // Set `min-height` on the footer so that it has the same height as the search results. // We can't set it on `&__icon` because the icon would get scaled itself. // Clarify origin of value by calculation instead of component token. /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ min-height: @min-size-search-figure + ( 2 * @spacing-50 ); &:visited { color: @color-base; } &:hover { text-decoration: @text-decoration-none; cursor: @cursor-base--hover; } } &__icon.cdx-icon { color: @color-subtle; } // We cannot use a pseudo class ":active" because that does not work // in firefox due to the use of "preventDefault" in the menuItem component &__active.cdx-menu-item { .cdx-typeahead-search__search-footer__icon.cdx-icon, .cdx-typeahead-search__search-footer__text { color: @color-progressive; } } } // When props showThumbnail is true, special menu messages (like no results and pending) should // have different padding. .cdx-typeahead-search__menu-message--has-thumbnail { padding-left: @spacing-125; } &--expanded &__input.cdx-search-input .cdx-text-input { border-bottom-left-radius: @border-radius-sharp; border-bottom-right-radius: @border-radius-sharp; } // TODO: Overwrite TextInput default to feature px based `min-size-icon-medium`. // Revisit and remove as soon as we're providing legacy theme to Vector at 14px base. .cdx-text-input--has-start-icon { .cdx-text-input__input { .cdx-mixin-icon-wrapper-padding( start, @spacing-50, @param-size-icon: @min-size-icon-medium ); } } &--show-thumbnail { &.cdx-typeahead-search--auto-expand-width:not( .cdx-typeahead-search--expanded ) { margin-left: @spacing-typeahead-search-focus-addition; } &:not( .cdx-typeahead-search--auto-expand-width ), &.cdx-typeahead-search--auto-expand-width.cdx-typeahead-search--expanded { margin-left: 0; .cdx-text-input__input { .cdx-mixin-icon-wrapper-padding( start, @spacing-start-typeahead-search-figure, @min-size-search-figure ); } .cdx-text-input__start-icon { .cdx-mixin-icon( start, @param-external-padding: @spacing-start-typeahead-search-icon ); } } .cdx-typeahead-search__search-footer { &__icon { // Prevent the icon container from shrinking when large text is present. flex-shrink: 0; // Prevent the icon container from shrinking on smaller base font sizes. min-width: @min-size-search-figure; width: @size-search-figure; } } } // Remove border-top when search-footer is the only menu item .cdx-menu-item:first-child { .cdx-typeahead-search__search-footer { border-top: unset; } } } </style> |