feat(widgets): add Menu widget

src/components/Menu.vue

@@ -0,0 +1,90 @@
+<script>
+  import algoliaComponent from '../component';
+  import {FACET_TREE} from '../store';
+
+  export default {
+    mixins: [algoliaComponent],
+
+    props: {
+      attribute: {
+        type: String,
+      },
+      limit: {
+        type: Number,
+        default: 10
+      },
+      sortBy: {
+        default() {
+          return ['name:asc']
+        }
+      }
+    },
+
+    computed: {
+      facetValues() {
+        const {data = []} = this.searchStore.getFacetValues(
+          this.attribute,
+          this.sortBy
+        );
+
+        return data;
+      }
+    },
+
+    methods: {
+      handleClick(event, path) {
+        event.preventDefault();
+        this.searchStore.toggleFacetRefinement(this.attribute, path);
+      }
+    },
+
+    data() {
+      return {
+        blockClassName: 'ais-menu',
+      };
+    },
+
+    created() {
+      this.searchStore.addFacet({
+        name: this.attribute,
+        attributes: [this.attribute]
+      }, FACET_TREE);
+    },
+
+    destroyed() {
+      this.searchStore.removeFacet(this.attribute);
+    },
+
+    render(h) {
+      if (this.show === false) return undefined;
+
+      const children = [];
+      if (this.$slots.header) children.push(this.$slots.header);
+
+      children.push(this.facetValues.map(({name, path, count, isRefined}) => (
+        h(
+          'div',
+          { class: [this.bem('item'), isRefined ? this.bem('item', 'active') : ''] },
+          [
+            h(
+              'a',
+              {
+                class: this.bem('link'),
+                domProps: { href: '#' },
+                on: { click: (event) => this.handleClick(event, path) }
+              },
+              [
+                name,
+                h('span', {class: this.bem('count')}, count)
+              ]
+            )
+          ]
+        )
+      )));
+
+      if (this.$slots.footer) children.push(this.$slots.footer);
+
+      return h('div', { class: this.bem() }, children);
+    }
+  }
+</script>

src/instantsearch.js

@@ -19,6 +19,7 @@ import Stats from './components/Stats.vue';
 import Pagination from './components/Pagination.vue';
 import ResultsPerPageSelector from './components/ResultsPerPageSelector.vue';
 import TreeMenu from './components/TreeMenu.vue';
+import Menu from './components/Menu.vue';
 import SortBySelector from './components/SortBySelector.vue';
 import SearchBox from './components/SearchBox.vue';
 import Clear from './components/Clear.vue';
@@ -38,6 +39,7 @@ const InstantSearch = {
   Pagination,
   ResultsPerPageSelector,
   TreeMenu,
+  Menu,
   SortBySelector,
   SearchBox,
   Clear,
@@ -57,6 +59,7 @@ const InstantSearch = {
     Vue.component('ais-pagination', Pagination);
     Vue.component('ais-results-per-page-selector', ResultsPerPageSelector);
     Vue.component('ais-tree-menu', TreeMenu);
+    Vue.component('ais-menu', Menu);
     Vue.component('ais-sort-by-selector', SortBySelector);
     Vue.component('ais-search-box', SearchBox);
     Vue.component('ais-clear', Clear);
@@ -88,6 +91,7 @@ export {
   Pagination,
   ResultsPerPageSelector,
   TreeMenu,
+  Menu,
   SortBySelector,
   SearchBox,
   Clear,