npm - @vscode-elements/elements - Versions diffs - 1.14.1-pre.1 → 1.14.1-pre.3 - Mend

@vscode-elements/elements 1.14.1-pre.1 → 1.14.1-pre.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/vscode-multi-select/vscode-multi-select.js CHANGED Viewed

@@ -4,15 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { repeat } from 'lit/directives/repeat.js';
 import { customElement } from '../includes/VscElement.js';
 import { chevronDownIcon } from '../includes/vscode-select/template-elements.js';
 import { VscodeSelectBase } from '../includes/vscode-select/vscode-select-base.js';
 import styles from './vscode-multi-select.styles.js';
-import { highlightRanges } from '../includes/vscode-select/helpers.js';
 /**
  * Allows to select multiple items from a list of options.
  *
@@ -50,7 +47,16 @@ import { highlightRanges } from '../includes/vscode-select/helpers.js';
  */
 let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
     set selectedIndexes(val) {
-        this._selectedIndexes = val;
+        const newIndexes = [];
+        val.forEach((v) => {
+            if (typeof this._options[v] !== 'undefined') {
+                if (!newIndexes.includes(v)) {
+                    this._options[v].selected = true;
+                    newIndexes.push(v);
+                }
+            }
+        });
+        this._selectedIndexes = newIndexes;
     }
     get selectedIndexes() {
         return this._selectedIndexes;
@@ -111,6 +117,41 @@ let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
         this.required = false;
         this.name = undefined;
         this._requestedValueToSetLater = [];
+        this._onOptionClick = (ev) => {
+            const composedPath = ev.composedPath();
+            const optEl = composedPath.find((et) => {
+                if ('matches' in et) {
+                    return et.matches('li.option');
+                }
+                return false;
+            });
+            if (!optEl) {
+                return;
+            }
+            const isPlaceholderOption = optEl.classList.contains('placeholder');
+            if (isPlaceholderOption) {
+                this._createAndSelectSuggestedOption();
+                return;
+            }
+            const index = Number(optEl.dataset.index);
+            if (this._options[index]) {
+                if (this._options[index].disabled) {
+                    return;
+                }
+                this._options[index].selected = !this._options[index].selected;
+            }
+            this._selectedIndexes = [];
+            this._values = [];
+            this._options.forEach((op) => {
+                if (op.selected) {
+                    this._selectedIndexes.push(op.index);
+                    this._values.push(op.value);
+                }
+            });
+            this._setFormValue();
+            this._manageRequired();
+            this._dispatchChangeEvent();
+        };
         /** @internal */
         this._multiple = true;
         this._internals = this.attachInternals();
@@ -159,6 +200,17 @@ let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
         });
         this._internals.setFormValue(fd);
     }
+    async _createAndSelectSuggestedOption() {
+        super._createAndSelectSuggestedOption();
+        const nextIndex = this._createSuggestedOption();
+        await this.updateComplete;
+        this.selectedIndexes = [...this.selectedIndexes, nextIndex];
+        this._dispatchChangeEvent();
+        const opCreateEvent = new CustomEvent('vsc-multi-select-create-option', { detail: { value: this._options[nextIndex]?.value ?? '' } });
+        this.dispatchEvent(opCreateEvent);
+        this._toggleDropdown(false);
+        this._isPlaceholderOptionActive = false;
+    }
     _onSlotChange() {
         super._onSlotChange();
         if (this._requestedValueToSetLater.length > 0) {
@@ -173,36 +225,6 @@ let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
             });
         }
     }
-    _onOptionClick(ev) {
-        const composedPath = ev.composedPath();
-        const optEl = composedPath.find((et) => {
-            if ('matches' in et) {
-                return et.matches('li.option');
-            }
-            return false;
-        });
-        if (!optEl) {
-            return;
-        }
-        const index = Number(optEl.dataset.index);
-        if (this._options[index]) {
-            if (this._options[index].disabled) {
-                return;
-            }
-            this._options[index].selected = !this._options[index].selected;
-        }
-        this._selectedIndexes = [];
-        this._values = [];
-        this._options.forEach((op) => {
-            if (op.selected) {
-                this._selectedIndexes.push(op.index);
-                this._values.push(op.value);
-            }
-        });
-        this._setFormValue();
-        this._manageRequired();
-        this._dispatchChangeEvent();
-    }
     _onMultiAcceptClick() {
         this._toggleDropdown(false);
     }
