Add search box placeholder setting to theme-config (#1834)

Signed-off-by: Boaz Shuster <[email protected]>

Author: boaz0

packages/@vuepress/plugin-search/SearchBox.vue

@@ -5,6 +5,7 @@
       aria-label="Search"
       :value="query"
       :class="{ 'focused': focused }"
+      :placeholder="placeholder"
       autocomplete="off"
       spellcheck="false"
       @focus="focused = true"
@@ -42,10 +43,14 @@ export default {
     return {
       query: '',
       focused: false,
-      focusIndex: 0
+      focusIndex: 0,
+      placeholder: undefined
     }
   },
 
+  mounted () {
+    this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
+  },
   computed: {
     showSuggestions () {
       return (

packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue

@@ -7,6 +7,7 @@
     <input
       id="algolia-search-input"
       class="search-query"
+      :placeholder="placeholder"
     >
   </form>
 </template>
@@ -15,8 +16,15 @@
 export default {
   props: ['options'],
 
+  data () {
+    return {
+      placeholder: undefined
+    }
+  },
+
   mounted () {
     this.initialize(this.options, this.$lang)
+    this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
   },
 
   methods: {

packages/docs/docs/theme/default-theme-config.md

@@ -351,6 +351,18 @@ Unlike the [built-in search](#built-in-search) engine which works out of the box
 
 For more options, check out [Algolia DocSearch’s documentation](https://github.com/algolia/docsearch#docsearch-options).
 
+### Search Placeholder
+
+You can define a placeholder for the search box by adding the `searchPlaceholder` attribute:
+
+``` js
+module.exports = {
+  themeConfig: {
+    searchPlaceholder: 'Search...'
+  }
+}
+```
+
 ## Last Updated
 
 The `themeConfig.lastUpdated` option allows you to get the UNIX timestamp(ms) of each file’s last `git` commit, and it will also display at the bottom of each page in an appropriate format: