mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 08:52:19 +02:00
* Add is-selected class when item is selected * Remove console.log * Update README
This commit is contained in:
parent
f745be449d
commit
84b952e115
|
@ -147,6 +147,7 @@ Or include Choices directly:
|
||||||
openState: 'is-open',
|
openState: 'is-open',
|
||||||
disabledState: 'is-disabled',
|
disabledState: 'is-disabled',
|
||||||
highlightedState: 'is-highlighted',
|
highlightedState: 'is-highlighted',
|
||||||
|
selectedState: 'is-selected',
|
||||||
flippedState: 'is-flipped',
|
flippedState: 'is-flipped',
|
||||||
loadingState: 'is-loading',
|
loadingState: 'is-loading',
|
||||||
noResults: 'has-no-results',
|
noResults: 'has-no-results',
|
||||||
|
@ -578,6 +579,7 @@ classNames: {
|
||||||
openState: 'is-open',
|
openState: 'is-open',
|
||||||
disabledState: 'is-disabled',
|
disabledState: 'is-disabled',
|
||||||
highlightedState: 'is-highlighted',
|
highlightedState: 'is-highlighted',
|
||||||
|
selectedState: 'is-selected',
|
||||||
flippedState: 'is-flipped',
|
flippedState: 'is-flipped',
|
||||||
selectedState: 'is-highlighted',
|
selectedState: 'is-highlighted',
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,6 +28,7 @@ export const DEFAULT_CLASSNAMES = {
|
||||||
openState: 'is-open',
|
openState: 'is-open',
|
||||||
disabledState: 'is-disabled',
|
disabledState: 'is-disabled',
|
||||||
highlightedState: 'is-highlighted',
|
highlightedState: 'is-highlighted',
|
||||||
|
selectedState: 'is-selected',
|
||||||
flippedState: 'is-flipped',
|
flippedState: 'is-flipped',
|
||||||
loadingState: 'is-loading',
|
loadingState: 'is-loading',
|
||||||
noResults: 'has-no-results',
|
noResults: 'has-no-results',
|
||||||
|
|
|
@ -35,6 +35,7 @@ describe('constants', () => {
|
||||||
'openState',
|
'openState',
|
||||||
'disabledState',
|
'disabledState',
|
||||||
'highlightedState',
|
'highlightedState',
|
||||||
|
'selectedState',
|
||||||
'flippedState',
|
'flippedState',
|
||||||
'loadingState',
|
'loadingState',
|
||||||
'noResults',
|
'noResults',
|
||||||
|
|
|
@ -2,9 +2,22 @@
|
||||||
* Helpers to create HTML elements used by Choices
|
* Helpers to create HTML elements used by Choices
|
||||||
* Can be overridden by providing `callbackOnCreateTemplates` option
|
* Can be overridden by providing `callbackOnCreateTemplates` option
|
||||||
* @typedef {import('../../types/index').Choices.Templates} Templates
|
* @typedef {import('../../types/index').Choices.Templates} Templates
|
||||||
|
* @typedef {import('../../types/index').Choices.ClassNames} ClassNames
|
||||||
|
* @typedef {import('../../types/index').Choices.Options} Options
|
||||||
|
* @typedef {import('../../types/index').Choices.Item} Item
|
||||||
|
* @typedef {import('../../types/index').Choices.Choice} Choice
|
||||||
|
* @typedef {import('../../types/index').Choices.Group} Group
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const TEMPLATES = /** @type {Templates} */ ({
|
export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
|
/**
|
||||||
|
* @param {Partial<ClassNames>} classNames
|
||||||
|
* @param {"ltr" | "rtl" | "auto"} dir
|
||||||
|
* @param {boolean} isSelectElement
|
||||||
|
* @param {boolean} isSelectOneElement
|
||||||
|
* @param {boolean} searchEnabled
|
||||||
|
* @param {"select-one" | "select-multiple" | "text"} passedElementType
|
||||||
|
*/
|
||||||
containerOuter(
|
containerOuter(
|
||||||
{ containerOuter },
|
{ containerOuter },
|
||||||
dir,
|
dir,
|
||||||
|
@ -40,18 +53,29 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
return div;
|
return div;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Partial<ClassNames>} classNames
|
||||||
|
*/
|
||||||
containerInner({ containerInner }) {
|
containerInner({ containerInner }) {
|
||||||
return Object.assign(document.createElement('div'), {
|
return Object.assign(document.createElement('div'), {
|
||||||
className: containerInner,
|
className: containerInner,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Partial<ClassNames>} classNames
|
||||||
|
* @param {boolean} isSelectOneElement
|
||||||
|
*/
|
||||||
itemList({ list, listSingle, listItems }, isSelectOneElement) {
|
itemList({ list, listSingle, listItems }, isSelectOneElement) {
|
||||||
return Object.assign(document.createElement('div'), {
|
return Object.assign(document.createElement('div'), {
|
||||||
className: `${list} ${isSelectOneElement ? listSingle : listItems}`,
|
className: `${list} ${isSelectOneElement ? listSingle : listItems}`,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Partial<ClassNames>} classNames
|
||||||
|
* @param {string} value
|
||||||
|
*/
|
||||||
placeholder({ placeholder }, value) {
|
placeholder({ placeholder }, value) {
|
||||||
return Object.assign(document.createElement('div'), {
|
return Object.assign(document.createElement('div'), {
|
||||||
className: placeholder,
|
className: placeholder,
|
||||||
|
@ -59,6 +83,11 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Partial<ClassNames>} classNames
|
||||||
|
* @param {Item} item
|
||||||
|
* @param {boolean} removeItemButton
|
||||||
|
*/
|
||||||
item(
|
item(
|
||||||
{ item, button, highlightedState, itemSelectable, placeholder },
|
{ item, button, highlightedState, itemSelectable, placeholder },
|
||||||
{
|
{
|
||||||
|
@ -122,6 +151,10 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
return div;
|
return div;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Partial<ClassNames>} classNames
|
||||||
|
* @param {boolean} isSelectOneElement
|
||||||
|
*/
|
||||||
choiceList({ list }, isSelectOneElement) {
|
choiceList({ list }, isSelectOneElement) {
|
||||||
const div = Object.assign(document.createElement('div'), {
|
const div = Object.assign(document.createElement('div'), {
|
||||||
className: list,
|
className: list,
|
||||||
|
@ -135,6 +168,10 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
return div;
|
return div;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Partial<ClassNames>} classNames
|
||||||
|
* @param {Group} group
|
||||||
|
*/
|
||||||
choiceGroup({ group, groupHeading, itemDisabled }, { id, value, disabled }) {
|
choiceGroup({ group, groupHeading, itemDisabled }, { id, value, disabled }) {
|
||||||
const div = Object.assign(document.createElement('div'), {
|
const div = Object.assign(document.createElement('div'), {
|
||||||
className: `${group} ${disabled ? itemDisabled : ''}`,
|
className: `${group} ${disabled ? itemDisabled : ''}`,
|
||||||
|
@ -162,15 +199,28 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
return div;
|
return div;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Partial<ClassNames>} classNames
|
||||||
|
* @param {Choice} choice
|
||||||
|
* @param {Options['itemSelectText']} selectText
|
||||||
|
*/
|
||||||
choice(
|
choice(
|
||||||
{ item, itemChoice, itemSelectable, itemDisabled, placeholder },
|
{
|
||||||
|
item,
|
||||||
|
itemChoice,
|
||||||
|
itemSelectable,
|
||||||
|
selectedState,
|
||||||
|
itemDisabled,
|
||||||
|
placeholder,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id,
|
id,
|
||||||
value,
|
value,
|
||||||
label,
|
label,
|
||||||
groupId,
|
groupId,
|
||||||
elementId,
|
elementId,
|
||||||
disabled,
|
disabled: isDisabled,
|
||||||
|
selected: isSelected,
|
||||||
placeholder: isPlaceholder,
|
placeholder: isPlaceholder,
|
||||||
},
|
},
|
||||||
selectText,
|
selectText,
|
||||||
|
@ -178,11 +228,17 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
const div = Object.assign(document.createElement('div'), {
|
const div = Object.assign(document.createElement('div'), {
|
||||||
id: elementId,
|
id: elementId,
|
||||||
innerHTML: label,
|
innerHTML: label,
|
||||||
className: `${item} ${itemChoice} ${
|
className: `${item} ${itemChoice}`,
|
||||||
disabled ? itemDisabled : itemSelectable
|
|
||||||
} ${isPlaceholder ? placeholder : ''}`,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (isSelected) {
|
||||||
|
div.classList.add(selectedState);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isPlaceholder) {
|
||||||
|
div.classList.add(placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
div.setAttribute('role', groupId > 0 ? 'treeitem' : 'option');
|
div.setAttribute('role', groupId > 0 ? 'treeitem' : 'option');
|
||||||
|
|
||||||
Object.assign(div.dataset, {
|
Object.assign(div.dataset, {
|
||||||
|
@ -192,16 +248,22 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
selectText,
|
selectText,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (disabled) {
|
if (isDisabled) {
|
||||||
|
div.classList.add(itemDisabled);
|
||||||
div.dataset.choiceDisabled = '';
|
div.dataset.choiceDisabled = '';
|
||||||
div.setAttribute('aria-disabled', 'true');
|
div.setAttribute('aria-disabled', 'true');
|
||||||
} else {
|
} else {
|
||||||
|
div.classList.add(itemSelectable);
|
||||||
div.dataset.choiceSelectable = '';
|
div.dataset.choiceSelectable = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
return div;
|
return div;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Partial<ClassNames>} classNames
|
||||||
|
* @param {string} placeholderValue
|
||||||
|
*/
|
||||||
input({ input, inputCloned }, placeholderValue) {
|
input({ input, inputCloned }, placeholderValue) {
|
||||||
const inp = Object.assign(document.createElement('input'), {
|
const inp = Object.assign(document.createElement('input'), {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
|
@ -218,6 +280,9 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
return inp;
|
return inp;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Partial<ClassNames>} classNames
|
||||||
|
*/
|
||||||
dropdown({ list, listDropdown }) {
|
dropdown({ list, listDropdown }) {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
|
|
||||||
|
@ -227,6 +292,12 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
return div;
|
return div;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {Partial<ClassNames>} classNames
|
||||||
|
* @param {string} innerHTML
|
||||||
|
* @param {"no-choices" | "no-results" | ""} type
|
||||||
|
*/
|
||||||
notice({ item, itemChoice, noResults, noChoices }, innerHTML, type = '') {
|
notice({ item, itemChoice, noResults, noChoices }, innerHTML, type = '') {
|
||||||
const classes = [item, itemChoice];
|
const classes = [item, itemChoice];
|
||||||
|
|
||||||
|
@ -242,6 +313,9 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Item} option
|
||||||
|
*/
|
||||||
option({ label, value, customProperties, active, disabled }) {
|
option({ label, value, customProperties, active, disabled }) {
|
||||||
const opt = new Option(label, value, false, active);
|
const opt = new Option(label, value, false, active);
|
||||||
|
|
||||||
|
|
|
@ -24,7 +24,7 @@ function expectEqualElements(element1, element2) {
|
||||||
describe('templates', () => {
|
describe('templates', () => {
|
||||||
describe('containerOuter', () => {
|
describe('containerOuter', () => {
|
||||||
const classes = {
|
const classes = {
|
||||||
containerOuter: 'test',
|
containerOuter: 'class-1',
|
||||||
};
|
};
|
||||||
const direction = 'rtl';
|
const direction = 'rtl';
|
||||||
|
|
||||||
|
@ -158,7 +158,7 @@ describe('templates', () => {
|
||||||
describe('containerInner', () => {
|
describe('containerInner', () => {
|
||||||
it('returns expected html', () => {
|
it('returns expected html', () => {
|
||||||
const classes = {
|
const classes = {
|
||||||
containerInner: 'test',
|
containerInner: 'class-1',
|
||||||
};
|
};
|
||||||
const expectedOutput = strToEl(
|
const expectedOutput = strToEl(
|
||||||
`<div class="${classes.containerInner}"></div>`,
|
`<div class="${classes.containerInner}"></div>`,
|
||||||
|
@ -171,9 +171,9 @@ describe('templates', () => {
|
||||||
|
|
||||||
describe('itemList', () => {
|
describe('itemList', () => {
|
||||||
const classes = {
|
const classes = {
|
||||||
list: 'test 1',
|
list: 'class-1',
|
||||||
listSingle: 'test 2',
|
listSingle: 'class-2',
|
||||||
listItems: 'test 3',
|
listItems: 'class-3',
|
||||||
};
|
};
|
||||||
|
|
||||||
describe('select one element', () => {
|
describe('select one element', () => {
|
||||||
|
@ -202,7 +202,7 @@ describe('templates', () => {
|
||||||
describe('placeholder', () => {
|
describe('placeholder', () => {
|
||||||
it('returns expected html', () => {
|
it('returns expected html', () => {
|
||||||
const classes = {
|
const classes = {
|
||||||
placeholder: 'test',
|
placeholder: 'class-1',
|
||||||
};
|
};
|
||||||
const value = 'test';
|
const value = 'test';
|
||||||
const expectedOutput = strToEl(`
|
const expectedOutput = strToEl(`
|
||||||
|
@ -215,7 +215,7 @@ describe('templates', () => {
|
||||||
|
|
||||||
describe('choiceList', () => {
|
describe('choiceList', () => {
|
||||||
const classes = {
|
const classes = {
|
||||||
list: 'test',
|
list: 'class-1',
|
||||||
};
|
};
|
||||||
|
|
||||||
describe('select one element', () => {
|
describe('select one element', () => {
|
||||||
|
@ -252,9 +252,9 @@ describe('templates', () => {
|
||||||
|
|
||||||
describe('choiceGroup', () => {
|
describe('choiceGroup', () => {
|
||||||
const classes = {
|
const classes = {
|
||||||
group: 'test 1',
|
group: 'class-1',
|
||||||
groupHeading: 'test 2',
|
groupHeading: 'class-2',
|
||||||
itemDisabled: 'test 3',
|
itemDisabled: 'class-3',
|
||||||
};
|
};
|
||||||
|
|
||||||
let data;
|
let data;
|
||||||
|
@ -316,11 +316,12 @@ describe('templates', () => {
|
||||||
|
|
||||||
describe('choice', () => {
|
describe('choice', () => {
|
||||||
const classes = {
|
const classes = {
|
||||||
item: 'test 1',
|
item: 'class-1',
|
||||||
itemChoice: 'test 2',
|
itemChoice: 'class-2',
|
||||||
itemDisabled: 'test 3',
|
itemDisabled: 'class-3',
|
||||||
itemSelectable: 'test 4',
|
itemSelectable: 'class-4',
|
||||||
placeholder: 'test 5',
|
placeholder: 'class-5',
|
||||||
|
selectedState: 'class-6',
|
||||||
};
|
};
|
||||||
|
|
||||||
const itemSelectText = 'test 6';
|
const itemSelectText = 'test 6';
|
||||||
|
@ -356,6 +357,8 @@ describe('templates', () => {
|
||||||
`);
|
`);
|
||||||
const actualOutput = templates.choice(classes, data, itemSelectText);
|
const actualOutput = templates.choice(classes, data, itemSelectText);
|
||||||
|
|
||||||
|
console.log(actualOutput);
|
||||||
|
|
||||||
expectEqualElements(actualOutput, expectedOutput);
|
expectEqualElements(actualOutput, expectedOutput);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -451,8 +454,8 @@ describe('templates', () => {
|
||||||
|
|
||||||
describe('input', () => {
|
describe('input', () => {
|
||||||
const classes = {
|
const classes = {
|
||||||
input: 'test 1',
|
input: 'class-1',
|
||||||
inputCloned: 'test 2',
|
inputCloned: 'class-2',
|
||||||
};
|
};
|
||||||
|
|
||||||
it('returns expected html', () => {
|
it('returns expected html', () => {
|
||||||
|
@ -479,9 +482,10 @@ describe('templates', () => {
|
||||||
|
|
||||||
describe('dropdown', () => {
|
describe('dropdown', () => {
|
||||||
const classes = {
|
const classes = {
|
||||||
list: 'test-1',
|
list: 'class-1',
|
||||||
listDropdown: 'test-2',
|
listDropdown: 'class-2',
|
||||||
};
|
};
|
||||||
|
|
||||||
it('returns expected html', () => {
|
it('returns expected html', () => {
|
||||||
const value = 'test';
|
const value = 'test';
|
||||||
const expectedOutput = strToEl(
|
const expectedOutput = strToEl(
|
||||||
|
@ -495,10 +499,10 @@ describe('templates', () => {
|
||||||
|
|
||||||
describe('notice', () => {
|
describe('notice', () => {
|
||||||
const classes = {
|
const classes = {
|
||||||
item: 'test-1',
|
item: 'class-1',
|
||||||
itemChoice: 'test-2',
|
itemChoice: 'class-2',
|
||||||
noResults: 'test-3',
|
noResults: 'class-3',
|
||||||
noChoices: 'test-4',
|
noChoices: 'class-4',
|
||||||
};
|
};
|
||||||
|
|
||||||
const label = 'test';
|
const label = 'test';
|
||||||
|
|
2
types/index.d.ts
vendored
2
types/index.d.ts
vendored
|
@ -266,6 +266,8 @@ declare namespace Choices {
|
||||||
disabledState: string;
|
disabledState: string;
|
||||||
/** @default 'is-highlighted' */
|
/** @default 'is-highlighted' */
|
||||||
highlightedState: string;
|
highlightedState: string;
|
||||||
|
/** @default 'is-selected' */
|
||||||
|
selectedState: string;
|
||||||
/** @default 'is-flipped' */
|
/** @default 'is-flipped' */
|
||||||
flippedState: string;
|
flippedState: string;
|
||||||
/** @default 'is-loading' */
|
/** @default 'is-loading' */
|
||||||
|
|
Loading…
Reference in a new issue