Filter

Filters allow users to modify the data they see in elements like charts and tables. It constructs popover, that generates data-driven filter list.

Usage

Use v-model to pass in your filters. Filters must follow a specific interface.

<template>
  <ci-filter v-model="filters" :px-classes="pxClasses" />
</template>
<script>
export default {
  data() {
    return {
      pxClasses: {
        applyPx: 'Filter,CustomPx,Button'
      },
      filters: [
        {
          value: {},
          id: "myField",
          title: "Choose an option",
          type: "select",
          props: {
            options: [
              { text: "Option 1", value: "1", },
              { text: "Option 2", value: "2", },
              { text: "Option 3", value: "3", },
              { text: "Option 4", value: "4", },
            ],
          },
        },
      ],
    };
  },
};
</script>

Title

Use the title prop to change the default button text for your filter button.

<template>
  <ci-filter v-model="filters" title="Options" />
</template>
<script>
export default {
  data() {
    return {
      filters: [
        {
          value: {},
          id: "myField",
          title: "Choose an option",
          type: "select",
          props: {
            options: [
              { text: "Option 1", value: "1", },
              { text: "Option 2", value: "2", },
              { text: "Option 3", value: "3", },
              { text: "Option 4", value: "4", },
            ],
          },
        },
      ],
    };
  },
};
</script>

No Button Text

Use the hide-button-text prop to hide the button text.

<template>
  <ci-filter v-model="filters" hide-button-text />
</template>
<script>
export default {
  data() {
    return {
      filters: [
        {
          value: {},
          id: "myField",
          title: "Choose an option",
          type: "select",
          props: {
            options: [
              { text: "Option 1", value: "1", },
              { text: "Option 2", value: "2", },
              { text: "Option 3", value: "3", },
              { text: "Option 4", value: "4", },
            ],
          },
        },
      ],
    };
  },
};
</script>

Select Filter

Select filters allow users to search for and select a single option from a list of options. Use props.options to be define the available options.

See the Select documentation for more information..

<template>
  <ci-filter v-model="filters" />
</template>
<script>
export default {
  data() {
    return {
      filters: [
        {
          id: "FieldId",
          title: "Field Title",
          type: "select",
          props: {
            options: [
              { text: "Option 1", value: "1", },
              { text: "Option 2", value: "2", },
              { text: "Option 3", value: "3", },
              { text: "Option 4", value: "4", },
            ],
          },
        },
      ],
    };
  },
};
</script>

MultiSelect Filter

MultiSelect filters allow users to search for and multiselect options from a list of options. It requires for props.options to be set with available options and value as array.

See MultiSelect documentation for more information.

Minimal setup:

<template>
  <ci-filter v-model="filters"/>
</template>
<script>
export default {
  data () {
    return {
      filters: [
        {
          id: 'FieldId',
          title: 'Field Title',
          type: 'multiselect',
          value: [],
          props: {
            options: [
              { text: "Option 1", value: "1", },
              { text: "Option 2", value: "2", },
              { text: "Option 3", value: "3", },
              { text: "Option 4", value: "4", },
            ],
          }
        }
      ]
    }
  }
}
</script>

Error Messages & Validation

Using the listeners and error portions of the interface we can create filter validation and show errors. In this demo, an error is shown if more than 2 options are selected.

<template>
  <ci-filter v-model="filters" />
</template>
<script>
export default {
  data () {
    return {
      filters: [
        {
          id: 'FieldId',
          title: 'Field Title',
          type: 'multiselect',
          value: [],
          props: {
            options: [
              { text: "Option 1", value: "1", },
              { text: "Option 2", value: "2", },
              { text: "Option 3", value: "3", },
              { text: "Option 4", value: "4", },
            ],
            error: false
          },
          listeners: {
            update: this.onValueUpdate
          }
        }
      ]
    }
  },
  methods: {
    onValueUpdate (value) {
      const filter = this.filters.find(f => f.id === 'FieldId')
      filter.props.error = (value.length > 2) ? "Only two options are accepted" : false
    }
  }
}
</script>

Range Slider

The Range slider filter allows users to choose numeric ranges with a Range Slider. Use props to pass options to your Range Slider. props.max is required of Ranger Slider's.

<template>
  <ci-filter v-model="filters" />
</template>
<script>
export default {
  data() {
    return {
      filters: [
        {
          value: [10, 100],
          id: "RangeSliderId",
          title: "Employees",
          type: "range-slider",
          props: {
            max: 200,
          },
        },
      ],
    };
  },
};
</script>

Range Select Filter

Range Select filters allow users to select a range of options from a list of options. It uses two Select components under the hood. Use props.options to be define the available options. For min and max selects options are the same, but they automatically adjust based of each others values.

<template>
  <ci-filter v-model="filters" />
</template>
<script>
export default {
  data() {
    return {
      filters: [
        {
          value: [],
          id: "RangeSelectId",
          title: "Colleagues",
          type: "range-select",
          props: {
            options: [
              {
                text: "10",
                value: 10,
              },
              {
                text: "15",
                value: 15,
              },
              {
                text: "20",
                value: 20,
              },
              {
                text: "25",
                value: 25,
              },
            ],
          },
        },
      ],
    };
  },
};
</script>

Range Input Filter

Range Input filters allow users to input a range of numbers. It uses two Input components under the hood. If no value should be used use undefined in value array. If placeholders are needed to change pass array of two strings to props.placeholders.

<template>
  <ci-filter v-model="filters" />
</template>
<script>
export default {
  data() {
    return {
      filters: [
        {
          value: [undefined, 100],
          id: "RangeInputId",
          title: "Employees",
          type: "range-input",
        },
      ],
    };
  },
};
</script>

Props

Name	Type	Default	Description
v-model (value)	object: CiFilterOpts	required	Filters data model, see details bellow
title	string	Filters	Sets button text and popover header
hideButtonText	boolean	false	Hides the button text
showButtonText	boolean	true	Sets visibility of button text (DEPRECATED)

Filter Events

Event	Payload	Description
@update	The updated v-model data	Emitted when apply button is pressed

Interface

Ordered filter array should be passed into v-model. Each filter should implement following interface.

Property	Type	Description	Required
id	string	Unique identified for filter.	Required
title	string	Title to be passed in Form Field label prop of filter component.	Required
type	CiFilterType	Filter input type to be used.	Required
value	any	Current filter value. Type depends on model that returns given filter type.	Required
defaultValue	any	Value to be considered as default. Default value will be applied when "Clear" button is clicked by user and that value will not be displayed as tag. Type depends on model that returns given filter type.
props	object	Object of props, that will be passed directly to v-bind attribute of underlying filter component. It is recommented to pass there only ones, that impacts content of the filter, not the behavior/appearence.
error	string, boolean	Error to be passed in Form Field error prop of filter component.
loading	boolean	Defines if content for given filter is still getting prepared by consuming app (e.g. server-side call)
listeners	string, Function | Function[]	Listener list that will get passed to v-on of underlying filter component.