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

Reorganize gallery (#11116)

Browse Source 
* Reorganize gallery

* GitHub edit links

* Render sidebar during build

* Auto rebuild when sidebar changes

* Yarn dedupe

* Fixes

* Allow just metadata without text

* Show edit text link if metadata defined

* Update build-scripts/gulp/gallery.js

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
This commit is contained in:
Paulus Schoutsen 2022-01-06 20:20:57 -08:00 committed by GitHub
parent fb9ea981ed
commit 2c0d330f1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 511 additions and 404 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build-scripts/gulp/clean.js
View File

@ -31,6 +31,6 @@ gulp.task("clean-hassio", () =>
gulp.task( gulp.task(
"clean-gallery", "clean-gallery",
gulp.parallel("clean-translations", () => gulp.parallel("clean-translations", () =>
del([paths.gallery_output_root, paths.build_dir]) del([paths.gallery_output_root, paths.gallery_build, paths.build_dir])
) )
); );

117
build-scripts/gulp/gallery.js
View File

@ -1,8 +1,11 @@
/* eslint-disable */
// Run demo develop mode // Run demo develop mode
const gulp = require("gulp"); const gulp = require("gulp");
const fs = require("fs"); const fs = require("fs");
const path = require("path"); const path = require("path");
const marked = require("marked"); const marked = require("marked");
const glob = require("glob");
const yaml = require("js-yaml");
const env = require("../env"); const env = require("../env");
const paths = require("../paths"); const paths = require("../paths");
@ -18,7 +21,7 @@ require("./rollup.js");
gulp.task("gather-gallery-demos", async function gatherDemos() { gulp.task("gather-gallery-demos", async function gatherDemos() {
const demoDir = path.resolve(paths.gallery_dir, "src/demos"); const demoDir = path.resolve(paths.gallery_dir, "src/demos");
const files = await fs.promises.readdir(demoDir); const files = glob.sync(path.resolve(demoDir, "**/*"));
const galleryBuild = path.resolve(paths.gallery_dir, "build"); const galleryBuild = path.resolve(paths.gallery_dir, "build");
fs.mkdirSync(galleryBuild, { recursive: true }); fs.mkdirSync(galleryBuild, { recursive: true });
@ -28,47 +31,110 @@ gulp.task("gather-gallery-demos", async function gatherDemos() {
const processed = new Set(); const processed = new Set();
for (const file of files) { for (const file of files) {
let demoId = path.basename( if (fs.lstatSync(file).isDirectory()) {
file, continue;
file.endsWith(".ts") ? ".ts" : ".markdown" }
); demoId = file.substring(demoDir.length + 1, file.lastIndexOf("."));
// Can be processed if we saw demo or description before.
if (processed.has(demoId)) { if (processed.has(demoId)) {
continue; continue;
} }
processed.add(demoId); processed.add(demoId);
const demoFile = path.resolve(demoDir, `${demoId}.ts`); const [category, name] = demoId.split("/", 2);
const demoFile = path.resolve(demoDir, `${demoId}.ts`);
const descriptionFile = path.resolve(demoDir, `${demoId}.markdown`); const descriptionFile = path.resolve(demoDir, `${demoId}.markdown`);
const hasDemo = fs.existsSync(demoFile); const hasDemo = fs.existsSync(demoFile);
const hasDescription = fs.existsSync(descriptionFile); let hasDescription = fs.existsSync(descriptionFile);
let metadata = {};
if (hasDescription) { if (hasDescription) {
const descriptionContent = fs.readFileSync(descriptionFile, "utf-8"); let descriptionContent = fs.readFileSync(descriptionFile, "utf-8");
fs.writeFileSync(
path.resolve(galleryBuild, `${demoId}-description.ts`), if (descriptionContent.startsWith("---")) {
` const metadataEnd = descriptionContent.indexOf("---", 3);
import {html} from "lit"; metadata = yaml.load(descriptionContent.substring(3, metadataEnd));
export default html\`${marked(descriptionContent)}\` descriptionContent = descriptionContent
` .substring(metadataEnd + 3)
); .trim();
}
// If description is just metadata
if (descriptionContent === "") {
hasDescription = false;
} else {
fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
fs.writeFileSync(
path.resolve(galleryBuild, `${demoId}-description.ts`),
`
import {html} from "lit";
export default html\`${marked(descriptionContent)}\`
`
);
}
} }
const demoPath = `../src/demos/${demoId}`; content += ` "${demoId}": {
const descriptionPath = `./${demoId}-description`; metadata: ${JSON.stringify(metadata)},
content += ` "${demoId.substring(5)}": {
${ ${
hasDescription hasDescription
? `description: () => import("${descriptionPath}").then(m => m.default),` ? `description: () => import("./${demoId}-description").then(m => m.default),`
: "" : ""
} }
${hasDemo ? `load: () => import("${demoPath}")` : ""} ${hasDemo ? `load: () => import("../src/demos/${demoId}")` : ""}
},\n`; },\n`;
} }
content += "};"; content += "};\n";
// Generate sidebar
const sidebarPath = path.resolve(paths.gallery_dir, "sidebar.js");
// To make watch work during development
delete require.cache[sidebarPath];
const sidebar = require(sidebarPath);
const demosToProcess = {};
for (const key of processed) {
const [category, demo] = key.split("/", 2);
if (!(category in demosToProcess)) {
demosToProcess[category] = new Set();
}
demosToProcess[category].add(demo);
}
for (const group of Object.values(sidebar)) {
const toProcess = demosToProcess[group.category];
delete demosToProcess[group.category];
if (!toProcess) {
console.error("Unknown category", group.category);
continue;
}
// Any pre-defined groups will not be sorted.
if (group.demos) {
for (const demo of group.demos) {
if (!toProcess.delete(demo)) {
console.error("Found unreferenced demo", demo);
}
}
} else {
group.demos = [];
}
for (const demo of Array.from(toProcess).sort()) {
group.demos.push(demo);
}
}
for (const [category, demos] of Object.entries(demosToProcess)) {
sidebar.push({
category,
header: category,
demos: Array.from(demos),
});
}
content += `export const SIDEBAR = ${JSON.stringify(sidebar, null, 2)};\n`;
fs.writeFileSync( fs.writeFileSync(
path.resolve(galleryBuild, "import-demos.ts"), path.resolve(galleryBuild, "import-demos.ts"),
@ -99,7 +165,10 @@ gulp.task(
: "webpack-dev-server-gallery", : "webpack-dev-server-gallery",
async function watchMarkdownFiles() { async function watchMarkdownFiles() {
gulp.watch( gulp.watch(
path.resolve(paths.gallery_dir, "src/demos/*.markdown"), [
path.resolve(paths.gallery_dir, "src/demos/**/*.markdown"),
path.resolve(paths.gallery_dir, "sidebar.js"),
],
gulp.series("gather-gallery-demos") gulp.series("gather-gallery-demos")
); );
} }

1
build-scripts/paths.js
View File

@ -26,6 +26,7 @@ module.exports = {
cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"), cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
gallery_dir: path.resolve(__dirname, "../gallery"), gallery_dir: path.resolve(__dirname, "../gallery"),
gallery_build: path.resolve(__dirname, "../gallery/build"),
gallery_output_root: path.resolve(__dirname, "../gallery/dist"), gallery_output_root: path.resolve(__dirname, "../gallery/dist"),
gallery_output_latest: path.resolve( gallery_output_latest: path.resolve(
__dirname, __dirname,

40
gallery/sidebar.js Normal file
View File

@ -0,0 +1,40 @@
module.exports = [
{
category: "introduction",
demos: ["introduction"],
},
{
category: "lovelace",
// Each section has a header
header: "Lovelace",
// Specify demos to make sure they are put on top.
demos: [],
// Add a demoStart to automatically gather demos based on their name
},
{
category: "automation",
header: "Automation",
},
{
category: "components",
header: "Components",
demos: [
"ha-alert",
"ha-bar",
"ha-chips",
"ha-faded",
"ha-form",
"ha-label-badge",
"ha-selector",
],
},
{
category: "more-info",
header: "More Info",
},
{
category: "rest",
header: "Rest",
},
];

44
gallery/src/components/demo-description.ts Normal file
View File

@ -0,0 +1,44 @@
import { html, css, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { until } from "lit/directives/until";
import { haStyle } from "../../../src/resources/styles";
import { DEMOS } from "../../build/import-demos";
@customElement("demo-description")
class DemoDescription extends LitElement {
@property() public demo!: string;
render() {
if (!DEMOS[this.demo].description) {
return "";
}
return html`
${until(
DEMOS[this.demo].description().then(
(content) => html`
<ha-card>
<div class="card-content">${content}</div>
</ha-card>
`
),
""
)}
`;
}
static styles = [
haStyle,
css`
ha-card {
max-width: 600px;
margin: 16px auto;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"demo-description": DemoDescription;
}
}

8
gallery/src/demos/demo-automation-describe-action.ts → gallery/src/demos/automation/describe-action.ts
View File

@ -1,10 +1,10 @@
import { dump } from "js-yaml"; import { dump } from "js-yaml";
import { html, css, LitElement, TemplateResult } from "lit"; import { html, css, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import { describeAction } from "../../../src/data/script_i18n"; import { describeAction } from "../../../../src/data/script_i18n";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../src/types"; import { HomeAssistant } from "../../../../src/types";
const actions = [ const actions = [
{ wait_template: "{{ true }}", alias: "Something with an alias" }, { wait_template: "{{ true }}", alias: "Something with an alias" },

4
gallery/src/demos/demo-automation-describe-condition.ts → gallery/src/demos/automation/describe-condition.ts
View File

@ -1,8 +1,8 @@
import { dump } from "js-yaml"; import { dump } from "js-yaml";
import { html, css, LitElement, TemplateResult } from "lit"; import { html, css, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import { describeCondition } from "../../../src/data/automation_i18n"; import { describeCondition } from "../../../../src/data/automation_i18n";
const conditions = [ const conditions = [
{ condition: "and" }, { condition: "and" },

4
gallery/src/demos/demo-automation-describe-trigger.ts → gallery/src/demos/automation/describe-trigger.ts
View File

@ -1,8 +1,8 @@
import { dump } from "js-yaml"; import { dump } from "js-yaml";
import { html, css, LitElement, TemplateResult } from "lit"; import { html, css, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import { describeTrigger } from "../../../src/data/automation_i18n"; import { describeTrigger } from "../../../../src/data/automation_i18n";
const triggers = [ const triggers = [
{ platform: "state" }, { platform: "state" },

38
gallery/src/demos/demo-automation-editor-action.ts → gallery/src/demos/automation/editor-action.ts
View File

@ -1,25 +1,25 @@
/* eslint-disable lit/no-template-arrow */ /* eslint-disable lit/no-template-arrow */
import { LitElement, TemplateResult, html } from "lit"; import { LitElement, TemplateResult, html } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import type { HomeAssistant } from "../../../src/types"; import type { HomeAssistant } from "../../../../src/types";
import "../components/demo-black-white-row"; import "../../components/demo-black-white-row";
import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry"; import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry"; import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry"; import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor"; import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
import "../../../src/panels/config/automation/action/ha-automation-action"; import "../../../../src/panels/config/automation/action/ha-automation-action";
import { HaChooseAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-choose"; import { HaChooseAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-choose";
import { HaDelayAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-delay"; import { HaDelayAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-delay";
import { HaDeviceAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-device_id"; import { HaDeviceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-device_id";
import { HaEventAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-event"; import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event";
import { HaRepeatAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-repeat"; import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
import { HaSceneAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-scene"; import { HaSceneAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-scene";
import { HaServiceAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-service"; import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
import { HaWaitForTriggerAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger"; import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger";
import { HaWaitAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-wait_template"; import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
import { Action } from "../../../src/data/script"; import { Action } from "../../../../src/data/script";
import { HaConditionAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-condition"; import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
const SCHEMAS: { name: string; actions: Action[] }[] = [ const SCHEMAS: { name: string; actions: Action[] }[] = [
{ name: "Event", actions: [HaEventAction.defaultConfig] }, { name: "Event", actions: [HaEventAction.defaultConfig] },

36
gallery/src/demos/demo-automation-editor-condition.ts → gallery/src/demos/automation/editor-condition.ts
View File

@ -1,24 +1,24 @@
/* eslint-disable lit/no-template-arrow */ /* eslint-disable lit/no-template-arrow */
import { LitElement, TemplateResult, html } from "lit"; import { LitElement, TemplateResult, html } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import type { HomeAssistant } from "../../../src/types"; import type { HomeAssistant } from "../../../../src/types";
import "../components/demo-black-white-row"; import "../../components/demo-black-white-row";
import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry"; import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry"; import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry"; import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor"; import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
import type { Condition } from "../../../src/data/automation"; import type { Condition } from "../../../../src/data/automation";
import "../../../src/panels/config/automation/condition/ha-automation-condition"; import "../../../../src/panels/config/automation/condition/ha-automation-condition";
import { HaDeviceCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-device"; import { HaDeviceCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
import { HaLogicalCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-logical"; import { HaLogicalCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-logical";
import HaNumericStateCondition from "../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state"; import HaNumericStateCondition from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state";
import { HaStateCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-state"; import { HaStateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-state";
import { HaSunCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-sun"; import { HaSunCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-sun";
import { HaTemplateCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-template"; import { HaTemplateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-template";
import { HaTimeCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-time"; import { HaTimeCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-time";
import { HaTriggerCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger"; import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
import { HaZoneCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-zone"; import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
const SCHEMAS: { name: string; conditions: Condition[] }[] = [ const SCHEMAS: { name: string; conditions: Condition[] }[] = [
{ {

46
gallery/src/demos/demo-automation-editor-trigger.ts → gallery/src/demos/automation/editor-trigger.ts
View File

@ -1,29 +1,29 @@
/* eslint-disable lit/no-template-arrow */ /* eslint-disable lit/no-template-arrow */
import { LitElement, TemplateResult, html } from "lit"; import { LitElement, TemplateResult, html } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import type { HomeAssistant } from "../../../src/types"; import type { HomeAssistant } from "../../../../src/types";
import "../components/demo-black-white-row"; import "../../components/demo-black-white-row";
import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry"; import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry"; import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry"; import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor"; import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
import type { Trigger } from "../../../src/data/automation"; import type { Trigger } from "../../../../src/data/automation";
import { HaGeolocationTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location"; import { HaGeolocationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location";
import { HaEventTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-event"; import { HaEventTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-event";
import { HaHassTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant"; import { HaHassTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant";
import { HaNumericStateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state"; import { HaNumericStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state";
import { HaSunTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-sun"; import { HaSunTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-sun";
import { HaTagTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-tag"; import { HaTagTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-tag";
import { HaTemplateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-template"; import { HaTemplateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-template";
import { HaTimeTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time"; import { HaTimeTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time";
import { HaTimePatternTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern"; import { HaTimePatternTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern";
import { HaWebhookTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook"; import { HaWebhookTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook";
import { HaZoneTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone"; import { HaZoneTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone";
import { HaDeviceTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device"; import { HaDeviceTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device";
import { HaStateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state"; import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
import { HaMQTTTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt"; import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
import "../../../src/panels/config/automation/trigger/ha-automation-trigger"; import "../../../../src/panels/config/automation/trigger/ha-automation-trigger";
const SCHEMAS: { name: string; triggers: Trigger[] }[] = [ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
{ {

14
gallery/src/demos/demo-automation-trace-timeline.ts → gallery/src/demos/automation/trace-timeline.ts
View File

@ -1,13 +1,13 @@
/* eslint-disable lit/no-template-arrow */ /* eslint-disable lit/no-template-arrow */
import { html, css, LitElement, TemplateResult } from "lit"; import { html, css, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import "../../../src/components/trace/hat-script-graph"; import "../../../../src/components/trace/hat-script-graph";
import "../../../src/components/trace/hat-trace-timeline"; import "../../../../src/components/trace/hat-trace-timeline";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../src/types"; import { HomeAssistant } from "../../../../src/types";
import { mockDemoTrace } from "../data/traces/mock-demo-trace"; import { mockDemoTrace } from "../../data/traces/mock-demo-trace";
import { DemoTrace } from "../data/traces/types"; import { DemoTrace } from "../../data/traces/types";
const traces: DemoTrace[] = [ const traces: DemoTrace[] = [
mockDemoTrace({ state: "running" }), mockDemoTrace({ state: "running" }),

16
gallery/src/demos/demo-automation-trace.ts → gallery/src/demos/automation/trace.ts
View File

@ -1,14 +1,14 @@
/* eslint-disable lit/no-template-arrow */ /* eslint-disable lit/no-template-arrow */
import { html, css, LitElement, TemplateResult } from "lit"; import { html, css, LitElement, TemplateResult } from "lit";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import "../../../src/components/trace/hat-script-graph"; import "../../../../src/components/trace/hat-script-graph";
import "../../../src/components/trace/hat-trace-timeline"; import "../../../../src/components/trace/hat-trace-timeline";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../src/types"; import { HomeAssistant } from "../../../../src/types";
import { DemoTrace } from "../data/traces/types"; import { DemoTrace } from "../../data/traces/types";
import { basicTrace } from "../data/traces/basic_trace"; import { basicTrace } from "../../data/traces/basic_trace";
import { motionLightTrace } from "../data/traces/motion-light-trace"; import { motionLightTrace } from "../../data/traces/motion-light-trace";
const traces: DemoTrace[] = [basicTrace, motionLightTrace]; const traces: DemoTrace[] = [basicTrace, motionLightTrace];

0
gallery/src/demos/demo-ha-alert.markdown → gallery/src/demos/components/ha-alert.markdown
View File

12
gallery/src/demos/demo-ha-alert.ts → gallery/src/demos/components/ha-alert.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element"; import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
import "../../../src/components/ha-alert"; import "../../../../src/components/ha-alert";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import "../../../src/components/ha-logo-svg"; import "../../../../src/components/ha-logo-svg";
const alerts: { const alerts: {
title?: string; title?: string;
@ -128,7 +128,7 @@ const alerts: {
}, },
]; ];
@customElement("demo-ha-alert") @customElement("demo-components-ha-alert")
export class DemoHaAlert extends LitElement { export class DemoHaAlert extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
@ -212,6 +212,6 @@ export class DemoHaAlert extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-ha-alert": DemoHaAlert; "demo-components-ha-alert": DemoHaAlert;
} }
} }

8
gallery/src/demos/demo-ha-bar.ts → gallery/src/demos/components/ha-bar.ts
View File

@ -1,8 +1,8 @@
import { html, css, LitElement, TemplateResult } from "lit"; import { html, css, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import "../../../src/components/ha-bar"; import "../../../../src/components/ha-bar";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
const bars: { const bars: {
min?: number; min?: number;
@ -34,7 +34,7 @@ const bars: {
}, },
]; ];
@customElement("demo-ha-bar") @customElement("demo-components-ha-bar")
export class DemoHaBar extends LitElement { export class DemoHaBar extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
@ -80,6 +80,6 @@ export class DemoHaBar extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-ha-bar": DemoHaBar; "demo-components-ha-bar": DemoHaBar;
} }
} }

12
gallery/src/demos/demo-ha-chips.ts → gallery/src/demos/components/ha-chips.ts
View File

@ -1,10 +1,10 @@
import { mdiHomeAssistant } from "@mdi/js"; import { mdiHomeAssistant } from "@mdi/js";
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import "../../../src/components/ha-chip"; import "../../../../src/components/ha-chip";
import "../../../src/components/ha-chip-set"; import "../../../../src/components/ha-chip-set";
import "../../../src/components/ha-svg-icon"; import "../../../../src/components/ha-svg-icon";
const chips: { const chips: {
icon?: string; icon?: string;
@ -23,7 +23,7 @@ const chips: {
}, },
]; ];
@customElement("demo-ha-chips") @customElement("demo-components-ha-chips")
export class DemoHaChips extends LitElement { export class DemoHaChips extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
@ -81,6 +81,6 @@ export class DemoHaChips extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-ha-chips": DemoHaChips; "demo-components-ha-chips": DemoHaChips;
} }
} }

10
gallery/src/demos/demo-ha-faded.ts → gallery/src/demos/components/ha-faded.ts
View File

@ -1,8 +1,8 @@
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import "../../../src/components/ha-faded"; import "../../../../src/components/ha-faded";
import "../../../src/components/ha-markdown"; import "../../../../src/components/ha-markdown";
const LONG_TEXT = ` const LONG_TEXT = `
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum.
@ -18,7 +18,7 @@ Quisque posuere, velit sed porttitor dapibus, neque augue fringilla felis, eu lu
const SMALL_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."; const SMALL_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
@customElement("demo-ha-faded") @customElement("demo-components-ha-faded")
export class DemoHaFaded extends LitElement { export class DemoHaFaded extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
@ -83,6 +83,6 @@ export class DemoHaFaded extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-ha-faded": DemoHaFaded; "demo-components-ha-faded": DemoHaFaded;
} }
} }

12
gallery/src/demos/demo-ha-form.ts → gallery/src/demos/components/ha-form.ts
View File

@ -2,10 +2,10 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { LitElement, TemplateResult, html } from "lit"; import { LitElement, TemplateResult, html } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import { computeInitialHaFormData } from "../../../src/components/ha-form/compute-initial-ha-form-data"; import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
import type { HaFormSchema } from "../../../src/components/ha-form/types"; import type { HaFormSchema } from "../../../../src/components/ha-form/types";
import "../../../src/components/ha-form/ha-form"; import "../../../../src/components/ha-form/ha-form";
import "../components/demo-black-white-row"; import "../../components/demo-black-white-row";
const SCHEMAS: { const SCHEMAS: {
title: string; title: string;
@ -248,7 +248,7 @@ const SCHEMAS: {
}, },
]; ];
@customElement("demo-ha-form") @customElement("demo-components-ha-form")
class DemoHaForm extends LitElement { class DemoHaForm extends LitElement {
private data = SCHEMAS.map( private data = SCHEMAS.map(
({ schema, data }) => data || computeInitialHaFormData(schema) ({ schema, data }) => data || computeInitialHaFormData(schema)
@ -301,6 +301,6 @@ class DemoHaForm extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-ha-form": DemoHaForm; "demo-components-ha-form": DemoHaForm;
} }
} }

8
gallery/src/demos/demo-ha-label-badge.ts → gallery/src/demos/components/ha-label-badge.ts
View File

@ -1,7 +1,7 @@
import { html, css, LitElement, TemplateResult } from "lit"; import { html, css, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import "../../../src/components/ha-label-badge"; import "../../../../src/components/ha-label-badge";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
const colors = ["#03a9f4", "#ffa600", "#43a047"]; const colors = ["#03a9f4", "#ffa600", "#43a047"];
@ -50,7 +50,7 @@ const badges: {
}, },
]; ];
@customElement("demo-ha-label-badge") @customElement("demo-components-ha-label-badge")
export class DemoHaLabelBadge extends LitElement { export class DemoHaLabelBadge extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
@ -117,6 +117,6 @@ export class DemoHaLabelBadge extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-ha-label-badge": DemoHaLabelBadge; "demo-components-ha-label-badge": DemoHaLabelBadge;
} }
} }

24
gallery/src/demos/demo-ha-selector.ts → gallery/src/demos/components/ha-selector.ts
View File

@ -2,16 +2,16 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { LitElement, TemplateResult, css, html } from "lit"; import { LitElement, TemplateResult, css, html } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import "../../../src/components/ha-selector/ha-selector"; import "../../../../src/components/ha-selector/ha-selector";
import "../../../src/components/ha-settings-row"; import "../../../../src/components/ha-settings-row";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import type { HomeAssistant } from "../../../src/types"; import type { HomeAssistant } from "../../../../src/types";
import "../components/demo-black-white-row"; import "../../components/demo-black-white-row";
import { BlueprintInput } from "../../../src/data/blueprint"; import { BlueprintInput } from "../../../../src/data/blueprint";
import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry"; import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry"; import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry"; import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor"; import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
const SCHEMAS: { const SCHEMAS: {
name: string; name: string;
@ -62,7 +62,7 @@ const SCHEMAS: {
}, },
]; ];
@customElement("demo-ha-selector") @customElement("demo-components-ha-selector")
class DemoHaSelector extends LitElement { class DemoHaSelector extends LitElement {
@state() private hass!: HomeAssistant; @state() private hass!: HomeAssistant;
@ -126,6 +126,6 @@ class DemoHaSelector extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-ha-selector": DemoHaSelector; "demo-components-ha-selector": DemoHaSelector;
} }
} }

3
gallery/src/demos/demo-introduction.markdown → gallery/src/demos/introduction/introduction.markdown
View File

@ -1,3 +1,6 @@
---
title: Introduction
---
Lovelace has many different cards. Each card allows the user to tell Lovelace has many different cards. Each card allows the user to tell
a different story about what is going on in their house. These cards a different story about what is going on in their house. These cards
are very customizable, as no household is the same. are very customizable, as no household is the same.

3
gallery/src/demos/lovelace/alarm-panel-card.markdown Normal file
View File

@ -0,0 +1,3 @@
---
title: Alarm Panel Card
---

10
gallery/src/demos/demo-hui-alarm-panel-card.ts → gallery/src/demos/lovelace/alarm-panel-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("alarm_control_panel", "alarm", "disarmed", { getEntity("alarm_control_panel", "alarm", "disarmed", {
@ -70,7 +70,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-alarm-panel-card") @customElement("demo-lovelace-alarm-panel-card")
class DemoAlarmPanelEntity extends LitElement { class DemoAlarmPanelEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -89,6 +89,6 @@ class DemoAlarmPanelEntity extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-alarm-panel-card": DemoAlarmPanelEntity; "demo-lovelace-alarm-panel-card": DemoAlarmPanelEntity;
} }
} }

10
gallery/src/demos/demo-hui-area-card.ts → gallery/src/demos/lovelace/area-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("light", "bed_light", "on", { getEntity("light", "bed_light", "on", {
@ -75,7 +75,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-area-card") @customElement("demo-lovelace-area-card")
class DemoArea extends LitElement { class DemoArea extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -151,6 +151,6 @@ class DemoArea extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-area-card": DemoArea; "demo-lovelace-area-card": DemoArea;
} }
} }

10
gallery/src/demos/demo-hui-conditional-card.ts → gallery/src/demos/lovelace/conditional-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("light", "controller_1", "on", { getEntity("light", "controller_1", "on", {
@ -52,7 +52,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-conditional-card") @customElement("demo-lovelace-conditional-card")
class DemoConditional extends LitElement { class DemoConditional extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -71,6 +71,6 @@ class DemoConditional extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-conditional-card": DemoConditional; "demo-lovelace-conditional-card": DemoConditional;
} }
} }

10
gallery/src/demos/demo-hui-entities-card.ts → gallery/src/demos/lovelace/entities-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("light", "bed_light", "on", { getEntity("light", "bed_light", "on", {
@ -216,7 +216,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-entities-card") @customElement("demo-lovelace-entities-card")
class DemoEntities extends LitElement { class DemoEntities extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -235,6 +235,6 @@ class DemoEntities extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-entities-card": DemoEntities; "demo-lovelace-entities-card": DemoEntities;
} }
} }

10
gallery/src/demos/demo-hui-entity-button-card.ts → gallery/src/demos/lovelace/entity-button-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("light", "bed_light", "on", { getEntity("light", "bed_light", "on", {
@ -68,7 +68,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-entity-button-card") @customElement("demo-lovelace-entity-button-card")
class DemoButtonEntity extends LitElement { class DemoButtonEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -87,6 +87,6 @@ class DemoButtonEntity extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-entity-button-card": DemoButtonEntity; "demo-lovelace-entity-button-card": DemoButtonEntity;
} }
} }

10
gallery/src/demos/demo-hui-entity-filter-card.ts → gallery/src/demos/lovelace/entity-filter-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("device_tracker", "demo_paulus", "work", { getEntity("device_tracker", "demo_paulus", "work", {
@ -109,7 +109,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-entity-filter-card") @customElement("demo-lovelace-entity-filter-card")
class DemoEntityFilter extends LitElement { class DemoEntityFilter extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -128,6 +128,6 @@ class DemoEntityFilter extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-entity-filter-card": DemoEntityFilter; "demo-lovelace-entity-filter-card": DemoEntityFilter;
} }
} }

10
gallery/src/demos/demo-hui-gauge-card.ts → gallery/src/demos/lovelace/gauge-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("sensor", "brightness", "12", {}), getEntity("sensor", "brightness", "12", {}),
@ -106,7 +106,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-gauge-card") @customElement("demo-lovelace-gauge-card")
class DemoGaugeEntity extends LitElement { class DemoGaugeEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -125,6 +125,6 @@ class DemoGaugeEntity extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-gauge-card": DemoGaugeEntity; "demo-lovelace-gauge-card": DemoGaugeEntity;
} }
} }

10
gallery/src/demos/demo-hui-glance-card.ts → gallery/src/demos/lovelace/glance-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("device_tracker", "demo_paulus", "home", { getEntity("device_tracker", "demo_paulus", "home", {
@ -209,7 +209,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-glance-card") @customElement("demo-lovelace-glance-card")
class DemoGlanceEntity extends LitElement { class DemoGlanceEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -228,6 +228,6 @@ class DemoGlanceEntity extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-glance-card": DemoGlanceEntity; "demo-lovelace-glance-card": DemoGlanceEntity;
} }
} }

12
gallery/src/demos/demo-hui-grid-and-stack-card.ts → gallery/src/demos/lovelace/grid-and-stack-card.ts
View File

@ -1,9 +1,9 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { mockHistory } from "../../../demo/src/stubs/history"; import { mockHistory } from "../../../../demo/src/stubs/history";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("light", "kitchen_lights", "on", { getEntity("light", "kitchen_lights", "on", {
@ -199,7 +199,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-grid-and-stack-card") @customElement("demo-lovelace-grid-and-stack-card")
class DemoStack extends LitElement { class DemoStack extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -219,6 +219,6 @@ class DemoStack extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-grid-and-stack-card": DemoStack; "demo-lovelace-grid-and-stack-card": DemoStack;
} }
} }

8
gallery/src/demos/demo-hui-iframe-card.ts → gallery/src/demos/lovelace/iframe-card.ts
View File

@ -1,7 +1,7 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const CONFIGS = [ const CONFIGS = [
{ {
@ -37,7 +37,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-iframe-card") @customElement("demo-lovelace-iframe-card")
class DemoIframe extends LitElement { class DemoIframe extends LitElement {
@query("demo-cards") private _demos!: HTMLElement; @query("demo-cards") private _demos!: HTMLElement;
@ -53,6 +53,6 @@ class DemoIframe extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-iframe-card": DemoIframe; "demo-lovelace-iframe-card": DemoIframe;
} }
} }

10
gallery/src/demos/demo-hui-light-card.ts → gallery/src/demos/lovelace/light-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("light", "bed_light", "on", { getEntity("light", "bed_light", "on", {
@ -62,7 +62,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-light-card") @customElement("demo-lovelace-light-card")
class DemoLightEntity extends LitElement { class DemoLightEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -81,6 +81,6 @@ class DemoLightEntity extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-light-card": DemoLightEntity; "demo-lovelace-light-card": DemoLightEntity;
} }
} }

10
gallery/src/demos/demo-hui-map-card.ts → gallery/src/demos/lovelace/map-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("device_tracker", "demo_paulus", "not_home", { getEntity("device_tracker", "demo_paulus", "not_home", {
@ -160,7 +160,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-map-card") @customElement("demo-lovelace-map-card")
class DemoMap extends LitElement { class DemoMap extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -179,6 +179,6 @@ class DemoMap extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-map-card": DemoMap; "demo-lovelace-map-card": DemoMap;
} }
} }

10
gallery/src/demos/demo-hui-markdown-card.ts → gallery/src/demos/lovelace/markdown-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { mockTemplate } from "../../../demo/src/stubs/template"; import { mockTemplate } from "../../../../demo/src/stubs/template";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const CONFIGS = [ const CONFIGS = [
{ {
@ -253,7 +253,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-markdown-card") @customElement("demo-lovelace-markdown-card")
class DemoMarkdown extends LitElement { class DemoMarkdown extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -272,6 +272,6 @@ class DemoMarkdown extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-markdown-card": DemoMarkdown; "demo-lovelace-markdown-card": DemoMarkdown;
} }
} }

10
gallery/src/demos/demo-hui-media-control-card.ts → gallery/src/demos/lovelace/media-control-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
import { createMediaPlayerEntities } from "../data/media_players"; import { createMediaPlayerEntities } from "../../data/media_players";
const CONFIGS = [ const CONFIGS = [
{ {
@ -157,7 +157,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-media-control-card") @customElement("demo-lovelace-media-control-card")
class DemoHuiMediaControlCard extends LitElement { class DemoHuiMediaControlCard extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -176,6 +176,6 @@ class DemoHuiMediaControlCard extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-media-control-card": DemoHuiMediaControlCard; "demo-lovelace-media-control-card": DemoHuiMediaControlCard;
} }
} }

10
gallery/src/demos/demo-hui-media-player-row.ts → gallery/src/demos/lovelace/media-player-row.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
import { createMediaPlayerEntities } from "../data/media_players"; import { createMediaPlayerEntities } from "../../data/media_players";
const CONFIGS = [ const CONFIGS = [
{ {
@ -54,7 +54,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-media-player-row") @customElement("demo-lovelace-media-player-row")
class DemoHuiMediaPlayerRow extends LitElement { class DemoHuiMediaPlayerRow extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -73,6 +73,6 @@ class DemoHuiMediaPlayerRow extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-media-player-rows": DemoHuiMediaPlayerRow; "demo-lovelace-media-player-rows": DemoHuiMediaPlayerRow;
} }
} }

10
gallery/src/demos/demo-hui-picture-elements-card.ts → gallery/src/demos/lovelace/picture-elements-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("light", "bed_light", "on", { getEntity("light", "bed_light", "on", {
@ -124,7 +124,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-picture-elements-card") @customElement("demo-lovelace-picture-elements-card")
class DemoPictureElements extends LitElement { class DemoPictureElements extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -143,6 +143,6 @@ class DemoPictureElements extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-picture-elements-card": DemoPictureElements; "demo-lovelace-picture-elements-card": DemoPictureElements;
} }
} }

10
gallery/src/demos/demo-hui-picture-entity-card.ts → gallery/src/demos/lovelace/picture-entity-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("light", "kitchen_lights", "on", { getEntity("light", "kitchen_lights", "on", {
@ -79,7 +79,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-picture-entity-card") @customElement("demo-lovelace-picture-entity-card")
class DemoPictureEntity extends LitElement { class DemoPictureEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -98,6 +98,6 @@ class DemoPictureEntity extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-picture-entity-card": DemoPictureEntity; "demo-lovelace-picture-entity-card": DemoPictureEntity;
} }
} }

10
gallery/src/demos/demo-hui-picture-glance-card.ts → gallery/src/demos/lovelace/picture-glance-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("switch", "decorative_lights", "on", { getEntity("switch", "decorative_lights", "on", {
@ -120,7 +120,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-picture-glance-card") @customElement("demo-lovelace-picture-glance-card")
class DemoPictureGlance extends LitElement { class DemoPictureGlance extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -139,6 +139,6 @@ class DemoPictureGlance extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-picture-glance-card": DemoPictureGlance; "demo-lovelace-picture-glance-card": DemoPictureGlance;
} }
} }

10
gallery/src/demos/demo-hui-plant-card.ts → gallery/src/demos/lovelace/plant-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
import { createPlantEntities } from "../data/plants"; import { createPlantEntities } from "../../data/plants";
const CONFIGS = [ const CONFIGS = [
{ {
@ -29,7 +29,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-plant-card") @customElement("demo-lovelace-plant-card")
export class DemoPlantEntity extends LitElement { export class DemoPlantEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -48,6 +48,6 @@ export class DemoPlantEntity extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-plant-card": DemoPlantEntity; "demo-lovelace-plant-card": DemoPlantEntity;
} }
} }

8
gallery/src/demos/demo-hui-shopping-list-card.ts → gallery/src/demos/lovelace/shopping-list-card.ts
View File

@ -1,7 +1,7 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const CONFIGS = [ const CONFIGS = [
{ {
@ -19,7 +19,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-shopping-list-card") @customElement("demo-lovelace-shopping-list-card")
class DemoShoppingListEntity extends LitElement { class DemoShoppingListEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -44,6 +44,6 @@ class DemoShoppingListEntity extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-shopping-list-card": DemoShoppingListEntity; "demo-lovelace-shopping-list-card": DemoShoppingListEntity;
} }
} }

10
gallery/src/demos/demo-hui-thermostat-card.ts → gallery/src/demos/lovelace/thermostat-card.ts
View File

@ -1,8 +1,8 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, query } from "lit/decorators"; import { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../components/demo-cards"; import "../../components/demo-cards";
const ENTITIES = [ const ENTITIES = [
getEntity("climate", "ecobee", "auto", { getEntity("climate", "ecobee", "auto", {
@ -73,7 +73,7 @@ const CONFIGS = [
}, },
]; ];
@customElement("demo-hui-thermostat-card") @customElement("demo-lovelace-thermostat-card")
class DemoThermostatEntity extends LitElement { class DemoThermostatEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement; @query("#demos") private _demoRoot!: HTMLElement;
@ -92,6 +92,6 @@ class DemoThermostatEntity extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-hui-thermostat-card": DemoThermostatEntity; "demo-lovelace-thermostat-card": DemoThermostatEntity;
} }
} }

12
gallery/src/demos/demo-more-info-cover.ts → gallery/src/demos/more-info/cover.ts
View File

@ -1,6 +1,6 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import { import {
SUPPORT_OPEN, SUPPORT_OPEN,
SUPPORT_STOP, SUPPORT_STOP,
@ -10,14 +10,14 @@ import {
SUPPORT_STOP_TILT, SUPPORT_STOP_TILT,
SUPPORT_CLOSE_TILT, SUPPORT_CLOSE_TILT,
SUPPORT_SET_TILT_POSITION, SUPPORT_SET_TILT_POSITION,
} from "../../../src/data/cover"; } from "../../../../src/data/cover";
import "../../../src/dialogs/more-info/more-info-content"; import "../../../../src/dialogs/more-info/more-info-content";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { import {
MockHomeAssistant, MockHomeAssistant,
provideHass, provideHass,
} from "../../../src/fake_data/provide_hass"; } from "../../../../src/fake_data/provide_hass";
import "../components/demo-more-infos"; import "../../components/demo-more-infos";
const ENTITIES = [ const ENTITIES = [
getEntity("cover", "position_buttons", "on", { getEntity("cover", "position_buttons", "on", {

12
gallery/src/demos/demo-more-info-light.ts → gallery/src/demos/more-info/light.ts
View File

@ -1,19 +1,19 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import { import {
LightColorModes, LightColorModes,
SUPPORT_EFFECT, SUPPORT_EFFECT,
SUPPORT_FLASH, SUPPORT_FLASH,
SUPPORT_TRANSITION, SUPPORT_TRANSITION,
} from "../../../src/data/light"; } from "../../../../src/data/light";
import "../../../src/dialogs/more-info/more-info-content"; import "../../../../src/dialogs/more-info/more-info-content";
import { getEntity } from "../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { import {
MockHomeAssistant, MockHomeAssistant,
provideHass, provideHass,
} from "../../../src/fake_data/provide_hass"; } from "../../../../src/fake_data/provide_hass";
import "../components/demo-more-infos"; import "../../components/demo-more-infos";
const ENTITIES = [ const ENTITIES = [
getEntity("light", "bed_light", "on", { getEntity("light", "bed_light", "on", {

26
gallery/src/demos/demo-integration-card.ts → gallery/src/demos/rest/integration-card.ts
View File

@ -1,22 +1,22 @@
import { html, css, LitElement, TemplateResult } from "lit"; import { html, css, LitElement, TemplateResult } from "lit";
import "../../../src/components/ha-formfield"; import "../../../../src/components/ha-formfield";
import "../../../src/components/ha-switch"; import "../../../../src/components/ha-switch";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { IntegrationManifest } from "../../../src/data/integration"; import { IntegrationManifest } from "../../../../src/data/integration";
import { provideHass } from "../../../src/fake_data/provide_hass"; import { provideHass } from "../../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../src/types"; import { HomeAssistant } from "../../../../src/types";
import "../../../src/panels/config/integrations/ha-integration-card"; import "../../../../src/panels/config/integrations/ha-integration-card";
import "../../../src/panels/config/integrations/ha-ignored-config-entry-card"; import "../../../../src/panels/config/integrations/ha-ignored-config-entry-card";
import "../../../src/panels/config/integrations/ha-config-flow-card"; import "../../../../src/panels/config/integrations/ha-config-flow-card";
import type { import type {
ConfigEntryExtended, ConfigEntryExtended,
DataEntryFlowProgressExtended, DataEntryFlowProgressExtended,
} from "../../../src/panels/config/integrations/ha-config-integrations"; } from "../../../../src/panels/config/integrations/ha-config-integrations";
import { DeviceRegistryEntry } from "../../../src/data/device_registry"; import { DeviceRegistryEntry } from "../../../../src/data/device_registry";
import { EntityRegistryEntry } from "../../../src/data/entity_registry"; import { EntityRegistryEntry } from "../../../../src/data/entity_registry";
const createConfigEntry = ( const createConfigEntry = (
title: string, title: string,
@ -217,7 +217,7 @@ const createDeviceRegistryEntries = (
}, },
]; ];
@customElement("demo-integration-card") @customElement("demo-rest-integration-card")
export class DemoIntegrationCard extends LitElement { export class DemoIntegrationCard extends LitElement {
@property({ attribute: false }) hass?: HomeAssistant; @property({ attribute: false }) hass?: HomeAssistant;
@ -352,6 +352,6 @@ export class DemoIntegrationCard extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-integration-card": DemoIntegrationCard; "demo-rest-integration-card": DemoIntegrationCard;
} }
} }

8
gallery/src/demos/demo-util-long-press.ts → gallery/src/demos/rest/util-long-press.ts
View File

@ -1,11 +1,11 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import "../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import { ActionHandlerEvent } from "../../../src/data/lovelace"; import { ActionHandlerEvent } from "../../../../src/data/lovelace";
import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive"; import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive";
@customElement("demo-util-long-press") @customElement("demo-rest-util-long-press")
export class DemoUtilLongPress extends LitElement { export class DemoUtilLongPress extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`

90
gallery/src/ha-gallery.ts
View File

@ -3,14 +3,16 @@ import "@material/mwc-drawer";
import "@material/mwc-top-app-bar-fixed"; import "@material/mwc-top-app-bar-fixed";
import { html, css, LitElement, PropertyValues } from "lit"; import { html, css, LitElement, PropertyValues } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { until } from "lit/directives/until";
import "../../src/components/ha-card"; import "../../src/components/ha-card";
import "../../src/components/ha-icon-button"; import "../../src/components/ha-icon-button";
import "../../src/managers/notification-manager"; import "../../src/managers/notification-manager";
import { haStyle } from "../../src/resources/styles"; import { haStyle } from "../../src/resources/styles";
import { DEMOS } from "../build/import-demos"; import { DEMOS, SIDEBAR } from "../build/import-demos";
import { dynamicElement } from "../../src/common/dom/dynamic-element-directive"; import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
import { SIDEBAR } from "./sidebar"; import "./components/demo-description";
const GITHUB_DEMO_URL =
"https://github.com/home-assistant/frontend/blob/dev/gallery/src/demos/";
const FAKE_HASS = { const FAKE_HASS = {
// Just enough for computeRTL for notification-manager // Just enough for computeRTL for notification-manager
@ -23,7 +25,8 @@ const FAKE_HASS = {
@customElement("ha-gallery") @customElement("ha-gallery")
class HaGallery extends LitElement { class HaGallery extends LitElement {
@property() private _demo = @property() private _demo =
document.location.hash.substring(1) || SIDEBAR[0].demos![0]; document.location.hash.substring(1) ||
`${SIDEBAR[0].category}/${SIDEBAR[0].demos![0]}`;
@query("notification-manager") @query("notification-manager")
private _notifications!: HTMLElementTagNameMap["notification-manager"]; private _notifications!: HTMLElementTagNameMap["notification-manager"];
@ -37,28 +40,21 @@ class HaGallery extends LitElement {
const sidebar: unknown[] = []; const sidebar: unknown[] = [];
for (const group of SIDEBAR) { for (const group of SIDEBAR) {
let sectionOpen = false;
const links: unknown[] = []; const links: unknown[] = [];
for (const demo of group.demos!) { for (const demo of group.demos!) {
const active = this._demo === demo; const key = `${group.category}/${demo}`;
if (active) { const active = this._demo === key;
sectionOpen = true; const title = DEMOS[key].metadata.title || demo;
}
links.push(html` links.push(html`
<a ?active=${active} href=${`#${demo}`} <a ?active=${active} href=${`#${group.category}/${demo}`}>${title}</a>
>${group.demoStart === undefined
? demo
: demo.substring(group.demoStart.length)}</a
>
`); `);
} }
sidebar.push( sidebar.push(
group.header group.header
? html` ? html`
<details ?open=${sectionOpen}> <details>
<summary class="section">${group.header}</summary> <summary class="section">${group.header}</summary>
${links} ${links}
</details> </details>
@ -84,24 +80,36 @@ class HaGallery extends LitElement {
.path=${mdiMenu} .path=${mdiMenu}
></ha-icon-button> ></ha-icon-button>
<div slot="title">${this._demo}</div> <div slot="title">
${DEMOS[this._demo].metadata.title || this._demo.split("/")[1]}
</div>
</mwc-top-app-bar-fixed> </mwc-top-app-bar-fixed>
<div> <div>
${DEMOS[this._demo].description <demo-description .demo=${this._demo}></demo-description>
? html` ${dynamicElement(`demo-${this._demo.replace("/", "-")}`)}
${until( <div class="demo-footer">
DEMOS[this._demo].description().then( ${DEMOS[this._demo].description ||
(content) => html` Object.keys(DEMOS[this._demo].metadata).length > 0
<ha-card> ? html`
<div class="card-content">${content}</div> <a
</ha-card> href=${`${GITHUB_DEMO_URL}${this._demo}.markdown`}
` target="_blank"
), >
"" Edit text
)} </a>
` `
: ""} : ""}
${dynamicElement(`demo-${this._demo}`)} ${DEMOS[this._demo].load
? html`
<a
href=${`${GITHUB_DEMO_URL}${this._demo}.ts`}
target="_blank"
>
Edit demo
</a>
`
: ""}
</div>
</div> </div>
</div> </div>
</mwc-drawer> </mwc-drawer>
@ -143,6 +151,13 @@ class HaGallery extends LitElement {
super.updated(changedProps); super.updated(changedProps);
if (changedProps.has("_demo") && DEMOS[this._demo].load) { if (changedProps.has("_demo") && DEMOS[this._demo].load) {
DEMOS[this._demo].load(); DEMOS[this._demo].load();
const menuItem = this.shadowRoot!.querySelector(
`a[href="#${this._demo}"]`
)!;
// Make sure section is expanded
if (menuItem.parentElement instanceof HTMLDetailsElement) {
menuItem.parentElement.open = true;
}
} }
} }
@ -196,9 +211,14 @@ class HaGallery extends LitElement {
opacity: 0.12; opacity: 0.12;
} }
ha-card { .demo-footer {
max-width: 600px; text-align: center;
margin: 16px auto; margin: 16px 0;
}
.demo-footer a {
display: inline-block;
margin: 0 8px;
} }
`, `,
]; ];

69
gallery/src/sidebar.ts
View File

@ -1,69 +0,0 @@
import { DEMOS } from "../build/import-demos";
export const SIDEBAR: SidebarSection[] = [
{
demos: ["introduction"],
},
{
// Each section has a header
header: "Lovelace",
// Specify demos to make sure they are put on top.
demos: [],
// Add a demoStart to automatically gather demos based on their name
demoStart: "hui-",
},
{
header: "Automation",
demoStart: "automation-",
},
{
header: "Components",
demos: [
"ha-alert",
"ha-bar",
"ha-chips",
"ha-faded",
"ha-form",
"ha-label-badge",
"ha-selector",
],
},
{
header: "More Info",
demoStart: "more-info-",
},
{
header: "Rest",
demoStart: "", // empty string matches all.
},
];
interface SidebarSection {
header?: string;
demos?: string[];
demoStart?: string;
}
const demosToProcess = new Set(Object.keys(DEMOS));
for (const group of Object.values(SIDEBAR)) {
// Any pre-defined groups will not be sorted.
if (group.demos) {
for (const demo of group.demos) {
demosToProcess.delete(demo);
}
} else {
group.demos = [];
}
}
for (const group of Object.values(SIDEBAR)) {
if (group.demoStart !== undefined) {
for (const demo of demosToProcess) {
if (demo.startsWith(group.demoStart)) {
group.demos!.push(demo);
demosToProcess.delete(demo);
}
}
}
}

2
package.json
View File

@ -162,6 +162,7 @@
"@rollup/plugin-replace": "^2.3.2", "@rollup/plugin-replace": "^2.3.2",
"@types/chromecast-caf-receiver": "5.0.12", "@types/chromecast-caf-receiver": "5.0.12",
"@types/chromecast-caf-sender": "^1.0.3", "@types/chromecast-caf-sender": "^1.0.3",
"@types/glob": "^7",
"@types/js-yaml": "^4", "@types/js-yaml": "^4",
"@types/leaflet": "^1", "@types/leaflet": "^1",
"@types/leaflet-draw": "^1", "@types/leaflet-draw": "^1",
@ -189,6 +190,7 @@
"eslint-plugin-wc": "^1.3.2", "eslint-plugin-wc": "^1.3.2",
"fancy-log": "^1.3.3", "fancy-log": "^1.3.3",
"fs-extra": "^7.0.1", "fs-extra": "^7.0.1",
"glob": "^7.2.0",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-foreach": "^0.1.0", "gulp-foreach": "^0.1.0",
"gulp-json-transform": "^0.4.6", "gulp-json-transform": "^0.4.6",

26
yarn.lock
View File

@ -3803,13 +3803,6 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@types/events@npm:*":
version: 3.0.0
resolution: "@types/events@npm:3.0.0"
checksum: 9a424c2da210957d5636e0763e8c9fc3aaeee35bf411284ddec62a56a6abe31de9c7c2e713dabdd8a76ff98b47db2bd52f61310be6609641d6234cc842ecbbe3
languageName: node
linkType: hard
"@types/express-serve-static-core@npm:*": "@types/express-serve-static-core@npm:*":
version: 4.17.13 version: 4.17.13
resolution: "@types/express-serve-static-core@npm:4.17.13" resolution: "@types/express-serve-static-core@npm:4.17.13"
@ -3856,14 +3849,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@types/glob@npm:^7.1.1": "@types/glob@npm:^7, @types/glob@npm:^7.1.1":
version: 7.1.1 version: 7.2.0
resolution: "@types/glob@npm:7.1.1" resolution: "@types/glob@npm:7.2.0"
dependencies: dependencies:
"@types/events": "*"
"@types/minimatch": "*" "@types/minimatch": "*"
"@types/node": "*" "@types/node": "*"
checksum: 9fb96d004c8e9ed25b305bc0d34c99c70c47c571740ca861cca92be4b28649786971703e9883f8ead0815b50225dbaf103a1df2d076923066f6bc0ab733a7be8 checksum: 6ae717fedfdfdad25f3d5a568323926c64f52ef35897bcac8aca8e19bc50c0bd84630bbd063e5d52078b2137d8e7d3c26eabebd1a2f03ff350fff8a91e79fc19
languageName: node languageName: node
linkType: hard linkType: hard
@ -8666,9 +8658,9 @@ fsevents@^1.2.7:
languageName: node languageName: node
linkType: hard linkType: hard
"glob@npm:^7.0.3, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6": "glob@npm:^7.0.3, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.2.0":
version: 7.1.7 version: 7.2.0
resolution: "glob@npm:7.1.7" resolution: "glob@npm:7.2.0"
dependencies: dependencies:
fs.realpath: ^1.0.0 fs.realpath: ^1.0.0
inflight: ^1.0.4 inflight: ^1.0.4
@ -8676,7 +8668,7 @@ fsevents@^1.2.7:
minimatch: ^3.0.4 minimatch: ^3.0.4
once: ^1.3.0 once: ^1.3.0
path-is-absolute: ^1.0.0 path-is-absolute: ^1.0.0
checksum: b61f48973bbdcf5159997b0874a2165db572b368b931135832599875919c237fc05c12984e38fe828e69aa8a921eb0e8a4997266211c517c9cfaae8a93988bb8 checksum: 78a8ea942331f08ed2e055cb5b9e40fe6f46f579d7fd3d694f3412fe5db23223d29b7fee1575440202e9a7ff9a72ab106a39fee39934c7bedafe5e5f8ae20134
languageName: node languageName: node
linkType: hard linkType: hard
@ -9123,6 +9115,7 @@ fsevents@^1.2.7:
"@thomasloven/round-slider": 0.5.4 "@thomasloven/round-slider": 0.5.4
"@types/chromecast-caf-receiver": 5.0.12 "@types/chromecast-caf-receiver": 5.0.12
"@types/chromecast-caf-sender": ^1.0.3 "@types/chromecast-caf-sender": ^1.0.3
"@types/glob": ^7
"@types/js-yaml": ^4 "@types/js-yaml": ^4
"@types/leaflet": ^1 "@types/leaflet": ^1
"@types/leaflet-draw": ^1 "@types/leaflet-draw": ^1
@ -9165,6 +9158,7 @@ fsevents@^1.2.7:
fancy-log: ^1.3.3 fancy-log: ^1.3.3
fs-extra: ^7.0.1 fs-extra: ^7.0.1
fuse.js: ^6.0.0 fuse.js: ^6.0.0
glob: ^7.2.0
google-timezones-json: ^1.0.2 google-timezones-json: ^1.0.2
gulp: ^4.0.2 gulp: ^4.0.2
gulp-foreach: ^0.1.0 gulp-foreach: ^0.1.0