@vuepress-plume/plugin-search 1.0.0-rc.204 → 1.0.0-rc.206

package/dist/client/components/SearchBox.vue

@@ -55,9 +55,12 @@ interface Result {
   text?: string
 }
 
-const { activate } = useFocusTrap(el, {
-  immediate: true,
-})
+const { activate } = useFocusTrap(el, { immediate: true })
+
+const isSearchIndexLoading = ref(false)
+const isSearching = ref(false)
+
+const showSearchSpinner = computed(() => isSearchIndexLoading.value || isSearching.value)
 
 const searchIndex = computedAsync(async () => {
   let tokenize: ((str: string) => string[]) | undefined
@@ -83,7 +86,7 @@ const searchIndex = computedAsync(async () => {
       },
     ),
   )
-})
+}, undefined, isSearchIndexLoading)
 
 const disableQueryPersistence = computed(() =>
   options?.disableQueryPersistence === true,
@@ -121,15 +124,19 @@ watchDebounced(
     let canceled = false
     onCleanup(() => {
       canceled = true
+      isSearching.value = false
     })
 
-    if (!index)
+    if (!index) {
+      results.value = []
       return
+    }
 
+    isSearching.value = true
     // Search
     results.value = index
-      .search(filterTextValue) as (SearchResult & Result)[]
-    // .slice(0, 16)
+      .search(filterTextValue)
+      .slice(0, 16) as (SearchResult & Result)[]
     enableNoResults.value = true
 
     const terms = new Set<string>()
@@ -155,6 +162,7 @@ watchDebounced(
         },
       })
     })
+    isSearching.value = false
   },
   { debounce: 200, immediate: true },
 )
@@ -202,7 +210,17 @@ function scrollToSelectedResult() {
   })
 }
 
