package.dist.vscode-multi-select.vscode-multi-select.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of elements Show documentation
Show all versions of elements Show documentation
Webcomponents for creating Visual Studio Code extensions
The newest version!
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
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 } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { repeat } from 'lit/directives/repeat.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';
/**
* Allows to select multiple items from a list of options.
*
* When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles
* can be applied through the `invalid` property.
*
* @prop {boolean} invalid
* @attr {boolean} invalid
* @attr name - Name which is used as a variable name in the data of the form-container.
*
* @cssprop [--dropdown-z-index=2]
* @cssprop --vscode-badge-background
* @cssprop --vscode-badge-foreground
* @cssprop --vscode-settings-dropdownBorder
* @cssprop --vscode-settings-checkboxBackground
* @cssprop --vscode-settings-dropdownBackground
* @cssprop --vscode-settings-dropdownListBorder
* @cssprop --vscode-focusBorder
* @cssprop --vscode-foreground
* @cssprop --vscode-font-family
* @cssprop --vscode-font-size
* @cssprop --vscode-font-weight
* @cssprop --vscode-list-activeSelectionBackground
* @cssprop --vscode-list-activeSelectionForeground
* @cssprop --vscode-list-focusOutline
* @cssprop --vscode-list-hoverBackground
* @cssprop --vscode-list-hoverForeground
* @cssprop --vscode-list-hoverBackground
* @cssprop --vscode-settings-textInputBackground
* @cssprop --vscode-list-hoverBackground
*/
let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
set selectedIndexes(val) {
this._selectedIndexes = val;
}
get selectedIndexes() {
return this._selectedIndexes;
}
set value(val) {
const sanitizedVal = val.map((v) => String(v));
this._values = sanitizedVal;
this._selectedIndexes.forEach((i) => {
this._options[i].selected = false;
});
this._selectedIndexes = [];
sanitizedVal.forEach((v) => {
if (this._valueOptionIndexMap[v]) {
this._selectedIndexes.push(this._valueOptionIndexMap[v]);
this._options[this._valueOptionIndexMap[v]].selected = true;
}
});
this._setFormValue();
this._manageRequired();
}
get value() {
return this._values;
}
get form() {
return this._internals.form;
}
/** @internal */
get type() {
return 'select-multiple';
}
get validity() {
return this._internals.validity;
}
get validationMessage() {
return this._internals.validationMessage;
}
get willValidate() {
return this._internals.willValidate;
}
checkValidity() {
return this._internals.checkValidity();
}
reportValidity() {
return this._internals.reportValidity();
}
constructor() {
super();
this.defaultValue = [];
this.disabled = false;
this.required = false;
this.name = undefined;
/** @internal */
this._multiple = true;
this._internals = this.attachInternals();
}
connectedCallback() {
super.connectedCallback();
this._manageRequired();
this.updateComplete.then(() => {
this._setDefaultValue();
this._manageRequired();
});
}
/** @internal */
formResetCallback() {
this.updateComplete.then(() => {
this.value = this.defaultValue;
});
}
/** @internal */
formStateRestoreCallback(state, _mode) {
const entries = Array.from(state.entries()).map((e) => String(e[1]));
this.updateComplete.then(() => {
this.value = entries;
});
}
_setDefaultValue() {
if (Array.isArray(this.defaultValue) && this.defaultValue.length > 0) {
const val = this.defaultValue.map((v) => String(v));
this.value = val;
}
}
_manageRequired() {
const { value } = this;
if (value.length === 0 && this.required) {
this._internals.setValidity({
valueMissing: true,
}, 'Please select an item in the list.');
}
else {
this._internals.setValidity({});
}
}
_setFormValue() {
const fd = new FormData();
this._values.forEach((v) => {
fd.append(this.name ?? '', v);
});
this._internals.setFormValue(fd);
}
_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]) {
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);
}
_onMultiDeselectAllClick() {
this._selectedIndexes = [];
this._values = [];
this._options = this._options.map((op) => ({ ...op, selected: false }));
this._manageRequired();
this._dispatchChangeEvent();
}
_onMultiSelectAllClick() {
this._selectedIndexes = [];
this._values = [];
this._options = this._options.map((op) => ({ ...op, selected: true }));
this._options.forEach((op, index) => {
this._selectedIndexes.push(index);
this._values.push(op.value);
this._dispatchChangeEvent();
});
this._setFormValue();
this._manageRequired();
}
_renderLabel() {
switch (this._selectedIndexes.length) {
case 0:
return html `No items selected`;
case 1:
return html `1 item selected`;
default:
return html `${this._selectedIndexes.length} items selected`;
}
}
_renderSelectFace() {
return html `
${this._renderLabel()} ${chevronDownIcon}
`;
}
_renderComboboxFace() {
const inputVal = this._selectedIndex > -1 ? this._options[this._selectedIndex].label : '';
return html `
${this._renderLabel()}
`;
}
_renderOptions() {
const list = this.combobox ? this._filteredOptions : this._options;
return html `
`;
}
_renderDropdownControls() {
return html `
OK
`;
}
};
VscodeMultiSelect.styles = styles;
VscodeMultiSelect.formAssociated = true;
__decorate([
property({ type: Array, attribute: 'default-value' })
], VscodeMultiSelect.prototype, "defaultValue", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], VscodeMultiSelect.prototype, "disabled", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], VscodeMultiSelect.prototype, "required", void 0);
__decorate([
property({ reflect: true })
], VscodeMultiSelect.prototype, "name", void 0);
__decorate([
property({ type: Array, attribute: false })
], VscodeMultiSelect.prototype, "selectedIndexes", null);
__decorate([
property({ type: Array })
], VscodeMultiSelect.prototype, "value", null);
VscodeMultiSelect = __decorate([
customElement('vscode-multi-select')
], VscodeMultiSelect);
export { VscodeMultiSelect };
//# sourceMappingURL=vscode-multi-select.js.map