vue-data-ui 2.3.3 → 2.3.4

package/dist/vue-ui-timer-CAaQ-QD6.js

@@ -0,0 +1,453 @@
+import { ref as d, onMounted as q, onBeforeUnmount as J, computed as D, openBlock as r, createElementBlock as u, normalizeStyle as f, createVNode as _, createCommentVNode as p, unref as K, createElementVNode as M, mergeProps as E, renderSlot as N, normalizeProps as B, guardReactiveProps as j, toDisplayString as Q } from "vue";
+import { u as Y } from "./useNestedProp-BgWkUab_.js";
+import { u as Z, c as ee, X as te, B as O } from "./index-uOtklCCx.js";
+import { t as ae, u as se } from "./useResponsive-NZB-WLRF.js";
+import x from "./BaseIcon-7_g11dRj.js";
+import { _ as le } from "./Title-2iks1ziC.js";
+import { _ as oe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+class re {
+  constructor(F, w, I, z = !0, C = !0) {
+    this.interval = w, this.elapsed = 0, this.isPaused = !1;
+    const $ = `
+            let interval;
+            let elapsed = 0;
+            let paused = false;
+            let startTime;
+            let tickInterval;
+
+            onmessage = function(e) {
+                const { action, data } = e.data;
+
+                switch(action) {
+                    case 'start':
+                        startTime = Date.now();
+                        tickInterval = data.interval;
+                        elapsed = 0;
+                        paused = false;
+                        interval = setInterval(() => {
+                            elapsed += tickInterval;
+                            postMessage({ elapsed, timestamp: Date.now() });
+                        }, tickInterval);
+                        break;
+                    
+                    case 'pause':
+                        paused = true;
+                        clearInterval(interval);
+                        elapsed = Date.now() - startTime;
+                        break;
+
+                    case 'resume':
+                        if (paused) {
+                            startTime = Date.now() - elapsed;
+                            interval = setInterval(() => {
+                                elapsed += tickInterval;
+                                postMessage({ elapsed, timestamp: Date.now() });
+                            }, tickInterval);
+                        }
+                        paused = false;
+                        break;
+
+                    case 'stop':
+                        clearInterval(interval);
+                        elapsed = 0;
+                        postMessage({ elapsed });
+                        break;
+
+                    case 'reset':
+                        elapsed = 0;
+                        clearInterval(interval);
+                        postMessage({ elapsed });
+                        break;
+
+                    case 'lap':
+                        postMessage({
+                            elapsed,
+                            timestamp: Date.now(),
+                            action: 'lap'
+                        });
+                        break;
+
+                    default:
+                        break;
+                }
+            };
+        `, P = new Blob([$], { type: "application/javascript" }), m = URL.createObjectURL(P), n = new Worker(m);
+    function e(h) {
+      let t = Math.floor(h / 1e3), i = Math.floor(h % 1e3 / 10), v = Math.floor(t / 3600), k = Math.floor(t % 3600 / 60), a = t % 60, l = "";
+      return C && (l += String(v).padStart(2, "0") + ":"), l += String(k).padStart(2, "0") + ":", l += String(a).padStart(2, "0"), z && (l += "." + String(i).padStart(2, "0")), l;
+    }
+    this.start = () => {
+      this.isPaused = !1, n.postMessage({ action: "start", data: { interval: this.interval } });
+    }, this.pause = () => {
+      this.isPaused ? this.resume() : (this.isPaused = !0, n.postMessage({ action: "pause" }));
+    }, this.resume = () => {
+      this.isPaused && (n.postMessage({ action: "resume" }), this.isPaused = !1);
+    }, this.stop = () => {
+      n.postMessage({ action: "stop" }), this.isPaused = !1;
+    }, this.reset = () => {
+      n.postMessage({ action: "reset" }), this.elapsed = 0, this.isPaused = !1;
+    }, this.restart = () => {
+      this.stop(), this.start();
+    }, this.lap = () => new Promise((h) => {
+      n.postMessage({ action: "lap" });
+      const t = (i) => {
+        const { elapsed: v, timestamp: k, action: a } = i.data;
+        if (a === "lap") {
+          const l = e(v);
+          h({
+            timestamp: k || 0,
+            elapsed: v,
+            formatted: l
+          });
+        }
+      };
+      n.addEventListener("message", t, { once: !0 });
+    }), n.onmessage = (h) => {
+      const { elapsed: t, timestamp: i } = h.data;
+      this.elapsed = t, F({
+        timestamp: i || 0,
+        elapsed: this.elapsed,
+        formatted: e(this.elapsed)
+      });
+    }, n.onerror = (h) => {
+      I && I(h);
+    };
+  }
+}
+const ue = ["xmlns", "viewBox"], ie = { key: 0 }, ne = ["id"], ce = ["stop-color"], de = ["stop-color"], he = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ve = ["d", "stroke", "stroke-width"], pe = ["r", "fill", "stroke", "stroke-width"], fe = ["r", "fill", "stroke", "stroke-width"], we = ["x", "y"], ke = ["x", "y", "font-size", "fill", "font-weight"], ge = {
+  key: 0,
+  class: "vue-ui-timer-controls"
+}, me = ["title"], ye = ["title"], be = ["title"], _e = ["title"], Me = ["title"], Ce = {
+  __name: "vue-ui-timer",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["start", "pause", "reset", "restart", "lap"],
+  setup(U, { expose: F, emit: w }) {
+    const I = U, { vue_ui_timer: z } = Z(), C = d(null), $ = d(null), P = d(null), m = d(null), n = d(ee());
+    q(() => {
+      if (e.value.responsive) {
+        const s = ae(() => {
+          const { width: o, height: c } = se({
+            chart: C.value,
+            title: e.value.style.title.text ? $.value : null,
+            legend: P.value
+          });
+          t.value.width = o, t.value.height = c, t.value.tracker.core = O({
+            relator: Math.min(o, c),
+            adjuster: e.value.style.width,
+            source: 6 * e.value.stopwatch.tracker.radiusRatio,
+            threshold: 1,
+            fallback: 1
+          }), t.value.tracker.aura = O({
+            relator: Math.min(o, c),
+            adjuster: e.value.style.width,
+            source: 12 * e.value.stopwatch.tracker.aura.radiusRatio,
+            threshold: 1,
+            fallback: 1
+          }), t.value.label = O({
+            relator: Math.min(o, c),
+            adjuster: e.value.style.width,
+            source: e.value.stopwatch.label.fontSize,
+            threshold: 10,
+            fallback: 10
+          });
+        });
+        m.value = new ResizeObserver(s), m.value.observe(C.value.parentNode);
+      }
+    }), J(() => {
+      m.value && m.value.disconnect();
+    });
+    const e = D(() => Y({
+      userConfig: I.config,
+      defaultConfig: z
+    })), h = D(() => {
+      if (e.value.stopwatch.showHours && e.value.stopwatch.showHundredth)
+        return "00:00:00.00";
+      if (e.value.stopwatch.showHours && !e.value.stopwatch.showHundredth)
+        return "00:00:00";
+      if (!e.value.stopwatch.showHours && e.value.stopwatch.showHundredth)
+        return "00:00.00";
+      if (!e.value.stopwatch.showHours && !e.value.stopwatch.showHundredth)
+        return "00:00";
+    }), t = d({
+      height: e.value.style.height,
+      width: e.value.style.width,
+      tracker: {
+        core: 6 * e.value.stopwatch.tracker.radiusRatio,
+        aura: 12 * e.value.stopwatch.tracker.aura.radiusRatio
+      },
+      label: e.value.stopwatch.label.fontSize
+    }), i = d(0), v = new re(
+      (s) => W(s),
+      10,
+      "",
+      e.value.stopwatch.showHundredth,
+      e.value.stopwatch.showHours
+    ), k = d(!0), a = d(!1), l = d(!1);
+    function R() {
+      w("start"), k.value && v.start(), k.value = !1, a.value = !0;
+    }
+    function A() {
+      a.value && (w("reset"), v.stop(), y.value = [], k.value = !0, a.value = !1);
+    }
+    function H() {
+      l.value = !l.value, w("pause", i.value), v.pause();
+    }
+    function L() {
+      a.value && (l.value = !1, w("restart"), y.value = [], v.restart());
+    }
+    const y = d([]);
+    async function S() {
+      if (!a.value || l.value) return;
+      const s = await v.lap();
+      s && (y.value.push(s), w("lap", y.value));
+    }
+    function W({ timestamp: s, elapsed: o, formatted: c }) {
+      i.value = { timestamp: s, elapsed: o, formatted: c };
+    }
+    const g = D(() => Math.min(t.value.width, t.value.height) / 2.5 * e.value.stopwatch.track.radiusRatio);
+    function G(s, o) {
+      const T = 360 / (o * 1e3);
+      return s * T % 360;
+    }
+    function V(s) {
+      let o = s * (Math.PI / 180), c = t.value.width / 2 + g.value * Math.cos(o), T = t.value.height / 2 + g.value * Math.sin(o);
+      return { cx: c, cy: T };
+    }
+    const b = D(() => {
+      const s = G(i.value.elapsed, e.value.stopwatch.cycleSeconds), { cx: o, cy: c } = V(s - 90), T = s > 180 ? 1 : 0;
+      return {
+        cx: o || t.value.width / 2,
+        cy: c || t.value.height / 2 - g.value,
+        largeArcFlag: T,
+        sweepFlag: 1
+      };
+    });
+    return F({
+      start: R,
+      pause: H,
+      reset: A,
+      restart: L,
+      lap: S
+    }), (s, o) => (r(), u("div", {
+      ref_key: "timerChart",
+      ref: C,
+      class: "vue-ui-timer",
+      style: f({
+        fontFamily: e.value.style.fontFamily,
+        width: "100%",
+        height: e.value.responsive ? "100%" : "auto",
+        textAlign: "center"
+      })
+    }, [
+      e.value.style.title.text ? (r(), u("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: $,
+        style: f({
+          width: "100%",
+          background: e.value.style.backgroundColor
+        })
+      }, [
+        _(le, {
+          config: {
+            title: {
+              cy: "title",
+              ...e.value.style.title
+            },
+            subtitle: {
+              cy: "subtitle",
+              ...e.value.style.title.subtitle
+            }
+          }
+        }, null, 8, ["config"])
+      ], 4)) : p("", !0),
+      (r(), u("svg", {
+        xmlns: K(te),
+        viewBox: `0 0 ${t.value.width <= 0 ? 10 : t.value.width} ${t.value.height <= 0 ? 10 : t.value.height}`,
+        style: f({
+          maxWidth: "100%",
+          overflow: "visible",
+          background: e.value.style.backgroundColor
+        })
+      }, [
+        e.value.stopwatch.tracker.gradient.show ? (r(), u("defs", ie, [
+          M("radialGradient", {
+            id: `tracker_gradient_${n.value}`,
+            cx: "50%",
+            cy: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%"
+          }, [
+            M("stop", {
+              offset: "0%",
+              "stop-color": e.value.stopwatch.tracker.gradient.color
+            }, null, 8, ce),
+            M("stop", {
+              offset: "100%",
+              "stop-color": e.value.stopwatch.tracker.fill
+            }, null, 8, de)
+          ], 8, ne)
+        ])) : p("", !0),
+        M("circle", {
+          cx: t.value.width / 2,
+          cy: t.value.height / 2,
+          r: g.value,
+          fill: e.value.stopwatch.track.fill,
+          stroke: e.value.stopwatch.track.stroke,
+          "stroke-width": e.value.stopwatch.track.strokeWidth
+        }, null, 8, he),
+        e.value.stopwatch.cycleTrack.show ? (r(), u("path", {
+          key: 1,
+          d: `M ${t.value.width / 2},${t.value.height / 2 - g.value} A ${g.value},${g.value} 0 ${b.value.largeArcFlag},${b.value.sweepFlag} ${b.value.cx},${b.value.cy}`,
+          stroke: e.value.stopwatch.cycleTrack.stroke,
+          "stroke-width": e.value.stopwatch.cycleTrack.strokeWidth,
+          "stroke-linecap": "round",
+          fill: "none"
+        }, null, 8, ve)) : p("", !0),
+        M("circle", E(b.value, {
+          r: t.value.tracker.core,
+          fill: e.value.stopwatch.tracker.gradient.show ? `url(#tracker_gradient_${n.value})` : e.value.stopwatch.tracker.fill,
+          stroke: e.value.stopwatch.tracker.stroke,
+          "stroke-width": e.value.stopwatch.tracker.strokeWidth
+        }), null, 16, pe),
+        e.value.stopwatch.tracker.aura.show ? (r(), u("circle", E({ key: 2 }, b.value, {
+          r: t.value.tracker.aura,
+          fill: `${e.value.stopwatch.tracker.aura.fill}20`,
+          stroke: e.value.stopwatch.tracker.aura.stroke,
+          "stroke-width": e.value.stopwatch.tracker.aura.strokeWidth
+        }), null, 16, fe)) : p("", !0),
+        s.$slots.time ? (r(), u("foreignObject", {
+          key: 3,
+          x: t.value.width / 2,
+          y: t.value.height / 2,
+          height: "0.1",
+          width: "0.1",
+          style: { overflow: "visible" }
+        }, [
+          N(s.$slots, "time", B(j({ ...i.value })), void 0, !0)
+        ], 8, we)) : (r(), u("text", {
+          key: 4,
+          x: t.value.width / 2,
+          y: t.value.height / 2 + t.value.label / 4,
+          "font-size": t.value.label,
+          "text-anchor": "middle",
+          fill: e.value.stopwatch.label.color,
+          "font-weight": e.value.stopwatch.label.bold ? "bold" : "normal",
+          style: { "font-variant-numeric": "tabular-nums !important" }
+        }, Q(i.value.formatted || h.value), 9, ke))
+      ], 12, ue)),
+      M("div", {
+        ref_key: "chartLegend",
+        ref: P,
+        style: f({ width: "100%", backgroundColor: e.value.stopwatch.legend.backgroundColor })
+      }, [
+        s.$slots.controls ? p("", !0) : (r(), u("div", ge, [
+          e.value.stopwatch.legend.buttons.start ? (r(), u("button", {
+            key: 0,
+            title: e.value.stopwatch.legend.buttonTitles.start,
+            onClick: R,
+            class: "vue-ui-timer-button",
+            style: f({
+              opacity: a.value ? 0.2 : 1,
+              cursor: a.value ? "default" : "pointer"
+            })
+          }, [
+            _(x, {
+              name: "play",
+              stroke: e.value.stopwatch.legend.buttons.iconColor
+            }, null, 8, ["stroke"])
+          ], 12, me)) : p("", !0),
+          e.value.stopwatch.legend.buttons.pause ? (r(), u("button", {
+            key: 1,
+            title: l.value ? e.value.stopwatch.legend.buttonTitles.resume : e.value.stopwatch.legend.buttonTitles.pause,
+            onClick: H,
+            class: "vue-ui-timer-button",
+            style: f({
+              opacity: a.value ? 1 : 0.2,
+              cursor: a.value ? "pointer" : "default"
+            })
+          }, [
+            _(x, {
+              name: "pause",
+              stroke: e.value.stopwatch.legend.buttons.iconColor
+            }, null, 8, ["stroke"])
+          ], 12, ye)) : p("", !0),
+          e.value.stopwatch.legend.buttons.reset ? (r(), u("button", {
+            key: 2,
+            title: e.value.stopwatch.legend.buttonTitles.reset,
+            onClick: A,
+            class: "vue-ui-timer-button",
+            style: f({
+              opacity: a.value ? 1 : 0.2,
+              cursor: a.value ? "pointer" : "default"
+            })
+          }, [
+            _(x, {
+              name: "stop",
+              stroke: e.value.stopwatch.legend.buttons.iconColor
+            }, null, 8, ["stroke"])
+          ], 12, be)) : p("", !0),
+          e.value.stopwatch.legend.buttons.restart ? (r(), u("button", {
+            key: 3,
+            title: e.value.stopwatch.legend.buttonTitles.restart,
+            onClick: L,
+            class: "vue-ui-timer-button",
+            style: f({
+              opacity: a.value ? 1 : 0.2,
+              cursor: a.value ? "pointer" : "default"
+            })
+          }, [
+            _(x, {
+              name: "restart",
+              stroke: e.value.stopwatch.legend.buttons.iconColor
+            }, null, 8, ["stroke"])
+          ], 12, _e)) : p("", !0),
+          e.value.stopwatch.legend.buttons.lap ? (r(), u("button", {
+            key: 4,
+            title: e.value.stopwatch.legend.buttonTitles.lap,
+            onClick: S,
+            class: "vue-ui-timer-button",
+            style: f({
+              opacity: a.value && !l.value ? 1 : 0.2,
+              cursor: a.value && !l.value ? "pointer" : "default"
+            })
+          }, [
+            _(x, {
+              name: "lap",
+              stroke: e.value.stopwatch.legend.buttons.iconColor
+            }, null, 8, ["stroke"])
+          ], 12, Me)) : p("", !0)
+        ])),
+        N(s.$slots, "controls", B(j({
+          start: R,
+          pause: H,
+          reset: A,
+          restart: L,
+          lap: S,
+          laps: y.value,
+          isRunning: a.value,
+          isPaused: l.value,
+          ...i.value
+        })), void 0, !0),
+        N(s.$slots, "laps", B(j({
+          laps: y.value,
+          lap: S,
+          isRunning: a.value,
+          isPaused: l.value,
+          ...i.value
+        })), void 0, !0)
+      ], 4)
+    ], 4));
+  }
+}, De = /* @__PURE__ */ oe(Ce, [["__scopeId", "data-v-1e579c02"]]);
+export {
+  De as default
+};

