Source code

src/atrium/templates/search-dialog.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Compose keyboard-accessible navigation search results.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<div
  x-data="uiDialog('global-search')"
  x-id="['search-title']"
  @dialog-open.window="handleOpen"
  @dialog-close="handleClose"
  @keydown.escape.window="escape"
  x-show="open"
  x-cloak
  x-ui-trap="open"
  class="ui-overlay"
  @click.self="close"
  role="dialog"
  aria-modal="true"
  :aria-labelledby="$id('search-title')"
>
  <div class="ui-dialog" x-data="uiSearch" x-id="['search-results', 'search-option']">
    <h2 :id="$id('search-title')" class="visually-hidden" x-text="$t('searchEverything')"></h2>
    <div class="search-dialog-input">
      <span x-icon="'search'"></span>
      <input
        x-model="query"
        @input="reset"
        @keydown.arrow-down.prevent="move(1)"
        @keydown.arrow-up.prevent="move(-1)"
        @keydown.enter.prevent="choose()"
        :placeholder="$t('searchEverything')"
        :aria-label="$t('searchEverything')"
        role="combobox"
        aria-autocomplete="list"
        aria-expanded="true"
        :aria-controls="$id('search-results')"
        :aria-activedescendant="results.length ? $id('search-option', index) : null"
      />
      <button class="btn btn-ghost btn-sm" @click="close">Esc</button>
    </div>
    <div class="p-2" role="listbox" :id="$id('search-results')" :aria-label="$t('searchResults')">
      <template x-for="(item, position) in results" :key="item.path">
        <button
          class="search-option"
          role="option"
          :id="$id('search-option', position)"
          :aria-selected="position === index"
          @click="choose(item)"
          tabindex="-1"
        >
          <span x-icon="item.icon"></span>
          <span class="grow" x-text="$t(item.label)"></span>
          <span x-icon="'arrow'"></span>
        </button>
      </template>
      <p
        class="p-3 text-small text-muted mb-0"
        x-show="!results.length"
        x-text="$t('noResults')"
      ></p>
    </div>
    <div class="search-help">
      <span>
        ↑ ↓
        <span x-text="$t('navigate')"></span>
      </span>
      <span>
        ↵
        <span x-text="$t('open')"></span>
      </span>
      <span>
        Esc
        <span x-text="$t('close')"></span>
      </span>
    </div>
  </div>
</div>