<script setup lang="ts">
import { VdDocSearch, type DocSearchDoc } from "@vanduo-oss/vd3";
import { useRouter } from "vue-router";

const router = useRouter();

const docs: DocSearchDoc[] = [
  {
    title: "Button",
    category: "Components",
    href: "/components/button",
    content: "Buttons trigger actions and submit forms.",
    keywords: ["button", "cta", "action"],
  },
  { title: "Switch", category: "Components", href: "/components/switch" },
  // …more docs
];

function onSelect(result: DocSearchResult) {
  router.push(result.href); // result.href defaults to #<id>
}
</script>

<template>
  <VdDocSearch
    :data="docs"
    placeholder="Search the docs… (⌘K)"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useDocSearch, type DocSearchDoc } from "@vanduo-oss/vd3";

const docs: DocSearchDoc[] = [/* … */];
const input = ref<HTMLInputElement | null>(null);

// Reactive source (ref / getter) is re-indexed automatically when it changes.
const { query, results, isOpen, activeIndex, select, handleKeydown } =
  useDocSearch(() => docs, {
    input,          // ⌘K / Ctrl+K focuses this element
    maxResults: 5,
    debounceMs: 150,
    onSelect: (r) => console.log("chose", r.href),
  });
</script>

<template>
  <input ref="input" v-model="query" @keydown="handleKeydown" />
  <ul v-if="isOpen">
    <li
      v-for="(r, i) in results"
      :key="r.id"
      :class="{ active: i === activeIndex }"
      @click="select(i)"
    >
      <!-- titleHtml is HTML-escaped by the composable; only the
           highlight tag is injected, so v-html is safe here. -->
      <span v-html="r.titleHtml" />
    </li>
  </ul>
</template>