Vue-instantsearch: Add showMore feature to RefinementList widget (for parity with InstantSearch.js)

[timkelty]

RefinementList is missing the showMore feature from InstantSearch.js:
https://community.algolia.com/instantsearch.js/v2/widgets/refinementList.html#struct-RefinementListWidgetOptions-showMore

/cc @kswedberg

[Haroenv]

v2 will have this feature, but as a workaround, you can do the following:

<template>
  <div>
    <ais-refinement-list 
      :limit="actualLimit"
      :attributeName="attributeName"
      :operator="operator"
      :sortBy="sortBy"
    ></ais-refinement-list>
    <button @click="toggleShowMore">show {{isShowingMore ? 'less' : 'more'}}</button>
  </div>
</template>

<script>
import { FACET_OR, FACET_AND } from "vue-instantsearch";

export default {
  props: {
    attributeName: {
      type: String,
      required: true
    },
    operator: {
      type: String,
      default: FACET_OR,
      validator(rawValue) {
        const value = rawValue.toLowerCase();
        return value === FACET_OR || value === FACET_AND;
      }
    },
    limit: {
      type: Number,
      default: 10
    },
    showMoreLimit: {
      type: Number,
      default: 15
    },
    sortBy: {
      default() {
        return ["isRefined:desc", "count:desc", "name:asc"];
      }
    }
  },
  data() {
    return {
      isShowingMore: false
    };
  },
  computed: {
    actualLimit() {
      return this.isShowingMore ? this.showMoreLimit : this.limit;
    }
  },
  methods: {
    toggleShowMore() {
      this.isShowingMore = !this.isShowingMore;
      console.log(this.isShowingMore);
    }
  }
};
</script>

Here's a sandbox showing it: https://codesandbox.io/s/5k6oqrry3l

[timkelty]

Thanks @Haroenv!

[kswedberg]

@Haroenv , thanks! That's pretty much what I did, too. The one thing I missed, though, is conditionally hiding the "show more/less" button if the total number of items in the refinement list is less than or equal to limit. A button would have no effect and be potentially confusing to the user since there would not be any more items to show. Is there any way we can access the total number of items in the list?

thanks again

[Haroenv]

Ah, that's a good point. You can edit the component I had to instead copy the contents of RefinementList here in this repository, get the length of this.facetValues https://github.com/algolia/vue-instantsearch/blob/master/src/components/RefinementList.vue

[kswedberg]

Awesome, thanks!