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 is rendered 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, is rendered. 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>