vue-data-ui 2.4.57 → 2.4.59

package/dist/{vue-ui-sparkbar-CMkozDkx.js → vue-ui-sparkbar-CTDWiUid.js}

@@ -1,13 +1,13 @@
-import { computed as g, ref as x, watch as z, onMounted as q, nextTick as H, openBlock as n, createElementBlock as v, normalizeStyle as f, unref as s, renderSlot as b, normalizeProps as L, mergeProps as X, createCommentVNode as c, createElementVNode as d, toDisplayString as p, Fragment as O, renderList as R, guardReactiveProps as J, createVNode as K, createBlock as Q } from "vue";
-import { u as Y, c as Z, t as ee, a as te, p as k, b as le, o as ae, e as T, g as oe, d as se, s as $, i as w, f as _, X as ue, w as ne } from "./index-CI-N9klv.js";
-import { u as V } from "./useNestedProp-D1eJ0dvv.js";
-import ie from "./vue-ui-skeleton-owIhXtQF.js";
-import { _ as re } from "./PackageVersion-S3SzpuwC.js";
-const ve = ["onClick"], ce = { key: 1 }, de = ["xmlns", "viewBox"], fe = ["id"], pe = ["stop-color"], ye = ["stop-color"], me = ["height", "width", "fill", "rx"], ge = ["height", "width", "fill", "rx"], he = ["height", "width", "fill", "rx"], xe = {
+import { useSlots as X, onMounted as z, computed as g, ref as x, watch as L, nextTick as R, openBlock as n, createElementBlock as c, normalizeStyle as p, unref as s, renderSlot as C, normalizeProps as O, mergeProps as J, createCommentVNode as v, createElementVNode as d, toDisplayString as f, Fragment as T, renderList as K, guardReactiveProps as Q, createVNode as Y, createBlock as Z } from "vue";
+import { u as ee, c as te, t as le, a as ae, p as k, b as oe, o as se, e as V, g as ue, d as ne, s as $, i as b, f as w, X as re, w as ie } from "./index-B9RAElpI.js";
+import { u as E } from "./useNestedProp-DuruL3Nt.js";
+import ce from "./vue-ui-skeleton-DVYD_VSe.js";
+import { _ as ve } from "./PackageVersion-C_FFs0BP.js";
+const de = ["onClick"], pe = { key: 1 }, fe = ["xmlns", "viewBox"], ye = ["id"], me = ["stop-color"], ge = ["stop-color"], he = ["height", "width", "fill", "rx"], xe = ["height", "width", "fill", "rx"], ke = ["height", "width", "fill", "rx"], be = {
   key: 2,
   ref: "source",
   dir: "auto"
-}, $e = {
+}, Ae = {
   __name: "vue-ui-sparkbar",
   props: {
     config: {
@@ -31,34 +31,38 @@ const ve = ["onClick"], ce = { key: 1 }, de = ["xmlns", "viewBox"], fe = ["id"],
     }
   },
   emits: ["selectDatapoint"],
-  setup(C, { emit: E }) {
-    const a = C, { vue_ui_sparkbar: B } = Y(), S = g(() => !!a.dataset && a.dataset.length), A = x(Z()), e = g({
+  setup(_, { emit: B }) {
+    const a = _, { vue_ui_sparkbar: M } = ee(), U = X();
+    z(() => {
+      U["chart-background"] && console.warn("VueUiSparkbar does not support the #chart-background slot.");
+    });
+    const S = g(() => !!a.dataset && a.dataset.length), A = x(te()), e = g({
       get: () => N(),
       set: (t) => t
     });
     function N() {
-      const t = V({
+      const t = E({
         userConfig: a.config,
-        defaultConfig: B
+        defaultConfig: M
       });
       return t.theme ? {
-        ...V({
-          userConfig: ee.vue_ui_sparkbar[t.theme] || a.config,
+        ...E({
+          userConfig: le.vue_ui_sparkbar[t.theme] || a.config,
           defaultConfig: t
         }),
-        customPalette: te[t.theme] || k
+        customPalette: ae[t.theme] || k
       } : t;
     }
-    z(() => a.config, (t) => {
+    L(() => a.config, (t) => {
       e.value = N();
     }, { deep: !0 });
-    const M = g(() => le(e.value.customPalette)), y = x(a.dataset.map((t) => ({
+    const j = g(() => oe(e.value.customPalette)), y = x(a.dataset.map((t) => ({
       ...t,
       value: e.value.style.animation.show ? 0 : t.value || 0,
       formatter: t.formatter || null
     }))), D = x(null);
-    q(async () => {
-      ae(a.dataset) && T({
+    z(async () => {
+      se(a.dataset) && V({
         componentName: "VueUiSparkbar",
         type: "dataset"
       }), F();
@@ -66,7 +70,7 @@ const ve = ["onClick"], ce = { key: 1 }, de = ["xmlns", "viewBox"], fe = ["id"],
     function F() {
       if (e.value.style.animation.show) {
         let P = function() {
-          r += l / t, r < l ? (y.value = y.value.map((u, h) => ({
+          i += l / t, i < l ? (y.value = y.value.map((u, h) => ({
             ...u,
             value: u.value += o[h]
           })), D.value = requestAnimationFrame(P)) : y.value = a.dataset.map((u) => ({
@@ -76,26 +80,26 @@ const ve = ["onClick"], ce = { key: 1 }, de = ["xmlns", "viewBox"], fe = ["id"],
           }));
         };
         const t = e.value.style.animation.animationFrames, o = a.dataset.map((u, h) => u.value / t), l = a.dataset.map((u) => u.value || 0).reduce((u, h) => u + h, 0);
-        let r = 0;
+        let i = 0;
         P();
       }
     }
-    z(() => a.dataset, async (t) => {
+    L(() => a.dataset, async (t) => {
       cancelAnimationFrame(D.value), y.value = a.dataset.map((o) => ({
         ...o,
         value: e.value.style.animation.show ? 0 : o.value || 0,
         formatter: o.formatter || null
-      })), H(F);
+      })), R(F);
     }, { deep: !0 });
-    const i = x({
+    const r = x({
       width: 500,
       height: 16
-    }), U = g(() => Math.max(...a.dataset.map((t) => t.value))), j = g(() => (a.dataset.forEach((t, o) => {
-      oe({
+    }), G = g(() => Math.max(...a.dataset.map((t) => t.value))), W = g(() => (a.dataset.forEach((t, o) => {
+      ue({
         datasetObject: t,
         requiredAttributes: ["name", "value"]
       }).forEach((l) => {
-        T({
+        V({
           componentName: "VueUiSparkbar",
           type: "datasetSerieAttribute",
           property: l,
@@ -105,32 +109,32 @@ const ve = ["onClick"], ce = { key: 1 }, de = ["xmlns", "viewBox"], fe = ["id"],
     }), y.value.map((t, o) => ({
       ...t,
       value: t.value || 0,
-      color: se(t.color) || M.value[o] || k[o] || k[o % k.length]
+      color: ne(t.color) || j.value[o] || k[o] || k[o % k.length]
     }))));
-    function G(t) {
-      return t / U.value;
+    function q(t) {
+      return t / G.value;
     }
     function I(t) {
-      return e.value.style.layout.independant ? t.target ? t.value / t.target : e.value.style.layout.percentage ? t.value > 100 ? 1 : t.value / 100 : e.value.style.layout.target === 0 ? 1 : t.value / e.value.style.layout.target : G(t.value);
+      return e.value.style.layout.independant ? t.target ? t.value / t.target : e.value.style.layout.percentage ? t.value > 100 ? 1 : t.value / 100 : e.value.style.layout.target === 0 ? 1 : t.value / e.value.style.layout.target : q(t.value);
     }
     function m(t) {
       return e.value.style.layout.independant && t.target || e.value.style.layout.target;
     }
-    function W(t, o) {
-      E("selectDatapoint", { datapoint: t, index: o });
+    function H(t, o) {
+      B("selectDatapoint", { datapoint: t, index: o });
     }
-    return (t, o) => (n(), v("div", {
-      style: f({
+    return (t, o) => (n(), c("div", {
+      style: p({
         width: "100%",
         fontFamily: e.value.style.fontFamily,
         background: a.backgroundOpacity !== null ? s($)(e.value.style.backgroundColor, a.backgroundOpacity) : e.value.style.backgroundColor
       })
     }, [
-      t.$slots.title ? b(t.$slots, "title", L(X({ key: 0 }, { title: { ...t.title, title: e.value.style.title.text, subtitle: e.value.style.title.subtitle.text } }))) : c("", !0),
-      !t.$slots.title && e.value.style.title.text ? (n(), v("div", {
+      t.$slots.title ? C(t.$slots, "title", O(J({ key: 0 }, { title: { ...t.title, title: e.value.style.title.text, subtitle: e.value.style.title.subtitle.text } }))) : v("", !0),
+      !t.$slots.title && e.value.style.title.text ? (n(), c("div", {
         key: 1,
         class: "vue-ui-sparkbar-title-container",
-        style: f({
+        style: p({
           background: e.value.style.title.backgroundColor,
           margin: e.value.style.title.margin,
           textAlign: e.value.style.title.textAlign
@@ -138,57 +142,57 @@ const ve = ["onClick"], ce = { key: 1 }, de = ["xmlns", "viewBox"], fe = ["id"],
       }, [
         d("div", {
           class: "vue-ui-sparkbar-title",
-          style: f({
+          style: p({
             fontSize: e.value.style.title.fontSize + "px",
             color: e.value.style.title.color,
             fontWeight: e.value.style.title.bold ? "bold" : "normal"
           })
-        }, p(e.value.style.title.text), 5),
-        e.value.style.title.subtitle.text ? (n(), v("div", {
+        }, f(e.value.style.title.text), 5),
+        e.value.style.title.subtitle.text ? (n(), c("div", {
           key: 0,
           class: "vue-ui-sparkbar-subtitle",
-          style: f({
+          style: p({
             fontSize: e.value.style.title.subtitle.fontSize + "px",
             color: e.value.style.title.subtitle.color,
             fontWeight: e.value.style.title.subtitle.bold ? "bold" : "normal"
           })
-        }, p(e.value.style.title.subtitle.text), 5)) : c("", !0)
-      ], 4)) : c("", !0),
-      (n(!0), v(O, null, R(j.value, (l, r) => (n(), v(O, null, [
-        S.value ? (n(), v("div", {
+        }, f(e.value.style.title.subtitle.text), 5)) : v("", !0)
+      ], 4)) : v("", !0),
+      (n(!0), c(T, null, K(W.value, (l, i) => (n(), c(T, null, [
+        S.value ? (n(), c("div", {
           key: 0,
-          style: f(`display:flex !important;${["left", "right"].includes(e.value.style.labels.name.position) ? `flex-direction: ${e.value.style.labels.name.position === "right" ? "row-reverse" : "row"} !important` : "flex-direction:column !important"};gap:${e.value.style.gap}px !important;align-items:center;${C.dataset.length > 0 && r !== C.dataset.length - 1 ? "margin-bottom:6px" : ""}`),
-          onClick: () => W(l, r)
+          style: p(`display:flex !important;${["left", "right"].includes(e.value.style.labels.name.position) ? `flex-direction: ${e.value.style.labels.name.position === "right" ? "row-reverse" : "row"} !important` : "flex-direction:column !important"};gap:${e.value.style.gap}px !important;align-items:center;${_.dataset.length > 0 && i !== _.dataset.length - 1 ? "margin-bottom:6px" : ""}`),
+          onClick: () => H(l, i)
         }, [
-          b(t.$slots, "data-label", L(J({ bar: {
+          C(t.$slots, "data-label", O(Q({ bar: {
             ...l,
             target: m(l),
-            valueLabel: s(w)(
+            valueLabel: s(b)(
               l.formatter,
               l.value,
-              s(_)({
+              s(w)({
                 p: l.prefix || "",
                 v: l.value,
                 s: l.suffix || "",
                 r: l.rounding || 0
               }),
-              { datapoint: l, seriesIndex: r }
+              { datapoint: l, seriesIndex: i }
             ),
-            targetLabel: s(w)(
+            targetLabel: s(b)(
               l.formatter,
               m(l),
-              s(_)({
+              s(w)({
                 p: l.prefix || "",
                 v: m(l),
                 s: l.suffix || "",
                 r: l.rounding || 0
               }),
-              { datapoint: l, seriesIndex: r }
+              { datapoint: l, seriesIndex: i }
             )
           } }))),
-          t.$slots["data-label"] ? c("", !0) : (n(), v("div", {
+          t.$slots["data-label"] ? v("", !0) : (n(), c("div", {
             key: 0,
-            style: f({
+            style: p({
               width: e.value.style.labels.name.width,
               color: e.value.style.labels.name.color,
               fontSize: e.value.style.labels.fontSize + "px",
@@ -196,88 +200,88 @@ const ve = ["onClick"], ce = { key: 1 }, de = ["xmlns", "viewBox"], fe = ["id"],
               textAlign: ["left", "right"].includes(e.value.style.labels.name.position) || ["top", "top-left"].includes(e.value.style.labels.name.position) ? "left" : e.value.style.labels.name.position === "top-center" ? "center" : "right"
             })
           }, [
-            d("span", null, p(l.name), 1),
-            e.value.style.labels.value.show ? (n(), v("span", {
+            d("span", null, f(l.name), 1),
+            e.value.style.labels.value.show ? (n(), c("span", {
               key: 0,
-              style: f(`font-weight:${e.value.style.labels.value.bold ? "bold" : "normal"}`)
-            }, ": " + p(s(w)(
+              style: p(`font-weight:${e.value.style.labels.value.bold ? "bold" : "normal"}`)
+            }, ": " + f(s(b)(
               l.formatter,
               l.value,
-              s(_)({
+              s(w)({
                 p: l.prefix || "",
                 v: l.value,
                 s: l.suffix || "",
                 r: l.rounding || 0
               }),
-              { datapoint: l, seriesIndex: r }
-            )), 5)) : c("", !0),
-            e.value.style.layout.showTargetValue ? (n(), v("span", ce, p(" " + e.value.style.layout.targetValueText) + " " + p(s(w)(
+              { datapoint: l, seriesIndex: i }
+            )), 5)) : v("", !0),
+            e.value.style.layout.showTargetValue ? (n(), c("span", pe, f(" " + e.value.style.layout.targetValueText) + " " + f(s(b)(
               l.formatter,
               m(l),
-              s(_)({
+              s(w)({
                 p: l.prefix || "",
                 v: m(l),
                 s: l.suffix || "",
                 r: l.rounding || 0
               }),
-              { datapoint: l, seriesIndex: r }
-            )), 1)) : c("", !0)
+              { datapoint: l, seriesIndex: i }
+            )), 1)) : v("", !0)
           ], 4)),
-          (n(), v("svg", {
-            xmlns: s(ue),
-            viewBox: `0 0 ${i.value.width} ${i.value.height}`,
+          (n(), c("svg", {
+            xmlns: s(re),
+            viewBox: `0 0 ${r.value.width} ${r.value.height}`,
             width: "100%"
           }, [
-            K(re),
+            Y(ve),
             d("defs", null, [
               d("linearGradient", {
                 x1: "0%",
                 y1: "0%",
                 x2: "100%",
                 y2: "0%",
-                id: `sparkbar_gradient_${r}_${A.value}`
+                id: `sparkbar_gradient_${i}_${A.value}`
               }, [
                 d("stop", {
                   offset: "0%",
-                  "stop-color": s($)(s(ne)(l.color, 0.03), 100 - e.value.style.bar.gradient.intensity)
-                }, null, 8, pe),
+                  "stop-color": s($)(s(ie)(l.color, 0.03), 100 - e.value.style.bar.gradient.intensity)
+                }, null, 8, me),
                 d("stop", {
                   offset: "100%",
                   "stop-color": l.color
-                }, null, 8, ye)
-              ], 8, fe)
+                }, null, 8, ge)
+              ], 8, ye)
             ]),
             d("rect", {
-              height: i.value.height,
-              width: i.value.width,
+              height: r.value.height,
+              width: r.value.width,
               x: 0,
               y: 0,
               fill: s($)(e.value.style.gutter.backgroundColor, e.value.style.gutter.opacity),
-              rx: i.value.height / 2
-            }, null, 8, me),
+              rx: r.value.height / 2
+            }, null, 8, he),
             d("rect", {
-              height: i.value.height,
-              width: i.value.width * I(l),
+              height: r.value.height,
+              width: r.value.width * I(l),
               x: 0,
               y: 0,
               fill: e.value.style.bar.gradient.underlayerColor,
-              rx: i.value.height / 2
-            }, null, 8, ge),
+              rx: r.value.height / 2
+            }, null, 8, xe),
             d("rect", {
-              height: i.value.height,
-              width: i.value.width * I(l),
+              height: r.value.height,
+              width: r.value.width * I(l),
               x: 0,
               y: 0,
-              fill: e.value.style.bar.gradient.show ? `url(#sparkbar_gradient_${r}_${A.value})` : l.color,
-              rx: i.value.height / 2
-            }, null, 8, he)
-          ], 8, de))
-        ], 12, ve)) : c("", !0)
+              fill: e.value.style.bar.gradient.show ? `url(#sparkbar_gradient_${i}_${A.value})` : l.color,
+              rx: r.value.height / 2
+            }, null, 8, ke)
+          ], 8, fe))
+        ], 12, de)) : v("", !0)
       ], 64))), 256)),
-      t.$slots.source ? (n(), v("div", xe, [
-        b(t.$slots, "source")
-      ], 512)) : c("", !0),
-      S.value ? c("", !0) : (n(), Q(ie, {
+      t.$slots.source ? (n(), c("div", be, [
+        C(t.$slots, "source")
+      ], 512)) : v("", !0),
+      S.value ? v("", !0) : (n(), Z(ce, {
         key: 3,
         config: {
           type: "sparkbar",
@@ -293,5 +297,5 @@ const ve = ["onClick"], ce = { key: 1 }, de = ["xmlns", "viewBox"], fe = ["id"],
   }
 };
 export {
-  $e as default
+  Ae as default
 };

package/dist/vue-ui-sparkbar-Dq1hwL7i.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("./index-DaDv7p0W.cjs"),b=require("./useNestedProp-DkpuL8Iv.cjs"),D=require("./vue-ui-skeleton-B24XJJ2p.cjs"),$=require("./PackageVersion-nr7f_VNw.cjs"),z=["onClick"],L={key:1},P=["xmlns","viewBox"],A=["id"],F=["stop-color"],O=["stop-color"],I=["height","width","fill","rx"],T=["height","width","fill","rx"],q=["height","width","fill","rx"],M={key:2,ref:"source",dir:"auto"},U={__name:"vue-ui-sparkbar",props:{config:{type:Object,default(){return{}}},dataset:{type:Array,default(){return[]}},backgroundOpacity:{type:Number,default:null}},emits:["selectDatapoint"],setup(p,{emit:C}){const n=p,{vue_ui_sparkbar:S}=o.useConfig(),w=e.useSlots();e.onMounted(()=>{w["chart-background"]&&console.warn("VueUiSparkbar does not support the #chart-background slot.")});const v=e.computed(()=>!!n.dataset&&n.dataset.length),y=e.ref(o.createUid()),t=e.computed({get:()=>f(),set:l=>l});function f(){const l=b.useNestedProp({userConfig:n.config,defaultConfig:S});return l.theme?{...b.useNestedProp({userConfig:o.themes.vue_ui_sparkbar[l.theme]||n.config,defaultConfig:l}),customPalette:o.themePalettes[l.theme]||o.palette}:l}e.watch(()=>n.config,l=>{t.value=f()},{deep:!0});const N=e.computed(()=>o.convertCustomPalette(t.value.customPalette)),c=e.ref(n.dataset.map(l=>({...l,value:t.value.style.animation.show?0:l.value||0,formatter:l.formatter||null}))),g=e.ref(null);e.onMounted(async()=>{o.objectIsEmpty(n.dataset)&&o.error({componentName:"VueUiSparkbar",type:"dataset"}),h()});function h(){if(t.value.style.animation.show){let x=function(){i+=a/l,i<a?(c.value=c.value.map((u,m)=>({...u,value:u.value+=r[m]})),g.value=requestAnimationFrame(x)):c.value=n.dataset.map(u=>({...u,value:u.value||0,formatter:u.formatter||null}))};const l=t.value.style.animation.animationFrames,r=n.dataset.map((u,m)=>u.value/l),a=n.dataset.map(u=>u.value||0).reduce((u,m)=>u+m,0);let i=0;x()}}e.watch(()=>n.dataset,async l=>{cancelAnimationFrame(g.value),c.value=n.dataset.map(r=>({...r,value:t.value.style.animation.show?0:r.value||0,formatter:r.formatter||null})),e.nextTick(h)},{deep:!0});const s=e.ref({width:500,height:16}),_=e.computed(()=>Math.max(...n.dataset.map(l=>l.value))),B=e.computed(()=>(n.dataset.forEach((l,r)=>{o.getMissingDatasetAttributes({datasetObject:l,requiredAttributes:["name","value"]}).forEach(a=>{o.error({componentName:"VueUiSparkbar",type:"datasetSerieAttribute",property:a,index:r})})}),c.value.map((l,r)=>({...l,value:l.value||0,color:o.convertColorToHex(l.color)||N.value[r]||o.palette[r]||o.palette[r%o.palette.length]}))));function V(l){return l/_.value}function k(l){return t.value.style.layout.independant?l.target?l.value/l.target:t.value.style.layout.percentage?l.value>100?1:l.value/100:t.value.style.layout.target===0?1:l.value/t.value.style.layout.target:V(l.value)}function d(l){return t.value.style.layout.independant&&l.target||t.value.style.layout.target}function E(l,r){C("selectDatapoint",{datapoint:l,index:r})}return(l,r)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle({width:"100%",fontFamily:t.value.style.fontFamily,background:n.backgroundOpacity!==null?e.unref(o.setOpacity)(t.value.style.backgroundColor,n.backgroundOpacity):t.value.style.backgroundColor})},[l.$slots.title?e.renderSlot(l.$slots,"title",e.normalizeProps(e.mergeProps({key:0},{title:{...l.title,title:t.value.style.title.text,subtitle:t.value.style.title.subtitle.text}}))):e.createCommentVNode("",!0),!l.$slots.title&&t.value.style.title.text?(e.openBlock(),e.createElementBlock("div",{key:1,class:"vue-ui-sparkbar-title-container",style:e.normalizeStyle({background:t.value.style.title.backgroundColor,margin:t.value.style.title.margin,textAlign:t.value.style.title.textAlign})},[e.createElementVNode("div",{class:"vue-ui-sparkbar-title",style:e.normalizeStyle({fontSize:t.value.style.title.fontSize+"px",color:t.value.style.title.color,fontWeight:t.value.style.title.bold?"bold":"normal"})},e.toDisplayString(t.value.style.title.text),5),t.value.style.title.subtitle.text?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vue-ui-sparkbar-subtitle",style:e.normalizeStyle({fontSize:t.value.style.title.subtitle.fontSize+"px",color:t.value.style.title.subtitle.color,fontWeight:t.value.style.title.subtitle.bold?"bold":"normal"})},e.toDisplayString(t.value.style.title.subtitle.text),5)):e.createCommentVNode("",!0)],4)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(B.value,(a,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[v.value?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(`display:flex !important;${["left","right"].includes(t.value.style.labels.name.position)?`flex-direction: ${t.value.style.labels.name.position==="right"?"row-reverse":"row"} !important`:"flex-direction:column !important"};gap:${t.value.style.gap}px !important;align-items:center;${p.dataset.length>0&&i!==p.dataset.length-1?"margin-bottom:6px":""}`),onClick:()=>E(a,i)},[e.renderSlot(l.$slots,"data-label",e.normalizeProps(e.guardReactiveProps({bar:{...a,target:d(a),valueLabel:e.unref(o.applyDataLabel)(a.formatter,a.value,e.unref(o.dataLabel)({p:a.prefix||"",v:a.value,s:a.suffix||"",r:a.rounding||0}),{datapoint:a,seriesIndex:i}),targetLabel:e.unref(o.applyDataLabel)(a.formatter,d(a),e.unref(o.dataLabel)({p:a.prefix||"",v:d(a),s:a.suffix||"",r:a.rounding||0}),{datapoint:a,seriesIndex:i})}}))),l.$slots["data-label"]?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle({width:t.value.style.labels.name.width,color:t.value.style.labels.name.color,fontSize:t.value.style.labels.fontSize+"px",fontWeight:t.value.style.labels.name.bold?"bold":"normal",textAlign:["left","right"].includes(t.value.style.labels.name.position)||["top","top-left"].includes(t.value.style.labels.name.position)?"left":t.value.style.labels.name.position==="top-center"?"center":"right"})},[e.createElementVNode("span",null,e.toDisplayString(a.name),1),t.value.style.labels.value.show?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle(`font-weight:${t.value.style.labels.value.bold?"bold":"normal"}`)},": "+e.toDisplayString(e.unref(o.applyDataLabel)(a.formatter,a.value,e.unref(o.dataLabel)({p:a.prefix||"",v:a.value,s:a.suffix||"",r:a.rounding||0}),{datapoint:a,seriesIndex:i})),5)):e.createCommentVNode("",!0),t.value.style.layout.showTargetValue?(e.openBlock(),e.createElementBlock("span",L,e.toDisplayString(" "+t.value.style.layout.targetValueText)+" "+e.toDisplayString(e.unref(o.applyDataLabel)(a.formatter,d(a),e.unref(o.dataLabel)({p:a.prefix||"",v:d(a),s:a.suffix||"",r:a.rounding||0}),{datapoint:a,seriesIndex:i})),1)):e.createCommentVNode("",!0)],4)),(e.openBlock(),e.createElementBlock("svg",{xmlns:e.unref(o.XMLNS),viewBox:`0 0 ${s.value.width} ${s.value.height}`,width:"100%"},[e.createVNode($._sfc_main),e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{x1:"0%",y1:"0%",x2:"100%",y2:"0%",id:`sparkbar_gradient_${i}_${y.value}`},[e.createElementVNode("stop",{offset:"0%","stop-color":e.unref(o.setOpacity)(e.unref(o.shiftHue)(a.color,.03),100-t.value.style.bar.gradient.intensity)},null,8,F),e.createElementVNode("stop",{offset:"100%","stop-color":a.color},null,8,O)],8,A)]),e.createElementVNode("rect",{height:s.value.height,width:s.value.width,x:0,y:0,fill:e.unref(o.setOpacity)(t.value.style.gutter.backgroundColor,t.value.style.gutter.opacity),rx:s.value.height/2},null,8,I),e.createElementVNode("rect",{height:s.value.height,width:s.value.width*k(a),x:0,y:0,fill:t.value.style.bar.gradient.underlayerColor,rx:s.value.height/2},null,8,T),e.createElementVNode("rect",{height:s.value.height,width:s.value.width*k(a),x:0,y:0,fill:t.value.style.bar.gradient.show?`url(#sparkbar_gradient_${i}_${y.value})`:a.color,rx:s.value.height/2},null,8,q)],8,P))],12,z)):e.createCommentVNode("",!0)],64))),256)),l.$slots.source?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(l.$slots,"source")],512)):e.createCommentVNode("",!0),v.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(D.default,{key:3,config:{type:"sparkbar",style:{backgroundColor:t.value.style.backgroundColor,sparkbar:{color:"#CCCCCC"}}}},null,8,["config"]))],4))}};exports.default=U;

package/dist/{vue-ui-sparkgauge-De06LRPj.js → vue-ui-sparkgauge-g0C7wuIH.js}

@@ -1,13 +1,13 @@
-import { computed as s, onMounted as N, ref as A, watch as M, openBlock as n, createElementBlock as i, normalizeStyle as m, toDisplayString as y, createCommentVNode as v, unref as c, createVNode as D, createElementVNode as d, normalizeClass as E, createBlock as G, renderSlot as I } from "vue";
-import { u as U, o as q, e as S, g as P, c as R, t as T, N as X, X as H, i as V, v as p, f as Y } from "./index-CI-N9klv.js";
-import { u as z } from "./useNestedProp-D1eJ0dvv.js";
-import J from "./vue-ui-skeleton-owIhXtQF.js";
-import { _ as K } from "./PackageVersion-S3SzpuwC.js";
-const Q = ["xmlns", "viewBox"], W = ["id"], Z = ["stop-color"], ee = ["stop-color"], te = ["d", "stroke", "stroke-linecap"], ae = ["d", "stroke", "stroke-linecap", "stroke-dashoffset"], le = ["x", "y", "font-size", "fill", "font-weight"], oe = {
+import { computed as s, onMounted as N, ref as A, watch as M, openBlock as n, createElementBlock as i, normalizeStyle as m, toDisplayString as y, createCommentVNode as r, unref as c, createVNode as D, renderSlot as S, createElementVNode as d, normalizeClass as G, createBlock as I } from "vue";
+import { u as U, o as q, e as z, g as P, c as R, t as T, N as X, X as H, i as V, v as g, f as Y } from "./index-B9RAElpI.js";
+import { u as O } from "./useNestedProp-DuruL3Nt.js";
+import J from "./vue-ui-skeleton-DVYD_VSe.js";
+import { _ as K } from "./PackageVersion-C_FFs0BP.js";
+const Q = ["xmlns", "viewBox"], W = ["width", "height"], Z = ["id"], ee = ["stop-color"], te = ["stop-color"], ae = ["d", "stroke", "stroke-linecap"], le = ["d", "stroke", "stroke-linecap", "stroke-dashoffset"], oe = ["x", "y", "font-size", "fill", "font-weight"], se = {
   key: 4,
   ref: "source",
   dir: "auto"
-}, ve = {
+}, ce = {
   __name: "vue-ui-sparkgauge",
   props: {
     config: {
@@ -23,20 +23,20 @@ const Q = ["xmlns", "viewBox"], W = ["id"], Z = ["stop-color"], ee = ["stop-colo
       }
     }
   },
-  setup(F) {
-    const l = F, { vue_ui_sparkgauge: O } = U(), g = s(() => !!l.dataset && Object.keys(l.dataset).length);
+  setup(j) {
+    const l = j, { vue_ui_sparkgauge: E } = U(), p = s(() => !!l.dataset && Object.keys(l.dataset).length);
     N(() => {
       h();
     });
     function h() {
-      q(l.dataset) ? S({
+      q(l.dataset) ? z({
         componentName: "VueUiSparkgauge",
         type: "dataset"
       }) : P({
         datasetObject: l.dataset,
         requiredAttributes: ["value", "min", "max"]
       }).forEach((t) => {
-        S({
+        z({
           componentName: "VueUiSparkgauge",
           type: "datasetAttribute",
           property: t
@@ -48,12 +48,12 @@ const Q = ["xmlns", "viewBox"], W = ["id"], Z = ["stop-color"], ee = ["stop-colo
       set: (t) => t
     });
     function k() {
-      const t = z({
+      const t = O({
         userConfig: l.config,
-        defaultConfig: O
+        defaultConfig: E
       });
       return t.theme ? {
-        ...z({
+        ...O({
           userConfig: T.vue_ui_sparkgauge[t.theme] || l.config,
           defaultConfig: t
         })
@@ -67,42 +67,54 @@ const Q = ["xmlns", "viewBox"], W = ["id"], Z = ["stop-color"], ee = ["stop-colo
       width: 128,
       base: e.value.style.basePosition
     })), o = s(() => {
-      const t = l.dataset.min ?? 0, r = l.dataset.max ?? 0, B = r - t;
+      const t = l.dataset.min ?? 0, v = l.dataset.max ?? 0, B = v - t;
       return {
         min: t,
-        max: r,
+        max: v,
         diff: B
       };
     }), a = A(e.value.style.animation.show ? o.value.min : l.dataset.value);
     M(() => l.dataset.value, () => {
-      $(l.dataset.value || 0);
+      x(l.dataset.value || 0);
     });
-    const _ = s(() => a.value > o.value.max ? o.value.max : a.value < o.value.min ? o.value.min : a.value), x = s(() => o.value.diff / e.value.style.animation.speedMs);
+    const _ = s(() => a.value > o.value.max ? o.value.max : a.value < o.value.min ? o.value.min : a.value), $ = s(() => o.value.diff / e.value.style.animation.speedMs);
     N(() => {
-      $(l.dataset.value || 0);
+      x(l.dataset.value || 0);
     });
-    function $(t) {
-      function r() {
-        a.value < t ? a.value = Math.min(a.value + x.value, t) : a.value > t && (a.value = Math.max(a.value - x.value, t)), a.value !== t && requestAnimationFrame(r);
+    function x(t) {
+      function v() {
+        a.value < t ? a.value = Math.min(a.value + $.value, t) : a.value > t && (a.value = Math.max(a.value - $.value, t)), a.value !== t && requestAnimationFrame(v);
       }
-      r();
+      v();
     }
-    const f = s(() => l.dataset.title ?? ""), C = s(() => a.value >= 0 ? (_.value - o.value.min) / o.value.diff : (Math.abs(o.value.min) - Math.abs(_.value)) / o.value.diff), w = s(() => X(e.value.style.colors.min, e.value.style.colors.max, o.value.min, o.value.max, a.value)), L = s(() => e.value.style.dataLabel.autoColor ? w.value : e.value.style.dataLabel.color), j = s(() => e.value.style.track.autoColor ? w.value : e.value.style.track.color);
-    return (t, r) => (n(), i("div", {
+    const f = s(() => l.dataset.title ?? ""), w = s(() => a.value >= 0 ? (_.value - o.value.min) / o.value.diff : (Math.abs(o.value.min) - Math.abs(_.value)) / o.value.diff), C = s(() => X(e.value.style.colors.min, e.value.style.colors.max, o.value.min, o.value.max, a.value)), L = s(() => e.value.style.dataLabel.autoColor ? C.value : e.value.style.dataLabel.color), F = s(() => e.value.style.track.autoColor ? C.value : e.value.style.track.color);
+    return (t, v) => (n(), i("div", {
       style: m(`font-family:${e.value.style.fontFamily};width: 100%; background:${e.value.style.background}`)
     }, [
       e.value.style.title.show && f.value && e.value.style.title.position === "top" ? (n(), i("div", {
         key: 0,
         class: "vue-data-ui-sparkgauge-label",
         style: m(`font-size:${e.value.style.title.fontSize}px;text-align:${e.value.style.title.textAlign};font-weight:${e.value.style.title.bold ? "bold" : "normal"};color:${e.value.style.title.color}`)
-      }, y(f.value), 5)) : v("", !0),
-      g.value ? (n(), i("svg", {
+      }, y(f.value), 5)) : r("", !0),
+      p.value ? (n(), i("svg", {
         key: 1,
         xmlns: c(H),
         viewBox: `0 0 ${u.value.width} ${u.value.height}`,
         style: "overflow: visible; background:transparent; width:100%;"
       }, [
         D(K),
+        t.$slots["chart-background"] ? (n(), i("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: u.value.width,
+          height: u.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          S(t.$slots, "chart-background")
+        ], 8, W)) : r("", !0),
         d("defs", null, [
           d("linearGradient", {
             id: `gradient_${b.value}`,
@@ -114,12 +126,12 @@ const Q = ["xmlns", "viewBox"], W = ["id"], Z = ["stop-color"], ee = ["stop-colo
             d("stop", {
               offset: "0%",
               "stop-color": e.value.style.colors.min
-            }, null, 8, Z),
+            }, null, 8, ee),
             d("stop", {
               offset: "100%",
               "stop-color": e.value.style.colors.max
-            }, null, 8, ee)
-          ], 8, W)
+            }, null, 8, te)
+          ], 8, Z)
         ]),
         d("path", {
           d: `M10 ${u.value.base} A 1 1 0 1 1 118 ${u.value.base}`,
@@ -127,19 +139,19 @@ const Q = ["xmlns", "viewBox"], W = ["id"], Z = ["stop-color"], ee = ["stop-colo
           "stroke-width": 8,
           "stroke-linecap": e.value.style.gutter.strokeLinecap,
           fill: "none"
-        }, null, 8, te),
-        C.value !== 0 ? (n(), i("path", {
-          key: 0,
+        }, null, 8, ae),
+        w.value !== 0 ? (n(), i("path", {
+          key: 1,
           d: `M10 ${u.value.base} A 1 1 0 1 1 118 ${u.value.base}`,
-          stroke: e.value.style.colors.showGradient ? `url(#gradient_${b.value})` : j.value,
+          stroke: e.value.style.colors.showGradient ? `url(#gradient_${b.value})` : F.value,
           "stroke-width": 8,
           "stroke-linecap": e.value.style.track.strokeLinecap,
           fill: "none",
           "stroke-dasharray": 169.5,
-          "stroke-dashoffset": 169.5 - 169.5 * C.value,
-          class: E({ "vue-ui-sparkgauge-track": e.value.style.animation.show }),
+          "stroke-dashoffset": 169.5 - 169.5 * w.value,
+          class: G({ "vue-ui-sparkgauge-track": e.value.style.animation.show }),
           style: m(e.value.style.animation.show ? `animation: vue-ui-sparkgauge-animation ${e.value.style.animation.speedMs}ms ease-in;` : "")
-        }, null, 14, ae)) : v("", !0),
+        }, null, 14, le)) : r("", !0),
         d("text", {
           "text-anchor": "middle",
           x: u.value.width / 2,
@@ -149,17 +161,17 @@ const Q = ["xmlns", "viewBox"], W = ["id"], Z = ["stop-color"], ee = ["stop-colo
           "font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
         }, y(c(V)(
           e.value.style.dataLabel.formatter,
-          c(p)(a.value),
+          c(g)(a.value),
           c(Y)({
             p: e.value.style.dataLabel.prefix,
-            v: c(p)(a.value),
+            v: c(g)(a.value),
             s: e.value.style.dataLabel.suffix,
             r: e.value.style.dataLabel.rounding
           }),
-          { datapoint: c(p)(a.value), color: L.value }
-        )), 9, le)
-      ], 8, Q)) : v("", !0),
-      g.value ? v("", !0) : (n(), G(J, {
+          { datapoint: c(g)(a.value), color: L.value }
+        )), 9, oe)
+      ], 8, Q)) : r("", !0),
+      p.value ? r("", !0) : (n(), I(J, {
         key: 2,
         config: {
           type: "gauge",
@@ -175,13 +187,13 @@ const Q = ["xmlns", "viewBox"], W = ["id"], Z = ["stop-color"], ee = ["stop-colo
         key: 3,
         class: "vue-data-ui-sparkgauge-label",
         style: m(`font-size:${e.value.style.title.fontSize}px;text-align:${e.value.style.title.textAlign};font-weight:${e.value.style.title.bold ? "bold" : "normal"};font-weight:${e.value.style.title.bold ? "bold" : "normal"};color:${e.value.style.title.color}`)
-      }, y(f.value), 5)) : v("", !0),
-      t.$slots.source ? (n(), i("div", oe, [
-        I(t.$slots, "source")
-      ], 512)) : v("", !0)
+      }, y(f.value), 5)) : r("", !0),
+      t.$slots.source ? (n(), i("div", se, [
+        S(t.$slots, "source")
+      ], 512)) : r("", !0)
     ], 4));
   }
 };
 export {
-  ve as default
+  ce as default
 };

package/dist/vue-ui-sparkgauge-il4rmDdv.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),n=require("./index-DaDv7p0W.cjs"),b=require("./useNestedProp-DkpuL8Iv.cjs"),w=require("./vue-ui-skeleton-B24XJJ2p.cjs"),x=require("./PackageVersion-nr7f_VNw.cjs"),S=["xmlns","viewBox"],B=["width","height"],E=["id"],L=["stop-color"],M=["stop-color"],V=["d","stroke","stroke-linecap"],z=["d","stroke","stroke-linecap","stroke-dashoffset"],A=["x","y","font-size","fill","font-weight"],O={key:4,ref:"source",dir:"auto"},j={__name:"vue-ui-sparkgauge",props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{}}}},setup(C){const o=C,{vue_ui_sparkgauge:_}=n.useConfig(),c=e.computed(()=>!!o.dataset&&Object.keys(o.dataset).length);e.onMounted(()=>{d()});function d(){n.objectIsEmpty(o.dataset)?n.error({componentName:"VueUiSparkgauge",type:"dataset"}):n.getMissingDatasetAttributes({datasetObject:o.dataset,requiredAttributes:["value","min","max"]}).forEach(a=>{n.error({componentName:"VueUiSparkgauge",type:"datasetAttribute",property:a})})}const v=e.ref(n.createUid()),t=e.computed({get:()=>m(),set:a=>a});function m(){const a=b.useNestedProp({userConfig:o.config,defaultConfig:_});return a.theme?{...b.useNestedProp({userConfig:n.themes.vue_ui_sparkgauge[a.theme]||o.config,defaultConfig:a})}:a}e.watch(()=>o.config,a=>{t.value=m(),d()},{deep:!0});const u=e.computed(()=>({height:t.value.style.height,width:128,base:t.value.style.basePosition})),s=e.computed(()=>{const a=o.dataset.min??0,r=o.dataset.max??0,$=r-a;return{min:a,max:r,diff:$}}),l=e.ref(t.value.style.animation.show?s.value.min:o.dataset.value);e.watch(()=>o.dataset.value,()=>{y(o.dataset.value||0)});const f=e.computed(()=>l.value>s.value.max?s.value.max:l.value<s.value.min?s.value.min:l.value),p=e.computed(()=>s.value.diff/t.value.style.animation.speedMs);e.onMounted(()=>{y(o.dataset.value||0)});function y(a){function r(){l.value<a?l.value=Math.min(l.value+p.value,a):l.value>a&&(l.value=Math.max(l.value-p.value,a)),l.value!==a&&requestAnimationFrame(r)}r()}const i=e.computed(()=>o.dataset.title??""),g=e.computed(()=>l.value>=0?(f.value-s.value.min)/s.value.diff:(Math.abs(s.value.min)-Math.abs(f.value))/s.value.diff),h=e.computed(()=>n.interpolateColorHex(t.value.style.colors.min,t.value.style.colors.max,s.value.min,s.value.max,l.value)),k=e.computed(()=>t.value.style.dataLabel.autoColor?h.value:t.value.style.dataLabel.color),N=e.computed(()=>t.value.style.track.autoColor?h.value:t.value.style.track.color);return(a,r)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(`font-family:${t.value.style.fontFamily};width: 100%; background:${t.value.style.background}`)},[t.value.style.title.show&&i.value&&t.value.style.title.position==="top"?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vue-data-ui-sparkgauge-label",style:e.normalizeStyle(`font-size:${t.value.style.title.fontSize}px;text-align:${t.value.style.title.textAlign};font-weight:${t.value.style.title.bold?"bold":"normal"};color:${t.value.style.title.color}`)},e.toDisplayString(i.value),5)):e.createCommentVNode("",!0),c.value?(e.openBlock(),e.createElementBlock("svg",{key:1,xmlns:e.unref(n.XMLNS),viewBox:`0 0 ${u.value.width} ${u.value.height}`,style:"overflow: visible; background:transparent; width:100%;"},[e.createVNode(x._sfc_main),a.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:u.value.width,height:u.value.height,style:{pointerEvents:"none"}},[e.renderSlot(a.$slots,"chart-background")],8,B)):e.createCommentVNode("",!0),e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{id:`gradient_${v.value}`,x1:"-10%",y1:"100%",x2:"110%",y2:"100%"},[e.createElementVNode("stop",{offset:"0%","stop-color":t.value.style.colors.min},null,8,L),e.createElementVNode("stop",{offset:"100%","stop-color":t.value.style.colors.max},null,8,M)],8,E)]),e.createElementVNode("path",{d:`M10 ${u.value.base} A 1 1 0 1 1 118 ${u.value.base}`,stroke:t.value.style.gutter.color,"stroke-width":8,"stroke-linecap":t.value.style.gutter.strokeLinecap,fill:"none"},null,8,V),g.value!==0?(e.openBlock(),e.createElementBlock("path",{key:1,d:`M10 ${u.value.base} A 1 1 0 1 1 118 ${u.value.base}`,stroke:t.value.style.colors.showGradient?`url(#gradient_${v.value})`:N.value,"stroke-width":8,"stroke-linecap":t.value.style.track.strokeLinecap,fill:"none","stroke-dasharray":169.5,"stroke-dashoffset":169.5-169.5*g.value,class:e.normalizeClass({"vue-ui-sparkgauge-track":t.value.style.animation.show}),style:e.normalizeStyle(t.value.style.animation.show?`animation: vue-ui-sparkgauge-animation ${t.value.style.animation.speedMs}ms ease-in;`:"")},null,14,z)):e.createCommentVNode("",!0),e.createElementVNode("text",{"text-anchor":"middle",x:u.value.width/2,y:u.value.base+6+t.value.style.dataLabel.offsetY,"font-size":t.value.style.dataLabel.fontSize,fill:k.value,"font-weight":t.value.style.dataLabel.bold?"bold":"normal"},e.toDisplayString(e.unref(n.applyDataLabel)(t.value.style.dataLabel.formatter,e.unref(n.checkNaN)(l.value),e.unref(n.dataLabel)({p:t.value.style.dataLabel.prefix,v:e.unref(n.checkNaN)(l.value),s:t.value.style.dataLabel.suffix,r:t.value.style.dataLabel.rounding}),{datapoint:e.unref(n.checkNaN)(l.value),color:k.value})),9,A)],8,S)):e.createCommentVNode("",!0),c.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(w.default,{key:2,config:{type:"gauge",style:{backgroundColor:t.value.style.background,gauge:{color:"#CCCCCC"}}}},null,8,["config"])),t.value.style.title.show&&i.value&&t.value.style.title.position==="bottom"?(e.openBlock(),e.createElementBlock("div",{key:3,class:"vue-data-ui-sparkgauge-label",style:e.normalizeStyle(`font-size:${t.value.style.title.fontSize}px;text-align:${t.value.style.title.textAlign};font-weight:${t.value.style.title.bold?"bold":"normal"};font-weight:${t.value.style.title.bold?"bold":"normal"};color:${t.value.style.title.color}`)},e.toDisplayString(i.value),5)):e.createCommentVNode("",!0),a.$slots.source?(e.openBlock(),e.createElementBlock("div",O,[e.renderSlot(a.$slots,"source")],512)):e.createCommentVNode("",!0)],4))}};exports.default=j;