EditableNumberRangeFilter
EditableNumberRangeFilter
Renders an editable number range filter. It has two input fields to handle min and max values, emitting the needed events when clicked.
It provides a default slot, with some utils bind, to customize the whole component; and two named
slots apply-content
and clear-content
to override each button content.
If instant
prop is true, the needed events are emitted immediately; else, apply button is rendered
to confirm to do it. False by default.
If clear
prop is true, clear button, which sets to null component min and max values, is rendered.
True by default.
Props
Name | Description | Type | Default |
---|---|---|---|
filter | The filter data to render and edit. | EditableNumberRangeFilterModel |
|
isInstant | If instant prop is true, the needed events are emitted immediately; else, apply button isrendered to confirm to do it. False by default. | boolean | false |
hasClearButton | If clear prop is true, clear button, which sets to null component min and max values, isrendered. True by default. | boolean | true |
Slots
Name | Description | Bindings (name - type - description) |
---|---|---|
default | Empty slot used to customize the whole component. | |
apply-content | Slot used to customize the apply button content. | None |
clear-content | Slot used to customize the clear button content. | None |
Events
A list of events that the component will emit:
UserModifiedEditableNumberRangeFilter
(opens new window): this event is emitted instantly after typing the value or clicking the submit button. The event payload in both cases is an object containing the filter and the new value for the range.
Example
Renders an editable number range filter. It has two input fields to handle min and max values, emitting the needed events when clicked.
It provides a default slot, with some utils bind, to customize the whole component; and two named
slots apply-content
and clear-content
to override each button content.
If instant
prop is true, the needed events are emitted immediately; else, apply button is rendered
to confirm to do it. False by default.
If clear
prop is true, clear button, which sets to null component min and max values, is rendered.
True by default.
Basic usage
<template>
<EditableNumberRangeFilter :filter="editableFilter" />
</template>
<script>
import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';
export default {
components: {
EditableNumberRangeFilter
},
data() {
return {
editableFilter: {
facetId: 'age',
id: 'age:primary',
label: 'primary',
modelName: 'EditableNumberRangeFilter',
range: {
min: null,
max: null
}
}
};
}
};
</script>
Properties
<template>
<EditableNumberRangeFilter :filter="editableFilter" :isInstant="true" :hasClearButton="false" />
</template>
<script>
import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';
export default {
components: {
EditableNumberRangeFilter
},
data() {
return {
editableFilter: {
facetId: 'age',
id: 'age:primary',
label: 'primary',
modelName: 'EditableNumberRangeFilter',
range: {
min: null,
max: null
}
}
};
}
};
</script>
Customizing content slots
<template>
<EditableNumberRangeFilter :filter="editableFilter">
<template name="apply-content">Apply</template>
<template name="clear-content">Clear</template>
</EditableNumberRangeFilter>
</template>
<script>
import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';
export default {
components: {
EditableNumberRangeFilter
},
data() {
return {
editableFilter: {
facetId: 'age',
id: 'age:primary',
label: 'primary',
modelName: 'EditableNumberRangeFilter',
range: {
min: null,
max: null
}
}
};
}
};
</script>
Customizing default slot
<template>
<EditableNumberRangeFilter
:filter="editableFilter"
#default="{
min,
max,
setMin,
setMax,
emitUserModifiedFilter,
clearValues,
hasError,
isAnyRange
}"
>
<button @click="emitUserModifiedFilter">✅ Apply!</button>
<button @click="clearValues">🗑 Clear!</button>
<input :value="!isAnyRange ? min : null" @change="setMin($event.target.valueAsNumber)" />
<input :value="max" @change="setMax($event.target.valueAsNumber)" />
<div class="has-error" v-if="hasError">⚠️ Invalid range values</div>
</EditableNumberRangeFilter>
</template>
<script>
import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';
export default {
components: {
EditableNumberRangeFilter
},
data() {
return {
editableFilter: {
facetId: 'age',
id: 'age:primary',
label: 'primary',
modelName: 'EditableNumberRangeFilter',
range: {
min: null,
max: null
}
}
};
}
};
</script>
Customizing the items with classes
The buttonsClass
and inputsClass
props can be used to add classes to the inputs and buttons of
the component.
<template>
<EditableNumberRangeFilter
:filter="editableFilter"
:inputsClass="'my-inputs-class'"
:buttonsClass="'my-buttons-class'"
/>
</template>
<script>
import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';
export default {
components: {
EditableNumberRangeFilter
},
data() {
return {
editableFilter: {
facetId: 'age',
id: 'age:primary',
label: 'primary',
modelName: 'EditableNumberRangeFilter',
range: {
min: null,
max: null
}
}
};
}
};
</script>