Component WCSelectBox - nikolaimueller/my-wc GitHub Wiki

WCSelectBox (<wc-select-box>)

source: my-wc/components/wc-select-box/WCSelectBox.js

A data driven Select-Box webcomponent.
Wraps an HTML5 <select> element to render given data and fires an custom event when an <option> has been selected.

EVENTS

  • export const EVENT_MYWC_SELECTBOX_SELECTED: Fired when user selected an option
    • Event provides: event.detail.selectedValues: an array containing the value value of the selected option elements. The array can be empty or contain one or more values.

ATTRIBUTES

  • HTML <select> build-in attributes:
    • multiple: Boolean attribute, if set more then one option can be selected
    • size: number of options to display
  • Custom attributes:
    • empty-option - values: 'true' | 'clear'
    • empty-option-text: text for the empty option
    • empty-option-clear-text: text for the empty option when options were selected (and thus can be cleared now)

METHODS

  • setData(data, selectedId): set the data object and start rendering the select element.

    • data: array of objects from which the <select> element will be provisioned. Each object will be rendered as <option> element:
    [{id:1, text:'Henry'}, ...]

    Optionally an data object can also have a children property, containing more data objects to be rendered as <optgroup> element with <option> child elements.
    The example sources came along with MOCK_DATA showing this.

    • selectedId: (optional) id of the option to be selected

  • setSelected(id): an Array of id's (option values) to be selected

Setting selected options:

  • Options can be pre-selected implicitly by data, i.e: [... {id:123, text:'My Item', selected: true} ...] when calling setData(data)
  • Options can be pre-selected by giving an (optional) array of option id's to setData(data, [9,12])
  • Options can also be selected after rendering and one by one, by calling setSelected(id)

Example Sources:

  • Example View
    • examples/views/SelectView/SelectView.js
    • examples/views/SelectView/SelectView.css
  • Example View themes:
    • themes/dark-theme/examples/views/select-view/SelectView.css
    • themes/light-theme/examples/views/select-view/SelectView.css
  • WC-Select-Box themes:
    • themes/dark-theme/examples/vendor/m-wc/components/wc-select-box/WCSelectBox.css
    • themes/light-theme/examples/vendor/m-wc/components/wc-select-box/WCSelectBox.css

^ Wiki Home