jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 10:59:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use @home-assistant/webawesome (#26942)

Browse Source
This commit is contained in:
Wendelin
2025-09-08 14:25:47 +02:00
committed by GitHub
parent c582896574
commit c041c295d5
11 changed files with 40 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -26,7 +26,6 @@
"license": "Apache-2.0",
"type": "module",
"dependencies": {
"@awesome.me/webawesome": "3.0.0-beta.4",
"@babel/runtime": "7.28.3",
"@braintree/sanitize-url": "7.1.1",
"@codemirror/autocomplete": "6.18.7",
@@ -52,6 +51,7 @@
"@fullcalendar/list": "6.1.19",
"@fullcalendar/luxon3": "6.1.19",
"@fullcalendar/timegrid": "6.1.19",
"@home-assistant/webawesome": "3.0.0-beta.4.ha.1",
"@lezer/highlight": "1.2.1",
"@lit-labs/motion": "1.0.9",
"@lit-labs/observers": "2.0.6",

82
src/components/ha-button-group.ts
View File

@@ -1,82 +0,0 @@
import ButtonGroup from "@awesome.me/webawesome/dist/components/button-group/button-group";
import { customElement } from "lit/decorators";
import type { HaButton } from "./ha-button";
import { StateSet } from "../resources/polyfills/stateset";
export type Appearance = "accent" | "filled" | "outlined" | "plain";
/**
* Finds an ha-button element either as the current element or within its descendants.
* @param el - The HTML element to search from
* @returns The found HaButton element, or null if not found
*/
function findButton(el: HTMLElement) {
const selector = "ha-button";
return (el.closest(selector) ?? el.querySelector(selector)) as HaButton;
}
/**
* @element ha-button-group
* @extends {ButtonGroup}
* @summary
* Group buttons. Extend Webawesome to be able to work with ha-button tags
*
* @documentation https://webawesome.com/components/button-group
*/
@customElement("ha-button-group") // @ts-expect-error Intentionally overriding private methods
export class HaButtonGroup extends ButtonGroup {
attachInternals() {
const internals = super.attachInternals();
Object.defineProperty(internals, "states", {
value: new StateSet(this, internals.states),
});
return internals;
}
// @ts-expect-error updateClassNames is used in super class
// eslint-disable-next-line @typescript-eslint/naming-convention
private override updateClassNames() {
const slottedElements = [
...this.defaultSlot.assignedElements({ flatten: true }),
] as HTMLElement[];
this.hasOutlined = false;
slottedElements.forEach((el) => {
const index = slottedElements.indexOf(el);
const button = findButton(el);
if (button) {
if ((button as HaButton).appearance === "outlined")
this.hasOutlined = true;
if (this.size) button.setAttribute("size", this.size);
button.classList.add("wa-button-group__button");
button.classList.toggle(
"wa-button-group__horizontal",
this.orientation === "horizontal"
);
button.classList.toggle(
"wa-button-group__vertical",
this.orientation === "vertical"
);
button.classList.toggle("wa-button-group__button-first", index === 0);
button.classList.toggle(
"wa-button-group__button-inner",
index > 0 && index < slottedElements.length - 1
);
button.classList.toggle(
"wa-button-group__button-last",
index === slottedElements.length - 1
);
// use button-group variant
button.setAttribute("variant", this.variant);
}
});
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-button-group": HaButtonGroup;
}
}

11
src/components/ha-button-toggle-group.ts
View File

@@ -1,11 +1,11 @@
import "@home-assistant/webawesome/dist/components/button-group/button-group";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import type { ToggleButton } from "../types";
import "./ha-svg-icon";
import "./ha-button";
import "./ha-button-group";
import "./ha-svg-icon";
/**
* @element ha-button-toggle-group
@@ -37,11 +37,14 @@ export class HaButtonToggleGroup extends LitElement {
protected render(): TemplateResult {
return html`
<ha-button-group .variant=${this.variant} .size=${this.size}>
<wa-button-group childSelector="ha-button">
${this.buttons.map(
(button) =>
html`<ha-button
iconTag="ha-svg-icon"
class="icon"
.variant=${this.variant}
.size=${this.size}
.value=${button.value}
@click=${this._handleClick}
.title=${button.label}
@@ -55,7 +58,7 @@ export class HaButtonToggleGroup extends LitElement {
: button.label}
</ha-button>`
)}
</ha-button-group>
</wa-button-group>
`;
}

50
src/components/ha-button.ts
View File

@@ -1,9 +1,7 @@
import Button from "@awesome.me/webawesome/dist/components/button/button";
import Button from "@home-assistant/webawesome/dist/components/button/button";
import { css, type CSSResultGroup } from "lit";
import { customElement } from "lit/decorators";
import { StateSet } from "../resources/polyfills/stateset";
export type Appearance = "accent" | "filled" | "outlined" | "plain";
/**
@@ -35,54 +33,10 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
* @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
* @attr {boolean} disabled - Disables the button and prevents user interaction.
*/
@customElement("ha-button") // @ts-expect-error Intentionally overriding private methods
@customElement("ha-button")
export class HaButton extends Button {
variant: "brand" | "neutral" | "success" | "warning" | "danger" = "brand";
attachInternals() {
const internals = super.attachInternals();
Object.defineProperty(internals, "states", {
value: new StateSet(this, internals.states),
});
return internals;
}
// @ts-expect-error handleLabelSlotChange is used in super class
// eslint-disable-next-line @typescript-eslint/naming-convention
private override handleLabelSlotChange() {
const nodes = this.labelSlot.assignedNodes({ flatten: true });
let hasIconLabel = false;
let hasIcon = false;
let text = "";
// If there's only an icon and no text, it's an icon button
[...nodes].forEach((node) => {
if (
node.nodeType === Node.ELEMENT_NODE &&
(node as HTMLElement).localName === "ha-svg-icon"
) {
hasIcon = true;
if (!hasIconLabel)
hasIconLabel = (node as HTMLElement).hasAttribute("aria-label");
}
// Concatenate text nodes
if (node.nodeType === Node.TEXT_NODE) {
text += node.textContent;
}
});
this.isIconButton = text.trim() === "" && hasIcon;
if (__DEV__ && this.isIconButton && !hasIconLabel) {
// eslint-disable-next-line no-console
console.warn(
'Icon buttons must have a label for screen readers. Add <ha-svg-icon aria-label="..."> to remove this warning.',
this
);
}
}
static get styles(): CSSResultGroup {
return [
Button.styles,

2
src/components/ha-fade-in.ts
View File

@@ -1,4 +1,4 @@
import WaAnimation from "@awesome.me/webawesome/dist/components/animation/animation";
import WaAnimation from "@home-assistant/webawesome/dist/components/animation/animation";
import { customElement, property } from "lit/decorators";
@customElement("ha-fade-in")

11
src/components/ha-progress-ring.ts
View File

@@ -1,21 +1,12 @@
import ProgressRing from "@awesome.me/webawesome/dist/components/progress-ring/progress-ring";
import ProgressRing from "@home-assistant/webawesome/dist/components/progress-ring/progress-ring";
import { css } from "lit";
import type { CSSResultGroup } from "lit";
import { customElement, property } from "lit/decorators";
import { StateSet } from "../resources/polyfills/stateset";
@customElement("ha-progress-ring")
export class HaProgressRing extends ProgressRing {
@property() public size?: "tiny" | "small" | "medium" | "large";
attachInternals() {
const internals = super.attachInternals();
Object.defineProperty(internals, "states", {
value: new StateSet(this, internals.states),
});
return internals;
}
public updated(changedProps) {
super.updated(changedProps);

12
src/components/ha-spinner.ts
View File

@@ -1,10 +1,8 @@
import Spinner from "@awesome.me/webawesome/dist/components/spinner/spinner";
import Spinner from "@home-assistant/webawesome/dist/components/spinner/spinner";
import type { CSSResultGroup, PropertyValues } from "lit";
import { css } from "lit";
import { customElement, property } from "lit/decorators";
import { StateSet } from "../resources/polyfills/stateset";
@customElement("ha-spinner")
export class HaSpinner extends Spinner {
@property() public size?: "tiny" | "small" | "medium" | "large";
@@ -33,14 +31,6 @@ export class HaSpinner extends Spinner {
}
}
attachInternals() {
const internals = super.attachInternals();
Object.defineProperty(internals, "states", {
value: new StateSet(this, internals.states),
});
return internals;
}
static get styles(): CSSResultGroup {
return [
Spinner.styles,

6
src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-added-insecure.ts
View File

@@ -1,11 +1,11 @@
import "@home-assistant/webawesome/dist/components/animation/animation";
import { mdiCheckCircleOutline } from "@mdi/js";
import { customElement, property } from "lit/decorators";
import "@awesome.me/webawesome/dist/components/animation/animation";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../../../../../types";
import "../../../../../../components/ha-svg-icon";
import "../../../../../../components/ha-alert";
import "../../../../../../components/ha-svg-icon";
@customElement("zwave-js-add-node-added-insecure")
export class ZWaveJsAddNodeFinished extends LitElement {

10
src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts
View File

@@ -1,15 +1,15 @@
import "@awesome.me/webawesome/dist/components/animation/animation";
import "@home-assistant/webawesome/dist/components/animation/animation";
import { mdiRestart } from "@mdi/js";
import { customElement, property } from "lit/decorators";
import { css, html, LitElement, nothing } from "lit";
import type { HomeAssistant } from "../../../../../../types";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../../common/dom/fire_event";
import { InclusionStrategy } from "../../../../../../data/zwave_js";
import type { HomeAssistant } from "../../../../../../types";
import "../../../../../../components/ha-spinner";
import "../../../../../../components/ha-button";
import "../../../../../../components/ha-alert";
import "../../../../../../components/ha-button";
import "../../../../../../components/ha-spinner";
import { WakeLockMixin } from "../../../../../../mixins/wakelock-mixin";
@customElement("zwave-js-add-node-searching-devices")

57
src/resources/polyfills/stateset.ts
View File

@@ -1,57 +0,0 @@
// A small polyfill for CSSStateSet
export class StateSet extends Set<string> {
private _el: Element;
private _existing: null | Set<string> = null;
constructor(el: Element, existing: Set<string> | null = null) {
super();
this._el = el;
this._existing = existing;
}
add(state: string) {
super.add(state);
const existing = this._existing;
if (existing) {
try {
existing.add(state);
} catch {
existing.add(`--${state}`);
}
} else {
this._el.setAttribute(`state-${state}`, "");
}
return this;
}
delete(state: string) {
super.delete(state);
const existing = this._existing;
if (existing) {
existing.delete(state);
existing.delete(`--${state}`);
} else {
this._el.removeAttribute(`state-${state}`);
}
return true;
}
has(state: string) {
return super.has(state);
}
clear() {
for (const state of this) this.delete(state);
}
}
const replaceSync = CSSStyleSheet.prototype.replaceSync;
Object.defineProperty(CSSStyleSheet.prototype, "replaceSync", {
value: function (text) {
text = text.replace(
/:state\(([^)]+)\)/g,
":where(:state($1), :--$1, [state-$1])"
);
replaceSync.call(this, text);
},
});

38
yarn.lock
View File

@@ -41,24 +41,6 @@ __metadata:
languageName: node
linkType: hard
"@awesome.me/webawesome@npm:3.0.0-beta.4":
version: 3.0.0-beta.4
resolution: "@awesome.me/webawesome@npm:3.0.0-beta.4"
dependencies:
"@ctrl/tinycolor": "npm:^4.1.0"
"@floating-ui/dom": "npm:^1.6.13"
"@lit/react": "npm:^1.0.8"
"@shoelace-style/animations": "npm:^1.2.0"
"@shoelace-style/localize": "npm:^3.2.1"
composed-offset-position: "npm:^0.0.6"
lit: "npm:^3.2.1"
nanoid: "npm:^5.1.5"
qr-creator: "npm:^1.0.0"
style-observer: "npm:^0.0.7"
checksum: 10/476e8e6495def8b8a99a9b0d203eb6859915bb9793632a2aae348f42ef5683751bdfb6d99155cb2512ecc2d706cd9377466f765d105d3fc355afeafe21c820df
languageName: node
linkType: hard
"@babel/code-frame@npm:7.26.2":
version: 7.26.2
resolution: "@babel/code-frame@npm:7.26.2"
@@ -1923,6 +1905,24 @@ __metadata:
languageName: node
linkType: hard
"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1":
version: 3.0.0-beta.4.ha.1
resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1"
dependencies:
"@ctrl/tinycolor": "npm:^4.1.0"
"@floating-ui/dom": "npm:^1.6.13"
"@lit/react": "npm:^1.0.8"
"@shoelace-style/animations": "npm:^1.2.0"
"@shoelace-style/localize": "npm:^3.2.1"
composed-offset-position: "npm:^0.0.6"
lit: "npm:^3.2.1"
nanoid: "npm:^5.1.5"
qr-creator: "npm:^1.0.0"
style-observer: "npm:^0.0.7"
checksum: 10/18cd9d16057289f7b10ccf681bc7bdfaeaaf814a985c2d259bf8bffefdd5cbb8e27c5ea15c9829247b0eb746c3557aeef3798174aad5d8e742097d11c06a1144
languageName: node
linkType: hard
"@humanfs/core@npm:^0.19.1":
version: 0.19.1
resolution: "@humanfs/core@npm:0.19.1"
@@ -9294,7 +9294,6 @@ __metadata:
version: 0.0.0-use.local
resolution: "home-assistant-frontend@workspace:."
dependencies:
"@awesome.me/webawesome": "npm:3.0.0-beta.4"
"@babel/core": "npm:7.28.3"
"@babel/helper-define-polyfill-provider": "npm:0.6.5"
"@babel/plugin-transform-runtime": "npm:7.28.3"
@@ -9325,6 +9324,7 @@ __metadata:
"@fullcalendar/list": "npm:6.1.19"
"@fullcalendar/luxon3": "npm:6.1.19"
"@fullcalendar/timegrid": "npm:6.1.19"
"@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.1"
"@lezer/highlight": "npm:1.2.1"
"@lit-labs/motion": "npm:1.0.9"
"@lit-labs/observers": "npm:2.0.6"