Add browse when no queries are entered (#34)

* Add customization in Vue playground

* Add browse

* Add placeholderSearch option

* Add documentation about placeholderSearch

* Update tests

Author: curquiza

README.md

@@ -53,7 +53,8 @@ const searchClient = instantMeiliSearch(
   "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25",
   {
     hitsPerPage: 6, // default: 10
-    limitPerRequest: 30 // default: 50
+    limitPerRequest: 30, // default: 50
+    placeholderSearch: false // default: true. Displays documents even when the query is empty.
   }
 );
 ```

examples/express/tests/client.test.js

@@ -5,7 +5,7 @@ describe('Instant MeiliSearch Browser test', () => {
 
   it('Should have generated a instant-meiisearch client and displayed', async () => {
     await expect(page).toMatch(
-      '{"client":{"cancelTokenSource":{"token":{"promise":{}}},"config":{"host":"http://localhost:7700","apiKey":"masterKey"}},"hitsPerPage":10,"limitPerRequest":50,"attributesToHighlight":["*"]}'
+      '{"client":{"cancelTokenSource":{"token":{"promise":{}}},"config":{"host":"http://localhost:7700","apiKey":"masterKey"}},"hitsPerPage":10,"limitPerRequest":50,"attributesToHighlight":["*"],"placeholderSearch":true}'
     )
   })
 })

playgrounds/vue/src/App.vue

@@ -40,7 +40,7 @@
             </template>
           </ais-hits>
 
-          <ais-pagination/>
+          <ais-pagination :padding="4" />
         </div>
       </ais-instant-search>
     </div>
@@ -56,7 +56,11 @@ export default {
     return {
       searchClient: instantMeiliSearch(
         "https://demos.meilisearch.com",
-        "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25"
+        "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25",
+        {
+          hitsPerPage: 6,
+          limitPerRequest: 100
+        }
       )
     };
   }

src/index.js

@@ -7,10 +7,11 @@ export default function instantMeiliSearch(hostUrl, apiKey, options = {}) {
     hitsPerPage: options.hitsPerPage || 10,
     limitPerRequest: options.limitPerRequest || 50,
     attributesToHighlight: ['*'],
+    placeholderSearch: options.placeholderSearch !== false, // true by default
 
     transformToMeiliSearchParams: function (params) {
       const searchInput = {
-        q: params.query,
+        q: this.placeholderSearch && params.query === '' ? null : params.query,
         facetsDistribution: params.facets.length ? params.facets : undefined,
         facetFilters: params.facetFilters,
         attributesToHighlight: this.attributesToHighlight,