2 min read

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

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>