refactor: Update ESLint configuration to ignore scripts folder

ngocjohn · Oct 27, 2024 · 649f002 · 649f002
1 parent 8765d18
commit 649f002
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 62 deletions.
diff --git a/babel.config.json b/babel.config.json
diff --git a/package.json b/package.json
@@ -27,9 +27,6 @@
     "lit": "^3.1.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/plugin-proposal-decorators": "^7.17.8",
-    "@babel/plugin-transform-class-properties": "^7.24.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-terser": "^0.4.4",
@@ -53,7 +50,6 @@
     "postcss-preset-env": "^10.0.0",
     "prettier": "^3.3.2",
     "rollup": "^2.70.1",
-    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -80,4 +76,4 @@
     "import-lang": "node scripts/generate-lang-imports.js",
     "start:hass": "docker run --rm -p8123:8123 -v ${HOME}/Documents/GitHub/custom-cards-project/.hass_dev:/config homeassistant/home-assistant:beta"
   }
-}
+}
diff --git a/src/components/cards/vic-vehicle-buttons.ts b/src/components/cards/vic-vehicle-buttons.ts
@@ -167,8 +167,6 @@ export class VehicleButtons extends LitElement {
     if (this.activeSlideIndex !== 0 && this.swiper) {
       this.swiper.slideTo(this.activeSlideIndex, 0, false);
     }
-
-    // console.log('swiper init done');
   }
 
   private _renderSwiper(): TemplateResult {
@@ -293,6 +291,27 @@ export class VehicleButtons extends LitElement {
     }, {} as ButtonCardEntity);
   };
 
