jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 09:16:38 +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(
"clean-gallery",
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
const gulp = require("gulp");
const fs = require("fs");
const path = require("path");
const marked = require("marked");
const glob = require("glob");
const yaml = require("js-yaml");
const env = require("../env");
const paths = require("../paths");
@ -18,7 +21,7 @@ require("./rollup.js");
gulp.task("gather-gallery-demos", async function gatherDemos() {
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");
fs.mkdirSync(galleryBuild, { recursive: true });
@ -28,47 +31,110 @@ gulp.task("gather-gallery-demos", async function gatherDemos() {
const processed = new Set();
for (const file of files) {
let demoId = path.basename(
file,
file.endsWith(".ts") ? ".ts" : ".markdown"
);
if (fs.lstatSync(file).isDirectory()) {
continue;
}
demoId = file.substring(demoDir.length + 1, file.lastIndexOf("."));
// Can be processed if we saw demo or description before.
if (processed.has(demoId)) {
continue;
}
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 hasDemo = fs.existsSync(demoFile);
const hasDescription = fs.existsSync(descriptionFile);
let hasDescription = fs.existsSync(descriptionFile);
let metadata = {};
if (hasDescription) {
const descriptionContent = fs.readFileSync(descriptionFile, "utf-8");
fs.writeFileSync(
path.resolve(galleryBuild, `${demoId}-description.ts`),
`
import {html} from "lit";
export default html\`${marked(descriptionContent)}\`
`
);
let descriptionContent = fs.readFileSync(descriptionFile, "utf-8");
if (descriptionContent.startsWith("---")) {
const metadataEnd = descriptionContent.indexOf("---", 3);
metadata = yaml.load(descriptionContent.substring(3, metadataEnd));
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}`;
const descriptionPath = `./${demoId}-description`;
content += ` "${demoId.substring(5)}": {
content += ` "${demoId}": {
metadata: ${JSON.stringify(metadata)},
${
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`;
}
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(
path.resolve(galleryBuild, "import-demos.ts"),
@ -99,7 +165,10 @@ gulp.task(
: "webpack-dev-server-gallery",
async function watchMarkdownFiles() {
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")
);
}

1
build-scripts/paths.js
View File

@ -26,6 +26,7 @@ module.exports = {
cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
gallery_dir: path.resolve(__dirname, "../gallery"),
gallery_build: path.resolve(__dirname, "../gallery/build"),
gallery_output_root: path.resolve(__dirname, "../gallery/dist"),
gallery_output_latest: path.resolve(
__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 { html, css, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../src/components/ha-card";
import { describeAction } from "../../../src/data/script_i18n";
import { provideHass } from "../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../src/types";
import "../../../../src/components/ha-card";
import { describeAction } from "../../../../src/data/script_i18n";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../../src/types";
const actions = [
{ 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 { html, css, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import "../../../src/components/ha-card";
import { describeCondition } from "../../../src/data/automation_i18n";
import "../../../../src/components/ha-card";
import { describeCondition } from "../../../../src/data/automation_i18n";
const conditions = [
{ 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 { html, css, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import "../../../src/components/ha-card";
import { describeTrigger } from "../../../src/data/automation_i18n";
import "../../../../src/components/ha-card";
import { describeTrigger } from "../../../../src/data/automation_i18n";
const triggers = [
{ 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 */
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/action/ha-automation-action";
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 { 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 { 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 { 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 { HaWaitAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
import { Action } from "../../../src/data/script";
import { HaConditionAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-condition";
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/action/ha-automation-action";
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 { 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 { 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 { 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 { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
import { Action } from "../../../../src/data/script";
import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
const SCHEMAS: { name: string; actions: Action[] }[] = [
{ 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 */
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 type { Condition } from "../../../src/data/automation";
import "../../../src/panels/config/automation/condition/ha-automation-condition";
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 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 { 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 { 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 { HaZoneCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
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 type { Condition } from "../../../../src/data/automation";
import "../../../../src/panels/config/automation/condition/ha-automation-condition";
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 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 { 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 { 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 { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
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 */
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 type { Trigger } from "../../../src/data/automation";
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 { 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 { 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 { 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 { 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 { 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 { 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 "../../../src/panels/config/automation/trigger/ha-automation-trigger";
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 type { Trigger } from "../../../../src/data/automation";
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 { 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 { 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 { 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 { 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 { 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 { 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 "../../../../src/panels/config/automation/trigger/ha-automation-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 */
import { html, css, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../src/components/ha-card";
import "../../../src/components/trace/hat-script-graph";
import "../../../src/components/trace/hat-trace-timeline";
import { provideHass } from "../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../src/types";
import { mockDemoTrace } from "../data/traces/mock-demo-trace";
import { DemoTrace } from "../data/traces/types";
import "../../../../src/components/ha-card";
import "../../../../src/components/trace/hat-script-graph";
import "../../../../src/components/trace/hat-trace-timeline";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../../src/types";
import { mockDemoTrace } from "../../data/traces/mock-demo-trace";
import { DemoTrace } from "../../data/traces/types";
const traces: DemoTrace[] = [
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 */
import { html, css, LitElement, TemplateResult } from "lit";
import "../../../src/components/ha-card";
import "../../../src/components/trace/hat-script-graph";
import "../../../src/components/trace/hat-trace-timeline";
import "../../../../src/components/ha-card";
import "../../../../src/components/trace/hat-script-graph";
import "../../../../src/components/trace/hat-trace-timeline";
import { customElement, property, state } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../src/types";
import { DemoTrace } from "../data/traces/types";
import { basicTrace } from "../data/traces/basic_trace";
import { motionLightTrace } from "../data/traces/motion-light-trace";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../../src/types";
import { DemoTrace } from "../../data/traces/types";
import { basicTrace } from "../../data/traces/basic_trace";
import { motionLightTrace } from "../../data/traces/motion-light-trace";
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 { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
import "../../../src/components/ha-alert";
import "../../../src/components/ha-card";
import "../../../src/components/ha-logo-svg";
import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-logo-svg";
const alerts: {
title?: string;
@ -128,7 +128,7 @@ const alerts: {
},
];
@customElement("demo-ha-alert")
@customElement("demo-components-ha-alert")
export class DemoHaAlert extends LitElement {
protected render(): TemplateResult {
return html`
@ -212,6 +212,6 @@ export class DemoHaAlert extends LitElement {
declare global {
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 { customElement } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import "../../../src/components/ha-bar";
import "../../../src/components/ha-card";
import "../../../../src/components/ha-bar";
import "../../../../src/components/ha-card";
const bars: {
min?: number;
@ -34,7 +34,7 @@ const bars: {
},
];
@customElement("demo-ha-bar")
@customElement("demo-components-ha-bar")
export class DemoHaBar extends LitElement {
protected render(): TemplateResult {
return html`
@ -80,6 +80,6 @@ export class DemoHaBar extends LitElement {
declare global {
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 { 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";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-chip";
import "../../../../src/components/ha-chip-set";
import "../../../../src/components/ha-svg-icon";
const chips: {
icon?: string;
@ -23,7 +23,7 @@ const chips: {
},
];
@customElement("demo-ha-chips")
@customElement("demo-components-ha-chips")
export class DemoHaChips extends LitElement {
protected render(): TemplateResult {
return html`
@ -81,6 +81,6 @@ export class DemoHaChips extends LitElement {
declare global {
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 { customElement } from "lit/decorators";
import "../../../src/components/ha-card";
import "../../../src/components/ha-faded";
import "../../../src/components/ha-markdown";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-faded";
import "../../../../src/components/ha-markdown";
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.
@ -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.";
@customElement("demo-ha-faded")
@customElement("demo-components-ha-faded")
export class DemoHaFaded extends LitElement {
protected render(): TemplateResult {
return html`
@ -83,6 +83,6 @@ export class DemoHaFaded extends LitElement {
declare global {
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 { LitElement, TemplateResult, html } from "lit";
import { customElement } from "lit/decorators";
import { computeInitialHaFormData } from "../../../src/components/ha-form/compute-initial-ha-form-data";
import type { HaFormSchema } from "../../../src/components/ha-form/types";
import "../../../src/components/ha-form/ha-form";
import "../components/demo-black-white-row";
import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
import type { HaFormSchema } from "../../../../src/components/ha-form/types";
import "../../../../src/components/ha-form/ha-form";
import "../../components/demo-black-white-row";
const SCHEMAS: {
title: string;
@ -248,7 +248,7 @@ const SCHEMAS: {
},
];
@customElement("demo-ha-form")
@customElement("demo-components-ha-form")
class DemoHaForm extends LitElement {
private data = SCHEMAS.map(
({ schema, data }) => data || computeInitialHaFormData(schema)
@ -301,6 +301,6 @@ class DemoHaForm extends LitElement {
declare global {
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 { customElement } from "lit/decorators";
import "../../../src/components/ha-label-badge";
import "../../../src/components/ha-card";
import "../../../../src/components/ha-label-badge";
import "../../../../src/components/ha-card";
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 {
protected render(): TemplateResult {
return html`
@ -117,6 +117,6 @@ export class DemoHaLabelBadge extends LitElement {
declare global {
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 { LitElement, TemplateResult, css, html } from "lit";
import { customElement, state } from "lit/decorators";
import "../../../src/components/ha-selector/ha-selector";
import "../../../src/components/ha-settings-row";
import { provideHass } from "../../../src/fake_data/provide_hass";
import type { HomeAssistant } from "../../../src/types";
import "../components/demo-black-white-row";
import { BlueprintInput } from "../../../src/data/blueprint";
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/components/ha-selector/ha-selector";
import "../../../../src/components/ha-settings-row";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import type { HomeAssistant } from "../../../../src/types";
import "../../components/demo-black-white-row";
import { BlueprintInput } from "../../../../src/data/blueprint";
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";
const SCHEMAS: {
name: string;
@ -62,7 +62,7 @@ const SCHEMAS: {
},
];
@customElement("demo-ha-selector")
@customElement("demo-components-ha-selector")
class DemoHaSelector extends LitElement {
@state() private hass!: HomeAssistant;
@ -126,6 +126,6 @@ class DemoHaSelector extends LitElement {
declare global {
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
a different story about what is going on in their house. These cards
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -89,6 +89,6 @@ class DemoAlarmPanelEntity extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -151,6 +151,6 @@ class DemoArea extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -71,6 +71,6 @@ class DemoConditional extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -235,6 +235,6 @@ class DemoEntities extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -87,6 +87,6 @@ class DemoButtonEntity extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -128,6 +128,6 @@ class DemoEntityFilter extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
getEntity("sensor", "brightness", "12", {}),
@ -106,7 +106,7 @@ const CONFIGS = [
},
];
@customElement("demo-hui-gauge-card")
@customElement("demo-lovelace-gauge-card")
class DemoGaugeEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement;
@ -125,6 +125,6 @@ class DemoGaugeEntity extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -228,6 +228,6 @@ class DemoGlanceEntity extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { mockHistory } from "../../../demo/src/stubs/history";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { mockHistory } from "../../../../demo/src/stubs/history";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -219,6 +219,6 @@ class DemoStack extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const CONFIGS = [
{
@ -37,7 +37,7 @@ const CONFIGS = [
},
];
@customElement("demo-hui-iframe-card")
@customElement("demo-lovelace-iframe-card")
class DemoIframe extends LitElement {
@query("demo-cards") private _demos!: HTMLElement;
@ -53,6 +53,6 @@ class DemoIframe extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -81,6 +81,6 @@ class DemoLightEntity extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -179,6 +179,6 @@ class DemoMap extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { mockTemplate } from "../../../demo/src/stubs/template";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { mockTemplate } from "../../../../demo/src/stubs/template";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const CONFIGS = [
{
@ -253,7 +253,7 @@ const CONFIGS = [
},
];
@customElement("demo-hui-markdown-card")
@customElement("demo-lovelace-markdown-card")
class DemoMarkdown extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement;
@ -272,6 +272,6 @@ class DemoMarkdown extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { createMediaPlayerEntities } from "../data/media_players";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
import { createMediaPlayerEntities } from "../../data/media_players";
const CONFIGS = [
{
@ -157,7 +157,7 @@ const CONFIGS = [
},
];
@customElement("demo-hui-media-control-card")
@customElement("demo-lovelace-media-control-card")
class DemoHuiMediaControlCard extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement;
@ -176,6 +176,6 @@ class DemoHuiMediaControlCard extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { createMediaPlayerEntities } from "../data/media_players";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
import { createMediaPlayerEntities } from "../../data/media_players";
const CONFIGS = [
{
@ -54,7 +54,7 @@ const CONFIGS = [
},
];
@customElement("demo-hui-media-player-row")
@customElement("demo-lovelace-media-player-row")
class DemoHuiMediaPlayerRow extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement;
@ -73,6 +73,6 @@ class DemoHuiMediaPlayerRow extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -143,6 +143,6 @@ class DemoPictureElements extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -98,6 +98,6 @@ class DemoPictureEntity extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
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 {
@query("#demos") private _demoRoot!: HTMLElement;
@ -139,6 +139,6 @@ class DemoPictureGlance extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { createPlantEntities } from "../data/plants";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
import { createPlantEntities } from "../../data/plants";
const CONFIGS = [
{
@ -29,7 +29,7 @@ const CONFIGS = [
},
];
@customElement("demo-hui-plant-card")
@customElement("demo-lovelace-plant-card")
export class DemoPlantEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement;
@ -48,6 +48,6 @@ export class DemoPlantEntity extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const CONFIGS = [
{
@ -19,7 +19,7 @@ const CONFIGS = [
},
];
@customElement("demo-hui-shopping-list-card")
@customElement("demo-lovelace-shopping-list-card")
class DemoShoppingListEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement;
@ -44,6 +44,6 @@ class DemoShoppingListEntity extends LitElement {
declare global {
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 { customElement, query } from "lit/decorators";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import "../../components/demo-cards";
const ENTITIES = [
getEntity("climate", "ecobee", "auto", {
@ -73,7 +73,7 @@ const CONFIGS = [
},
];
@customElement("demo-hui-thermostat-card")
@customElement("demo-lovelace-thermostat-card")
class DemoThermostatEntity extends LitElement {
@query("#demos") private _demoRoot!: HTMLElement;
@ -92,6 +92,6 @@ class DemoThermostatEntity extends LitElement {
declare global {
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 { customElement, property, query } from "lit/decorators";
import "../../../src/components/ha-card";
import "../../../../src/components/ha-card";
import {
SUPPORT_OPEN,
SUPPORT_STOP,
@ -10,14 +10,14 @@ import {
SUPPORT_STOP_TILT,
SUPPORT_CLOSE_TILT,
SUPPORT_SET_TILT_POSITION,
} from "../../../src/data/cover";
import "../../../src/dialogs/more-info/more-info-content";
import { getEntity } from "../../../src/fake_data/entity";
} from "../../../../src/data/cover";
import "../../../../src/dialogs/more-info/more-info-content";
import { getEntity } from "../../../../src/fake_data/entity";
import {
MockHomeAssistant,
provideHass,
} from "../../../src/fake_data/provide_hass";
import "../components/demo-more-infos";
} from "../../../../src/fake_data/provide_hass";
import "../../components/demo-more-infos";
const ENTITIES = [
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 { customElement, property, query } from "lit/decorators";
import "../../../src/components/ha-card";
import "../../../../src/components/ha-card";
import {
LightColorModes,
SUPPORT_EFFECT,
SUPPORT_FLASH,
SUPPORT_TRANSITION,
} from "../../../src/data/light";
import "../../../src/dialogs/more-info/more-info-content";
import { getEntity } from "../../../src/fake_data/entity";
} from "../../../../src/data/light";
import "../../../../src/dialogs/more-info/more-info-content";
import { getEntity } from "../../../../src/fake_data/entity";
import {
MockHomeAssistant,
provideHass,
} from "../../../src/fake_data/provide_hass";
import "../components/demo-more-infos";
} from "../../../../src/fake_data/provide_hass";
import "../../components/demo-more-infos";
const ENTITIES = [
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 "../../../src/components/ha-formfield";
import "../../../src/components/ha-switch";
import "../../../../src/components/ha-formfield";
import "../../../../src/components/ha-switch";
import { classMap } from "lit/directives/class-map";
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 { HomeAssistant } from "../../../src/types";
import "../../../src/panels/config/integrations/ha-integration-card";
import "../../../src/panels/config/integrations/ha-ignored-config-entry-card";
import "../../../src/panels/config/integrations/ha-config-flow-card";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../../src/types";
import "../../../../src/panels/config/integrations/ha-integration-card";
import "../../../../src/panels/config/integrations/ha-ignored-config-entry-card";
import "../../../../src/panels/config/integrations/ha-config-flow-card";
import type {
ConfigEntryExtended,
DataEntryFlowProgressExtended,
} from "../../../src/panels/config/integrations/ha-config-integrations";
import { DeviceRegistryEntry } from "../../../src/data/device_registry";
import { EntityRegistryEntry } from "../../../src/data/entity_registry";
} from "../../../../src/panels/config/integrations/ha-config-integrations";
import { DeviceRegistryEntry } from "../../../../src/data/device_registry";
import { EntityRegistryEntry } from "../../../../src/data/entity_registry";
const createConfigEntry = (
title: string,
@ -217,7 +217,7 @@ const createDeviceRegistryEntries = (
},
];
@customElement("demo-integration-card")
@customElement("demo-rest-integration-card")
export class DemoIntegrationCard extends LitElement {
@property({ attribute: false }) hass?: HomeAssistant;
@ -352,6 +352,6 @@ export class DemoIntegrationCard extends LitElement {
declare global {
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 { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import "../../../src/components/ha-card";
import { ActionHandlerEvent } from "../../../src/data/lovelace";
import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";
import "../../../../src/components/ha-card";
import { ActionHandlerEvent } from "../../../../src/data/lovelace";
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 {
protected render(): TemplateResult {
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 { html, css, LitElement, PropertyValues } from "lit";
import { customElement, property, query } from "lit/decorators";
import { until } from "lit/directives/until";
import "../../src/components/ha-card";
import "../../src/components/ha-icon-button";
import "../../src/managers/notification-manager";
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 { 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 = {
// Just enough for computeRTL for notification-manager
@ -23,7 +25,8 @@ const FAKE_HASS = {
@customElement("ha-gallery")
class HaGallery extends LitElement {
@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")
private _notifications!: HTMLElementTagNameMap["notification-manager"];
@ -37,28 +40,21 @@ class HaGallery extends LitElement {
const sidebar: unknown[] = [];
for (const group of SIDEBAR) {
let sectionOpen = false;
const links: unknown[] = [];
for (const demo of group.demos!) {
const active = this._demo === demo;
if (active) {
sectionOpen = true;
}
const key = `${group.category}/${demo}`;
const active = this._demo === key;
const title = DEMOS[key].metadata.title || demo;
links.push(html`
<a ?active=${active} href=${`#${demo}`}
>${group.demoStart === undefined
? demo
: demo.substring(group.demoStart.length)}</a
>
<a ?active=${active} href=${`#${group.category}/${demo}`}>${title}</a>
`);
}
sidebar.push(
group.header
? html`
<details ?open=${sectionOpen}>
<details>
<summary class="section">${group.header}</summary>
${links}
</details>
@ -84,24 +80,36 @@ class HaGallery extends LitElement {
.path=${mdiMenu}
></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>
<div>
${DEMOS[this._demo].description
? html`
${until(
DEMOS[this._demo].description().then(
(content) => html`
<ha-card>
<div class="card-content">${content}</div>
</ha-card>
`
),
""
)}
`
: ""}
${dynamicElement(`demo-${this._demo}`)}
<demo-description .demo=${this._demo}></demo-description>
${dynamicElement(`demo-${this._demo.replace("/", "-")}`)}
<div class="demo-footer">
${DEMOS[this._demo].description ||
Object.keys(DEMOS[this._demo].metadata).length > 0
? html`
<a
href=${`${GITHUB_DEMO_URL}${this._demo}.markdown`}
target="_blank"
>
Edit text
</a>
`
: ""}
${DEMOS[this._demo].load
? html`
<a
href=${`${GITHUB_DEMO_URL}${this._demo}.ts`}
target="_blank"
>
Edit demo
</a>
`
: ""}
</div>
</div>
</div>
</mwc-drawer>
@ -143,6 +151,13 @@ class HaGallery extends LitElement {
super.updated(changedProps);
if (changedProps.has("_demo") && 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;
}
ha-card {
max-width: 600px;
margin: 16px auto;
.demo-footer {
text-align: center;
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",
"@types/chromecast-caf-receiver": "5.0.12",
"@types/chromecast-caf-sender": "^1.0.3",
"@types/glob": "^7",
"@types/js-yaml": "^4",
"@types/leaflet": "^1",
"@types/leaflet-draw": "^1",
@ -189,6 +190,7 @@
"eslint-plugin-wc": "^1.3.2",
"fancy-log": "^1.3.3",
"fs-extra": "^7.0.1",
"glob": "^7.2.0",
"gulp": "^4.0.2",
"gulp-foreach": "^0.1.0",
"gulp-json-transform": "^0.4.6",

26
yarn.lock
View File

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