Changes browser targets and simplfy notification responses, reduces external dependencies.

- Fixes: Apexcharts no longer supports functions as color.
- Changed: nut-notification's dismiss triggers can be defined within the
  special container class. Component itself automatically attaches to
  clickable DOM elements for dismiss action.
- Changed: Bumps all dependencies to the latest.
- Changed: Updates target browser versions based on 2023 usage reports.
- Changed: Inlined NUT parser functions. (-O flag most likely inline
  them anyway.)
- Removed: Unique id generation for notifications elements.

Author: SuperioOne

client/package.json

@@ -8,20 +8,20 @@
   "version": "0.4.0",
   "description": "Bundles all client side web components and dependencies.",
   "scripts": {
-    "dev-js": "esbuild ./src/index.js --bundle --outdir=./dist/debug --target=firefox98,chrome86,safari15 --format=iife --watch=forever",
+    "dev-js": "esbuild ./src/index.js --bundle --outdir=./dist/debug --target=firefox109,chrome108,safari15 --format=iife --watch=forever",
     "dev-css": "tailwindcss -i ./src/style.css -o ./dist/debug/style.css --minify --watch",
     "build": "node ./scripts/build.js --outdir=./dist/release"
   },
   "keywords": [],
   "author": "Timur Olur",
   "devDependencies": {
-    "daisyui": "^4.12.13",
+    "daisyui": "^4.12.14",
     "esbuild": "^0.24.0",
-    "tailwindcss": "^3.4.13",
-    "typescript": "^5.6.3"
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.7.2"
   },
   "dependencies": {
-    "apexcharts": "3.53.0",
+    "apexcharts": "3.54.1",
     "htmx.org": "^2.0.3",
     "idiomorph": "^0.3.0"
   }

client/pnpm-lock.yaml

@@ -134,7 +134,7 @@ async function build(config) {
     entryPoints: ["./src/index.js"],
     format: "iife",
     minify: config.minify,
-    target: ["firefox98", "chrome86", "safari15"],
+    target: ["firefox109", "chrome108", "safari15"],
     treeShaking: true,
     outdir: config.outdir,
   });

client/scripts/build.js

@@ -1,6 +1,8 @@
 import { link_host_styles } from "../../utils.js";
 import ApexCharts from "apexcharts";
 
+/** @import {ApexOptions} from "apexcharts" */
+
 /**
  * @typedef {"value" | "height" | "width" | "theme" | "class" } AttributeKeys
  */
@@ -11,8 +13,23 @@ export default class Gauge extends HTMLElement {
   /** @type {() => void} **/
   #theme_listener = () => {
     if (this.#chart) {
-      // Re-renders chart to update svg fill colors when theme updated.
-      this.#chart.updateOptions({}, false, false).catch(console.error);
+      /** @type {ApexOptions} **/
+      const new_options = {
+        plotOptions: {
+          radialBar: {
+            dataLabels: {
+              value: {
+                color: [window.getComputedStyle(this).color],
+              },
+            },
+          },
+        },
+        fill: {
+          colors: [window.getComputedStyle(this).fill],
+        },
+      };
+
+      this.#chart.updateOptions(new_options, false, false).catch(console.error);
     }
   };
 
@@ -36,6 +53,7 @@ export default class Gauge extends HTMLElement {
     let value_number = Number(value_text);
     value_number = isNaN(value_number) ? 0 : value_number;
 
+    /** @type {ApexOptions} **/
     const options = {
       series: [value_number],
       chart: {
@@ -67,14 +85,14 @@ export default class Gauge extends HTMLElement {
             value: {
               offsetY: -2,
               fontSize: "2.5rem",
-              color: [() => window.getComputedStyle(this).color],
+              color: [window.getComputedStyle(this).color],
             },
           },
         },
       },
       fill: {
         type: "solid",
-        colors: [() => window.getComputedStyle(this).fill],
+        colors: [window.getComputedStyle(this).fill],
         opacity: 0.5,
       },
     };
@@ -94,7 +112,7 @@ export default class Gauge extends HTMLElement {
    * @param {string} old_value
    * @param {string} new_value
    */
-  attributeChangedCallback(name, old_value, new_value) {
+  attributeChangedCallback(name, _old_value, new_value) {
     if (!this.#chart) return;
 
     switch (name) {

client/src/components/charts/gauge.js

@@ -1,6 +1,7 @@
-/**
- * @typedef {"ttl" | "title"  | "closeable" | "type"} AttributeKeys
- */
+/** @typedef {"ttl" | "title"  | "closeable" | "type"} AttributeKeys */
+
+const TRIGGER_QUERY =
+  ".nut-notification-trigger button, .nut-notification-trigger a, .nut-notification-trigger [role=button]";
 
 export default class NutNotification extends HTMLElement {
   /** @type {number|undefined} */
@@ -15,6 +16,11 @@ export default class NutNotification extends HTMLElement {
     const ttl_attr = Number(this.getAttribute("ttl"));
     const type = this.getAttribute("type") ?? "info";
     const ttl = isNaN(ttl_attr) || ttl_attr < 1 ? 3000 : ttl_attr;
+    const dismissElements = this.querySelectorAll(TRIGGER_QUERY);
+
+    for (const element of dismissElements) {
+      element.addEventListener("click", () => this?.remove());
+    }
 
     this.className = `${this.className} alert alert-${type}`;
     this.#timer = setTimeout(() => {