package/dist/vue-ui-tiremarks-CbGOSEvD.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),S=require("./useNestedProp-2kIU-7On.cjs"),g=require("./index-p5gfZSvB.cjs"),j=require("./Title-Bb-A5OSV.cjs"),N=require("./usePrinter-fZlsJid8.cjs"),L=require("./vue-ui-skeleton-sjfOtCZr.cjs"),U=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),H=["id"],M=["xmlns","viewBox"],X={key:0},D=["d","stroke-width","stroke"],R={key:1},Y=["x1","y1","x2","y2","stroke-width","stroke"],J=["x","y","font-size","fill","font-weight","text-anchor"],K={__name:"vue-ui-tiremarks",props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{}}}},setup(E,{expose:O}){const u=E,{vue_ui_tiremarks:A}=g.useConfig(),x=e.computed(()=>!!u.dataset&&Object.keys(u.dataset).length),$=e.ref(g.createUid()),w=e.ref(null),P=e.ref(0),t=e.computed(()=>{const a=S.useNestedProp({userConfig:u.config,defaultConfig:A});return a.theme?{...S.useNestedProp({userConfig:g.themes.vue_ui_tiremarks[a.theme]||u.config,defaultConfig:a})}:a}),{isPrinting:V,isImaging:q,generatePdf:B,generateImage:z}=N.usePrinter({elementId:$.value,fileName:t.value.style.chart.title.text||"vue-ui-tiremarks"}),c=e.ref(t.value.style.chart.animation.use?0:u.dataset.percentage);e.watch(()=>u.dataset.percentage,()=>{c.value=e.ref(t.value.style.chart.animation.use?0:u.dataset.percentage),F()}),e.onMounted(()=>{g.objectIsEmpty(u.dataset)&&g.error({componentName:"VueUiTiremarks",type:"dataset"}),F()});function F(){let a=0,s=t.value.style.chart.animation.speed,l=.005*t.value.style.chart.animation.acceleration;function r(){c.value+=s+a,a+=l,c.value<u.dataset.percentage?requestAnimationFrame(r):c.value=u.dataset.percentage}t.value.style.chart.animation.use&&(c.value=0,r())}const y=e.computed(()=>t.value.style.chart.layout.display==="vertical"),n=e.computed(()=>{const a={top:48,left:64,right:64,bottom:48};return y.value?{top:t.value.style.chart.percentage.verticalPosition==="top"?a.top:3,left:3,right:3,bottom:t.value.style.chart.percentage.verticalPosition==="bottom"?a.bottom:3}:{top:0,bottom:0,left:t.value.style.chart.percentage.horizontalPosition==="left"?a.left:3,right:t.value.style.chart.percentage.horizontalPosition==="right"?a.right:10}}),_=e.computed(()=>Object.values(n.value).reduce((a,s)=>a+s,0)),o=e.computed(()=>({height:y.value?312:56,width:y.value?56:312})),G=e.ref(100);e.computed(()=>u.dataset.percentage/G.value);const i=e.computed(()=>y.value?{mark:(o.value.height-_.value)/100*.5,space:(o.value.height-_.value)/100*.5}:{mark:(o.value.width-_.value)/100*.5,space:(o.value.width-_.value)/100*.5}),I=e.computed(()=>{const a=[];for(let l=0;l<100;l+=1){const r=t.value.style.chart.layout.ticks.gradient.show?g.shiftHue(t.value.style.chart.layout.activeColor,l/100*(t.value.style.chart.layout.ticks.gradient.shiftHueIntensity/100)):t.value.style.chart.layout.activeColor;if(y.value){const f=t.value.style.chart.layout.crescendo?(100-l)*(o.value.width-n.value.left-n.value.right)/100/3:0,v=n.value.left+4+f,d=o.value.width-n.value.right-4-f,h=o.value.height-n.value.bottom-l*i.value.mark-l*i.value.space-i.value.mark,m=o.value.height-n.value.bottom-l*i.value.mark-l*i.value.space-i.value.mark,k=(d-v)/t.value.style.chart.layout.curveAngleX,b=t.value.style.chart.layout.curveAngleY*((1+l)/100);a.push({x1:v,x2:d,y1:h,y2:m,curve:`M ${v} ${h} C ${v+k} ${h-b}, ${d-k} ${m-b}, ${d} ${m}`,color:r})}else{const f=t.value.style.chart.layout.crescendo?(100-l)*(o.value.height-n.value.top-n.value.bottom)/100/3:0,v=n.value.left+l*i.value.mark+l*i.value.space-i.value.mark,d=v,h=n.value.top+4+f,m=o.value.height-n.value.bottom-4-f,k=t.value.style.chart.layout.curveAngleY*((1+l)/100),b=(m-h)/t.value.style.chart.layout.curveAngleX;a.push({x1:v,x2:d,y1:h,y2:m,curve:`M ${v} ${h} C ${v+k} ${h+b}, ${d+k} ${m-b}, ${d} ${m}`,color:r})}}return a}),p=e.computed(()=>{let a,s,l;const r=t.value.style.chart.percentage.fontSize/3;return y.value?t.value.style.chart.percentage.verticalPosition==="top"?(a=o.value.width/2,s=n.value.top/2,l="middle"):t.value.style.chart.percentage.verticalPosition==="bottom"&&(a=o.value.width/2,s=o.value.height-n.value.bottom/2+r,l="middle"):t.value.style.chart.percentage.horizontalPosition==="left"?(a=4,s=o.value.height/2+r,l="start"):t.value.style.chart.percentage.horizontalPosition==="right"&&(a=o.value.width-n.value.right+8,s=o.value.height/2+r,l="start"),{x:a,y:s,textAnchor:l,bold:t.value.style.chart.percentage.bold,fontSize:t.value.style.chart.percentage.fontSize,fill:t.value.style.chart.percentage.color}}),C=e.ref(!1);function T(a){C.value=a,P.value+=1}return O({generatePdf:B,generateImage:z}),(a,s)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"tiremarksChart",ref:w,class:e.normalizeClass(`vue-ui-tiremarks ${t.value.useCssAnimation?"":"vue-ui-dna"}`),style:e.normalizeStyle(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;${t.value.style.chart.title.text?"":"padding-top:36px"};background:${t.value.style.chart.backgroundColor}`),id:$.value},[t.value.style.chart.title.text?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(`width:100%;background:${t.value.style.chart.backgroundColor};padding-bottom:12px`)},[e.createVNode(j._sfc_main,{config:{title:{cy:"wheel-title",...t.value.style.chart.title},subtitle:{cy:"wheel-subtitle",...t.value.style.chart.title.subtitle}}},null,8,["config"])],4)):e.createCommentVNode("",!0),t.value.userOptions.show&&x.value?(e.openBlock(),e.createBlock(N.UserOptions,{ref:"details",key:`user_options_${P.value}`,backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color,isPrinting:e.unref(V),isImaging:e.unref(q),uid:$.value,hasPdf:t.value.userOptions.buttons.pdf,hasImg:t.value.userOptions.buttons.img,hasFullscreen:t.value.userOptions.buttons.fullscreen,hasXls:!1,isFullscreen:C.value,titles:{...t.value.userOptions.buttonTitles},chartElement:w.value,onToggleFullscreen:T,onGeneratePdf:e.unref(B),onGenerateImage:e.unref(z)},e.createSlots({_:2},[a.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"optionPdf",{},void 0,!0)]),key:"0"}:void 0,a.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"optionImg",{},void 0,!0)]),key:"1"}:void 0,a.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:l,isFullscreen:r})=>[e.renderSlot(a.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:l,isFullscreen:r})),void 0,!0)]),key:"2"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasImg","hasFullscreen","isFullscreen","titles","chartElement","onGeneratePdf","onGenerateImage"])):e.createCommentVNode("",!0),x.value?(e.openBlock(),e.createElementBlock("svg",{key:2,xmlns:e.unref(g.XMLNS),class:e.normalizeClass({"vue-data-ui-fullscreen--on":C.value,"vue-data-ui-fulscreen--off":!C.value}),viewBox:`0 0 ${o.value.width} ${o.value.height}`,style:e.normalizeStyle(`max-width:100%; overflow: visible; background:${t.value.style.chart.backgroundColor};color:${t.value.style.chart.color}`)},[t.value.style.chart.layout.curved?(e.openBlock(),e.createElementBlock("g",X,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(I.value,(l,r)=>(e.openBlock(),e.createElementBlock("path",{d:l.curve,"stroke-width":i.value.mark,stroke:c.value>=r?l.color:t.value.style.chart.layout.inactiveColor,"stroke-linecap":"round",fill:"none",class:e.normalizeClass({"vue-ui-tick-animated":t.value.style.chart.animation.use&&r<=c.value})},null,10,D))),256))])):(e.openBlock(),e.createElementBlock("g",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(I.value,(l,r)=>(e.openBlock(),e.createElementBlock("line",{x1:l.x1,y1:l.y1,x2:l.x2,y2:l.y2,"stroke-width":i.value.mark,stroke:c.value>=r?l.color:t.value.style.chart.layout.inactiveColor,"stroke-linecap":"round"},null,8,Y))),256))])),t.value.style.chart.percentage.show?(e.openBlock(),e.createElementBlock("text",{key:2,x:p.value.x,y:p.value.y,"font-size":p.value.fontSize,fill:t.value.style.chart.layout.ticks.gradient.show&&t.value.style.chart.percentage.useGradientColor?e.unref(g.shiftHue)(t.value.style.chart.layout.activeColor,c.value/100*(t.value.style.chart.layout.ticks.gradient.shiftHueIntensity/100)):t.value.style.chart.percentage.color,"font-weight":p.value.bold?"bold":"normal","text-anchor":p.value.textAnchor},e.toDisplayString(c.value.toFixed(t.value.style.chart.percentage.rounding)+"%"),9,J)):e.createCommentVNode("",!0),e.renderSlot(a.$slots,"svg",{svg:o.value},void 0,!0)],14,M)):e.createCommentVNode("",!0),x.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(L.default,{key:3,config:{type:"tiremarks",style:{backgroundColor:t.value.style.chart.backgroundColor,tiremarks:{color:"#CCCCCC"}}}},null,8,["config"]))],14,H))}},Q=U._export_sfc(K,[["__scopeId","data-v-1bbd1baf"]]);exports.default=Q;