deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-06-08 08:52:19 +02:00
Code Issues Projects Releases Wiki Activity

fix: add missing classnames transformation

Browse source
This commit is contained in:
Gaetan 2022-11-20 14:19:31 +01:00
parent 971d602d35
commit cdb94bdffb
4 changed files with 550 additions and 480 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -698,10 +698,10 @@ const example = new Choices(element, {
return { return {
item: ({ classNames }, data) => { item: ({ classNames }, data) => {
return template(` return template(`
<div class="${classNames.item} ${ <div class="${getClassNames(classNames.item).join(' ')} ${
data.highlighted getClassNames(data.highlighted
? classNames.highlightedState ? classNames.highlightedState
: classNames.itemSelectable : classNames.itemSelectable).join(' ')
} ${ } ${
data.placeholder ? classNames.placeholder : '' data.placeholder ? classNames.placeholder : ''
}" data-item data-id="${data.id}" data-value="${data.value}" ${ }" data-item data-id="${data.id}" data-value="${data.value}" ${
@ -713,8 +713,8 @@ const example = new Choices(element, {
}, },
choice: ({ classNames }, data) => { choice: ({ classNames }, data) => {
return template(` return template(`
<div class="${classNames.item} ${classNames.itemChoice} ${ <div class="${getClassNames(classNames.item).join(' ')} ${getClassNames(classNames.itemChoice).join(' ')} ${
data.disabled ? classNames.itemDisabled : classNames.itemSelectable getClassNames(data.disabled ? classNames.itemDisabled : classNames.itemSelectable).join(' ')
}" data-select-text="${this.config.itemSelectText}" data-choice ${ }" data-select-text="${this.config.itemSelectText}" data-choice ${
data.disabled data.disabled
? 'data-choice-disabled aria-disabled="true"' ? 'data-choice-disabled aria-disabled="true"'

4
public/types/src/scripts/interfaces/options.d.ts vendored
View file

@ -440,14 +440,14 @@ export interface Options {
* return { * return {
* item: (data) => { * item: (data) => {
* return template(` * 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"' : ''}> * <div class="${getClassNames(classNames.item).join(' ')} ${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"' : ''}>
* <span>&bigstar;</span> ${data.label} * <span>&bigstar;</span> ${data.label}
* </div> * </div>
* `); * `);
* }, * },
* choice: (data) => { * choice: (data) => {
* return template(` * return template(`
* <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}> * <div class="${getClassNames(classNames.item).join(' ')} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
* <span>&bigstar;</span> ${data.label} * <span>&bigstar;</span> ${data.label}
* </div> * </div>
* `); * `);

4
src/scripts/interfaces/options.ts
View file

@ -484,14 +484,14 @@ export interface Options {
* return { * return {
* item: (data) => { * item: (data) => {
* return template(` * 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"' : ''}> * <div class="${getClassNames(classNames.item).join(' ')} ${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"' : ''}>
* <span>&bigstar;</span> ${data.label} * <span>&bigstar;</span> ${data.label}
* </div> * </div>
* `); * `);
* }, * },
* choice: (data) => { * choice: (data) => {
* return template(` * return template(`
* <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}> * <div class="${getClassNames(classNames.item).join(' ')} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
* <span>&bigstar;</span> ${data.label} * <span>&bigstar;</span> ${data.label}
* </div> * </div>
* `); * `);

120
src/scripts/templates.test.ts
View file

@ -1,6 +1,6 @@
import { expect } from 'chai'; import { expect } from 'chai';
import templates from './templates'; import templates from './templates';
import { strToEl } from './lib/utils'; import { strToEl, getClassNames } from './lib/utils';
import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from './defaults'; import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from './defaults';
import { Options } from './interfaces/options'; import { Options } from './interfaces/options';
import { ClassNames } from './interfaces/class-names'; import { ClassNames } from './interfaces/class-names';
@ -56,7 +56,9 @@ describe('templates', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${options.classNames.containerOuter}" class="${getClassNames(options.classNames.containerOuter).join(
' ',
)}"
data-type="${passedElementType}" data-type="${passedElementType}"
role="combobox" role="combobox"
aria-autocomplete="list" aria-autocomplete="list"
@ -123,7 +125,9 @@ describe('templates', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${options.classNames.containerOuter}" class="${getClassNames(options.classNames.containerOuter).join(
' ',
)}"
data-type="${passedElementType}" data-type="${passedElementType}"
role="listbox" role="listbox"
aria-haspopup="true" aria-haspopup="true"
@ -156,7 +160,9 @@ describe('templates', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${options.classNames.containerOuter}" class="${getClassNames(options.classNames.containerOuter).join(
' ',
)}"
data-type="${passedElementType}" data-type="${passedElementType}"
role="listbox" role="listbox"
tabindex="0" tabindex="0"
@ -191,7 +197,9 @@ describe('templates', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${options.classNames.containerOuter}" class="${getClassNames(options.classNames.containerOuter).join(
' ',
)}"
data-type="${passedElementType}" data-type="${passedElementType}"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
@ -220,7 +228,9 @@ describe('templates', () => {
containerInner: 'class-1', containerInner: 'class-1',
}); });
const expectedOutput = strToEl( const expectedOutput = strToEl(
`<div class="${innerOptions.classNames.containerInner}"></div>`, `<div class="${getClassNames(
innerOptions.classNames.containerInner,
).join(' ')}"></div>`,
); );
const actualOutput = templates.containerInner(innerOptions); const actualOutput = templates.containerInner(innerOptions);
@ -238,7 +248,11 @@ describe('templates', () => {
describe('select one element', () => { describe('select one element', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl( const expectedOutput = strToEl(
`<div class="${itemOptions.classNames.list} ${itemOptions.classNames.listSingle}"></div>`, `<div class="${getClassNames(itemOptions.classNames.list).join(
' ',
)} ${getClassNames(itemOptions.classNames.listSingle).join(
' ',
)}"></div>`,
); );
const actualOutput = templates.itemList(itemOptions, true); const actualOutput = templates.itemList(itemOptions, true);
@ -249,7 +263,11 @@ describe('templates', () => {
describe('non select one element', () => { describe('non select one element', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl( const expectedOutput = strToEl(
`<div class="${itemOptions.classNames.list} ${itemOptions.classNames.listItems}"></div>`, `<div class="${getClassNames(itemOptions.classNames.list).join(
' ',
)} ${getClassNames(itemOptions.classNames.listItems).join(
' ',
)}"></div>`,
); );
const actualOutput = templates.itemList(itemOptions, false); const actualOutput = templates.itemList(itemOptions, false);
@ -265,7 +283,9 @@ describe('templates', () => {
}); });
const value = 'test'; const value = 'test';
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div class="${placeholderOptions.classNames.placeholder}">${value}</div>`); <div class="${getClassNames(
placeholderOptions.classNames.placeholder,
).join(' ')}">${value}</div>`);
const actualOutput = templates.placeholder(placeholderOptions, value); const actualOutput = templates.placeholder(placeholderOptions, value);
expectEqualElements(actualOutput, expectedOutput); expectEqualElements(actualOutput, expectedOutput);
@ -281,7 +301,9 @@ describe('templates', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${choiceListOptions.classNames.list}" class="${getClassNames(choiceListOptions.classNames.list).join(
' ',
)}"
role="listbox" role="listbox"
> >
</div> </div>
@ -296,7 +318,9 @@ describe('templates', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${choiceListOptions.classNames.list}" class="${getClassNames(choiceListOptions.classNames.list).join(
' ',
)}"
role="listbox" role="listbox"
aria-multiselectable="true" aria-multiselectable="true"
> >
@ -330,13 +354,15 @@ describe('templates', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${groupOptions.classNames.group}" class="${getClassNames(groupOptions.classNames.group).join(' ')}"
data-group data-group
data-id="${data.id}" data-id="${data.id}"
data-value="${data.value}" data-value="${data.value}"
role="group" role="group"
> >
<div class="${groupOptions.classNames.groupHeading}">${data.value}</div> <div class="${getClassNames(
groupOptions.classNames.groupHeading,
).join(' ')}">${data.value}</div>
</div> </div>
`); `);
const actualOutput = templates.choiceGroup(groupOptions, data); const actualOutput = templates.choiceGroup(groupOptions, data);
@ -356,14 +382,18 @@ describe('templates', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${groupOptions.classNames.group} ${groupOptions.classNames.itemDisabled}" class="${getClassNames(groupOptions.classNames.group).join(
' ',
)} ${getClassNames(groupOptions.classNames.itemDisabled).join(' ')}"
data-group data-group
data-id="${data.id}" data-id="${data.id}"
data-value="${data.value}" data-value="${data.value}"
role="group" role="group"
aria-disabled="true" aria-disabled="true"
> >
<div class="${groupOptions.classNames.groupHeading}">${data.value}</div> <div class="${getClassNames(
groupOptions.classNames.groupHeading,
).join(' ')}">${data.value}</div>
</div> </div>
`); `);
const actualOutput = templates.choiceGroup(groupOptions, data); const actualOutput = templates.choiceGroup(groupOptions, data);
@ -403,7 +433,11 @@ describe('templates', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${choiceOptions.classNames.item} ${choiceOptions.classNames.itemChoice} ${choiceOptions.classNames.itemSelectable}" class="${getClassNames(choiceOptions.classNames.item).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemChoice).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemSelectable).join(' ')}"
data-select-text="${itemSelectText}" data-select-text="${itemSelectText}"
data-choice data-choice
data-id="${data.id}" data-id="${data.id}"
@ -436,7 +470,11 @@ describe('templates', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${choiceOptions.classNames.item} ${choiceOptions.classNames.itemChoice} ${choiceOptions.classNames.itemDisabled}" class="${getClassNames(choiceOptions.classNames.item).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemChoice).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemDisabled).join(' ')}"
data-select-text="${itemSelectText}" data-select-text="${itemSelectText}"
data-choice data-choice
data-id="${data.id}" data-id="${data.id}"
@ -470,7 +508,13 @@ describe('templates', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${choiceOptions.classNames.item} ${choiceOptions.classNames.itemChoice} ${choiceOptions.classNames.selectedState} ${choiceOptions.classNames.itemSelectable}" class="${getClassNames(choiceOptions.classNames.item).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemChoice).join(
' ',
)} ${choiceOptions.classNames.selectedState} ${getClassNames(
choiceOptions.classNames.itemSelectable,
).join(' ')}"
data-select-text="${itemSelectText}" data-select-text="${itemSelectText}"
data-choice data-choice
data-id="${data.id}" data-id="${data.id}"
@ -503,7 +547,13 @@ describe('templates', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${choiceOptions.classNames.item} ${choiceOptions.classNames.itemChoice} ${choiceOptions.classNames.placeholder} ${choiceOptions.classNames.itemSelectable}" class="${getClassNames(choiceOptions.classNames.item).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemChoice).join(
' ',
)} ${choiceOptions.classNames.placeholder} ${getClassNames(
choiceOptions.classNames.itemSelectable,
).join(' ')}"
data-select-text="${itemSelectText}" data-select-text="${itemSelectText}"
data-choice data-choice
data-id="${data.id}" data-id="${data.id}"
@ -536,7 +586,11 @@ describe('templates', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div <div
class="${choiceOptions.classNames.item} ${choiceOptions.classNames.itemChoice} ${choiceOptions.classNames.itemSelectable}" class="${getClassNames(choiceOptions.classNames.item).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemChoice).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemSelectable).join(' ')}"
data-select-text="${itemSelectText}" data-select-text="${itemSelectText}"
data-choice data-choice
data-id="${data.id}" data-id="${data.id}"
@ -575,7 +629,9 @@ describe('templates', () => {
<input <input
type="search" type="search"
name="search_terms" name="search_terms"
class="${inputOptions.classNames.input} ${inputOptions.classNames.inputCloned}" class="${getClassNames(inputOptions.classNames.input).join(
' ',
)} ${getClassNames(inputOptions.classNames.inputCloned).join(' ')}"
autocomplete="off" autocomplete="off"
role="textbox" role="textbox"
aria-autocomplete="list" aria-autocomplete="list"
@ -596,7 +652,11 @@ describe('templates', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl( const expectedOutput = strToEl(
`<div class="${dropdownOptions.classNames.list} ${dropdownOptions.classNames.listDropdown}" aria-expanded="false"></div>`, `<div class="${getClassNames(dropdownOptions.classNames.list).join(
' ',
)} ${getClassNames(dropdownOptions.classNames.listDropdown).join(
' ',
)}" aria-expanded="false"></div>`,
); );
const actualOutput = templates.dropdown(dropdownOptions); const actualOutput = templates.dropdown(dropdownOptions);
@ -616,7 +676,9 @@ describe('templates', () => {
it('returns expected html', () => { it('returns expected html', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div class="${noticeOptions.classNames.item} ${noticeOptions.classNames.itemChoice}"> <div class="${getClassNames(noticeOptions.classNames.item).join(
' ',
)} ${getClassNames(noticeOptions.classNames.itemChoice).join(' ')}">
${label} ${label}
</div> </div>
`); `);
@ -629,7 +691,11 @@ describe('templates', () => {
describe('no results', () => { describe('no results', () => {
it('adds no results classname', () => { it('adds no results classname', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div class="${noticeOptions.classNames.item} ${noticeOptions.classNames.itemChoice} ${noticeOptions.classNames.noResults}"> <div class="${getClassNames(noticeOptions.classNames.item).join(
' ',
)} ${getClassNames(noticeOptions.classNames.itemChoice).join(
' ',
)} ${getClassNames(noticeOptions.classNames.noResults).join(' ')}">
${label} ${label}
</div> </div>
`); `);
@ -646,7 +712,11 @@ describe('templates', () => {
describe('no choices', () => { describe('no choices', () => {
it('adds no choices classname', () => { it('adds no choices classname', () => {
const expectedOutput = strToEl(` const expectedOutput = strToEl(`
<div class="${noticeOptions.classNames.item} ${noticeOptions.classNames.itemChoice} ${noticeOptions.classNames.noChoices}"> <div class="${getClassNames(noticeOptions.classNames.item).join(
' ',
)} ${getClassNames(noticeOptions.classNames.itemChoice).join(
' ',
)} ${getClassNames(noticeOptions.classNames.noChoices).join(' ')}">
${label} ${label}
</div> </div>
`); `);