feat(Menu): add widget

docs/src/components/menu.md

@@ -23,28 +23,25 @@ Create a menu based on a facet. A menu displays a list of facet values and let t
 
 Name | Type | Default | Description | Required
 ---|---|---|---|---
-attribute | String | | The attribute | yes
-limit | Number | 10 | Number of items to show
-showMoreLimit | Number | 20 | Number of items to show when the user clicked on "show more items"
-showMore | Boolean | `false` | Whether or not to have the option to load more values
-sortBy | Array(string) or function | `['isRefined:desc', 'count:desc', 'name:asc']` | array or function to sort the results by
+attribute | string | - | The attribute | Yes
+limit | number | 10 | Number of items to show | -
+showMoreLimit | number | 20 | Number of items to show when the user clicked on "show more" | -
+showMore | boolean | `false` | Whether or not to have the option to load more values | -
+sortBy | string[] or function | `['name:asc', 'count:desc']` | Array or function to sort the results by | -
 
 ## CSS classes
 
-Here's a list of CSS classes exposed by this widget. To better understand the underlying
-DOM structure, have a look at the generated DOM in your browser.
+Here's a list of CSS classes exposed by this widget. To better understand the underlying DOM structure, have a look at the generated DOM in your browser.
 
 Class name | Description
 ---|---
 `.ais-Menu` | the root div of the widget
 `.ais-Menu--noRefinement` | the root div of the widget with no refinement
-`.ais-Menu-searchBox` | the search box of the widget
 `.ais-Menu-list` | the list of all menu items
 `.ais-Menu-item` | the menu list item
 `.ais-Menu-item--selected` | the selected menu list item
 `.ais-Menu-link` | the clickable menu element
 `.ais-Menu-label` | the label of each item
 `.ais-Menu-count` | the count of values for each item
-`.ais-Menu-noResults` | the div displayed when there are no results
 `.ais-Menu-showMore` | the button used to display more categories
 `.ais-Menu-showMore--disabled` | the disabled button used to display more categories

src/components/Menu.vue

@@ -1,20 +1,22 @@
 <template>
-  <div :class="suit()" v-if="state">
+  <div
+    v-if="state"
+    :class="[suit(''), !state.canRefine && suit('', 'noRefinement')]"
+  >
     <slot
-      :items="items"
-      :createURL="createURL"
-      :refine="refine"
-      :canRefine="canRefine"
-      :widgetParams="widgetParams"
-      :isShowingMore="isShowingMore"
-      :toggleShowMore="toggleShowMore"
-      :canToggleShowMore="canToggleShowMore"
+      :items="state.items"
+      :can-refine="state.canRefine"
+      :can-toggle-show-more="state.canToggleShowMore"
+      :is-showing-more="state.isShowingMore"
+      :refine="state.refine"
+      :create-URL="state.createURL"
+      :toggle-show-more="state.toggleShowMore"
     >
       <ul :class="suit('list')">
         <li
           v-for="item in state.items"
-          :class="item.isRefined ? suit('item', 'active') : suit('item')"
           :key="item.value"
+          :class="[suit('item'), item.isRefined && suit('item', 'selected')]"
         >
           <a
             :href="state.createURL(item.value)"
@@ -28,19 +30,23 @@
       </ul>
 
       <button
-        v-if="showMore && state.canToggleShowMore"
+        v-if="showShowMoreButton"
+        :class="[suit('showMore'), !state.canToggleShowMore && suit('showMore', 'disabled')]"
+        :disabled="!state.canToggleShowMore"
         @click.prevent="state.toggleShowMore()"
-        :class="state.canToggleShowMore ? suit('showMore') : suit('showMore', 'disabled')"
       >
-        {{state.isShowingMore ? showLessLabel : showMoreLabel}}
+        <slot name="showMoreLabel" :is-showing-more="state.isShowingMore">
+          {{state.isShowingMore ? 'Show less' : 'Show more'}}
+        </slot>
       </button>
     </slot>
   </div>
 </template>
 
 <script>
-import algoliaComponent from '../component';
+import isFunction from 'lodash/isFunction';
 import { connectMenu } from 'instantsearch.js/es/connectors';
+import algoliaComponent from '../component';
 
 export default {
   mixins: [algoliaComponent],
@@ -49,35 +55,40 @@ export default {
       type: String,
       required: true,
     },
+    // @TODO
+    // searchable: {
+    //   type: Boolean,
+    //   default: false,
+    // },
     limit: {
       type: Number,
       default: 10,
     },
+    showMoreLimit: {
+      type: Number,
+      default: 20,
+    },
     showMore: {
       type: Boolean,
       default: false,
     },
-    showMoreLimit: {
-      type: Number,
-    },
     sortBy: {
       default() {
-        return ['isRefined:desc', 'count:desc', 'name:asc'];
+        return ['name:asc', 'count:desc'];
       },
-    },
-    showMoreLabel: {
-      type: String,
-      default() {
-        return 'Show more';
-      },
-    },
-    showLessLabel: {
-      type: String,
-      default() {
-        return 'Show less';
+      validator(value) {
+        return Array.isArray(value) || isFunction(value);
       },
     },
   },
+  beforeCreate() {
+    this.connector = connectMenu;
+  },
+  data() {
+    return {
+      widgetName: 'Menu',
+    };
+  },
   computed: {
     widgetParams() {
       return {
@@ -87,13 +98,8 @@ export default {
         sortBy: this.sortBy,
       };
     },
-  },
-  data() {
-    return {
-      widgetName: 'Menu',
-    };
-  },
-  beforeCreate() {
-    this.connector = connectMenu;
+    showShowMoreButton() {
+      return this.state.canRefine && this.showMore;
+    },
   },
 };</script>