valaxy-theme-hairy 1.0.1 → 1.0.2

package/components/posts/HairyPostToggleLayout.vue

@@ -1,36 +1,36 @@
-<script lang="ts" setup>
-import { useElementSize, useScroll } from '@vueuse/core'
-import { computed } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useGlobalStore } from '../../store'
-import { useLayoutPost } from '../../composables'
-
-const layout = useLayoutPost()
-
-const layouts = [
-  { layout: 'image:slice:reverse' as const, icon: 'i-fluent-text-align-distributed-24-filled' },
-  { layout: 'image:slice' as const, icon: 'i-fluent-text-align-left-16-filled' },
-  { layout: 'image' as const, icon: 'i-fluent-text-align-justify-20-filled' },
-  { layout: 'markdown' as const, icon: 'i-fluent-markdown-20-filled' },
-  { layout: 'text' as const, icon: 'i-fluent-code-text-16-filled' },
-]
-
-const globalStore = useGlobalStore()
-const { headerRef } = storeToRefs(globalStore)
-const { height: headerHeight } = useElementSize(headerRef)
-const scroll = useScroll(document)
-
-const show = computed(() => {
-  return scroll.y.value > headerHeight.value
-})
-</script>
-
-<template>
-  <div class="inline-flex gap-2 sticky top-15 inset-0 rounded-2" :class="[show && 'bg-white bg-opacity-85 dark:bg-black dark:bg-opacity-80 z-100']">
-    <div v-for="(item) in layouts" :key="item.layout" class="p-2 rounded-full cursor-pointer" :class="[layout === item.layout && 'text-primary']" @click="layout = item.layout">
-      <div class="text-size-xl" :class="item.icon" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+import { useElementSize, useScroll } from '@vueuse/core'
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useGlobalStore } from '../../store'
+import { useLayoutPost } from '../../composables'
+
+const layout = useLayoutPost()
+
+const layouts = [
+  { layout: 'image:slice:reverse' as const, icon: 'i-fluent-text-align-distributed-24-filled' },
+  { layout: 'image:slice' as const, icon: 'i-fluent-text-align-left-16-filled' },
+  { layout: 'image' as const, icon: 'i-fluent-text-align-justify-20-filled' },
+  { layout: 'markdown' as const, icon: 'i-fluent-markdown-20-filled' },
+  { layout: 'text' as const, icon: 'i-fluent-code-text-16-filled' },
+]
+
+const globalStore = useGlobalStore()
+const { headerRef } = storeToRefs(globalStore)
+const { height: headerHeight } = useElementSize(headerRef)
+const scroll = useScroll(document)
+
+const show = computed(() => {
+  return scroll.y.value > headerHeight.value
+})
+</script>
+
+<template>
+  <div class="inline-flex gap-2 sticky top-15 inset-0 rounded-2" :class="[show && 'bg-white bg-opacity-85 dark:bg-black dark:bg-opacity-80 z-100']">
+    <div v-for="(item) in layouts" :key="item.layout" class="p-2 rounded-full cursor-pointer" :class="[layout === item.layout && 'text-primary']" @click="layout = item.layout">
+      <div class="text-size-xl" :class="item.icon" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/third/HairyAlgoliaSearch.vue

@@ -1,17 +1,17 @@
-<script lang="ts" setup>
-import * as addonAlgolia from 'valaxy-addon-algolia'
-import { isEmptyAddon } from 'valaxy'
-import { whenever } from '@vueuse/core'
-
-if (isEmptyAddon(addonAlgolia))
-  throw new Error('Algolia addon is not installed')
-
-const { loaded, load, dispatchEvent } = addonAlgolia.useAddonAlgolia()
-
-whenever(loaded, dispatchEvent)
-</script>
-
-<template>
-  <AlgoliaSearchBox v-if="loaded" class="VPNavBarSearch" />
-  <HairySearchBtnDisplay v-else @click="load()" />
-</template>
+<script lang="ts" setup>
+import * as addonAlgolia from 'valaxy-addon-algolia'
+import { isEmptyAddon } from 'valaxy'
+import { whenever } from '@vueuse/core'
+
+if (isEmptyAddon(addonAlgolia))
+  throw new Error('Algolia addon is not installed')
+
+const { loaded, load, dispatchEvent } = addonAlgolia.useAddonAlgolia()
+
+whenever(loaded, dispatchEvent)
+</script>
+
+<template>
+  <AlgoliaSearchBox v-if="loaded" class="VPNavBarSearch" />
+  <HairySearchBtnDisplay v-else @click="load()" />
+</template>

