diff --git a/docs/src/components/RangeInput.md b/docs/src/components/RangeInput.md index bde28dfe2..ba13d2687 100644 --- a/docs/src/components/RangeInput.md +++ b/docs/src/components/RangeInput.md @@ -19,6 +19,44 @@ The range input widget allows a user to select a numeric range using a minimum a ``` +### Range slider + +There's no built-in slider in Vue InstantSearch, but you can use third-party sliders that accepts two slider handles. An example is [vue-slider-component](https://github.com/NightCatSama/vue-slider-component). You would use that like this: + +```vue + + + +``` + +πŸ•Ή try out live + ## Props Name | Type | Default | Description | Required diff --git a/docs/src/components/SearchBox.md b/docs/src/components/SearchBox.md index 0f518e9a9..446466091 100644 --- a/docs/src/components/SearchBox.md +++ b/docs/src/components/SearchBox.md @@ -24,8 +24,8 @@ A search input with a clear and submit button. Name | Type | Default | Description | Required ---|---|---|---|--- placeholder | String | `'Search here…'` | The input placeholder | no -submit-title | String | `'search'` | The submit button text | no -clear-title | String | `'clear'` | The clear button text | no +submit-title | String | `'search'` | The submit button's alternative text | no +reset-title | String | `'clear'` | The clear button's alternative text | no autofocus | Boolean | `false` | Whether to automatically focus on the input when rendered | no show-loading-indicator | Boolean | `false` | Show a spinner in the search box if a delay is passed and no results are returned yet | no class-names | Object | | Override class names | no @@ -35,6 +35,9 @@ class-names | Object | | Override class names | no Name | Scope | Description ---|---|--- default | `{ currentRefinement: String, isSearchStalled: Boolean, refine: String => void }` | Slot to override the DOM output +loading-indicator | | Slot to override the loading indicator +reset-icon | | Slot to override the reset icon +submit-icon | | Slot to override the submit icon ## CSS classes diff --git a/src/components/SearchBox.vue b/src/components/SearchBox.vue index 758fc168f..2a9f95b38 100644 --- a/src/components/SearchBox.vue +++ b/src/components/SearchBox.vue @@ -14,9 +14,23 @@ :show-loading-indicator="showLoadingIndicator" :should-show-loading-indicator="state.isSearchStalled" :submit-title="submitTitle" - :clear-title="clearTitle" + :reset-title="resetTitle" + :class-names="classNames" v-model="currentRefinement" - /> + > + + + + @@ -53,7 +67,7 @@ export default { type: String, default: 'Search', }, - clearTitle: { + resetTitle: { type: String, default: 'Clear', }, diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue index e7fefb5a6..e9881768d 100644 --- a/src/components/SearchInput.vue +++ b/src/components/SearchInput.vue @@ -7,6 +7,7 @@ @submit.prevent="onFormSubmit" @reset.prevent="onFormReset" > + - { ); }); -test('with clear title', () => { +test('with reset title', () => { __setState(defaultState); const wrapper = mount(SearchBox, { propsData: { - clearTitle: 'Clear Title', + resetTitle: 'Clear Title', }, }); @@ -166,3 +166,63 @@ test('refine on empty string on form reset', () => { expect(state.refine).toHaveBeenCalledWith(''); }); + +test('overriding slots', () => { + __setState({ + ...defaultState, + isSearchStalled: true, + }); + const wrapper = mount(SearchBox, { + propsData: { + showLoadingIndicator: true, + }, + slots: { + 'submit-icon': 'SUBMIT', + 'reset-icon': 'RESET', + 'loading-indicator': 'LOADING...', + }, + }); + + expect(wrapper.find('.ais-SearchBox-submit').html()).toMatch(/SUBMIT/); + expect(wrapper.find('.ais-SearchBox-reset').html()).toMatch(/RESET/); + expect(wrapper.find('.ais-SearchBox-loadingIndicator').html()).toMatch( + /LOADING.../ + ); + + expect(wrapper.find('.ais-SearchBox-submit').html()).toMatchInlineSnapshot(` + + + +`); + expect(wrapper.find('.ais-SearchBox-reset').html()).toMatchInlineSnapshot(` + + + +`); + expect(wrapper.find('.ais-SearchBox-loadingIndicator').html()) + .toMatchInlineSnapshot(` + + + + LOADING... + + + +`); +}); diff --git a/stories/MenuSelect.stories.js b/stories/MenuSelect.stories.js index 8aa2167c8..f6726e77f 100644 --- a/stories/MenuSelect.stories.js +++ b/stories/MenuSelect.stories.js @@ -5,13 +5,13 @@ storiesOf('ais-menu-select', module) .addDecorator(previewWrapper()) .add('default', () => ({ template: ` - + `, })) .add('with a limit', () => ({ template: ` `, @@ -19,7 +19,7 @@ storiesOf('ais-menu-select', module) .add('with a custom sort', () => ({ template: ` `, @@ -27,7 +27,7 @@ storiesOf('ais-menu-select', module) .add('with a custom label', () => ({ template: ` `, @@ -35,7 +35,7 @@ storiesOf('ais-menu-select', module) .add('with transform items', () => ({ template: ` @@ -52,7 +52,7 @@ storiesOf('ais-menu-select', module) })) .add('with a custom rendering', () => ({ template: ` - +