deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-06-15 12:16:11 +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 {
item: ({ classNames }, data) => {
return template(`
<div class="${classNames.item} ${
data.highlighted
<div class="${getClassNames(classNames.item).join(' ')} ${
getClassNames(data.highlighted
? classNames.highlightedState
: classNames.itemSelectable
: classNames.itemSelectable).join(' ')
} ${
data.placeholder ? classNames.placeholder : ''
}" data-item data-id="${data.id}" data-value="${data.value}" ${
@ -713,8 +713,8 @@ const example = new Choices(element, {
},
choice: ({ classNames }, data) => {
return template(`
<div class="${classNames.item} ${classNames.itemChoice} ${
data.disabled ? classNames.itemDisabled : classNames.itemSelectable
<div class="${getClassNames(classNames.item).join(' ')} ${getClassNames(classNames.itemChoice).join(' ')} ${
getClassNames(data.disabled ? classNames.itemDisabled : classNames.itemSelectable).join(' ')
}" data-select-text="${this.config.itemSelectText}" data-choice ${
data.disabled
? '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 {
* item: (data) => {
* 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}
* </div>
* `);
* },
* choice: (data) => {
* 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}
* </div>
* `);

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

@ -484,14 +484,14 @@ export interface Options {
* return {
* item: (data) => {
* 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}
* </div>
* `);
* },
* choice: (data) => {
* 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}
* </div>
* `);

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

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