diff --git a/resources/skins.vector.search/skins.vector.search.js b/resources/skins.vector.search/skins.vector.search.js index dc7fcd2..e614d11 100644 --- a/resources/skins.vector.search/skins.vector.search.js +++ b/resources/skins.vector.search/skins.vector.search.js @@ -1,17 +1,15 @@ /** @module search */ + var Vue = require( 'vue' ).default || require( 'vue' ), App = require( './App.vue' ), config = require( './config.json' ); /** - * @param {Function} createElement * @param {Element} searchForm - * @return {Vue.VNode} - * @throws {Error} if the searchForm does not - * contain input[name=title] and input[name="search"] elements. + * @return {void} */ -function renderFn( createElement, searchForm ) { +function initApp( searchForm ) { var titleInput = /** @type {HTMLInputElement|null} */ ( searchForm.querySelector( 'input[name=title]' ) @@ -23,8 +21,9 @@ function renderFn( createElement, searchForm ) { throw new Error( 'Attempted to create Vue search element from an incompatible element.' ); } - return createElement( App, { - props: $.extend( { + // @ts-ignore + Vue.createMwApp( + App, $.extend( { id: searchForm.id, autofocusInput: search === document.activeElement, action: searchForm.getAttribute( 'action' ), @@ -33,27 +32,10 @@ function renderFn( createElement, searchForm ) { searchTitle: search.getAttribute( 'title' ), searchPlaceholder: search.getAttribute( 'placeholder' ), searchQuery: search.value - }, // Pass additional config from server. - config - ) - } ); -} - -/** - * @param {NodeList} searchForms - * @return {void} - */ -function initApp( searchForms ) { - searchForms.forEach( function ( searchForm ) { - // eslint-disable-next-line no-new - new Vue( { - el: /** @type {Element} */ ( searchForm ), - render: function ( createElement ) { - return renderFn( createElement, /** @type {Element} */ ( searchForm ) ); - } - } ); - } ); + }, config ) + ) + .mount( searchForm ); } /** * @param {Document} document @@ -63,6 +45,8 @@ function main( document ) { var searchForms = document.querySelectorAll( '.vector-search-box-form' ); - initApp( searchForms ); + searchForms.forEach( function ( searchForm ) { + initApp( searchForm ); + } ); } main( document );