vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/client/theme-default/components/VPNavBarHamburger.vue

@@ -1,24 +1,32 @@
-<script lang="ts" setup>
-defineProps<{
-  active: boolean
-}>()
-
-defineEmits<{
-  (e: 'click'): void
-}>()
+<script setup>
+import { useTemplateRef, watchEffect } from "vue";
+import { useData } from "../composables/data";
+import { useNav } from "../composables/nav";
+defineProps({ active: {
+	type: Boolean,
+	required: true
+} });
+defineEmits(["click"]);
+const { theme } = useData();
+// register as the screen's trigger so Escape can return focus here
+const el = useTemplateRef("el");
+const { screenTriggerEl } = useNav();
+watchEffect(() => {
+	screenTriggerEl.value = el.value;
+});
 </script>
 
 <template>
   <button
+    ref="el"
     type="button"
     class="VPNavBarHamburger"
     :class="{ active }"
-    aria-label="mobile navigation"
+    :aria-label="theme.mobileMenuLabel || 'Menu'"
     :aria-expanded="active"
-    aria-controls="VPNavScreen"
     @click="$emit('click')"
   >
-    <span class="container">
+    <span class="container" aria-hidden="true">
       <span class="top" />
       <span class="middle" />
       <span class="bottom" />
@@ -31,11 +39,11 @@ defineEmits<{
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 48px;
+  width: 3rem;
   height: var(--vp-nav-height);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPNavBarHamburger {
     display: none;
   }
@@ -43,37 +51,39 @@ defineEmits<{
 
 .container {
   position: relative;
-  width: 16px;
-  height: 14px;
+  width: 1rem;
+  height: 0.875rem;
   overflow: hidden;
+  scale: var(--vp-direction-multiplier) 1;
 }
 
-.VPNavBarHamburger:hover .top    { top: 0; left: 0; transform: translateX(4px); }
-.VPNavBarHamburger:hover .middle { top: 6px; left: 0; transform: translateX(0); }
-.VPNavBarHamburger:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
+.VPNavBarHamburger:hover .top    { top: 0; transform: translateX(0.25rem); }
+.VPNavBarHamburger:hover .middle { top: 0.375rem; transform: translateX(0); }
+.VPNavBarHamburger:hover .bottom { top: 0.75rem; transform: translateX(0.5rem); }
 
-.VPNavBarHamburger.active .top    { top: 6px; transform: translateX(0) rotate(225deg); }
-.VPNavBarHamburger.active .middle { top: 6px; transform: translateX(16px); }
-.VPNavBarHamburger.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
+.VPNavBarHamburger.active .top    { top: 0.375rem; transform: translateX(0) rotate(225deg); }
+.VPNavBarHamburger.active .middle { top: 0.375rem; transform: translateX(1rem); }
+.VPNavBarHamburger.active .bottom { top: 0.375rem; transform: translateX(0) rotate(135deg); }
 
 .VPNavBarHamburger.active:hover .top,
 .VPNavBarHamburger.active:hover .middle,
 .VPNavBarHamburger.active:hover .bottom {
   background-color: var(--vp-c-text-2);
-  transition: top .25s, background-color .25s, transform .25s;
+  transition: top 0.25s, background-color 0.25s, transform 0.25s;
 }
 
 .top,
 .middle,
 .bottom {
   position: absolute;
-  width: 16px;
-  height: 2px;
+  inset-inline-start: 0;
+  width: 1rem;
+  height: 0.125rem;
   background-color: var(--vp-c-text-1);
-  transition: top .25s, background-color .5s, transform .25s;
+  transition: top 0.25s, background-color 0.5s, transform 0.25s;
 }
 
-.top    { top: 0; left: 0; transform: translateX(0); }
-.middle { top: 6px; left: 0; transform: translateX(8px); }
-.bottom { top: 12px; left: 0; transform: translateX(4px); }
+.top    { top: 0; transform: translateX(0); }
+.middle { top: 0.375rem; transform: translateX(0.5rem); }
+.bottom { top: 0.75rem; transform: translateX(0.25rem); }
 </style>

package/dist/client/theme-default/components/VPNavBarSearch.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/client/theme-default/components/VPNavBarSearch.vue

@@ -1,194 +1,163 @@
-<script lang="ts" setup>
-import '@docsearch/css'
-import { onKeyStroke } from '@vueuse/core'
-import {
-  defineAsyncComponent,
-  onMounted,
-  onUnmounted,
-  ref
-} from 'vue'
-import type { DefaultTheme } from '../../shared'
-import { useData } from '../composables/data'
-import VPNavBarSearchButton from './VPNavBarSearchButton.vue'
-
-const VPLocalSearchBox = __VP_LOCAL_SEARCH__
-  ? defineAsyncComponent(() => import('./VPLocalSearchBox.vue'))
-  : () => null
-
-const VPAlgoliaSearchBox = __ALGOLIA__
-  ? defineAsyncComponent(() => import('./VPAlgoliaSearchBox.vue'))
-  : () => null
-
-const { theme } = useData()
-
+<script setup>
+import { onKeyStroke } from "@vueuse/core";
+import { computed, defineAsyncComponent, onMounted, ref } from "vue";
+import { useData } from "../composables/data";
+import { resolveMode, resolveOptionsForLanguage } from "../support/docsearch";
+import { smartComputed } from "../support/reactivity";
+import VPNavBarAskAiButton from "./VPNavBarAskAiButton.vue";
+import VPNavBarSearchButton from "./VPNavBarSearchButton.vue";
+const VPLocalSearchBox = __VP_LOCAL_SEARCH__ ? defineAsyncComponent(() => import("./VPLocalSearchBox.vue")) : () => null;
+const VPAlgoliaSearchBox = __ALGOLIA__ ? defineAsyncComponent(() => import("./VPAlgoliaSearchBox.vue")) : () => null;
+const { theme, localeIndex, lang } = useData();
+const provider = __ALGOLIA__ ? "algolia" : __VP_LOCAL_SEARCH__ ? "local" : "";
+// #region Algolia Search
+const algoliaOptions = smartComputed(() => {
+	return resolveOptionsForLanguage(theme.value.search?.options || {}, localeIndex.value, lang.value);
+});
+const resolvedMode = computed(() => resolveMode(algoliaOptions.value));
+const askAiSidePanelConfig = computed(() => {
+	if (!resolvedMode.value.useSidePanel) return null;
+	const askAi = algoliaOptions.value.askAi;
+	if (!askAi || typeof askAi === "string") return null;
+	if (!askAi.sidePanel) return null;
+	return askAi.sidePanel === true ? {} : askAi.sidePanel;
+});
+const askAiShortcutEnabled = computed(() => {
+	return askAiSidePanelConfig.value?.keyboardShortcuts?.["Ctrl/Cmd+I"] !== false;
+});
+const openRequest = ref(null);
+let openNonce = 0;
 // to avoid loading the docsearch js upfront (which is more than 1/3 of the
 // payload), we delay initializing it until the user has actually clicked or
 // hit the hotkey to invoke it.
-const loaded = ref(false)
-const actuallyLoaded = ref(false)
-
-const preconnect = () => {
-  const id = 'VPAlgoliaPreconnect'
-
-  const rIC = window.requestIdleCallback || setTimeout
-  rIC(() => {
-    const preconnect = document.createElement('link')
-    preconnect.id = id
-    preconnect.rel = 'preconnect'
-    preconnect.href = `https://${
-      ((theme.value.search?.options as DefaultTheme.AlgoliaSearchOptions) ??
-        theme.value.algolia)!.appId
-    }-dsn.algolia.net`
-    preconnect.crossOrigin = ''
-    document.head.appendChild(preconnect)
-  })
-}
-
+const loaded = ref(false);
+const actuallyLoaded = ref(false);
 onMounted(() => {
-  if (!__ALGOLIA__) {
-    return
-  }
-
-  preconnect()
-
-  const handleSearchHotKey = (event: KeyboardEvent) => {
-    if (
-      (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) ||
-      (!isEditingContent(event) && event.key === '/')
-    ) {
-      event.preventDefault()
-      load()
-      remove()
-    }
-  }
-
-  const remove = () => {
-    window.removeEventListener('keydown', handleSearchHotKey)
-  }
-
-  window.addEventListener('keydown', handleSearchHotKey)
-
-  onUnmounted(remove)
-})
-
-function load() {
-  if (!loaded.value) {
-    loaded.value = true
-    setTimeout(poll, 16)
-  }
+	if (!__ALGOLIA__) return;
+	const id = "VPAlgoliaPreconnect";
+	if (document.getElementById(id)) return;
+	const appId = algoliaOptions.value.appId || (typeof algoliaOptions.value.askAi === "object" ? algoliaOptions.value.askAi?.appId : undefined);
+	if (!appId) return;
+	const rIC = window.requestIdleCallback || setTimeout;
+	rIC(() => {
+		const preconnect = document.createElement("link");
+		preconnect.id = id;
+		preconnect.rel = "preconnect";
+		preconnect.href = `https://${appId}-dsn.algolia.net`;
+		preconnect.crossOrigin = "";
+		document.head.appendChild(preconnect);
+	});
+});
+if (__ALGOLIA__) {
+	onKeyStroke("k", (event) => {
+		if (resolvedMode.value.showKeywordSearch && (event.ctrlKey || event.metaKey)) {
+			event.preventDefault();
+			loadAndOpen("search");
+		}
+	});
+	onKeyStroke("i", (event) => {
+		if (askAiSidePanelConfig.value && askAiShortcutEnabled.value && (event.ctrlKey || event.metaKey)) {
+			event.preventDefault();
+			loadAndOpen("askAi");
+		}
+	});
+	onKeyStroke("/", (event) => {
+		if (resolvedMode.value.showKeywordSearch && !isEditingContent(event)) {
+			event.preventDefault();
+			loadAndOpen("search");
+		}
+	});
 }
-
-function poll() {
-  // programmatically open the search box after initialize
-  const e = new Event('keydown') as any
-
-  e.key = 'k'
-  e.metaKey = true
-
-  window.dispatchEvent(e)
-
-  setTimeout(() => {
-    if (!document.querySelector('.DocSearch-Modal')) {
-      poll()
-    }
-  }, 16)
-}
-
-function isEditingContent(event: KeyboardEvent): boolean {
-  const element = event.target as HTMLElement
-  const tagName = element.tagName
-
-  return (
-    element.isContentEditable ||
-    tagName === 'INPUT' ||
-    tagName === 'SELECT' ||
-    tagName === 'TEXTAREA'
-  )
+function loadAndOpen(target) {
+	if (!loaded.value) {
+		loaded.value = true;
+	}
+	// This will either be handled immediately if DocSearch is ready,
+	// or queued by the AlgoliaSearchBox until its instances become ready.
+	openRequest.value = {
+		target,
+		nonce: ++openNonce
+	};
 }
-
-// Local search
-
-const showSearch = ref(false)
-
+// #endregion
+// #region Local Search
+const showSearch = ref(false);
 if (__VP_LOCAL_SEARCH__) {
-  onKeyStroke('k', (event) => {
-    if (event.ctrlKey || event.metaKey) {
-      event.preventDefault()
-      showSearch.value = true
-    }
-  })
-
-  onKeyStroke('/', (event) => {
-    if (!isEditingContent(event)) {
-      event.preventDefault()
-      showSearch.value = true
-    }
-  })
+	onKeyStroke("k", (event) => {
+		if (event.ctrlKey || event.metaKey) {
+			event.preventDefault();
+			showSearch.value = true;
+		}
+	});
+	onKeyStroke("/", (event) => {
+		if (!isEditingContent(event)) {
+			event.preventDefault();
+			showSearch.value = true;
+		}
+	});
+}
+// #endregion
+function isEditingContent(event) {
+	const element = event.target;
+	const tagName = element.tagName;
+	return element.isContentEditable || tagName === "INPUT" || tagName === "SELECT" || tagName === "TEXTAREA";
 }
-
-const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
 </script>
 
 <template>
   <div class="VPNavBarSearch">
-    <template v-if="provider === 'local'">
-      <VPLocalSearchBox
-        v-if="showSearch"
-        @close="showSearch = false"
+    <template v-if="provider === 'algolia'">
+      <VPNavBarSearchButton
+        v-if="resolvedMode.showKeywordSearch"
+        :text="algoliaOptions.translations?.button?.buttonText || 'Search'"
+        :aria-label="algoliaOptions.translations?.button?.buttonAriaLabel || 'Search'"
+        :aria-keyshortcuts="'/ control+k meta+k'"
+        @click="loadAndOpen('search')"
+      />
+      <VPNavBarAskAiButton
+        v-if="askAiSidePanelConfig"
+        :aria-label="askAiSidePanelConfig.button?.translations?.buttonAriaLabel || 'Ask AI'"
+        :aria-keyshortcuts="askAiShortcutEnabled ? 'control+i meta+i' : undefined"
+        @click="actuallyLoaded ? loadAndOpen('toggleAskAi') : loadAndOpen('askAi')"
       />
-
-      <div id="local-search">
-        <VPNavBarSearchButton @click="showSearch = true" />
-      </div>
-    </template>
-
-    <template v-else-if="provider === 'algolia'">
       <VPAlgoliaSearchBox
         v-if="loaded"
-        :algolia="theme.search?.options ?? theme.algolia"
+        :algolia-options
+        :open-request
         @vue:beforeMount="actuallyLoaded = true"
       />
-
-      <div v-if="!actuallyLoaded" id="docsearch">
-        <VPNavBarSearchButton @click="load" />
-      </div>
+    </template>
+    <template v-else-if="provider === 'local'">
+      <VPNavBarSearchButton
+        :text="algoliaOptions.translations?.button?.buttonText || 'Search'"
+        :aria-label="algoliaOptions.translations?.button?.buttonAriaLabel || 'Search'"
+        :aria-keyshortcuts="'/ control+k meta+k'"
+        @click="showSearch = true"
+      />
+      <VPLocalSearchBox
+        v-if="showSearch"
+        @close="showSearch = false"
+      />
     </template>
   </div>
 </template>
 
-<style>
+<style scoped>
 .VPNavBarSearch {
   display: flex;
   align-items: center;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPNavBarSearch {
-    flex-grow: 1;
-    padding-left: 24px;
+    gap: 0.5rem;
+    padding-inline-start: 1.5rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNavBarSearch {
-    padding-left: 32px;
+    padding-inline-start: 2rem;
   }
 }
-
-.dark .DocSearch-Footer {
-  border-top: 1px solid var(--vp-c-divider);
-}
-
-.DocSearch-Form {
-  border: 1px solid var(--vp-c-brand-1);
-  background-color: var(--vp-c-white);
-}
-
-.dark .DocSearch-Form {
-  background-color: var(--vp-c-default-soft);
-}
-
-.DocSearch-Screen-Icon > svg {
-  margin: auto;
-}
 </style>

package/dist/client/theme-default/components/VPNavBarSearchButton.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    text: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;