@@ -250,96 +272,36 @@ let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
       </div>
     `;
     }
-    _renderComboboxFace() {
-        const inputVal = this._selectedIndex > -1 ? this._options[this._selectedIndex].label : '';
-        return html `
-      <div class="combobox-face face">
-        ${this._renderLabel()}
-        <input
-          class="combobox-input"
-          spellcheck="false"
-          type="text"
-          autocomplete="off"
-          .value=${inputVal}
-          @focus=${this._onComboboxInputFocus}
-          @input=${this._onComboboxInputInput}
-          @click=${this._onComboboxInputClick}
-        >
-        <button
-          class="combobox-button"
-          type="button"
-          @click=${this._onComboboxButtonClick}
-          @keydown=${this._onComboboxButtonKeyDown}
-        >
-          ${chevronDownIcon}
-        </button>
-      </div>
-    `;
-    }
-    _renderOptions() {
-        const list = this.combobox ? this._filteredOptions : this._options;
-        return html `
-      <ul
-        class="options"
-        @click=${this._onOptionClick}
-        @mouseover=${this._onOptionMouseOver}
-      >
-        ${repeat(list, (op) => op.index, (op, index) => {
-            const selected = this._selectedIndexes.includes(op.index);
-            const optionClasses = classMap({
-                active: index === this._activeIndex && !op.disabled,
-                option: true,
-                selected,
-                disabled: op.disabled,
-            });
-            const checkboxClasses = classMap({
-                'checkbox-icon': true,
-                checked: selected,
-            });
-            return html `
-              <li
-                class=${optionClasses}
-                data-index=${op.index}
-                data-filtered-index=${index}
-              >
-                <span class=${checkboxClasses}></span>
-                <span class="option-label"
-                  >${(op.ranges?.length ?? 0 > 0)
-                ? highlightRanges(op.label, op.ranges ?? [])
-                : op.label}</span
-                >
-              </li>
-            `;
-        })}
-      </ul>
-    `;
-    }
     _renderDropdownControls() {
-        return html `
-      <div class="dropdown-controls">
-        <button
-          type="button"
-          @click=${this._onMultiSelectAllClick}
-          title="Select all"
-          class="action-icon"
-          id="select-all"
-        >
-          <vscode-icon name="checklist"></vscode-icon>
-        </button>
-        <button
-          type="button"
-          @click=${this._onMultiDeselectAllClick}
-          title="Deselect all"
-          class="action-icon"
-          id="select-none"
-        >
-          <vscode-icon name="clear-all"></vscode-icon>
-        </button>
-        <vscode-button class="button-accept" @click=${this._onMultiAcceptClick}
-          >OK</vscode-button
-        >
-      </div>
-    `;
+        return this._filteredOptions.length > 0
+            ? html `
+          <div class="dropdown-controls">
+            <button
+              type="button"
+              @click=${this._onMultiSelectAllClick}
+              title="Select all"
+              class="action-icon"
+              id="select-all"
+            >
+              <vscode-icon name="checklist"></vscode-icon>
+            </button>
+            <button
+              type="button"
+              @click=${this._onMultiDeselectAllClick}
+              title="Deselect all"
+              class="action-icon"
+              id="select-none"
+            >
+              <vscode-icon name="clear-all"></vscode-icon>
+            </button>
+            <vscode-button
+              class="button-accept"
+              @click=${this._onMultiAcceptClick}
+              >OK</vscode-button
+            >
+          </div>
+        `
+            : html `${nothing}`;
     }
 };
 VscodeMultiSelect.styles = styles;

package/dist/vscode-multi-select/vscode-multi-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vscode-multi-select.js","sourceRoot":"","sources":["../../src/vscode-multi-select/vscode-multi-select.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {repeat} from 'lit/directives/repeat.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {chevronDownIcon} from '../includes/vscode-select/template-elements.js';\nimport {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';\nimport styles from './vscode-multi-select.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\nimport {highlightRanges} from '../includes/vscode-select/helpers.js';\n\n/*\n Allows to select multiple items from a list of options.\n \n When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n \n @tag vscode-multi-select\n \n @prop {boolean} invalid\n * @attr {boolean} invalid\n * @attr name - Name which is used as a variable name in the data of the form-container.\n \n @cssprop [--dropdown-z-index=2]\n * @cssprop [--vscode-badge-background=#616161]\n * @cssprop [--vscode-badge-foreground=#f8f8f8]\n * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-dropdownBackground=#313131]\n * @cssprop [--vscode-settings-dropdownForeground=#cccccc]\n * @cssprop [--vscode-settings-dropdownListBorder=#454545]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n * @cssprop [--vscode-list-activeSelectionBackground=#04395e]\n * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]\n * @cssprop [--vscode-list-focusOutline=#0078d4]\n * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]\n * @cssprop [--vscode-list-highlightForeground=#2aaaff]\n * @cssprop [--vscode-list-hoverBackground=#2a2d2e]\n * @cssprop [--vscode-list-hoverForeground=#ffffff]\n /\n@customElement('vscode-multi-select')\nexport class VscodeMultiSelect\n extends VscodeSelectBase\n implements AssociatedFormControl\n{\n static override styles = styles;\n\n /* @internal /\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static formAssociated = true;\n\n @property({type: Array, attribute: 'default-value'})\n defaultValue: string[] = [];\n\n @property({type: Boolean, reflect: true})\n required = false;\n\n @property({reflect: true})\n name: string \| undefined = undefined;\n\n @property({type: Array, attribute: false})\n set selectedIndexes(val: number[]) {\n this._selectedIndexes = val;\n }\n get selectedIndexes(): number[] {\n return this._selectedIndexes;\n }\n\n @property({type: Array})\n set value(val: string[] \| string) {\n const sanitizedVal = Array.isArray(val)\n ? val.map((v) => String(v))\n : [String(val)];\n this._values = [];\n\n this._selectedIndexes.forEach((i) => {\n this._options[i].selected = false;\n });\n\n this._selectedIndexes = [];\n\n sanitizedVal.forEach((v) => {\n if (typeof this._valueOptionIndexMap[v] === 'number') {\n this._selectedIndexes.push(this._valueOptionIndexMap[v]);\n this._options[this._valueOptionIndexMap[v]].selected = true;\n this._values.push(v);\n }\n });\n\n if (this._selectedIndexes.length > 0) {\n this._requestedValueToSetLater = [];\n } else {\n this._requestedValueToSetLater = Array.isArray(val) ? val : [val];\n }\n\n this._setFormValue();\n this._manageRequired();\n }\n get value(): string[] {\n return this._values;\n }\n\n get form() {\n return this._internals.form;\n }\n\n /* @internal /\n get type() {\n return 'select-multiple';\n }\n\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n get willValidate() {\n return this._internals.willValidate;\n }\n\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /* @internal /\n this._multiple = true;\n this._internals = this.attachInternals();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this._setDefaultValue();\n this._manageRequired();\n });\n }\n\n /* @internal /\n formResetCallback(): void {\n this.updateComplete.then(() => {\n this.value = this.defaultValue;\n });\n }\n\n /* @internal */\n formStateRestoreCallback(\n state: FormData,\n _mode: 'restore' \| 'autocomplete'\n ): void {\n const entries = Array.from(state.entries()).map((e) => String(e[1]));\n\n this.updateComplete.then(() => {\n this.value = entries;\n });\n }\n\n @query('.face')\n private _faceElement!: HTMLDivElement;\n\n private _setDefaultValue() {\n if (Array.isArray(this.defaultValue) && this.defaultValue.length > 0) {\n const val = this.defaultValue.map((v) => String(v));\n this.value = val;\n }\n }\n\n private _manageRequired() {\n const {value} = this;\n if (value.length === 0 && this.required) {\n this._internals.setValidity(\n {\n valueMissing: true,\n },\n 'Please select an item in the list.',\n this._faceElement\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n private _setFormValue() {\n const fd = new FormData();\n\n this._values.forEach((v) => {\n fd.append(this.name ?? '', v);\n });\n\n this._internals.setFormValue(fd);\n }\n\n private _requestedValueToSetLater: string[] = [];\n\n protected override _onSlotChange(): void {\n super._onSlotChange();\n\n if (this._requestedValueToSetLater.length > 0) {\n this.options.forEach((o, i) => {\n if (this._requestedValueToSetLater.includes(o.value)) {\n this._selectedIndexes.push(i);\n this._values.push(o.value);\n this._options[i].selected = true;\n this._requestedValueToSetLater =\n this._requestedValueToSetLater.filter((v) => v !== o.value);\n }\n });\n }\n }\n\n private _onOptionClick(ev: MouseEvent) {\n const composedPath = ev.composedPath();\n const optEl = composedPath.find((et) => {\n if ('matches' in et) {\n return (et as HTMLElement).matches('li.option');\n }\n\n return false;\n });\n\n if (!optEl) {\n return;\n }\n\n const index = Number((optEl as HTMLElement).dataset.index);\n\n if (this._options[index]) {\n if (this._options[index].disabled) {\n return;\n }\n\n this._options[index].selected = !this._options[index].selected;\n }\n\n this._selectedIndexes = [];\n this._values = [];\n\n this._options.forEach((op) => {\n if (op.selected) {\n this._selectedIndexes.push(op.index);\n this._values.push(op.value);\n }\n });\n\n this._setFormValue();\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n private _onMultiAcceptClick(): void {\n this._toggleDropdown(false);\n }\n\n private _onMultiDeselectAllClick(): void {\n this._selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: false}));\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n private _onMultiSelectAllClick(): void {\n this._selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: true}));\n this._options.forEach((op, index) => {\n this._selectedIndexes.push(index);\n this._values.push(op.value);\n this._dispatchChangeEvent();\n });\n\n this._setFormValue();\n this._manageRequired();\n }\n\n private _renderLabel() {\n switch (this._selectedIndexes.length) {\n case 0:\n return html`<span class=\"select-face-badge no-item\"\n >No items selected</span\n >`;\n case 1:\n return html`<span class=\"select-face-badge\">1 item selected</span>`;\n default:\n return html`<span class=\"select-face-badge\"\n >${this._selectedIndexes.length} items selected</span\n >`;\n }\n }\n\n protected override _renderSelectFace(): TemplateResult {\n return html`\n <div\n class=\"select-face face multiselect\"\n @click=${this._onFaceClick}\n tabindex=${this.tabIndex > -1 ? 0 : -1}\n >\n ${this._renderLabel()} ${chevronDownIcon}\n </div>\n `;\n }\n\n protected override _renderComboboxFace(): TemplateResult {\n const inputVal =\n this._selectedIndex > -1 ? this._options[this._selectedIndex].label : '';\n\n return html`\n <div class=\"combobox-face face\">\n ${this._renderLabel()}\n <input\n class=\"combobox-input\"\n spellcheck=\"false\"\n type=\"text\"\n autocomplete=\"off\"\n .value=${inputVal}\n @focus=${this._onComboboxInputFocus}\n @input=${this._onComboboxInputInput}\n @click=${this._onComboboxInputClick}\n >\n <button\n class=\"combobox-button\"\n type=\"button\"\n @click=${this._onComboboxButtonClick}\n @keydown=${this._onComboboxButtonKeyDown}\n >\n ${chevronDownIcon}\n </button>\n </div>\n `;\n }\n\n protected override _renderOptions(): TemplateResult {\n const list = this.combobox ? this._filteredOptions : this._options;\n\n return html`\n <ul\n class=\"options\"\n @click=${this._onOptionClick}\n @mouseover=${this._onOptionMouseOver}\n >\n ${repeat(\n list,\n (op) => op.index,\n (op, index) => {\n const selected = this._selectedIndexes.includes(op.index);\n const optionClasses = classMap({\n active: index === this._activeIndex && !op.disabled,\n option: true,\n selected,\n disabled: op.disabled,\n });\n const checkboxClasses = classMap({\n 'checkbox-icon': true,\n checked: selected,\n });\n\n return html`\n <li\n class=${optionClasses}\n data-index=${op.index}\n data-filtered-index=${index}\n >\n <span class=${checkboxClasses}></span>\n <span class=\"option-label\"\n >${(op.ranges?.length ?? 0 > 0)\n ? highlightRanges(op.label, op.ranges ?? [])\n : op.label}</span\n >\n </li>\n `;\n }\n )}\n </ul>\n `;\n }\n\n protected override _renderDropdownControls(): TemplateResult {\n return html`\n <div class=\"dropdown-controls\">\n <button\n type=\"button\"\n @click=${this._onMultiSelectAllClick}\n title=\"Select all\"\n class=\"action-icon\"\n id=\"select-all\"\n >\n <vscode-icon name=\"checklist\"></vscode-icon>\n </button>\n <button\n type=\"button\"\n @click=${this._onMultiDeselectAllClick}\n title=\"Deselect all\"\n class=\"action-icon\"\n id=\"select-none\"\n >\n <vscode-icon name=\"clear-all\"></vscode-icon>\n </button>\n <vscode-button class=\"button-accept\" @click=${this._onMultiAcceptClick}\n >OK</vscode-button\n >\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-multi-select': VscodeMultiSelect;\n }\n}\n"]}
1	+ {"version":3,"file":"vscode-multi-select.js","sourceRoot":"","sources":["../../src/vscode-multi-select/vscode-multi-select.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {chevronDownIcon} from '../includes/vscode-select/template-elements.js';\nimport {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';\nimport styles from './vscode-multi-select.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\nexport type VscMultiSelectCreateOptionEvent = CustomEvent<{value: string}>;\n\n/*\n Allows to select multiple items from a list of options.\n \n When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n \n @tag vscode-multi-select\n \n @prop {boolean} invalid\n * @attr {boolean} invalid\n * @attr name - Name which is used as a variable name in the data of the form-container.\n \n @cssprop [--dropdown-z-index=2]\n * @cssprop [--vscode-badge-background=#616161]\n * @cssprop [--vscode-badge-foreground=#f8f8f8]\n * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-dropdownBackground=#313131]\n * @cssprop [--vscode-settings-dropdownForeground=#cccccc]\n * @cssprop [--vscode-settings-dropdownListBorder=#454545]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n * @cssprop [--vscode-list-activeSelectionBackground=#04395e]\n * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]\n * @cssprop [--vscode-list-focusOutline=#0078d4]\n * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]\n * @cssprop [--vscode-list-highlightForeground=#2aaaff]\n * @cssprop [--vscode-list-hoverBackground=#2a2d2e]\n * @cssprop [--vscode-list-hoverForeground=#ffffff]\n /\n@customElement('vscode-multi-select')\nexport class VscodeMultiSelect\n extends VscodeSelectBase\n implements AssociatedFormControl\n{\n static override styles = styles;\n\n /* @internal /\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static formAssociated = true;\n\n @property({type: Array, attribute: 'default-value'})\n defaultValue: string[] = [];\n\n @property({type: Boolean, reflect: true})\n required = false;\n\n @property({reflect: true})\n name: string \| undefined = undefined;\n\n @property({type: Array, attribute: false})\n set selectedIndexes(val: number[]) {\n const newIndexes: number[] = [];\n\n val.forEach((v) => {\n if (typeof this._options[v] !== 'undefined') {\n if (!newIndexes.includes(v)) {\n this._options[v].selected = true;\n newIndexes.push(v);\n }\n }\n });\n\n this._selectedIndexes = newIndexes;\n }\n get selectedIndexes(): number[] {\n return this._selectedIndexes;\n }\n\n @property({type: Array})\n set value(val: string[] \| string) {\n const sanitizedVal = Array.isArray(val)\n ? val.map((v) => String(v))\n : [String(val)];\n this._values = [];\n\n this._selectedIndexes.forEach((i) => {\n this._options[i].selected = false;\n });\n\n this._selectedIndexes = [];\n\n sanitizedVal.forEach((v) => {\n if (typeof this._valueOptionIndexMap[v] === 'number') {\n this._selectedIndexes.push(this._valueOptionIndexMap[v]);\n this._options[this._valueOptionIndexMap[v]].selected = true;\n this._values.push(v);\n }\n });\n\n if (this._selectedIndexes.length > 0) {\n this._requestedValueToSetLater = [];\n } else {\n this._requestedValueToSetLater = Array.isArray(val) ? val : [val];\n }\n\n this._setFormValue();\n this._manageRequired();\n }\n get value(): string[] {\n return this._values;\n }\n\n get form() {\n return this._internals.form;\n }\n\n /* @internal /\n get type() {\n return 'select-multiple';\n }\n\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n get willValidate() {\n return this._internals.willValidate;\n }\n\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /* @internal /\n this._multiple = true;\n this._internals = this.attachInternals();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this._setDefaultValue();\n this._manageRequired();\n });\n }\n\n /* @internal /\n formResetCallback(): void {\n this.updateComplete.then(() => {\n this.value = this.defaultValue;\n });\n }\n\n /* @internal */\n formStateRestoreCallback(\n state: FormData,\n _mode: 'restore' \| 'autocomplete'\n ): void {\n const entries = Array.from(state.entries()).map((e) => String(e[1]));\n\n this.updateComplete.then(() => {\n this.value = entries;\n });\n }\n\n @query('.face')\n private _faceElement!: HTMLDivElement;\n\n private _setDefaultValue() {\n if (Array.isArray(this.defaultValue) && this.defaultValue.length > 0) {\n const val = this.defaultValue.map((v) => String(v));\n this.value = val;\n }\n }\n\n protected override _manageRequired() {\n const {value} = this;\n if (value.length === 0 && this.required) {\n this._internals.setValidity(\n {\n valueMissing: true,\n },\n 'Please select an item in the list.',\n this._faceElement\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n private _setFormValue() {\n const fd = new FormData();\n\n this._values.forEach((v) => {\n fd.append(this.name ?? '', v);\n });\n\n this._internals.setFormValue(fd);\n }\n\n private _requestedValueToSetLater: string[] = [];\n\n protected override async _createAndSelectSuggestedOption() {\n super._createAndSelectSuggestedOption();\n const nextIndex = this._createSuggestedOption();\n\n await this.updateComplete;\n\n this.selectedIndexes = [...this.selectedIndexes, nextIndex];\n this._dispatchChangeEvent();\n const opCreateEvent: VscMultiSelectCreateOptionEvent = new CustomEvent(\n 'vsc-multi-select-create-option',\n {detail: {value: this._options[nextIndex]?.value ?? ''}}\n );\n this.dispatchEvent(opCreateEvent);\n this._toggleDropdown(false);\n this._isPlaceholderOptionActive = false;\n }\n\n protected override _onSlotChange(): void {\n super._onSlotChange();\n\n if (this._requestedValueToSetLater.length > 0) {\n this.options.forEach((o, i) => {\n if (this._requestedValueToSetLater.includes(o.value)) {\n this._selectedIndexes.push(i);\n this._values.push(o.value);\n this._options[i].selected = true;\n this._requestedValueToSetLater =\n this._requestedValueToSetLater.filter((v) => v !== o.value);\n }\n });\n }\n }\n\n protected override _onOptionClick = (ev: MouseEvent) => {\n const composedPath = ev.composedPath();\n const optEl = composedPath.find((et) => {\n if ('matches' in et) {\n return (et as HTMLElement).matches('li.option');\n }\n\n return false;\n });\n\n if (!optEl) {\n return;\n }\n\n const isPlaceholderOption = (optEl as HTMLElement).classList.contains(\n 'placeholder'\n );\n\n if (isPlaceholderOption) {\n this._createAndSelectSuggestedOption();\n return;\n }\n\n const index = Number((optEl as HTMLElement).dataset.index);\n\n if (this._options[index]) {\n if (this._options[index].disabled) {\n return;\n }\n\n this._options[index].selected = !this._options[index].selected;\n }\n\n this._selectedIndexes = [];\n this._values = [];\n\n this._options.forEach((op) => {\n if (op.selected) {\n this._selectedIndexes.push(op.index);\n this._values.push(op.value);\n }\n });\n\n this._setFormValue();\n this._manageRequired();\n this._dispatchChangeEvent();\n };\n\n private _onMultiAcceptClick(): void {\n this._toggleDropdown(false);\n }\n\n private _onMultiDeselectAllClick(): void {\n this._selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: false}));\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n private _onMultiSelectAllClick(): void {\n this._selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: true}));\n this._options.forEach((op, index) => {\n this._selectedIndexes.push(index);\n this._values.push(op.value);\n this._dispatchChangeEvent();\n });\n\n this._setFormValue();\n this._manageRequired();\n }\n\n private _renderLabel() {\n switch (this._selectedIndexes.length) {\n case 0:\n return html`<span class=\"select-face-badge no-item\"\n >No items selected</span\n >`;\n case 1:\n return html`<span class=\"select-face-badge\">1 item selected</span>`;\n default:\n return html`<span class=\"select-face-badge\"\n >${this._selectedIndexes.length} items selected</span\n >`;\n }\n }\n\n protected override _renderSelectFace(): TemplateResult {\n return html`\n <div\n class=\"select-face face multiselect\"\n @click=${this._onFaceClick}\n tabindex=${this.tabIndex > -1 ? 0 : -1}\n >\n ${this._renderLabel()} ${chevronDownIcon}\n </div>\n `;\n }\n\n protected override _renderDropdownControls(): TemplateResult {\n return this._filteredOptions.length > 0\n ? html`\n <div class=\"dropdown-controls\">\n <button\n type=\"button\"\n @click=${this._onMultiSelectAllClick}\n title=\"Select all\"\n class=\"action-icon\"\n id=\"select-all\"\n >\n <vscode-icon name=\"checklist\"></vscode-icon>\n </button>\n <button\n type=\"button\"\n @click=${this._onMultiDeselectAllClick}\n title=\"Deselect all\"\n class=\"action-icon\"\n id=\"select-none\"\n >\n <vscode-icon name=\"clear-all\"></vscode-icon>\n </button>\n <vscode-button\n class=\"button-accept\"\n @click=${this._onMultiAcceptClick}\n >OK</vscode-button\n >\n </div>\n `\n : html`${nothing}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-multi-select': VscodeMultiSelect;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-multi-select-create-option': VscMultiSelectCreateOptionEvent;\n }\n}\n"]}

