diff --git a/src/playground.ts b/src/playground.ts index d29e904c..729bbb7b 100644 --- a/src/playground.ts +++ b/src/playground.ts @@ -7,27 +7,29 @@ import {UIPSelectSetting} from './settings/setting/select-setting/select-setting import {UIPBoolSetting} from './settings/setting/bool-setting/bool-setting'; import {UIPSnippets} from './snippets/snippets'; import {UIPOptions} from './options/options'; +import {ESLSelect} from '@exadel/esl'; export { - UIPRoot, - UIPEditor, - UIPPreview, - UIPSettings, - UIPTextSetting, - UIPSelectSetting, - UIPBoolSetting, - UIPSnippets, + UIPRoot, + UIPEditor, + UIPPreview, + UIPSettings, + UIPTextSetting, + UIPSelectSetting, + UIPBoolSetting, + UIPSnippets, UIPOptions }; export function init() { - UIPRoot.register(); - UIPEditor.register(); - UIPPreview.register(); - UIPSettings.register(); - UIPTextSetting.register(); - UIPSelectSetting.register(); - UIPBoolSetting.register(); + UIPRoot.register(); + UIPEditor.register(); + UIPPreview.register(); + UIPSettings.register(); + UIPTextSetting.register(); + UIPBoolSetting.register(); UIPOptions.register(); - customElements.whenDefined(UIPRoot.is).then(() => UIPSnippets.register()); + ESLSelect.register(); + customElements.whenDefined(ESLSelect.is).then(() => UIPSelectSetting.register()); + customElements.whenDefined(UIPRoot.is).then(() => UIPSnippets.register()); } diff --git a/src/settings/setting/select-setting/select-setting.ts b/src/settings/setting/select-setting/select-setting.ts index 6ba04119..ba48add6 100644 --- a/src/settings/setting/select-setting/select-setting.ts +++ b/src/settings/setting/select-setting/select-setting.ts @@ -7,7 +7,10 @@ import ArrayUtils from '../../../utils/array-utils/array-utils'; export class UIPSelectSetting extends UIPSetting { public static is = 'uip-select-setting'; protected $field: ESLSelect; - protected inconsistentMessage = 'Inconsistency value'; + static inconsistentState = { + value: 'inconsistent', + text: 'Inconsistent value' + } @attr({defaultValue: 'replace'}) mode: 'replace' | 'append'; @boolAttr() multiple: boolean; @@ -21,10 +24,15 @@ export class UIPSelectSetting extends UIPSetting { this.$field.name = this.label || ''; const select = document.createElement('select'); + select.setAttribute('esl-select-target', ''); this.querySelectorAll('option').forEach(option => select.add(option)); select.multiple = this.multiple; + select.addEventListener('change', () => { + select.remove(this.values.indexOf(UIPSelectSetting.inconsistentState.value)); + this.$field.update(); + }); - this.$field.$select = select; + this.$field.appendChild(select); } applyTo(model: UIPStateModel) { @@ -38,7 +46,7 @@ export class UIPSelectSetting extends UIPSetting { model.transformAttribute(this.target, this.attribute, attrValue => { return attrValue === null ? val || null : this.values.reduce((outStr, option) => - outStr.replace(optRegex(option), ''), attrValue) + ` ${val}`; + outStr.replace(optRegex(option), ''), attrValue) + ` ${val}`; }); } @@ -73,18 +81,25 @@ export class UIPSelectSetting extends UIPSetting { protected setValue(value: string): void { this.reset(); + + this.$field.removeEventListener('change', this._onChange); value.split(' ').forEach(opt => this.$field.setSelected(opt, true)); + this.$field.addEventListener('change', this._onChange); } protected setInconsistency(): void { this.reset(); - this.$field.$select.add(new Option(this.inconsistentMessage, this.inconsistentMessage)); - this.$field.setSelected(this.inconsistentMessage, true); + this.$field.$select.remove(this.values.indexOf(UIPSelectSetting.inconsistentState.value)); + + const inconsistentOption = new Option(UIPSelectSetting.inconsistentState.text, + UIPSelectSetting.inconsistentState.value, false, true); + inconsistentOption.disabled = true; + + this.$field.$select.add(inconsistentOption); } protected reset(): void { - this.values.forEach(opt => this.$field.setSelected(opt, false)); - this.$field.$select.remove(this.values.indexOf(this.inconsistentMessage)); + this.$field.options.forEach(opt => opt.selected = false); } protected isValid(): boolean {