package/components/third/HairyFuseSearch.vue

@@ -1,10 +1,10 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const visible = ref(false)
-</script>
-
-<template>
-  <HairySearchBtnDisplay @click="visible = true" />
-  <HairyFuseSearchDialog v-model:visible="visible" />
-</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>
+
+<template>
+  <HairySearchBtnDisplay @click="visible = true" />
+  <HairyFuseSearchDialog v-model:visible="visible" />
+</template>

package/components/third/HairyFuseSearchDialog.vue

@@ -1,32 +1,32 @@
-<script lang="ts" setup>
-import { ref, useModel } from 'vue'
-import { onKeyDown, whenever } from '@vueuse/core'
-
-const props = defineProps<{
-  visible: boolean
-}>()
-const visible = useModel(props, 'visible')
-
-const text = ref('')
-
-onKeyDown('Escape', () => {
-  if (!visible.value)
-    return
-  visible.value = false
-})
-whenever(() => !visible.value, () => {
-  text.value = ''
-})
-</script>
-
-<template>
-  <div v-if="visible" role="button" class="DocSearch DocSearch-Container " @click="visible = false">
-    <div class="DocSearch-Modal" style="--docsearch-vh: 5.5200000000000005px;" @click.stop>
-      <HairyFuseSearchHeader v-model:text="text" v-model:visible="visible" />
-      <HairyFuseSearchDropdown v-model:visible="visible" :text="text" />
-      <HairyFuseSearchFooter />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+import { ref, useModel } from 'vue'
+import { onKeyDown, whenever } from '@vueuse/core'
+
+const props = defineProps<{
+  visible: boolean
+}>()
+const visible = useModel(props, 'visible')
+
+const text = ref('')
+
+onKeyDown('Escape', () => {
+  if (!visible.value)
+    return
+  visible.value = false
+})
+whenever(() => !visible.value, () => {
+  text.value = ''
+})
+</script>
+
+<template>
+  <div v-if="visible" role="button" class="DocSearch DocSearch-Container " @click="visible = false">
+    <div class="DocSearch-Modal" style="--docsearch-vh: 5.5200000000000005px;" @click.stop>
+      <HairyFuseSearchHeader v-model:text="text" v-model:visible="visible" />
+      <HairyFuseSearchDropdown v-model:visible="visible" :text="text" />
+      <HairyFuseSearchFooter />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/third/HairyFuseSearchDropdown.vue

