vue-instantsearch 4.14.0 → 4.15.0

package/src/components/__tests__/RefinementList.js

@@ -1,199 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import { mount } from '../../../test/utils';
-import { __setState } from '../../mixins/widget';
-import RefinementList from '../RefinementList.vue';
-import '../../../test/utils/sortedHtmlSerializer';
-
-jest.unmock('instantsearch.js/es');
-jest.mock('../../mixins/widget');
-jest.mock('../../mixins/panel');
-
-const defaultState = {
-  items: [
-    {
-      value: 'yo',
-      label: 'yo',
-      highlighted: 'y<mark>o</mark>',
-      isRefined: false,
-      count: 20,
-    },
-    {
-      value: 'how',
-      label: 'how',
-      highlighted: 'how',
-      isRefined: false,
-      count: 10,
-    },
-    {
-      value: 'are',
-      label: 'are',
-      highlighted: 'are',
-      isRefined: false,
-      count: 8,
-    },
-    {
-      value: 'you',
-      label: 'you',
-      highlighted: 'you',
-      isRefined: false,
-      count: 9,
-    },
-    {
-      value: 'doing',
-      label: 'doing',
-      highlighted: 'doing',
-      isRefined: false,
-      count: 100,
-    },
-    { value: '?', label: '?', highlighted: '?', isRefined: false, count: 0 },
-  ],
-  canRefine: true,
-};
-
-it('renders correctly', () => {
-  __setState({
-    ...defaultState,
-  });
-  const wrapper = mount(RefinementList, {
-    propsData: {
-      attribute: 'something',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-it('renders correctly (empty)', () => {
-  __setState({
-    items: [],
-  });
-  const wrapper = mount(RefinementList, {
-    propsData: {
-      attribute: 'something',
-    },
-  });
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-it("renders correctly when it's searchable", () => {
-  __setState({
-    ...defaultState,
-  });
-  const wrapper = mount(RefinementList, {
-    propsData: {
-      searchable: true,
-      attribute: 'something',
-    },
-  });
-  expect(wrapper.htmlCompat()).toMatchSnapshot();
-
-  expect(wrapper.find('.ais-SearchBox-input').exists()).toBe(true);
-});
-
-it("allows override of placeholder when it's searchable", () => {
-  __setState({
-    ...defaultState,
-    searchable: true,
-  });
-  const placeholder = 'search in dogs';
-  const wrapper = mount(RefinementList, {
-    propsData: {
-      searchable: true,
-      attribute: 'something',
-      searchablePlaceholder: placeholder,
-    },
-  });
-
-  expect(wrapper.find('.ais-SearchBox-input').attributes('placeholder')).toBe(
-    placeholder
-  );
-});
-
-it("allows search bar classes override when it's searchable", () => {
-  __setState({
-    ...defaultState,
-  });
-  const wrapper = mount(RefinementList, {
-    propsData: {
-      searchable: true,
-      attribute: 'something',
-      classNames: {
-        'ais-SearchBox-form': 'moar-classes',
-      },
-    },
-  });
-  expect(wrapper.htmlCompat()).toMatchSnapshot();
-
-  expect(wrapper.find('.ais-SearchBox-form').classes('moar-classes')).toBe(
-    true
-  );
-});
-
-it("disables show more if can't refine", async () => {
-  __setState({
-    ...defaultState,
-    canToggleShowMore: false,
-  });
-  const wrapper = mount(RefinementList, {
-    propsData: {
-      attribute: 'something',
-      showMore: true,
-    },
-  });
-
-  const showMore = wrapper.find('.ais-RefinementList-showMore');
-
-  expect(showMore).vueToBeDisabled();
-  expect(showMore.classes()).toContain('ais-RefinementList-showMore--disabled');
-
-  await wrapper.setData({ state: { canToggleShowMore: true } });
-  expect(showMore).not.vueToBeDisabled();
-  expect(showMore.classes()).not.toContain(
-    'ais-RefinementList-showMore--disabled'
-  );
-});
-
-it('behaves correctly', async () => {
-  __setState({
-    ...defaultState,
-    refine: jest.fn(),
-  });
-  const wrapper = mount(RefinementList, {
-    propsData: {
-      attribute: 'something',
-    },
-  });
-  const checkBox = wrapper.find('input[type="checkbox"]');
-  await checkBox.setChecked();
-  expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith('yo');
-});
-
-it('exposes send-event method for insights middleware', async () => {
-  const sendEvent = jest.fn();
-  __setState({
-    ...defaultState,
-    sendEvent,
-  });
-
-  const wrapper = mount({
-    components: { RefinementList },
-    data() {
-      return { props: { attribute: 'something' } };
-    },
-    template: `
-      <RefinementList v-bind="props">
-        <template v-slot="{ sendEvent }">
-          <div>
-            <button @click="sendEvent()">Send Event</button>
-          </div>
-        </template>
-      </RefinementList>
-    `,
-  });
-
-  await wrapper.find('button').trigger('click');
-  expect(sendEvent).toHaveBeenCalledTimes(1);
-});

package/src/components/__tests__/__snapshots__/RefinementList.js.snap

@@ -1,405 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`allows search bar classes override when it's searchable 1`] = `
-<div class="ais-RefinementList">
-  <div class="ais-RefinementList-searchBox">
-    <form action
-          class="ais-SearchBox-form moar-classes"
-          novalidate="novalidate"
-          role="search"
-    >
-      <input aria-label="Search"
-             autocapitalize="off"
-             autocomplete="off"
-             autocorrect="off"
-             class="ais-SearchBox-input"
-             maxlength="512"
-             placeholder="Search here…"
-             spellcheck="false"
-             type="search"
-      >
-      <button class="ais-SearchBox-submit"
-              title="Search"
-              type="submit"
-      >
-        <svg aria-hidden="true"
-             class="ais-SearchBox-submitIcon"
-             height="10"
-             viewbox="0 0 40 40"
-             width="10"
-        >
-          <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z">
-          </path>
-        </svg>
-      </button>
-      <button class="ais-SearchBox-reset"
-              hidden="hidden"
-              title="Clear"
-              type="reset"
-      >
-        <svg aria-hidden="true"
-             class="ais-SearchBox-resetIcon"
-             height="10"
-             viewbox="0 0 20 20"
-             width="10"
-        >
-          <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z">
-          </path>
-        </svg>
-      </button>
-    </form>
-  </div>
-  <ul class="ais-RefinementList-list">
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="yo"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            y
-            <mark class="ais-Highlight-highlighted">
-              o
-            </mark>
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          20
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="how"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            how
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          10
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="are"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            are
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          8
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="you"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            you
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          9
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="doing"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            doing
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          100
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="?"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            ?
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          0
-        </span>
-      </label>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`renders correctly (empty) 1`] = `
-<div class="ais-RefinementList ais-RefinementList--noRefinement">
-  <ul class="ais-RefinementList-list">
-  </ul>
-</div>
-`;
-
-exports[`renders correctly 1`] = `
-<div class="ais-RefinementList">
-  <ul class="ais-RefinementList-list">
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="yo"
-        >
-        <span class="ais-RefinementList-labelText">
-          yo
-        </span>
-        <span class="ais-RefinementList-count">
-          20
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="how"
-        >
-        <span class="ais-RefinementList-labelText">
-          how
-        </span>
-        <span class="ais-RefinementList-count">
-          10
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="are"
-        >
-        <span class="ais-RefinementList-labelText">
-          are
-        </span>
-        <span class="ais-RefinementList-count">
-          8
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="you"
-        >
-        <span class="ais-RefinementList-labelText">
-          you
-        </span>
-        <span class="ais-RefinementList-count">
-          9
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="doing"
-        >
-        <span class="ais-RefinementList-labelText">
-          doing
-        </span>
-        <span class="ais-RefinementList-count">
-          100
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="?"
-        >
-        <span class="ais-RefinementList-labelText">
-          ?
-        </span>
-        <span class="ais-RefinementList-count">
-          0
-        </span>
-      </label>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`renders correctly when it's searchable 1`] = `
-<div class="ais-RefinementList">
-  <div class="ais-RefinementList-searchBox">
-    <form action
-          class="ais-SearchBox-form"
-          novalidate="novalidate"
-          role="search"
-    >
-      <input aria-label="Search"
-             autocapitalize="off"
-             autocomplete="off"
-             autocorrect="off"
-             class="ais-SearchBox-input"
-             maxlength="512"
-             placeholder="Search here…"
-             spellcheck="false"
-             type="search"
-      >
-      <button class="ais-SearchBox-submit"
-              title="Search"
-              type="submit"
-      >
-        <svg aria-hidden="true"
-             class="ais-SearchBox-submitIcon"
-             height="10"
-             viewbox="0 0 40 40"
-             width="10"
-        >
-          <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z">
-          </path>
-        </svg>
-      </button>
-      <button class="ais-SearchBox-reset"
-              hidden="hidden"
-              title="Clear"
-              type="reset"
-      >
-        <svg aria-hidden="true"
-             class="ais-SearchBox-resetIcon"
-             height="10"
-             viewbox="0 0 20 20"
-             width="10"
-        >
-          <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z">
-          </path>
-        </svg>
-      </button>
-    </form>
-  </div>
-  <ul class="ais-RefinementList-list">
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="yo"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            y
-            <mark class="ais-Highlight-highlighted">
-              o
-            </mark>
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          20
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="how"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            how
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          10
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="are"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            are
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          8
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="you"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            you
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          9
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="doing"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            doing
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          100
-        </span>
-      </label>
-    </li>
-    <li class="ais-RefinementList-item">
-      <label class="ais-RefinementList-label">
-        <input class="ais-RefinementList-checkbox"
-               type="checkbox"
-               value="?"
-        >
-        <span class="ais-RefinementList-labelText">
-          <span class="ais-Highlight">
-            ?
-          </span>
-        </span>
-        <span class="ais-RefinementList-count">
-          0
-        </span>
-      </label>
-    </li>
-  </ul>
-</div>
-`;

package/vue3/es/src/components/RefinementList.vue_vue&type=template&id=80c1baee&lang.js

@@ -1,2 +0,0 @@
-import{resolveComponent as e,openBlock as s,createElementBlock as t,normalizeClass as a,renderSlot as o,createVNode as l,createCommentVNode as r,createElementVNode as n,Fragment as i,renderList as c,toDisplayString as u,createTextVNode as h}from"vue";var g=["value","checked","onChange"],m=["disabled"];function d(d,f,w,M,S,b){var v=e("search-input"),F=e("ais-highlight");return d.state?(s(),t("div",{key:0,class:a([d.suit(),!d.state.canRefine&&d.suit("","noRefinement")])},[o(d.$slots,"default",{items:b.items,refine:b.refine,searchForItems:d.state.searchForItems,searchForItemsQuery:S.searchForFacetValuesQuery,toggleShowMore:b.toggleShowMore,canToggleShowMore:d.state.canToggleShowMore,isShowingMore:d.state.isShowingMore,createURL:d.state.createURL,isFromSearch:d.state.isFromSearch,canRefine:d.state.canRefine,sendEvent:d.state.sendEvent},function(){var e;return[w.searchable?(s(),t("div",{key:0,class:a(d.suit("searchBox"))},[l(v,{modelValue:b.searchForFacetValues,"onUpdate:modelValue":f[0]||(f[0]=function(e){return b.searchForFacetValues=e}),placeholder:w.searchablePlaceholder,"class-names":d.classNames},null,8,["modelValue","placeholder","class-names"])],2)):r("",!0),d.state.isFromSearch&&0===b.items.length?o(d.$slots,"noResults",{key:1,query:b.searchForFacetValues},function(){return[n("div",{class:a(d.suit("noResults"))},"No results.",2)]}):r("",!0),n("ul",{class:a(d.suit("list"))},[(s(!0),t(i,null,c(b.items,function(e){return s(),t("li",{class:a([d.suit("item"),e.isRefined&&d.suit("item","selected")]),key:e.value},[o(d.$slots,"item",{item:e,refine:b.refine,createURL:d.state.createURL},function(){return[n("label",{class:a(d.suit("label"))},[n("input",{class:a(d.suit("checkbox")),type:"checkbox",value:e.value,checked:e.isRefined,onChange:function(s){return b.refine(e.value)}},null,42,g),w.searchable?(s(),t("span",{key:0,class:a(d.suit("labelText"))},[l(F,{attribute:"item",hit:e},null,8,["hit"])],2)):(s(),t("span",{key:1,class:a(d.suit("labelText"))},u(e.label),3)),n("span",{class:a(d.suit("count"))},u(e.count),3)],2)]})],2)}),128))],2),w.showMore?(s(),t("button",{key:2,class:a([d.suit("showMore"),(e={},e[d.suit("showMore","disabled")]=!d.state.canToggleShowMore,e)]),onClick:f[1]||(f[1]=function(){for(var e=[],s=arguments.length;s--;)e[s]=arguments[s];return b.toggleShowMore&&b.toggleShowMore.apply(b,e)}),disabled:!d.state.canToggleShowMore},[o(d.$slots,"showMoreLabel",{isShowingMore:d.state.isShowingMore},function(){return[h(" Show "+u(d.state.isShowingMore?"less":"more"),1)]})],10,m)):r("",!0)]})],2)):r("",!0)}export{d as render};
-//# sourceMappingURL=RefinementList.vue_vue&type=template&id=80c1baee&lang.js.map

package/vue3/es/src/components/RefinementList.vue_vue&type=template&id=80c1baee&lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RefinementList.vue_vue&type=template&id=80c1baee&lang.js","sources":["../../../../src/components/RefinementList.vue?vue&type=template&id=80c1baee&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"[suit(), !state.canRefine && suit('', 'noRefinement')]\"\n    v-if=\"state\"\n  >\n    <slot\n      :items=\"items\"\n      :refine=\"refine\"\n      :search-for-items=\"state.searchForItems\"\n      :search-for-items-query=\"searchForFacetValuesQuery\"\n      :toggle-show-more=\"toggleShowMore\"\n      :can-toggle-show-more=\"state.canToggleShowMore\"\n      :is-showing-more=\"state.isShowingMore\"\n      :createURL=\"state.createURL\"\n      :is-from-search=\"state.isFromSearch\"\n      :can-refine=\"state.canRefine\"\n      :send-event=\"state.sendEvent\"\n    >\n      <div :class=\"suit('searchBox')\" v-if=\"searchable\">\n        <search-input\n          v-model=\"searchForFacetValues\"\n          :placeholder=\"searchablePlaceholder\"\n          :class-names=\"classNames\"\n        />\n      </div>\n      <slot\n        name=\"noResults\"\n        :query=\"searchForFacetValues\"\n        v-if=\"state.isFromSearch && items.length === 0\"\n      >\n        <div :class=\"suit('noResults')\">No results.</div>\n      </slot>\n      <ul :class=\"suit('list')\">\n        <li\n          :class=\"[suit('item'), item.isRefined && suit('item', 'selected')]\"\n          v-for=\"item in items\"\n          :key=\"item.value\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :refine=\"refine\"\n            :createURL=\"state.createURL\"\n          >\n            <label :class=\"suit('label')\">\n              <input\n                :class=\"suit('checkbox')\"\n                type=\"checkbox\"\n                :value=\"item.value\"\n                :checked=\"item.isRefined\"\n                @change=\"refine(item.value)\"\n              />\n              <span v-if=\"searchable\" :class=\"suit('labelText')\">\n                <ais-highlight attribute=\"item\" :hit=\"item\" />\n              </span>\n              <span v-else :class=\"suit('labelText')\">{{ item.label }}</span>\n              <span :class=\"suit('count')\">{{ item.count }}</span>\n            </label>\n          </slot>\n        </li>\n      </ul>\n      <button\n        :class=\"[\n          suit('showMore'),\n          {\n            [suit('showMore', 'disabled')]: !state.canToggleShowMore,\n          },\n        ]\"\n        @click=\"toggleShowMore\"\n        v-if=\"showMore\"\n        :disabled=\"!state.canToggleShowMore\"\n      >\n        <slot name=\"showMoreLabel\" :is-showing-more=\"state.isShowingMore\">\n          Show {{ state.isShowingMore ? 'less' : 'more' }}\n        </slot>\n      </button>\n    </slot>\n  </div>\n</template>\n\n<script>\nimport { connectRefinementList } from 'instantsearch.js/es/connectors';\n\nimport { createPanelConsumerMixin } from '../mixins/panel';\nimport { createSuitMixin } from '../mixins/suit';\nimport { createWidgetMixin } from '../mixins/widget';\n\nimport AisHighlight from './Highlight.vue';\nimport SearchInput from './SearchInput.vue';\n\nconst noop = () => {};\n\nexport default {\n  name: 'AisRefinementList',\n  components: { SearchInput, AisHighlight },\n  mixins: [\n    createSuitMixin({ name: 'RefinementList' }),\n    createWidgetMixin(\n      {\n        connector: connectRefinementList,\n      },\n      {\n        $$widgetType: 'ais.refinementList',\n      }\n    ),\n    createPanelConsumerMixin(),\n  ],\n  props: {\n    attribute: {\n      type: String,\n      required: true,\n    },\n    searchable: {\n      type: Boolean,\n      default: undefined,\n    },\n    searchablePlaceholder: {\n      type: String,\n      required: false,\n      default: 'Search here…',\n    },\n    operator: {\n      default: 'or',\n      validator(value) {\n        return value === 'and' || value === 'or';\n      },\n      required: false,\n    },\n    limit: {\n      type: Number,\n      required: false,\n      default: undefined,\n    },\n    showMoreLimit: {\n      type: Number,\n      required: false,\n      default: undefined,\n    },\n    showMore: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n    sortBy: {\n      type: [Array, Function],\n      required: false,\n      default: undefined,\n    },\n    transformItems: {\n      type: Function,\n      required: false,\n      default: undefined,\n    },\n  },\n  data() {\n    return {\n      searchForFacetValuesQuery: '',\n    };\n  },\n  computed: {\n    searchForFacetValues: {\n      get() {\n        return this.searchForFacetValuesQuery;\n      },\n      set(value) {\n        this.state.searchForItems(value);\n        this.searchForFacetValuesQuery = value;\n      },\n    },\n    toggleShowMore() {\n      return this.state.toggleShowMore || noop;\n    },\n    items() {\n      return this.state.items.map((item) =>\n        Object.assign({}, item, {\n          _highlightResult: {\n            item: {\n              value: item.highlighted,\n            },\n          },\n        })\n      );\n    },\n    widgetParams() {\n      return {\n        attribute: this.attribute,\n        operator: this.operator,\n        limit: this.limit,\n        showMore: this.showMore,\n        showMoreLimit: this.showMoreLimit,\n        sortBy: this.sortBy,\n        escapeFacetValues: true,\n        transformItems: this.transformItems,\n      };\n    },\n  },\n  methods: {\n    refine(value) {\n      this.state.refine(value);\n      this.searchForFacetValuesQuery = '';\n    },\n  },\n};\n</script>\n"],"names":["_ctx","_createElementBlock","class","canRefine","_renderSlot","items","$options","refine","searchForItems","searchForItemsQuery","$data","toggleShowMore","canToggleShowMore","isShowingMore","createURL","isFromSearch","sendEvent","$props","_createVNode","placeholder","class-names","length","query","_createElementVNode","item","isRefined","key","value","type","checked","onChange","attribute","hit","label","count","onClick","disabled"],"mappings":"2XAGUA,aAFRC,eACGC,SAAQF,UAASA,QAAMG,WAAaH,8BAGrCI,sBACGC,MAAOC,QACPC,OAAQD,SACRE,eAAkBR,QAAMQ,eACxBC,oBAAwBC,4BACxBC,eAAkBL,iBAClBM,kBAAsBZ,QAAMY,kBAC5BC,cAAiBb,QAAMa,cACvBC,UAAWd,QAAMc,UACjBC,aAAgBf,QAAMe,aACtBZ,UAAYH,QAAMG,UAClBa,UAAYhB,QAAMgB,mCAEmBC,kBAAtChB,eAAMC,QAAOF,uBACXkB,gBACWZ,4EAAAA,2BACRa,YAAaF,wBACbG,cAAapB,+EAMVA,QAAMe,kBAAgBT,QAAMe,OAHpCjB,8BAEGkB,MAAOhB,0CAGRiB,SAAMrB,QAAOF,sBAAmB,6BAElCuB,QAAKrB,QAAOF,yBACVC,WAEiBK,iBAARkB,cAFTvB,QACGC,SAAQF,eAAcwB,EAAKC,WAAazB,4BAExC0B,IAAKF,EAAKG,QAEXvB,mBAEGoB,KAAMA,EACNjB,OAAQD,SACRQ,UAAWd,QAAMc,6BAElBS,WAAQrB,QAAOF,mBACbuB,WACGrB,QAAOF,oBACR4B,KAAK,WACJD,MAAOH,EAAKG,MACZE,QAASL,EAAKC,UACdK,4BAAQxB,SAAOkB,EAAKG,oBAEXV,kBAAZhB,gBAAyBC,QAAOF,uBAC9BkB,KAAea,UAAU,OAAQC,IAAKR,6BAExCvB,gBAAcC,QAAOF,wBAAsBwB,EAAKS,WAChDV,UAAOrB,QAAOF,oBAAkBwB,EAAKU,iCAarCjB,gBARRhB,kBACGC,mGAMAiC,6FAAO7B,gDAEP8B,UAAWpC,QAAMY,oBAElBR,4BAA4BS,cAAiBb,QAAMa,8CACzCb,QAAMa"}

package/vue3/es/src/components/SearchInput.vue_vue&type=template&id=02fb82e2&lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SearchInput.vue_vue&type=template&id=02fb82e2&lang.js","sources":["../../../../src/components/SearchInput.vue?vue&type=template&id=02fb82e2&lang.js"],"sourcesContent":["<template>\n  <form\n    action=\"\"\n    role=\"search\"\n    novalidate\n    :class=\"suit('form')\"\n    @submit.prevent=\"onFormSubmit\"\n    @reset.prevent=\"onFormReset\"\n  >\n    <!-- :value/@input allows us to pass v-model to the component in v2 -->\n    <!-- :modelValue/@update:modelValue allows us to pass v-model to the component in v3 -->\n    <input\n      type=\"search\"\n      autocorrect=\"off\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      maxlength=\"512\"\n      aria-label=\"Search\"\n      :placeholder=\"placeholder\"\n      :autofocus=\"autofocus\"\n      :class=\"suit('input')\"\n      :value=\"value || modelValue\"\n      @focus=\"$emit('focus', $event)\"\n      @blur=\"$emit('blur', $event)\"\n      @input=\"onInput($event)\"\n      @compositionend=\"onInput($event)\"\n      ref=\"input\"\n    />\n    <button\n      type=\"submit\"\n      :title=\"submitTitle\"\n      :class=\"suit('submit')\"\n      :hidden=\"showLoadingIndicator && shouldShowLoadingIndicator\"\n    >\n      <slot name=\"submit-icon\">\n        <svg\n          aria-hidden=\"true\"\n          width=\"10\"\n          height=\"10\"\n          viewBox=\"0 0 40 40\"\n          :class=\"suit('submitIcon')\"\n        >\n          <path\n            d=\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\"\n          />\n        </svg>\n      </slot>\n    </button>\n\n    <button\n      type=\"reset\"\n      :title=\"resetTitle\"\n      :class=\"suit('reset')\"\n      :hidden=\"\n        (!value && !modelValue) ||\n        (showLoadingIndicator && shouldShowLoadingIndicator)\n      \"\n    >\n      <slot name=\"reset-icon\">\n        <svg\n          aria-hidden=\"true\"\n          height=\"10\"\n          viewBox=\"0 0 20 20\"\n          :class=\"suit('resetIcon')\"\n          width=\"10\"\n        >\n          <path\n            d=\"M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z\"\n          />\n        </svg>\n      </slot>\n    </button>\n\n    <span\n      v-if=\"showLoadingIndicator\"\n      :hidden=\"!shouldShowLoadingIndicator\"\n      :class=\"suit('loadingIndicator')\"\n    >\n      <slot name=\"loading-indicator\">\n        <svg\n          :aria-hidden=\"!shouldShowLoadingIndicator\"\n          aria-label=\"Results are loading\"\n          width=\"16\"\n          height=\"16\"\n          stroke=\"#444\"\n          viewBox=\"0 0 38 38\"\n          :class=\"suit('loadingIcon')\"\n        >\n          <g fill=\"none\" fill-rule=\"evenodd\">\n            <g transform=\"translate(1 1)\" stroke-width=\"2\">\n              <circle stroke-opacity=\".5\" cx=\"18\" cy=\"18\" r=\"18\" />\n              <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n                <animateTransform\n                  attributeName=\"transform\"\n                  type=\"rotate\"\n                  from=\"0 18 18\"\n                  to=\"360 18 18\"\n                  dur=\"1s\"\n                  repeatCount=\"indefinite\"\n                />\n              </path>\n            </g>\n          </g>\n        </svg>\n      </slot>\n    </span>\n  </form>\n</template>\n\n<script>\nimport { createSuitMixin } from '../mixins/suit';\n\nexport default {\n  name: 'SearchInput',\n  mixins: [createSuitMixin({ name: 'SearchBox' })],\n  props: {\n    placeholder: {\n      type: String,\n      default: 'Search here…',\n    },\n    autofocus: {\n      type: Boolean,\n      default: false,\n    },\n    showLoadingIndicator: {\n      type: Boolean,\n      default: false,\n    },\n    shouldShowLoadingIndicator: {\n      type: Boolean,\n      default: false,\n    },\n    ignoreCompositionEvents: {\n      type: Boolean,\n      default: false,\n    },\n    submitTitle: {\n      type: String,\n      default: 'Search',\n    },\n    resetTitle: {\n      type: String,\n      default: 'Clear',\n    },\n    value: {\n      type: String,\n      required: false,\n      default: undefined,\n    },\n    modelValue: {\n      type: String,\n      required: false,\n      default: undefined,\n    },\n  },\n  emits: ['input', 'update:modelValue', 'blur', 'focus', 'reset'],\n  data() {\n    return {\n      query: '',\n    };\n  },\n  methods: {\n    isFocused() {\n      return document.activeElement === this.$refs.input;\n    },\n    onInput(event) {\n      if (!(this.ignoreCompositionEvents && event.isComposing)) {\n        this.$emit('input', event.target.value);\n        this.$emit('update:modelValue', event.target.value);\n      }\n    },\n    onFormSubmit() {\n      const input = this.$refs.input;\n      input.blur();\n    },\n    onFormReset() {\n      this.$emit('input', '');\n      this.$emit('update:modelValue', '');\n      this.$emit('reset');\n    },\n  },\n};\n</script>\n"],"names":["_createElementVNode","d","_createElementBlock","action","role","novalidate","class","_ctx","onSubmit","$options","onReset","type","autocorrect","autocapitalize","autocomplete","spellcheck","maxlength","aria-label","placeholder","$props","autofocus","value","onFocus","$event","onBlur","onInput","onCompositionend","ref","title","hidden","_renderSlot","aria-hidden","width","height","viewBox","stroke"],"mappings":"wPA2CUA,UACEC,EAAE,sbAuBJD,UACEC,EAAE,knBAnEZC,UACEC,OAAO,GACPC,KAAK,SACLC,WAAA,GACCC,QAAOC,gBACPC,gGAAgBC,yDAChBC,+FAAeD,yDAIhBT,WACEW,KAAK,SACLC,YAAY,MACZC,eAAe,MACfC,aAAa,MACbC,WAAW,QACXC,UAAU,MACVC,aAAW,SACVC,YAAaC,cACbC,UAAWD,YACXb,QAAOC,iBACPc,MAAOF,SAASA,aAChBG,uCAAOf,gBAAegB,KACtBC,sCAAMjB,eAAcgB,KACpBE,uCAAOhB,UAAQc,KACfG,gDAAgBjB,UAAQc,KACzBI,IAAI,oBAEN3B,YACEW,KAAK,SACJiB,MAAOT,cACPb,QAAOC,kBACPsB,OAAQV,wBAAwBA,+BAEjCW,mDACE5B,SACE6B,cAAY,OACZC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACP5B,QAAOC,uCASdP,YACEW,KAAK,QACJiB,MAAOT,aACPb,QAAOC,iBACPsB,uFAKDC,kDACE5B,SACE6B,cAAY,OACZE,OAAO,KACPC,QAAQ,YACP5B,QAAOC,qBACRyB,MAAM,sBAUJb,4BADRjB,gBAEG2B,QAASV,6BACTb,QAAOC,8BAERuB,yDACE5B,SACG6B,eAAcZ,6BACfF,aAAW,sBACXe,MAAM,KACNC,OAAO,KACPE,OAAO,OACPD,QAAQ,YACP5B,QAAOC"}