Init search vue

Rebased from commit f700cb7

Bug: #21
Change-Id: I918fd0f74044bea2344acd219f92115f4a377ce9

resources/skins.lakeus.search/App.vue

@@ -0,0 +1,111 @@
+<template>
+  <wvui-typeahead-search
+    id="searchform"
+    ref="searchForm"
+    :client="getClient"
+    :domain="domain"
+    :footer-search-text="$i18n('searchsuggest-containing').text()"
+    :suggestions-label="$i18n('searchresults').text()"
+    :accesskey="searchAccessKey"
+    :title="searchTitle"
+    :placeholder="searchPlaceholder"
+    :aria-label="searchPlaceholder"
+    :initial-input-value="searchQuery"
+    :button-label="$i18n('searchbutton').text()"
+    :form-action="action"
+    :search-language="language"
+    :show-thumbnail="showThumbnail"
+    :show-description="showDescription"
+  >
+    <input type="hidden" name="title" value="Special:Search" />
+  </wvui-typeahead-search>
+</template>
+
+<script>
+/* global SubmitEvent */
+const wvui = require("wvui");
+module.exports = {
+  name: "App",
+  components: wvui,
+  mounted: function () {
+    // access the element associated with the wvui-typeahead-search component
+    // eslint-disable-next-line no-jquery/variable-pattern
+    var wvuiSearchForm = this.$refs.searchForm.$el;
+    if (this.autofocusInput) {
+      // TODO: The wvui-typeahead-search component accepts an id prop but does not
+      // display that value as an HTML attribute on the form element.
+      wvuiSearchForm.querySelector("form").setAttribute("id", "searchform");
+      // TODO: The wvui-typeahead-search component does not accept an autofocus parameter
+      // or directive. This can be removed when its does.
+      wvuiSearchForm.querySelector("input").focus();
+    }
+  },
+  computed: {
+    /**
+     * Allow wikis to replace the default search API client
+     *
+     * @return {void|Object}
+     */
+    getClient: function () {
+      return mw.config.get("wgLakeusSearchClient", undefined);
+    },
+    language: function () {
+      return mw.config.get("wgUserLanguage");
+    },
+    domain: function () {
+      // It might be helpful to allow this to be configurable in future.
+      return mw.config.get("wgLakeusSearchHost", location.host);
+    },
+  },
+  props: {
+    autofocusInput: {
+      type: Boolean,
+      default: false,
+    },
+    action: {
+      type: String,
+      default: "",
+    },
+    /** The keyboard shortcut to focus search. */
+    searchAccessKey: {
+      type: String,
+    },
+    /** The access key informational tip for search. */
+    searchTitle: {
+      type: String,
+    },
+    /** The ghost text shown when no search query is entered. */
+    searchPlaceholder: {
+      type: String,
+    },
+    /**
+     * The search query string taken from the server-side rendered input immediately before
+     * client render.
+     */
+    searchQuery: {
+      type: String,
+    },
+    showThumbnail: {
+      type: Boolean,
+      default: true,
+    },
+    showDescription: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data: function () {
+    return {
+      // -1 here is the default "active suggestion index" defined in the
+      // `wvui-typeahead-search` component (see
+      // https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/c7af5d6d091ffb3beb4fd2723fdf50dc6bb2789b/src/components/typeahead-search/TypeaheadSearch.vue#167).
+    };
+  },
+  methods: {
+    /**
+     * @param {SubmitEvent} event
+     */
+    onSubmit: function (event) {},
+  },
+};
+</script>

resources/skins.lakeus.search/skins.lakeus.search.js

@@ -0,0 +1,48 @@
+/** @module search */
+var Vue = require("vue").default || require("vue"),
+  App = require("./App.vue"),
+  config = require("./config.json");
+/**
+ * @param {HTMLElement} searchForm
+ * @param {HTMLInputElement} search
+ * @return {void}
+ */
+function initApp(searchForm, search) {
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: searchForm,
+    /**
+     *
+     * @param {Function} createElement
+     * @return {Vue.VNode}
+     */
+    render: function (createElement) {
+      return createElement(App, {
+        props: $.extend(
+          {
+            autofocusInput: search === document.activeElement,
+            action: searchForm.getAttribute("action"),
+            searchAccessKey: search.getAttribute("accessKey"),
+            searchTitle: search.getAttribute("title"),
+            searchPlaceholder: search.getAttribute("placeholder"),
+            searchQuery: search.value,
+          },
+          // Pass additional config from server.
+          config
+        ),
+      });
+    },
+  });
+}
+/**
+ * @param {Document} document
+ * @return {void}
+ */
+function main(document) {
+  var searchForm = /** @type {HTMLElement} */ (document.querySelector("#searchform")),
+    search = /** @type {HTMLInputElement|null} */ (document.getElementById("searchInput"));
+  if (search && searchForm) {
+    initApp(searchForm, search);
+  }
+}
+main(document);

skin.json

@@ -240,7 +240,8 @@
 					],
 					"scripts": [
 						"skins.lakeus",
-						"skins.lakeus.designer"
+						"skins.lakeus.designer",
+						"skins.lakeus.search"
 					],
 					"messages": [
 						"sitetitle",
@@ -265,6 +266,12 @@
 			"value": true,
 			"description": "Whether to show the link to the repository or not."
 		},
+		"LakeusWvuiSearchOptions": {
+			"value": {
+				"showThumbnail": true,
+				"showDescription": true
+			}
+		},
 		"LakeusSiteNoticeHasBorder": {
 			"value": false,
 			"description": "Whether to add a border to site notice. Useful for plain text notices."