mirror of
https://github.com/home-assistant/frontend.git
synced 2025-11-05 17:09:48 +00:00
Compare commits
6 Commits
20251029.1
...
spacing-ca
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0d0cdfbde1 | ||
|
|
97f8aac984 | ||
|
|
6d9c7eb52a | ||
|
|
311143d6a1 | ||
|
|
b9efdfa10e | ||
|
|
b64042186f |
69
src/panels/lovelace/cards/hui-empty-card.ts
Normal file
69
src/panels/lovelace/cards/hui-empty-card.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { mdiDotsHorizontal } from "@mdi/js";
|
||||
import { LitElement, html, css, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import type {
|
||||
LovelaceCard,
|
||||
LovelaceCardEditor,
|
||||
LovelaceLayoutOptions,
|
||||
} from "../types";
|
||||
|
||||
@customElement("hui-empty-card")
|
||||
export class HuiEmptyCard extends LitElement implements LovelaceCard {
|
||||
@property({ type: Boolean }) public preview = false;
|
||||
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
await import("../editor/config-elements/hui-empty-card-editor");
|
||||
return document.createElement("hui-empty-card-editor");
|
||||
}
|
||||
|
||||
public getCardSize(): number {
|
||||
return 1;
|
||||
}
|
||||
|
||||
public getLayoutOptions(): LovelaceLayoutOptions {
|
||||
return {
|
||||
grid_columns: 1,
|
||||
grid_rows: 1,
|
||||
};
|
||||
}
|
||||
|
||||
public setConfig(): void {
|
||||
// No config necessary
|
||||
}
|
||||
|
||||
protected render() {
|
||||
if (!this.preview) {
|
||||
return nothing;
|
||||
}
|
||||
|
||||
return html`<ha-card>
|
||||
<ha-svg-icon path=${mdiDotsHorizontal}></ha-svg-icon>
|
||||
</ha-card>`;
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ha-card {
|
||||
background: none;
|
||||
height: 100%;
|
||||
min-height: 56px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
--mdc-icon-size: 40px;
|
||||
--icon-primary-color: var(--divider-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"hui-empty-card": HuiEmptyCard;
|
||||
}
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import "../cards/hui-entity-button-card";
|
||||
import "../cards/hui-glance-card";
|
||||
import "../cards/hui-grid-card";
|
||||
import "../cards/hui-light-card";
|
||||
import "../cards/hui-empty-card";
|
||||
import "../cards/hui-sensor-card";
|
||||
import "../cards/hui-thermostat-card";
|
||||
import "../cards/hui-weather-forecast-card";
|
||||
@@ -89,6 +90,7 @@ const LAZY_LOAD_TYPES = {
|
||||
"statistics-graph": () => import("../cards/hui-statistics-graph-card"),
|
||||
statistic: () => import("../cards/hui-statistic-card"),
|
||||
"vertical-stack": () => import("../cards/hui-vertical-stack-card"),
|
||||
empty: () => import("../cards/hui-empty-card"),
|
||||
};
|
||||
|
||||
// This will not return an error card but will throw the error
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { CSSResultGroup } from "lit";
|
||||
import { html, LitElement, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "../../../../components/ha-form/ha-form";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { LovelaceCardEditor } from "../../types";
|
||||
import { configElementStyle } from "./config-elements-style";
|
||||
import type { SchemaUnion } from "../../../../components/ha-form/types";
|
||||
|
||||
const SCHEMA = [
|
||||
{
|
||||
name: "description",
|
||||
type: "constant",
|
||||
},
|
||||
] as const;
|
||||
|
||||
@customElement("hui-empty-card-editor")
|
||||
export class HuiEmptyCardEditor
|
||||
extends LitElement
|
||||
implements LovelaceCardEditor
|
||||
{
|
||||
@property({ attribute: false }) public hass?: HomeAssistant;
|
||||
|
||||
public setConfig(): void {
|
||||
// No config necessary
|
||||
}
|
||||
|
||||
protected render() {
|
||||
if (!this.hass) {
|
||||
return nothing;
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-form
|
||||
.hass=${this.hass}
|
||||
.data=${{}}
|
||||
.schema=${SCHEMA}
|
||||
.computeLabel=${this._computeLabelCallback}
|
||||
></ha-form>
|
||||
`;
|
||||
}
|
||||
|
||||
private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
|
||||
if (schema.name === "description") {
|
||||
return this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.empty.no_config_options"
|
||||
);
|
||||
}
|
||||
return this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||
);
|
||||
};
|
||||
|
||||
static styles: CSSResultGroup = configElementStyle;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"hui-empty-card-editor": HuiEmptyCardEditor;
|
||||
}
|
||||
}
|
||||
@@ -129,4 +129,7 @@ export const coreCards: Card[] = [
|
||||
type: "heading",
|
||||
showElement: true,
|
||||
},
|
||||
{
|
||||
type: "empty",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -7213,6 +7213,11 @@
|
||||
"daily": "Daily",
|
||||
"hourly": "Hourly",
|
||||
"twice_daily": "Twice daily"
|
||||
},
|
||||
"empty": {
|
||||
"name": "Empty",
|
||||
"description": "The empty card allows you to add a placeholder between your cards.",
|
||||
"no_config_options": "This card has no config options, use the Layout tab to set the size."
|
||||
}
|
||||
},
|
||||
"elements": {
|
||||
|
||||
Reference in New Issue
Block a user