From 4bdde90f464c66a134ace5460978288ee46330e4 Mon Sep 17 00:00:00 2001 From: Ingo Date: Mon, 18 Sep 2023 08:04:10 +0200 Subject: [PATCH] applied pull #822 --- public/assets/scripts/choices.js | 88 +++++++++++++++---- public/assets/scripts/choices.min.js | 2 +- .../assets/scripts/choices.min.js.LICENSE.txt | 2 +- public/types/src/scripts/choices.d.ts.map | 2 +- .../scripts/components/wrapped-select.d.ts | 4 + .../components/wrapped-select.d.ts.map | 2 +- .../src/scripts/lib/htmlElementGuards.d.ts | 3 + .../scripts/lib/htmlElementGuards.d.ts.map | 1 + src/scripts/choices.ts | 33 +++---- src/scripts/components/wrapped-select.ts | 40 +++++++++ src/scripts/lib/htmlElementGuards.ts | 5 ++ src/scripts/templates.ts | 2 +- 12 files changed, 142 insertions(+), 42 deletions(-) create mode 100644 public/types/src/scripts/lib/htmlElementGuards.d.ts create mode 100644 public/types/src/scripts/lib/htmlElementGuards.d.ts.map create mode 100644 src/scripts/lib/htmlElementGuards.ts diff --git a/public/assets/scripts/choices.js b/public/assets/scripts/choices.js index 8cadac64c..e46df7ca0 100644 --- a/public/assets/scripts/choices.js +++ b/public/assets/scripts/choices.js @@ -1,4 +1,4 @@ -/*! choices.js v10.2.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */ +/*! choices.js v10.2.0 | © 2023 Josh Johnson | https://github.com/jshjohnson/Choices#readme */ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); @@ -229,6 +229,7 @@ var USER_DEFAULTS = {}; */ var Choices = /** @class */function () { function Choices(element, userConfig) { + var _a; if (element === void 0) { element = '[data-choice]'; } @@ -326,16 +327,8 @@ var Choices = /** @class */function () { } // Create array of choices from option elements if (this.passedElement.options) { - this.passedElement.options.forEach(function (option) { - _this._presetChoices.push({ - value: option.value, - label: option.innerHTML, - selected: !!option.selected, - disabled: option.disabled || option.parentNode.disabled, - placeholder: option.value === '' || option.hasAttribute('placeholder'), - customProperties: (0, utils_1.parseCustomProperties)(option.dataset.customProperties) - }); - }); + var choicesFromOptions = this.passedElement.optionsAsChoices(); + (_a = this._presetChoices).push.apply(_a, choicesFromOptions); } this._render = this._render.bind(this); this._onFocus = this._onFocus.bind(this); @@ -862,6 +855,14 @@ var Choices = /** @class */function () { if (this.config.shouldSort) { groups.sort(this.config.sorter); } + // Add Choices without group first, regardless of sort, otherwise they won't be distinguishable + // from the last group + var choicesWithoutGroup = choices.filter(function (c) { + return c.groupId == -1; + }); + if (choicesWithoutGroup.length > 0) { + this._createChoicesFragment(choicesWithoutGroup, fragment, false); + } groups.forEach(function (group) { var groupChoices = getGroupChoices(group); if (groupChoices.length >= 1) { @@ -1877,11 +1878,7 @@ var Choices = /** @class */function () { this._highlightPosition = 0; this._isSearching = false; this._startLoading(); - if (this._presetGroups.length) { - this._addPredefinedGroups(this._presetGroups); - } else { - this._addPredefinedChoices(this._presetChoices); - } + this._addPredefinedChoices(this._presetChoices); this._stopLoading(); } if (this._isTextElement) { @@ -2716,7 +2713,10 @@ var __importDefault = this && this.__importDefault || function (mod) { Object.defineProperty(exports, "__esModule", ({ value: true })); +var utils_1 = __webpack_require__(799); var wrapped_element_1 = __importDefault(__webpack_require__(730)); +var htmlElementGuards_1 = __webpack_require__(858); +var htmlElementGuards_2 = __webpack_require__(858); var WrappedSelect = /** @class */function (_super) { __extends(WrappedSelect, _super); function WrappedSelect(_a) { @@ -2768,6 +2768,40 @@ var WrappedSelect = /** @class */function (_super) { enumerable: false, configurable: true }); + WrappedSelect.prototype.optionsAsChoices = function () { + var choices = []; + for (var _i = 0, _a = Array.from(this.element.querySelectorAll(':scope > *')); _i < _a.length; _i++) { + var e = _a[_i]; + if ((0, htmlElementGuards_2.isHTMLOption)(e)) { + choices.push(this._optionToChoice(e)); + } else if ((0, htmlElementGuards_1.isHTMLOptgroup)(e)) { + choices.push(this._optgroupToChoice(e)); + } + // There should only be those two in a and we wouldn't care about others anyways + } + + return choices; + } + + _optionToChoice(option: HTMLOptionElement): Choice { + return { + value: option.value, + label: option.innerHTML, + selected: !!option.selected, + disabled: option.disabled || this.element.disabled, + placeholder: option.value === '' || option.hasAttribute('placeholder'), + customProperties: parseCustomProperties(option.dataset.customProperties), + }; + } + + _optgroupToChoice(optgroup: HTMLOptGroupElement): Partial { + return { + label: optgroup.label || '', + disabled: !!optgroup.disabled, + choices: Array.from(optgroup.querySelectorAll('option')).map((option) => + this._optionToChoice(option), + ), + }; + } appendDocFragment(fragment: DocumentFragment): void { this.element.innerHTML = ''; diff --git a/src/scripts/lib/htmlElementGuards.ts b/src/scripts/lib/htmlElementGuards.ts new file mode 100644 index 000000000..dc10bf60c --- /dev/null +++ b/src/scripts/lib/htmlElementGuards.ts @@ -0,0 +1,5 @@ +export const isHTMLOption = (e: Element): e is HTMLOptionElement => + e.tagName === 'OPTION'; + +export const isHTMLOptgroup = (e: Element): e is HTMLOptGroupElement => + e.tagName === 'OPTGROUP'; \ No newline at end of file diff --git a/src/scripts/templates.ts b/src/scripts/templates.ts index ee4eafd61..213162e05 100644 --- a/src/scripts/templates.ts +++ b/src/scripts/templates.ts @@ -321,7 +321,7 @@ const templates = { const opt = new Option(label, value, false, active); if (customProperties) { - opt.dataset.customProperties = `${customProperties}`; + opt.dataset.customProperties = `${JSON.stringify(customProperties)}`; } opt.disabled = !!disabled;