jvx-multiselect v2.0.44

\<jvx-multiselect>

A web component that offers a multipurpose material multiselect which handles both synchronous and asynchronous selections.

Install jvx-multiselect

npm install jvx-multiselect

API

Slots

Properties/Attributes

Methods

None

Events

CSS Custom Properties

None

Global Custom Properties

HTTP Request

Request

The HTTP request can be either a GET or a POST request. The user can set the type using the property requestType which is set to 'GET' by default.

The HTTP request will be executed via axios.

httpParameters

The parameters for the HTTP request are stored in the property httpParameters. If the property useOnlyHttpParamters is false, a new object will be created which will integrate a copy of httpParameters will be completed as follows:

  Object.assign(httpParametersCopy, {
        search: this.searchValue,
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
        filter: !!this.filter && (typeof this.filter === 'object' || this.filter.length > 0) ? JSON.stringify(this.filter) : null
      });

This object will be passed in the property data or in the property params of the axios request depending on the HTTP request type.

Headers

The headers can be set in the property requestHeaders. By default the jvx-multiselect uses the property trusted stored in the sessionStorage. The default headers are:

var requestHeaders = {
  'Accept': 'application/json',
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS',
  'Content-Type': 'application/json',
  'Authorization': window.sessionStorage.getItem('trusted')
}

Response

By now the response must contain an array of objects, stored in the property message in the response.data object.

The object template should be

var obj: {
  value: Number|String,
  text: String
}

If the object comes in different form, via the property labels it is possible to set an object that maps the properties in order to make it readable for the jvx-multiselect. For example if the response object template is

var response = {
  id: 1,
  title: 'This is the title',
  description: 'This is the description',
  start: 2020/01/01,
  end: 2020/03/01
}

and the property labels is

var labels = {
  id: 'value',
  title: 'text'
}

the response object will be mapped like this

var response = {
  value: 1,
  text: 'This is the title',
  id: 1,
  title: 'This is the title',
  description: 'This is the description',
  start: 2020/01/01,
  end: 2020/03/01,
  selected: Boolean
}

The user can use the properties itemText and itemValue to prevent the need for the mapping (being in the example above itemText = 'title' and itemValue = 'id').

Search

When the user searches for a term, the property searchInput is updated with the searched value. Its value is then copied in the property search of the object of the search parameters.

Pagination

The property pagination is structured by default as follows:

var pagination = {
  page: 1,
  pageSize: 15
}

Whenever the scrollbar in the menu reaches the bottom, the property page is incremented by one and a further http request is called. When the user searches or closes the menu the property page is set again at 1. The jvx-multiselect copies these values individually in the object of the search parameters.

Slots

option-item

The slot option-item allows to define a template for the options that will be shown in the dropdown menu. It is possible to access the context wrapping it between square brackets. i.e.: Let's say we have the following structure:

var options = [{
  value: 1, 
  text: 'Lorem ipsum',
  color: 'blue',
  preview: 'path/to/first-image.jpg'
},
  {
    value: 2,
    text: 'dolor sit amet',
    color: 'red',
    preview: 'path/to/second-image.jpg'
  }];

and we want our options to have in the text field both the property color and the property text. We can write the template like so:

<div slot="option-item">[[option.text]] [[option.color]]</div>

It's possible to use the context inside attributes too. In that case it's suggested to preppend the string data-jvx- to all the attributes' names that will access the context. i.e.

<div slot="option-item">
    <span>[[option.text]]</span>
    <span>
        <img data-jvx-src="[[option.preview]]"/>
    </span>
</div>

selected-item

This slot works exactly as option-item, but it is used to style the selected value when multi is false.

options

The slot options is there to provide an easy way to describe all the available options of the select. This is necessary because some frameworks may have problems in passing the array to the options prop. Each option will be a div and all the properties of the corresponding object can be written inside an attribute preceded by data-jvx-, like so:

<div slot="options">
    <div value="1" text="Lorem ipsum" data-jvx-color="blue" data-jvx-preview="path/to/first-image.jpg"></div>
    <div value="2" text="dolor sit amet" data-jvx-color="red" data-jvx-preview="path/to/second-image.jpg"></div>
</div>