mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 11:46:42 +00:00
Format URL attribute as link (#8126)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
edcb7e87bb
commit
f42587af22
@ -12,6 +12,7 @@ import { until } from "lit-html/directives/until";
|
||||
import hassAttributeUtil, {
|
||||
formatAttributeName,
|
||||
} from "../util/hass-attributes-util";
|
||||
import { haStyle } from "../resources/styles";
|
||||
|
||||
let jsYamlPromise: Promise<typeof import("js-yaml")>;
|
||||
|
||||
@ -55,33 +56,36 @@ class HaAttributes extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
.data-entry {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.data-entry .value {
|
||||
max-width: 60%;
|
||||
overflow-wrap: break-word;
|
||||
text-align: right;
|
||||
}
|
||||
.key {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.attribution {
|
||||
color: var(--secondary-text-color);
|
||||
text-align: center;
|
||||
}
|
||||
pre {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin: 0px;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-line;
|
||||
}
|
||||
`;
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
.data-entry {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.data-entry .value {
|
||||
max-width: 60%;
|
||||
overflow-wrap: break-word;
|
||||
text-align: right;
|
||||
}
|
||||
.key {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.attribution {
|
||||
color: var(--secondary-text-color);
|
||||
text-align: center;
|
||||
}
|
||||
pre {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin: 0px;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-line;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
private computeDisplayAttributes(filtersArray: string[]): string[] {
|
||||
@ -105,6 +109,7 @@ class HaAttributes extends LitElement {
|
||||
if (value === null) {
|
||||
return "-";
|
||||
}
|
||||
// YAML handling
|
||||
if (
|
||||
(Array.isArray(value) && value.some((val) => val instanceof Object)) ||
|
||||
(!Array.isArray(value) && value instanceof Object)
|
||||
@ -115,6 +120,19 @@ class HaAttributes extends LitElement {
|
||||
const yaml = jsYamlPromise.then((jsYaml) => jsYaml.safeDump(value));
|
||||
return html` <pre>${until(yaml, "")}</pre> `;
|
||||
}
|
||||
// URL handling
|
||||
if (typeof value === "string" && value.startsWith("http")) {
|
||||
try {
|
||||
// If invalid URL, exception will be raised
|
||||
const url = new URL(value);
|
||||
if (url.protocol === "http:" || url.protocol === "https:")
|
||||
return html`<a target="_blank" rel="noreferrer" href="${value}"
|
||||
>${value}</a
|
||||
>`;
|
||||
} catch (_) {
|
||||
// Nothing to do here
|
||||
}
|
||||
}
|
||||
return Array.isArray(value) ? value.join(", ") : value;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user