-onKeyStroke('ArrowUp', (event) => {
+function isMacCtrlShortcut(event: KeyboardEvent) {
+  return (
+    event.ctrlKey
+    && !event.altKey
+    && !event.metaKey
+    && !event.shiftKey
+    && document.documentElement.classList.contains('mac')
+  )
+}
+
+function selectPreviousResult(event: KeyboardEvent) {
   event.preventDefault()
   selectedIndex.value--
   if (selectedIndex.value < 0)
@@ -210,9 +228,9 @@ onKeyStroke('ArrowUp', (event) => {
 
   disableMouseOver.value = true
   scrollToSelectedResult()
-})
+}
 
-onKeyStroke('ArrowDown', (event) => {
+function selectNextResult(event: KeyboardEvent) {
   event.preventDefault()
   selectedIndex.value++
   if (selectedIndex.value >= results.value.length)
@@ -220,6 +238,19 @@ onKeyStroke('ArrowDown', (event) => {
 
   disableMouseOver.value = true
   scrollToSelectedResult()
+}
+
+onKeyStroke('ArrowUp', selectPreviousResult)
+onKeyStroke('ArrowDown', selectNextResult)
+onKeyStroke(['p', 'P'], (event) => {
+  if (isMacCtrlShortcut(event)) {
+    selectPreviousResult(event)
+  }
+})
+onKeyStroke(['n', 'N'], (event) => {
+  if (isMacCtrlShortcut(event)) {
+    selectNextResult(event)
+  }
 })
 
 const router = useRouter()
@@ -344,6 +375,13 @@ function selectedClick(e: MouseEvent, p: SearchResult & Result) {
             class="search-input"
           >
           <div class="search-actions">
+            <span
+              class="search-loading"
+              :class="{ active: showSearchSpinner }"
+              :role="showSearchSpinner ? 'status' : undefined"
+              aria-live="polite"
+              :aria-label="showSearchSpinner ? 'Loading search results' : undefined"
+            />
             <button
               class="clear-button"
               type="reset"
@@ -604,12 +642,40 @@ svg {
   }
 }
 
-@media (min-width: 769px) {
+@media (min-width: 768px) {
   .search-actions.before {
     display: none;
   }
 }
 
+.search-loading {
+  flex: none;
+  width: 18px;
+  height: 18px;
+  margin: 8px;
+  visibility: hidden;
+  border: 2px solid var(--vp-c-divider);
+  border-top-color: var(--vp-c-brand-1);
+  border-radius: 50%;
+}
+
+.search-loading.active {
+  visibility: visible;
+  animation: local-search-loading 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .search-loading.active {
+    animation: none;
+  }
+}
+
+@keyframes local-search-loading {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .search-actions button {
   padding: 7px;
   margin: 0;

package/dist/client/composables/index.d.ts

@@ -1,6 +1,5 @@
 import { ComputedRef, MaybeRef, ShallowRef } from "vue";
 import { SearchBoxLocales, SearchLocaleOptions } from "../../shared/index.js";
-
 //#region src/client/composables/locale.d.ts
 /**
  * Get locale configuration for the current route.

package/dist/node/index.d.ts

@@ -1,7 +1,6 @@
 import { SearchOptions, SearchPluginOptions } from "../shared/index.js";
 import { App, Plugin } from "vuepress/core";
 export * from "../shared/index.js";
-
 //#region src/node/prepareSearchIndex.d.ts
 /**
  * Options for search index preparation.
@@ -32,11 +31,7 @@ interface SearchIndexOptions {
  * @param options.isSearchable - Function to filter searchable pages / 过滤可搜索页面的函数
  * @param options.searchOptions - MiniSearch configuration / MiniSearch 配置
  */
-declare function prepareSearchIndex({
-  app,
-  isSearchable,
-  searchOptions
-}: SearchIndexOptions): Promise<void>;
+declare function prepareSearchIndex({ app, isSearchable, searchOptions }: SearchIndexOptions): Promise<void>;
 //#endregion
 //#region src/node/searchPlugin.d.ts
 /**
@@ -69,10 +64,6 @@ declare function prepareSearchIndex({
  *   ]
  * }
  */
-declare function searchPlugin({
-  locales,
-  isSearchable,
-  ...searchOptions
-}?: SearchPluginOptions): Plugin;
+declare function searchPlugin({ locales, isSearchable, ...searchOptions }?: SearchPluginOptions): Plugin;
 //#endregion
 export { prepareSearchIndex, searchPlugin };

package/dist/node/index.js

@@ -158,9 +158,10 @@ ${page.contentRendered}`);
 		if (!section || !(section.text || section.titles)) break;
 		const { anchor, text, titles } = section;
 		const id = anchor ? [fileId, anchor].join("#") : fileId;
-		if (index.has(id)) if (anchor) logger.error(`${colors.green("[@vuepress-plume/plugin-search]")} duplicate heading anchor : ${colors.cyan(titles.join(" >> "))} \n at ${colors.cyan(fileId)}`);
-		else logger.error(`${colors.green("[@vuepress-plume/plugin-search]")} duplicate page permalink : ${colors.cyan(fileId)}`);
-		else {
+		if (index.has(id)) {
+			if (anchor) logger.error(`${colors.green("[@vuepress-plume/plugin-search]")} duplicate heading anchor : ${colors.cyan(titles.join(" >> "))} \n at ${colors.cyan(fileId)}`);
+			else logger.error(`${colors.green("[@vuepress-plume/plugin-search]")} duplicate page permalink : ${colors.cyan(fileId)}`);
+		} else {
 			const item = {
 				id,
 				text,

package/dist/shared/index.d.ts

@@ -1,6 +1,5 @@
 import { Options } from "minisearch";
 import { LocaleConfig, Page } from "vuepress/core";
-
 //#region src/shared/index.d.ts
 /**
  * Locale options for search UI strings.
@@ -20,12 +19,19 @@ interface SearchLocaleOptions {
   noResultsText: string;
   /** Footer keyboard shortcut hints / 底部键盘快捷键提示 */
   footer: {
-    /** Text for select action / 选择操作的文本 */selectText: string; /** ARIA label for select key / 选择键的 ARIA 标签 */
-    selectKeyAriaLabel: string; /** Text for navigate action / 导航操作的文本 */
-    navigateText: string; /** ARIA label for navigate up key / 向上导航键的 ARIA 标签 */
-    navigateUpKeyAriaLabel: string; /** ARIA label for navigate down key / 向下导航键的 ARIA 标签 */
-    navigateDownKeyAriaLabel: string; /** Text for close action / 关闭操作的文本 */
-    closeText: string; /** ARIA label for close key / 关闭键的 ARIA 标签 */
+    /** Text for select action / 选择操作的文本 */
+    selectText: string;
+    /** ARIA label for select key / 选择键的 ARIA 标签 */
+    selectKeyAriaLabel: string;
+    /** Text for navigate action / 导航操作的文本 */
+    navigateText: string;
+    /** ARIA label for navigate up key / 向上导航键的 ARIA 标签 */
+    navigateUpKeyAriaLabel: string;
+    /** ARIA label for navigate down key / 向下导航键的 ARIA 标签 */
+    navigateDownKeyAriaLabel: string;
+    /** Text for close action / 关闭操作的文本 */
+    closeText: string;
+    /** ARIA label for close key / 关闭键的 ARIA 标签 */
     closeKeyAriaLabel: string;
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuepress-plume/plugin-search",
   "type": "module",
-  "version": "1.0.0-rc.204",
+  "version": "1.0.0-rc.206",
   "description": "The Plugin for VuePress 2 - local search",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -35,14 +35,14 @@
   },
   "dependencies": {
     "@vuepress/helper": "2.0.0-rc.131",
-    "@vueuse/core": "^14.3.0",
-    "@vueuse/integrations": "^14.3.0",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/integrations": "^14.4.0",
     "chokidar": "5.0.0",
     "focus-trap": "^8.2.2",
     "mark.js": "^8.11.1",
     "minisearch": "^7.2.0",
-    "p-map": "^7.0.5",
-    "vue": "^3.5.39"
+    "p-map": "^7.0.7",
+    "vue": "^3.5.42"
   },
   "publishConfig": {
     "access": "public",