+  private applyMarquee() {
+    this.updateComplete.then(() => {
+      const items = this.shadowRoot?.querySelectorAll('.primary') as NodeListOf<HTMLElement>;
+      if (!items) return;
+      items.forEach((item) => {
+        const itemText = item.querySelector('span');
+        if (item.scrollWidth > item.clientWidth) {
+          item.classList.add('title-wrap');
+          itemText?.classList.add('marquee');
+          setTimeout(() => {
+            itemText?.classList.remove('marquee');
+            item.classList.remove('title-wrap');
+          }, 18000);
+        } else {
+          item.classList.remove('title-wrap');
+          itemText?.classList.remove('marquee');
+        }
+      });
+    });
+  }
+
   private _setButtonActions = (): void => {
     const buttons = this._buttons;
     Object.keys(buttons).forEach((btn) => {
@@ -309,7 +328,7 @@ export class VehicleButtons extends LitElement {
         // console.log('Default button action added:', btnId);
       }
     });
-    // console.log('Button actions set');
+    this.applyMarquee();
   };
 
   private _handleClick = (btnId: string): void => {

diff --git a/src/const/imgconst.ts b/src/const/imgconst.ts
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -288,6 +288,7 @@ header h1 {
   flex-direction: row;
   align-items: center;
   gap: var(--vic-card-padding);
+  width: 100%;
 }
 
 
@@ -336,12 +337,24 @@ header h1 {
 }
 
 .grid-item .item-content .primary {
-  font-weight: 500;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
   font-size: 1rem;
+  font-weight: 500;
+
+}
+
+.grid-item .item-content>.primary>.title {
+  display: inline-block;
   white-space: nowrap;
-  position: relative;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  font-size: 1rem;
 }
 
 .grid-item .item-content .secondary {
@@ -366,7 +379,7 @@ header h1 {
   position: absolute;
   bottom: 0;
   left: -15px;
-  width: 40%;
+  width: 15%;
   height: 100%;
   background-image: linear-gradient(to left,
       transparent 0,

diff --git a/src/vehicle-info-card.ts b/src/vehicle-info-card.ts
@@ -8,7 +8,6 @@ import {
   LovelaceCardConfig,
   LovelaceCardEditor,
   applyThemesOnElement,
-  LovelaceCard,
 } from 'custom-card-helpers';
 import { LitElement, html, TemplateResult, PropertyValues, CSSResultGroup, nothing } from 'lit';
 import { styleMap } from 'lit-html/directives/style-map.js';
@@ -17,8 +16,8 @@ import { customElement, property, state, query } from 'lit/decorators.js';
 import './components/cards';
 import { VehicleButtons, VehicleMap } from './components/cards';
 import { CardItem, cardTypes } from './const/data-keys';
-import * as IMG from './const/imgconst';
 import * as StateMapping from './const/state-mapping';
+import { IMAGE } from './const/imgconst';
 import { localize } from './localize/localize';
 import {
   HA as HomeAssistant,
@@ -40,12 +39,28 @@ import { getAddedButton, getDefaultButton, createCardElement, createCustomButton
 import styles from './css/styles.css';
 
 @customElement('vehicle-info-card')
-export class VehicleCard extends LitElement implements LovelaceCard {
+export class VehicleCard extends LitElement {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import('./editor');
     return document.createElement('vehicle-info-card-editor');
   }
   // Properties
+  @property({ attribute: false })
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+    if (this._buttonReady && this.buttonCards) {
+      Object.keys(this.buttonCards).forEach((key) => {
+        const customCard = this.buttonCards[key].custom_card;
+        const useCustom = this.buttonCards[key].card_type === 'custom';
+        if (useCustom && !isEmpty(customCard)) {
+          customCard.forEach((card) => {
+            card.hass = hass;
+          });
+        }
+      });
+    }
+  }
+
   @state() _hass!: HomeAssistant;
   @property({ type: Object }) public config!: VehicleCardConfig;
   @property({ type: Boolean }) public editMode = false;
@@ -80,21 +95,6 @@ export class VehicleCard extends LitElement implements LovelaceCard {
     this.handleEditorEvents = this.handleEditorEvents.bind(this);
   }
 
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-    if (this._buttonReady && this.buttonCards) {
-      Object.keys(this.buttonCards).forEach((key) => {
-        const customCard = this.buttonCards[key].custom_card;
-        const useCustom = this.buttonCards[key].card_type === 'custom';
-        if (useCustom && !isEmpty(customCard)) {
-          customCard.forEach((card) => {
-            card.hass = hass;
-          });
-        }
-      });
-    }
-  }
-
   get userLang(): string {
     if (!this.config.selected_language || this.config.selected_language === 'system') {
       return this._hass.language;
@@ -182,10 +182,6 @@ export class VehicleCard extends LitElement implements LovelaceCard {
       return false;
     }
 
-    if (_changedProps.has('_currentCardType') && !this._currentCardType && !this.editMode) {
-      this.applyMarquee();
-    }
-
     if (_changedProps.has('config') && this.config.selected_theme?.theme !== 'default') {
       this.applyTheme(this.config.selected_theme.theme);
     }
@@ -366,15 +362,15 @@ export class VehicleCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card>
         <div class="loading-image" style="height: ${cardHeight}px">
-          <img src="${IMG.logoLoading}" alt="Loading" />
+          <img src="${IMAGE.LOADING}" alt="Loading" />
         </div>
       </ha-card>
     `;
   }
 
   private _renderHeaderBackground(): TemplateResult | typeof nothing {
     if (!this.config.show_background || this._currentCardType !== null) return nothing;
-    const background = this.isDark ? IMG.amgWhite : IMG.amgBlack;
+    const background = this.isDark ? IMAGE.BACK_WHITE : IMAGE.BACK_DARK;
 
     return html` <div class="header-background" style="background-image: url(${background})"></div> `;
   }
@@ -728,7 +724,7 @@ export class VehicleCard extends LitElement implements LovelaceCard {
   private _renderDefaultTyreCard(): TemplateResult {
     if (!this.DataKeys.tyrePressures) return html``;
     const tireConfig = this.config?.extra_configs?.tire_card_custom || {};
-    const customTyreBg = tireConfig?.background || IMG.tyreBg;
+    const customTyreBg = tireConfig?.background || IMAGE.BACK_TYRE;
     const isHorizontal = tireConfig?.horizontal ?? false;
     const tireImageSize = tireConfig?.image_size ?? 100;
     const tireValueSize = tireConfig?.value_size ?? 100;
@@ -1473,27 +1469,6 @@ export class VehicleCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private applyMarquee() {
-    this.updateComplete.then(() => {
-      const items = this.shadowRoot?.querySelectorAll('.primary') as NodeListOf<HTMLElement>;
-      if (!items) return;
-      items.forEach((item) => {
-        const itemText = item.querySelector('span');
-        if (item.scrollWidth > item.clientWidth) {
-          item.classList.add('title-wrap');
-          itemText?.classList.add('marquee');
-          setTimeout(() => {
-            itemText?.classList.remove('marquee');
-            item.classList.remove('title-wrap');
-          }, 18000);
-        } else {
-          item.classList.remove('title-wrap');
-          itemText?.classList.remove('marquee');
-        }
-      });
-    });
-  }
-
   /* ----------------------------- EVENTS HANDLERS ---------------------------- */
 
   private handleEditorEvents(e: Event): void {