vue-instantsearch 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+# [4.5.0](https://github.com/algolia/vue-instantsearch/compare/v4.4.2...v4.5.0) (2022-09-07)
+
+
+### Bug Fixes
+
+* **nuxt:** only write $nuxt if it's writable ([#1117](https://github.com/algolia/vue-instantsearch/issues/1117)) ([bdecca9](https://github.com/algolia/vue-instantsearch/commit/bdecca9334322e9405ca21e6c6d51735d3ec042f)), closes [/github.com/algolia/vue-instantsearch/commit/acda29326475bd1b73f12b058a0c02df00b8b239#commitcomment-67430759](https://github.com//github.com/algolia/vue-instantsearch/commit/acda29326475bd1b73f12b058a0c02df00b8b239/issues/commitcomment-67430759)
+
+
+### Features
+
+* **can-refine:** provide `canRefine` for multiple widget slots ([#1141](https://github.com/algolia/vue-instantsearch/issues/1141)) ([424316d](https://github.com/algolia/vue-instantsearch/commit/424316d8c6e23d4573c0d6a63c56ef919da864e1))
+
+
+
+## [4.4.2](https://github.com/algolia/vue-instantsearch/compare/v4.4.1...v4.4.2) (2022-07-25)
+
+
+### Bug Fixes
+
+* **SearchBox:** forward missing prop queryHook ([#1136](https://github.com/algolia/vue-instantsearch/issues/1136)) ([7f8754d](https://github.com/algolia/vue-instantsearch/commit/7f8754dad73542c976b5218bda9a2db0c21c36a1))
+* **VoiceSearch:** forward missing props language and additionalQueryParameters ([#1136](https://github.com/algolia/vue-instantsearch/issues/1136)) ([7f8754d](https://github.com/algolia/vue-instantsearch/commit/7f8754dad73542c976b5218bda9a2db0c21c36a1)), closes [#1135](https://github.com/algolia/vue-instantsearch/issues/1135)
+
+
+
+## [4.4.1](https://github.com/algolia/vue-instantsearch/compare/v4.4.0...v4.4.1) (2022-07-19)
+
+
+### Bug Fixes
+
+* **searchbox:** prevent concurrent query updates from state while input is focused ([#1133](https://github.com/algolia/vue-instantsearch/issues/1133)) ([c468c0a](https://github.com/algolia/vue-instantsearch/commit/c468c0aee633358f3fb64e41d7aa73b14b344fd2))
+
+
+
 # [4.4.0](https://github.com/algolia/vue-instantsearch/compare/v4.3.3...v4.4.0) (2022-06-28)
 
 

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "files": [
     "vue2",
     "vue3",
@@ -46,7 +46,7 @@
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "instantsearch.js": "^4.43.0",
+    "instantsearch.js": "^4.45.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -133,11 +133,11 @@
   "bundlesize": [
     {
       "path": "./vue2/umd/index.js",
-      "maxSize": "56.50 kB"
+      "maxSize": "56.75 kB"
     },
     {
       "path": "./vue3/umd/index.js",
-      "maxSize": "57.75 kB"
+      "maxSize": "58.00 kB"
     },
     {
       "path": "./vue2/cjs/index.js",

package/src/components/Breadcrumb.vue

@@ -64,9 +64,7 @@ export default {
         $$widgetType: 'ais.breadcrumb',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
     createSuitMixin({ name: 'Breadcrumb' }),
   ],
   props: {

package/src/components/ClearRefinements.vue

@@ -37,9 +37,7 @@ export default {
         $$widgetType: 'ais.clearRefinements',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.hasRefinements),
-    }),
+    createPanelConsumerMixin(),
     createSuitMixin({ name: 'ClearRefinements' }),
   ],
   props: {

package/src/components/CurrentRefinements.vue

@@ -71,10 +71,7 @@ export default {
         $$widgetType: 'ais.currentRefinements',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state =>
-        Boolean(state.items) && state.items.length > 0,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     includedAttributes: {

package/src/components/HierarchicalMenu.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :items="state.items"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :can-toggle-show-more="state.canToggleShowMore"
       :is-showing-more="state.isShowingMore"
       :refine="state.refine"
@@ -46,9 +46,6 @@ import { createPanelConsumerMixin } from '../mixins/panel';
 import HierarchicalMenuList from './HierarchicalMenuList.vue';
 import { createSuitMixin } from '../mixins/suit';
 
-const mapStateToCanRefine = state =>
-  Boolean(state.items) && state.items.length > 0;
-
 export default {
   name: 'AisHierarchicalMenu',
   mixins: [
@@ -61,9 +58,7 @@ export default {
         $$widgetType: 'ais.hierarchicalMenu',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine,
-    }),
+    createPanelConsumerMixin(),
   ],
   components: {
     HierarchicalMenuList,
@@ -120,9 +115,6 @@ export default {
         transformItems: this.transformItems,
       };
     },
-    canRefine() {
-      return mapStateToCanRefine(this.state);
-    },
   },
 };
 </script>

package/src/components/HitsPerPage.vue

@@ -7,6 +7,7 @@
       :items="state.items"
       :refine="state.refine"
       :hasNoResults="state.hasNoResults"
+      :canRefine="state.canRefine"
     >
       <select
         :class="suit('select')"
@@ -42,9 +43,7 @@ export default {
         $$widgetType: 'ais.hitsPerPage',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     items: {

package/src/components/Menu.vue

@@ -61,9 +61,7 @@ export default {
         $$widgetType: 'ais.menu',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

package/src/components/MenuSelect.vue

@@ -53,9 +53,7 @@ export default {
         $$widgetType: 'ais.menuSelect',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

package/src/components/NumericMenu.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :items="state.items"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :refine="state.refine"
       :createURL="state.createURL"
       :send-event="state.sendEvent"
@@ -51,9 +51,7 @@ export default {
       }
     ),
     createSuitMixin({ name: 'NumericMenu' }),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {
@@ -77,9 +75,6 @@ export default {
         items: this.items,
       };
     },
-    canRefine() {
-      return !this.state.hasNoResults;
-    },
   },
 };
 </script>

package/src/components/Pagination.vue

@@ -183,9 +183,7 @@ export default {
         $$widgetType: 'ais.pagination',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.nbPages > 1,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     padding: {

package/src/components/RangeInput.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :current-refinement="values"
       :refine="refine"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :range="state.range"
       :send-event="state.sendEvent"
     >
@@ -60,9 +60,6 @@ import { createWidgetMixin } from '../mixins/widget';
 import { createPanelConsumerMixin } from '../mixins/panel';
 import { createSuitMixin } from '../mixins/suit';
 
-const mapStateToCanRefine = state =>
-  state && Boolean(state.range) && state.range.min !== state.range.max;
-
 export default {
   name: 'AisRangeInput',
   mixins: [
@@ -75,9 +72,7 @@ export default {
         $$widgetType: 'ais.rangeInput',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {
@@ -119,9 +114,6 @@ export default {
         precision: this.precision,
       };
     },
-    canRefine() {
-      return mapStateToCanRefine(this.state);
-    },
     step() {
       return 1 / Math.pow(10, this.precision);
     },

package/src/components/RatingMenu.vue

@@ -8,6 +8,7 @@
       :refine="state.refine"
       :createURL="state.createURL"
       :send-event="state.sendEvent"
+      :can-refine="state.canRefine"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -95,9 +96,7 @@ export default {
         $$widgetType: 'ais.ratingMenu',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

package/src/components/RefinementList.vue

@@ -118,9 +118,7 @@ export default {
         $$widgetType: 'ais.refinementList',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

package/src/components/SearchBox.vue

@@ -20,6 +20,7 @@
         :reset-title="resetTitle"
         :class-names="classNames"
         v-model="currentRefinement"
+        ref="searchInput"
       >
         <template
           v-slot:loading-indicator
@@ -119,6 +120,10 @@ export default {
       type: String,
       default: undefined,
     },
+    queryHook: {
+      type: Function,
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -128,6 +133,11 @@ export default {
     };
   },
   computed: {
+    widgetParams() {
+      return {
+        queryHook: this.queryHook,
+      };
+    },
     isControlled() {
       return (
         typeof this.value !== 'undefined' ||
@@ -148,6 +158,14 @@ export default {
           this.$emit('update:modelValue', this.model);
           this.state.refine(this.model);
         }
+
+        // we return the local value if the input is focused to avoid
+        // concurrent updates when typing
+        const { searchInput } = this.$refs;
+        if (searchInput && searchInput.isFocused()) {
+          return this.localValue;
+        }
+
         return this.model || this.state.query || '';
       },
       set(val) {

package/src/components/SearchInput.vue

@@ -170,6 +170,9 @@ export default {
     };
   },
   methods: {
+    isFocused() {
+      return document.activeElement === this.$refs.input;
+    },
     onFormSubmit() {
       const input = this.$refs.input;
       input.blur();

package/src/components/SortBy.vue

@@ -8,6 +8,7 @@
       :has-no-results="state.hasNoResults"
       :refine="state.refine"
       :current-refinement="state.currentRefinement"
+      :can-refine="state.canRefine"
     >
       <select
         :class="suit('select')"
@@ -42,9 +43,7 @@ export default {
       }
     ),
 
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     items: {

package/src/components/ToggleRefinement.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :value="state.value"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :refine="state.refine"
       :createURL="state.createURL"
       :send-event="state.sendEvent"
@@ -35,8 +35,6 @@ import { createWidgetMixin } from '../mixins/widget';
 import { createPanelConsumerMixin } from '../mixins/panel';
 import { createSuitMixin } from '../mixins/suit';
 
-const mapStateToCanRefine = state => Boolean(state.value && state.value.count);
-
 export default {
   name: 'AisToggleRefinement',
   mixins: [
@@ -49,9 +47,7 @@ export default {
         $$widgetType: 'ais.toggleRefinement',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {
@@ -82,9 +78,6 @@ export default {
         off: this.off,
       };
     },
-    canRefine() {
-      return mapStateToCanRefine(this.state);
-    },
   },
 };
 </script>

package/src/components/VoiceSearch.vue

@@ -100,6 +100,14 @@ export default {
       required: false,
       default: undefined,
     },
+    language: {
+      type: String,
+      default: undefined,
+    },
+    additionalQueryParameters: {
+      type: Object,
+      default: undefined,
+    },
     buttonTitle: {
       type: String,
       required: false,
@@ -130,6 +138,8 @@ export default {
     widgetParams() {
       return {
         searchAsYouSpeak: this.searchAsYouSpeak,
+        language: this.language,
+        additionalQueryParameters: this.additionalQueryParameters,
       };
     },
     errorNotAllowed() {

package/src/components/__tests__/Breadcrumb.js

@@ -182,31 +182,6 @@ describe('default render', () => {
   });
 });
 
-describe('panel', () => {
-  it('calls the Panel mixin with `canRefine`', async () => {
-    __setState({ ...defaultState });
-
-    const wrapper = mount(Breadcrumb, {
-      propsData: defaultProps,
-    });
-
-    const mapStateToCanRefine = () =>
-      wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-    expect(mapStateToCanRefine()).toBe(true);
-
-    await wrapper.setData({
-      state: {
-        canRefine: false,
-      },
-    });
-
-    expect(mapStateToCanRefine()).toBe(false);
-
-    expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-  });
-});
-
 describe('custom default render', () => {
   const defaultSlot = `
     <template v-slot="{ items, canRefine, refine, createURL }">

package/src/components/__tests__/ClearRefinements.js

@@ -187,26 +187,3 @@ describe('custom resetLabel render', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 });
-
-it('calls the Panel mixin with `hasRefinement`', async () => {
-  __setState({
-    hasRefinements: true,
-  });
-
-  const wrapper = mount(ClearRefinements);
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      hasRefinements: false,
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});

package/src/components/__tests__/CurrentRefinements.js

@@ -167,23 +167,6 @@ describe.each([
   });
 });
 
-it('calls the Panel mixin with `canRefine`', async () => {
-  __setState({ items: [{}] });
-
-  const wrapper = mount(CurrentRefinements);
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({ state: { items: [] } });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('calls `refine` with a refinement', async () => {
   const spies = [jest.fn(), jest.fn()];
 

package/src/components/__tests__/HierarchicalMenu.js

@@ -116,6 +116,7 @@ const defaultState = {
   createURL: () => {},
   isShowingMore: false,
   canToggleShowMore: true,
+  canRefine: true,
   toggleShowMore: () => {},
   sendEvent: () => {},
 };
@@ -266,6 +267,7 @@ describe('default render', () => {
     __setState({
       ...defaultState,
       items: [],
+      canRefine: false,
     });
 
     const wrapper = mount(HierarchicalMenu, {
@@ -466,25 +468,6 @@ describe('default render', () => {
   });
 });
 
-it('calls the Panel mixin with `items.length`', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(HierarchicalMenu, {
-    propsData: defaultProps,
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({ state: { items: [] } });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({
@@ -574,6 +557,7 @@ describe('custom default render', () => {
     __setState({
       ...defaultState,
       items: [],
+      canRefine: false,
     });
 
     const wrapper = mount({

package/src/components/__tests__/HitsPerPage.js

@@ -76,29 +76,3 @@ it('calls `refine` with the `value` on `change`', async () => {
 
   expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith(20);
 });
-
-it('calls the Panel mixin with `hasNoResults`', async () => {
-  __setState({
-    ...defaultState,
-    hasNoResults: false,
-  });
-
-  const wrapper = mount(HitsPerPage, {
-    propsData: defaultProps,
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      hasNoResults: true,
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});

package/src/components/__tests__/Menu.js

@@ -325,28 +325,6 @@ describe('default render', () => {
   });
 });
 
-it('calls the Panel mixin with `canRefine`', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(Menu, {
-    propsData: defaultProps,
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      canRefine: false,
-    },
-  });
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({