From 87c22229e01fbafc4413404d2bbf4aa421968290 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sat, 22 Jan 2022 14:44:50 -0800 Subject: [PATCH] Add demo for selectors (#11398) * Add demo for selectors * Update label name --- gallery/script/netlify_build_gallery | 2 +- gallery/sidebar.js | 1 + .../src/pages/automation/selectors.markdown | 3 + gallery/src/pages/automation/selectors.ts | 102 ++++++++++++++++++ 4 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 gallery/src/pages/automation/selectors.markdown create mode 100644 gallery/src/pages/automation/selectors.ts diff --git a/gallery/script/netlify_build_gallery b/gallery/script/netlify_build_gallery index e96cb9a93a..a5732d4c83 100755 --- a/gallery/script/netlify_build_gallery +++ b/gallery/script/netlify_build_gallery @@ -1,6 +1,6 @@ #!/bin/bash -TARGET_LABEL="Needs design preview" +TARGET_LABEL="needs design preview" if [[ "$NETLIFY" != "true" ]]; then echo "This script can only be run on Netlify" diff --git a/gallery/sidebar.js b/gallery/sidebar.js index 02ffeb2aa8..84bd8f8eff 100644 --- a/gallery/sidebar.js +++ b/gallery/sidebar.js @@ -20,6 +20,7 @@ module.exports = [ "editor-trigger", "editor-condition", "editor-action", + "selectors", "trace", "trace-timeline", ], diff --git a/gallery/src/pages/automation/selectors.markdown b/gallery/src/pages/automation/selectors.markdown new file mode 100644 index 0000000000..6342871182 --- /dev/null +++ b/gallery/src/pages/automation/selectors.markdown @@ -0,0 +1,3 @@ +--- +title: Selectors +--- diff --git a/gallery/src/pages/automation/selectors.ts b/gallery/src/pages/automation/selectors.ts new file mode 100644 index 0000000000..1e66055887 --- /dev/null +++ b/gallery/src/pages/automation/selectors.ts @@ -0,0 +1,102 @@ +/* eslint-disable lit/no-template-arrow */ +import { LitElement, TemplateResult, html } from "lit"; +import { customElement, state } from "lit/decorators"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import type { HomeAssistant } from "../../../../src/types"; +import "../../components/demo-black-white-row"; +import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; +import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; +import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry"; +import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; +import "../../../../src/panels/config/automation/trigger/ha-automation-trigger"; +import { Selector } from "../../../../src/data/selector"; +import "../../../../src/components/ha-selector/ha-selector"; + +const SCHEMAS: { name: string; selector: Selector }[] = [ + { name: "Addon", selector: { addon: {} } }, + + { name: "Entity", selector: { entity: {} } }, + { name: "Device", selector: { device: {} } }, + { name: "Area", selector: { area: {} } }, + { name: "Target", selector: { target: {} } }, + { + name: "Number", + selector: { + number: { + min: 0, + max: 10, + }, + }, + }, + { name: "Boolean", selector: { boolean: {} } }, + { name: "Time", selector: { time: {} } }, + { name: "Action", selector: { action: {} } }, + { name: "Text", selector: { text: { multiline: false } } }, + { name: "Text Multiline", selector: { text: { multiline: true } } }, + { name: "Object", selector: { object: {} } }, + { + name: "Select", + selector: { + select: { + options: ["Everyone Home", "Some Home", "All gone"], + }, + }, + }, +]; + +@customElement("demo-automation-selectors") +class DemoHaSelector extends LitElement { + @state() private hass!: HomeAssistant; + + private data: any = SCHEMAS.map(() => undefined); + + constructor() { + super(); + const hass = provideHass(this); + hass.updateTranslations(null, "en"); + hass.updateTranslations("config", "en"); + mockEntityRegistry(hass); + mockDeviceRegistry(hass); + mockAreaRegistry(hass); + mockHassioSupervisor(hass); + } + + protected render(): TemplateResult { + const valueChanged = (ev) => { + const sampleIdx = ev.target.sampleIdx; + this.data[sampleIdx] = ev.detail.value; + this.requestUpdate(); + }; + return html` + ${SCHEMAS.map( + (info, sampleIdx) => html` + + ${["light", "dark"].map( + (slot) => + html` + + ` + )} + + ` + )} + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "demo-automation-selectors": DemoHaSelector; + } +}