jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-26 18:56:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add options to selectors gallery (#12156)

Browse Source
This commit is contained in:
Bram Kragten 2022-03-30 14:34:37 +02:00 committed by GitHub
parent ba235ac797
commit 062f21aa91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
gallery/src/pages/components/ha-selector.ts
View File

@ -211,6 +211,12 @@ const SCHEMAS: {
class DemoHaSelector extends LitElement implements ProvideHassElement { class DemoHaSelector extends LitElement implements ProvideHassElement {
@state() public hass!: HomeAssistant; @state() public hass!: HomeAssistant;
@state() private _disabled = false;
@state() private _required = false;
@state() private _label = true;
private data = SCHEMAS.map(() => ({})); private data = SCHEMAS.map(() => ({}));
constructor() { constructor() {
@ -344,6 +350,29 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<div class="options">
<ha-formfield label="Labels">
<ha-switch
.name=${"label"}
.checked=${this._label}
@change=${this._handleOptionChange}
></ha-switch>
</ha-formfield>
<ha-formfield label="Required">
<ha-switch
.name=${"required"}
.checked=${this._required}
@change=${this._handleOptionChange}
></ha-switch>
</ha-formfield>
<ha-formfield label="Disabled">
<ha-switch
.name=${"disabled"}
.checked=${this._disabled}
@change=${this._handleOptionChange}
></ha-switch>
</ha-formfield>
</div>
${SCHEMAS.map((info, idx) => { ${SCHEMAS.map((info, idx) => {
const data = this.data[idx]; const data = this.data[idx];
const valueChanged = (ev) => { const valueChanged = (ev) => {
@ -363,12 +392,13 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
<span slot="heading">${value?.name || key}</span> <span slot="heading">${value?.name || key}</span>
<span slot="description">${value?.description}</span> <span slot="description">${value?.description}</span>
<ha-selector <ha-selector
.required=${true}
.hass=${this.hass} .hass=${this.hass}
.selector=${value!.selector} .selector=${value!.selector}
.key=${key} .key=${key}
.label=${value?.name || key} .label=${this._label ? value!.name : undefined}
.value=${data[key] ?? value!.default} .value=${data[key] ?? value!.default}
.disabled=${this._disabled}
.required=${this._required}
@value-changed=${valueChanged} @value-changed=${valueChanged}
></ha-selector> ></ha-selector>
</ha-settings-row> </ha-settings-row>
@ -381,10 +411,20 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
`; `;
} }
private _handleOptionChange(ev) {
this[`_${ev.target.name}`] = ev.target.checked;
}
static styles = css` static styles = css`
ha-selector { ha-selector {
width: 60; width: 60;
} }
.options {
padding: 16px 48px;
}
.options ha-formfield {
margin-right: 16px;
}
`; `;
} }