feat(images): enhance image slider with multiple file upload support (#209)

Author: ngocjohn

package.json

@@ -37,6 +37,8 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@types/leaflet": "^1.9.20",
     "@types/leaflet-providers": "^1.2.5",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^24.7.1",
     "@typescript-eslint/eslint-plugin": "^8.45.0",
     "@typescript-eslint/parser": "^8.45.0",
     "@watchable/unpromise": "^1.0.2",
@@ -51,7 +53,6 @@
     "leaflet": "^1.9.4",
     "leaflet-providers": "^2.0.0",
     "lint-staged": "^16.2.3",
-    "npm": "^11.6.1",
     "postcss-preset-env": "^10.4.0",
     "rollup": "^4.52.4",
     "rollup-plugin-postcss": "^4.0.2",
@@ -64,6 +65,7 @@
   },
   "scripts": {
     "start": "rollup -c rollup.config.js --bundleConfigAsCjs --watch",
+    "dev": "pnpm run start",
     "build": "pnpm run lint && pnpm run rollup",
     "lint": "eslint src/**/*.ts",
     "rollup": "rollup -c rollup.config.js --bundleConfigAsCjs",
@@ -74,4 +76,4 @@
     "clean_delfiles": "rm -rf node_modules/.cache/rollup-plugin-typescript2/*",
     "clean_deldirs": "rm -rf node_modules/.cache/rollup-plugin-typescript2/rpt2_*"
   }
-}
+}

pnpm-lock.yaml

@@ -45,20 +45,13 @@ export default [
       {
         file: fileOutput,
         format: 'es',
-        sourcemap: dev,
         inlineDynamicImports: true,
-        banner: custombanner,
-        sourcemapIgnoreList: (relativeSourcePath, sourcemapPath) => {
-          // will ignore-list all files with node_modules in their paths
-          return relativeSourcePath.includes('node_modules');
-        },
+        sourcemap: dev,
+        banner: !dev ? custombanner : undefined,
       },
     ],
     watch: {
-      chokidar: {
-        // Workaround for WSL2-based Docker
-        usePolling: true,
-      },
+      exclude: 'node_modules/**',
     },
     plugins: [...defaultPlugins, ...plugins],
     moduleContext: (id) => {

rollup.config.js

@@ -1,4 +1,4 @@
-import { isEmpty } from 'es-toolkit/compat';
+import isEmpty from 'es-toolkit/compat/isEmpty';
 import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 

src/components/shared/vsc-default-card.ts

@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, PropertyValues, TemplateResult, unsafeCSS } from 'lit';
+import { css, CSSResultGroup, html, nothing, PropertyValues, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import Swiper from 'swiper';
@@ -7,7 +7,7 @@ import swipercss from 'swiper/swiper-bundle.css';
 import { SwiperOptions } from 'swiper/types';
 
 import { COMPONENT } from '../constants/const';
-import { VehicleStatusCardConfig, ImageItem } from '../types/config';
+import { VehicleStatusCardConfig, ImageItem, ImagesSwipeConfig } from '../types/config';
 import { SECTION } from '../types/section';
 import './shared/vsc-image-item';
 import { BaseElement } from '../utils/base-element';
@@ -43,34 +43,20 @@ export class ImagesSlide extends BaseElement {
       return html``;
     }
     const images = this._images;
-    let styleImages: Record<string, string> = {};
-    const { height, width, hide_pagination } = this.config.layout_config?.images_swipe || {};
-    if (height) {
-      styleImages['--vic-images-slide-height'] = `${height}px`;
-    }
-    if (width) {
-      styleImages['--vic-images-slide-width'] = `${width}px`;
-    }
+    const hide_pagination = this.config.layout_config?.images_swipe?.hide_pagination;
 
     return html`
-      <section id="swiper" style=${styleMap(styleImages)}>
-        <div class="swiper-container">
-          <div class="swiper-wrapper">
-            ${images.map(
-              (image, index) => html`
-                <vsc-image-item
-                  class="swiper-slide"
-                  id="image-slide-${index}"
-                  .hass=${this.hass}
-                  ._imageConfig=${image}
-                >
-                </vsc-image-item>
-              `
-            )}
-          </div>
-          <div class="swiper-pagination" ?hidden=${hide_pagination}></div>
+      <div class="swiper-container" style=${this._computeStyle()}>
+        <div class="swiper-wrapper">
+          ${images.map(
+            (image, index) => html`
+              <vsc-image-item class="swiper-slide" id="image-slide-${index}" .hass=${this.hass} ._imageConfig=${image}>
+              </vsc-image-item>
+            `
+          )}
         </div>
-      </section>
+        ${!hide_pagination ? html`<div class="swiper-pagination"></div>` : nothing}
+      </div>
     `;
   }
 
@@ -136,6 +122,26 @@ export class ImagesSlide extends BaseElement {
     this.swiper = new Swiper(swiperCon, swiperConfig());
   }
 
