Skip to content

Latest commit

 

History

History
79 lines (68 loc) · 2.25 KB

README.md

File metadata and controls

79 lines (68 loc) · 2.25 KB
Raw

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.