Vue.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: { external: ['os'] }
  }
})

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

export interface Pokemon {
  id: string
  image_url: string
  caption: string
  name: string
  hp: number
  set_name: string
}

export interface Result {
  id: string
  image_url: string
  image_alt: string
  hp: number
  name: string
  set_name: string
  caption: string
}

<template>
  <form id="search-form" class="p-3" role="search">
    <div class="form-group">
      <input
        type="search"
        class="form-control form-control-lg"
        id="search-query"
        placeholder="Search (e.g. pikachu, water pwer)"
        aria-label="Search pokemons"
        autoFocus
        v-model.debounce.300ms="query"
      />

      <div class="form-text">
        <strong>Note:</strong>
        <span> the </span>
        <code class="bg-body-secondary">pwer</code>
        <span> demonstrates a typing error for </span>
        <code class="bg-body-secondary">power</code>.
      </div>
    </div>
  </form>

  <SearchInfo :results="results" :documents="model.currentState.documents" />

  <SearchResults :results="results" />
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import Boox from 'boox'
import type { Pokemon, Result } from '../types'
import SearchInfo from './SearchInfo.vue'
import SearchResults from './SearchResults.vue'

export default defineComponent({
  components: {
    SearchInfo,
    SearchResults
  },
  props: {
    model: {
      type: Boox<Pokemon>,
      required: true
    }
  },
  setup(props) {
    const query = ref('')
    const results = ref<Result[]>([])

    watch(
      query,
      async newQuery => {
        if (newQuery) {
          const searchResults = await props.model.search(newQuery)

          results.value = searchResults.map(result => {
            const {
              id,
              image_url,
              name: image_alt,
              hp
            } = result.attributes as unknown as Pokemon

            return {
              id,
              image_url,
              image_alt,
              hp,
              name: result.context('name').text,
              set_name: result.context('set_name').text,
              caption: result.context('caption', 80).text
            }
          })
        } else {
          results.value = []
        }
      },
      { immediate: false } // Perform search on initial render
    )

    return { query, results }
  }
})
</script>

<template>
  <p
    id="results-length"
    class="px-3 text-muted"
    :class="{ 'd-none': !results.length }"
  >
    {{
      results.length
        ? `Found ${results.length} of ${Object.keys(documents).length} pokemons`
        : ''
    }}
  </p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { Documents } from 'boox'
import type { Pokemon, Result } from '../types'

export default defineComponent({
  props: {
    results: {
      type: Array as () => Result[],
      required: true
    },
    documents: {
      type: Object as () => Documents<Pokemon>,
      required: true
    }
  }
})
</script>

<template>
  <a
    class="list-group-item list-group-item-action d-flex gap-3 py-3"
    :href="result.image_url"
    target="_blank"
    rel="noreferrer"
  >
    <img
      loading="lazy"
      :src="result.image_url"
      :alt="result.image_alt"
      width="32"
      height="32"
      class="rounded-circle flex-shrink-0"
    />
    <div class="d-flex gap-2 w-100 justify-content-between">
      <div>
        <h6 class="mb-1">
          <span v-html="result.name"></span> –
          <span v-html="result.set_name"></span>
        </h6>
        <p class="mb-0 opacity-75"><span v-html="result.caption"></span>...</p>
      </div>
      <small class="opacity-50 text-nowrap">HP {{ result.hp }}</small>
    </div>
  </a>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { Result } from '../types'

export default defineComponent({
  props: {
    result: {
      type: Object as () => Result,
      required: true
    }
  }
})
</script>

<template>
  <div
    id="results"
    class="list-group list-group-flush overflow-auto rounded-3"
    :class="{ 'd-none': !results.length }"
  >
    <SearchResult v-for="result in results" :key="result.id" :result="result" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { Result } from '../types'
import SearchResult from './SearchResult.vue'

export default defineComponent({
  components: {
    SearchResult
  },
  props: {
    results: {
      type: Array as () => Result[],
      required: true
    }
  }
})
</script>