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

Add checkbox mode to boolean selector

Browse Source
This commit is contained in:
Paul Bottein 2024-08-26 19:14:31 +02:00
parent 061521a979
commit 932120869b
No known key found for this signature in database
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/ha-selector/ha-selector-boolean.ts
View File

@ -1,15 +1,19 @@
import { css, CSSResultGroup, html, LitElement } from "lit"; import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { BooleanSelector } from "../../data/selector";
import { HomeAssistant } from "../../types"; import { HomeAssistant } from "../../types";
import "../ha-checkbox";
import "../ha-formfield"; import "../ha-formfield";
import "../ha-switch";
import "../ha-input-helper-text"; import "../ha-input-helper-text";
import "../ha-switch";
@customElement("ha-selector-boolean") @customElement("ha-selector-boolean")
export class HaBooleanSelector extends LitElement { export class HaBooleanSelector extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public selector!: BooleanSelector;
@property({ type: Boolean }) public value = false; @property({ type: Boolean }) public value = false;
@property() public placeholder?: any; @property() public placeholder?: any;
@ -21,13 +25,24 @@ export class HaBooleanSelector extends LitElement {
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;
protected render() { protected render() {
const checkbox = this.selector.boolean?.mode === "checkbox";
return html` return html`
<ha-formfield alignEnd spaceBetween .label=${this.label}> <ha-formfield .alignEnd=${!checkbox} spaceBetween .label=${this.label}>
<ha-switch ${checkbox
.checked=${this.value ?? this.placeholder === true} ? html`
@change=${this._handleChange} <ha-checkbox
.disabled=${this.disabled} .checked=${this.value ?? this.placeholder === true}
></ha-switch> @change=${this._handleChange}
.disabled=${this.disabled}
></ha-checkbox>
`
: html`
<ha-switch
.checked=${this.value ?? this.placeholder === true}
@change=${this._handleChange}
.disabled=${this.disabled}
></ha-switch>
`}
</ha-formfield> </ha-formfield>
${this.helper ${this.helper
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>` ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`

5
src/data/selector.ts
View File

@ -101,8 +101,9 @@ export interface AttributeSelector {
} }
export interface BooleanSelector { export interface BooleanSelector {
// eslint-disable-next-line @typescript-eslint/ban-types boolean: {
boolean: {} | null; mode?: "checkbox" | "switch";
} | null;
} }
export interface ColorRGBSelector { export interface ColorRGBSelector {