package/dist/vscode-single-select/vscode-single-select.d.ts CHANGED Viewed

@@ -1,6 +1,9 @@
 import { TemplateResult } from 'lit';
 import { VscodeSelectBase } from '../includes/vscode-select/vscode-select-base.js';
 import { AssociatedFormControl } from '../includes/AssociatedFormControl.js';
+export type VscSingleSelectCreateOptionEvent = CustomEvent<{
+    value: string;
+}>;
 /**
  * Allows to select an item from multiple options.
  *
@@ -80,19 +83,21 @@ export declare class VscodeSingleSelect extends VscodeSelectBase implements Asso
     get type(): 'select-one';
     get form(): HTMLFormElement | null;
     private _requestedValueToSetLater;
+    protected _createAndSelectSuggestedOption(): Promise<void>;
     protected _onSlotChange(): void;
     protected _onArrowUpKeyDown(): void;
     protected _onArrowDownKeyDown(): void;
-    protected _onEnterKeyDown(): void;
-    private _onOptionClick;
-    private _manageRequired;
+    protected _onEnterKeyDown(ev: KeyboardEvent): void;
+    protected _onOptionClick(ev: MouseEvent): void;
+    protected _manageRequired(): void;
     protected _renderSelectFace(): TemplateResult;
-    protected _renderComboboxFace(): TemplateResult;
-    protected _renderOptions(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'vscode-single-select': VscodeSingleSelect;
     }
+    interface GlobalEventHandlersEventMap {
+        'vsc-single-select-create-option': VscSingleSelectCreateOptionEvent;
+    }
 }
 //# sourceMappingURL=vscode-single-select.d.ts.map

package/dist/vscode-single-select/vscode-single-select.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vscode-single-select.d.ts","sourceRoot":"","sources":["../../src/vscode-single-select/vscode-single-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,cAAc,EAAC,MAAM,KAAK,CAAC;~~AAKrD~~,OAAO,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AAEjF,OAAO,EAAC,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;~~AAG3E~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,kBACX,SAAQ,gBACR,YAAW,qBAAqB;IAEhC,OAAgB,MAAM,4BAAU;IAEhC,gBAAgB;IAChB,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,gBAAgB;IAChB,MAAM,CAAC,cAAc,UAAQ;IAG7B,YAAY,SAAM;IAElB,gBAAgB;IAEP,IAAI,SAAa;IAG1B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,IACI,aAAa,CAAC,GAAG,EAAE,MAAM,~~EAK5B~~;IACD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IACI,KAAK,CAAC,GAAG,EAAE,MAAM,EAepB;IACD,IAAI,KAAK,IAAI,MAAM,CAMlB;IAGD,QAAQ,UAAS;IAEjB,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAKzB,OAAO,CAAC,KAAK,CAAkB;IAE/B,OAAO,CAAC,UAAU,CAAmB;IAErC,OAAO,CAAC,gBAAgB;;IAuBf,iBAAiB,IAAI,IAAI;IAQlC,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAIzB,gBAAgB;IAChB,wBAAwB,CACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,IAAI;IAMP,gBAAgB;IAChB,IAAI,IAAI,IAAI,YAAY,CAEvB;IAED,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,OAAO,CAAC,yBAAyB,CAAM;~~cAEpB~~,aAAa,IAAI,IAAI;cAsBrB,iBAAiB,IAAI,IAAI;~~cAgBzB~~,mBAAmB,IAAI,IAAI;~~cAgB3B~~,eAAe,~~IAAI~~,~~IAAI;IAQ1C~~,~~OAAO~~,~~CAAC~~,~~cAAc~~;~~IA8BtB~~,~~OAAO~~,CAAC,~~eAAe;cAaJ~~,~~iBAAiB~~,~~IAAI,cAAc~~;~~cAcnC~~,~~mBAAmB,IAAI,cAAc~~;~~cA4BrC~~,~~cAAc~~,IAAI,cAAc;~~CAqCpD~~;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}
1	+ {"version":3,"file":"vscode-single-select.d.ts","sourceRoot":"","sources":["../../src/vscode-single-select/vscode-single-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,cAAc,EAAC,MAAM,KAAK,CAAC;AAIrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AAEjF,OAAO,EAAC,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AAM3E,MAAM,MAAM,gCAAgC,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,kBACX,SAAQ,gBACR,YAAW,qBAAqB;IAEhC,OAAgB,MAAM,4BAAU;IAEhC,gBAAgB;IAChB,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,gBAAgB;IAChB,MAAM,CAAC,cAAc,UAAQ;IAG7B,YAAY,SAAM;IAElB,gBAAgB;IAEP,IAAI,SAAa;IAG1B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,IACI,aAAa,CAAC,GAAG,EAAE,MAAM,EAS5B;IACD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IACI,KAAK,CAAC,GAAG,EAAE,MAAM,EAepB;IACD,IAAI,KAAK,IAAI,MAAM,CAMlB;IAGD,QAAQ,UAAS;IAEjB,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAKzB,OAAO,CAAC,KAAK,CAAkB;IAE/B,OAAO,CAAC,UAAU,CAAmB;IAErC,OAAO,CAAC,gBAAgB;;IAuBf,iBAAiB,IAAI,IAAI;IAQlC,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAIzB,gBAAgB;IAChB,wBAAwB,CACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,IAAI;IAMP,gBAAgB;IAChB,IAAI,IAAI,IAAI,YAAY,CAEvB;IAED,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,OAAO,CAAC,yBAAyB,CAAM;cAEd,+BAA+B;cAgBrC,aAAa,IAAI,IAAI;cAsBrB,iBAAiB,IAAI,IAAI;cAmBzB,mBAAmB,IAAI,IAAI;cAmB3B,eAAe,CAAC,EAAE,EAAE,aAAa,GAAG,IAAI;cAQxC,cAAc,CAAC,EAAE,EAAE,UAAU;cAiC7B,eAAe;cAaf,iBAAiB,IAAI,cAAc;CAavD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;IAED,UAAU,2BAA2B;QACnC,iCAAiC,EAAE,gCAAgC,CAAC;KACrE;CACF"}

package/dist/vscode-single-select/vscode-single-select.js CHANGED Viewed

@@ -6,12 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { customElement } from '../includes/VscElement.js';
 import { chevronDownIcon } from '../includes/vscode-select/template-elements.js';
 import { VscodeSelectBase } from '../includes/vscode-select/vscode-select-base.js';
 import styles from './vscode-single-select.styles.js';
-import { highlightRanges } from '../includes/vscode-select/helpers.js';
+import { findNextSelectableOptionIndex, findPrevSelectableOptionIndex, } from '../includes/vscode-select/helpers.js';
 /**
  * Allows to select an item from multiple options.
  *
@@ -61,9 +60,13 @@ import { highlightRanges } from '../includes/vscode-select/helpers.js';
 let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
     set selectedIndex(val) {
         this._selectedIndex = val;
-        this._value = this._options[this._selectedIndex]
-            ? this._options[this._selectedIndex].value
-            : '';
+        if (this._options[val]) {
+            this._activeIndex = val;
+            this._value = this._options[val].value;
+        }
+        else {
+            this._value = '';
+        }
     }
     get selectedIndex() {
         return this._selectedIndex;
@@ -150,6 +153,16 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
     get form() {
         return this._internals.form;
     }
+    async _createAndSelectSuggestedOption() {
+        const nextIndex = this._createSuggestedOption();
+        await this.updateComplete;
+        this.selectedIndex = nextIndex;
+        this._dispatchChangeEvent();
+        const opCreateEvent = new CustomEvent('vsc-single-select-create-option', { detail: { value: this._options[nextIndex]?.value ?? '' } });
+        this.dispatchEvent(opCreateEvent);
+        this._toggleDropdown(false);
+        this._isPlaceholderOptionActive = false;
+    }
     _onSlotChange() {
         super._onSlotChange();
         if (this._requestedValueToSetLater) {
@@ -172,10 +185,12 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
         if (this.open || this._selectedIndex <= 0) {
             return;
         }
+        const options = this.combobox ? this._filteredOptions : this._options;
+        const prevIndex = findPrevSelectableOptionIndex(options, this._activeIndex);
         this._filterPattern = '';
-        this._selectedIndex -= 1;
-        this._activeIndex = this._selectedIndex;
-        this._value = this._options[this._selectedIndex].value;
+        this._selectedIndex = prevIndex;
+        this._activeIndex = prevIndex;
+        this._value = prevIndex > -1 ? this._options[prevIndex].value : '';
         this._internals.setFormValue(this._value);
         this._manageRequired();
         this._dispatchChangeEvent();
@@ -185,42 +200,48 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
         if (this.open || this._selectedIndex >= this._options.length - 1) {
             return;
         }
+        const options = this.combobox ? this._filteredOptions : this._options;
+        const nextIndex = findNextSelectableOptionIndex(options, this._activeIndex);
         this._filterPattern = '';
-        this._selectedIndex += 1;
-        this._activeIndex = this._selectedIndex;
-        this._value = this._options[this._selectedIndex].value;
+        this._selectedIndex = nextIndex;
+        this._activeIndex = nextIndex;
+        this._value = nextIndex > -1 ? this._options[nextIndex].value : '';
         this._internals.setFormValue(this._value);
         this._manageRequired();
         this._dispatchChangeEvent();
     }
-    _onEnterKeyDown() {
-        super._onEnterKeyDown();
+    _onEnterKeyDown(ev) {
+        super._onEnterKeyDown(ev);
         this.updateInputValue();
         this._internals.setFormValue(this._value);
         this._manageRequired();
     }
     _onOptionClick(ev) {
         const composedPath = ev.composedPath();
-        const optEl = composedPath.find((et) => et?.matches('li.option'));
+        const optEl = composedPath.find((et) => {
+            const el = et;
+            if ('matches' in el) {
+                return el.matches('li.option');
+            }
+            return;
+        });
         if (!optEl || optEl.matches('.disabled')) {
             return;
         }
         const isPlaceholderOption = optEl.classList.contains('placeholder');
-        let nextSelectedIndex = Number(optEl.dataset.index);
         if (isPlaceholderOption) {
             if (this.creatable) {
-                nextSelectedIndex = this._createSuggestedOption();
-            }
-            else {
-                return;
+                this._createAndSelectSuggestedOption();
             }
         }
-        this._selectedIndex = nextSelectedIndex;
-        this._value = this._options[this._selectedIndex].value;
-        this._toggleDropdown(false);
-        this._internals.setFormValue(this._value);
-        this._manageRequired();
-        this._dispatchChangeEvent();
+        else {
+            this._selectedIndex = Number(optEl.dataset.index);
+            this._value = this._options[this._selectedIndex].value;
+            this._toggleDropdown(false);
+            this._internals.setFormValue(this._value);
+            this._manageRequired();
+            this._dispatchChangeEvent();
+        }
     }
     _manageRequired() {
         const { value } = this;
@@ -243,64 +264,6 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
       </div>
     `;
     }
-    _renderComboboxFace() {
-        const inputVal = this._selectedIndex > -1 ? this._options[this._selectedIndex].label : '';
-        return html `
-      <div class="combobox-face face">
-        <input
-          class="combobox-input"
-          spellcheck="false"
-          type="text"
-          autocomplete="off"
-          .value=${inputVal}
-          @focus=${this._onComboboxInputFocus}
-          @input=${this._onComboboxInputInput}
-          @click=${this._onComboboxInputClick}
-        >
-        <button
-          class="combobox-button"
-          type="button"
-          @click=${this._onComboboxButtonClick}
-          @keydown=${this._onComboboxButtonKeyDown}
-        >
-          ${chevronDownIcon}
-        </button>
-      </div>
-    `;
-    }
-    _renderOptions() {
-        const list = this.combobox ? this._filteredOptions : this._options;
-        const options = list.length > 0
-            ? list.map((op, index) => {
-                const classes = classMap({
-                    option: true,
-                    disabled: op.disabled,
-                    selected: op.selected,
-                    active: index === this._activeIndex && !op.disabled,
-                });
-                return html `
-              <li
-                class=${classes}
-                data-index=${op.index}
-                data-filtered-index=${index}
-              >
-                ${(op.ranges?.length ?? 0 > 0)
-                    ? highlightRanges(op.label, op.ranges ?? [])
-                    : op.label}
-              </li>
-            `;
-            })
-            : this._renderPlaceholderOption();
-        return html `
-      <ul
-        class="options"
-        @mouseover=${this._onOptionMouseOver}
-        @click=${this._onOptionClick}
-      >
-        ${options}
-      </ul>
-    `;
-    }
 };
 VscodeSingleSelect.styles = styles;
 /** @internal */