Add selectors to ha-form (#11534)
This commit is contained in:
parent
f47440083e
commit
0046252e32
|
@ -10,7 +10,7 @@ module.exports.ignorePackages = ({ latestBuild }) => [
|
|||
];
|
||||
|
||||
// Files from NPM packages that we should replace with empty file
|
||||
module.exports.emptyPackages = ({ latestBuild }) =>
|
||||
module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
|
||||
[
|
||||
// Contains all color definitions for all material color sets.
|
||||
// We don't use it
|
||||
|
@ -28,6 +28,11 @@ module.exports.emptyPackages = ({ latestBuild }) =>
|
|||
),
|
||||
// This polyfill is loaded in workers to support ES5, filter it out.
|
||||
latestBuild && require.resolve("proxy-polyfill/src/index.js"),
|
||||
// Icons in supervisor conflict with icons in HA so we don't load.
|
||||
isHassioBuild &&
|
||||
require.resolve(
|
||||
path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
|
||||
),
|
||||
].filter(Boolean);
|
||||
|
||||
module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
|
||||
|
@ -196,6 +201,7 @@ module.exports.config = {
|
|||
publicPath: publicPath(latestBuild, paths.hassio_publicPath),
|
||||
isProdBuild,
|
||||
latestBuild,
|
||||
isHassioBuild: true,
|
||||
defineOverlay: {
|
||||
__SUPERVISOR__: true,
|
||||
},
|
||||
|
|
|
@ -30,6 +30,7 @@ const createWebpackConfig = ({
|
|||
isProdBuild,
|
||||
latestBuild,
|
||||
isStatsBuild,
|
||||
isHassioBuild,
|
||||
dontHash,
|
||||
}) => {
|
||||
if (!dontHash) {
|
||||
|
@ -117,7 +118,9 @@ const createWebpackConfig = ({
|
|||
},
|
||||
}),
|
||||
new webpack.NormalModuleReplacementPlugin(
|
||||
new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
|
||||
new RegExp(
|
||||
bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
|
||||
),
|
||||
path.resolve(paths.polymer_dir, "src/util/empty.js")
|
||||
),
|
||||
!isProdBuild && new LogStartCompilePlugin(),
|
||||
|
|
|
@ -3,6 +3,7 @@ import { html, LitElement, css, TemplateResult } from "lit";
|
|||
import { customElement, property } from "lit/decorators";
|
||||
import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
|
||||
import { fireEvent } from "../../../src/common/dom/fire_event";
|
||||
import "../../../src/components/ha-card";
|
||||
|
||||
@customElement("demo-black-white-row")
|
||||
class DemoBlackWhiteRow extends LitElement {
|
||||
|
|
|
@ -1,11 +1,17 @@
|
|||
/* eslint-disable lit/no-template-arrow */
|
||||
import "@material/mwc-button";
|
||||
import { LitElement, TemplateResult, html } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { customElement, state } 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 { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
|
||||
import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
|
||||
import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
|
||||
import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
|
||||
import { provideHass } from "../../../../src/fake_data/provide_hass";
|
||||
import { HomeAssistant } from "../../../../src/types";
|
||||
|
||||
const SCHEMAS: {
|
||||
title: string;
|
||||
|
@ -14,6 +20,44 @@ const SCHEMAS: {
|
|||
schema: HaFormSchema[];
|
||||
data?: Record<string, any>;
|
||||
}[] = [
|
||||
{
|
||||
title: "Selectors",
|
||||
translations: {
|
||||
addon: "Addon",
|
||||
entity: "Entity",
|
||||
device: "Device",
|
||||
area: "Area",
|
||||
target: "Target",
|
||||
number: "Number",
|
||||
boolean: "Boolean",
|
||||
time: "Time",
|
||||
action: "Action",
|
||||
text: "Text",
|
||||
text_multiline: "Text Multiline",
|
||||
object: "Object",
|
||||
select: "Select",
|
||||
},
|
||||
schema: [
|
||||
{ name: "addon", selector: { addon: {} } },
|
||||
{ name: "entity", selector: { entity: {} } },
|
||||
{ name: "device", selector: { device: {} } },
|
||||
{ name: "area", selector: { area: {} } },
|
||||
{ name: "target", selector: { target: {} } },
|
||||
{ name: "number", selector: { number: { min: 0, max: 10 } } },
|
||||
{ name: "boolean", selector: { boolean: {} } },
|
||||
{ name: "time", selector: { time: {} } },
|
||||
{ name: "action", selector: { action: {} } },
|
||||
{ name: "text", selector: { text: { multiline: false } } },
|
||||
{ name: "text_multiline", selector: { text: { multiline: true } } },
|
||||
{ name: "object", selector: { object: {} } },
|
||||
{
|
||||
name: "select",
|
||||
selector: {
|
||||
select: { options: ["Everyone Home", "Some Home", "All gone"] },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Authentication",
|
||||
translations: {
|
||||
|
@ -239,12 +283,25 @@ const SCHEMAS: {
|
|||
|
||||
@customElement("demo-components-ha-form")
|
||||
class DemoHaForm extends LitElement {
|
||||
@state() private hass!: HomeAssistant;
|
||||
|
||||
private data = SCHEMAS.map(
|
||||
({ schema, data }) => data || computeInitialHaFormData(schema)
|
||||
);
|
||||
|
||||
private disabled = SCHEMAS.map(() => false);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
const hass = provideHass(this);
|
||||
hass.updateTranslations(null, "en");
|
||||
hass.updateTranslations("config", "en");
|
||||
mockEntityRegistry(hass);
|
||||
mockDeviceRegistry(hass);
|
||||
mockAreaRegistry(hass);
|
||||
mockHassioSupervisor(hass);
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
${SCHEMAS.map((info, idx) => {
|
||||
|
@ -267,6 +324,7 @@ class DemoHaForm extends LitElement {
|
|||
(slot) => html`
|
||||
<ha-form
|
||||
slot=${slot}
|
||||
.hass=${this.hass}
|
||||
.data=${this.data[idx]}
|
||||
.schema=${info.schema}
|
||||
.error=${info.error}
|
||||
|
|
|
@ -11,12 +11,16 @@ import "./ha-form-multi_select";
|
|||
import "./ha-form-positive_time_period_dict";
|
||||
import "./ha-form-select";
|
||||
import "./ha-form-string";
|
||||
import "../ha-selector/ha-selector";
|
||||
import { HaFormElement, HaFormDataContainer, HaFormSchema } from "./types";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
const getValue = (obj, item) => (obj ? obj[item.name] : null);
|
||||
|
||||
@customElement("ha-form")
|
||||
export class HaForm extends LitElement implements HaFormElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
|
||||
@property() public data!: HaFormDataContainer;
|
||||
|
||||
@property() public schema!: HaFormSchema[];
|
||||
|
@ -62,12 +66,21 @@ export class HaForm extends LitElement implements HaFormElement {
|
|||
</ha-alert>
|
||||
`
|
||||
: ""}
|
||||
${dynamicElement(`ha-form-${item.type}`, {
|
||||
schema: item,
|
||||
data: getValue(this.data, item),
|
||||
label: this._computeLabel(item),
|
||||
disabled: this.disabled,
|
||||
})}
|
||||
${"selector" in item
|
||||
? html`<ha-selector
|
||||
.schema=${item}
|
||||
.hass=${this.hass}
|
||||
.selector=${item.selector}
|
||||
.value=${getValue(this.data, item)}
|
||||
.label=${this._computeLabel(item)}
|
||||
.disabled=${this.disabled}
|
||||
></ha-selector>`
|
||||
: dynamicElement(`ha-form-${item.type}`, {
|
||||
schema: item,
|
||||
data: getValue(this.data, item),
|
||||
label: this._computeLabel(item),
|
||||
disabled: this.disabled,
|
||||
})}
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import type { LitElement } from "lit";
|
||||
import { Selector } from "../../data/selector";
|
||||
import type { HaDurationData } from "../ha-duration-input";
|
||||
|
||||
export type HaFormSchema =
|
||||
|
@ -9,13 +10,24 @@ export type HaFormSchema =
|
|||
| HaFormBooleanSchema
|
||||
| HaFormSelectSchema
|
||||
| HaFormMultiSelectSchema
|
||||
| HaFormTimeSchema;
|
||||
| HaFormTimeSchema
|
||||
| HaFormSelector;
|
||||
|
||||
export interface HaFormBaseSchema {
|
||||
name: string;
|
||||
// This value is applied if no data is submitted for this field
|
||||
default?: HaFormData;
|
||||
required?: boolean;
|
||||
description?: { suffix?: string; suggested_value?: HaFormData };
|
||||
description?: {
|
||||
suffix?: string;
|
||||
// This value will be set initially when form is loaded
|
||||
suggested_value?: HaFormData;
|
||||
};
|
||||
}
|
||||
|
||||
export interface HaFormSelector extends HaFormBaseSchema {
|
||||
type?: never;
|
||||
selector: Selector;
|
||||
}
|
||||
|
||||
export interface HaFormConstantSchema extends HaFormBaseSchema {
|
||||
|
|
Loading…
Reference in New Issue