mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 19:06:36 +00:00
Forward change event vaadin combo box (#1208)
* Forward change event vaadin combo box * Stop propagation
This commit is contained in:
parent
4e9a7a4a23
commit
d3c10d9b49
@ -11,11 +11,12 @@ import './state-badge.js';
|
|||||||
|
|
||||||
import computeStateName from '../../common/entity/compute_state_name.js';
|
import computeStateName from '../../common/entity/compute_state_name.js';
|
||||||
import LocalizeMixin from '../../mixins/localize-mixin.js';
|
import LocalizeMixin from '../../mixins/localize-mixin.js';
|
||||||
|
import EventsMixin from '../../mixins/events-mixin.js';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* @appliesMixin LocalizeMixin
|
* @appliesMixin LocalizeMixin
|
||||||
*/
|
*/
|
||||||
class HaEntityPicker extends LocalizeMixin(PolymerElement) {
|
class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
||||||
static get template() {
|
static get template() {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<style>
|
||||||
@ -29,7 +30,15 @@ class HaEntityPicker extends LocalizeMixin(PolymerElement) {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<vaadin-combo-box-light items="[[_states]]" item-value-path="entity_id" item-label-path="entity_id" value="{{value}}" opened="{{opened}}" allow-custom-value="[[allowCustomEntity]]">
|
<vaadin-combo-box-light
|
||||||
|
items="[[_states]]"
|
||||||
|
item-value-path="entity_id"
|
||||||
|
item-label-path="entity_id"
|
||||||
|
value="{{value}}"
|
||||||
|
opened="{{opened}}"
|
||||||
|
allow-custom-value="[[allowCustomEntity]]"
|
||||||
|
on-change='_fireChanged'
|
||||||
|
>
|
||||||
<paper-input autofocus="[[autofocus]]" label="[[_computeLabel(label, localize)]]" class="input" value="[[value]]" disabled="[[disabled]]">
|
<paper-input autofocus="[[autofocus]]" label="[[_computeLabel(label, localize)]]" class="input" value="[[value]]" disabled="[[disabled]]">
|
||||||
<paper-icon-button slot="suffix" class="clear-button" icon="mdi:close" no-ripple="" hidden\$="[[!value]]">Clear</paper-icon-button>
|
<paper-icon-button slot="suffix" class="clear-button" icon="mdi:close" no-ripple="" hidden\$="[[!value]]">Clear</paper-icon-button>
|
||||||
<paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden="[[!_states.length]]">Toggle</paper-icon-button>
|
<paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden="[[!_states.length]]">Toggle</paper-icon-button>
|
||||||
@ -135,6 +144,11 @@ class HaEntityPicker extends LocalizeMixin(PolymerElement) {
|
|||||||
_computeToggleIcon(opened) {
|
_computeToggleIcon(opened) {
|
||||||
return opened ? 'mdi:menu-up' : 'mdi:menu-down';
|
return opened ? 'mdi:menu-up' : 'mdi:menu-down';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_fireChanged(ev) {
|
||||||
|
ev.stopPropagation();
|
||||||
|
this.fire('change');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
customElements.define('ha-entity-picker', HaEntityPicker);
|
customElements.define('ha-entity-picker', HaEntityPicker);
|
||||||
|
@ -5,7 +5,9 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
|||||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||||
import '@vaadin/vaadin-combo-box/vaadin-combo-box-light.js';
|
import '@vaadin/vaadin-combo-box/vaadin-combo-box-light.js';
|
||||||
|
|
||||||
class HaComboBox extends PolymerElement {
|
import EventsMixin from '../mixins/events-mixin.js';
|
||||||
|
|
||||||
|
class HaComboBox extends EventsMixin(PolymerElement) {
|
||||||
static get template() {
|
static get template() {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<style>
|
||||||
@ -19,7 +21,15 @@ class HaComboBox extends PolymerElement {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<vaadin-combo-box-light items="[[_items]]" item-value-path="[[itemValuePath]]" item-label-path="[[itemLabelPath]]" value="{{value}}" opened="{{opened}}" allow-custom-value="[[allowCustomValue]]">
|
<vaadin-combo-box-light
|
||||||
|
items="[[_items]]"
|
||||||
|
item-value-path="[[itemValuePath]]"
|
||||||
|
item-label-path="[[itemLabelPath]]"
|
||||||
|
value="{{value}}"
|
||||||
|
opened="{{opened}}"
|
||||||
|
allow-custom-value="[[allowCustomValue]]"
|
||||||
|
on-change='_fireChanged'
|
||||||
|
>
|
||||||
<paper-input autofocus="[[autofocus]]" label="[[label]]" class="input" value="[[value]]">
|
<paper-input autofocus="[[autofocus]]" label="[[label]]" class="input" value="[[value]]">
|
||||||
<paper-icon-button slot="suffix" class="clear-button" icon="mdi:close" hidden\$="[[!value]]">Clear</paper-icon-button>
|
<paper-icon-button slot="suffix" class="clear-button" icon="mdi:close" hidden\$="[[!value]]">Clear</paper-icon-button>
|
||||||
<paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden\$="[[!items.length]]">Toggle</paper-icon-button>
|
<paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden\$="[[!items.length]]">Toggle</paper-icon-button>
|
||||||
@ -79,6 +89,11 @@ class HaComboBox extends PolymerElement {
|
|||||||
_computeItemLabel(item, itemLabelPath) {
|
_computeItemLabel(item, itemLabelPath) {
|
||||||
return itemLabelPath ? item[itemLabelPath] : item;
|
return itemLabelPath ? item[itemLabelPath] : item;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_fireChanged(ev) {
|
||||||
|
ev.stopPropagation();
|
||||||
|
this.fire('change');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
customElements.define('ha-combo-box', HaComboBox);
|
customElements.define('ha-combo-box', HaComboBox);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user