deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-18 05:26:35 +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

12
README.md
View file

@ -342,7 +342,7 @@ Pass an array of objects:
**Usage:** Whether HTML should be rendered in all Choices elements. If `false`, all elements (placeholder, items, etc.) will be treated as plain text. If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source. **Usage:** Whether HTML should be rendered in all Choices elements. If `false`, all elements (placeholder, items, etc.) will be treated as plain text. If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source.
**Deprecation Warning:** This will default to `false` in a future release. **Deprecation Warning:** This will default to `false` in a future release.
### duplicateItemsAllowed ### duplicateItemsAllowed
@ -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"'

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

@ -14,451 +14,451 @@ import { Types } from './types';
* - **Item:** An item is an inputted value **_(text input)_** or a selected choice **_(select element)_**. In the context of a select element, an item is equivelent to a selected option element: `<option value="Hello" selected></option>` whereas in the context of a text input an item is equivelant to `<input type="text" value="Hello">` * - **Item:** An item is an inputted value **_(text input)_** or a selected choice **_(select element)_**. In the context of a select element, an item is equivelent to a selected option element: `<option value="Hello" selected></option>` whereas in the context of a text input an item is equivelant to `<input type="text" value="Hello">`
*/ */
export interface Options { export interface Options {
/** /**
* Optionally suppress console errors and warnings. * Optionally suppress console errors and warnings.
* *
* **Input types affected:** text, select-single, select-multiple * **Input types affected:** text, select-single, select-multiple
* *
* @default false * @default false
*/ */
silent: boolean; silent: boolean;
/** /**
* Add pre-selected items (see terminology) to text input. * Add pre-selected items (see terminology) to text input.
* *
* **Input types affected:** text * **Input types affected:** text
* *
* @example * @example
* ``` * ```
* ['value 1', 'value 2', 'value 3'] * ['value 1', 'value 2', 'value 3']
* ``` * ```
* *
* @example * @example
* ``` * ```
* [{ * [{
* value: 'Value 1', * value: 'Value 1',
* label: 'Label 1', * label: 'Label 1',
* id: 1 * id: 1
* }, * },
* { * {
* value: 'Value 2', * value: 'Value 2',
* label: 'Label 2', * label: 'Label 2',
* id: 2, * id: 2,
* customProperties: { * customProperties: {
* random: 'I am a custom property' * random: 'I am a custom property'
* } * }
* }] * }]
* ``` * ```
* *
* @default [] * @default []
*/ */
items: string[] | Choice[]; items: string[] | Choice[];
/** /**
* Add choices (see terminology) to select input. * Add choices (see terminology) to select input.
* *
* **Input types affected:** select-one, select-multiple * **Input types affected:** select-one, select-multiple
* *
* @example * @example
* ``` * ```
* [{ * [{
* value: 'Option 1', * value: 'Option 1',
* label: 'Option 1', * label: 'Option 1',
* selected: true, * selected: true,
* disabled: false, * disabled: false,
* }, * },
* { * {
* value: 'Option 2', * value: 'Option 2',
* label: 'Option 2', * label: 'Option 2',
* selected: false, * selected: false,
* disabled: true, * disabled: true,
* customProperties: { * customProperties: {
* description: 'Custom description about Option 2', * description: 'Custom description about Option 2',
* random: 'Another random custom property' * random: 'Another random custom property'
* }, * },
* }] * }]
* ``` * ```
* *
* @default [] * @default []
*/ */
choices: Choice[]; choices: Choice[];
/** /**
* The amount of choices to be rendered within the dropdown list `("-1" indicates no limit)`. This is useful if you have a lot of choices where it is easier for a user to use the search area to find a choice. * The amount of choices to be rendered within the dropdown list `("-1" indicates no limit)`. This is useful if you have a lot of choices where it is easier for a user to use the search area to find a choice.
* *
* **Input types affected:** select-one, select-multiple * **Input types affected:** select-one, select-multiple
* *
* @default -1 * @default -1
*/ */
renderChoiceLimit: number; renderChoiceLimit: number;
/** /**
* The amount of items a user can input/select `("-1" indicates no limit)`. * The amount of items a user can input/select `("-1" indicates no limit)`.
* *
* **Input types affected:** text, select-multiple * **Input types affected:** text, select-multiple
* *
* @default -1 * @default -1
*/ */
maxItemCount: number; maxItemCount: number;
/** /**
* Whether a user can add items. * Whether a user can add items.
* *
* **Input types affected:** text * **Input types affected:** text
* *
* @default true * @default true
*/ */
addItems: boolean; addItems: boolean;
/** /**
* A filter that will need to pass for a user to successfully add an item. * A filter that will need to pass for a user to successfully add an item.
* *
* **Input types affected:** text * **Input types affected:** text
* *
* @default null * @default null
*/ */
addItemFilter: string | RegExp | Types.FilterFunction | null; addItemFilter: string | RegExp | Types.FilterFunction | null;
/** /**
* The text that is shown when a user has inputted a new item but has not pressed the enter key. To access the current input value, pass a function with a `value` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string. * The text that is shown when a user has inputted a new item but has not pressed the enter key. To access the current input value, pass a function with a `value` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string.
* *
* **Input types affected:** text * **Input types affected:** text
* *
* @default * @default
* ``` * ```
* (value) => `Press Enter to add <b>"${value}"</b>`; * (value) => `Press Enter to add <b>"${value}"</b>`;
* ``` * ```
*/ */
addItemText: string | Types.NoticeStringFunction; addItemText: string | Types.NoticeStringFunction;
/** /**
* Whether a user can remove items. * Whether a user can remove items.
* *
* **Input types affected:** text, select-multiple * **Input types affected:** text, select-multiple
* *
* @default true * @default true
*/ */
removeItems: boolean; removeItems: boolean;
/** /**
* Whether each item should have a remove button. * Whether each item should have a remove button.
* *
* **Input types affected:** text, select-one, select-multiple * **Input types affected:** text, select-one, select-multiple
* *
* @default false * @default false
*/ */
removeItemButton: boolean; removeItemButton: boolean;
/** /**
* Whether a user can edit items. An item's value can be edited by pressing the backspace. * Whether a user can edit items. An item's value can be edited by pressing the backspace.
* *
* **Input types affected:** text * **Input types affected:** text
* *
* @default false * @default false
*/ */
editItems: boolean; editItems: boolean;
/** /**
* Whether HTML should be rendered in all Choices elements. * Whether HTML should be rendered in all Choices elements.
* If `false`, all elements (placeholder, items, etc.) will be treated as plain text. * If `false`, all elements (placeholder, items, etc.) will be treated as plain text.
* If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source. * If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source.
* *
* **Deprecation Warning:** This will default to `false` in a future release. * **Deprecation Warning:** This will default to `false` in a future release.
* *
* **Input types affected:** text, select-one, select-multiple * **Input types affected:** text, select-one, select-multiple
* *
* @default true * @default true
*/ */
allowHTML: boolean; allowHTML: boolean;
/** /**
* Whether each inputted/chosen item should be unique. * Whether each inputted/chosen item should be unique.
* *
* **Input types affected:** text, select-multiple * **Input types affected:** text, select-multiple
* *
* @default true * @default true
*/ */
duplicateItemsAllowed: boolean; duplicateItemsAllowed: boolean;
/** /**
* What divides each value. The default delimiter separates each value with a comma: `"Value 1, Value 2, Value 3"`. * What divides each value. The default delimiter separates each value with a comma: `"Value 1, Value 2, Value 3"`.
* *
* **Input types affected:** text * **Input types affected:** text
* *
* @default ',' * @default ','
*/ */
delimiter: string; delimiter: string;
/** /**
* Whether a user can paste into the input. * Whether a user can paste into the input.
* *
* **Input types affected:** text, select-multiple * **Input types affected:** text, select-multiple
* *
* @default true * @default true
*/ */
paste: boolean; paste: boolean;
/** /**
* Whether a search area should be shown. * Whether a search area should be shown.
* *
* @note Multiple select boxes will always show search areas. * @note Multiple select boxes will always show search areas.
* *
* **Input types affected:** select-one * **Input types affected:** select-one
* *
* @default true * @default true
*/ */
searchEnabled: boolean; searchEnabled: boolean;
/** /**
* Whether choices should be filtered by input or not. If `false`, the search event will still emit, but choices will not be filtered. * Whether choices should be filtered by input or not. If `false`, the search event will still emit, but choices will not be filtered.
* *
* **Input types affected:** select-one * **Input types affected:** select-one
* *
* @default true * @default true
*/ */
searchChoices: boolean; searchChoices: boolean;
/** /**
* The minimum length a search value should be before choices are searched. * The minimum length a search value should be before choices are searched.
* *
* **Input types affected:** select-one, select-multiple * **Input types affected:** select-one, select-multiple
* *
* @default 1 * @default 1
*/ */
searchFloor: number; searchFloor: number;
/** /**
* The maximum amount of search results to show. * The maximum amount of search results to show.
* *
* **Input types affected:** select-one, select-multiple * **Input types affected:** select-one, select-multiple
* *
* @default 4 * @default 4
*/ */
searchResultLimit: number; searchResultLimit: number;
/** /**
* Specify which fields should be used when a user is searching. If you have added custom properties to your choices, you can add these values thus: `['label', 'value', 'customProperties.example']`. * Specify which fields should be used when a user is searching. If you have added custom properties to your choices, you can add these values thus: `['label', 'value', 'customProperties.example']`.
* *
* Input types affected:select-one, select-multiple * Input types affected:select-one, select-multiple
* *
* @default ['label', 'value'] * @default ['label', 'value']
*/ */
searchFields: string[]; searchFields: string[];
/** /**
* Whether the dropdown should appear above `(top)` or below `(bottom)` the input. By default, if there is not enough space within the window the dropdown will appear above the input, otherwise below it. * Whether the dropdown should appear above `(top)` or below `(bottom)` the input. By default, if there is not enough space within the window the dropdown will appear above the input, otherwise below it.
* *
* **Input types affected:** select-one, select-multiple * **Input types affected:** select-one, select-multiple
* *
* @default 'auto' * @default 'auto'
*/ */
position: PositionOptionsType; position: PositionOptionsType;
/** /**
* Whether the scroll position should reset after adding an item. * Whether the scroll position should reset after adding an item.
* *
* **Input types affected:** select-multiple * **Input types affected:** select-multiple
* *
* @default true * @default true
*/ */
resetScrollPosition: boolean; resetScrollPosition: boolean;
/** /**
* Whether choices and groups should be sorted. If false, choices/groups will appear in the order they were given. * Whether choices and groups should be sorted. If false, choices/groups will appear in the order they were given.
* *
* **Input types affected:** select-one, select-multiple * **Input types affected:** select-one, select-multiple
* *
* @default true * @default true
*/ */
shouldSort: boolean; shouldSort: boolean;
/** /**
* Whether items should be sorted. If false, items will appear in the order they were selected. * Whether items should be sorted. If false, items will appear in the order they were selected.
* *
* **Input types affected:** text, select-multiple * **Input types affected:** text, select-multiple
* *
* @default false * @default false
*/ */
shouldSortItems: boolean; shouldSortItems: boolean;
/** /**
* The function that will sort choices and items before they are displayed (unless a user is searching). By default choices and items are sorted by alphabetical order. * The function that will sort choices and items before they are displayed (unless a user is searching). By default choices and items are sorted by alphabetical order.
* *
* **Input types affected:** select-one, select-multiple * **Input types affected:** select-one, select-multiple
* *
* @example * @example
* ``` * ```
* // Sorting via length of label from largest to smallest * // Sorting via length of label from largest to smallest
* const example = new Choices(element, { * const example = new Choices(element, {
* sorter: function(a, b) { * sorter: function(a, b) {
* return b.label.length - a.label.length; * return b.label.length - a.label.length;
* }, * },
* }; * };
* ``` * ```
* *
* @default sortByAlpha * @default sortByAlpha
*/ */
sorter: (current: Choice, next: Choice) => number; sorter: (current: Choice, next: Choice) => number;
/** /**
* Whether the input should show a placeholder. Used in conjunction with `placeholderValue`. If `placeholder` is set to true and no value is passed to `placeholderValue`, the passed input's placeholder attribute will be used as the placeholder value. * Whether the input should show a placeholder. Used in conjunction with `placeholderValue`. If `placeholder` is set to true and no value is passed to `placeholderValue`, the passed input's placeholder attribute will be used as the placeholder value.
* *
* **Input types affected:** text, select-multiple * **Input types affected:** text, select-multiple
* *
* @note For single select boxes, the recommended way of adding a placeholder is as follows: * @note For single select boxes, the recommended way of adding a placeholder is as follows:
* ``` * ```
* <select> * <select>
* <option placeholder>This is a placeholder</option> * <option placeholder>This is a placeholder</option>
* <option>...</option> * <option>...</option>
* <option>...</option> * <option>...</option>
* <option>...</option> * <option>...</option>
* </select> * </select>
* ``` * ```
* *
* @default true * @default true
*/ */
placeholder: boolean; placeholder: boolean;
/** /**
* The value of the inputs placeholder. * The value of the inputs placeholder.
* *
* **Input types affected:** text, select-multiple * **Input types affected:** text, select-multiple
* *
* @default null * @default null
*/ */
placeholderValue: string | null; placeholderValue: string | null;
/** /**
* The value of the search inputs placeholder. * The value of the search inputs placeholder.
* *
* **Input types affected:** select-one * **Input types affected:** select-one
* *
* @default null * @default null
*/ */
searchPlaceholderValue: string | null; searchPlaceholderValue: string | null;
/** /**
* Prepend a value to each item added/selected. * Prepend a value to each item added/selected.
* *
* **Input types affected:** text, select-one, select-multiple * **Input types affected:** text, select-one, select-multiple
* *
* @default null * @default null
*/ */
prependValue: string | null; prependValue: string | null;
/** /**
* Append a value to each item added/selected. * Append a value to each item added/selected.
* *
* **Input types affected:** text, select-one, select-multiple * **Input types affected:** text, select-one, select-multiple
* *
* @default null * @default null
*/ */
appendValue: string | null; appendValue: string | null;
/** /**
* Whether selected choices should be removed from the list. By default choices are removed when they are selected in multiple select box. To always render choices pass `always`. * Whether selected choices should be removed from the list. By default choices are removed when they are selected in multiple select box. To always render choices pass `always`.
* *
* **Input types affected:** select-one, select-multiple * **Input types affected:** select-one, select-multiple
* *
* @default 'auto'; * @default 'auto';
*/ */
renderSelectedChoices: 'auto' | 'always'; renderSelectedChoices: 'auto' | 'always';
/** /**
* The text that is shown whilst choices are being populated via AJAX. * The text that is shown whilst choices are being populated via AJAX.
* *
* **Input types affected:** select-one, select-multiple * **Input types affected:** select-one, select-multiple
* *
* @default 'Loading...' * @default 'Loading...'
*/ */
loadingText: string; loadingText: string;
/** /**
* The text that is shown when a user's search has returned no results. Optionally pass a function returning a string. * The text that is shown when a user's search has returned no results. Optionally pass a function returning a string.
* *
* **Input types affected:** select-one, select-multiple * **Input types affected:** select-one, select-multiple
* *
* @default 'No results found' * @default 'No results found'
*/ */
noResultsText: string | Types.StringFunction; noResultsText: string | Types.StringFunction;
/** /**
* The text that is shown when a user has selected all possible choices. Optionally pass a function returning a string. * The text that is shown when a user has selected all possible choices. Optionally pass a function returning a string.
* *
* **Input types affected:** select-multiple * **Input types affected:** select-multiple
* *
* @default 'No choices to choose from' * @default 'No choices to choose from'
*/ */
noChoicesText: string | Types.StringFunction; noChoicesText: string | Types.StringFunction;
/** /**
* The text that is shown when a user hovers over a selectable choice. * The text that is shown when a user hovers over a selectable choice.
* *
* **Input types affected:** select-multiple, select-one * **Input types affected:** select-multiple, select-one
* *
* @default 'Press to select' * @default 'Press to select'
*/ */
itemSelectText: string; itemSelectText: string;
/** /**
* The text that is shown when a user has focus on the input but has already reached the **max item count** [https://github.com/jshjohnson/Choices#maxitemcount]. To access the max item count, pass a function with a `maxItemCount` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string. * The text that is shown when a user has focus on the input but has already reached the **max item count** [https://github.com/jshjohnson/Choices#maxitemcount]. To access the max item count, pass a function with a `maxItemCount` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string.
* *
* **Input types affected:** text * **Input types affected:** text
* *
* @default * @default
* ``` * ```
* (maxItemCount) => `Only ${maxItemCount} values can be added.`; * (maxItemCount) => `Only ${maxItemCount} values can be added.`;
* ``` * ```
*/ */
maxItemText: string | Types.NoticeLimitFunction; maxItemText: string | Types.NoticeLimitFunction;
/** /**
* If no duplicates are allowed, and the value already exists in the array. * If no duplicates are allowed, and the value already exists in the array.
* *
* @default 'Only unique values can be added' * @default 'Only unique values can be added'
*/ */
uniqueItemText: string | Types.NoticeStringFunction; uniqueItemText: string | Types.NoticeStringFunction;
/** /**
* The text that is shown when addItemFilter is passed and it returns false * The text that is shown when addItemFilter is passed and it returns false
* *
* **Input types affected:** text * **Input types affected:** text
* *
* @default 'Only values matching specific conditions can be added' * @default 'Only values matching specific conditions can be added'
*/ */
customAddItemText: string | Types.NoticeStringFunction; customAddItemText: string | Types.NoticeStringFunction;
/** /**
* Compare choice and value in appropriate way (e.g. deep equality for objects). To compare choice and value, pass a function with a `valueComparer` argument (see the [default config](https://github.com/jshjohnson/Choices#setup) for an example). * Compare choice and value in appropriate way (e.g. deep equality for objects). To compare choice and value, pass a function with a `valueComparer` argument (see the [default config](https://github.com/jshjohnson/Choices#setup) for an example).
* *
* **Input types affected:** select-one, select-multiple * **Input types affected:** select-one, select-multiple
* *
* @default * @default
* ``` * ```
* (choice, item) => choice === item; * (choice, item) => choice === item;
* ``` * ```
*/ */
valueComparer: Types.ValueCompareFunction; valueComparer: Types.ValueCompareFunction;
/** /**
* Classes added to HTML generated by By default classnames follow the BEM notation. * Classes added to HTML generated by By default classnames follow the BEM notation.
* *
* **Input types affected:** text, select-one, select-multiple * **Input types affected:** text, select-one, select-multiple
*/ */
classNames: ClassNames; classNames: ClassNames;
/** /**
* Choices uses the great Fuse library for searching. You can find more options here: https://fusejs.io/api/options.html * Choices uses the great Fuse library for searching. You can find more options here: https://fusejs.io/api/options.html
*/ */
fuseOptions: Fuse.IFuseOptions<Choices>; fuseOptions: Fuse.IFuseOptions<Choices>;
/** /**
* ID of the connected label to improve a11y. If set, aria-labelledby will be added. * ID of the connected label to improve a11y. If set, aria-labelledby will be added.
*/ */
labelId: string; labelId: string;
/** /**
* Function to run once Choices initialises. * Function to run once Choices initialises.
* *
* **Input types affected:** text, select-one, select-multiple * **Input types affected:** text, select-one, select-multiple
* *
* @note For each callback, this refers to the current instance of This can be useful if you need access to methods `(this.disable())` or the config object `(this.config)`. * @note For each callback, this refers to the current instance of This can be useful if you need access to methods `(this.disable())` or the config object `(this.config)`.
* *
* @default null * @default null
*/ */
callbackOnInit: ((this: Choices) => void) | null; callbackOnInit: ((this: Choices) => void) | null;
/** /**
* Function to run on template creation. Through this callback it is possible to provide custom templates for the various components of Choices (see terminology). For Choices to work with custom templates, it is important you maintain the various data attributes defined here [https://github.com/jshjohnson/Choices/blob/67f29c286aa21d88847adfcd6304dc7d068dc01f/assets/scripts/src/choices.js#L1993-L2067]. * Function to run on template creation. Through this callback it is possible to provide custom templates for the various components of Choices (see terminology). For Choices to work with custom templates, it is important you maintain the various data attributes defined here [https://github.com/jshjohnson/Choices/blob/67f29c286aa21d88847adfcd6304dc7d068dc01f/assets/scripts/src/choices.js#L1993-L2067].
* *
* **Input types affected:** text, select-one, select-multiple * **Input types affected:** text, select-one, select-multiple
* *
* @note For each callback, this refers to the current instance of This can be useful if you need access to methods `(this.disable())` or the config object `(this.config)`. * @note For each callback, this refers to the current instance of This can be useful if you need access to methods `(this.disable())` or the config object `(this.config)`.
* *
* @example * @example
* ``` * ```
* const example = new Choices(element, { * const example = new Choices(element, {
* callbackOnCreateTemplates: function (template) { * callbackOnCreateTemplates: function (template) {
* var classNames = this.config.classNames; * var classNames = this.config.classNames;
* 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>
* `); * `);
* }, * },
* }; * };
* } * }
* }); * });
* ``` * ```
* *
* @default null * @default null
*/ */
callbackOnCreateTemplates: ((template: Types.StrToEl) => void) | null; callbackOnCreateTemplates: ((template: Types.StrToEl) => void) | null;
} }
//# sourceMappingURL=options.d.ts.map //# sourceMappingURL=options.d.ts.map

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>
`); `);