From 44729b937d84f638f045c91ec568d77ab6596cb2 Mon Sep 17 00:00:00 2001
From: lopo <lopo@zju.edu.cn>
Date: Mon, 16 Oct 2023 23:18:04 +0800
Subject: [PATCH] fix(theme): search box configuration loses responsiveness
 (when switching between multiple languages)

---
 .../components/VPNavBarSearchButton.vue        | 18 +++++++++++++++---
 .../theme-default/support/translation.ts       |  2 ++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/components/VPNavBarSearchButton.vue b/src/client/theme-default/components/VPNavBarSearchButton.vue
index 281a00f513d8..70e8d7af357f 100644
--- a/src/client/theme-default/components/VPNavBarSearchButton.vue
+++ b/src/client/theme-default/components/VPNavBarSearchButton.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { ButtonTranslations } from '../../../../types/local-search'
 import { useData } from '../composables/data'
+import { computed } from 'vue'
 import { createTranslate } from '../support/translation'
 
 const { theme } = useData()
@@ -13,11 +14,22 @@ const defaultTranslations: { button: ButtonTranslations } = {
   }
 }
 
-const $t = createTranslate(theme.value.search?.options, defaultTranslations)
+// Use the following order to get the text
+// 1. locale
+// 2. translation
+// 3. default
+const searchButton = computed<{ hint: string, aria: string }>(() => {
+  const $t = createTranslate(theme.value.search?.options, defaultTranslations)
+
+  return {
+    hint: $t('button.buttonText'),
+    aria: $t('button.buttonAriaLabel')
+  }
+})
 </script>
 
 <template>
-  <button type="button" class="DocSearch DocSearch-Button" :aria-label="$t('button.buttonAriaLabel')">
+  <button type="button" class="DocSearch DocSearch-Button" :aria-label="searchButton.aria">
     <span class="DocSearch-Button-Container">
       <svg
         class="DocSearch-Search-Icon"
@@ -35,7 +47,7 @@ const $t = createTranslate(theme.value.search?.options, defaultTranslations)
           stroke-linejoin="round"
         />
       </svg>
-      <span class="DocSearch-Button-Placeholder">{{ $t('button.buttonText') }}</span>
+      <span class="DocSearch-Button-Placeholder">{{ searchButton.hint }}</span>
     </span>
     <span class="DocSearch-Button-Keys">
       <kbd class="DocSearch-Button-Key"></kbd>
diff --git a/src/client/theme-default/support/translation.ts b/src/client/theme-default/support/translation.ts
index 607d5db3c118..ca6c7e58a07c 100644
--- a/src/client/theme-default/support/translation.ts
+++ b/src/client/theme-default/support/translation.ts
@@ -1,6 +1,8 @@
 import { useData } from '../composables/data'
 
 /**
+ * The value returned by the helper function returned by this function is not responsive,
+ * to get responsiveness call inside computed or translate again in onUpdated to update the value.
  * @param themeObject Can be an object with `translations` and `locales` properties
  */
 export function createTranslate(