-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Fix variable values and minor style issues * Rename classes of logos * Fix font size extra small and its use on code and markdown * Add border for palette colors and update names * Remove no longer necessary bootstrap dependency * Add choicesjs-stencil dependency * Add multiselect less component * Add multiselect example page * Update multiselect style * Rename host env variable * Fix choicesjs stencil require path * Update documentation * Add multiselect documentation * Update version and babel preset env dependency * Fix minor issues
- Loading branch information
Showing
27 changed files
with
2,891 additions
and
1,481 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| ## Documentation | ||
|
|
||
| ### Installation | ||
|
|
||
| ``` | ||
| npm install choices.js choicesjs-stencil | ||
| ``` | ||
|
|
||
| ```html | ||
| <script src="node_modules/choices.js/assets/scripts/dist/choices.min.js"></script> | ||
| <script src="node_modules/choicesjs-stencil/dist/choicesjsstencil.js"></script> | ||
| ``` | ||
|
|
||
| For modern frameworks check the specific integration in the StencilJS documentation: [framework integration][framework-integration]. | ||
|
|
||
| ### Use of the component | ||
|
|
||
| To use the component just add it to the HTML code with the class `multiselect` and apply its configuration via element properties. The box height is fixed to one line unless the class `multiline` is added to the element. | ||
|
|
||
| ```html | ||
| <choicesjs-stencil class="multiselect" type="single"/> | ||
| <choicesjs-stencil class="multiselect multiline" type="multiple"/> | ||
| ``` | ||
|
|
||
| ```js | ||
| var select = document.querySelector('choicesjs-stencil[type=single]'); | ||
|
|
||
| select.choices = [ | ||
| { value: 'superstar', label: 'Superstar', selected: true, disabled: false }, | ||
| { value: 'stansmith', label: 'Stan Smith', selected: false, disabled: false }, | ||
| { value: 'campus', label: 'Campus', selected: false, disabled: false } | ||
| ]; | ||
| select.placeholder = true; | ||
| select.placeholderValue = 'type the value...'; | ||
| ``` | ||
|
|
||
| The component has three different behaviors via `type` property: | ||
|
|
||
| - `text`: faceted text selector (the user can type any value and it will be added to the list of values). | ||
| - `single`: single value selector (from a dropdown list). | ||
| - `multiple`: multiple value selector (from a dropdown list). | ||
|
|
||
| The full component configuration can be found at [ChoicesJS][choicesjs] library, and a live demo at [choicesjs-stencil][choicesjs-stencil]. | ||
|
|
||
| #### Customization | ||
|
|
||
| Most of the elements can be created using the method `.callbackOnCreateTemplates()` which returns a new template for different items: | ||
|
|
||
| - [Documentation][choicesjs-templates]. | ||
| - [Available elements][choicesjs-templates-elements]. | ||
|
|
||
| [choicesjs]: https://github.com/jshjohnson/Choices | ||
| [choicesjs-stencil]: https://adidas.github.io/choicesjs-stencil/ | ||
| [choicesjs-templates]: https://www.npmjs.com/package/choices.js#callbackoncreatetemplates | ||
| [choicesjs-templates-elements]: https://github.com/jshjohnson/Choices/blob/394bde313d0f8a50b4c2b9d64d35b76ded68a515/assets/scripts/src/choices.js#L2463-L2701 | ||
| [framework-integration]: https://stenciljs.com/docs/overview/ | ||
| [stenciljs]: https://stenciljs.com/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "showInSidebar": true, | ||
| "displayName": "views.components-multiselect.name" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| <template> | ||
| <div class="container"> | ||
| <div class="jumbotron"> | ||
| <div class="row"> | ||
| <div class="col-xs-12 col-sm-10 col-sm-offset-1"> | ||
| <p>{{ $t('views.components.name') }}</p> | ||
| <h2>{{ $t('views.components-multiselect.name') }}</h2> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <section class="section"> | ||
| <div class="row"> | ||
| <div class="col-xs-12 col-sm-10 col-sm-offset-1"> | ||
| <section class="section"> | ||
| <div class="row"> | ||
| <h5 class="col-xs-12"> | ||
| {{ $t('views.components-multiselect.text') }} | ||
| </h5> | ||
| <choicesjs-stencil class="col-xs-12 multiselect" type="text" v-pre/> | ||
| </div> | ||
| </section> | ||
| <section class="section"> | ||
| <div class="row"> | ||
| <h5 class="col-xs-12"> | ||
| {{ $t('views.components-multiselect.single') }} | ||
| </h5> | ||
| <choicesjs-stencil class="col-xs-12 multiselect" type="single" v-pre/> | ||
| </div> | ||
| </section> | ||
| <section class="section"> | ||
| <div class="row"> | ||
| <h5 class="col-xs-12"> | ||
| {{ $t('views.components-multiselect.multiple') }} | ||
| </h5> | ||
| <choicesjs-stencil class="col-xs-12 multiselect multiline" type="multiple" v-pre/> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="section"> | ||
| <div class="row"> | ||
| <div class="col-xs-12 col-sm-10 col-sm-offset-1"> | ||
| <markdown-renderer type="url" :src="'components.multiselect'"/> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import markdownRenderer from '~/components/markdown/renderer'; | ||
| import { createChoiceTemplate, createItemTemplate } from '~/services/multiselect'; | ||
| const choices = [ | ||
| { value: 'superstar', label: 'Superstar', selected: false, disabled: false, icon: 'footwear', color: 'aliceblue' }, | ||
| { value: 'adizero', label: 'adizero', selected: false, disabled: false, icon: 'footwear', color: 'lightblue' }, | ||
| { value: 'stansmith', label: 'Stan Smith', selected: true, disabled: false, icon: 'footwear', color: 'darkseagreen' }, | ||
| { value: 'gazelle', label: 'Gazelle', selected: false, disabled: false, icon: 'footwear', color: 'grey' }, | ||
| { value: 'ultraboost', label: 'ultraboost', selected: true, disabled: false, icon: 'footwear', color: 'mediumslateblue' }, | ||
| { value: 'nmd', label: 'NMD', selected: false, disabled: false, icon: 'footwear', color: 'brown' }, | ||
| { value: 'yeezy', label: 'YEEZY', selected: false, disabled: false, icon: 'footwear', color: 'gainsboro' }, | ||
| { value: 'campus', label: 'Campus', selected: false, disabled: false, icon: 'footwear', color: 'burlywood' }, | ||
| { value: 'zx500', label: 'ZX 500', selected: false, disabled: true, icon: 'footwear', color: 'greenyellow' }, | ||
| { value: 'samba', label: 'Samba', selected: false, disabled: false, icon: 'footwear', color: 'black' }, | ||
| { value: 'predator', label: 'Predator', selected: false, disabled: false, icon: 'footwear', color: 'burlywood' }, | ||
| { value: 'munchen', label: 'Munchen', selected: false, disabled: false, icon: 'footwear', color: 'darkcyan' }, | ||
| { value: 'zxflux', label: 'ZX Flux', selected: false, disabled: false, icon: 'footwear', color: 'coral' }, | ||
| { value: 'eqt', label: 'EQT', selected: false, disabled: false, icon: 'footwear', color: 'blueviolet' }, | ||
| { value: 'solar', label: 'Solar', selected: false, disabled: false, icon: 'footwear', color: 'orange' }, | ||
| { value: 'copa', label: 'Copa', selected: false, disabled: true, icon: 'footwear', color: 'black' }, | ||
| { value: 'terrex', label: 'Terrex', selected: false, disabled: false, icon: 'footwear', color: 'darkgreen' }, | ||
| { value: 'pureboost', label: 'pureboost', selected: false, disabled: false, icon: 'footwear', color: 'violet' }, | ||
| { value: 'dragon', label: 'Dragon', selected: false, disabled: false, icon: 'footwear', color: 'orange' }, | ||
| { value: 'yung', label: 'YUNG', selected: false, disabled: false, icon: 'footwear', color: 'green' }, | ||
| { value: 'deerupt', label: 'Deerupt', selected: false, disabled: false, icon: 'footwear', color: 'fuchsia' }, | ||
| { value: 'kamanda', label: 'kamanda', selected: false, disabled: false, icon: 'footwear', color: 'burlywood' } | ||
| ]; | ||
| export default { | ||
| mounted() { | ||
| const MAX_ITEMS = 8; | ||
| const selectText = document.querySelector('choicesjs-stencil[type=text]'); | ||
| const selectSingle = document.querySelector('choicesjs-stencil[type=single]'); | ||
| const selectMultiple = document.querySelector('choicesjs-stencil[type=multiple]'); | ||
| selectSingle.choices = choices; | ||
| selectMultiple.choices = choices; | ||
| selectMultiple.maxItemCount = MAX_ITEMS; | ||
| selectMultiple.callbackOnCreateTemplates = (($t) => function(template) { | ||
| return { | ||
| choice: createChoiceTemplate(template, this.config, choices), | ||
| item: createItemTemplate(template, this.config, choices, $t) | ||
| }; | ||
| })(this.$t); | ||
| [ selectText, selectSingle, selectMultiple ].forEach((select) => { | ||
| select.editItems = true; | ||
| select.removeItems = true; | ||
| select.removeItemButton = true; | ||
| select.placeholder = true; | ||
| select.placeholderValue = this.$t('views.components-multiselect.config.placeholder'); | ||
| select.noResultsText = this.$t('views.components-multiselect.config.no-results'); | ||
| select.noChoicesText = this.$t('views.components-multiselect.config.no-choices'); | ||
| select.itemSelectText = this.$t('views.components-multiselect.config.item-selection'); | ||
| select.addItemText = (value) => this.$t('views.components-multiselect.config.add-item', { | ||
| value | ||
| }); | ||
| select.maxItemText = (maxItemCount) => this.$t('views.components-multiselect.config.max-items', { | ||
| maxItemCount | ||
| }); | ||
| }); | ||
| }, | ||
| components: { | ||
| markdownRenderer | ||
| } | ||
| }; | ||
| </script> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| if (process.browser) { | ||
| require('expose-loader?Choices!choices.js'); | ||
| require('choicesjs-stencil/dist/choicesjsstencil'); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| function getChoiceData(data, choices) { | ||
| return { | ||
| ...choices.find((choice) => choice.value === data.value), | ||
| ...data | ||
| }; | ||
| } | ||
|
|
||
| function createIcon(icon, color) { | ||
| const iconClassName = icon ? `yarn-icon yarn-icon--${ icon }` : ''; | ||
|
|
||
| return iconClassName | ||
| ? `<span class="${ iconClassName }" ${ color ? ` style="color: ${ color };"` : '' }></span>` | ||
| : ''; | ||
| } | ||
|
|
||
| function createRemoveButton(label, visible, $t) { | ||
| return visible | ||
| ? `<button type="button" | ||
| class="choices__button" | ||
| data-button="" | ||
| aria-label="${ $t('views.components-multiselect.config.remove-button', { label }) }"> | ||
| ${ $t('views.components-multiselect.config.remove-button', { label }) } | ||
| </button>` | ||
| : ''; | ||
| } | ||
|
|
||
| export function createChoiceTemplate(template, { classNames, itemSelectText }, choices) { | ||
| return (data) => { | ||
| const _data = getChoiceData(data, choices); | ||
| const icon = createIcon(_data.icon, _data.color); | ||
|
|
||
| return template(` | ||
| <div class="${ classNames.item } ${ classNames.itemChoice } | ||
| ${ classNames[_data.disabled ? 'itemDisabled' : 'itemSelectable'] }" | ||
| data-select-text="${ itemSelectText }" | ||
| data-id="${ _data.id }" | ||
| data-value="${ _data.value }" | ||
| data-choice | ||
| data-${ _data.disabled ? 'choice-disabled' : 'choice-selectable' } | ||
| role="${ data.groupId > 0 ? 'treeitem' : 'option' }" | ||
| ${ _data.disabled ? 'aria-disabled="true"' : '' }> | ||
| ${ icon } | ||
| <span>${ _data.label }</span> | ||
| </div> | ||
| `); | ||
| }; | ||
| } | ||
|
|
||
| export function createItemTemplate(template, { classNames, removeItemButton }, choices, $t) { | ||
| return (data) => { | ||
| const _data = getChoiceData(data, choices); | ||
| const icon = createIcon(_data.icon, _data.color); | ||
| const button = createRemoveButton(_data.label, removeItemButton, $t); | ||
|
|
||
| return template(` | ||
| <div class="${ classNames.item } | ||
| ${ _data.highlighted ? classNames.highlightedState : classNames.itemSelectable }" | ||
| data-item | ||
| data-id="${ _data.id }" | ||
| data-value="${ _data.value }" | ||
| ${ _data.active ? 'aria-selected="true"' : '' } | ||
| ${ _data.disabled ? 'aria-disabled="true"' : '' }> | ||
| ${ icon } | ||
| <span>${ _data.label }</span> | ||
| ${ button } | ||
| </div> | ||
| `); | ||
| }; | ||
| } |
Oops, something went wrong.