filter-box

What's this

This component renders a list of elements which can be searched.

Project setup

npm install @myena/filter-box

Dependences

• Vue 2

Demo

TBD

Usage

Options can be passed as props

<filter-box
    v-model="selectedOptions"
    drop-id="first"
    :options="options"
    :search="true"
    :multiple="true"
    :is-expanded="true"
    panel-header="First Options"
    :texts="optionsTexts"
    :sort-selected-first="true"
    :display-max="150"
    />

import FilterBox from 'advanced-select';

export default {
  components: {
    FilterBox,
  },
  data: () => ({
    options: [{ 
        value: 1, 
        text: 'One', 
        count: 20, 
        disabled: true, 
        icon: '<i class="fa fa-laptop"></i>' 
    }, { 
        value: 2, 
        text: 'Two', 
        count: 11 
    }],
    optionsTexts: {
        showMore: 'Show more options',
        searchText: 'Search for options...',
        empty: 'No results',
    },
    selectedOptions: [],
  }),
};

Props

Prop	Type	Default	Description
v-model	any	null	Pass v-model to the component to have the reference to the current selected value
:options	Array	[]	The options to display. A list of objects in the form: { value: 1, text: 'One', count: 10, icon: '<i class="fa fa-laptop"></i>'}.
:search	Boolean	false	Show or not a search field to filter the options
:multiple	Boolean	true	Single or multiple select
:displayMax	Number	20	How many selected items to display on the initial list. If there are more options that 'displayMax', a popup will be available with all of the option grouped by first letter.
:dropdownClass	String	''	Class to use for the dropdown menu. EG: 'dropdown-menu-right'
:texts	Object	{ searchText: 'Search',empty: 'No results',showMore: 'Show more',collapsedIcon: '-',collapseIcon: '+', }	Texts used
:panelHeader	String	''	Text for the panel header
:dropId	String	key	A unique id for the filter elements
:isExpanded	Boolean	false	Boolean to control if panel is expanded by default
:sortSelectedFirst	Boolean	false	Boolean to move the selected option on top of the list.