+  private _computeStyle() {
+    const slideConfig = this.config.layout_config?.images_swipe as ImagesSwipeConfig;
+    const { height, width, hide_pagination } = slideConfig || {};
+
+    let styleImages: Record<string, string> = {};
+    if (height) {
+      styleImages['--vic-images-slide-height'] = `${height}px`;
+    }
+    if (width) {
+      styleImages['--vic-images-slide-width'] = `${width}px`;
+    }
+    if (hide_pagination || this.swiper?.isLocked) {
+      styleImages['padding-bottom'] = '0';
+    }
+    if (this.parentElement?.previousElementSibling !== null) {
+      styleImages['padding-top'] = 'var(--vic-card-padding)';
+    }
+    return styleMap(styleImages);
+  }
+
   public showImage(index: number): void {
     this.updateComplete.then(() => {
       const imgId = `image-slide-${index}`;
@@ -156,28 +162,25 @@ export class ImagesSlide extends BaseElement {
 
   static get styles(): CSSResultGroup {
     return [
-      super.styles,
       unsafeCSS(swipercss),
       css`
         :host {
-          --swiper-pagination-bottom: -4px;
+          --swiper-pagination-bottom: 0px;
           --swiper-theme-color: var(--primary-text-color);
         }
-        * [hidden] {
-          display: none !important;
-        }
-        section {
-          display: block;
-          padding: 1em 0px 8px;
-        }
-        .swiper-wrapper {
-          display: flex;
-        }
+
         .swiper-container {
+          padding: 0 0 var(--vic-card-padding) 0;
+          border: none !important;
+          background: none !important;
+          overflow: visible;
           width: 100%;
           height: 100%;
-          display: block;
         }
+        /* .swiper-wrapper {
+					flex-direction: initial;
+					flex-wrap: wrap;
+				} */
         .swiper-slide {
           display: flex;
           justify-content: center;
@@ -189,20 +192,11 @@ export class ImagesSlide extends BaseElement {
         .swiper-slide:active {
           scale: 1.02;
         }
-        .swiper-slide .image-index {
-          position: absolute;
-          bottom: 0;
-          left: var(--vic-card-padding);
-          padding: var(--vic-gutter-gap);
-          background-color: var(--swiper-theme-color);
-          color: var(--primary-background-color);
-          font-size: 1rem;
-          font-weight: bold;
-          z-index: 1;
-        }
 
         .swiper-pagination {
-          display: block;
+          /* margin-top: var(--swiper-pagination-bottom); */
+          display: flex;
+          justify-content: center;
         }
         .swiper-pagination-bullet {
           background-color: var(--swiper-theme-color);

src/components/vsc-images-slide.ts

@@ -1,4 +1,4 @@
-import { isEmpty } from 'es-toolkit/compat';
+import isEmpty from 'es-toolkit/compat/isEmpty';
 import { HomeAssistantStylesManager } from 'home-assistant-styles-manager';
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -8,12 +8,13 @@ import { EditorConfigAreaSelectedEvent } from '../events';
 import { EditorIndicatorRowSelectedEvent } from '../events/editor-indicator-row';
 import { fireEvent, HomeAssistant } from '../ha';
 import { showFormDialog } from '../ha/dialogs/form/show-form-dialog';
+import { showToast } from '../ha/panels/lovelace/toast';
 import { SectionOrder, VehicleStatusCardConfig } from '../types/config';
 import { ConfigArea } from '../types/config-area';
 import { SECTION } from '../types/section';
 import { Create } from '../utils';
 import { getSectionFromConfigArea } from '../utils/editor/area-select';
-import { selectTree } from '../utils/helpers-dom';
+import * as DomHelper from '../utils/helpers-dom';
 import { Store } from '../utils/store';
 import { VehicleStatusCard } from '../vehicle-status-card';
 import { VehicleStatusCardEditor } from './editor';
@@ -57,7 +58,7 @@ export class BaseEditor extends LitElement {
   @property({ attribute: false }) public _hass!: HomeAssistant;
   @property({ attribute: false }) protected _store!: Store;
 
-  @property() _domHelper = selectTree;
+  @property({ attribute: false }) _domHelper = DomHelper;
 
   protected _stylesManager: HomeAssistantStylesManager;
 
@@ -123,6 +124,16 @@ export class BaseEditor extends LitElement {
     });
   }
 
+  protected showToast = (message: string, duration = 3000) => {
+    const localId = this.localName || 'base-editor';
+    const params = {
+      id: localId,
+      message,
+      duration,
+    };
+    return showToast(this, params);
+  };
+
   protected _getButtonGridCols(): number {
     const cols = this._cardConfig?.layout_config?.button_grid?.columns || 2;
     return Math.max(2, Math.min(cols, 4)); // Clamp between 2 and 4

src/editor/base-editor.ts

@@ -1,5 +1,6 @@
-import { capitalize } from 'es-toolkit';
-import { isEmpty, omit } from 'es-toolkit/compat';
+import isEmpty from 'es-toolkit/compat/isEmpty';
+import omit from 'es-toolkit/compat/omit';
+import { capitalize } from 'es-toolkit/string';
 import { html, TemplateResult, CSSResultGroup, css, PropertyValues, nothing } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
 
@@ -224,10 +225,12 @@ export class PanelButtonCardMain extends ButtonCardBaseEditor {
     let secondary = isBase ? btnIndexLabel : `${btnIndexLabel} · Sub-Card`;
     const icon = isBase ? 'close' : 'back';
     if (area === ButtonArea.DEFAULT_CARD && !isEmpty(this._subLabelSecondary)) {
-      label = this._subLabelSecondary.label;
-      if (this._subLabelSecondary.secondary) {
-        // label += ` · ${this._subLabelSecondary.secondary}`;
-        secondary = this._subLabelSecondary.secondary;
+      const subLabelSecondary = this._subLabelSecondary;
+      if (subLabelSecondary) {
+        label = subLabelSecondary.label;
+        if (subLabelSecondary.secondary) {
+          secondary = subLabelSecondary.secondary;
+        }
       }
     }