mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-31 05:06:38 +00:00
Bram Kragten
GitHub
commit
496bb9dc39
@ -8,7 +8,8 @@ import {
|
||||
property,
|
||||
} from "lit-element";
|
||||
import { LovelaceConfig } from "../../../../src/data/lovelace";
|
||||
import "../../../../src/panels/lovelace/hui-view";
|
||||
import "../../../../src/panels/lovelace/views/hui-view";
|
||||
import "../../../../src/panels/lovelace/views/hui-panel-view";
|
||||
import { HomeAssistant } from "../../../../src/types";
|
||||
import { Lovelace } from "../../../../src/panels/lovelace/types";
|
||||
import "./hc-launch-screen";
|
||||
@ -40,14 +41,21 @@ class HcLovelace extends LitElement {
|
||||
saveConfig: async () => undefined,
|
||||
setEditMode: () => undefined,
|
||||
};
|
||||
return html`
|
||||
<hui-view
|
||||
.hass=${this.hass}
|
||||
.lovelace=${lovelace}
|
||||
.index=${index}
|
||||
columns="2"
|
||||
></hui-view>
|
||||
`;
|
||||
return this.lovelaceConfig.views[index].panel
|
||||
? html`
|
||||
<hui-panel-view
|
||||
.hass=${this.hass}
|
||||
.config=${this.lovelaceConfig.views[index]}
|
||||
></hui-panel-view>
|
||||
`
|
||||
: html`
|
||||
<hui-view
|
||||
.hass=${this.hass}
|
||||
.lovelace=${lovelace}
|
||||
.index=${index}
|
||||
columns="2"
|
||||
></hui-view>
|
||||
`;
|
||||
}
|
||||
|
||||
protected updated(changedProps) {
|
||||
@ -62,7 +70,9 @@ class HcLovelace extends LitElement {
|
||||
this.lovelaceConfig.background;
|
||||
|
||||
if (configBackground) {
|
||||
this.shadowRoot!.querySelector("hui-view")!.style.setProperty(
|
||||
(this.shadowRoot!.querySelector(
|
||||
"hui-view, hui-panel-view"
|
||||
) as HTMLElement)!.style.setProperty(
|
||||
"--lovelace-background",
|
||||
configBackground
|
||||
);
|
||||
@ -94,7 +104,7 @@ class HcLovelace extends LitElement {
|
||||
box-sizing: border-box;
|
||||
background: var(--primary-background-color);
|
||||
}
|
||||
hui-view {
|
||||
:host > * {
|
||||
flex: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -97,7 +97,7 @@ export const mockTranslations = (hass: MockHomeAssistant) => {
|
||||
"component.nest.config.abort.authorize_url_timeout":
|
||||
"Timeout generating authorize url.",
|
||||
"component.nest.config.abort.no_flows":
|
||||
"You need to configure Nest before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/components/nest/).",
|
||||
"You need to configure Nest before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/integrations/nest/).",
|
||||
"component.nest.config.error.internal_error":
|
||||
"Internal error validating code",
|
||||
"component.nest.config.error.invalid_code": "Invalid code",
|
||||
@ -199,7 +199,7 @@ export const mockTranslations = (hass: MockHomeAssistant) => {
|
||||
"component.point.config.abort.external_setup":
|
||||
"Point successfully configured from another flow.",
|
||||
"component.point.config.abort.no_flows":
|
||||
"You need to configure Point before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/components/point/).",
|
||||
"You need to configure Point before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/integrations/point/).",
|
||||
"component.point.config.create_entry.default":
|
||||
"Successfully authenticated with Minut for your Point device(s)",
|
||||
"component.point.config.error.follow_link":
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import "@polymer/paper-toggle-button/paper-toggle-button";
|
||||
|
||||
import "./demo-card";
|
||||
import "../../../src/components/ha-switch";
|
||||
|
||||
class DemoCards extends PolymerElement {
|
||||
static get template() {
|
||||
@ -26,9 +26,7 @@ class DemoCards extends PolymerElement {
|
||||
</style>
|
||||
<app-toolbar>
|
||||
<div class="filters">
|
||||
<paper-toggle-button checked="{{_showConfig}}"
|
||||
>Show config</paper-toggle-button
|
||||
>
|
||||
<ha-switch checked="{{_showConfig}}">Show config</ha-switch>
|
||||
</div>
|
||||
</app-toolbar>
|
||||
<div class="cards">
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import "@polymer/paper-toggle-button/paper-toggle-button";
|
||||
|
||||
import "./demo-more-info";
|
||||
import "../../../src/components/ha-switch";
|
||||
|
||||
class DemoMoreInfos extends PolymerElement {
|
||||
static get template() {
|
||||
@ -26,9 +26,7 @@ class DemoMoreInfos extends PolymerElement {
|
||||
</style>
|
||||
<app-toolbar>
|
||||
<div class="filters">
|
||||
<paper-toggle-button checked="{{_showConfig}}"
|
||||
>Show entity</paper-toggle-button
|
||||
>
|
||||
<ha-switch checked="{{_showConfig}}">Show entity</ha-switch>
|
||||
</div>
|
||||
</app-toolbar>
|
||||
<div class="cards">
|
||||
|
||||
@ -36,7 +36,7 @@ export default {
|
||||
attributes: {
|
||||
title: "Welcome Home!",
|
||||
message:
|
||||
"Here are some resources to get started:\n\n - [Configuring Home Assistant](https://home-assistant.io/getting-started/configuration/)\n - [Available components](https://home-assistant.io/components/)\n - [Troubleshooting your configuration](https://home-assistant.io/docs/configuration/troubleshooting/)\n - [Getting help](https://home-assistant.io/help/)\n\nTo not see this card popup in the future, edit your config in\n`configuration.yaml` and disable the `introduction` component.",
|
||||
"Here are some resources to get started:\n\n - [Configuring Home Assistant](https://home-assistant.io/getting-started/configuration/)\n - [Available integrations](https://home-assistant.io/integrations/)\n - [Troubleshooting your configuration](https://home-assistant.io/docs/configuration/troubleshooting/)\n - [Getting help](https://home-assistant.io/help/)\n\nTo not see this card popup in the future, edit your config in\n`configuration.yaml` and disable the `introduction` integration.",
|
||||
},
|
||||
last_changed: "2018-07-19T10:44:45.922241+00:00",
|
||||
last_updated: "2018-07-19T10:44:45.922241+00:00",
|
||||
|
||||
@ -2,19 +2,19 @@ import "@polymer/iron-icon/iron-icon";
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-card/paper-card";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import "@polymer/paper-toggle-button/paper-toggle-button";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import "../../../src/components/ha-label-badge";
|
||||
import "../../../src/components/ha-markdown";
|
||||
import "../../../src/components/buttons/ha-call-api-button";
|
||||
import "../../../src/components/ha-switch";
|
||||
import "../../../src/resources/ha-style";
|
||||
import "../components/hassio-card-content";
|
||||
|
||||
import { EventsMixin } from "../../../src/mixins/events-mixin";
|
||||
import { navigate } from "../../../src/common/navigate";
|
||||
|
||||
import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
|
||||
import "../components/hassio-card-content";
|
||||
|
||||
const PERMIS_DESC = {
|
||||
rating: {
|
||||
@ -122,7 +122,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
|
||||
width: 16px;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
paper-toggle-button {
|
||||
ha-switch {
|
||||
display: inline;
|
||||
}
|
||||
iron-icon.running {
|
||||
@ -348,26 +348,26 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
|
||||
<template is="dom-if" if="[[addon.version]]">
|
||||
<div class="state">
|
||||
<div>Start on boot</div>
|
||||
<paper-toggle-button
|
||||
<ha-switch
|
||||
on-change="startOnBootToggled"
|
||||
checked="[[computeStartOnBoot(addon.boot)]]"
|
||||
></paper-toggle-button>
|
||||
></ha-switch>
|
||||
</div>
|
||||
<div class="state">
|
||||
<div>Auto update</div>
|
||||
<paper-toggle-button
|
||||
<ha-switch
|
||||
on-change="autoUpdateToggled"
|
||||
checked="[[addon.auto_update]]"
|
||||
></paper-toggle-button>
|
||||
></ha-switch>
|
||||
</div>
|
||||
<template is="dom-if" if="[[addon.ingress]]">
|
||||
<div class="state">
|
||||
<div>Show in sidebar</div>
|
||||
<paper-toggle-button
|
||||
<ha-switch
|
||||
on-change="panelToggled"
|
||||
checked="[[addon.ingress_panel]]"
|
||||
disabled="[[_computeCannotIngressSidebar(hass, addon)]]"
|
||||
></paper-toggle-button>
|
||||
></ha-switch>
|
||||
<template is="dom-if" if="[[_computeCannotIngressSidebar(hass, addon)]]">
|
||||
<span>This option requires Home Assistant 0.92 or later.</span>
|
||||
</template>
|
||||
@ -381,10 +381,10 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
|
||||
<paper-tooltip>Grant the add-on elevated system access.</paper-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
<paper-toggle-button
|
||||
<ha-switch
|
||||
on-change="protectionToggled"
|
||||
checked="[[addon.protected]]"
|
||||
></paper-toggle-button>
|
||||
></ha-switch>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@ -8,26 +8,31 @@ import {
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import "./hassio-addons";
|
||||
import "./hassio-hass-update";
|
||||
import "./hassio-update";
|
||||
import { HomeAssistant } from "../../../src/types";
|
||||
import {
|
||||
HassioSupervisorInfo,
|
||||
HassioHomeAssistantInfo,
|
||||
HassioHassOSInfo,
|
||||
} from "../../../src/data/hassio";
|
||||
|
||||
@customElement("hassio-dashboard")
|
||||
class HassioDashboard extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
|
||||
@property() public supervisorInfo!: HassioSupervisorInfo;
|
||||
@property() public hassInfo!: HassioHomeAssistantInfo;
|
||||
@property() public hassOsInfo!: HassioHassOSInfo;
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
return html`
|
||||
<div class="content">
|
||||
<hassio-hass-update
|
||||
<hassio-update
|
||||
.hass=${this.hass}
|
||||
.hassInfo=${this.hassInfo}
|
||||
></hassio-hass-update>
|
||||
.supervisorInfo=${this.supervisorInfo}
|
||||
.hassOsInfo=${this.hassOsInfo}
|
||||
></hassio-update>
|
||||
<hassio-addons
|
||||
.hass=${this.hass}
|
||||
.addons=${this.supervisorInfo.addons}
|
||||
|
||||
@ -1,96 +0,0 @@
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-card/paper-card";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import "../../../src/components/buttons/ha-call-api-button";
|
||||
import "../components/hassio-card-content";
|
||||
import "../resources/hassio-style";
|
||||
|
||||
class HassioHassUpdate extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="ha-style hassio-style">
|
||||
paper-card {
|
||||
display: block;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.errors {
|
||||
color: var(--google-red-500);
|
||||
margin-top: 16px;
|
||||
}
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
<template is="dom-if" if="[[computeUpdateAvailable(hassInfo)]]">
|
||||
<div class="content">
|
||||
<div class="card-group">
|
||||
<paper-card heading="Update available! 🎉">
|
||||
<div class="card-content">
|
||||
Home Assistant [[hassInfo.last_version]] is available and you
|
||||
are currently running Home Assistant [[hassInfo.version]].
|
||||
<template is="dom-if" if="[[error]]">
|
||||
<div class="error">Error: [[error]]</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<ha-call-api-button
|
||||
hass="[[hass]]"
|
||||
path="hassio/homeassistant/update"
|
||||
>Update</ha-call-api-button
|
||||
>
|
||||
<a
|
||||
href="[[computeReleaseNotesUrl(hassInfo.version)]]"
|
||||
target="_blank"
|
||||
>
|
||||
<mwc-button>Release notes</mwc-button>
|
||||
</a>
|
||||
</div>
|
||||
</paper-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
hassInfo: Object,
|
||||
error: String,
|
||||
};
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
|
||||
}
|
||||
|
||||
apiCalled(ev) {
|
||||
if (ev.detail.success) {
|
||||
this.errors = null;
|
||||
return;
|
||||
}
|
||||
|
||||
const response = ev.detail.response;
|
||||
|
||||
if (typeof response.body === "object") {
|
||||
this.errors = response.body.message || "Unknown error";
|
||||
} else {
|
||||
this.errors = response.body;
|
||||
}
|
||||
}
|
||||
|
||||
computeUpdateAvailable(hassInfo) {
|
||||
return hassInfo.version !== hassInfo.last_version;
|
||||
}
|
||||
|
||||
computeReleaseNotesUrl(version) {
|
||||
return `https://${
|
||||
version.includes("b") ? "rc" : "www"
|
||||
}.home-assistant.io/latest-release-notes/`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hassio-hass-update", HassioHassUpdate);
|
||||
153
hassio/src/dashboard/hassio-update.ts
Normal file
153
hassio/src/dashboard/hassio-update.ts
Normal file
@ -0,0 +1,153 @@
|
||||
import {
|
||||
LitElement,
|
||||
TemplateResult,
|
||||
html,
|
||||
CSSResult,
|
||||
css,
|
||||
property,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
|
||||
import { HomeAssistant } from "../../../src/types";
|
||||
import {
|
||||
HassioHomeAssistantInfo,
|
||||
HassioHassOSInfo,
|
||||
HassioSupervisorInfo,
|
||||
} from "../../../src/data/hassio";
|
||||
|
||||
import { hassioStyle } from "../resources/hassio-style";
|
||||
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-card/paper-card";
|
||||
import "../../../src/components/buttons/ha-call-api-button";
|
||||
import "../components/hassio-card-content";
|
||||
|
||||
@customElement("hassio-update")
|
||||
export class HassioUpdate extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
|
||||
@property() public hassInfo: HassioHomeAssistantInfo;
|
||||
@property() public hassOsInfo?: HassioHassOSInfo;
|
||||
@property() public supervisorInfo: HassioSupervisorInfo;
|
||||
|
||||
@property() public error?: string;
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
if (
|
||||
this.hassInfo.version === this.hassInfo.last_version &&
|
||||
this.supervisorInfo.version === this.supervisorInfo.last_version &&
|
||||
(!this.hassOsInfo ||
|
||||
this.hassOsInfo.version === this.hassOsInfo.version_latest)
|
||||
) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="content">
|
||||
${this.error
|
||||
? html`
|
||||
<div class="error">Error: ${this.error}</div>
|
||||
`
|
||||
: ""}
|
||||
<div class="card-group">
|
||||
${this._renderUpdateCard(
|
||||
"Home Assistant",
|
||||
this.hassInfo.version,
|
||||
this.hassInfo.last_version,
|
||||
"hassio/homeassistant/update",
|
||||
`https://${
|
||||
this.hassInfo.last_version.includes("b") ? "rc" : "www"
|
||||
}.home-assistant.io/latest-release-notes/`
|
||||
)}
|
||||
${this._renderUpdateCard(
|
||||
"Hass.io Supervisor",
|
||||
this.supervisorInfo.version,
|
||||
this.supervisorInfo.last_version,
|
||||
"hassio/supervisor/update",
|
||||
`https://github.com//home-assistant/hassio/releases/tag/${
|
||||
this.supervisorInfo.last_version
|
||||
}`
|
||||
)}
|
||||
${this.hassOsInfo
|
||||
? this._renderUpdateCard(
|
||||
"HassOS",
|
||||
this.hassOsInfo.version,
|
||||
this.hassOsInfo.version_latest,
|
||||
"hassio/hassos/update",
|
||||
`https://github.com//home-assistant/hassos/releases/tag/${
|
||||
this.hassOsInfo.version_latest
|
||||
}`
|
||||
)
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private _renderUpdateCard(
|
||||
name: string,
|
||||
curVersion: string,
|
||||
lastVersion: string,
|
||||
apiPath: string,
|
||||
releaseNotesUrl: string
|
||||
): TemplateResult {
|
||||
if (lastVersion === curVersion) {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<paper-card heading="${name} update available! 🎉">
|
||||
<div class="card-content">
|
||||
${name} ${lastVersion} is available and you are currently running
|
||||
${name} ${curVersion}.
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<ha-call-api-button
|
||||
.hass=${this.hass}
|
||||
.path=${apiPath}
|
||||
@hass-api-called=${this._apiCalled}
|
||||
>
|
||||
Update
|
||||
</ha-call-api-button>
|
||||
<a href="${releaseNotesUrl}" target="_blank">
|
||||
<mwc-button>Release notes</mwc-button>
|
||||
</a>
|
||||
</div>
|
||||
</paper-card>
|
||||
`;
|
||||
}
|
||||
|
||||
private _apiCalled(ev) {
|
||||
if (ev.detail.success) {
|
||||
this.error = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const response = ev.detail.response;
|
||||
|
||||
typeof response.body === "object"
|
||||
? (this.error = response.body.message || "Unknown error")
|
||||
: (this.error = response.body);
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
hassioStyle,
|
||||
css`
|
||||
:host {
|
||||
width: 33%;
|
||||
}
|
||||
paper-card {
|
||||
display: inline-block;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.errors {
|
||||
color: var(--google-red-500);
|
||||
padding: 16px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
@ -13,9 +13,11 @@ import { HomeAssistant } from "../../src/types";
|
||||
import {
|
||||
fetchHassioSupervisorInfo,
|
||||
fetchHassioHostInfo,
|
||||
fetchHassioHassOsInfo,
|
||||
fetchHassioHomeAssistantInfo,
|
||||
HassioSupervisorInfo,
|
||||
HassioHostInfo,
|
||||
HassioHassOSInfo,
|
||||
HassioHomeAssistantInfo,
|
||||
fetchHassioAddonInfo,
|
||||
createHassioSession,
|
||||
@ -66,6 +68,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
|
||||
|
||||
@property() private _supervisorInfo: HassioSupervisorInfo;
|
||||
@property() private _hostInfo: HassioHostInfo;
|
||||
@property() private _hassOsInfo?: HassioHassOSInfo;
|
||||
@property() private _hassInfo: HassioHomeAssistantInfo;
|
||||
|
||||
protected firstUpdated(changedProps: PropertyValues) {
|
||||
@ -113,6 +116,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
|
||||
supervisorInfo: this._supervisorInfo,
|
||||
hostInfo: this._hostInfo,
|
||||
hassInfo: this._hassInfo,
|
||||
hassOsInfo: this._hassOsInfo,
|
||||
route,
|
||||
});
|
||||
} else {
|
||||
@ -121,6 +125,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
|
||||
el.supervisorInfo = this._supervisorInfo;
|
||||
el.hostInfo = this._hostInfo;
|
||||
el.hassInfo = this._hassInfo;
|
||||
el.hassOsInfo = this._hassOsInfo;
|
||||
el.route = route;
|
||||
}
|
||||
}
|
||||
@ -139,6 +144,10 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
|
||||
this._supervisorInfo = supervisorInfo;
|
||||
this._hostInfo = hostInfo;
|
||||
this._hassInfo = hassInfo;
|
||||
|
||||
if (this._hostInfo.features && this._hostInfo.features.includes("hassos")) {
|
||||
this._hassOsInfo = await fetchHassioHassOsInfo(this.hass);
|
||||
}
|
||||
}
|
||||
|
||||
private async _redirectIngress(addonSlug: string) {
|
||||
|
||||
@ -27,6 +27,7 @@ import {
|
||||
HassioSupervisorInfo,
|
||||
HassioHostInfo,
|
||||
HassioHomeAssistantInfo,
|
||||
HassioHassOSInfo,
|
||||
} from "../../src/data/hassio";
|
||||
|
||||
const HAS_REFRESH_BUTTON = ["store", "snapshots"];
|
||||
@ -39,6 +40,7 @@ class HassioPagesWithTabs extends LitElement {
|
||||
@property() public supervisorInfo!: HassioSupervisorInfo;
|
||||
@property() public hostInfo!: HassioHostInfo;
|
||||
@property() public hassInfo!: HassioHomeAssistantInfo;
|
||||
@property() public hassOsInfo!: HassioHassOSInfo;
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
const page = this._page;
|
||||
@ -79,6 +81,7 @@ class HassioPagesWithTabs extends LitElement {
|
||||
.supervisorInfo=${this.supervisorInfo}
|
||||
.hostInfo=${this.hostInfo}
|
||||
.hassInfo=${this.hassInfo}
|
||||
.hassOsInfo=${this.hassOsInfo}
|
||||
></hassio-tabs-router>
|
||||
</app-header-layout>
|
||||
`;
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
HassioSupervisorInfo,
|
||||
HassioHostInfo,
|
||||
HassioHomeAssistantInfo,
|
||||
HassioHassOSInfo,
|
||||
} from "../../src/data/hassio";
|
||||
|
||||
@customElement("hassio-tabs-router")
|
||||
@ -23,6 +24,7 @@ class HassioTabsRouter extends HassRouterPage {
|
||||
@property() public supervisorInfo: HassioSupervisorInfo;
|
||||
@property() public hostInfo: HassioHostInfo;
|
||||
@property() public hassInfo: HassioHomeAssistantInfo;
|
||||
@property() public hassOsInfo!: HassioHassOSInfo;
|
||||
|
||||
protected routerOptions: RouterOptions = {
|
||||
routes: {
|
||||
@ -49,12 +51,14 @@ class HassioTabsRouter extends HassRouterPage {
|
||||
supervisorInfo: this.supervisorInfo,
|
||||
hostInfo: this.hostInfo,
|
||||
hassInfo: this.hassInfo,
|
||||
hassOsInfo: this.hassOsInfo,
|
||||
});
|
||||
} else {
|
||||
el.hass = this.hass;
|
||||
el.supervisorInfo = this.supervisorInfo;
|
||||
el.hostInfo = this.hostInfo;
|
||||
el.hassInfo = this.hassInfo;
|
||||
el.hassOsInfo = this.hassOsInfo;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,7 +107,7 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
|
||||
>Import from USB</ha-call-api-button
|
||||
>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_computeUpdateAvailable(_hassOs)]]">
|
||||
<template is="dom-if" if="[[_computeUpdateAvailable(hassOsInfo)]]">
|
||||
<ha-call-api-button hass="[[hass]]" path="hassio/hassos/update"
|
||||
>Update</ha-call-api-button
|
||||
>
|
||||
@ -120,12 +120,9 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
data: {
|
||||
type: Object,
|
||||
observer: "_dataChanged",
|
||||
},
|
||||
data: Object,
|
||||
hassOsInfo: Object,
|
||||
errors: String,
|
||||
_hassOs: Object,
|
||||
};
|
||||
}
|
||||
|
||||
@ -149,16 +146,6 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
|
||||
}
|
||||
}
|
||||
|
||||
_dataChanged(data) {
|
||||
if (data.features && data.features.includes("hassos")) {
|
||||
this.hass.callApi("get", "hassio/hassos/info").then((resp) => {
|
||||
this._hassOs = resp.data;
|
||||
});
|
||||
} else {
|
||||
this._hassOs = {};
|
||||
}
|
||||
}
|
||||
|
||||
_computeUpdateAvailable(data) {
|
||||
return data && data.version !== data.version_latest;
|
||||
}
|
||||
|
||||
@ -30,6 +30,7 @@ class HassioSystem extends PolymerElement {
|
||||
<hassio-host-info
|
||||
hass="[[hass]]"
|
||||
data="[[hostInfo]]"
|
||||
hass-os-info="[[hassOsInfo]]"
|
||||
></hassio-host-info>
|
||||
<div class="title">System log</div>
|
||||
<hassio-supervisor-log hass="[[hass]]"></hassio-supervisor-log>
|
||||
@ -42,6 +43,7 @@ class HassioSystem extends PolymerElement {
|
||||
hass: Object,
|
||||
supervisorInfo: Object,
|
||||
hostInfo: Object,
|
||||
hassOsInfo: Object,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [3.1.1](https://github.com/material-components/material-components-web/compare/v3.1.0...v3.1.1) (2019-08-14)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **data-table:** Fixed alignment of header cell title for numer… ([#4963](https://github.com/material-components/material-components-web/issues/4963)) ([b6274a7](https://github.com/material-components/material-components-web/commit/b6274a7))
|
||||
|
||||
# [4.0.0-alpha.0](https://github.com/material-components/material-components-web/compare/v3.1.0...v4.0.0-alpha.0) (2019-08-07)
|
||||
|
||||
**Note:** Version bump only for package @material/data-table
|
||||
|
||||
# [3.1.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0) (2019-07-22)
|
||||
|
||||
### Features
|
||||
|
||||
- **data-table:** Added data table component ([#4889](https://github.com/material-components/material-components-web/issues/4889)) ([7d3380a](https://github.com/material-components/material-components-web/commit/7d3380a))
|
||||
|
||||
# [3.1.0-alpha.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0-alpha.0) (2019-07-16)
|
||||
|
||||
### Features
|
||||
|
||||
- **data-table:** Added data table component ([#4889](https://github.com/material-components/material-components-web/issues/4889)) ([7d3380a](https://github.com/material-components/material-components-web/commit/7d3380a))
|
||||
|
||||
# [3.1.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0) (2019-07-16)
|
||||
|
||||
### Features
|
||||
|
||||
- **data-table:** Added data table component ([#4889](https://github.com/material-components/material-components-web/issues/4889)) ([7d3380a](https://github.com/material-components/material-components-web/commit/7d3380a))
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License
|
||||
|
||||
Copyright (c) 2014-2019 Google, Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
@ -1,411 +0,0 @@
|
||||
<!--docs:
|
||||
title: "Data Tables"
|
||||
layout: detail
|
||||
section: components
|
||||
excerpt: "Material Design-styled tables."
|
||||
iconId: data_table
|
||||
path: /catalog/data-tables/
|
||||
-->
|
||||
|
||||
# Data Table
|
||||
|
||||
Data tables display information in a grid-like format of rows and columns. They organize information in a way that's
|
||||
easy to scan, so that users can look for patterns and insights.
|
||||
|
||||
## Design & API Documentation
|
||||
|
||||
<ul class="icon-list">
|
||||
<li class="icon-list-item icon-list-item--spec">
|
||||
<a href="https://material.io/go/design-data-tables">Material Design guidelines: Data tables</a>
|
||||
</li>
|
||||
<li class="icon-list-item icon-list-item--link">
|
||||
<a href="https://material-components.github.io/material-components-web-catalog/#/component/data-table">Demo</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
## Installation
|
||||
|
||||
```
|
||||
npm install @material/data-table
|
||||
```
|
||||
|
||||
### Styles
|
||||
|
||||
```scss
|
||||
@import "@material/checkbox/mdc-checkbox"; // Required only for data table with row selection.
|
||||
@import "@material/data-table/mdc-data-table";
|
||||
```
|
||||
|
||||
> _NOTE_: Styles for any components you intend to include within data-table (e.g. Checkboxes, Buttons etc.) must be
|
||||
> imported.
|
||||
|
||||
### JavaScript Instantiation
|
||||
|
||||
```js
|
||||
import { MDCDataTable } from "@material/data-table";
|
||||
const dataTable = new MDCDataTable(document.querySelector(".mdc-data-table"));
|
||||
```
|
||||
|
||||
> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.
|
||||
|
||||
> Instantiating `MDCDataTable` component is only required to add interactions for example, row selection.
|
||||
|
||||
MDC Data Table component auto instantiates `MDCCheckbox` for header row checkbox and all row checkboxes. Make sure to set required class names to instantiate checkbox component. We suggest to use `layout` API when rows are added or removed from data table to register new checkbox components.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### HTML Structure
|
||||
|
||||
```html
|
||||
<div class="mdc-data-table">
|
||||
<table class="mdc-data-table__table" aria-label="Dessert calories">
|
||||
<thead>
|
||||
<tr class="mdc-data-table__header-row">
|
||||
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">
|
||||
Dessert
|
||||
</th>
|
||||
<th
|
||||
class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
|
||||
role="columnheader"
|
||||
scope="col"
|
||||
>
|
||||
Carbs (g)
|
||||
</th>
|
||||
<th
|
||||
class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
|
||||
role="columnheader"
|
||||
scope="col"
|
||||
>
|
||||
Protein (g)
|
||||
</th>
|
||||
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">
|
||||
Comments
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="mdc-data-table__content">
|
||||
<tr class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell">Frozen yogurt</td>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
|
||||
<td class="mdc-data-table__cell">Super tasty</td>
|
||||
</tr>
|
||||
<tr class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell">Ice cream sandwich</td>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">
|
||||
4.33333333333
|
||||
</td>
|
||||
<td class="mdc-data-table__cell">I like ice cream more</td>
|
||||
</tr>
|
||||
<tr class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell">Eclair</td>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>
|
||||
<td class="mdc-data-table__cell">New filing flavor</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Variants
|
||||
|
||||
### Data table with row selection
|
||||
|
||||
```html
|
||||
<div class="mdc-data-table">
|
||||
<table class="mdc-data-table__table" aria-label="Dessert calories">
|
||||
<thead>
|
||||
<tr class="mdc-data-table__header-row">
|
||||
<th
|
||||
class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
|
||||
role="columnheader"
|
||||
scope="col"
|
||||
>
|
||||
<div
|
||||
class="mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="mdc-checkbox__native-control"
|
||||
aria-label="Checkbox for header row selection"
|
||||
/>
|
||||
<div class="mdc-checkbox__background">
|
||||
<svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
|
||||
<path
|
||||
class="mdc-checkbox__checkmark-path"
|
||||
fill="none"
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59"
|
||||
/>
|
||||
</svg>
|
||||
<div class="mdc-checkbox__mixedmark"></div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">
|
||||
Status
|
||||
</th>
|
||||
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">
|
||||
Signal name
|
||||
</th>
|
||||
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">
|
||||
Severity
|
||||
</th>
|
||||
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">
|
||||
Stage
|
||||
</th>
|
||||
<th
|
||||
class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
|
||||
role="columnheader"
|
||||
scope="col"
|
||||
>
|
||||
Time
|
||||
</th>
|
||||
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">
|
||||
Roles
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="mdc-data-table__content">
|
||||
<tr data-row-id="u0" class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
|
||||
<div class="mdc-checkbox mdc-data-table__row-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="mdc-checkbox__native-control"
|
||||
aria-labelledby="u0"
|
||||
/>
|
||||
<div class="mdc-checkbox__background">
|
||||
<svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
|
||||
<path
|
||||
class="mdc-checkbox__checkmark-path"
|
||||
fill="none"
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59"
|
||||
/>
|
||||
</svg>
|
||||
<div class="mdc-checkbox__mixedmark"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="mdc-data-table__cell">Online</td>
|
||||
<td class="mdc-data-table__cell" id="u0">Arcus watch slowdown</td>
|
||||
<td class="mdc-data-table__cell">Medium</td>
|
||||
<td class="mdc-data-table__cell">Triaged</td>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
|
||||
<td class="mdc-data-table__cell">Allison Brie</td>
|
||||
</tr>
|
||||
<tr
|
||||
data-row-id="u1"
|
||||
class="mdc-data-table__row mdc-data-table__row--selected"
|
||||
aria-selected="true"
|
||||
>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
|
||||
<div
|
||||
class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="mdc-checkbox__native-control"
|
||||
checked
|
||||
aria-labelledby="u1"
|
||||
/>
|
||||
<div class="mdc-checkbox__background">
|
||||
<svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
|
||||
<path
|
||||
class="mdc-checkbox__checkmark-path"
|
||||
fill="none"
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59"
|
||||
/>
|
||||
</svg>
|
||||
<div class="mdc-checkbox__mixedmark"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="mdc-data-table__cell">Offline</td>
|
||||
<td class="mdc-data-table__cell" id="u1">
|
||||
monarch: prod shared ares-managed-features-provider-heavy
|
||||
</td>
|
||||
<td class="mdc-data-table__cell">Huge</td>
|
||||
<td class="mdc-data-table__cell">Triaged</td>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
|
||||
<td class="mdc-data-table__cell">Brie Larson</td>
|
||||
</tr>
|
||||
<tr
|
||||
data-row-id="u2"
|
||||
class="mdc-data-table__row mdc-data-table__row--selected"
|
||||
aria-selected="true"
|
||||
>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
|
||||
<div
|
||||
class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="mdc-checkbox__native-control"
|
||||
checked
|
||||
aria-labelledby="u2"
|
||||
/>
|
||||
<div class="mdc-checkbox__background">
|
||||
<svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
|
||||
<path
|
||||
class="mdc-checkbox__checkmark-path"
|
||||
fill="none"
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59"
|
||||
/>
|
||||
</svg>
|
||||
<div class="mdc-checkbox__mixedmark"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="mdc-data-table__cell">Online</td>
|
||||
<td class="mdc-data-table__cell" id="u2">
|
||||
monarch: prod shared ares-managed-features-provider-heavy
|
||||
</td>
|
||||
<td class="mdc-data-table__cell">Minor</td>
|
||||
<td class="mdc-data-table__cell">Not triaged</td>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
|
||||
<td class="mdc-data-table__cell">Jeremy Lake</td>
|
||||
</tr>
|
||||
<tr data-row-id="u3" class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
|
||||
<div class="mdc-checkbox mdc-data-table__row-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="mdc-checkbox__native-control"
|
||||
aria-labelledby="u3"
|
||||
/>
|
||||
<div class="mdc-checkbox__background">
|
||||
<svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
|
||||
<path
|
||||
class="mdc-checkbox__checkmark-path"
|
||||
fill="none"
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59"
|
||||
/>
|
||||
</svg>
|
||||
<div class="mdc-checkbox__mixedmark"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="mdc-data-table__cell">Online</td>
|
||||
<td class="mdc-data-table__cell" id="u3">Arcus watch slowdown</td>
|
||||
<td class="mdc-data-table__cell">Negligible</td>
|
||||
<td class="mdc-data-table__cell">Triaged</td>
|
||||
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
|
||||
<td class="mdc-data-table__cell">Angelina Cheng</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Style Customization
|
||||
|
||||
### CSS Classes
|
||||
|
||||
| CSS Class | Description |
|
||||
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `mdc-data-table` | Mandatory. The root DOM element containing `table` and other supporting elements. |
|
||||
| `mdc-data-table__table` | Mandatory. Table element. Added to `table` HTML tag. |
|
||||
| `mdc-data-table__header-row` | Mandatory. Table header row element. Added to `thead > tr` HTML tag. |
|
||||
| `mdc-data-table__header-cell` | Mandatory. Table header cell element. Added to `thead > th > td` HTML tag. |
|
||||
| `mdc-data-table__header-cell--checkbox` | Optional. Table header cell element that contains `mdc-checkbox`. Added to `thead> th > td:first-child` HTML tag. |
|
||||
| `mdc-data-table__header-cell--numeric` | Optional. Table header cell element that maps to numeric cells. Added to `thead > th > td` HTML tag. |
|
||||
| `mdc-data-table__content` | Mandatory. Table body element. Added to `tbody` HTML tag. |
|
||||
| `mdc-data-table__row` | Mandatory. Table row element. Added to `tbody > tr` HTML tag. |
|
||||
| `mdc-data-table__cell` | Mandatory. Table cell element. Added to `tbody > tr > td` HTML tag. |
|
||||
| `mdc-data-table__cell--numeric` | Optional. Table cell element that contains numeric data. Added to `tbody > tr > td` HTML tag. |
|
||||
| `mdc-data-table__cell--checkbox` | Optional. Table cell element that contains `mdc-checkbox`. Added to `thead> th > td:first-child` HTML tag. |
|
||||
| `mdc-data-table__header-row-checkbox` | Optional. Checkbox element rendered inside table header row element. Add this class name to `mdc-checkbox` element to override styles required for data-table. |
|
||||
| `mdc-data-table__row-checkbox` | Optional. Checkbox element rendered inside table row element. Add this class name to `mdc-checkbox` element to override styles required for data-table. |
|
||||
| `mdc-data-table__row--selected` | Optional. Modifier class added to `mdc-data-table__row` when table row is selected. |
|
||||
|
||||
### Sass Mixins
|
||||
|
||||
| Mixin | Description |
|
||||
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
|
||||
| `mdc-data-table-fill-color($color)` | Sets the background color of data-table surface. |
|
||||
| `mdc-data-table-row-fill-color($color)` | Sets the background color of table row container. |
|
||||
| `mdc-data-table-header-row-fill-color($color)` | Sets the background color of table header row container. |
|
||||
| `mdc-data-table-selected-row-fill-color($color)` | Sets the background color of selected row container. |
|
||||
| `mdc-data-table-checked-icon-color($color)` | Sets the checked icon color. |
|
||||
| `mdc-data-table-divider-color($color)` | Sets the table rows divider color. |
|
||||
| `mdc-data-table-divider-size($size)` | Sets the table rows divider size. |
|
||||
| `mdc-data-table-row-hover-fill-color($color)` | Sets the background color of table row on hover. |
|
||||
| `mdc-data-table-header-row-text-color($color)` | Sets the header row text color. |
|
||||
| `mdc-data-table-row-text-color($color)` | Sets the row text color. |
|
||||
| `mdc-data-table-shape-radius($radius)` | Sets the rounded shape with given radius size. `$radius` can be single radius or list radius values up to 4 list size. |
|
||||
| `mdc-data-table-stroke-size($size)` | Sets the border size of data-table. |
|
||||
| `mdc-data-table-stroke-color($color)` | Sets the border color of data-table. |
|
||||
| `mdc-data-table-header-row-height($height)` | Sets the header row height. |
|
||||
| `mdc-data-table-row-height($height)` | Sets row height. |
|
||||
| `mdc-data-table-cell-padding($leading-padding, $trailing-padding)` | Sets leading & trailing padding for all cells. |
|
||||
| `mdc-data-table-column-widths($width-list)` | Sets the custom widths for each table column. |
|
||||
|
||||
## Accessibility
|
||||
|
||||
Please refer [WAI-ARIA Authoring Practices for table](https://www.w3.org/TR/wai-aria-practices-1.1/#table) for ARIA recommended role, states & properties required for table element.
|
||||
|
||||
## Events
|
||||
|
||||
Please use MDCDataTable's constants file to access these event constants.
|
||||
|
||||
```ts
|
||||
const {events} from '@material/data-table/constants';
|
||||
// `events.ROW_SELECTION_CHANGED` to access event constant.
|
||||
```
|
||||
|
||||
| Event constant | Event name | Description |
|
||||
| ----------------------- | ---------------------------- | -------------------------------------------------------- |
|
||||
| `ROW_SELECTION_CHANGED` | `MDCDataTable:changed` | Event emitted when row checkbox is checked or unchecked. |
|
||||
| `SELECTED_ALL` | `MDCDataTable:selectedAll` | Event emitted when header row checkbox is checked. |
|
||||
| `UNSELECTED_ALL` | `MDCDataTable:unselectedAll` | Event emitted when header row checkbox is unchecked. |
|
||||
|
||||
## `MDCDataTable` Properties and Methods
|
||||
|
||||
| Method Signature | Description |
|
||||
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `layout() => void` | Registers new row checkboxes, header row checkbox and updates the state of header row checkbox. Use this when rows are added / removed from data table. |
|
||||
| `getRows() => HTMLElement[]` | Returns array of row elements. |
|
||||
| `getSelectedRowIds() => Array<string \| null>` | Returns array of selected row ids. |
|
||||
| `setSelectedRowIds(rowIds: string[])` | Sets selected row ids. Overwrites previously selected rows. |
|
||||
|
||||
## Usage within Web Frameworks
|
||||
|
||||
If you are using a JavaScript framework, such as React or Angular, you can create a Data Table for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).
|
||||
|
||||
### `MDCDataTableAdapter`
|
||||
|
||||
| Method Signature | Description |
|
||||
| ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `addClassAtRowIndex(rowIndex: number, cssClasses: string) => void` | Adds a class name to row element at given row index excluding header row. |
|
||||
| `getRowCount() => number` | Returns row count excluding header row. |
|
||||
| `getRowElements() => HTMLElement[]` | Returns array of row elements excluding header row. |
|
||||
| `getRowIdAtIndex(rowIndex: number) => string \| null` | Returns row id of row element at given row index based on `data-row-id` attribute on row element `tr`. |
|
||||
| `getRowIndexByChildElement(el: Element) => number` | Returns index of row element that contains give child element. |
|
||||
| `getSelectedRowCount() => number` | Returns selected row count. |
|
||||
| `isCheckboxAtRowIndexChecked(rowIndex: number) => boolean;` | Returns True if row checkbox at given row index is checked. |
|
||||
| `isHeaderRowCheckboxChecked() => boolean` | Returns true if header row checkbox is checked. |
|
||||
| `isRowsSelectable() => boolean` | Returns true if table rows are selectable. |
|
||||
| `notifyRowSelectionChanged(data: MDCDataTableRowSelectionChangedEventDetail) => void` | Notifies when row selection is changed. |
|
||||
| `notifySelectedAll() => void` | Notifies when header row is checked. |
|
||||
| `notifyUnselectedAll() => void` | Notifies when header row is unchecked. |
|
||||
| `registerHeaderRowCheckbox() => Promise<void> \| void` | Initializes header row checkbox. Destroys previous header row checkbox instance if any. Can return Promise only if registering checkbox is asynchronous. |
|
||||
| `registerRowCheckboxes() => Promise<void> \| void` | Initializes all row checkboxes. Destroys all previous row checkbox instances if any. This is usually called when row checkboxes are added or removed from table. Can return Promise only if registering checkbox is asynchronous. |
|
||||
| `removeClassAtRowIndex(rowIndex: number, cssClasses: string) => void` | Removes class name from row element at give row index. |
|
||||
| `setAttributeAtRowIndex(rowIndex: number, attr: string, value: string) => void` | Sets attribute to row element at given row index. |
|
||||
| `setHeaderRowCheckboxChecked(checked: boolean) => void` | Sets header row checkbox checked or unchecked. |
|
||||
| `setHeaderRowCheckboxIndeterminate(indeterminate: boolean) => void` | Sets header row checkbox to indeterminate. |
|
||||
| `setRowCheckboxCheckedAtIndex(rowIndex: number, checked: boolean) => void` | Sets row checkbox to checked or unchecked at given row index. |
|
||||
|
||||
### `MDCDataTableFoundation`
|
||||
|
||||
| Method Signature | Description |
|
||||
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `layout() => void` | Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. Use this if registering checkbox is synchronous. |
|
||||
| `layoutAsync() => Promise<void> \| void` | Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. Use this only if `registerRowCheckboxes` and `registerHeaderRowCheckboxe` are asynchronous. |
|
||||
| `getRows() => HTMLElement[]` | Returns array of row elements. |
|
||||
| `setSelectedRowIds(rowIds: string[]) => void` | Sets selected row ids. Overwrites previously selected rows. |
|
||||
| `getSelectedRowIds() => Array<string \| null>` | Returns array of selected row ids. |
|
||||
| `handleHeaderRowCheckboxChange() => void` | Handles header row checkbox change event. |
|
||||
| `handleRowCheckboxChange(event: Event) => void` | Handles change event originated from row checkboxes. |
|
||||
@ -1,306 +0,0 @@
|
||||
//
|
||||
// Copyright 2019 Google Inc.
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
// of this software and associated documentation files (the "Software"), to deal
|
||||
// in the Software without restriction, including without limitation the rights
|
||||
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
// copies of the Software, and to permit persons to whom the Software is
|
||||
// furnished to do so, subject to the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be included in
|
||||
// all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
// THE SOFTWARE.
|
||||
//
|
||||
|
||||
@import "@material/animation/functions";
|
||||
@import "@material/elevation/mixins";
|
||||
@import "@material/feature-targeting/functions";
|
||||
@import "@material/feature-targeting/mixins";
|
||||
@import "@material/checkbox/mixins";
|
||||
@import "@material/rtl/mixins";
|
||||
@import "@material/shape/mixins";
|
||||
@import "@material/theme/mixins";
|
||||
@import "@material/theme/variables"; // for mdc-theme-prop-value.
|
||||
@import "@material/typography/mixins";
|
||||
@import "./variables";
|
||||
|
||||
@mixin mdc-data-table-core-styles($query: mdc-feature-all()) {
|
||||
$feat-structure: mdc-feature-create-target($query, structure);
|
||||
$feat-typography: mdc-feature-create-target($query, typography);
|
||||
|
||||
// postcss-bem-linter: define data-table
|
||||
|
||||
.mdc-data-table__content {
|
||||
@include mdc-typography(body2, $query: $query);
|
||||
}
|
||||
|
||||
.mdc-data-table {
|
||||
@include mdc-data-table-fill-color($mdc-data-table-fill-color, $query: $query);
|
||||
@include mdc-data-table-shape-radius($mdc-data-table-shape-radius, $query: $query);
|
||||
@include mdc-data-table-stroke-size($mdc-data-table-stroke-size, $query: $query);
|
||||
@include mdc-data-table-stroke-color($mdc-data-table-stroke-color, $query: $query);
|
||||
|
||||
@at-root {
|
||||
@include mdc-data-table-row-fill-color($mdc-data-table-row-fill-color, $query: $query);
|
||||
@include mdc-data-table-header-row-fill-color($mdc-data-table-header-row-fill-color, $query: $query);
|
||||
@include mdc-data-table-selected-row-fill-color($mdc-data-table-selected-row-fill-color, $query: $query);
|
||||
@include mdc-data-table-divider-color($mdc-data-table-divider-color, $query: $query);
|
||||
@include mdc-data-table-divider-size($mdc-data-table-divider-size, $query: $query);
|
||||
@include mdc-data-table-row-hover-fill-color($mdc-data-table-row-hover-fill-color, $query: $query);
|
||||
@include mdc-data-table-header-row-text-color($mdc-data-table-header-row-text-color, $query: $query);
|
||||
@include mdc-data-table-row-text-color($mdc-data-table-row-text-color, $query: $query);
|
||||
@include mdc-data-table-header-row-height($mdc-data-table-header-row-height, $query: $query);
|
||||
@include mdc-data-table-row-height($mdc-data-table-row-height, $query: $query);
|
||||
@include mdc-data-table-cell-padding(
|
||||
$leading-padding: $mdc-data-table-cell-leading-padding,
|
||||
$trailing-padding: $mdc-data-table-cell-trailing-padding,
|
||||
$query: $query
|
||||
);
|
||||
}
|
||||
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-data-table__table {
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
white-space: nowrap;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-data-table__cell {
|
||||
@include mdc-typography(body2, $query: $query);
|
||||
}
|
||||
|
||||
.mdc-data-table__cell--numeric {
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
@include mdc-rtl {
|
||||
/* @noflip */
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-data-table__header-cell {
|
||||
@include mdc-typography(subtitle2, $query: $query);
|
||||
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
@include mdc-rtl {
|
||||
/* @noflip */
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-data-table__header-cell--numeric {
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
@include mdc-rtl {
|
||||
/* @noflip */
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-fill-color($color, $query: mdc-feature-all()) {
|
||||
$feat-color: mdc-feature-create-target($query, color);
|
||||
|
||||
@include mdc-feature-targets($feat-color) {
|
||||
@include mdc-theme-prop("background-color", $color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-header-row-fill-color($color, $query: mdc-feature-all()) {
|
||||
$feat-color: mdc-feature-create-target($query, color);
|
||||
|
||||
.mdc-data-table__header-row {
|
||||
@include mdc-feature-targets($feat-color) {
|
||||
@include mdc-theme-prop("background-color", $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-row-fill-color($color, $query: mdc-feature-all()) {
|
||||
$feat-color: mdc-feature-create-target($query, color);
|
||||
|
||||
.mdc-data-table__row {
|
||||
@include mdc-feature-targets($feat-color) {
|
||||
@include mdc-theme-prop("background-color", $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-selected-row-fill-color($color, $query: mdc-feature-all()) {
|
||||
$feat-color: mdc-feature-create-target($query, color);
|
||||
|
||||
.mdc-data-table__row--selected {
|
||||
@include mdc-feature-targets($feat-color) {
|
||||
@include mdc-theme-prop("background-color", $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-checked-icon-color($color, $query: mdc-feature-all()) {
|
||||
.mdc-data-table__header-row-checkbox,
|
||||
.mdc-data-table__row-checkbox {
|
||||
@include mdc-checkbox-focus-indicator-color($color, $query: $query);
|
||||
@include mdc-checkbox-container-colors($marked-stroke-color: $color, $marked-fill-color: $color, $query: $query);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-divider-color($color, $query: mdc-feature-all()) {
|
||||
$feat-color: mdc-feature-create-target($query, color);
|
||||
|
||||
.mdc-data-table__row {
|
||||
@include mdc-feature-targets($feat-color) {
|
||||
border-top-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-divider-size($size, $query: mdc-feature-all()) {
|
||||
$feat-structure: mdc-feature-create-target($query, structure);
|
||||
|
||||
.mdc-data-table__row {
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
border-top-width: $size;
|
||||
border-top-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-row-hover-fill-color($color, $query: mdc-feature-all()) {
|
||||
$feat-color: mdc-feature-create-target($query, color);
|
||||
|
||||
.mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
|
||||
@include mdc-feature-targets($feat-color) {
|
||||
@include mdc-theme-prop("background-color", $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-header-row-text-color($color, $query: mdc-feature-all()) {
|
||||
$feat-color: mdc-feature-create-target($query, color);
|
||||
|
||||
.mdc-data-table__header-cell {
|
||||
@include mdc-feature-targets($feat-color) {
|
||||
@include mdc-theme-prop("color", $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-row-text-color($color, $query: mdc-feature-all()) {
|
||||
$feat-color: mdc-feature-create-target($query, color);
|
||||
|
||||
.mdc-data-table__cell {
|
||||
@include mdc-feature-targets($feat-color) {
|
||||
@include mdc-theme-prop("color", $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
|
||||
@include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-stroke-size($size, $query: mdc-feature-all()) {
|
||||
$feat-structure: mdc-feature-create-target($query, structure);
|
||||
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
border-width: $size;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-stroke-color($color, $query: mdc-feature-all()) {
|
||||
$feat-color: mdc-feature-create-target($query, color);
|
||||
|
||||
@include mdc-feature-targets($feat-color) {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-header-row-height($height, $query: mdc-feature-all()) {
|
||||
$feat-structure: mdc-feature-create-target($query, structure);
|
||||
|
||||
.mdc-data-table__header-row {
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-row-height($height, $query: mdc-feature-all()) {
|
||||
$feat-structure: mdc-feature-create-target($query, structure);
|
||||
|
||||
.mdc-data-table__row {
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-cell-padding(
|
||||
$leading-padding: $mdc-data-table-cell-leading-padding,
|
||||
$trailing-padding: $mdc-data-table-cell-trailing-padding,
|
||||
$query: mdc-feature-all()) {
|
||||
$feat-structure: mdc-feature-create-target($query, structure);
|
||||
|
||||
.mdc-data-table__cell,
|
||||
.mdc-data-table__header-cell {
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
padding-right: $trailing-padding;
|
||||
padding-left: $leading-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-data-table__header-cell--checkbox,
|
||||
.mdc-data-table__cell--checkbox {
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
@include mdc-rtl-reflexive-property(padding, $leading-padding, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-column-widths($width-list, $query: mdc-feature-all()) {
|
||||
$feat-structure: mdc-feature-create-target($query, structure);
|
||||
|
||||
@for $i from 1 through length($width-list) {
|
||||
.mdc-data-table__row > :nth-child(#{$i}) {
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
width: nth($width-list, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdc-data-table-theme-baseline($query: mdc-feature-all()) {
|
||||
@include mdc-data-table-checked-icon-color($mdc-data-table-checked-icon-color, $query: $query);
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
//
|
||||
// Copyright 2019 Google Inc.
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
// of this software and associated documentation files (the "Software"), to deal
|
||||
// in the Software without restriction, including without limitation the rights
|
||||
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
// copies of the Software, and to permit persons to whom the Software is
|
||||
// furnished to do so, subject to the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be included in
|
||||
// all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
// THE SOFTWARE.
|
||||
//
|
||||
|
||||
@import "@material/theme/functions";
|
||||
|
||||
$mdc-data-table-fill-color: surface !default;
|
||||
$mdc-data-table-header-row-fill-color: inherit !default;
|
||||
$mdc-data-table-row-fill-color: inherit !default;
|
||||
$mdc-data-table-selected-row-fill-color: rgba(mdc-theme-prop-value(primary), .04) !default;
|
||||
|
||||
$mdc-data-table-checked-icon-color: primary !default;
|
||||
$mdc-data-table-divider-color: rgba(mdc-theme-prop-value(on-surface), .12) !default;
|
||||
$mdc-data-table-divider-size: 1px !default;
|
||||
$mdc-data-table-row-hover-fill-color: rgba(mdc-theme-prop-value(on-surface), .04) !default;
|
||||
$mdc-data-table-checkbox-touch-dimension: 48px !default;
|
||||
|
||||
$mdc-data-table-header-row-text-color: rgba(mdc-theme-prop-value(on-surface), .87) !default;
|
||||
$mdc-data-table-row-text-color: rgba(mdc-theme-prop-value(on-surface), .87) !default;
|
||||
|
||||
$mdc-data-table-shape-radius: medium !default;
|
||||
$mdc-data-table-stroke-size: 1px !default;
|
||||
$mdc-data-table-stroke-color: rgba(mdc-theme-prop-value(on-surface), .12) !default;
|
||||
|
||||
$mdc-data-table-row-height: 52px !default;
|
||||
$mdc-data-table-header-row-height: $mdc-data-table-row-height + 4px !default;
|
||||
$mdc-data-table-cell-leading-padding: 16px !default;
|
||||
$mdc-data-table-cell-trailing-padding: 16px !default;
|
||||
140
mdc-data-table/adapter.d.ts
vendored
140
mdc-data-table/adapter.d.ts
vendored
@ -1,140 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
/**
|
||||
* Defines the shape of the adapter expected by the foundation.
|
||||
* Implement this adapter for your framework of choice to delegate updates to
|
||||
* the component in your framework of choice. See architecture documentation
|
||||
* for more details.
|
||||
* https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
|
||||
*/
|
||||
import { MDCDataTableRowSelectionChangedEventDetail } from "./types";
|
||||
export interface MDCDataTableAdapter {
|
||||
/**
|
||||
* Adds a class name to row element at given row index excluding header row.
|
||||
*
|
||||
* @param rowIndex Index of row element excluding header row.
|
||||
* @param cssClasses CSS Class string to add.
|
||||
*/
|
||||
addClassAtRowIndex(rowIndex: number, cssClasses: string): void;
|
||||
/**
|
||||
* @return Row count excluding header row.
|
||||
*/
|
||||
getRowCount(): number;
|
||||
/**
|
||||
* @return Array of row elements excluding header row.
|
||||
*/
|
||||
getRowElements(): Element[];
|
||||
/**
|
||||
* Returns row id of row element at given row index based on `data-row-id` attribute on row element `tr`.
|
||||
*
|
||||
* @param rowIndex Index of row element.
|
||||
* @return Row id of row element, returns `null` in absence of `data-row-id` attribute on row element.
|
||||
*/
|
||||
getRowIdAtIndex(rowIndex: number): string | null;
|
||||
/**
|
||||
* Returns index of row element that contains give child element. Returns -1 if element is not child of any row
|
||||
* element.
|
||||
*
|
||||
* @param el Child element of row element.
|
||||
* @return Index of row element.
|
||||
*/
|
||||
getRowIndexByChildElement(el: Element): number;
|
||||
/**
|
||||
* @return Selected row count.
|
||||
*/
|
||||
getSelectedRowCount(): number;
|
||||
/**
|
||||
* @param rowIndex Index of row element.
|
||||
* @return True if row checkbox at given row index is checked.
|
||||
*/
|
||||
isCheckboxAtRowIndexChecked(rowIndex: number): boolean;
|
||||
/**
|
||||
* @return True if header row checkbox is checked.
|
||||
*/
|
||||
isHeaderRowCheckboxChecked(): boolean;
|
||||
/**
|
||||
* @return True if table rows are selectable.
|
||||
*/
|
||||
isRowsSelectable(): boolean;
|
||||
/**
|
||||
* Notifies when row selection is changed.
|
||||
*
|
||||
* @param data Event detail data for row selection changed event.
|
||||
*/
|
||||
notifyRowSelectionChanged(
|
||||
data: MDCDataTableRowSelectionChangedEventDetail
|
||||
): void;
|
||||
/**
|
||||
* Notifies when header row is checked.
|
||||
*/
|
||||
notifySelectedAll(): void;
|
||||
/**
|
||||
* Notifies when header row is unchecked.
|
||||
*/
|
||||
notifyUnselectedAll(): void;
|
||||
/**
|
||||
* Initializes header row checkbox. Destroys previous header row checkbox instance if any.
|
||||
* @return Can return Promise only if registering checkbox is asynchronous.
|
||||
*/
|
||||
registerHeaderRowCheckbox(): Promise<void> | void;
|
||||
/**
|
||||
* Initializes all row checkboxes. Destroys previous row checkbox instances if any. This is usually called when row
|
||||
* checkboxes are added or removed from table.
|
||||
* @return Can return Promise only if registering checkbox is asynchronous.
|
||||
*/
|
||||
registerRowCheckboxes(): Promise<void> | void;
|
||||
/**
|
||||
* Removes class name from row element at give row index.
|
||||
*
|
||||
* @param rowIndex Index of row element excluding header row element.
|
||||
* @param cssClasses Class name string.
|
||||
*/
|
||||
removeClassAtRowIndex(rowIndex: number, cssClasses: string): void;
|
||||
/**
|
||||
* Sets attribute to row element at given row index.
|
||||
*
|
||||
* @param rowIndex Index of row element excluding header row element.
|
||||
* @param attr Name of attribute.
|
||||
* @param value Value of attribute.
|
||||
*/
|
||||
setAttributeAtRowIndex(rowIndex: number, attr: string, value: string): void;
|
||||
/**
|
||||
* Sets header row checkbox checked or unchecked.
|
||||
*
|
||||
* @param checked True to set header row checkbox checked.
|
||||
*/
|
||||
setHeaderRowCheckboxChecked(checked: boolean): void;
|
||||
/**
|
||||
* Sets header row checkbox to indeterminate.
|
||||
*
|
||||
* @param indeterminate True to set header row checkbox indeterminate.
|
||||
*/
|
||||
setHeaderRowCheckboxIndeterminate(indeterminate: boolean): void;
|
||||
/**
|
||||
* Sets row checkbox to checked or unchecked at given row index.
|
||||
*
|
||||
* @param rowIndex Index of row element excluding header row element.
|
||||
* @param checked True to set checked.
|
||||
*/
|
||||
setRowCheckboxCheckedAtIndex(rowIndex: number, checked: boolean): void;
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
//# sourceMappingURL=adapter.js.map
|
||||
@ -1 +0,0 @@
|
||||
{"version":3,"file":"adapter.js","sourceRoot":"","sources":["adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG"}
|
||||
@ -1,161 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Defines the shape of the adapter expected by the foundation.
|
||||
* Implement this adapter for your framework of choice to delegate updates to
|
||||
* the component in your framework of choice. See architecture documentation
|
||||
* for more details.
|
||||
* https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
|
||||
*/
|
||||
|
||||
import { MDCDataTableRowSelectionChangedEventDetail } from "./types";
|
||||
|
||||
export interface MDCDataTableAdapter {
|
||||
/**
|
||||
* Adds a class name to row element at given row index excluding header row.
|
||||
*
|
||||
* @param rowIndex Index of row element excluding header row.
|
||||
* @param cssClasses CSS Class string to add.
|
||||
*/
|
||||
addClassAtRowIndex(rowIndex: number, cssClasses: string): void;
|
||||
|
||||
/**
|
||||
* @return Row count excluding header row.
|
||||
*/
|
||||
getRowCount(): number;
|
||||
|
||||
/**
|
||||
* @return Array of row elements excluding header row.
|
||||
*/
|
||||
getRowElements(): Element[];
|
||||
|
||||
/**
|
||||
* Returns row id of row element at given row index based on `data-row-id` attribute on row element `tr`.
|
||||
*
|
||||
* @param rowIndex Index of row element.
|
||||
* @return Row id of row element, returns `null` in absence of `data-row-id` attribute on row element.
|
||||
*/
|
||||
getRowIdAtIndex(rowIndex: number): string | null;
|
||||
|
||||
/**
|
||||
* Returns index of row element that contains give child element. Returns -1 if element is not child of any row
|
||||
* element.
|
||||
*
|
||||
* @param el Child element of row element.
|
||||
* @return Index of row element.
|
||||
*/
|
||||
getRowIndexByChildElement(el: Element): number;
|
||||
|
||||
/**
|
||||
* @return Selected row count.
|
||||
*/
|
||||
getSelectedRowCount(): number;
|
||||
|
||||
/**
|
||||
* @param rowIndex Index of row element.
|
||||
* @return True if row checkbox at given row index is checked.
|
||||
*/
|
||||
isCheckboxAtRowIndexChecked(rowIndex: number): boolean;
|
||||
|
||||
/**
|
||||
* @return True if header row checkbox is checked.
|
||||
*/
|
||||
isHeaderRowCheckboxChecked(): boolean;
|
||||
|
||||
/**
|
||||
* @return True if table rows are selectable.
|
||||
*/
|
||||
isRowsSelectable(): boolean;
|
||||
|
||||
/**
|
||||
* Notifies when row selection is changed.
|
||||
*
|
||||
* @param data Event detail data for row selection changed event.
|
||||
*/
|
||||
notifyRowSelectionChanged(
|
||||
data: MDCDataTableRowSelectionChangedEventDetail
|
||||
): void;
|
||||
|
||||
/**
|
||||
* Notifies when header row is checked.
|
||||
*/
|
||||
notifySelectedAll(): void;
|
||||
|
||||
/**
|
||||
* Notifies when header row is unchecked.
|
||||
*/
|
||||
notifyUnselectedAll(): void;
|
||||
|
||||
/**
|
||||
* Initializes header row checkbox. Destroys previous header row checkbox instance if any.
|
||||
* @return Can return Promise only if registering checkbox is asynchronous.
|
||||
*/
|
||||
registerHeaderRowCheckbox(): Promise<void> | void;
|
||||
|
||||
/**
|
||||
* Initializes all row checkboxes. Destroys previous row checkbox instances if any. This is usually called when row
|
||||
* checkboxes are added or removed from table.
|
||||
* @return Can return Promise only if registering checkbox is asynchronous.
|
||||
*/
|
||||
registerRowCheckboxes(): Promise<void> | void;
|
||||
|
||||
/**
|
||||
* Removes class name from row element at give row index.
|
||||
*
|
||||
* @param rowIndex Index of row element excluding header row element.
|
||||
* @param cssClasses Class name string.
|
||||
*/
|
||||
removeClassAtRowIndex(rowIndex: number, cssClasses: string): void;
|
||||
|
||||
/**
|
||||
* Sets attribute to row element at given row index.
|
||||
*
|
||||
* @param rowIndex Index of row element excluding header row element.
|
||||
* @param attr Name of attribute.
|
||||
* @param value Value of attribute.
|
||||
*/
|
||||
setAttributeAtRowIndex(rowIndex: number, attr: string, value: string): void;
|
||||
|
||||
/**
|
||||
* Sets header row checkbox checked or unchecked.
|
||||
*
|
||||
* @param checked True to set header row checkbox checked.
|
||||
*/
|
||||
setHeaderRowCheckboxChecked(checked: boolean): void;
|
||||
|
||||
/**
|
||||
* Sets header row checkbox to indeterminate.
|
||||
*
|
||||
* @param indeterminate True to set header row checkbox indeterminate.
|
||||
*/
|
||||
setHeaderRowCheckboxIndeterminate(indeterminate: boolean): void;
|
||||
|
||||
/**
|
||||
* Sets row checkbox to checked or unchecked at given row index.
|
||||
*
|
||||
* @param rowIndex Index of row element excluding header row element.
|
||||
* @param checked True to set checked.
|
||||
*/
|
||||
setRowCheckboxCheckedAtIndex(rowIndex: number, checked: boolean): void;
|
||||
}
|
||||
58
mdc-data-table/component.d.ts
vendored
58
mdc-data-table/component.d.ts
vendored
@ -1,58 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
import { MDCComponent } from "@material/base/component";
|
||||
import { MDCCheckboxFactory } from "@material/checkbox/component";
|
||||
import { MDCDataTableFoundation } from "./foundation";
|
||||
export declare class MDCDataTable extends MDCComponent<MDCDataTableFoundation> {
|
||||
static attachTo(root: Element): MDCDataTable;
|
||||
private headerRowCheckbox_;
|
||||
private rowCheckboxList_;
|
||||
private checkboxFactory_;
|
||||
private headerRow_;
|
||||
private content_;
|
||||
private handleHeaderRowCheckboxChange_;
|
||||
private handleRowCheckboxChange_;
|
||||
initialize(checkboxFactory?: MDCCheckboxFactory): void;
|
||||
initialSyncWithDOM(): void;
|
||||
/**
|
||||
* Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
|
||||
*/
|
||||
layout(): void;
|
||||
/**
|
||||
* @return Returns array of row elements.
|
||||
*/
|
||||
getRows(): Element[];
|
||||
/**
|
||||
* @return Returns array of selected row ids.
|
||||
*/
|
||||
getSelectedRowIds(): Array<string | null>;
|
||||
/**
|
||||
* Sets selected row ids. Overwrites previously selected rows.
|
||||
* @param rowIds Array of row ids that needs to be selected.
|
||||
*/
|
||||
setSelectedRowIds(rowIds: string[]): void;
|
||||
destroy(): void;
|
||||
getDefaultFoundation(): MDCDataTableFoundation;
|
||||
private getRowByIndex_;
|
||||
private getRowIdByIndex_;
|
||||
}
|
||||
@ -1,202 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
import * as tslib_1 from "tslib";
|
||||
import { MDCComponent } from "@material/base/component";
|
||||
import { MDCCheckbox } from "@material/checkbox/component";
|
||||
import { closest } from "@material/dom/ponyfill";
|
||||
import { cssClasses, events, strings } from "./constants";
|
||||
import { MDCDataTableFoundation } from "./foundation";
|
||||
var MDCDataTable = /** @class */ (function(_super) {
|
||||
tslib_1.__extends(MDCDataTable, _super);
|
||||
function MDCDataTable() {
|
||||
return (_super !== null && _super.apply(this, arguments)) || this;
|
||||
}
|
||||
MDCDataTable.attachTo = function(root) {
|
||||
return new MDCDataTable(root);
|
||||
};
|
||||
MDCDataTable.prototype.initialize = function(checkboxFactory) {
|
||||
if (checkboxFactory === void 0) {
|
||||
checkboxFactory = function(el) {
|
||||
return new MDCCheckbox(el);
|
||||
};
|
||||
}
|
||||
this.checkboxFactory_ = checkboxFactory;
|
||||
};
|
||||
MDCDataTable.prototype.initialSyncWithDOM = function() {
|
||||
var _this = this;
|
||||
this.headerRow_ = this.root_.querySelector("." + cssClasses.HEADER_ROW);
|
||||
this.handleHeaderRowCheckboxChange_ = function() {
|
||||
return _this.foundation_.handleHeaderRowCheckboxChange();
|
||||
};
|
||||
this.headerRow_.addEventListener(
|
||||
"change",
|
||||
this.handleHeaderRowCheckboxChange_
|
||||
);
|
||||
this.content_ = this.root_.querySelector("." + cssClasses.CONTENT);
|
||||
this.handleRowCheckboxChange_ = function(event) {
|
||||
return _this.foundation_.handleRowCheckboxChange(event);
|
||||
};
|
||||
this.content_.addEventListener("change", this.handleRowCheckboxChange_);
|
||||
this.layout();
|
||||
};
|
||||
/**
|
||||
* Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
|
||||
*/
|
||||
MDCDataTable.prototype.layout = function() {
|
||||
this.foundation_.layout();
|
||||
};
|
||||
/**
|
||||
* @return Returns array of row elements.
|
||||
*/
|
||||
MDCDataTable.prototype.getRows = function() {
|
||||
return this.foundation_.getRows();
|
||||
};
|
||||
/**
|
||||
* @return Returns array of selected row ids.
|
||||
*/
|
||||
MDCDataTable.prototype.getSelectedRowIds = function() {
|
||||
return this.foundation_.getSelectedRowIds();
|
||||
};
|
||||
/**
|
||||
* Sets selected row ids. Overwrites previously selected rows.
|
||||
* @param rowIds Array of row ids that needs to be selected.
|
||||
*/
|
||||
MDCDataTable.prototype.setSelectedRowIds = function(rowIds) {
|
||||
this.foundation_.setSelectedRowIds(rowIds);
|
||||
};
|
||||
MDCDataTable.prototype.destroy = function() {
|
||||
this.headerRow_.removeEventListener(
|
||||
"change",
|
||||
this.handleHeaderRowCheckboxChange_
|
||||
);
|
||||
this.content_.removeEventListener("change", this.handleRowCheckboxChange_);
|
||||
this.headerRowCheckbox_.destroy();
|
||||
this.rowCheckboxList_.forEach(function(checkbox) {
|
||||
return checkbox.destroy();
|
||||
});
|
||||
};
|
||||
MDCDataTable.prototype.getDefaultFoundation = function() {
|
||||
var _this = this;
|
||||
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
|
||||
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
|
||||
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
|
||||
var adapter = {
|
||||
addClassAtRowIndex: function(rowIndex, className) {
|
||||
return _this.getRows()[rowIndex].classList.add(className);
|
||||
},
|
||||
getRowCount: function() {
|
||||
return _this.getRows().length;
|
||||
},
|
||||
getRowElements: function() {
|
||||
return [].slice.call(
|
||||
_this.root_.querySelectorAll(strings.ROW_SELECTOR)
|
||||
);
|
||||
},
|
||||
getRowIdAtIndex: function(rowIndex) {
|
||||
return _this.getRows()[rowIndex].getAttribute(strings.DATA_ROW_ID_ATTR);
|
||||
},
|
||||
getRowIndexByChildElement: function(el) {
|
||||
return _this.getRows().indexOf(closest(el, strings.ROW_SELECTOR));
|
||||
},
|
||||
getSelectedRowCount: function() {
|
||||
return _this.root_.querySelectorAll(strings.ROW_SELECTED_SELECTOR)
|
||||
.length;
|
||||
},
|
||||
isCheckboxAtRowIndexChecked: function(rowIndex) {
|
||||
return _this.rowCheckboxList_[rowIndex].checked;
|
||||
},
|
||||
isHeaderRowCheckboxChecked: function() {
|
||||
return _this.headerRowCheckbox_.checked;
|
||||
},
|
||||
isRowsSelectable: function() {
|
||||
return !!_this.root_.querySelector(strings.ROW_CHECKBOX_SELECTOR);
|
||||
},
|
||||
notifyRowSelectionChanged: function(data) {
|
||||
_this.emit(
|
||||
events.ROW_SELECTION_CHANGED,
|
||||
{
|
||||
row: _this.getRowByIndex_(data.rowIndex),
|
||||
rowId: _this.getRowIdByIndex_(data.rowIndex),
|
||||
rowIndex: data.rowIndex,
|
||||
selected: data.selected,
|
||||
},
|
||||
/** shouldBubble */ true
|
||||
);
|
||||
},
|
||||
notifySelectedAll: function() {
|
||||
return _this.emit(events.SELECTED_ALL, {}, /** shouldBubble */ true);
|
||||
},
|
||||
notifyUnselectedAll: function() {
|
||||
return _this.emit(events.UNSELECTED_ALL, {}, /** shouldBubble */ true);
|
||||
},
|
||||
registerHeaderRowCheckbox: function() {
|
||||
if (_this.headerRowCheckbox_) {
|
||||
_this.headerRowCheckbox_.destroy();
|
||||
}
|
||||
var checkboxEl = _this.root_.querySelector(
|
||||
strings.HEADER_ROW_CHECKBOX_SELECTOR
|
||||
);
|
||||
_this.headerRowCheckbox_ = _this.checkboxFactory_(checkboxEl);
|
||||
},
|
||||
registerRowCheckboxes: function() {
|
||||
if (_this.rowCheckboxList_) {
|
||||
_this.rowCheckboxList_.forEach(function(checkbox) {
|
||||
return checkbox.destroy();
|
||||
});
|
||||
}
|
||||
_this.rowCheckboxList_ = [];
|
||||
_this.getRows().forEach(function(rowEl) {
|
||||
var checkbox = _this.checkboxFactory_(
|
||||
rowEl.querySelector(strings.ROW_CHECKBOX_SELECTOR)
|
||||
);
|
||||
_this.rowCheckboxList_.push(checkbox);
|
||||
});
|
||||
},
|
||||
removeClassAtRowIndex: function(rowIndex, className) {
|
||||
_this.getRows()[rowIndex].classList.remove(className);
|
||||
},
|
||||
setAttributeAtRowIndex: function(rowIndex, attr, value) {
|
||||
_this.getRows()[rowIndex].setAttribute(attr, value);
|
||||
},
|
||||
setHeaderRowCheckboxChecked: function(checked) {
|
||||
_this.headerRowCheckbox_.checked = checked;
|
||||
},
|
||||
setHeaderRowCheckboxIndeterminate: function(indeterminate) {
|
||||
_this.headerRowCheckbox_.indeterminate = indeterminate;
|
||||
},
|
||||
setRowCheckboxCheckedAtIndex: function(rowIndex, checked) {
|
||||
_this.rowCheckboxList_[rowIndex].checked = checked;
|
||||
},
|
||||
};
|
||||
return new MDCDataTableFoundation(adapter);
|
||||
};
|
||||
MDCDataTable.prototype.getRowByIndex_ = function(index) {
|
||||
return this.getRows()[index];
|
||||
};
|
||||
MDCDataTable.prototype.getRowIdByIndex_ = function(index) {
|
||||
return this.getRowByIndex_(index).getAttribute(strings.DATA_ROW_ID_ATTR);
|
||||
};
|
||||
return MDCDataTable;
|
||||
})(MDCComponent);
|
||||
export { MDCDataTable };
|
||||
//# sourceMappingURL=component.js.map
|
||||
File diff suppressed because one or more lines are too long
@ -1,209 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import { MDCComponent } from "@material/base/component";
|
||||
import { SpecificEventListener } from "@material/base/types";
|
||||
import { MDCCheckbox, MDCCheckboxFactory } from "@material/checkbox/component";
|
||||
import { closest } from "@material/dom/ponyfill";
|
||||
import { MDCDataTableAdapter } from "./adapter";
|
||||
import { cssClasses, events, strings } from "./constants";
|
||||
import { MDCDataTableFoundation } from "./foundation";
|
||||
import { MDCDataTableRowSelectionChangedEventDetail } from "./types";
|
||||
|
||||
export class MDCDataTable extends MDCComponent<MDCDataTableFoundation> {
|
||||
static attachTo(root: Element): MDCDataTable {
|
||||
return new MDCDataTable(root);
|
||||
}
|
||||
|
||||
private headerRowCheckbox_!: MDCCheckbox;
|
||||
private rowCheckboxList_!: MDCCheckbox[];
|
||||
private checkboxFactory_!: MDCCheckboxFactory;
|
||||
private headerRow_!: HTMLElement;
|
||||
private content_!: HTMLElement;
|
||||
private handleHeaderRowCheckboxChange_!: SpecificEventListener<"change">;
|
||||
private handleRowCheckboxChange_!: SpecificEventListener<"change">;
|
||||
|
||||
initialize(
|
||||
checkboxFactory: MDCCheckboxFactory = (el: Element) => new MDCCheckbox(el)
|
||||
) {
|
||||
this.checkboxFactory_ = checkboxFactory;
|
||||
}
|
||||
|
||||
initialSyncWithDOM() {
|
||||
this.headerRow_ = this.root_.querySelector(
|
||||
`.${cssClasses.HEADER_ROW}`
|
||||
) as HTMLElement;
|
||||
this.handleHeaderRowCheckboxChange_ = () =>
|
||||
this.foundation_.handleHeaderRowCheckboxChange();
|
||||
this.headerRow_.addEventListener(
|
||||
"change",
|
||||
this.handleHeaderRowCheckboxChange_
|
||||
);
|
||||
|
||||
this.content_ = this.root_.querySelector(
|
||||
`.${cssClasses.CONTENT}`
|
||||
) as HTMLElement;
|
||||
this.handleRowCheckboxChange_ = (event) =>
|
||||
this.foundation_.handleRowCheckboxChange(event);
|
||||
this.content_.addEventListener("change", this.handleRowCheckboxChange_);
|
||||
|
||||
this.layout();
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
|
||||
*/
|
||||
layout() {
|
||||
this.foundation_.layout();
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Returns array of row elements.
|
||||
*/
|
||||
getRows(): Element[] {
|
||||
return this.foundation_.getRows();
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Returns array of selected row ids.
|
||||
*/
|
||||
getSelectedRowIds(): Array<string | null> {
|
||||
return this.foundation_.getSelectedRowIds();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets selected row ids. Overwrites previously selected rows.
|
||||
* @param rowIds Array of row ids that needs to be selected.
|
||||
*/
|
||||
setSelectedRowIds(rowIds: string[]) {
|
||||
this.foundation_.setSelectedRowIds(rowIds);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.headerRow_.removeEventListener(
|
||||
"change",
|
||||
this.handleHeaderRowCheckboxChange_
|
||||
);
|
||||
this.content_.removeEventListener("change", this.handleRowCheckboxChange_);
|
||||
|
||||
this.headerRowCheckbox_.destroy();
|
||||
this.rowCheckboxList_.forEach((checkbox) => checkbox.destroy());
|
||||
}
|
||||
|
||||
getDefaultFoundation() {
|
||||
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
|
||||
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
|
||||
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
|
||||
const adapter: MDCDataTableAdapter = {
|
||||
addClassAtRowIndex: (rowIndex: number, className: string) =>
|
||||
this.getRows()[rowIndex].classList.add(className),
|
||||
getRowCount: () => this.getRows().length,
|
||||
getRowElements: () =>
|
||||
[].slice.call(this.root_.querySelectorAll(strings.ROW_SELECTOR)),
|
||||
getRowIdAtIndex: (rowIndex: number) =>
|
||||
this.getRows()[rowIndex].getAttribute(strings.DATA_ROW_ID_ATTR),
|
||||
getRowIndexByChildElement: (el: Element) => {
|
||||
return this.getRows().indexOf(closest(
|
||||
el,
|
||||
strings.ROW_SELECTOR
|
||||
) as HTMLElement);
|
||||
},
|
||||
getSelectedRowCount: () =>
|
||||
this.root_.querySelectorAll(strings.ROW_SELECTED_SELECTOR).length,
|
||||
isCheckboxAtRowIndexChecked: (rowIndex: number) =>
|
||||
this.rowCheckboxList_[rowIndex].checked,
|
||||
isHeaderRowCheckboxChecked: () => this.headerRowCheckbox_.checked,
|
||||
isRowsSelectable: () =>
|
||||
!!this.root_.querySelector(strings.ROW_CHECKBOX_SELECTOR),
|
||||
notifyRowSelectionChanged: (
|
||||
data: MDCDataTableRowSelectionChangedEventDetail
|
||||
) => {
|
||||
this.emit(
|
||||
events.ROW_SELECTION_CHANGED,
|
||||
{
|
||||
row: this.getRowByIndex_(data.rowIndex),
|
||||
rowId: this.getRowIdByIndex_(data.rowIndex),
|
||||
rowIndex: data.rowIndex,
|
||||
selected: data.selected,
|
||||
},
|
||||
/** shouldBubble */ true
|
||||
);
|
||||
},
|
||||
notifySelectedAll: () =>
|
||||
this.emit(events.SELECTED_ALL, {}, /** shouldBubble */ true),
|
||||
notifyUnselectedAll: () =>
|
||||
this.emit(events.UNSELECTED_ALL, {}, /** shouldBubble */ true),
|
||||
registerHeaderRowCheckbox: () => {
|
||||
if (this.headerRowCheckbox_) {
|
||||
this.headerRowCheckbox_.destroy();
|
||||
}
|
||||
|
||||
const checkboxEl = this.root_.querySelector(
|
||||
strings.HEADER_ROW_CHECKBOX_SELECTOR
|
||||
) as HTMLElement;
|
||||
this.headerRowCheckbox_ = this.checkboxFactory_(checkboxEl);
|
||||
},
|
||||
registerRowCheckboxes: () => {
|
||||
if (this.rowCheckboxList_) {
|
||||
this.rowCheckboxList_.forEach((checkbox) => checkbox.destroy());
|
||||
}
|
||||
|
||||
this.rowCheckboxList_ = [];
|
||||
this.getRows().forEach((rowEl) => {
|
||||
const checkbox = this.checkboxFactory_(rowEl.querySelector(
|
||||
strings.ROW_CHECKBOX_SELECTOR
|
||||
) as HTMLElement);
|
||||
this.rowCheckboxList_.push(checkbox);
|
||||
});
|
||||
},
|
||||
removeClassAtRowIndex: (rowIndex: number, className: string) => {
|
||||
this.getRows()[rowIndex].classList.remove(className);
|
||||
},
|
||||
setAttributeAtRowIndex: (
|
||||
rowIndex: number,
|
||||
attr: string,
|
||||
value: string
|
||||
) => {
|
||||
this.getRows()[rowIndex].setAttribute(attr, value);
|
||||
},
|
||||
setHeaderRowCheckboxChecked: (checked: boolean) => {
|
||||
this.headerRowCheckbox_.checked = checked;
|
||||
},
|
||||
setHeaderRowCheckboxIndeterminate: (indeterminate: boolean) => {
|
||||
this.headerRowCheckbox_.indeterminate = indeterminate;
|
||||
},
|
||||
setRowCheckboxCheckedAtIndex: (rowIndex: number, checked: boolean) => {
|
||||
this.rowCheckboxList_[rowIndex].checked = checked;
|
||||
},
|
||||
};
|
||||
return new MDCDataTableFoundation(adapter);
|
||||
}
|
||||
|
||||
private getRowByIndex_(index: number): Element {
|
||||
return this.getRows()[index];
|
||||
}
|
||||
|
||||
private getRowIdByIndex_(index: number): string | null {
|
||||
return this.getRowByIndex_(index).getAttribute(strings.DATA_ROW_ID_ATTR);
|
||||
}
|
||||
}
|
||||
46
mdc-data-table/constants.d.ts
vendored
46
mdc-data-table/constants.d.ts
vendored
@ -1,46 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
export declare const cssClasses: {
|
||||
CELL: string;
|
||||
CELL_NUMERIC: string;
|
||||
CONTENT: string;
|
||||
HEADER_ROW: string;
|
||||
HEADER_ROW_CHECKBOX: string;
|
||||
ROOT: string;
|
||||
ROW: string;
|
||||
ROW_CHECKBOX: string;
|
||||
ROW_SELECTED: string;
|
||||
};
|
||||
export declare const strings: {
|
||||
ARIA_SELECTED: string;
|
||||
DATA_ROW_ID_ATTR: string;
|
||||
HEADER_ROW_CHECKBOX_SELECTOR: string;
|
||||
ROW_CHECKBOX_SELECTOR: string;
|
||||
ROW_SELECTED_SELECTOR: string;
|
||||
ROW_SELECTOR: string;
|
||||
};
|
||||
export declare const events: {
|
||||
ROW_SELECTION_CHANGED: string;
|
||||
SELECTED_ALL: string;
|
||||
UNSELECTED_ALL: string;
|
||||
};
|
||||
@ -1,47 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
export var cssClasses = {
|
||||
CELL: "mdc-data-table__cell",
|
||||
CELL_NUMERIC: "mdc-data-table__cell--numeric",
|
||||
CONTENT: "mdc-data-table__content",
|
||||
HEADER_ROW: "mdc-data-table__header-row",
|
||||
HEADER_ROW_CHECKBOX: "mdc-data-table__header-row-checkbox",
|
||||
ROOT: "mdc-data-table",
|
||||
ROW: "mdc-data-table__row",
|
||||
ROW_CHECKBOX: "mdc-data-table__row-checkbox",
|
||||
ROW_SELECTED: "mdc-data-table__row--selected",
|
||||
};
|
||||
export var strings = {
|
||||
ARIA_SELECTED: "aria-selected",
|
||||
DATA_ROW_ID_ATTR: "data-row-id",
|
||||
HEADER_ROW_CHECKBOX_SELECTOR: "." + cssClasses.HEADER_ROW_CHECKBOX,
|
||||
ROW_CHECKBOX_SELECTOR: "." + cssClasses.ROW_CHECKBOX,
|
||||
ROW_SELECTED_SELECTOR: "." + cssClasses.ROW_SELECTED,
|
||||
ROW_SELECTOR: "." + cssClasses.ROW,
|
||||
};
|
||||
export var events = {
|
||||
ROW_SELECTION_CHANGED: "MDCDataTable:rowSelectionChanged",
|
||||
SELECTED_ALL: "MDCDataTable:selectedAll",
|
||||
UNSELECTED_ALL: "MDCDataTable:unselectedAll",
|
||||
};
|
||||
//# sourceMappingURL=constants.js.map
|
||||
@ -1 +0,0 @@
|
||||
{"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,IAAM,UAAU,GAAG;IACxB,IAAI,EAAE,sBAAsB;IAC5B,YAAY,EAAE,+BAA+B;IAC7C,OAAO,EAAE,yBAAyB;IAClC,UAAU,EAAE,4BAA4B;IACxC,mBAAmB,EAAE,qCAAqC;IAC1D,IAAI,EAAE,gBAAgB;IACtB,GAAG,EAAE,qBAAqB;IAC1B,YAAY,EAAE,8BAA8B;IAC5C,YAAY,EAAE,+BAA+B;CAC9C,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG;IACrB,aAAa,EAAE,eAAe;IAC9B,gBAAgB,EAAE,aAAa;IAC/B,4BAA4B,EAAE,MAAI,UAAU,CAAC,mBAAqB;IAClE,qBAAqB,EAAE,MAAI,UAAU,CAAC,YAAc;IACpD,qBAAqB,EAAE,MAAI,UAAU,CAAC,YAAc;IACpD,YAAY,EAAE,MAAI,UAAU,CAAC,GAAK;CACnC,CAAC;AAEF,MAAM,CAAC,IAAM,MAAM,GAAG;IACpB,qBAAqB,EAAE,kCAAkC;IACzD,YAAY,EAAE,0BAA0B;IACxC,cAAc,EAAE,4BAA4B;CAC7C,CAAC"}
|
||||
@ -1,49 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
export const cssClasses = {
|
||||
CELL: "mdc-data-table__cell",
|
||||
CELL_NUMERIC: "mdc-data-table__cell--numeric",
|
||||
CONTENT: "mdc-data-table__content",
|
||||
HEADER_ROW: "mdc-data-table__header-row",
|
||||
HEADER_ROW_CHECKBOX: "mdc-data-table__header-row-checkbox",
|
||||
ROOT: "mdc-data-table",
|
||||
ROW: "mdc-data-table__row",
|
||||
ROW_CHECKBOX: "mdc-data-table__row-checkbox",
|
||||
ROW_SELECTED: "mdc-data-table__row--selected",
|
||||
};
|
||||
|
||||
export const strings = {
|
||||
ARIA_SELECTED: "aria-selected",
|
||||
DATA_ROW_ID_ATTR: "data-row-id",
|
||||
HEADER_ROW_CHECKBOX_SELECTOR: `.${cssClasses.HEADER_ROW_CHECKBOX}`,
|
||||
ROW_CHECKBOX_SELECTOR: `.${cssClasses.ROW_CHECKBOX}`,
|
||||
ROW_SELECTED_SELECTOR: `.${cssClasses.ROW_SELECTED}`,
|
||||
ROW_SELECTOR: `.${cssClasses.ROW}`,
|
||||
};
|
||||
|
||||
export const events = {
|
||||
ROW_SELECTION_CHANGED: "MDCDataTable:rowSelectionChanged",
|
||||
SELECTED_ALL: "MDCDataTable:selectedAll",
|
||||
UNSELECTED_ALL: "MDCDataTable:unselectedAll",
|
||||
};
|
||||
69
mdc-data-table/foundation.d.ts
vendored
69
mdc-data-table/foundation.d.ts
vendored
@ -1,69 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
import { MDCFoundation } from "@material/base/foundation";
|
||||
import { MDCDataTableAdapter } from "./adapter";
|
||||
export declare class MDCDataTableFoundation extends MDCFoundation<
|
||||
MDCDataTableAdapter
|
||||
> {
|
||||
static readonly defaultAdapter: MDCDataTableAdapter;
|
||||
constructor(adapter?: Partial<MDCDataTableAdapter>);
|
||||
/**
|
||||
* Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
|
||||
* Use this if registering checkbox is synchronous.
|
||||
*/
|
||||
layout(): void;
|
||||
/**
|
||||
* Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
|
||||
* Use this if registering checkbox is asynchronous.
|
||||
*/
|
||||
layoutAsync(): Promise<void>;
|
||||
/**
|
||||
* @return Returns array of row elements.
|
||||
*/
|
||||
getRows(): Element[];
|
||||
/**
|
||||
* Sets selected row ids. Overwrites previously selected rows.
|
||||
* @param rowIds Array of row ids that needs to be selected.
|
||||
*/
|
||||
setSelectedRowIds(rowIds: string[]): void;
|
||||
/**
|
||||
* @return Returns array of selected row ids.
|
||||
*/
|
||||
getSelectedRowIds(): Array<string | null>;
|
||||
/**
|
||||
* Handles header row checkbox change event.
|
||||
*/
|
||||
handleHeaderRowCheckboxChange(): void;
|
||||
/**
|
||||
* Handles change event originated from row checkboxes.
|
||||
*/
|
||||
handleRowCheckboxChange(event: Event): void;
|
||||
/**
|
||||
* Updates header row checkbox state based on number of rows selected.
|
||||
*/
|
||||
private setHeaderRowCheckboxState_;
|
||||
/**
|
||||
* Sets the attributes of row element based on selection state.
|
||||
*/
|
||||
private selectRowAtIndex_;
|
||||
}
|
||||
244
mdc-data-table/foundation.js
vendored
244
mdc-data-table/foundation.js
vendored
@ -1,244 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
import * as tslib_1 from "tslib";
|
||||
import { MDCFoundation } from "@material/base/foundation";
|
||||
import { cssClasses, strings } from "./constants";
|
||||
var MDCDataTableFoundation = /** @class */ (function(_super) {
|
||||
tslib_1.__extends(MDCDataTableFoundation, _super);
|
||||
function MDCDataTableFoundation(adapter) {
|
||||
return (
|
||||
_super.call(
|
||||
this,
|
||||
tslib_1.__assign({}, MDCDataTableFoundation.defaultAdapter, adapter)
|
||||
) || this
|
||||
);
|
||||
}
|
||||
Object.defineProperty(MDCDataTableFoundation, "defaultAdapter", {
|
||||
get: function() {
|
||||
return {
|
||||
addClassAtRowIndex: function() {
|
||||
return undefined;
|
||||
},
|
||||
getRowCount: function() {
|
||||
return 0;
|
||||
},
|
||||
getRowElements: function() {
|
||||
return [];
|
||||
},
|
||||
getRowIdAtIndex: function() {
|
||||
return "";
|
||||
},
|
||||
getRowIndexByChildElement: function() {
|
||||
return 0;
|
||||
},
|
||||
getSelectedRowCount: function() {
|
||||
return 0;
|
||||
},
|
||||
isCheckboxAtRowIndexChecked: function() {
|
||||
return false;
|
||||
},
|
||||
isHeaderRowCheckboxChecked: function() {
|
||||
return false;
|
||||
},
|
||||
isRowsSelectable: function() {
|
||||
return false;
|
||||
},
|
||||
notifyRowSelectionChanged: function() {
|
||||
return undefined;
|
||||
},
|
||||
notifySelectedAll: function() {
|
||||
return undefined;
|
||||
},
|
||||
notifyUnselectedAll: function() {
|
||||
return undefined;
|
||||
},
|
||||
registerHeaderRowCheckbox: function() {
|
||||
return undefined;
|
||||
},
|
||||
registerRowCheckboxes: function() {
|
||||
return undefined;
|
||||
},
|
||||
removeClassAtRowIndex: function() {
|
||||
return undefined;
|
||||
},
|
||||
setAttributeAtRowIndex: function() {
|
||||
return undefined;
|
||||
},
|
||||
setHeaderRowCheckboxChecked: function() {
|
||||
return undefined;
|
||||
},
|
||||
setHeaderRowCheckboxIndeterminate: function() {
|
||||
return undefined;
|
||||
},
|
||||
setRowCheckboxCheckedAtIndex: function() {
|
||||
return undefined;
|
||||
},
|
||||
};
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
});
|
||||
/**
|
||||
* Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
|
||||
* Use this if registering checkbox is synchronous.
|
||||
*/
|
||||
MDCDataTableFoundation.prototype.layout = function() {
|
||||
if (this.adapter_.isRowsSelectable()) {
|
||||
this.adapter_.registerHeaderRowCheckbox();
|
||||
this.adapter_.registerRowCheckboxes();
|
||||
this.setHeaderRowCheckboxState_();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
|
||||
* Use this if registering checkbox is asynchronous.
|
||||
*/
|
||||
MDCDataTableFoundation.prototype.layoutAsync = function() {
|
||||
return tslib_1.__awaiter(this, void 0, void 0, function() {
|
||||
return tslib_1.__generator(this, function(_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
if (!this.adapter_.isRowsSelectable()) return [3 /*break*/, 3];
|
||||
return [4 /*yield*/, this.adapter_.registerHeaderRowCheckbox()];
|
||||
case 1:
|
||||
_a.sent();
|
||||
return [4 /*yield*/, this.adapter_.registerRowCheckboxes()];
|
||||
case 2:
|
||||
_a.sent();
|
||||
this.setHeaderRowCheckboxState_();
|
||||
_a.label = 3;
|
||||
case 3:
|
||||
return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
/**
|
||||
* @return Returns array of row elements.
|
||||
*/
|
||||
MDCDataTableFoundation.prototype.getRows = function() {
|
||||
return this.adapter_.getRowElements();
|
||||
};
|
||||
/**
|
||||
* Sets selected row ids. Overwrites previously selected rows.
|
||||
* @param rowIds Array of row ids that needs to be selected.
|
||||
*/
|
||||
MDCDataTableFoundation.prototype.setSelectedRowIds = function(rowIds) {
|
||||
for (var rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
|
||||
var rowId = this.adapter_.getRowIdAtIndex(rowIndex);
|
||||
var isSelected = false;
|
||||
if (rowId && rowIds.indexOf(rowId) >= 0) {
|
||||
isSelected = true;
|
||||
}
|
||||
this.adapter_.setRowCheckboxCheckedAtIndex(rowIndex, isSelected);
|
||||
this.selectRowAtIndex_(rowIndex, isSelected);
|
||||
}
|
||||
this.setHeaderRowCheckboxState_();
|
||||
};
|
||||
/**
|
||||
* @return Returns array of selected row ids.
|
||||
*/
|
||||
MDCDataTableFoundation.prototype.getSelectedRowIds = function() {
|
||||
var selectedRowIds = [];
|
||||
for (var rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
|
||||
if (this.adapter_.isCheckboxAtRowIndexChecked(rowIndex)) {
|
||||
selectedRowIds.push(this.adapter_.getRowIdAtIndex(rowIndex));
|
||||
}
|
||||
}
|
||||
return selectedRowIds;
|
||||
};
|
||||
/**
|
||||
* Handles header row checkbox change event.
|
||||
*/
|
||||
MDCDataTableFoundation.prototype.handleHeaderRowCheckboxChange = function() {
|
||||
var isHeaderChecked = this.adapter_.isHeaderRowCheckboxChecked();
|
||||
for (var rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
|
||||
this.adapter_.setRowCheckboxCheckedAtIndex(rowIndex, isHeaderChecked);
|
||||
this.selectRowAtIndex_(rowIndex, isHeaderChecked);
|
||||
}
|
||||
if (isHeaderChecked) {
|
||||
this.adapter_.notifySelectedAll();
|
||||
} else {
|
||||
this.adapter_.notifyUnselectedAll();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Handles change event originated from row checkboxes.
|
||||
*/
|
||||
MDCDataTableFoundation.prototype.handleRowCheckboxChange = function(event) {
|
||||
var rowIndex = this.adapter_.getRowIndexByChildElement(event.target);
|
||||
if (rowIndex === -1) {
|
||||
return;
|
||||
}
|
||||
var selected = this.adapter_.isCheckboxAtRowIndexChecked(rowIndex);
|
||||
this.selectRowAtIndex_(rowIndex, selected);
|
||||
this.setHeaderRowCheckboxState_();
|
||||
var rowId = this.adapter_.getRowIdAtIndex(rowIndex);
|
||||
this.adapter_.notifyRowSelectionChanged({
|
||||
rowId: rowId,
|
||||
rowIndex: rowIndex,
|
||||
selected: selected,
|
||||
});
|
||||
};
|
||||
/**
|
||||
* Updates header row checkbox state based on number of rows selected.
|
||||
*/
|
||||
MDCDataTableFoundation.prototype.setHeaderRowCheckboxState_ = function() {
|
||||
if (this.adapter_.getSelectedRowCount() === this.adapter_.getRowCount()) {
|
||||
this.adapter_.setHeaderRowCheckboxChecked(true);
|
||||
this.adapter_.setHeaderRowCheckboxIndeterminate(false);
|
||||
} else if (this.adapter_.getSelectedRowCount() === 0) {
|
||||
this.adapter_.setHeaderRowCheckboxIndeterminate(false);
|
||||
this.adapter_.setHeaderRowCheckboxChecked(false);
|
||||
} else {
|
||||
this.adapter_.setHeaderRowCheckboxIndeterminate(true);
|
||||
this.adapter_.setHeaderRowCheckboxChecked(false);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Sets the attributes of row element based on selection state.
|
||||
*/
|
||||
MDCDataTableFoundation.prototype.selectRowAtIndex_ = function(
|
||||
rowIndex,
|
||||
selected
|
||||
) {
|
||||
if (selected) {
|
||||
this.adapter_.addClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);
|
||||
this.adapter_.setAttributeAtRowIndex(
|
||||
rowIndex,
|
||||
strings.ARIA_SELECTED,
|
||||
"true"
|
||||
);
|
||||
} else {
|
||||
this.adapter_.removeClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);
|
||||
this.adapter_.setAttributeAtRowIndex(
|
||||
rowIndex,
|
||||
strings.ARIA_SELECTED,
|
||||
"false"
|
||||
);
|
||||
}
|
||||
};
|
||||
return MDCDataTableFoundation;
|
||||
})(MDCFoundation);
|
||||
export { MDCDataTableFoundation };
|
||||
//# sourceMappingURL=foundation.js.map
|
||||
@ -1 +0,0 @@
|
||||
{"version":3,"file":"foundation.js","sourceRoot":"","sources":["foundation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAC,UAAU,EAAE,OAAO,EAAC,MAAM,aAAa,CAAC;AAEhD;IAA4C,kDAAkC;IAyB5E,gCAAY,OAAsC;eAChD,uCAAU,sBAAsB,CAAC,cAAc,EAAK,OAAO,EAAE;IAC/D,CAAC;IA1BD,sBAAW,wCAAc;aAAzB;YACE,OAAO;gBACL,kBAAkB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBACnC,WAAW,EAAE,cAAM,OAAA,CAAC,EAAD,CAAC;gBACpB,cAAc,EAAE,cAAM,OAAA,EAAE,EAAF,CAAE;gBACxB,eAAe,EAAE,cAAM,OAAA,EAAE,EAAF,CAAE;gBACzB,yBAAyB,EAAE,cAAM,OAAA,CAAC,EAAD,CAAC;gBAClC,mBAAmB,EAAE,cAAM,OAAA,CAAC,EAAD,CAAC;gBAC5B,2BAA2B,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;gBACxC,0BAA0B,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;gBACvC,gBAAgB,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;gBAC7B,yBAAyB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAC1C,iBAAiB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAClC,mBAAmB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBACpC,yBAAyB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAC1C,qBAAqB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBACtC,qBAAqB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBACtC,sBAAsB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBACvC,2BAA2B,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAC5C,iCAAiC,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAClD,4BAA4B,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;aAC9C,CAAC;QACJ,CAAC;;;OAAA;IAMD;;;OAGG;IACH,uCAAM,GAAN;QACE,IAAI,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,CAAC,yBAAyB,EAAE,CAAC;YAC1C,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC;YAEtC,IAAI,CAAC,0BAA0B,EAAE,CAAC;SACnC;IACH,CAAC;IAED;;;OAGG;IACG,4CAAW,GAAjB;;;;;6BACM,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,EAAhC,wBAAgC;wBAClC,qBAAM,IAAI,CAAC,QAAQ,CAAC,yBAAyB,EAAE,EAAA;;wBAA/C,SAA+C,CAAC;wBAChD,qBAAM,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,EAAA;;wBAA3C,SAA2C,CAAC;wBAE5C,IAAI,CAAC,0BAA0B,EAAE,CAAC;;;;;;KAErC;IAED;;OAEG;IACH,wCAAO,GAAP;QACE,OAAO,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC;IACxC,CAAC;IAED;;;OAGG;IACH,kDAAiB,GAAjB,UAAkB,MAAgB;QAChC,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,EAAE;YACzE,IAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;YAEtD,IAAI,UAAU,GAAG,KAAK,CAAC;YACvB,IAAI,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;gBACvC,UAAU,GAAG,IAAI,CAAC;aACnB;YAED,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;YACjE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;SAC9C;QAED,IAAI,CAAC,0BAA0B,EAAE,CAAC;IACpC,CAAC;IAED;;OAEG;IACH,kDAAiB,GAAjB;QACE,IAAM,cAAc,GAAuB,EAAE,CAAC;QAC9C,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,EAAE;YACzE,IAAI,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,QAAQ,CAAC,EAAE;gBACvD,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;aAC9D;SACF;QAED,OAAO,cAAc,CAAC;IACxB,CAAC;IAED;;OAEG;IACH,8DAA6B,GAA7B;QACE,IAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,0BAA0B,EAAE,CAAC;QAEnE,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,EAAE;YACzE,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;YACtE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;SACnD;QAED,IAAI,eAAe,EAAE;YACnB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC;SACnC;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC;SACrC;IACH,CAAC;IAED;;OAEG;IACH,wDAAuB,GAAvB,UAAwB,KAAY;QAClC,IAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,KAAK,CAAC,MAA0B,CAAC,CAAC;QAE3F,IAAI,QAAQ,KAAK,CAAC,CAAC,EAAE;YACnB,OAAO;SACR;QAED,IAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,QAAQ,CAAC,CAAC;QAErE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC3C,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAElC,IAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QACtD,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,EAAC,KAAK,OAAA,EAAE,QAAQ,UAAA,EAAE,QAAQ,UAAA,EAAC,CAAC,CAAC;IACvE,CAAC;IAED;;OAEG;IACK,2DAA0B,GAAlC;QACE,IAAI,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,KAAK,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE;YACvE,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;YAChD,IAAI,CAAC,QAAQ,CAAC,iCAAiC,CAAC,KAAK,CAAC,CAAC;SACxD;aAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,KAAK,CAAC,EAAE;YACpD,IAAI,CAAC,QAAQ,CAAC,iCAAiC,CAAC,KAAK,CAAC,CAAC;YACvD,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;SAClD;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,iCAAiC,CAAC,IAAI,CAAC,CAAC;YACtD,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;SAClD;IACH,CAAC;IAED;;OAEG;IACK,kDAAiB,GAAzB,UAA0B,QAAgB,EAAE,QAAiB;QAC3D,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,QAAQ,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;YACpE,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;SAC/E;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;YACvE,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;SAChF;IACH,CAAC;IACH,6BAAC;AAAD,CAAC,AAjKD,CAA4C,aAAa,GAiKxD"}
|
||||
@ -1,199 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import { MDCFoundation } from "@material/base/foundation";
|
||||
import { MDCDataTableAdapter } from "./adapter";
|
||||
import { cssClasses, strings } from "./constants";
|
||||
|
||||
export class MDCDataTableFoundation extends MDCFoundation<MDCDataTableAdapter> {
|
||||
static get defaultAdapter(): MDCDataTableAdapter {
|
||||
return {
|
||||
addClassAtRowIndex: () => undefined,
|
||||
getRowCount: () => 0,
|
||||
getRowElements: () => [],
|
||||
getRowIdAtIndex: () => "",
|
||||
getRowIndexByChildElement: () => 0,
|
||||
getSelectedRowCount: () => 0,
|
||||
isCheckboxAtRowIndexChecked: () => false,
|
||||
isHeaderRowCheckboxChecked: () => false,
|
||||
isRowsSelectable: () => false,
|
||||
notifyRowSelectionChanged: () => undefined,
|
||||
notifySelectedAll: () => undefined,
|
||||
notifyUnselectedAll: () => undefined,
|
||||
registerHeaderRowCheckbox: () => undefined,
|
||||
registerRowCheckboxes: () => undefined,
|
||||
removeClassAtRowIndex: () => undefined,
|
||||
setAttributeAtRowIndex: () => undefined,
|
||||
setHeaderRowCheckboxChecked: () => undefined,
|
||||
setHeaderRowCheckboxIndeterminate: () => undefined,
|
||||
setRowCheckboxCheckedAtIndex: () => undefined,
|
||||
};
|
||||
}
|
||||
|
||||
constructor(adapter?: Partial<MDCDataTableAdapter>) {
|
||||
super({ ...MDCDataTableFoundation.defaultAdapter, ...adapter });
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
|
||||
* Use this if registering checkbox is synchronous.
|
||||
*/
|
||||
layout() {
|
||||
if (this.adapter_.isRowsSelectable()) {
|
||||
this.adapter_.registerHeaderRowCheckbox();
|
||||
this.adapter_.registerRowCheckboxes();
|
||||
|
||||
this.setHeaderRowCheckboxState_();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
|
||||
* Use this if registering checkbox is asynchronous.
|
||||
*/
|
||||
async layoutAsync(): Promise<void> {
|
||||
if (this.adapter_.isRowsSelectable()) {
|
||||
await this.adapter_.registerHeaderRowCheckbox();
|
||||
await this.adapter_.registerRowCheckboxes();
|
||||
|
||||
this.setHeaderRowCheckboxState_();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Returns array of row elements.
|
||||
*/
|
||||
getRows(): Element[] {
|
||||
return this.adapter_.getRowElements();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets selected row ids. Overwrites previously selected rows.
|
||||
* @param rowIds Array of row ids that needs to be selected.
|
||||
*/
|
||||
setSelectedRowIds(rowIds: string[]) {
|
||||
for (let rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
|
||||
const rowId = this.adapter_.getRowIdAtIndex(rowIndex);
|
||||
|
||||
let isSelected = false;
|
||||
if (rowId && rowIds.indexOf(rowId) >= 0) {
|
||||
isSelected = true;
|
||||
}
|
||||
|
||||
this.adapter_.setRowCheckboxCheckedAtIndex(rowIndex, isSelected);
|
||||
this.selectRowAtIndex_(rowIndex, isSelected);
|
||||
}
|
||||
|
||||
this.setHeaderRowCheckboxState_();
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Returns array of selected row ids.
|
||||
*/
|
||||
getSelectedRowIds(): Array<string | null> {
|
||||
const selectedRowIds: Array<string | null> = [];
|
||||
for (let rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
|
||||
if (this.adapter_.isCheckboxAtRowIndexChecked(rowIndex)) {
|
||||
selectedRowIds.push(this.adapter_.getRowIdAtIndex(rowIndex));
|
||||
}
|
||||
}
|
||||
|
||||
return selectedRowIds;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles header row checkbox change event.
|
||||
*/
|
||||
handleHeaderRowCheckboxChange() {
|
||||
const isHeaderChecked = this.adapter_.isHeaderRowCheckboxChecked();
|
||||
|
||||
for (let rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
|
||||
this.adapter_.setRowCheckboxCheckedAtIndex(rowIndex, isHeaderChecked);
|
||||
this.selectRowAtIndex_(rowIndex, isHeaderChecked);
|
||||
}
|
||||
|
||||
if (isHeaderChecked) {
|
||||
this.adapter_.notifySelectedAll();
|
||||
} else {
|
||||
this.adapter_.notifyUnselectedAll();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles change event originated from row checkboxes.
|
||||
*/
|
||||
handleRowCheckboxChange(event: Event) {
|
||||
const rowIndex = this.adapter_.getRowIndexByChildElement(
|
||||
event.target as HTMLInputElement
|
||||
);
|
||||
|
||||
if (rowIndex === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selected = this.adapter_.isCheckboxAtRowIndexChecked(rowIndex);
|
||||
|
||||
this.selectRowAtIndex_(rowIndex, selected);
|
||||
this.setHeaderRowCheckboxState_();
|
||||
|
||||
const rowId = this.adapter_.getRowIdAtIndex(rowIndex);
|
||||
this.adapter_.notifyRowSelectionChanged({ rowId, rowIndex, selected });
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates header row checkbox state based on number of rows selected.
|
||||
*/
|
||||
private setHeaderRowCheckboxState_() {
|
||||
if (this.adapter_.getSelectedRowCount() === this.adapter_.getRowCount()) {
|
||||
this.adapter_.setHeaderRowCheckboxChecked(true);
|
||||
this.adapter_.setHeaderRowCheckboxIndeterminate(false);
|
||||
} else if (this.adapter_.getSelectedRowCount() === 0) {
|
||||
this.adapter_.setHeaderRowCheckboxIndeterminate(false);
|
||||
this.adapter_.setHeaderRowCheckboxChecked(false);
|
||||
} else {
|
||||
this.adapter_.setHeaderRowCheckboxIndeterminate(true);
|
||||
this.adapter_.setHeaderRowCheckboxChecked(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the attributes of row element based on selection state.
|
||||
*/
|
||||
private selectRowAtIndex_(rowIndex: number, selected: boolean) {
|
||||
if (selected) {
|
||||
this.adapter_.addClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);
|
||||
this.adapter_.setAttributeAtRowIndex(
|
||||
rowIndex,
|
||||
strings.ARIA_SELECTED,
|
||||
"true"
|
||||
);
|
||||
} else {
|
||||
this.adapter_.removeClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);
|
||||
this.adapter_.setAttributeAtRowIndex(
|
||||
rowIndex,
|
||||
strings.ARIA_SELECTED,
|
||||
"false"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
27
mdc-data-table/index.d.ts
vendored
27
mdc-data-table/index.d.ts
vendored
@ -1,27 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
export * from "./adapter";
|
||||
export * from "./component";
|
||||
export * from "./foundation";
|
||||
export * from "./constants";
|
||||
export * from "./types";
|
||||
@ -1,26 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
export * from "./component";
|
||||
export * from "./foundation";
|
||||
export * from "./constants";
|
||||
//# sourceMappingURL=index.js.map
|
||||
@ -1 +0,0 @@
|
||||
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}
|
||||
@ -1,28 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
export * from "./adapter";
|
||||
export * from "./component";
|
||||
export * from "./foundation";
|
||||
export * from "./constants";
|
||||
export * from "./types";
|
||||
@ -1,25 +0,0 @@
|
||||
//
|
||||
// Copyright 2019 Google Inc.
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
// of this software and associated documentation files (the "Software"), to deal
|
||||
// in the Software without restriction, including without limitation the rights
|
||||
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
// copies of the Software, and to permit persons to whom the Software is
|
||||
// furnished to do so, subject to the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be included in
|
||||
// all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
// THE SOFTWARE.
|
||||
//
|
||||
|
||||
@import "./mixins";
|
||||
@include mdc-data-table-core-styles;
|
||||
@include mdc-data-table-theme-baseline;
|
||||
@ -1,37 +0,0 @@
|
||||
{
|
||||
"name": "@material/data-table",
|
||||
"version": "3.1.1",
|
||||
"description": "The Material Components Web data table component",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"material components",
|
||||
"material design",
|
||||
"data table"
|
||||
],
|
||||
"main": "dist/mdc.dataTable.js",
|
||||
"module": "index.js",
|
||||
"sideEffects": false,
|
||||
"types": "dist/mdc.dataTable.d.ts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/material-components/material-components-web.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@material/animation": "^3.1.0",
|
||||
"@material/base": "^3.1.0",
|
||||
"@material/checkbox": "^3.1.0",
|
||||
"@material/dom": "^3.1.0",
|
||||
"@material/elevation": "^3.1.0",
|
||||
"@material/feature-targeting": "^3.1.0",
|
||||
"@material/ripple": "^3.1.0",
|
||||
"@material/rtl": "^3.1.0",
|
||||
"@material/shape": "^3.1.0",
|
||||
"@material/theme": "^3.1.0",
|
||||
"@material/typography": "^3.1.0",
|
||||
"tslib": "^1.10.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "4a7d0aa41afb294e54c4aeae56558b1793416074"
|
||||
}
|
||||
27
mdc-data-table/types.d.ts
vendored
27
mdc-data-table/types.d.ts
vendored
@ -1,27 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
export interface MDCDataTableRowSelectionChangedEventDetail {
|
||||
rowIndex: number;
|
||||
rowId: string | null;
|
||||
selected: boolean;
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
//# sourceMappingURL=types.js.map
|
||||
@ -1 +0,0 @@
|
||||
{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG"}
|
||||
@ -1,28 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
export interface MDCDataTableRowSelectionChangedEventDetail {
|
||||
rowIndex: number;
|
||||
rowId: string | null;
|
||||
selected: boolean;
|
||||
}
|
||||
18
package.json
18
package.json
@ -17,12 +17,14 @@
|
||||
"author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/data-table": "^3.1.1",
|
||||
"@material/chips": "^3.2.0",
|
||||
"@material/data-table": "^3.2.0",
|
||||
"@material/mwc-base": "^0.8.0",
|
||||
"@material/mwc-button": "^0.8.0",
|
||||
"@material/mwc-checkbox": "^0.8.0",
|
||||
"@material/mwc-fab": "^0.8.0",
|
||||
"@material/mwc-ripple": "0.8.0",
|
||||
"@material/mwc-ripple": "^0.8.0",
|
||||
"@material/mwc-switch": "^0.8.0",
|
||||
"@mdi/svg": "4.4.95",
|
||||
"@polymer/app-layout": "^3.0.2",
|
||||
"@polymer/app-localize-behavior": "^3.0.1",
|
||||
@ -63,7 +65,6 @@
|
||||
"@polymer/paper-styles": "^3.0.1",
|
||||
"@polymer/paper-tabs": "^3.0.1",
|
||||
"@polymer/paper-toast": "^3.0.1",
|
||||
"@polymer/paper-toggle-button": "^3.0.1",
|
||||
"@polymer/paper-tooltip": "^3.0.1",
|
||||
"@polymer/polymer": "3.1.0",
|
||||
"@thomasloven/round-slider": "^0.2.2",
|
||||
@ -158,18 +159,17 @@
|
||||
"require-dir": "^1.2.0",
|
||||
"sinon": "^7.3.1",
|
||||
"terser-webpack-plugin": "^1.2.3",
|
||||
"ts-loader": "^6.0.4",
|
||||
"ts-loader": "^6.1.1",
|
||||
"ts-mocha": "^6.0.0",
|
||||
"tslint": "^5.14.0",
|
||||
"tslint-config-prettier": "^1.18.0",
|
||||
"tslint-eslint-rules": "^5.4.0",
|
||||
"tslint-plugin-prettier": "^2.0.1",
|
||||
"typescript": "^3.4.1",
|
||||
"uglifyjs-webpack-plugin": "^2.1.2",
|
||||
"typescript": "^3.6.3",
|
||||
"web-component-tester": "^6.9.2",
|
||||
"webpack": "^4.29.6",
|
||||
"webpack-cli": "^3.3.0",
|
||||
"webpack-dev-server": "^3.2.1",
|
||||
"webpack": "^4.40.2",
|
||||
"webpack-cli": "^3.3.9",
|
||||
"webpack-dev-server": "^3.8.1",
|
||||
"webpack-manifest-plugin": "^2.0.4",
|
||||
"workbox-webpack-plugin": "^4.1.1",
|
||||
"workerize-loader": "^1.1.0"
|
||||
|
||||
2
setup.py
2
setup.py
@ -2,7 +2,7 @@ from setuptools import setup, find_packages
|
||||
|
||||
setup(
|
||||
name="home-assistant-frontend",
|
||||
version="20190919.1",
|
||||
version="20191002.0",
|
||||
description="The Home Assistant frontend",
|
||||
url="https://github.com/home-assistant/home-assistant-polymer",
|
||||
author="The Home Assistant Authors",
|
||||
|
||||
@ -2,7 +2,7 @@ import "@polymer/paper-styles/element-styles/paper-material-styles";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import computeStateName from "../common/entity/compute_state_name";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
import { EventsMixin } from "../mixins/events-mixin";
|
||||
import LocalizeMixin from "../mixins/localize-mixin";
|
||||
import { fetchThumbnailUrlWithCache } from "../data/camera";
|
||||
|
||||
@ -6,10 +6,10 @@ import "../components/entity/ha-entity-toggle";
|
||||
import "../components/ha-card";
|
||||
import "../state-summary/state-card-content";
|
||||
|
||||
import computeStateDomain from "../common/entity/compute_state_domain";
|
||||
import computeStateName from "../common/entity/compute_state_name";
|
||||
import stateMoreInfoType from "../common/entity/state_more_info_type";
|
||||
import canToggleState from "../common/entity/can_toggle_state";
|
||||
import { computeStateDomain } from "../common/entity/compute_state_domain";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
import { stateMoreInfoType } from "../common/entity/state_more_info_type";
|
||||
import { canToggleState } from "../common/entity/can_toggle_state";
|
||||
import { EventsMixin } from "../mixins/events-mixin";
|
||||
import LocalizeMixin from "../mixins/localize-mixin";
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "../components/state-history-charts";
|
||||
import "../data/ha-state-history-data";
|
||||
|
||||
import computeStateName from "../common/entity/compute_state_name";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
import { EventsMixin } from "../mixins/events-mixin";
|
||||
|
||||
/*
|
||||
|
||||
@ -8,7 +8,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import HassMediaPlayerEntity from "../util/hass-media-player-model";
|
||||
import { fetchMediaPlayerThumbnailWithCache } from "../data/media-player";
|
||||
|
||||
import computeStateName from "../common/entity/compute_state_name";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
import { EventsMixin } from "../mixins/events-mixin";
|
||||
import LocalizeMixin from "../mixins/localize-mixin";
|
||||
|
||||
|
||||
@ -5,9 +5,9 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "../components/ha-card";
|
||||
import "../components/ha-markdown";
|
||||
|
||||
import computeStateName from "../common/entity/compute_state_name";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
import LocalizeMixin from "../mixins/localize-mixin";
|
||||
import computeObjectId from "../common/entity/compute_object_id";
|
||||
import { computeObjectId } from "../common/entity/compute_object_id";
|
||||
|
||||
/*
|
||||
* @appliesMixin LocalizeMixin
|
||||
|
||||
@ -4,7 +4,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "../components/ha-card";
|
||||
import "../components/ha-icon";
|
||||
|
||||
import computeStateName from "../common/entity/compute_state_name";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
import { EventsMixin } from "../mixins/events-mixin";
|
||||
|
||||
class HaPlantCard extends EventsMixin(PolymerElement) {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import computeStateName from "../common/entity/compute_state_name";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
|
||||
import "../components/ha-card";
|
||||
import "../components/ha-icon";
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
|
||||
export default function attributeClassNames(
|
||||
export const attributeClassNames = (
|
||||
stateObj: HassEntity,
|
||||
attributes: string[]
|
||||
): string {
|
||||
): string => {
|
||||
if (!stateObj) {
|
||||
return "";
|
||||
}
|
||||
@ -13,4 +13,4 @@ export default function attributeClassNames(
|
||||
)
|
||||
.filter((attr) => attr !== "")
|
||||
.join(" ");
|
||||
}
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@ import { HassEntity } from "home-assistant-js-websocket";
|
||||
|
||||
/** Return an icon representing a binary sensor state. */
|
||||
|
||||
export default function binarySensorIcon(state: HassEntity) {
|
||||
export const binarySensorIcon = (state: HassEntity) => {
|
||||
const activated = state.state && state.state === "off";
|
||||
switch (state.attributes.device_class) {
|
||||
case "battery":
|
||||
@ -48,4 +48,4 @@ export default function binarySensorIcon(state: HassEntity) {
|
||||
default:
|
||||
return activated ? "hass:radiobox-blank" : "hass:checkbox-marked-circle";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
export default function canToggleDomain(hass: HomeAssistant, domain: string) {
|
||||
export const canToggleDomain = (hass: HomeAssistant, domain: string) => {
|
||||
const services = hass.services[domain];
|
||||
if (!services) {
|
||||
return false;
|
||||
@ -13,4 +13,4 @@ export default function canToggleDomain(hass: HomeAssistant, domain: string) {
|
||||
return "open_cover" in services;
|
||||
}
|
||||
return "turn_on" in services;
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import canToggleDomain from "./can_toggle_domain";
|
||||
import computeStateDomain from "./compute_state_domain";
|
||||
import { canToggleDomain } from "./can_toggle_domain";
|
||||
import { computeStateDomain } from "./compute_state_domain";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { supportsFeature } from "./supports-feature";
|
||||
|
||||
export default function canToggleState(
|
||||
hass: HomeAssistant,
|
||||
stateObj: HassEntity
|
||||
) {
|
||||
export const canToggleState = (hass: HomeAssistant, stateObj: HassEntity) => {
|
||||
const domain = computeStateDomain(stateObj);
|
||||
if (domain === "group") {
|
||||
return stateObj.state === "on" || stateObj.state === "off";
|
||||
@ -17,4 +14,4 @@ export default function canToggleState(
|
||||
}
|
||||
|
||||
return canToggleDomain(hass, domain);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
export default function computeDomain(entityId: string): string {
|
||||
export const computeDomain = (entityId: string): string => {
|
||||
return entityId.substr(0, entityId.indexOf("."));
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/** Compute the object ID of a state. */
|
||||
export default function computeObjectId(entityId: string): string {
|
||||
export const computeObjectId = (entityId: string): string => {
|
||||
return entityId.substr(entityId.indexOf(".") + 1);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import computeStateDomain from "./compute_state_domain";
|
||||
import { computeStateDomain } from "./compute_state_domain";
|
||||
import formatDateTime from "../datetime/format_date_time";
|
||||
import formatDate from "../datetime/format_date";
|
||||
import formatTime from "../datetime/format_time";
|
||||
import { LocalizeFunc } from "../translations/localize";
|
||||
|
||||
export default (
|
||||
export const computeStateDisplay = (
|
||||
localize: LocalizeFunc,
|
||||
stateObj: HassEntity,
|
||||
language: string
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import computeDomain from "./compute_domain";
|
||||
import { computeDomain } from "./compute_domain";
|
||||
|
||||
export default function computeStateDomain(stateObj: HassEntity) {
|
||||
export const computeStateDomain = (stateObj: HassEntity) => {
|
||||
return computeDomain(stateObj.entity_id);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import computeObjectId from "./compute_object_id";
|
||||
import { computeObjectId } from "./compute_object_id";
|
||||
|
||||
export default (stateObj: HassEntity): string =>
|
||||
stateObj.attributes.friendly_name === undefined
|
||||
export const computeStateName = (stateObj: HassEntity): string => {
|
||||
return stateObj.attributes.friendly_name === undefined
|
||||
? computeObjectId(stateObj.entity_id).replace(/_/g, " ")
|
||||
: stateObj.attributes.friendly_name || "";
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
/** Return an icon representing a cover state. */
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import domainIcon from "./domain_icon";
|
||||
import { domainIcon } from "./domain_icon";
|
||||
|
||||
export default function coverIcon(state: HassEntity): string {
|
||||
export const coverIcon = (state: HassEntity): string => {
|
||||
const open = state.state !== "closed";
|
||||
switch (state.attributes.device_class) {
|
||||
case "garage":
|
||||
@ -18,4 +18,4 @@ export default function coverIcon(state: HassEntity): string {
|
||||
default:
|
||||
return domainIcon("cover", state.state);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -30,6 +30,7 @@ const fixedIcons = {
|
||||
light: "hass:lightbulb",
|
||||
mailbox: "hass:mailbox",
|
||||
notify: "hass:comment-alert",
|
||||
persistent_notification: "hass:bell",
|
||||
person: "hass:account",
|
||||
plant: "hass:flower",
|
||||
proximity: "hass:apple-safari",
|
||||
@ -46,9 +47,10 @@ const fixedIcons = {
|
||||
water_heater: "hass:thermometer",
|
||||
weather: "hass:weather-cloudy",
|
||||
weblink: "hass:open-in-new",
|
||||
zone: "hass:map-marker",
|
||||
};
|
||||
|
||||
export default function domainIcon(domain: string, state?: string): string {
|
||||
export const domainIcon = (domain: string, state?: string): string => {
|
||||
if (domain in fixedIcons) {
|
||||
return fixedIcons[domain];
|
||||
}
|
||||
@ -103,4 +105,4 @@ export default function domainIcon(domain: string, state?: string): string {
|
||||
);
|
||||
return DEFAULT_DOMAIN_ICON;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import computeDomain from "./compute_domain";
|
||||
import { computeDomain } from "./compute_domain";
|
||||
|
||||
export type FilterFunc = (entityId: string) => boolean;
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import { DEFAULT_VIEW_ENTITY_ID } from "../const";
|
||||
import { GroupEntity } from "../../types";
|
||||
|
||||
// Return an ordered array of available views
|
||||
export default function extractViews(entities: HassEntities): GroupEntity[] {
|
||||
export const extractViews = (entities: HassEntities): GroupEntity[] => {
|
||||
const views: GroupEntity[] = [];
|
||||
|
||||
Object.keys(entities).forEach((entityId) => {
|
||||
@ -24,4 +24,4 @@ export default function extractViews(entities: HassEntities): GroupEntity[] {
|
||||
});
|
||||
|
||||
return views;
|
||||
}
|
||||
};
|
||||
|
||||
@ -2,10 +2,10 @@ import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { supportsFeature } from "./supports-feature";
|
||||
|
||||
// Expects classNames to be an object mapping feature-bit -> className
|
||||
export default function featureClassNames(
|
||||
export const featureClassNames = (
|
||||
stateObj: HassEntity,
|
||||
classNames: { [feature: number]: string }
|
||||
) {
|
||||
) => {
|
||||
if (!stateObj || !stateObj.attributes.supported_features) {
|
||||
return "";
|
||||
}
|
||||
@ -16,4 +16,4 @@ export default function featureClassNames(
|
||||
)
|
||||
.filter((attr) => attr !== "")
|
||||
.join(" ");
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { HassEntities } from "home-assistant-js-websocket";
|
||||
import { GroupEntity } from "../../types";
|
||||
|
||||
export default function getGroupEntities(
|
||||
export const getGroupEntities = (
|
||||
entities: HassEntities,
|
||||
group: GroupEntity
|
||||
) {
|
||||
) => {
|
||||
const result = {};
|
||||
|
||||
group.attributes.entity_id.forEach((entityId) => {
|
||||
@ -16,4 +16,4 @@ export default function getGroupEntities(
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import { HassEntities } from "home-assistant-js-websocket";
|
||||
import computeDomain from "./compute_domain";
|
||||
import getGroupEntities from "./get_group_entities";
|
||||
import { computeDomain } from "./compute_domain";
|
||||
import { getGroupEntities } from "./get_group_entities";
|
||||
import { GroupEntity } from "../../types";
|
||||
|
||||
// Return an object containing all entities that the view will show
|
||||
// including embedded groups.
|
||||
export default function getViewEntities(
|
||||
export const getViewEntities = (
|
||||
entities: HassEntities,
|
||||
view: GroupEntity
|
||||
): HassEntities {
|
||||
): HassEntities => {
|
||||
const viewEntities = {};
|
||||
|
||||
view.attributes.entity_id.forEach((entityId) => {
|
||||
@ -32,4 +32,4 @@ export default function getViewEntities(
|
||||
});
|
||||
|
||||
return viewEntities;
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
|
||||
export default function hasLocation(stateObj: HassEntity) {
|
||||
export const hasLocation = (stateObj: HassEntity) => {
|
||||
return (
|
||||
"latitude" in stateObj.attributes && "longitude" in stateObj.attributes
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
/** Return an icon representing an input datetime state. */
|
||||
import domainIcon from "./domain_icon";
|
||||
import { domainIcon } from "./domain_icon";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
|
||||
export default function inputDateTimeIcon(state: HassEntity): string {
|
||||
export const inputDateTimeIcon = (state: HassEntity): string => {
|
||||
if (!state.attributes.has_date) {
|
||||
return "hass:clock";
|
||||
}
|
||||
@ -10,4 +10,4 @@ export default function inputDateTimeIcon(state: HassEntity): string {
|
||||
return "hass:calendar";
|
||||
}
|
||||
return domainIcon("input_datetime");
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/** Return an icon representing a sensor state. */
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { UNIT_C, UNIT_F } from "../const";
|
||||
import domainIcon from "./domain_icon";
|
||||
import { domainIcon } from "./domain_icon";
|
||||
|
||||
const fixedDeviceClassIcons = {
|
||||
humidity: "hass:water-percent",
|
||||
@ -12,7 +12,7 @@ const fixedDeviceClassIcons = {
|
||||
signal_strength: "hass:wifi",
|
||||
};
|
||||
|
||||
export default function sensorIcon(state: HassEntity) {
|
||||
export const sensorIcon = (state: HassEntity) => {
|
||||
const dclass = state.attributes.device_class;
|
||||
|
||||
if (dclass && dclass in fixedDeviceClassIcons) {
|
||||
@ -49,4 +49,4 @@ export default function sensorIcon(state: HassEntity) {
|
||||
return "hass:thermometer";
|
||||
}
|
||||
return domainIcon("sensor");
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import computeDomain from "./compute_domain";
|
||||
import { computeDomain } from "./compute_domain";
|
||||
import { HassEntities } from "home-assistant-js-websocket";
|
||||
import { GroupEntity } from "../../types";
|
||||
|
||||
// Split a collection into a list of groups and a 'rest' list of ungrouped
|
||||
// entities.
|
||||
// Returns { groups: [], ungrouped: {} }
|
||||
export default function splitByGroups(entities: HassEntities) {
|
||||
export const splitByGroups = (entities: HassEntities) => {
|
||||
const groups: GroupEntity[] = [];
|
||||
const ungrouped: HassEntities = {};
|
||||
|
||||
@ -26,4 +26,4 @@ export default function splitByGroups(entities: HassEntities) {
|
||||
);
|
||||
|
||||
return { groups, ungrouped };
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import canToggleState from "./can_toggle_state";
|
||||
import computeStateDomain from "./compute_state_domain";
|
||||
import { canToggleState } from "./can_toggle_state";
|
||||
import { computeStateDomain } from "./compute_state_domain";
|
||||
import { DOMAINS_WITH_CARD } from "../const";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
export default function stateCardType(
|
||||
hass: HomeAssistant,
|
||||
stateObj: HassEntity
|
||||
) {
|
||||
export const stateCardType = (hass: HomeAssistant, stateObj: HassEntity) => {
|
||||
if (stateObj.state === "unavailable") {
|
||||
return "display";
|
||||
}
|
||||
@ -24,4 +21,4 @@ export default function stateCardType(
|
||||
return "toggle";
|
||||
}
|
||||
return "display";
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
/** Return an icon representing a state. */
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { DEFAULT_DOMAIN_ICON } from "../const";
|
||||
import { binarySensorIcon } from "./binary_sensor_icon";
|
||||
|
||||
import computeDomain from "./compute_domain";
|
||||
import domainIcon from "./domain_icon";
|
||||
|
||||
import binarySensorIcon from "./binary_sensor_icon";
|
||||
import coverIcon from "./cover_icon";
|
||||
import sensorIcon from "./sensor_icon";
|
||||
import inputDateTimeIcon from "./input_dateteime_icon";
|
||||
import { computeDomain } from "./compute_domain";
|
||||
import { domainIcon } from "./domain_icon";
|
||||
import { coverIcon } from "./cover_icon";
|
||||
import { sensorIcon } from "./sensor_icon";
|
||||
import { inputDateTimeIcon } from "./input_dateteime_icon";
|
||||
|
||||
const domainIcons = {
|
||||
binary_sensor: binarySensorIcon,
|
||||
@ -17,7 +16,7 @@ const domainIcons = {
|
||||
input_datetime: inputDateTimeIcon,
|
||||
};
|
||||
|
||||
export default function stateIcon(state: HassEntity) {
|
||||
export const stateIcon = (state: HassEntity) => {
|
||||
if (!state) {
|
||||
return DEFAULT_DOMAIN_ICON;
|
||||
}
|
||||
@ -31,4 +30,4 @@ export default function stateIcon(state: HassEntity) {
|
||||
return domainIcons[domain](state);
|
||||
}
|
||||
return domainIcon(domain, state.state);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import computeStateDomain from "./compute_state_domain";
|
||||
import { computeStateDomain } from "./compute_state_domain";
|
||||
import { DOMAINS_HIDE_MORE_INFO, DOMAINS_WITH_MORE_INFO } from "../const";
|
||||
|
||||
export default function stateMoreInfoType(stateObj: HassEntity) {
|
||||
export const stateMoreInfoType = (stateObj: HassEntity) => {
|
||||
const domain = computeStateDomain(stateObj);
|
||||
|
||||
if (DOMAINS_WITH_MORE_INFO.includes(domain)) {
|
||||
@ -12,4 +12,4 @@ export default function stateMoreInfoType(stateObj: HassEntity) {
|
||||
return "hidden";
|
||||
}
|
||||
return "default";
|
||||
}
|
||||
};
|
||||
|
||||
@ -3,15 +3,12 @@
|
||||
*
|
||||
* Usage:
|
||||
* const states = [state1, state2]
|
||||
* states.sort(statesSortByName);
|
||||
* states.sort(statessortStatesByName);
|
||||
*/
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import computeStateName from "./compute_state_name";
|
||||
import { computeStateName } from "./compute_state_name";
|
||||
|
||||
export default function sortStatesByName(
|
||||
entityA: HassEntity,
|
||||
entityB: HassEntity
|
||||
) {
|
||||
export const sortStatesByName = (entityA: HassEntity, entityB: HassEntity) => {
|
||||
const nameA = computeStateName(entityA);
|
||||
const nameB = computeStateName(entityB);
|
||||
if (nameA < nameB) {
|
||||
@ -21,4 +18,4 @@ export default function sortStatesByName(
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import durationToSeconds from "../datetime/duration_to_seconds";
|
||||
|
||||
export default function timerTimeRemaining(stateObj: HassEntity) {
|
||||
export const timerTimeRemaining = (stateObj: HassEntity) => {
|
||||
let timeRemaining = durationToSeconds(stateObj.attributes.remaining);
|
||||
|
||||
if (stateObj.state === "active") {
|
||||
@ -11,4 +11,4 @@ export default function timerTimeRemaining(stateObj: HassEntity) {
|
||||
}
|
||||
|
||||
return timeRemaining;
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
export const afterNextRender = (cb: () => void): void => {
|
||||
requestAnimationFrame(() => setTimeout(cb, 0));
|
||||
};
|
||||
|
||||
export const nextRender = () => {
|
||||
return new Promise((resolve) => {
|
||||
afterNextRender(resolve);
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import { repeat } from "lit-html/directives/repeat";
|
||||
import deepClone from "deep-clone-simple";
|
||||
|
||||
import {
|
||||
MDCDataTableAdapter,
|
||||
MDCDataTableFoundation,
|
||||
} from "../../mdc-data-table/index"; // Because mdc-data-table published ts files, temporary load them from own repo, outside src so our linters won't complain
|
||||
} from "@material/data-table";
|
||||
|
||||
import {
|
||||
BaseElement,
|
||||
@ -19,14 +20,19 @@ import {
|
||||
PropertyValues,
|
||||
} from "@material/mwc-base/base-element";
|
||||
|
||||
import memoizeOne from "memoize-one";
|
||||
// eslint-disable-next-line import/no-webpack-loader-syntax
|
||||
// @ts-ignore
|
||||
// tslint:disable-next-line: no-implicit-dependencies
|
||||
import sortFilterWorker from "workerize-loader!./sort_filter_worker";
|
||||
|
||||
import "./ha-icon";
|
||||
import "../common/search/search-input";
|
||||
import "./ha-checkbox";
|
||||
import "../ha-icon";
|
||||
import "../../common/search/search-input";
|
||||
import "../ha-checkbox";
|
||||
// tslint:disable-next-line
|
||||
import { HaCheckbox } from "./ha-checkbox";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { HaCheckbox } from "../ha-checkbox";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { nextRender } from "../../common/util/render-status";
|
||||
import { debounce } from "../../common/util/debounce";
|
||||
|
||||
declare global {
|
||||
// for fire event
|
||||
@ -57,13 +63,16 @@ export interface DataTabelColumnContainer {
|
||||
[key: string]: DataTabelColumnData;
|
||||
}
|
||||
|
||||
export interface DataTabelColumnData {
|
||||
title: string;
|
||||
type?: "numeric";
|
||||
export interface DataTabelSortColumnData {
|
||||
sortable?: boolean;
|
||||
filterable?: boolean;
|
||||
filterKey?: string;
|
||||
direction?: SortingDirection;
|
||||
}
|
||||
|
||||
export interface DataTabelColumnData extends DataTabelSortColumnData {
|
||||
title: string;
|
||||
type?: "numeric";
|
||||
template?: (data: any) => TemplateResult;
|
||||
}
|
||||
|
||||
@ -89,93 +98,25 @@ export class HaDataTable extends BaseElement {
|
||||
@property({ type: String }) private _filter = "";
|
||||
@property({ type: String }) private _sortColumn?: string;
|
||||
@property({ type: String }) private _sortDirection: SortingDirection = null;
|
||||
@property({ type: Array }) private _filteredData: DataTabelRowData[] = [];
|
||||
private _sortColumns: {
|
||||
[key: string]: DataTabelSortColumnData;
|
||||
} = {};
|
||||
private curRequest = 0;
|
||||
private _worker: any | undefined;
|
||||
|
||||
private _filterSortData = memoizeOne(
|
||||
(
|
||||
data: DataTabelRowData[],
|
||||
columns: DataTabelColumnContainer,
|
||||
filter: string,
|
||||
direction: SortingDirection,
|
||||
sortColumn?: string
|
||||
) =>
|
||||
sortColumn
|
||||
? this._memSortData(
|
||||
this._memFilterData(data, columns, filter),
|
||||
columns,
|
||||
direction,
|
||||
sortColumn
|
||||
)
|
||||
: this._memFilterData(data, columns, filter)
|
||||
private _debounceSearch = debounce(
|
||||
(ev) => {
|
||||
this._filter = ev.detail.value;
|
||||
},
|
||||
200,
|
||||
false
|
||||
);
|
||||
|
||||
private _memFilterData = memoizeOne(
|
||||
(
|
||||
data: DataTabelRowData[],
|
||||
columns: DataTabelColumnContainer,
|
||||
filter: string
|
||||
) => {
|
||||
if (!filter) {
|
||||
return data;
|
||||
}
|
||||
const ucFilter = filter.toUpperCase();
|
||||
return data.filter((row) => {
|
||||
return Object.entries(columns).some((columnEntry) => {
|
||||
const [key, column] = columnEntry;
|
||||
if (column.filterable) {
|
||||
if (
|
||||
(column.filterKey ? row[key][column.filterKey] : row[key])
|
||||
.toUpperCase()
|
||||
.includes(ucFilter)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
private _memSortData = memoizeOne(
|
||||
(
|
||||
data: DataTabelRowData[],
|
||||
columns: DataTabelColumnContainer,
|
||||
direction: SortingDirection,
|
||||
sortColumn: string
|
||||
) => {
|
||||
const sorted = [...data];
|
||||
const column = columns[sortColumn];
|
||||
return sorted.sort((a, b) => {
|
||||
let sort = 1;
|
||||
if (direction === "desc") {
|
||||
sort = -1;
|
||||
}
|
||||
|
||||
let valA = column.filterKey
|
||||
? a[sortColumn][column.filterKey]
|
||||
: a[sortColumn];
|
||||
|
||||
let valB = column.filterKey
|
||||
? b[sortColumn][column.filterKey]
|
||||
: b[sortColumn];
|
||||
|
||||
if (typeof valA === "string") {
|
||||
valA = valA.toUpperCase();
|
||||
}
|
||||
if (typeof valB === "string") {
|
||||
valB = valB.toUpperCase();
|
||||
}
|
||||
|
||||
if (valA < valB) {
|
||||
return sort * -1;
|
||||
}
|
||||
if (valA > valB) {
|
||||
return sort * 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
);
|
||||
protected firstUpdated() {
|
||||
super.firstUpdated();
|
||||
this._worker = sortFilterWorker();
|
||||
}
|
||||
|
||||
protected updated(properties: PropertyValues) {
|
||||
super.updated(properties);
|
||||
@ -192,6 +133,25 @@ export class HaDataTable extends BaseElement {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const clonedColumns: DataTabelColumnContainer = deepClone(this.columns);
|
||||
Object.values(clonedColumns).forEach((column: DataTabelColumnData) => {
|
||||
delete column.title;
|
||||
delete column.type;
|
||||
delete column.template;
|
||||
});
|
||||
|
||||
this._sortColumns = clonedColumns;
|
||||
}
|
||||
|
||||
if (
|
||||
properties.has("data") ||
|
||||
properties.has("columns") ||
|
||||
properties.has("_filter") ||
|
||||
properties.has("_sortColumn") ||
|
||||
properties.has("_sortDirection")
|
||||
) {
|
||||
this._filterData();
|
||||
}
|
||||
}
|
||||
|
||||
@ -261,13 +221,7 @@ export class HaDataTable extends BaseElement {
|
||||
</thead>
|
||||
<tbody class="mdc-data-table__content">
|
||||
${repeat(
|
||||
this._filterSortData(
|
||||
this.data,
|
||||
this.columns,
|
||||
this._filter,
|
||||
this._sortDirection,
|
||||
this._sortColumn
|
||||
),
|
||||
this._filteredData!,
|
||||
(row: DataTabelRowData) => row[this.id],
|
||||
(row: DataTabelRowData) => html`
|
||||
<tr
|
||||
@ -356,6 +310,33 @@ export class HaDataTable extends BaseElement {
|
||||
};
|
||||
}
|
||||
|
||||
private async _filterData() {
|
||||
const startTime = new Date().getTime();
|
||||
this.curRequest++;
|
||||
const curRequest = this.curRequest;
|
||||
|
||||
const filterProm = this._worker.filterSortData(
|
||||
this.data,
|
||||
this._sortColumns,
|
||||
this._filter,
|
||||
this._sortDirection,
|
||||
this._sortColumn
|
||||
);
|
||||
|
||||
const [data] = await Promise.all([filterProm, nextRender]);
|
||||
|
||||
const curTime = new Date().getTime();
|
||||
const elapsed = curTime - startTime;
|
||||
|
||||
if (elapsed < 100) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 100 - elapsed));
|
||||
}
|
||||
if (this.curRequest !== curRequest) {
|
||||
return;
|
||||
}
|
||||
this._filteredData = data;
|
||||
}
|
||||
|
||||
private _getRowIdAtIndex(rowIndex: number): string {
|
||||
return this.rowElements[rowIndex].getAttribute("data-row-id")!;
|
||||
}
|
||||
@ -420,7 +401,7 @@ export class HaDataTable extends BaseElement {
|
||||
}
|
||||
|
||||
private _handleSearchChange(ev: CustomEvent): void {
|
||||
this._filter = ev.detail.value;
|
||||
this._debounceSearch(ev);
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
107
src/components/data-table/sort_filter_worker.ts
Normal file
107
src/components/data-table/sort_filter_worker.ts
Normal file
@ -0,0 +1,107 @@
|
||||
import {
|
||||
DataTabelColumnContainer,
|
||||
DataTabelColumnData,
|
||||
DataTabelRowData,
|
||||
SortingDirection,
|
||||
} from "./ha-data-table";
|
||||
|
||||
import memoizeOne from "memoize-one";
|
||||
|
||||
export const filterSortData = memoizeOne(
|
||||
async (
|
||||
data: DataTabelRowData[],
|
||||
columns: DataTabelColumnContainer,
|
||||
filter: string,
|
||||
direction: SortingDirection,
|
||||
sortColumn?: string
|
||||
) =>
|
||||
sortColumn
|
||||
? _memSortData(
|
||||
await _memFilterData(data, columns, filter),
|
||||
columns,
|
||||
direction,
|
||||
sortColumn
|
||||
)
|
||||
: _memFilterData(data, columns, filter)
|
||||
);
|
||||
|
||||
const _memFilterData = memoizeOne(
|
||||
async (
|
||||
data: DataTabelRowData[],
|
||||
columns: DataTabelColumnContainer,
|
||||
filter: string
|
||||
) => {
|
||||
if (!filter) {
|
||||
return data;
|
||||
}
|
||||
return filterData(data, columns, filter.toUpperCase());
|
||||
}
|
||||
);
|
||||
|
||||
const _memSortData = memoizeOne(
|
||||
(
|
||||
data: DataTabelRowData[],
|
||||
columns: DataTabelColumnContainer,
|
||||
direction: SortingDirection,
|
||||
sortColumn: string
|
||||
) => {
|
||||
return sortData(data, columns[sortColumn], direction, sortColumn);
|
||||
}
|
||||
);
|
||||
|
||||
export const filterData = (
|
||||
data: DataTabelRowData[],
|
||||
columns: DataTabelColumnContainer,
|
||||
filter: string
|
||||
) =>
|
||||
data.filter((row) => {
|
||||
return Object.entries(columns).some((columnEntry) => {
|
||||
const [key, column] = columnEntry;
|
||||
if (column.filterable) {
|
||||
if (
|
||||
(column.filterKey ? row[key][column.filterKey] : row[key])
|
||||
.toUpperCase()
|
||||
.includes(filter)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
export const sortData = (
|
||||
data: DataTabelRowData[],
|
||||
column: DataTabelColumnData,
|
||||
direction: SortingDirection,
|
||||
sortColumn: string
|
||||
) =>
|
||||
data.sort((a, b) => {
|
||||
let sort = 1;
|
||||
if (direction === "desc") {
|
||||
sort = -1;
|
||||
}
|
||||
|
||||
let valA = column.filterKey
|
||||
? a[sortColumn][column.filterKey]
|
||||
: a[sortColumn];
|
||||
|
||||
let valB = column.filterKey
|
||||
? b[sortColumn][column.filterKey]
|
||||
: b[sortColumn];
|
||||
|
||||
if (typeof valA === "string") {
|
||||
valA = valA.toUpperCase();
|
||||
}
|
||||
if (typeof valB === "string") {
|
||||
valB = valB.toUpperCase();
|
||||
}
|
||||
|
||||
if (valA < valB) {
|
||||
return sort * -1;
|
||||
}
|
||||
if (valA > valB) {
|
||||
return sort * 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
@ -7,7 +7,7 @@ import memoizeOne from "memoize-one";
|
||||
|
||||
import "./state-badge";
|
||||
|
||||
import computeStateName from "../../common/entity/compute_state_name";
|
||||
import { computeStateName } from "../../common/entity/compute_state_name";
|
||||
import {
|
||||
LitElement,
|
||||
TemplateResult,
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import "@polymer/paper-icon-button/paper-icon-button";
|
||||
import "@polymer/paper-toggle-button/paper-toggle-button";
|
||||
|
||||
import { STATES_OFF } from "../../common/const";
|
||||
import computeStateDomain from "../../common/entity/compute_state_domain";
|
||||
import {
|
||||
LitElement,
|
||||
TemplateResult,
|
||||
@ -15,7 +13,11 @@ import {
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { forwardHaptic } from "../../data/haptics";
|
||||
import computeStateName from "../../common/entity/compute_state_name";
|
||||
|
||||
import { computeStateDomain } from "../../common/entity/compute_state_domain";
|
||||
import { computeStateName } from "../../common/entity/compute_state_name";
|
||||
|
||||
import "../ha-switch";
|
||||
|
||||
const isOn = (stateObj?: HassEntity) =>
|
||||
stateObj !== undefined && !STATES_OFF.includes(stateObj.state);
|
||||
@ -29,7 +31,7 @@ class HaEntityToggle extends LitElement {
|
||||
protected render(): TemplateResult | void {
|
||||
if (!this.stateObj) {
|
||||
return html`
|
||||
<paper-toggle-button disabled></paper-toggle-button>
|
||||
<ha-switch disabled></ha-switch>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -51,13 +53,13 @@ class HaEntityToggle extends LitElement {
|
||||
}
|
||||
|
||||
return html`
|
||||
<paper-toggle-button
|
||||
<ha-switch
|
||||
aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
|
||||
this._isOn ? "off" : "on"
|
||||
}`}
|
||||
.checked=${this._isOn}
|
||||
@change=${this._toggleChanged}
|
||||
></paper-toggle-button>
|
||||
></ha-switch>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -149,11 +151,8 @@ class HaEntityToggle extends LitElement {
|
||||
paper-icon-button[state-active] {
|
||||
color: var(--paper-icon-button-active-color, var(--primary-color));
|
||||
}
|
||||
paper-toggle-button {
|
||||
cursor: pointer;
|
||||
--paper-toggle-button-label-spacing: 0;
|
||||
ha-switch {
|
||||
padding: 13px 5px;
|
||||
margin: -4px -5px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import "../ha-icon";
|
||||
import stateIcon from "../../common/entity/state_icon";
|
||||
import { stateIcon } from "../../common/entity/state_icon";
|
||||
|
||||
class HaStateIcon extends PolymerElement {
|
||||
static get template() {
|
||||
|
||||
@ -14,11 +14,11 @@ import { classMap } from "lit-html/directives/class-map";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
import computeStateDomain from "../../common/entity/compute_state_domain";
|
||||
import computeStateName from "../../common/entity/compute_state_name";
|
||||
import domainIcon from "../../common/entity/domain_icon";
|
||||
import stateIcon from "../../common/entity/state_icon";
|
||||
import timerTimeRemaining from "../../common/entity/timer_time_remaining";
|
||||
import { computeStateDomain } from "../../common/entity/compute_state_domain";
|
||||
import { computeStateName } from "../../common/entity/compute_state_name";
|
||||
import { domainIcon } from "../../common/entity/domain_icon";
|
||||
import { stateIcon } from "../../common/entity/state_icon";
|
||||
import { timerTimeRemaining } from "../../common/entity/timer_time_remaining";
|
||||
import secondsToDuration from "../../common/datetime/seconds_to_duration";
|
||||
|
||||
import "../ha-label-badge";
|
||||
|
||||
@ -9,8 +9,8 @@ import {
|
||||
query,
|
||||
} from "lit-element";
|
||||
import "../ha-icon";
|
||||
import computeStateDomain from "../../common/entity/compute_state_domain";
|
||||
import stateIcon from "../../common/entity/state_icon";
|
||||
import { computeStateDomain } from "../../common/entity/compute_state_domain";
|
||||
import { stateIcon } from "../../common/entity/state_icon";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
// Not duplicate, this is for typing.
|
||||
// tslint:disable-next-line
|
||||
|
||||
@ -3,7 +3,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import "../ha-relative-time";
|
||||
import "./state-badge";
|
||||
import computeStateName from "../../common/entity/compute_state_name";
|
||||
import { computeStateName } from "../../common/entity/compute_state_name";
|
||||
import { computeRTL } from "../../common/util/compute_rtl";
|
||||
|
||||
class StateInfo extends PolymerElement {
|
||||
|
||||
@ -9,7 +9,7 @@ import {
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
|
||||
import computeStateName from "../common/entity/compute_state_name";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
import { HomeAssistant, CameraEntity } from "../types";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import {
|
||||
|
||||
@ -8,9 +8,9 @@ import "../cards/ha-badges-card";
|
||||
import "../cards/ha-card-chooser";
|
||||
import "./ha-demo-badge";
|
||||
|
||||
import computeStateDomain from "../common/entity/compute_state_domain";
|
||||
import splitByGroups from "../common/entity/split_by_groups";
|
||||
import getGroupEntities from "../common/entity/get_group_entities";
|
||||
import { computeStateDomain } from "../common/entity/compute_state_domain";
|
||||
import { splitByGroups } from "../common/entity/split_by_groups";
|
||||
import { getGroupEntities } from "../common/entity/get_group_entities";
|
||||
|
||||
// mapping domain to size of the card.
|
||||
const DOMAINS_WITH_CARD = {
|
||||
|
||||
69
src/components/ha-chips.ts
Normal file
69
src/components/ha-chips.ts
Normal file
@ -0,0 +1,69 @@
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
html,
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
unsafeCSS,
|
||||
} from "lit-element";
|
||||
|
||||
// @ts-ignore
|
||||
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
|
||||
declare global {
|
||||
// for fire event
|
||||
interface HASSDomEvents {
|
||||
"chip-clicked": { index: string };
|
||||
}
|
||||
}
|
||||
|
||||
@customElement("ha-chips")
|
||||
export class HaChips extends LitElement {
|
||||
@property() public items = [];
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (this.items.length === 0) {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<div class="mdc-chip-set">
|
||||
${this.items.map(
|
||||
(item, idx) =>
|
||||
html`
|
||||
<button
|
||||
class="mdc-chip"
|
||||
.index=${idx}
|
||||
@click=${this._handleClick}
|
||||
>
|
||||
<span class="mdc-chip__text">${item}</span>
|
||||
</button>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private _handleClick(ev) {
|
||||
fireEvent(
|
||||
this,
|
||||
"chip-clicked",
|
||||
{ index: ev.target.closest("button").index },
|
||||
{ bubbles: false }
|
||||
);
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
${unsafeCSS(chipStyles)}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-chips": HaChips;
|
||||
}
|
||||
}
|
||||
@ -13,7 +13,7 @@ import { fireEvent } from "../common/dom/fire_event";
|
||||
import { HomeAssistant } from "../types";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import { subscribeNotifications } from "../data/persistent_notification";
|
||||
import computeDomain from "../common/entity/compute_domain";
|
||||
import { computeDomain } from "../common/entity/compute_domain";
|
||||
|
||||
@customElement("ha-menu-button")
|
||||
class HaMenuButton extends LitElement {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import "@polymer/paper-toggle-button/paper-toggle-button";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import { getAppKey } from "../data/notify_html5";
|
||||
|
||||
import { EventsMixin } from "../mixins/events-mixin";
|
||||
|
||||
import "./ha-switch";
|
||||
|
||||
export const pushSupported =
|
||||
"serviceWorker" in navigator &&
|
||||
"PushManager" in window &&
|
||||
@ -19,11 +19,11 @@ export const pushSupported =
|
||||
class HaPushNotificationsToggle extends EventsMixin(PolymerElement) {
|
||||
static get template() {
|
||||
return html`
|
||||
<paper-toggle-button
|
||||
<ha-switch
|
||||
disabled="[[_compDisabled(disabled, loading)]]"
|
||||
checked="{{pushChecked}}"
|
||||
on-change="handlePushChange"
|
||||
></paper-toggle-button>
|
||||
></ha-switch>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ import {
|
||||
PersistentNotification,
|
||||
subscribeNotifications,
|
||||
} from "../data/persistent_notification";
|
||||
import computeDomain from "../common/entity/compute_domain";
|
||||
import { computeDomain } from "../common/entity/compute_domain";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
// tslint:disable-next-line: no-duplicate-imports
|
||||
import { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item";
|
||||
|
||||
51
src/components/ha-switch.ts
Normal file
51
src/components/ha-switch.ts
Normal file
@ -0,0 +1,51 @@
|
||||
import { Constructor, customElement, CSSResult, css, query } from "lit-element";
|
||||
import "@material/mwc-switch";
|
||||
import { style } from "@material/mwc-switch/mwc-switch-css";
|
||||
// tslint:disable-next-line
|
||||
import { Switch } from "@material/mwc-switch";
|
||||
// tslint:disable-next-line
|
||||
const MwcSwitch = customElements.get("mwc-switch") as Constructor<Switch>;
|
||||
|
||||
@customElement("ha-switch")
|
||||
export class HaSwitch extends MwcSwitch {
|
||||
@query("slot") private _slot!: HTMLSlotElement;
|
||||
|
||||
protected firstUpdated() {
|
||||
super.firstUpdated();
|
||||
this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
|
||||
this.classList.toggle(
|
||||
"slotted",
|
||||
Boolean(this._slot.assignedNodes().length)
|
||||
);
|
||||
}
|
||||
|
||||
protected static get styles(): CSSResult[] {
|
||||
return [
|
||||
style,
|
||||
css`
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
|
||||
background-color: var(--paper-toggle-button-unchecked-button-color);
|
||||
border-color: var(--paper-toggle-button-unchecked-button-color);
|
||||
}
|
||||
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
|
||||
background-color: var(--paper-toggle-button-unchecked-bar-color);
|
||||
border-color: var(--paper-toggle-button-unchecked-bar-color);
|
||||
}
|
||||
:host(.slotted) .mdc-switch {
|
||||
margin-right: 24px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-switch": HaSwitch;
|
||||
}
|
||||
}
|
||||
@ -21,7 +21,11 @@ class HaTextarea extends PolymerElement {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<paper-textarea label="[[label]]" value="{{value}}"></paper-textarea>
|
||||
<paper-textarea
|
||||
label="[[label]]"
|
||||
placeholder="[[placeholder]]"
|
||||
value="{{value}}"
|
||||
></paper-textarea>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -29,6 +33,7 @@ class HaTextarea extends PolymerElement {
|
||||
return {
|
||||
name: String,
|
||||
label: String,
|
||||
placeholder: String,
|
||||
value: {
|
||||
type: String,
|
||||
notify: true,
|
||||
|
||||
@ -155,15 +155,21 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
|
||||
domain === "climate" ||
|
||||
domain === "water_heater"
|
||||
) {
|
||||
const hasHvacAction = states.states.some(
|
||||
(state) => state.attributes && state.attributes.hvac_action
|
||||
);
|
||||
|
||||
const isHeating =
|
||||
domain === "climate"
|
||||
domain === "climate" && hasHvacAction
|
||||
? (state) => state.attributes.hvac_action === "heating"
|
||||
: (state) => state.state === "heat";
|
||||
const isCooling =
|
||||
domain === "climate"
|
||||
domain === "climate" && hasHvacAction
|
||||
? (state) => state.attributes.hvac_action === "cooling"
|
||||
: (state) => state.state === "cool";
|
||||
|
||||
const hasHeat = states.states.some(isHeating);
|
||||
const hasCool = states.states.some(isCooling);
|
||||
// We differentiate between thermostats that have a target temperature
|
||||
// range versus ones that have just a target temperature
|
||||
|
||||
@ -174,8 +180,6 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
|
||||
state.attributes.target_temp_high !==
|
||||
state.attributes.target_temp_low
|
||||
);
|
||||
const hasHeat = states.states.some(isHeating);
|
||||
const hasCool = states.states.some(isCooling);
|
||||
|
||||
addColumn(name + " current temperature", true);
|
||||
if (hasHeat) {
|
||||
|
||||
@ -3,6 +3,7 @@ import {
|
||||
HassEntityAttributeBase,
|
||||
} from "home-assistant-js-websocket";
|
||||
import { HomeAssistant } from "../types";
|
||||
import { navigate } from "../common/navigate";
|
||||
|
||||
export interface AutomationEntity extends HassEntityBase {
|
||||
attributes: HassEntityAttributeBase & {
|
||||
@ -13,6 +14,7 @@ export interface AutomationEntity extends HassEntityBase {
|
||||
|
||||
export interface AutomationConfig {
|
||||
alias: string;
|
||||
description: string;
|
||||
trigger: any[];
|
||||
condition?: any[];
|
||||
action: any[];
|
||||
@ -20,3 +22,19 @@ export interface AutomationConfig {
|
||||
|
||||
export const deleteAutomation = (hass: HomeAssistant, id: string) =>
|
||||
hass.callApi("DELETE", `config/automation/config/${id}`);
|
||||
|
||||
let inititialAutomationEditorData: Partial<AutomationConfig> | undefined;
|
||||
|
||||
export const showAutomationEditor = (
|
||||
el: HTMLElement,
|
||||
data?: Partial<AutomationConfig>
|
||||
) => {
|
||||
inititialAutomationEditorData = data;
|
||||
navigate(el, "/config/automation/new");
|
||||
};
|
||||
|
||||
export const getAutomationEditorInitData = () => {
|
||||
const data = inititialAutomationEditorData;
|
||||
inititialAutomationEditorData = undefined;
|
||||
return data;
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { HomeAssistant } from "../types";
|
||||
import compute_state_name from "../common/entity/compute_state_name";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
|
||||
export interface DeviceAutomation {
|
||||
device_id: string;
|
||||
@ -69,7 +69,7 @@ export const localizeDeviceAutomationAction = (
|
||||
return hass.localize(
|
||||
`component.${action.domain}.device_automation.action_type.${action.type}`,
|
||||
"entity_name",
|
||||
state ? compute_state_name(state) : "<unknown>",
|
||||
state ? computeStateName(state) : "<unknown>",
|
||||
"subtype",
|
||||
hass.localize(
|
||||
`component.${action.domain}.device_automation.action_subtype.${
|
||||
@ -91,7 +91,7 @@ export const localizeDeviceAutomationCondition = (
|
||||
condition.type
|
||||
}`,
|
||||
"entity_name",
|
||||
state ? compute_state_name(state) : "<unknown>",
|
||||
state ? computeStateName(state) : "<unknown>",
|
||||
"subtype",
|
||||
hass.localize(
|
||||
`component.${condition.domain}.device_automation.condition_subtype.${
|
||||
@ -111,7 +111,7 @@ export const localizeDeviceAutomationTrigger = (
|
||||
trigger.type
|
||||
}`,
|
||||
"entity_name",
|
||||
state ? compute_state_name(state) : "<unknown>",
|
||||
state ? computeStateName(state) : "<unknown>",
|
||||
"subtype",
|
||||
hass.localize(
|
||||
`component.${trigger.domain}.device_automation.trigger_subtype.${
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { createCollection, Connection } from "home-assistant-js-websocket";
|
||||
import { HomeAssistant } from "../types";
|
||||
import computeStateName from "../common/entity/compute_state_name";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
import { debounce } from "../common/util/debounce";
|
||||
|
||||
export interface EntityRegistryEntry {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user