From 8b31e632dbf8a17dd4f52c05f6fc620bfc6ddbf1 Mon Sep 17 00:00:00 2001 From: Josh Willox Date: Mon, 13 Feb 2023 01:14:21 +1100 Subject: [PATCH] refactor: reformat and sort imports --- info.md | 22 +++++++++++--------- src/action-handler.ts | 24 +++++++++++----------- src/action.ts | 18 ++++++++--------- src/const.ts | 2 +- src/entity-row.ts | 6 +++--- src/entity.ts | 2 +- src/main.ts | 47 +++++++++++++++++++++---------------------- src/presets.ts | 12 +++++------ src/template.ts | 4 ++-- vite.config.ts | 12 +++++------ 10 files changed, 75 insertions(+), 74 deletions(-) diff --git a/info.md b/info.md index 09206dff..9f515f4b 100644 --- a/info.md +++ b/info.md @@ -1,8 +1,9 @@ This is a complete rewrite of the original [`button-entity-row`](https://github.com/custom-cards/button-entity-row) plugin, that is more consistent with Home Assistant's [button card](https://www.home-assistant.io/lovelace/button/), it uses **actions** including `tap_action`, `double_tap_action` and `hold_action` allowing for greater customisation of the buttons behaviour. It also retains the ability to style the button based on state, but adds the ability to style the icon, text, and ripple effect separately. There is a new option for **icon alignment** and the buttons have haptic feedback. -Check out the [documentation](https://github.com/jcwillox/lovelace-paper-buttons-row) for the configuration options and examples. +Check out the [documentation](https://github.com/jcwillox/lovelace-paper-buttons-row) for the configuration options and examples. ## Images + @@ -14,12 +15,13 @@ Check out the [documentation](https://github.com/jcwillox/lovelace-paper-buttons More example images than you could poke a stick at, I know... ## Features -* Create icon, text, or icon-text buttons. -* Add css styling to each button per state! -* Style the icon, name, state, and ripple effect separately. -* Change the icon alignment and layout of the icon, name and state. -* Add actions for `tap_action`, `double_tap_action` and `hold_action`. -* Create multiple rows of buttons. -* Embed buttons in other entity rows. -* Tooltip support, configure custom tooltips. -* Templating support. \ No newline at end of file + +- Create icon, text, or icon-text buttons. +- Add css styling to each button per state! +- Style the icon, name, state, and ripple effect separately. +- Change the icon alignment and layout of the icon, name and state. +- Add actions for `tap_action`, `double_tap_action` and `hold_action`. +- Create multiple rows of buttons. +- Embed buttons in other entity rows. +- Tooltip support, configure custom tooltips. +- Templating support. diff --git a/src/action-handler.ts b/src/action-handler.ts index c5d5ff6d..d60264b2 100644 --- a/src/action-handler.ts +++ b/src/action-handler.ts @@ -1,16 +1,16 @@ +import { + ActionHandlerDetail, + ActionHandlerOptions, + fireEvent, +} from "custom-card-helpers"; import { noChange } from "lit"; -import { deepEqual } from "./deep-equal"; import { AttributePart, Directive, + DirectiveParameters, directive, - DirectiveParameters } from "lit/directive.js"; -import { - ActionHandlerDetail, - ActionHandlerOptions, - fireEvent -} from "custom-card-helpers"; +import { deepEqual } from "./deep-equal"; const isTouch = "ontouchstart" in window || @@ -86,7 +86,7 @@ class ActionHandler extends HTMLElement implements IActionHandler { height: isTouch ? "100px" : "50px", transform: "translate(-50%, -50%)", pointerEvents: "none", - zIndex: "999" + zIndex: "999", }); this.appendChild(this.ripple); @@ -99,7 +99,7 @@ class ActionHandler extends HTMLElement implements IActionHandler { "touchmove", "mousewheel", "wheel", - "scroll" + "scroll", ].forEach(ev => { document.addEventListener( ev, @@ -246,13 +246,13 @@ class ActionHandler extends HTMLElement implements IActionHandler { }; element.addEventListener("touchstart", element.actionHandler.start, { - passive: true + passive: true, }); element.addEventListener("touchend", element.actionHandler.end); element.addEventListener("touchcancel", element.actionHandler.end); element.addEventListener("mousedown", element.actionHandler.start, { - passive: true + passive: true, }); element.addEventListener("click", element.actionHandler.end); @@ -263,7 +263,7 @@ class ActionHandler extends HTMLElement implements IActionHandler { Object.assign(this.style, { left: `${x}px`, top: `${y}px`, - display: null + display: null, }); this.ripple.disabled = false; this.ripple.startPress(); diff --git a/src/action.ts b/src/action.ts index 8a147986..a41c94fe 100644 --- a/src/action.ts +++ b/src/action.ts @@ -1,9 +1,9 @@ import { + HomeAssistant, fireEvent, forwardHaptic, - HomeAssistant, navigate, - toggleEntity + toggleEntity, } from "custom-card-helpers"; import { ButtonActionConfig, ButtonConfig } from "./types"; import { showToast } from "./utils"; @@ -35,7 +35,7 @@ export function handleActionConfig( ) { if (!actionConfig) { actionConfig = { - action: "more-info" + action: "more-info", }; } @@ -67,7 +67,7 @@ export function handleActionConfig( showToast(node, { message: hass.localize( "ui.panel.lovelace.cards.actions.no_entity_more_info" - ) + ), }); forwardHaptic("failure"); } @@ -78,7 +78,7 @@ export function handleActionConfig( showToast(node, { message: hass.localize( "ui.panel.lovelace.cards.actions.no_navigation_path" - ) + ), }); forwardHaptic("failure"); return; @@ -89,7 +89,7 @@ export function handleActionConfig( case "url": if (!actionConfig.url_path) { showToast(node, { - message: hass.localize("ui.panel.lovelace.cards.actions.no_url") + message: hass.localize("ui.panel.lovelace.cards.actions.no_url"), }); forwardHaptic("failure"); return; @@ -102,7 +102,7 @@ export function handleActionConfig( showToast(node, { message: hass.localize( "ui.panel.lovelace.cards.actions.no_entity_toggle" - ) + ), }); forwardHaptic("failure"); return; @@ -113,7 +113,7 @@ export function handleActionConfig( case "call-service": { if (!actionConfig.service) { showToast(node, { - message: hass.localize("ui.panel.lovelace.cards.actions.no_service") + message: hass.localize("ui.panel.lovelace.cards.actions.no_service"), }); forwardHaptic("failure"); return; @@ -131,7 +131,7 @@ export function handleActionConfig( case "fire-event": { if (!actionConfig.event_type) { showToast(node, { - message: "No event to call specified" + message: "No event to call specified", }); forwardHaptic("failure"); return; diff --git a/src/const.ts b/src/const.ts index 9050c5a2..1cd1ee9b 100644 --- a/src/const.ts +++ b/src/const.ts @@ -8,7 +8,7 @@ export const DOMAINS_TOGGLE = new Set([ "cover", "script", "vacuum", - "lock" + "lock", ]); export const STATES_ON = new Set(["open", "unlocked", "on"]); diff --git a/src/entity-row.ts b/src/entity-row.ts index a34a6ee3..dbe42c61 100644 --- a/src/entity-row.ts +++ b/src/entity-row.ts @@ -1,6 +1,6 @@ -import { createEntityRow } from "card-tools/src/lovelace-element"; import { provideHass } from "card-tools/src/hass"; -import { fireEvent, HomeAssistant } from "custom-card-helpers"; +import { createEntityRow } from "card-tools/src/lovelace-element"; +import { HomeAssistant, fireEvent } from "custom-card-helpers"; import { LitElement, PropertyValues } from "lit"; import { ExternalPaperButtonRowConfig } from "./types"; @@ -36,7 +36,7 @@ createModule("hui-generic-entity-row", function () { const paperButtons = createEntityRow({ type: "custom:paper-buttons-row", - ...pbConfig + ...pbConfig, }); provideHass(paperButtons); diff --git a/src/entity.ts b/src/entity.ts index 896a735f..8a761f37 100644 --- a/src/entity.ts +++ b/src/entity.ts @@ -1,4 +1,4 @@ -import { computeEntity, HomeAssistant } from "custom-card-helpers"; +import { HomeAssistant, computeEntity } from "custom-card-helpers"; import { ButtonConfig } from "./types"; export const computeStateName = stateObj => { diff --git a/src/main.ts b/src/main.ts index 06b38816..52c593ff 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,28 +1,31 @@ -import { html, LitElement, PropertyValues, unsafeCSS } from "lit"; +import "./entity-row"; +import { hass } from "card-tools/src/hass"; +import { + ActionHandlerEvent, + HomeAssistant, + computeDomain, + stateIcon, +} from "custom-card-helpers"; +import deepmerge from "deepmerge"; +import { HassEntity } from "home-assistant-js-websocket"; +import { LitElement, PropertyValues, html, unsafeCSS } from "lit"; import { customElement, property } from "lit/decorators.js"; -import { StyleInfo, styleMap } from "lit/directives/style-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; +import { StyleInfo, styleMap } from "lit/directives/style-map.js"; import { handleAction, hasAction } from "./action"; -import { hass } from "card-tools/src/hass"; +import { actionHandler } from "./action-handler"; import { DOMAINS_TOGGLE, + STATES_ON, STATE_OFF, STATE_ON, STATE_UNAVAILABLE, - STATES_ON, - TEMPLATE_OPTIONS + TEMPLATE_OPTIONS, } from "./const"; import { computeStateName, computeTooltip } from "./entity"; -import deepmerge from "deepmerge"; -import { actionHandler } from "./action-handler"; -import "./entity-row"; +import { handleButtonPreset } from "./presets"; +import styles from "./styles.css?inline"; import { renderTemplateObjects, subscribeTemplate } from "./template"; -import { - ActionHandlerEvent, - computeDomain, - HomeAssistant, - stateIcon -} from "custom-card-helpers"; import { ButtonConfig, ExternalButtonConfig, @@ -30,12 +33,8 @@ import { ExternalPaperButtonRowConfig, PaperButtonRowConfig, StyleConfig, - Template } from "./types"; -import { HassEntity } from "home-assistant-js-websocket"; -import styles from "./styles.css?inline"; import { arrayToObject } from "./utils"; -import { handleButtonPreset } from "./presets"; console.groupCollapsed( `%c ${__NAME__} %c ${__VERSION__} `, @@ -244,7 +243,7 @@ export class PaperButtonsRow extends LitElement { const styles = this._getStyles(config); const buttonStyles = { ...this._getStateStyles(domain, stateObj), - ...(styles.button || {}) + ...(styles.button || {}), } as StyleInfo; const activeStates = config.active @@ -258,7 +257,7 @@ export class PaperButtonsRow extends LitElement { .actionHandler="${actionHandler({ hasHold: hasAction(config.hold_action), hasDoubleClick: hasAction(config.double_tap_action), - repeat: config.hold_action?.repeat + repeat: config.hold_action?.repeat, })}" style="${styleMap(buttonStyles)}" class="${this._getClass( @@ -379,13 +378,13 @@ export class PaperButtonsRow extends LitElement { if (stateObj.attributes.rgb_color) { return { - "--pbs-button-rgb-state-color": stateObj.attributes.rgb_color + "--pbs-button-rgb-state-color": stateObj.attributes.rgb_color, }; } else { const rgb = this._getStateColor(stateObj, domain); if (rgb) { return { - "--pbs-button-rgb-state-color": rgb.join(", ") + "--pbs-button-rgb-state-color": rgb.join(", "), }; } } @@ -489,8 +488,8 @@ export class PaperButtonsRow extends LitElement { action: "call-service", service: "scene.turn_on", service_data: { - entity_id: bConfig.entity - } + entity_id: bConfig.entity, + }, }; } else { bConfig.tap_action = { action: "more-info" }; diff --git a/src/presets.ts b/src/presets.ts index 2b91a6a5..a4f37637 100644 --- a/src/presets.ts +++ b/src/presets.ts @@ -1,6 +1,6 @@ -import { ButtonConfig, PaperButtonRowConfig } from "./types"; -import deepmerge from "deepmerge"; import { getLovelace } from "custom-card-helpers"; +import deepmerge from "deepmerge"; +import { ButtonConfig, PaperButtonRowConfig } from "./types"; let lovelace = getLovelace(); @@ -14,7 +14,7 @@ export function handleButtonPreset( return preset ? deepmerge( { - mushroom: presetMushroom + mushroom: presetMushroom, }[preset] || userPresets[preset] || {}, @@ -38,7 +38,7 @@ const presetMushroom: ButtonConfig = { "--pbs-button-rgb-bg-color": "var(--pbs-button-rgb-color)", "--pbs-button-rgb-bg-active-color": "var(--pbs-button-rgb-active-color)", "--pbs-button-rgb-bg-opacity": "0.05", - "--pbs-button-rgb-bg-active-opacity": "0.2" - } - } + "--pbs-button-rgb-bg-active-opacity": "0.2", + }, + }, }; diff --git a/src/template.ts b/src/template.ts index 2ee91a00..91fabf77 100644 --- a/src/template.ts +++ b/src/template.ts @@ -48,7 +48,7 @@ export function subscribeTemplate(this: PaperButtonsRow, config, object, key) { this._templates?.push({ template: option, - callback: res => res && (object[key] = res) + callback: res => res && (object[key] = res), }); } else if (hasTemplate(option)) { subscribeRenderTemplate( @@ -59,7 +59,7 @@ export function subscribeTemplate(this: PaperButtonsRow, config, object, key) { }, { template: option, - variables: { config: config } + variables: { config: config }, } ); object[key] = ""; diff --git a/vite.config.ts b/vite.config.ts index 6dd83a45..c939a3f0 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,6 @@ // https://vitejs.dev/config/ -import { defineConfig } from "vite"; import { execSync } from "child_process"; +import { defineConfig } from "vite"; import pkg from "./package.json"; const quoteCommand = command => { @@ -18,11 +18,11 @@ export default defineConfig({ build: { lib: { entry: "src/main.ts", - formats: ["es"] - } + formats: ["es"], + }, }, esbuild: { - legalComments: "none" + legalComments: "none", }, define: { __NAME__: JSON.stringify(pkg.name.toUpperCase()), @@ -30,6 +30,6 @@ export default defineConfig({ __COMMIT__: quoteCommandOrEnv("git rev-parse HEAD", "GITHUB_SHA"), __VERSION__: quoteCommand("git describe --tags --dirty --always"), __REPO_URL__: quoteCommand("git remote get-url origin").replace(".git", ""), - __BUILD_TIME__: JSON.stringify(new Date().toISOString()) - } + __BUILD_TIME__: JSON.stringify(new Date().toISOString()), + }, });