mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 00:36:34 +00:00
Suggest a view path when user enters a title when creating a view (#3448)
* Suggest a view path when user enters a title when creating a view * Lint
This commit is contained in:
parent
17a3affb6f
commit
2fda2ee742
19
src/common/string/slugify.ts
Normal file
19
src/common/string/slugify.ts
Normal file
@ -0,0 +1,19 @@
|
||||
// https://gist.github.com/hagemann/382adfc57adbd5af078dc93feef01fe1
|
||||
export const slugify = (value: string) => {
|
||||
const a =
|
||||
"àáäâãåăæąçćčđďèéěėëêęğǵḧìíïîįłḿǹńňñòóöôœøṕŕřßşśšșťțùúüûǘůűūųẃẍÿýźžż·/_,:;";
|
||||
const b =
|
||||
"aaaaaaaaacccddeeeeeeegghiiiiilmnnnnooooooprrsssssttuuuuuuuuuwxyyzzz------";
|
||||
const p = new RegExp(a.split("").join("|"), "g");
|
||||
|
||||
return value
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, "-") // Replace spaces with -
|
||||
.replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special characters
|
||||
.replace(/&/g, "-and-") // Replace & with 'and'
|
||||
.replace(/[^\w\-]+/g, "") // Remove all non-word characters
|
||||
.replace(/\-\-+/g, "-") // Replace multiple - with single -
|
||||
.replace(/^-+/, "") // Trim - from start of text
|
||||
.replace(/-+$/, ""); // Trim - from end of text
|
||||
};
|
@ -93,6 +93,7 @@ export class HuiEditView extends LitElement {
|
||||
case "tab-settings":
|
||||
content = html`
|
||||
<hui-view-editor
|
||||
.isNew=${this.viewIndex === undefined}
|
||||
.hass="${this.hass}"
|
||||
.config="${this._config}"
|
||||
@view-config-changed="${this._viewConfigChanged}"
|
||||
|
@ -15,6 +15,7 @@ import { configElementStyle } from "../config-elements/config-elements-style";
|
||||
|
||||
import "../../components/hui-theme-select-editor";
|
||||
import { LovelaceViewConfig } from "../../../../data/lovelace";
|
||||
import { slugify } from "../../../../common/string/slugify";
|
||||
|
||||
declare global {
|
||||
interface HASSDomEvents {
|
||||
@ -26,9 +27,10 @@ declare global {
|
||||
|
||||
@customElement("hui-view-editor")
|
||||
export class HuiViewEditor extends LitElement {
|
||||
@property() public hass?: HomeAssistant;
|
||||
|
||||
@property() private _config?: LovelaceViewConfig;
|
||||
@property() public hass!: HomeAssistant;
|
||||
@property() public isNew!: boolean;
|
||||
@property() private _config!: LovelaceViewConfig;
|
||||
private _suggestedPath = false;
|
||||
|
||||
get _path(): string {
|
||||
if (!this._config) {
|
||||
@ -79,32 +81,33 @@ export class HuiViewEditor extends LitElement {
|
||||
<div class="card-config">
|
||||
<paper-input
|
||||
label="Title"
|
||||
.value="${this._title}"
|
||||
.configValue="${"title"}"
|
||||
@value-changed="${this._valueChanged}"
|
||||
.value=${this._title}
|
||||
.configValue=${"title"}
|
||||
@value-changed=${this._valueChanged}
|
||||
@blur=${this._handleTitleBlur}
|
||||
></paper-input>
|
||||
<paper-input
|
||||
label="Icon"
|
||||
.value="${this._icon}"
|
||||
.configValue="${"icon"}"
|
||||
@value-changed="${this._valueChanged}"
|
||||
.value=${this._icon}
|
||||
.configValue=${"icon"}
|
||||
@value-changed=${this._valueChanged}
|
||||
></paper-input>
|
||||
<paper-input
|
||||
label="URL Path"
|
||||
.value="${this._path}"
|
||||
.configValue="${"path"}"
|
||||
@value-changed="${this._valueChanged}"
|
||||
.value=${this._path}
|
||||
.configValue=${"path"}
|
||||
@value-changed=${this._valueChanged}
|
||||
></paper-input>
|
||||
<hui-theme-select-editor
|
||||
.hass="${this.hass}"
|
||||
.value="${this._theme}"
|
||||
.configValue="${"theme"}"
|
||||
@theme-changed="${this._valueChanged}"
|
||||
.hass=${this.hass}
|
||||
.value=${this._theme}
|
||||
.configValue=${"theme"}
|
||||
@theme-changed=${this._valueChanged}
|
||||
></hui-theme-select-editor>
|
||||
<paper-toggle-button
|
||||
?checked="${this._panel !== false}"
|
||||
.configValue="${"panel"}"
|
||||
@change="${this._valueChanged}"
|
||||
?checked=${this._panel !== false}
|
||||
.configValue=${"panel"}
|
||||
@change=${this._valueChanged}
|
||||
>Panel Mode?</paper-toggle-button
|
||||
>
|
||||
</div>
|
||||
@ -112,10 +115,6 @@ export class HuiViewEditor extends LitElement {
|
||||
}
|
||||
|
||||
private _valueChanged(ev: Event): void {
|
||||
if (!this._config || !this.hass) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = ev.currentTarget! as EditorTarget;
|
||||
|
||||
if (this[`_${target.configValue}`] === target.value) {
|
||||
@ -134,6 +133,20 @@ export class HuiViewEditor extends LitElement {
|
||||
|
||||
fireEvent(this, "view-config-changed", { config: newConfig });
|
||||
}
|
||||
|
||||
private _handleTitleBlur(ev) {
|
||||
if (
|
||||
!this.isNew ||
|
||||
this._suggestedPath ||
|
||||
this._config.path ||
|
||||
!ev.currentTarget.value
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const config = { ...this._config, path: slugify(ev.currentTarget.value) };
|
||||
fireEvent(this, "view-config-changed", { config });
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
Loading…
x
Reference in New Issue
Block a user