@@ -1,77 +1,77 @@
-<script lang="ts" setup>
-import { ref, toRef, useModel, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { onKeyDown } from '@vueuse/core'
-import { useFuseParsed } from '../../composables'
-
-const props = defineProps<{
-  text: string
-  visible: boolean
-}>()
-const visible = useModel(props, 'visible')
-
-const router = useRouter()
-
-const input = toRef(props, 'text')
-
-const { results } = useFuseParsed(input)
-
-function navigation(link: string) {
-  router.push(link)
-  visible.value = false
-}
-const selected = ref(0)
-
-onKeyDown('ArrowDown', () => {
-  if (!results.value.length || selected.value === results.value.length - 1)
-    return
-  selected.value++
-})
-onKeyDown('ArrowUp', () => {
-  if (!results.value.length || selected.value === 0)
-    return
-  selected.value--
-})
-onKeyDown('Enter', () => {
-  if (!results.value.length)
-    return
-  navigation(results.value[selected.value].item.link)
-  visible.value = false
-})
-watch(results, () => selected.value = 0)
-</script>
-
-<template>
-  <div class="DocSearch-Dropdown">
-    <div class="DocSearch-Dropdown-Container">
-      <section v-if="results.length" class="DocSearch-Hits">
-        <div class="DocSearch-Hit-source">
-          Recent
-        </div>
-        <ul id="docsearch-list" role="listbox" aria-labelledby="docsearch-label">
-          <HairyFuseSearchHit
-            v-for="({ item }, index) of results" :key="index"
-            :title="item.title"
-            :selected="selected === index"
-            :excerpt="item.excerpt"
-            :path="item.link"
-            @click="navigation(item.link)"
-            @hover="selected = index"
-          />
-        </ul>
-      </section>
-      <div v-else-if="!text" class="DocSearch-StartScreen">
-        <p class="DocSearch-Help">
-          No recent searches
-        </p>
-      </div>
-      <div v-else class="DocSearch-NoResults">
-        <div class="DocSearch-Screen-Icon">
-          <svg width="40" height="40" viewBox="0 0 20 20" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2" /></svg>
-        </div><p class="DocSearch-Title">
-          No results for "<strong>{{ text }}</strong>"
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+import { ref, toRef, useModel, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { onKeyDown } from '@vueuse/core'
+import { useFuseParsed } from '../../composables'
+
+const props = defineProps<{
+  text: string
+  visible: boolean
+}>()
+const visible = useModel(props, 'visible')
+
+const router = useRouter()
+
+const input = toRef(props, 'text')
+
+const { results } = useFuseParsed(input)
+
+function navigation(link: string) {
+  router.push(link)
+  visible.value = false
+}
+const selected = ref(0)
+
+onKeyDown('ArrowDown', () => {
+  if (!results.value.length || selected.value === results.value.length - 1)
+    return
+  selected.value++
+})
+onKeyDown('ArrowUp', () => {
+  if (!results.value.length || selected.value === 0)
+    return
+  selected.value--
+})
+onKeyDown('Enter', () => {
+  if (!results.value.length)
+    return
+  navigation(results.value[selected.value].item.link)
+  visible.value = false
+})
+watch(results, () => selected.value = 0)
+</script>
+
+<template>
+  <div class="DocSearch-Dropdown">
+    <div class="DocSearch-Dropdown-Container">
+      <section v-if="results.length" class="DocSearch-Hits">
+        <div class="DocSearch-Hit-source">
+          Recent
+        </div>
+        <ul id="docsearch-list" role="listbox" aria-labelledby="docsearch-label">
+          <HairyFuseSearchHit
+            v-for="({ item }, index) of results" :key="index"
+            :title="item.title"
+            :selected="selected === index"
+            :excerpt="item.excerpt"
+            :path="item.link"
+            @click="navigation(item.link)"
+            @hover="selected = index"
+          />
+        </ul>
+      </section>
+      <div v-else-if="!text" class="DocSearch-StartScreen">
+        <p class="DocSearch-Help">
+          No recent searches
+        </p>
+      </div>
+      <div v-else class="DocSearch-NoResults">
+        <div class="DocSearch-Screen-Icon">
+          <svg width="40" height="40" viewBox="0 0 20 20" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2" /></svg>
+        </div><p class="DocSearch-Title">
+          No results for "<strong>{{ text }}</strong>"
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/components/third/HairyFuseSearchFooter.vue

@@ -1,28 +1,28 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <footer class="DocSearch-Footer">
-    <div class="DocSearch-Logo">
-      <a class="flex items-center text-black dark:text-white" target="_blank" href="https://www.fusejs.io/">
-        <span mr-2 class="DocSearch-Label">Search by</span>
-        <img mr-1 w-6 h-6 src="https://www.fusejs.io/assets/img/logo.png">
-        <span>Fuse.js</span>
-      </a>
-    </div>
-    <ul class="DocSearch-Commands">
-      <li><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Enter key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" /></g></svg></kbd><span class="DocSearch-Label">to select</span></li><li><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" /></g></svg></kbd><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Arrow up" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" /></g></svg></kbd><span class="DocSearch-Label">to navigate</span></li><li><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" /></g></svg></kbd><span class="DocSearch-Label">to close</span></li>
-    </ul>
-  </footer>
-</template>
-
-<style>
-.cls-1,
-.cls-2 {
-  fill: #003dff;
-}
-
-.cls-2 {
-  fill-rule: evenodd;
-}
-</style>
+<script lang="ts" setup>
+</script>
+
+<template>
+  <footer class="DocSearch-Footer">
+    <div class="DocSearch-Logo">
+      <a class="flex items-center text-black dark:text-white" target="_blank" href="https://www.fusejs.io/">
+        <span mr-2 class="DocSearch-Label">Search by</span>
+        <img mr-1 w-6 h-6 src="https://www.fusejs.io/assets/img/logo.png">
+        <span>Fuse.js</span>
+      </a>
+    </div>
+    <ul class="DocSearch-Commands">
+      <li><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Enter key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" /></g></svg></kbd><span class="DocSearch-Label">to select</span></li><li><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" /></g></svg></kbd><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Arrow up" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" /></g></svg></kbd><span class="DocSearch-Label">to navigate</span></li><li><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" /></g></svg></kbd><span class="DocSearch-Label">to close</span></li>
+    </ul>
+  </footer>
+</template>
+
+<style>
+.cls-1,
+.cls-2 {
+  fill: #003dff;
+}
+
+.cls-2 {
+  fill-rule: evenodd;
+}
+</style>

package/components/third/HairyFuseSearchHeader.vue

@@ -1,30 +1,30 @@
-<script lang="ts" setup>
-import { useModel } from 'vue'
-
-const props = defineProps<{
-  text: string
-  visible: boolean
-}>()
-
-const text = useModel(props, 'text')
-const visible = useModel(props, 'visible')
-</script>
-
-<template>
-  <header class="DocSearch-SearchBar">
-    <div class="DocSearch-Form">
-      <label id="docsearch-label" class="DocSearch-MagnifierLabel" for="docsearch-input">
-        <svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /></svg>
-      </label>
-      <input id="docsearch-input" v-model="text" class="DocSearch-Input" aria-autocomplete="both" aria-labelledby="docsearch-label" autocomplete="off" autocorrect="off" autocapitalize="off" enterkeyhint="go" spellcheck="false" autofocus="true" placeholder="Search docs" maxlength="64" type="search" aria-activedescendant="docsearch-item-0" aria-controls="docsearch-list">
-      <button type="reset" title="Clear the query" class="DocSearch-Reset" aria-label="Clear the query" :hidden="!text" @click="text = ''">
-        <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /></svg>
-      </button>
-    </div>
-    <button class="DocSearch-Cancel" type="reset" aria-label="Cancel" @click="visible = false">
-      Cancel
-    </button>
-  </header>
-</template>
-
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+import { useModel } from 'vue'
+
+const props = defineProps<{
+  text: string
+  visible: boolean
+}>()
+
+const text = useModel(props, 'text')
+const visible = useModel(props, 'visible')
+</script>
+
+<template>
+  <header class="DocSearch-SearchBar">
+    <div class="DocSearch-Form">
+      <label id="docsearch-label" class="DocSearch-MagnifierLabel" for="docsearch-input">
+        <svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /></svg>
+      </label>
+      <input id="docsearch-input" v-model="text" class="DocSearch-Input" aria-autocomplete="both" aria-labelledby="docsearch-label" autocomplete="off" autocorrect="off" autocapitalize="off" enterkeyhint="go" spellcheck="false" autofocus="true" placeholder="Search docs" maxlength="64" type="search" aria-activedescendant="docsearch-item-0" aria-controls="docsearch-list">
+      <button type="reset" title="Clear the query" class="DocSearch-Reset" aria-label="Clear the query" :hidden="!text" @click="text = ''">
+        <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /></svg>
+      </button>
+    </div>
+    <button class="DocSearch-Cancel" type="reset" aria-label="Cancel" @click="visible = false">
+      Cancel
+    </button>
+  </header>
+</template>
+
+<style lang="scss" scoped></style>

package/components/third/HairyFuseSearchHit.vue

@@ -1,52 +1,52 @@
-<script lang="ts" setup>
-import { defineEmits, ref } from 'vue'
-import { useElementHover, whenever } from '@vueuse/core'
-
-withDefaults(
-  defineProps<{
-    selected: boolean
-    title: string
-    excerpt: string
-    path: string
-    history?: boolean
-  }>(),
-  {
-    selected: false,
-  },
-)
-
-const emit = defineEmits(['hover'])
-
-const itemRef = ref()
-
-whenever(useElementHover(itemRef), () => emit('hover'))
-</script>
-
-<template>
-  <li id="docsearch-item-0" ref="itemRef" class="DocSearch-Hit" role="option" :aria-selected="selected">
-    <a :href="path" onclick="return false">
-      <div class="DocSearch-Hit-Container">
-        <div class="DocSearch-Hit-icon">
-          <svg v-if="history" width="20" height="20" viewBox="0 0 20 20"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0" /><path d="M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13" /></g></svg>
-          <svg v-else width="20" height="20" viewBox="0 0 20 20"><path d="M17 5H3h14zm0 5H3h14zm0 5H3h14z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linejoin="round" /></svg>
-        </div>
-        <div class="DocSearch-Hit-content-wrapper">
-          <span class="DocSearch-Hit-title">{{ title }}</span>
-          <span class="DocSearch-Hit-path">{{ excerpt }}</span>
-        </div>
-        <div v-if="history" class="DocSearch-Hit-action">
-          <button class="DocSearch-Hit-action-button" title="Save this search" type="submit">
-            <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linejoin="round" /></svg>
-          </button>
-        </div>
-        <div v-if="history" class="DocSearch-Hit-action">
-          <button class="DocSearch-Hit-action-button" title="Remove this search from history" type="submit"><svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /></svg>
-          </button>
-        </div>
-        <div class="DocSearch-Hit-action">
-          <svg class="DocSearch-Hit-Select-Icon" width="20" height="20" viewBox="0 0 20 20"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3v4c0 2-2 4-4 4H2" /><path d="M8 17l-6-6 6-6" /></g></svg>
-        </div>
-      </div>
-    </a>
-  </li>
-</template>
+<script lang="ts" setup>
+import { defineEmits, ref } from 'vue'
+import { useElementHover, whenever } from '@vueuse/core'
+
+withDefaults(
+  defineProps<{
+    selected: boolean
+    title: string
+    excerpt: string
+    path: string
+    history?: boolean
+  }>(),
+  {
+    selected: false,
+  },
+)
+
+const emit = defineEmits(['hover'])
+
+const itemRef = ref()
+
+whenever(useElementHover(itemRef), () => emit('hover'))
+</script>
+
+<template>
+  <li id="docsearch-item-0" ref="itemRef" class="DocSearch-Hit" role="option" :aria-selected="selected">
+    <a :href="path" onclick="return false">
+      <div class="DocSearch-Hit-Container">
+        <div class="DocSearch-Hit-icon">
+          <svg v-if="history" width="20" height="20" viewBox="0 0 20 20"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0" /><path d="M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13" /></g></svg>
+          <svg v-else width="20" height="20" viewBox="0 0 20 20"><path d="M17 5H3h14zm0 5H3h14zm0 5H3h14z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linejoin="round" /></svg>
+        </div>
+        <div class="DocSearch-Hit-content-wrapper">
+          <span class="DocSearch-Hit-title">{{ title }}</span>
+          <span class="DocSearch-Hit-path">{{ excerpt }}</span>
+        </div>
+        <div v-if="history" class="DocSearch-Hit-action">
+          <button class="DocSearch-Hit-action-button" title="Save this search" type="submit">
+            <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linejoin="round" /></svg>
+          </button>
+        </div>
+        <div v-if="history" class="DocSearch-Hit-action">
+          <button class="DocSearch-Hit-action-button" title="Remove this search from history" type="submit"><svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /></svg>
+          </button>
+        </div>
+        <div class="DocSearch-Hit-action">
+          <svg class="DocSearch-Hit-Select-Icon" width="20" height="20" viewBox="0 0 20 20"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3v4c0 2-2 4-4 4H2" /><path d="M8 17l-6-6 6-6" /></g></svg>
+        </div>
+      </div>
+    </a>
+  </li>
+</template>