vue-data-ui 3.15.12 → 3.16.1

package/dist/{vue-ui-thermometer-sjruUGQx.js → vue-ui-thermometer-BN8tflOz.js}

@@ -1,28 +1,29 @@
-import { useCssVars as Ke, defineAsyncComponent as Q, ref as d, computed as h, onMounted as Je, toRefs as Qe, watch as Ze, openBlock as r, createElementBlock as n, unref as u, normalizeStyle as pe, normalizeClass as V, createBlock as Y, withCtx as f, renderSlot as v, normalizeProps as y, guardReactiveProps as g, createCommentVNode as c, createSlots as et, createVNode as tt, createElementVNode as p, Fragment as E, renderList as ke, toDisplayString as ot, nextTick as st } from "vue";
-import { j as at, t as be, o as lt, q as we, r as rt, m as nt, p as S, n as ut, K as b, s as H, X as it, u as ct, k as ht, l as vt } from "./lib-GwPnJSrY.js";
-import { t as dt, u as ft } from "./useResponsive-DfdjqQps.js";
-import { u as mt } from "./useConfig-CIgyKZ6R.js";
-import { u as yt, B as gt } from "./BaseScanner-BhhkKVoj.js";
-import { u as pt } from "./usePrinter-DiK5R6k-.js";
-import { u as kt } from "./useSvgExport-ByUukOZt.js";
-import { u as Z } from "./useNestedProp-BBT0mbHh.js";
-import { u as bt } from "./useThemeCheck-D1ZYXUwG.js";
-import { u as wt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Ct } from "./useChartAccessibility-9icAAmYg.js";
-import { u as xt } from "./useAutoSizeLabelsInsideViewbox-80fzdfxt.js";
-import _t from "./vue_ui_thermometer-BTmjRBH8.js";
-import $t from "./Title-BfyrP-jp.js";
-import At from "./img-BYYzY_QU.js";
-import { _ as Pt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Ot = ["id"], St = {
+import { useCssVars as st, defineAsyncComponent as Z, ref as d, computed as i, onMounted as at, toRefs as lt, watch as rt, openBlock as r, createElementBlock as u, unref as c, normalizeStyle as we, normalizeClass as V, createBlock as N, withCtx as f, renderSlot as h, normalizeProps as p, guardReactiveProps as k, createCommentVNode as v, createSlots as nt, createElementVNode as m, toDisplayString as ee, createVNode as ut, Fragment as Y, renderList as xe, nextTick as it } from "vue";
+import { j as ct, t as Ce, o as vt, q as _e, r as ht, m as dt, p as I, n as ft, K as y, s as E, k as mt, l as yt, X as gt, u as pt } from "./lib-DBptbyyI.js";
+import { t as kt, u as bt } from "./useResponsive-DfdjqQps.js";
+import { u as wt } from "./useConfig-DO94Aj5s.js";
+import { u as xt, B as Ct } from "./BaseScanner-BhhkKVoj.js";
+import { u as _t } from "./usePrinter-CEpYU3r5.js";
+import { u as $t } from "./useSvgExport-ByUukOZt.js";
+import { u as te } from "./useNestedProp-Bf5XFbs8.js";
+import { u as At } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as Pt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Ot } from "./useChartAccessibility-9icAAmYg.js";
+import { u as It } from "./usePrefersMotion-CUKm8_t8.js";
+import { u as St } from "./useAutoSizeLabelsInsideViewbox-DX7LdvFX.js";
+import Ft from "./vue_ui_thermometer-BTmjRBH8.js";
+import Tt from "./Title-BeMKE1cj.js";
+import Mt from "./img-LXxMLmCg.js";
+import { _ as Ut } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const zt = ["id"], Wt = {
   key: 1,
   ref: "noTitle",
   class: "vue-data-ui-no-title-space",
   style: "height:36px; width: 100%;background:transparent"
-}, It = ["xmlns", "viewBox"], Ft = ["width", "height"], Tt = ["id"], Mt = ["x", "y", "width", "height", "rx", "ry"], Ut = ["id"], zt = ["stop-color"], Wt = ["stop-color"], Lt = ["stop-color"], Nt = ["clip-path"], Vt = ["x", "y", "height", "width"], Yt = ["x", "y", "height", "width", "fill"], Et = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Ht = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], qt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Rt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Gt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Dt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Bt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], jt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Xt = ["x", "y", "height", "width"], Kt = { key: 1 }, Jt = ["x", "y", "height"], Qt = ["y", "x", "fill", "font-size", "font-weight"], Zt = {
+}, Lt = ["xmlns", "viewBox", "aria-labelledby", "aria-describedby"], Rt = ["id"], Vt = ["id"], Nt = ["width", "height"], Yt = ["id"], Et = ["x", "y", "width", "height", "rx", "ry"], Ht = ["id"], qt = ["stop-color"], Dt = ["stop-color"], Gt = ["stop-color"], Bt = ["clip-path"], jt = ["x", "y", "height", "width"], Xt = ["x", "y", "height", "width", "fill"], Kt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Jt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Qt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Zt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], eo = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], to = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], oo = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], so = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], ao = ["x", "y", "height", "width"], lo = ["aria-label"], ro = ["x", "y", "height"], no = ["y", "x", "fill", "font-size", "font-weight"], uo = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, eo = {
+}, io = {
   __name: "vue-ui-thermometer",
   props: {
     dataset: {
@@ -39,17 +40,17 @@ const Ot = ["id"], St = {
     }
   },
   emits: ["copyAlt"],
-  setup(I, { expose: Ce, emit: xe }) {
-    Ke((o) => ({
-      v1ecd0f6c: Ne.value,
-      b11332bc: Le.value,
-      v4b513c0f: We.value
+  setup($e, { expose: Ae, emit: Pe }) {
+    st((o) => ({
+      v2c2fe85d: He.value,
+      v466eabd1: Ee.value,
+      v2eb1fe04: Ye.value
     }));
-    const _e = Q(() => import("./PackageVersion-DN9d0ME5.js")), $e = Q(() => import("./PenAndPaper-DWV1FMIi.js")), Ae = Q(() => import("./UserOptions-CrLqEimB.js")), { vue_ui_thermometer: Pe } = mt(), { isThemeValid: Oe, warnInvalidTheme: Se } = bt(), m = I, Ie = xe, w = d(at()), C = d(null), ee = d(0), te = d(0), oe = d(null), se = d(null), _ = d(null), F = d(null), T = d(!1), M = d(!1), Fe = h(() => !!m.dataset && Object.keys(m.dataset).length);
-    Je(() => {
-      ne();
+    const Oe = Z(() => import("./PackageVersion-DPO-OOVI.js")), Ie = Z(() => import("./PenAndPaper-Ct3qJ4lA.js")), Se = Z(() => import("./UserOptions-rW2fRf3V.js")), { vue_ui_thermometer: Fe } = wt(), { isThemeValid: Te, warnInvalidTheme: Me } = At(), Ue = It(), g = $e, ze = Pe, b = d(ct()), x = d(null), oe = d(0), se = d(0), ae = d(null), le = d(null), _ = d(null), S = d(null), F = d(!1), T = d(!1), We = i(() => !!g.dataset && Object.keys(g.dataset).length);
+    at(() => {
+      ue();
     });
-    const e = d(D()), Te = d(e.value.style.chart.thermometer.width), q = d(e.value.style.chart.height), R = d(e.value.style.chart.width), ae = h(() => e.value.userOptions.useCursorPointer), Me = h(() => be({
+    const e = d(G()), Le = d(e.value.style.chart.thermometer.width), H = d(e.value.style.chart.height), q = d(e.value.style.chart.width), re = i(() => e.value.userOptions.useCursorPointer), Re = i(() => Ce({
       defaultConfig: {
         userOptions: { show: !1 },
         style: {
@@ -63,84 +64,84 @@ const Ot = ["id"], St = {
         }
       },
       userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: le, FINAL_DATASET: i } = yt({
-      ...Qe(m),
+    })), { loading: M, FINAL_DATASET: n } = xt({
+      ...lt(g),
       FINAL_CONFIG: e,
-      prepareConfig: D,
-      skeletonDataset: m.config?.skeletonDataset ?? { value: 0, from: -100, to: 100, steps: 20, colors: { from: "#A1A1A1", to: "#CACACA" } },
-      skeletonConfig: be({
+      prepareConfig: G,
+      skeletonDataset: g.config?.skeletonDataset ?? { value: 0, from: -100, to: 100, steps: 20, colors: { from: "#A1A1A1", to: "#CACACA" } },
+      skeletonConfig: Ce({
         defaultConfig: e.value,
-        userConfig: Me.value
+        userConfig: Re.value
       })
-    }), re = h(() => !!e.value.debug);
-    function ne() {
-      if (lt(m.dataset) ? we({
+    }), ne = i(() => !!e.value.debug);
+    function ue() {
+      if (vt(g.dataset) ? _e({
         componentName: "VueUiThermometer",
         type: "dataset",
-        debug: re.value
-      }) : rt({
-        datasetObject: m.dataset,
+        debug: ne.value
+      }) : ht({
+        datasetObject: g.dataset,
         requiredAttributes: ["value", "from", "to"]
       }).forEach((o) => {
-        we({
+        _e({
           componentName: "VueUiThermometer",
           type: "datasetAttribute",
           property: o,
-          debug: re.value
+          debug: ne.value
         });
       }), e.value.responsive) {
-        const o = dt(() => {
-          const { width: a, height: t } = ft({
-            chart: C.value,
-            title: e.value.style.title.text ? oe.value : null,
-            source: se.value
+        const o = kt(() => {
+          const { width: a, height: t } = bt({
+            chart: x.value,
+            title: e.value.style.title.text ? ae.value : null,
+            source: le.value
           });
           requestAnimationFrame(() => {
-            q.value = Math.max(0.1, t - 12), R.value = a, me();
+            H.value = Math.max(0.1, t - 12), q.value = a, ye();
           });
         });
-        _.value && (F.value && _.value.unobserve(F.value), _.value.disconnect()), _.value = new ResizeObserver(o), F.value = C.value, _.value.observe(F.value);
+        _.value && (S.value && _.value.unobserve(S.value), _.value.disconnect()), _.value = new ResizeObserver(o), S.value = x.value, _.value.observe(S.value);
       }
-      me();
+      ye();
     }
-    const { userOptionsVisible: G, setUserOptionsVisibility: ue, keepUserOptionState: ie } = wt({ config: e.value }), { svgRef: U } = Ct({ config: e.value.style.title });
-    function D() {
-      const o = Z({
-        userConfig: m.config,
-        defaultConfig: Pe
+    const { userOptionsVisible: D, setUserOptionsVisibility: ie, keepUserOptionState: ce } = Pt({ config: e.value }), { svgRef: U } = Ot({ config: e.value.style.title });
+    function G() {
+      const o = te({
+        userConfig: g.config,
+        defaultConfig: Fe
       }), a = o.theme;
       if (!a) return o;
-      if (!Oe.value(o))
-        return Se(o), o;
-      const t = Z({
-        userConfig: _t[a] || m.config,
+      if (!Te.value(o))
+        return Me(o), o;
+      const t = te({
+        userConfig: Ft[a] || g.config,
         defaultConfig: o
-      }), l = Z({
-        userConfig: m.config,
+      }), l = te({
+        userConfig: g.config,
         defaultConfig: t
       });
       return {
         ...l,
-        customPalette: l.customPalette.length ? l.customPalette : nt[a] || S
+        customPalette: l.customPalette.length ? l.customPalette : dt[a] || I
       };
     }
-    Ze(() => m.config, (o) => {
-      e.value = D(), G.value = !e.value.userOptions.showOnChartHover, Te.value = e.value.style.chart.thermometer.width, q.value = e.value.style.chart.height, R.value = e.value.style.chart.width, ne(), te.value += 1;
+    rt(() => g.config, (o) => {
+      e.value = G(), D.value = !e.value.userOptions.showOnChartHover, Le.value = e.value.style.chart.thermometer.width, H.value = e.value.style.chart.height, q.value = e.value.style.chart.width, ue(), se.value += 1;
     }, { deep: !0 });
-    const { isPrinting: B, isImaging: j, generatePdf: ce, generateImage: he } = pt({
-      elementId: `thermometer__${w.value}`,
+    const { isPrinting: B, isImaging: j, generatePdf: ve, generateImage: he } = _t({
+      elementId: `thermometer__${b.value}`,
       fileName: e.value.style.title.text || "vue-ui-thermometer",
       options: e.value.userOptions.print
-    }), Ue = h(() => e.value.userOptions.show && !e.value.style.title.text), z = h(() => ut(e.value.customPalette)), k = h(() => i.value.steps || 10);
+    }), Ve = i(() => e.value.userOptions.show && !e.value.style.title.text), z = i(() => ft(e.value.customPalette)), w = i(() => n.value.steps || 10);
     function W(o, a, t) {
-      const l = [], x = ve(o), P = ve(a);
+      const l = [], C = de(o), P = de(a);
       for (let O = 0; O < t; O += 1) {
-        const De = X(x.red, P.red, O, t), Be = X(x.green, P.green, O, t), je = X(x.blue, P.blue, O, t), Xe = `#${K(De)}${K(Be)}${K(je)}`;
-        l.push(Xe);
+        const Ze = X(C.red, P.red, O, t), et = X(C.green, P.green, O, t), tt = X(C.blue, P.blue, O, t), ot = `#${K(Ze)}${K(et)}${K(tt)}`;
+        l.push(ot);
       }
       return l;
     }
-    function ve(o) {
+    function de(o) {
       const a = o.slice(1);
       return {
         red: parseInt(a.slice(0, 2), 16),
@@ -154,8 +155,8 @@ const Ot = ["id"], St = {
     function K(o) {
       return o.toString(16).padStart(2, "0");
     }
-    const s = h(() => {
-      const o = Math.max(0.1, R.value), a = Math.max(0.1, q.value), t = e.value.style.chart.padding;
+    const s = i(() => {
+      const o = Math.max(0.1, q.value), a = Math.max(0.1, H.value), t = e.value.style.chart.padding;
       return {
         width: o,
         left: o / 2 - e.value.style.chart.thermometer.width / 2,
@@ -166,47 +167,47 @@ const Ot = ["id"], St = {
         thermoHeight: a - t.top - t.bottom,
         thermoWidth: e.value.style.chart.thermometer.width
       };
-    }), ze = h(() => s.value), L = h(() => {
-      const o = b(i.value.from) < 0 ? Math.abs(b(i.value.from)) : b(i.value.from), a = b(i.value.to) < 0 ? Math.abs(b(i.value.to)) : b(i.value.to);
+    }), Ne = i(() => s.value), L = i(() => {
+      const o = y(n.value.from) < 0 ? Math.abs(y(n.value.from)) : y(n.value.from), a = y(n.value.to) < 0 ? Math.abs(y(n.value.to)) : y(n.value.to);
       let t = 0;
-      return b(i.value.to) > 0 ? t = o + a : o > a ? t = o - a : t = a - o, (1 - (Math.abs(b(i.value.from)) + b(i.value.value)) / t) * s.value.thermoHeight;
-    }), We = h(() => `${L.value}px`), Le = h(() => `${s.value.thermoHeight}px`), Ne = h(() => `${e.value.style.chart.animation.speedMs}ms`), Ve = h(() => {
-      if (i.value.colors) {
-        if (!i.value.colors.from)
-          return W(z.value[0] || S[0], H(i.value.colors.to), k.value || 10);
-        if (!i.value.colors.to)
-          return W(H(i.value.colors.from), z.value[1] || S[1], k.value || 10);
+      return y(n.value.to) > 0 ? t = o + a : o > a ? t = o - a : t = a - o, (1 - (Math.abs(y(n.value.from)) + y(n.value.value)) / t) * s.value.thermoHeight;
+    }), Ye = i(() => `${L.value}px`), Ee = i(() => `${s.value.thermoHeight}px`), He = i(() => Ue.value ? "0ms" : `${e.value.style.chart.animation.speedMs}ms`), qe = i(() => {
+      if (n.value.colors) {
+        if (!n.value.colors.from)
+          return W(z.value[0] || I[0], E(n.value.colors.to), w.value || 10);
+        if (!n.value.colors.to)
+          return W(E(n.value.colors.from), z.value[1] || I[1], w.value || 10);
       } else
-        return W(z.value[1] || S[1], z.value[0] || S[0], k.value || 10);
-      return W(H(i.value.colors.from), H(i.value.colors.to), k.value || 10);
-    }), de = h(() => {
+        return W(z.value[1] || I[1], z.value[0] || I[0], w.value || 10);
+      return W(E(n.value.colors.from), E(n.value.colors.to), w.value || 10);
+    }), fe = i(() => {
       const o = [];
       let a = 0;
       const t = s.value.thermoHeight;
-      for (let l = 0; l < t - 1; l += t / k.value)
+      for (let l = 0; l < t - 1; l += t / w.value)
         o.push({
           x: s.value.left,
           y: s.value.top + l,
-          qYLess: s.value.top + l + t / k.value / 4,
-          halfY: s.value.top + l + t / k.value / 2,
-          qYMore: s.value.top + l + t / k.value / 4 * 3,
-          color: Ve.value[a],
-          height: Math.max(0.1, t / k.value)
+          qYLess: s.value.top + l + t / w.value / 4,
+          halfY: s.value.top + l + t / w.value / 2,
+          qYMore: s.value.top + l + t / w.value / 4 * 3,
+          color: qe.value[a],
+          height: Math.max(0.1, t / w.value)
         }), a += 1;
       return o;
     }), $ = d(!1);
-    function fe(o) {
-      $.value = o, ee.value += 1;
+    function me(o) {
+      $.value = o, oe.value += 1;
     }
-    const N = d(!1);
+    const R = d(!1);
     function J() {
-      N.value = !N.value;
+      R.value = !R.value;
     }
-    async function Ye({ scale: o = 2 } = {}) {
-      if (!C.value) return;
-      const { width: a, height: t } = C.value.getBoundingClientRect(), l = a / t, { imageUri: x, base64: P } = await At({ domElement: C.value, base64: !0, img: !0, scale: o });
+    async function De({ scale: o = 2 } = {}) {
+      if (!x.value) return;
+      const { width: a, height: t } = x.value.getBoundingClientRect(), l = a / t, { imageUri: C, base64: P } = await Mt({ domElement: x.value, base64: !0, img: !0, scale: o });
       return {
-        imageUri: x,
+        imageUri: C,
         base64: P,
         title: e.value.style.title.text,
         width: a,
@@ -214,111 +215,126 @@ const Ot = ["id"], St = {
         aspectRatio: l
       };
     }
-    const A = h({
+    const A = i({
       get: () => e.value.style.chart.label.fontSize,
       set: (o) => o
-    }), { autoSizeLabels: me } = xt({
+    }), { autoSizeLabels: ye } = St({
       svgRef: U,
       fontSize: e.value.style.chart.label.fontSize,
       minFontSize: e.value.style.chart.label.minFontSize,
       sizeRef: A,
       labelClass: ".vue-ui-thermometer-label"
-    }), Ee = h(() => e.value.style.chart.backgroundColor), He = h(() => e.value.style.title), { exportSvg: qe, getSvg: Re } = kt({
+    }), Ge = i(() => e.value.style.chart.backgroundColor), Be = i(() => e.value.style.title), { exportSvg: je, getSvg: Xe } = $t({
       svg: U,
-      title: He,
-      backgroundColor: Ee
+      title: Be,
+      backgroundColor: Ge
     });
-    async function ye({ isCb: o }) {
-      M.value = !0, await st();
+    async function ge({ isCb: o }) {
+      T.value = !0, await it();
       try {
         if (o) {
-          const { blob: a, url: t, text: l, dataUrl: x } = await Re();
-          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: a, url: t, text: l, dataUrl: x }));
+          const { blob: a, url: t, text: l, dataUrl: C } = await Xe();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: a, url: t, text: l, dataUrl: C }));
         } else
-          await Promise.resolve(qe());
+          await Promise.resolve(je());
       } finally {
-        M.value = !1;
+        T.value = !1;
       }
     }
-    function Ge(o) {
+    function Ke(o) {
       if (o?.stage === "start") {
-        T.value = !0;
+        F.value = !0;
         return;
       }
       if (o?.stage === "end") {
-        T.value = !1;
+        F.value = !1;
         return;
       }
       he();
     }
-    async function ge() {
-      if (Ie("copyAlt", {
+    async function pe() {
+      if (ze("copyAlt", {
         config: e.value,
-        dataset: i.value
+        dataset: n.value
       }), !e.value.userOptions.callbacks.altCopy) {
         console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
         return;
       }
       await Promise.resolve(e.value.userOptions.callbacks.altCopy({
         config: e.value,
-        dataset: i.value
+        dataset: n.value
       }));
     }
-    return Ce({
-      getImage: Ye,
-      generatePdf: ce,
+    const ke = i(() => `${b.value}-title`), be = i(() => `${b.value}-desc`), Q = i(() => mt(
+      e.value.style.chart.label.formatter,
+      n.value.value,
+      yt({
+        p: e.value.style.chart.label.prefix,
+        v: n.value.value,
+        s: e.value.style.chart.label.suffix,
+        r: e.value.style.chart.label.rounding
+      }),
+      { datapoint: n.value }
+    )), Je = i(() => e.value.style.title.text || ""), Qe = i(() => {
+      if (M.value) return "...";
+      const o = y(n.value.from), a = y(n.value.to);
+      return `Thermometer value: ${Q.value}. Range: ${o} to ${a}.`;
+    });
+    return Ae({
+      getImage: De,
+      generatePdf: ve,
       generateImage: he,
-      generateSvg: ye,
+      generateSvg: ge,
       toggleAnnotator: J,
-      toggleFullscreen: fe,
-      copyAlt: ge
-    }), (o, a) => (r(), n("div", {
+      toggleFullscreen: me,
+      copyAlt: pe
+    }), (o, a) => (r(), u("div", {
       ref_key: "thermoChart",
-      ref: C,
+      ref: x,
       class: V(`vue-data-ui-component vue-ui-thermometer ${$.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      style: pe(`width:100%;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}`),
-      id: `thermometer__${w.value}`,
-      onMouseenter: a[0] || (a[0] = () => u(ue)(!0)),
-      onMouseleave: a[1] || (a[1] = () => u(ue)(!1))
+      style: we(`width:100%;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}`),
+      id: `thermometer__${b.value}`,
+      onMouseenter: a[0] || (a[0] = () => c(ie)(!0)),
+      onMouseleave: a[1] || (a[1] = () => c(ie)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (r(), Y(u($e), {
+      e.value.userOptions.buttons.annotator ? (r(), N(c(Ie), {
         key: 0,
-        svgRef: u(U),
+        svgRef: c(U),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: N.value,
-        isCursorPointer: ae.value,
+        active: R.value,
+        isCursorPointer: re.value,
         onClose: J
       }, {
         "annotator-action-close": f(() => [
-          v(o.$slots, "annotator-action-close", {}, void 0, !0)
+          h(o.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
         "annotator-action-color": f(({ color: t }) => [
-          v(o.$slots, "annotator-action-color", y(g({ color: t })), void 0, !0)
+          h(o.$slots, "annotator-action-color", p(k({ color: t })), void 0, !0)
         ]),
         "annotator-action-draw": f(({ mode: t }) => [
-          v(o.$slots, "annotator-action-draw", y(g({ mode: t })), void 0, !0)
+          h(o.$slots, "annotator-action-draw", p(k({ mode: t })), void 0, !0)
         ]),
         "annotator-action-undo": f(({ disabled: t }) => [
-          v(o.$slots, "annotator-action-undo", y(g({ disabled: t })), void 0, !0)
+          h(o.$slots, "annotator-action-undo", p(k({ disabled: t })), void 0, !0)
         ]),
         "annotator-action-redo": f(({ disabled: t }) => [
-          v(o.$slots, "annotator-action-redo", y(g({ disabled: t })), void 0, !0)
+          h(o.$slots, "annotator-action-redo", p(k({ disabled: t })), void 0, !0)
         ]),
         "annotator-action-delete": f(({ disabled: t }) => [
-          v(o.$slots, "annotator-action-delete", y(g({ disabled: t })), void 0, !0)
+          h(o.$slots, "annotator-action-delete", p(k({ disabled: t })), void 0, !0)
         ]),
         _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : c("", !0),
-      Ue.value ? (r(), n("div", St, null, 512)) : c("", !0),
-      e.value.style.title.text ? (r(), n("div", {
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : v("", !0),
+      Ve.value ? (r(), u("div", Wt, null, 512)) : v("", !0),
+      e.value.style.title.text ? (r(), u("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: oe,
+        ref: ae,
         style: "width:100%"
       }, [
-        (r(), Y($t, {
-          key: `title_${te.value}`,
+        (r(), N(Tt, {
+          key: `title_${se.value}`,
           config: {
             title: {
               cy: "thermometer-div-title",
@@ -330,15 +346,15 @@ const Ot = ["id"], St = {
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : c("", !0),
-      e.value.userOptions.show && Fe.value && (u(ie) || u(G)) ? (r(), Y(u(Ae), {
+      ], 512)) : v("", !0),
+      e.value.userOptions.show && We.value && (c(ce) || c(D)) ? (r(), N(c(Se), {
         ref: "details",
-        key: `user_options_${ee.value}`,
+        key: `user_options_${oe.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: u(j),
-        isPrinting: u(B),
-        uid: w.value,
+        isImaging: c(j),
+        isPrinting: c(B),
+        uid: b.value,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
         hasSvg: e.value.userOptions.buttons.svg,
@@ -347,84 +363,88 @@ const Ot = ["id"], St = {
         hasXls: !1,
         isFullscreen: $.value,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: C.value,
+        chartElement: x.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: N.value,
+        isAnnotation: R.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        isCursorPointer: ae.value,
-        onToggleFullscreen: fe,
-        onGeneratePdf: u(ce),
-        onGenerateImage: Ge,
-        onGenerateSvg: ye,
+        isCursorPointer: re.value,
+        onToggleFullscreen: me,
+        onGeneratePdf: c(ve),
+        onGenerateImage: Ke,
+        onGenerateSvg: ge,
         onToggleAnnotator: J,
-        onCopyAlt: ge,
-        style: pe({
-          visibility: u(ie) ? u(G) ? "visible" : "hidden" : "visible"
+        onCopyAlt: pe,
+        style: we({
+          visibility: c(ce) ? c(D) ? "visible" : "hidden" : "visible"
         })
-      }, et({ _: 2 }, [
+      }, nt({ _: 2 }, [
         o.$slots.menuIcon ? {
           name: "menuIcon",
           fn: f(({ isOpen: t, color: l }) => [
-            v(o.$slots, "menuIcon", y(g({ isOpen: t, color: l })), void 0, !0)
+            h(o.$slots, "menuIcon", p(k({ isOpen: t, color: l })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         o.$slots.optionPdf ? {
           name: "optionPdf",
           fn: f(() => [
-            v(o.$slots, "optionPdf", {}, void 0, !0)
+            h(o.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         o.$slots.optionImg ? {
           name: "optionImg",
           fn: f(() => [
-            v(o.$slots, "optionImg", {}, void 0, !0)
+            h(o.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         o.$slots.optionSvg ? {
           name: "optionSvg",
           fn: f(() => [
-            v(o.$slots, "optionSvg", {}, void 0, !0)
+            h(o.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         o.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: f(({ toggleFullscreen: t, isFullscreen: l }) => [
-            v(o.$slots, "optionFullscreen", y(g({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
+            h(o.$slots, "optionFullscreen", p(k({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
           ]),
           key: "4"
         } : void 0,
         o.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: f(({ toggleAnnotator: t, isAnnotator: l }) => [
-            v(o.$slots, "optionAnnotator", y(g({ toggleAnnotator: t, isAnnotator: l })), void 0, !0)
+            h(o.$slots, "optionAnnotator", p(k({ toggleAnnotator: t, isAnnotator: l })), void 0, !0)
           ]),
           key: "5"
         } : void 0,
         o.$slots.optionAltCopy ? {
           name: "optionAltCopy",
           fn: f(({ altCopy: t }) => [
-            v(o.$slots, "optionAltCopy", y(g({ altCopy: t })), void 0, !0)
+            h(o.$slots, "optionAltCopy", p(k({ altCopy: t })), void 0, !0)
           ]),
           key: "6"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "hasAltCopy", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "isCursorPointer", "onGeneratePdf", "style"])) : c("", !0),
-      (r(), n("svg", {
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "hasAltCopy", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "isCursorPointer", "onGeneratePdf", "style"])) : v("", !0),
+      (r(), u("svg", {
         ref_key: "svgRef",
         ref: U,
-        xmlns: u(it),
+        xmlns: c(gt),
         class: V({ "vue-data-ui-fullscreen--on": $.value, "vue-data-ui-fulscreen--off": !$.value }),
         width: "100%",
         viewBox: `0 0 ${s.value.width} ${s.value.height}`,
-        style: "background:transparent"
+        style: "background:transparent",
+        "aria-labelledby": ke.value,
+        "aria-describedby": be.value
       }, [
-        tt(u(_e)),
-        o.$slots["chart-background"] ? (r(), n("foreignObject", {
+        m("title", { id: ke.value }, ee(Je.value), 9, Rt),
+        m("desc", { id: be.value }, ee(Qe.value), 9, Vt),
+        ut(c(Oe)),
+        o.$slots["chart-background"] ? (r(), u("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -434,65 +454,65 @@ const Ot = ["id"], St = {
             pointerEvents: "none"
           }
         }, [
-          v(o.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Ft)) : c("", !0),
-        p("defs", null, [
-          p("clipPath", {
-            id: `vueUiPill-${w.value}`,
+          h(o.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Nt)) : v("", !0),
+        m("defs", null, [
+          m("clipPath", {
+            id: `vueUiPill-${b.value}`,
             clipPathUnits: "userSpaceOnUse"
           }, [
-            p("rect", {
+            m("rect", {
               x: s.value.left,
               y: s.value.top,
               width: s.value.thermoWidth,
               height: s.value.thermoHeight,
               rx: s.value.thermoWidth / 2,
               ry: s.value.thermoWidth / 2
-            }, null, 8, Mt)
-          ], 8, Tt),
-          (r(!0), n(E, null, ke(de.value, (t, l) => (r(), n("linearGradient", {
-            id: `vueUiThermometerGradient_${l}_${w.value}`,
+            }, null, 8, Et)
+          ], 8, Yt),
+          (r(!0), u(Y, null, xe(fe.value, (t, l) => (r(), u("linearGradient", {
+            id: `vueUiThermometerGradient_${l}_${b.value}`,
             x1: "0%",
             y1: "0%",
             x2: "100%",
             y2: "0%"
           }, [
-            p("stop", {
+            m("stop", {
               offset: "0%",
               "stop-color": t.color
-            }, null, 8, zt),
-            p("stop", {
+            }, null, 8, qt),
+            m("stop", {
               offset: "50%",
-              "stop-color": u(ct)(t.color, 100 - e.value.style.chart.graduations.gradient.intensity)
-            }, null, 8, Wt),
-            p("stop", {
+              "stop-color": c(pt)(t.color, 100 - e.value.style.chart.graduations.gradient.intensity)
+            }, null, 8, Dt),
+            m("stop", {
               offset: "100%",
               "stop-color": t.color
-            }, null, 8, Lt)
-          ], 8, Ut))), 256))
+            }, null, 8, Gt)
+          ], 8, Ht))), 256))
         ]),
-        p("g", {
-          "clip-path": `url(#vueUiPill-${w.value})`
+        m("g", {
+          "clip-path": `url(#vueUiPill-${b.value})`
         }, [
-          p("rect", {
+          m("rect", {
             x: s.value.left,
             y: s.value.top,
             height: s.value.thermoHeight,
             width: s.value.thermoWidth,
             fill: "#FFFFFF"
-          }, null, 8, Vt),
-          (r(!0), n(E, null, ke(de.value, (t, l) => (r(), n("g", {
+          }, null, 8, jt),
+          (r(!0), u(Y, null, xe(fe.value, (t, l) => (r(), u("g", {
             key: `graduation_${l}`
           }, [
-            p("rect", {
+            m("rect", {
               x: t.x,
               y: t.y,
               height: t.height,
               width: s.value.thermoWidth,
-              fill: e.value.style.chart.graduations.gradient.show ? `url(#vueUiThermometerGradient_${l}_${w.value})` : t.color,
+              fill: e.value.style.chart.graduations.gradient.show ? `url(#vueUiThermometerGradient_${l}_${b.value})` : t.color,
               "shape-rendering": "crispEdges"
-            }, null, 8, Yt),
-            e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
+            }, null, 8, Xt),
+            e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), u("line", {
               key: 0,
               x1: t.x,
               x2: t.x + 10,
@@ -501,9 +521,9 @@ const Ot = ["id"], St = {
               "stroke-width": e.value.style.chart.graduations.strokeWidth,
               stroke: e.value.style.chart.graduations.stroke,
               "stroke-linecap": "round"
-            }, null, 8, Et)) : c("", !0),
-            e.value.style.chart.graduations.showIntermediate ? (r(), n(E, { key: 1 }, [
-              e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
+            }, null, 8, Kt)) : v("", !0),
+            e.value.style.chart.graduations.showIntermediate ? (r(), u(Y, { key: 1 }, [
+              e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), u("line", {
                 key: 0,
                 x1: t.x,
                 x2: t.x + 5,
@@ -512,8 +532,8 @@ const Ot = ["id"], St = {
                 "stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
                 stroke: e.value.style.chart.graduations.stroke,
                 "stroke-linecap": "round"
-              }, null, 8, Ht)) : c("", !0),
-              e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
+              }, null, 8, Jt)) : v("", !0),
+              e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), u("line", {
                 key: 1,
                 x1: t.x,
                 x2: t.x + 2.5,
@@ -522,8 +542,8 @@ const Ot = ["id"], St = {
                 "stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
                 stroke: e.value.style.chart.graduations.stroke,
                 "stroke-linecap": "round"
-              }, null, 8, qt)) : c("", !0),
-              e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
+              }, null, 8, Qt)) : v("", !0),
+              e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), u("line", {
                 key: 2,
                 x1: t.x,
                 x2: t.x + 2.5,
@@ -532,9 +552,9 @@ const Ot = ["id"], St = {
                 "stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
                 stroke: e.value.style.chart.graduations.stroke,
                 "stroke-linecap": "round"
-              }, null, 8, Rt)) : c("", !0)
-            ], 64)) : c("", !0),
-            e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
+              }, null, 8, Zt)) : v("", !0)
+            ], 64)) : v("", !0),
+            e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), u("line", {
               key: 2,
               x1: s.value.right,
               x2: s.value.right - 10,
@@ -543,9 +563,9 @@ const Ot = ["id"], St = {
               "stroke-width": e.value.style.chart.graduations.strokeWidth,
               stroke: e.value.style.chart.graduations.stroke,
               "stroke-linecap": "round"
-            }, null, 8, Gt)) : c("", !0),
-            e.value.style.chart.graduations.showIntermediate ? (r(), n(E, { key: 3 }, [
-              e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
+            }, null, 8, eo)) : v("", !0),
+            e.value.style.chart.graduations.showIntermediate ? (r(), u(Y, { key: 3 }, [
+              e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), u("line", {
                 key: 0,
                 x1: s.value.right,
                 x2: s.value.right - 5,
@@ -554,8 +574,8 @@ const Ot = ["id"], St = {
                 "stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
                 stroke: e.value.style.chart.graduations.stroke,
                 "stroke-linecap": "round"
-              }, null, 8, Dt)) : c("", !0),
-              e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
+              }, null, 8, to)) : v("", !0),
+              e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), u("line", {
                 key: 1,
                 x1: s.value.right,
                 x2: s.value.right - 2.5,
@@ -564,8 +584,8 @@ const Ot = ["id"], St = {
                 "stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
                 stroke: e.value.style.chart.graduations.stroke,
                 "stroke-linecap": "round"
-              }, null, 8, Bt)) : c("", !0),
-              e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
+              }, null, 8, oo)) : v("", !0),
+              e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), u("line", {
                 key: 2,
                 x1: s.value.right,
                 x2: s.value.right - 2.5,
@@ -574,20 +594,25 @@ const Ot = ["id"], St = {
                 "stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
                 stroke: e.value.style.chart.graduations.stroke,
                 "stroke-linecap": "round"
-              }, null, 8, jt)) : c("", !0)
-            ], 64)) : c("", !0)
+              }, null, 8, so)) : v("", !0)
+            ], 64)) : v("", !0)
           ]))), 128)),
-          p("rect", {
+          m("rect", {
             class: V({ "vue-ui-thermometer-temperature": e.value.style.chart.animation.use }),
             x: s.value.left,
             y: s.value.top,
             height: L.value,
             width: s.value.thermoWidth,
             fill: "#FFFFFF66"
-          }, null, 10, Xt)
-        ], 8, Nt),
-        e.value.style.chart.label.show ? (r(), n("g", Kt, [
-          u(le) ? (r(), n("rect", {
+          }, null, 10, ao)
+        ], 8, Bt),
+        e.value.style.chart.label.show ? (r(), u("g", {
+          key: 1,
+          role: "status",
+          "aria-live": "polite",
+          "aria-label": c(M) ? "Loading data" : Q.value
+        }, [
+          c(M) ? (r(), u("rect", {
             key: 0,
             x: s.value.left - 60,
             y: L.value + s.value.top - A.value / 2,
@@ -595,8 +620,9 @@ const Ot = ["id"], St = {
             height: A.value,
             fill: "#6A6A6A40",
             rx: "3"
-          }, null, 8, Jt)) : (r(), n("text", {
+          }, null, 8, ro)) : (r(), u("text", {
             key: 1,
+            "aria-hidden": "true",
             class: V({ "vue-ui-thermometer-temperature-value": e.value.style.chart.animation.use, "vue-ui-thermometer-label": !0 }),
             y: L.value + s.value.top + A.value / 3,
             x: s.value.left - 10,
@@ -604,43 +630,33 @@ const Ot = ["id"], St = {
             fill: e.value.style.chart.label.color,
             "font-size": A.value,
             "font-weight": e.value.style.chart.label.bold ? "bold" : "normal"
-          }, ot(u(ht)(
-            e.value.style.chart.label.formatter,
-            I.dataset.value,
-            u(vt)({
-              p: e.value.style.chart.label.prefix,
-              v: I.dataset.value,
-              s: e.value.style.chart.label.suffix,
-              r: e.value.style.chart.label.rounding
-            }),
-            { datapoint: I.dataset }
-          )), 11, Qt))
-        ])) : c("", !0),
-        v(o.$slots, "svg", {
+          }, ee(Q.value), 11, no))
+        ], 8, lo)) : v("", !0),
+        h(o.$slots, "svg", {
           svg: {
-            ...ze.value,
-            isPrintingImg: u(B) | u(j) | T.value,
-            isPrintingSvg: M.value
+            ...Ne.value,
+            isPrintingImg: c(B) | c(j) | F.value,
+            isPrintingSvg: T.value
           }
         }, void 0, !0)
-      ], 10, It)),
-      o.$slots.watermark ? (r(), n("div", Zt, [
-        v(o.$slots, "watermark", y(g({ isPrinting: u(B) || u(j) || T.value || M.value })), void 0, !0)
-      ])) : c("", !0),
-      o.$slots.source ? (r(), n("div", {
+      ], 10, Lt)),
+      o.$slots.watermark ? (r(), u("div", uo, [
+        h(o.$slots, "watermark", p(k({ isPrinting: c(B) || c(j) || F.value || T.value })), void 0, !0)
+      ])) : v("", !0),
+      o.$slots.source ? (r(), u("div", {
         key: 5,
         ref_key: "source",
-        ref: se,
+        ref: le,
         dir: "auto"
       }, [
-        v(o.$slots, "source", {}, void 0, !0)
-      ], 512)) : c("", !0),
-      v(o.$slots, "skeleton", {}, () => [
-        u(le) ? (r(), Y(gt, { key: 0 })) : c("", !0)
+        h(o.$slots, "source", {}, void 0, !0)
+      ], 512)) : v("", !0),
+      h(o.$slots, "skeleton", {}, () => [
+        c(M) ? (r(), N(Ct, { key: 0 })) : v("", !0)
       ], !0)
-    ], 46, Ot));
+    ], 46, zt));
   }
-}, po = /* @__PURE__ */ Pt(eo, [["__scopeId", "data-v-10ce3bce"]]);
+}, Oo = /* @__PURE__ */ Ut(io, [["__scopeId", "data-v-e2a33fa2"]]);
 export {
-  po as default
+  Oo as default
 };