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

the open source API testing client

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