mirror of
https://github.com/Choices-js/Choices.git
synced 2024-04-25 19:00:37 +02:00
[MAJOR] expose defaults
and original Template rendering functions (#708)
* expose original Template rendering functions * add to types * add moduleResolution * use `defaults`
This commit is contained in:
parent
1c751472b2
commit
9504cfcec5
15
README.md
15
README.md
|
@ -595,9 +595,24 @@ classNames: {
|
|||
**Input types affected:** `text`, `select-one`, `select-multiple`
|
||||
|
||||
**Usage:** 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/master/src/scripts/templates.js).
|
||||
If you want just extend a little original template then you may use `Choices.defaults.templates` to get access to
|
||||
original template function.
|
||||
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
const example = new Choices(element, {
|
||||
callbackOnCreateTemplates: () => ({
|
||||
input: (...args) =>
|
||||
Object.assign(Choices.defaults.templates.input.call(this, ...args), {
|
||||
type: 'email',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
or more complex:
|
||||
|
||||
```js
|
||||
const example = new Choices(element, {
|
||||
callbackOnCreateTemplates: function(template) {
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
"lib": ["esnext", "dom"],
|
||||
"types": ["cypress"],
|
||||
"strict": true,
|
||||
"moduleResolution": "node",
|
||||
/* Additional Checks */
|
||||
"noImplicitAny": false,
|
||||
"noUnusedLocals": true,
|
||||
|
|
|
@ -39,11 +39,28 @@ import {
|
|||
diff,
|
||||
} from './lib/utils';
|
||||
|
||||
const USER_DEFAULTS = /** @type {Partial<import('../../types/index').Choices.Options>} */ ({});
|
||||
|
||||
/**
|
||||
* Choices
|
||||
* @author Josh Johnson<josh@joshuajohnson.co.uk>
|
||||
*/
|
||||
class Choices {
|
||||
/* ========================================
|
||||
= Static properties =
|
||||
======================================== */
|
||||
|
||||
static get defaults() {
|
||||
return Object.preventExtensions({
|
||||
get options() {
|
||||
return USER_DEFAULTS;
|
||||
},
|
||||
get templates() {
|
||||
return TEMPLATES;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
constructor(element = '[data-choice]', userConfig = {}) {
|
||||
if (isType('String', element)) {
|
||||
const elements = Array.from(document.querySelectorAll(element));
|
||||
|
@ -56,7 +73,7 @@ class Choices {
|
|||
}
|
||||
|
||||
this.config = merge.all(
|
||||
[DEFAULT_CONFIG, Choices.userDefaults, userConfig],
|
||||
[DEFAULT_CONFIG, Choices.defaults.options, userConfig],
|
||||
// When merging array configs, replace with a copy of the userConfig array,
|
||||
// instead of concatenating with the default array
|
||||
{ arrayMerge: (destinationArray, sourceArray) => [...sourceArray] },
|
||||
|
@ -2108,6 +2125,4 @@ class Choices {
|
|||
/* ===== End of Private functions ====== */
|
||||
}
|
||||
|
||||
Choices.userDefaults = {};
|
||||
|
||||
export default Choices;
|
||||
|
|
4
types/index.d.ts
vendored
4
types/index.d.ts
vendored
|
@ -757,6 +757,10 @@ declare namespace Choices {
|
|||
|
||||
// Exporting default class
|
||||
export default class Choices {
|
||||
static readonly defaults: {
|
||||
readonly options: Partial<Choices.Options>;
|
||||
readonly templates: Choices.Templates;
|
||||
};
|
||||
readonly config: Choices.Options;
|
||||
|
||||
// State Tracking
|
||||
|
|
Loading…
Reference in a new issue