Make ha-chip-set slot-able (#10647)

This commit is contained in:
Joakim Sørensen 2021-11-21 18:15:38 +01:00 committed by GitHub
parent 1a5c43d72a
commit 6c4e987a24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 50 deletions

View File

@ -3,6 +3,7 @@ import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import "../../../src/components/ha-card";
import "../../../src/components/ha-chip";
import "../../../src/components/ha-chip-set";
import "../../../src/components/ha-svg-icon";
const chips: {
@ -22,8 +23,8 @@ const chips: {
},
];
@customElement("demo-ha-chip")
export class DemoHaChip extends LitElement {
@customElement("demo-ha-chips")
export class DemoHaChips extends LitElement {
protected render(): TemplateResult {
return html`
<ha-card header="ha-chip demo">
@ -41,6 +42,23 @@ export class DemoHaChip extends LitElement {
)}
</div>
</ha-card>
<ha-card header="ha-chip-set demo">
<div class="card-content">
<ha-chip-set>
${chips.map(
(chip) => html`
<ha-chip .hasIcon=${chip.icon !== undefined}>
${chip.icon
? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
</ha-svg-icon>`
: ""}
${chip.content}
</ha-chip>
`
)}
</ha-chip-set>
</div>
</ha-card>
`;
}
@ -50,12 +68,19 @@ export class DemoHaChip extends LitElement {
max-width: 600px;
margin: 24px auto;
}
ha-chip {
margin-bottom: 4px;
}
.card-content {
display: flex;
flex-direction: column;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"demo-ha-chip": DemoHaChip;
"demo-ha-chips": DemoHaChips;
}
}

View File

@ -8,52 +8,31 @@ import {
TemplateResult,
unsafeCSS,
} from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import "./ha-chip";
declare global {
// for fire event
interface HASSDomEvents {
"chip-clicked": { index: string };
}
}
import { customElement } from "lit/decorators";
@customElement("ha-chip-set")
export class HaChipSet extends LitElement {
@property() public items = [];
protected render(): TemplateResult {
if (this.items.length === 0) {
return html``;
}
return html`
<div class="mdc-chip-set">
${this.items.map(
(item, idx) =>
html`
<ha-chip .index=${idx} @click=${this._handleClick}>
${item}
</ha-chip>
`
)}
<slot></slot>
</div>
`;
}
private _handleClick(ev): void {
fireEvent(this, "chip-clicked", {
index: ev.currentTarget.index,
});
}
static get styles(): CSSResultGroup {
return css`
${unsafeCSS(chipStyles)}
ha-chip {
slot::slotted(ha-chip) {
margin: 4px;
}
slot::slotted(ha-chip:first-of-type) {
margin-left: -4px;
}
slot::slotted(ha-chip:last-of-type) {
margin-right: -4px;
}
`;
}
}

View File

@ -10,22 +10,13 @@ import {
} from "lit";
import { customElement, property } from "lit/decorators";
declare global {
// for fire event
interface HASSDomEvents {
"chip-clicked": { index: string };
}
}
@customElement("ha-chip")
export class HaChip extends LitElement {
@property() public index = 0;
@property({ type: Boolean }) public hasIcon = false;
protected render(): TemplateResult {
return html`
<div class="mdc-chip" .index=${this.index}>
<div class="mdc-chip">
${this.hasIcon
? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
<slot name="icon"></slot>

View File

@ -1,6 +1,8 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-card";
import "../../../../components/ha-chip";
import "../../../../components/ha-chip-set";
import { showAutomationEditor } from "../../../../data/automation";
import {
@ -10,6 +12,12 @@ import {
import { showScriptEditor } from "../../../../data/script";
import { HomeAssistant } from "../../../../types";
declare global {
interface HASSDomEvents {
"entry-selected": undefined;
}
}
export abstract class HaDeviceAutomationCard<
T extends DeviceAutomation
> extends LitElement {
@ -55,29 +63,34 @@ export abstract class HaDeviceAutomationCard<
return html`
<h3>${this.hass.localize(this.headerKey)}</h3>
<div class="content">
<ha-chip-set
@chip-clicked=${this._handleAutomationClicked}
.items=${this.automations.map((automation) =>
this._localizeDeviceAutomation(this.hass, automation)
<ha-chip-set>
${this.automations.map(
(automation, idx) =>
html`
<ha-chip .index=${idx} @click=${this._handleAutomationClicked}>
${this._localizeDeviceAutomation(this.hass, automation)}
</ha-chip>
`
)}
>
</ha-chip-set>
</div>
`;
}
private _handleAutomationClicked(ev: CustomEvent) {
const automation = this.automations[ev.detail.index];
const automation = this.automations[(ev.currentTarget as any).index];
if (!automation) {
return;
}
if (this.script) {
showScriptEditor({ sequence: [automation as DeviceAction] });
fireEvent(this, "entry-selected");
return;
}
const data = {};
data[this.type] = [automation];
showAutomationEditor(data);
fireEvent(this, "entry-selected");
}
static get styles(): CSSResultGroup {

View File

@ -91,7 +91,7 @@ export class DialogDeviceAutomation extends LitElement {
}.create`
)}
>
<div @chip-clicked=${this.closeDialog}>
<div @entry-selected=${this.closeDialog}>
${this._triggers.length ||
this._conditions.length ||
this._actions.length