@scalar/api-client/dist/v2/features/search/components/SearchModal.vue2.js

the open source API testing client

import { defineComponent as $, ref as g, watch as I, computed as k, createBlock as w, openBlock as c, unref as l, withKeys as d, withModifiers as i, withCtx as m, createElementVNode as s, createVNode as b, isRef as x, createElementBlock as B, Fragment as V, renderList as C, createTextVNode as N, toDisplayString as K } from "vue";
import { ScalarModal as M, ScalarSearchInput as q, ScalarSearchResultList as D } from "@scalar/components";
import { nanoid as E } from "nanoid";
import { useSearchIndex as L } from "../hooks/use-search-index.js";
import F from "./SearchResult.vue.js";
const P = {
  class: "mb-0 flex flex-col",
  role: "search"
}, G = /* @__PURE__ */ $({
  __name: "SearchModal",
  props: {
    modalState: {},
    documents: {},
    eventBus: {}
  },
  setup(u) {
    const v = E(), p = `${v}-search-result`, f = `${v}-search-instructions`, { query: r, results: o } = L(() => u.documents), a = g(void 0);
    I(
      () => u.modalState.open,
      (t) => {
        t && (r.value = "");
      }
    );
    const S = (t) => {
      const e = t === "up" ? -1 : 1, n = o.value.length;
      typeof a.value == "number" ? a.value = (a.value + e + n) % n : a.value = e === -1 ? n - 1 : 0;
    };
    function h(t) {
      if (typeof t != "number" || !o.value[t])
        return;
      const e = o.value[t];
      u.modalState.hide(), u.eventBus.emit("scroll-to:nav-item", { id: e.item.id });
    }
    const R = k(() => {
      const t = o.value[a.value ?? -1];
      return t ? `search-result-${t.item.id}` : void 0;
    });
    return (t, e) => (c(), w(l(M), {
      "aria-label": "Reference Search",
      state: t.modalState,
      variant: "search",
      onKeydown: e[5] || (e[5] = d(i((n) => t.modalState.hide(), ["stop"]), ["esc"]))
    }, {
      default: m(() => [
        s("div", P, [
          b(l(q), {
            modelValue: l(r),
            "onUpdate:modelValue": e[0] || (e[0] = (n) => x(r) ? r.value = n : null),
            "aria-activedescendant": R.value,
            "aria-autocomplete": "list",
            "aria-controls": p,
            "aria-describedby": f,
            role: "combobox",
            onBlur: e[1] || (e[1] = (n) => a.value = void 0),
            onKeydown: [
              e[2] || (e[2] = d(i((n) => S("down"), ["stop", "prevent"]), ["down"])),
              e[3] || (e[3] = d(i(() => h(a.value), ["stop", "prevent"]), ["enter"])),
              e[4] || (e[4] = d(i((n) => S("up"), ["stop", "prevent"]), ["up"]))
            ]
          }, null, 8, ["modelValue", "aria-activedescendant"])
        ]),
        b(l(D), {
          id: p,
          "aria-label": "Reference Search Results",
          class: "custom-scroll p-1 pt-0",
          noResults: !l(o).length
        }, {
          query: m(() => [
            N(K(l(r)), 1)
          ]),
          default: m(() => [
            (c(!0), B(V, null, C(l(o), (n, y) => (c(), w(F, {
              id: `search-result-${n.item.id}`,
              key: n.refIndex,
              isSelected: a.value === y,
              result: n,
              onClick: i(() => h(y), ["prevent"])
            }, null, 8, ["id", "isSelected", "result", "onClick"]))), 128))
          ]),
          _: 1
        }, 8, ["noResults"]),
        s("div", {
          id: f,
          class: "ref-search-meta"
        }, [...e[6] || (e[6] = [
          s("span", {
            "aria-hidden": "true",
            class: "contents"
          }, [
            s("span", null, "↑↓ Navigate"),
            s("span", null, "⏎ Select")
          ], -1),
          s("span", { class: "sr-only" }, " Press up arrow / down arrow to navigate, enter to select, type to filter results ", -1)
        ])])
      ]),
      _: 1
    }, 8, ["state"]));
  }
});
export {
  G as default
};