diff --git a/README.md b/README.md index 2abb440..cc48afd 100644 --- a/README.md +++ b/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) { diff --git a/jsconfig.json b/jsconfig.json index f6fa9a0..ea6a8a3 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -5,6 +5,7 @@ "lib": ["esnext", "dom"], "types": ["cypress"], "strict": true, + "moduleResolution": "node", /* Additional Checks */ "noImplicitAny": false, "noUnusedLocals": true, diff --git a/src/scripts/choices.js b/src/scripts/choices.js index 8f015ca..e09e346 100644 --- a/src/scripts/choices.js +++ b/src/scripts/choices.js @@ -39,11 +39,28 @@ import { diff, } from './lib/utils'; +const USER_DEFAULTS = /** @type {Partial} */ ({}); + /** * Choices * @author Josh Johnson */ 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; diff --git a/types/index.d.ts b/types/index.d.ts index 6afa1eb..4632e4c 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -757,6 +757,10 @@ declare namespace Choices { // Exporting default class export default class Choices { + static readonly defaults: { + readonly options: Partial; + readonly templates: Choices.Templates; + }; readonly config: Choices.Options; // State Tracking