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: `
-
+