vlite3 1.1.7 → 1.1.9

package/components/Chart/GaugeChart.vue.js

@@ -0,0 +1,443 @@
+import { defineComponent as ae, computed as u, ref as oe, onMounted as ne, watch as se, onUnmounted as ie, openBlock as o, createElementBlock as n, createElementVNode as i, unref as m, Fragment as T, renderList as F, createCommentVNode as r, renderSlot as B, normalizeStyle as M, toDisplayString as S } from "vue";
+import { resolveColor as ue, clamp as re, animateProgress as ce } from "./utils.js";
+const de = { class: "vlite-gauge-chart inline-flex flex-col items-center gap-1 select-none" }, he = ["width", "height", "viewBox", "aria-label"], ve = ["id"], fe = ["stop-color"], ke = ["stop-color"], ye = ["id", "gradientTransform"], ge = ["stop-color"], me = ["stop-color"], xe = ["id"], we = ["stop-color"], be = ["id"], $e = { key: 0 }, ze = ["d", "stroke", "stroke-width"], Me = ["d", "stroke", "stroke-width"], Se = ["d", "stroke", "stroke-width", "stroke-linecap", "filter"], Ce = { key: 1 }, We = ["d", "fill"], Ve = ["cx", "cy", "r", "fill"], Ae = ["x", "y", "width", "height"], Pe = {
+  xmlns: "http://www.w3.org/1999/xhtml",
+  class: "w-full h-full flex flex-col items-center justify-center text-center"
+}, Be = { key: 1 }, je = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "opacity"], De = ["x", "y", "width", "height"], Re = {
+  xmlns: "http://www.w3.org/1999/xhtml",
+  class: "w-full h-full flex flex-col items-center justify-center text-center gap-1"
+}, Ge = { key: 2 }, Le = ["d", "stroke", "stroke-width"], Ne = ["d", "stroke", "stroke-width"], Te = ["d", "stroke", "stroke-width", "stroke-linecap"], Fe = { key: 1 }, Ie = ["d", "fill"], Oe = ["cx", "cy", "r", "stroke"], pe = ["x", "y", "width", "height"], Ee = {
+  xmlns: "http://www.w3.org/1999/xhtml",
+  class: "w-full h-full flex flex-col items-center justify-center text-center"
+}, Ue = { key: 3 }, Ze = ["d", "stroke", "stroke-width"], qe = ["d", "stroke", "stroke-width"], He = ["d", "stroke", "stroke-width"], Je = { key: 1 }, Ke = ["cx", "cy", "r", "fill"], Qe = ["cx", "cy", "r", "fill"], Xe = ["cx", "cy", "r", "stroke", "stroke-width"], Ye = ["x", "y", "width", "height"], _e = {
+  xmlns: "http://www.w3.org/1999/xhtml",
+  class: "w-full h-full flex flex-col items-center justify-center text-center"
+}, et = {
+  key: 0,
+  class: "text-center -mt-1"
+}, at = /* @__PURE__ */ ae({
+  __name: "GaugeChart",
+  props: {
+    value: {},
+    min: { default: 0 },
+    max: { default: 100 },
+    variant: { default: "arc" },
+    size: { default: 220 },
+    strokeWidth: { default: 18 },
+    gapAngle: { default: 60 },
+    color: { default: "primary" },
+    trackColor: {},
+    gradient: { type: Boolean, default: !0 },
+    tickCount: { default: 48 },
+    tickGap: { default: 2.5 },
+    tickWidth: { default: 3 },
+    ballRadius: {},
+    showValue: { type: Boolean, default: !0 },
+    formatValue: {},
+    label: {},
+    sublabel: {},
+    showNeedle: { type: Boolean, default: !1 },
+    needleColor: {},
+    zones: {},
+    lineCap: { default: "round" },
+    animate: { type: Boolean, default: !0 }
+  },
+  setup(e) {
+    const l = e, v = Math.random().toString(36).slice(2, 8), C = u(() => 360 - l.gapAngle), f = u(() => 90 + l.gapAngle / 2), h = u(() => l.size / 2), k = u(() => l.size / 2), x = u(() => {
+      const t = l.variant === "ticks" ? 8 : l.variant === "ball" ? l.strokeWidth * 0.65 + 2 : 4;
+      return (l.size - l.strokeWidth) / 2 - t;
+    }), I = (t) => re((t - l.min) / (l.max - l.min), 0, 1);
+    function O(t, s) {
+      const a = t * Math.PI / 180;
+      return [h.value + s * Math.cos(a), k.value + s * Math.sin(a)];
+    }
+    function p(t, s, a) {
+      const d = s - t;
+      if (Math.abs(d) < 0.01) return "";
+      const w = Math.abs(d) > 180 ? 1 : 0, W = d > 0 ? 1 : 0, [P, L] = O(t, a), [$, z] = O(s, a);
+      return `M ${P},${L} A ${a},${a} 0 ${w} ${W} ${$},${z}`;
+    }
+    const b = u(() => I(l.value)), y = oe(l.animate ? 0 : b.value);
+    let E = null;
+    function H(t) {
+      E?.();
+      const s = y.value;
+      E = ce(1e3, (a) => {
+        y.value = s + (t - s) * a;
+      });
+    }
+    ne(() => {
+      l.animate && H(b.value);
+    }), se(b, (t) => {
+      l.animate ? H(t) : y.value = t;
+    }), ie(() => E?.());
+    const c = u(() => ue(l.color ?? "primary")), J = u(() => ({
+      primary: "#818cf8",
+      success: "#34d399",
+      warning: "#fbbf24",
+      danger: "#fb7185",
+      info: "#60a5fa",
+      purple: "#c084fc",
+      teal: "#2dd4bf",
+      orange: "#fb923c",
+      pink: "#f472b6",
+      cyan: "#22d3ee"
+    })[l.color ?? "primary"] ?? c.value), j = u(() => l.trackColor ?? "var(--color-muted)"), U = u(
+      () => p(f.value, f.value + C.value, x.value)
+    ), V = u(() => {
+      const t = C.value * y.value;
+      return t < 0.01 ? "" : p(f.value, f.value + t, x.value);
+    }), Z = u(() => l.zones?.length ? l.zones.map((t) => {
+      const s = f.value + C.value * I(t.from), a = f.value + C.value * I(t.to);
+      return { path: p(s, a, x.value), color: t.color };
+    }) : []), Y = u(() => f.value + C.value * y.value), K = u(() => {
+      const t = x.value * 0.76, s = x.value * 0.12, a = l.strokeWidth * 0.55, w = Y.value * Math.PI / 180, W = w + Math.PI / 2, P = h.value + t * Math.cos(w), L = k.value + t * Math.sin(w), $ = h.value - s * Math.cos(w), z = k.value - s * Math.sin(w), N = $ + a * Math.cos(W), ee = z + a * Math.sin(W), te = $ - a * Math.cos(W), le = z - a * Math.sin(W);
+      return `M ${P},${L} L ${N},${ee} L ${$},${z} L ${te},${le} Z`;
+    }), Q = u(() => l.strokeWidth * 0.42), _ = u(() => {
+      const t = l.tickCount, s = x.value, a = s - l.strokeWidth, d = C.value, w = Math.round(y.value * t);
+      return Array.from({ length: t }, (W, P) => {
+        const $ = (f.value + P * (d / (t - 1))) * Math.PI / 180, z = Math.cos($), N = Math.sin($);
+        return {
+          x1: h.value + s * z,
+          y1: k.value + s * N,
+          x2: h.value + a * z,
+          y2: k.value + a * N,
+          filled: P < w
+        };
+      });
+    }), g = u(() => {
+      const t = y.value * 100, s = l.min + (l.max - l.min) * y.value;
+      return l.formatValue ? l.formatValue(s, t) : l.min === 0 && l.max === 100 ? `${Math.round(t)}%` : String(Math.round(s));
+    }), D = u(() => Math.max(14, l.size * 0.155)), X = u(() => Math.max(10, l.size * 0.065)), q = u(() => Math.max(9, l.size * 0.055)), R = u(() => l.showNeedle ? k.value + x.value * 0.45 : k.value + x.value * 0.08), A = u(() => {
+      const t = f.value + C.value * y.value, [s, a] = O(t, x.value);
+      return { x: s, y: a };
+    }), G = u(() => l.ballRadius ?? l.strokeWidth * 0.65);
+    return (t, s) => (o(), n("div", de, [
+      (o(), n("svg", {
+        width: e.size,
+        height: e.size,
+        viewBox: `0 0 ${e.size} ${e.size}`,
+        role: "img",
+        "aria-label": `Gauge chart: ${g.value}`,
+        class: "overflow-visible"
+      }, [
+        i("defs", null, [
+          i("linearGradient", {
+            id: `gg-${m(v)}`,
+            x1: "0",
+            y1: "0",
+            x2: "1",
+            y2: "0"
+          }, [
+            i("stop", {
+              offset: "0%",
+              "stop-color": J.value
+            }, null, 8, fe),
+            i("stop", {
+              offset: "100%",
+              "stop-color": c.value
+            }, null, 8, ke)
+          ], 8, ve),
+          i("linearGradient", {
+            id: `tg-${m(v)}`,
+            x1: "0",
+            y1: "0",
+            x2: "1",
+            y2: "0",
+            gradientTransform: `rotate(${f.value}, ${h.value}, ${k.value})`
+          }, [
+            i("stop", {
+              offset: "0%",
+              "stop-color": J.value
+            }, null, 8, ge),
+            i("stop", {
+              offset: "100%",
+              "stop-color": c.value
+            }, null, 8, me)
+          ], 8, ye),
+          i("radialGradient", {
+            id: `nh-${m(v)}`
+          }, [
+            s[0] || (s[0] = i("stop", {
+              offset: "0%",
+              "stop-color": "var(--color-background)"
+            }, null, -1)),
+            i("stop", {
+              offset: "100%",
+              "stop-color": c.value
+            }, null, 8, we)
+          ], 8, xe),
+          i("filter", {
+            id: `gs-${m(v)}`,
+            x: "-20%",
+            y: "-20%",
+            width: "140%",
+            height: "140%"
+          }, [...s[1] || (s[1] = [
+            i("feDropShadow", {
+              dx: "0",
+              dy: "2",
+              stdDeviation: "4",
+              "flood-opacity": "0.18"
+            }, null, -1)
+          ])], 8, be)
+        ]),
+        e.variant === "arc" ? (o(), n("g", $e, [
+          i("path", {
+            d: U.value,
+            fill: "none",
+            stroke: j.value,
+            "stroke-width": e.strokeWidth,
+            "stroke-linecap": "butt"
+          }, null, 8, ze),
+          (o(!0), n(T, null, F(Z.value, (a, d) => (o(), n("path", {
+            key: `z-${d}`,
+            d: a.path,
+            fill: "none",
+            stroke: a.color,
+            "stroke-width": e.strokeWidth,
+            "stroke-linecap": "butt",
+            opacity: "0.35"
+          }, null, 8, Me))), 128)),
+          V.value ? (o(), n("path", {
+            key: 0,
+            d: V.value,
+            fill: "none",
+            stroke: e.gradient ? `url(#gg-${m(v)})` : c.value,
+            "stroke-width": e.strokeWidth,
+            "stroke-linecap": e.lineCap,
+            filter: `url(#gs-${m(v)})`
+          }, null, 8, Se)) : r("", !0),
+          e.showNeedle ? (o(), n("g", Ce, [
+            i("path", {
+              d: K.value,
+              fill: e.needleColor ?? c.value,
+              "fill-opacity": 0.88
+            }, null, 8, We),
+            i("circle", {
+              cx: h.value,
+              cy: k.value,
+              r: Q.value,
+              fill: `url(#nh-${m(v)})`,
+              stroke: "var(--color-background)",
+              "stroke-width": "2.5"
+            }, null, 8, Ve)
+          ])) : r("", !0),
+          (o(), n("foreignObject", {
+            x: h.value - e.size * 0.38,
+            y: R.value - e.size * 0.1,
+            width: e.size * 0.76,
+            height: e.size * 0.22
+          }, [
+            i("div", Pe, [
+              B(t.$slots, "center", {
+                value: e.value,
+                percentage: b.value,
+                displayValue: g.value
+              }, () => [
+                e.showValue ? (o(), n("span", {
+                  key: 0,
+                  class: "font-black tabular-nums leading-none",
+                  style: M({ fontSize: `${D.value}px`, color: "var(--color-foreground)" })
+                }, S(g.value), 5)) : r("", !0)
+              ])
+            ])
+          ], 8, Ae))
+        ])) : e.variant === "ticks" ? (o(), n("g", Be, [
+          (o(!0), n(T, null, F(_.value, (a, d) => (o(), n("line", {
+            key: `tk-${d}`,
+            x1: a.x1,
+            y1: a.y1,
+            x2: a.x2,
+            y2: a.y2,
+            stroke: a.filled ? e.gradient ? `url(#tg-${m(v)})` : c.value : j.value,
+            "stroke-width": e.tickWidth,
+            "stroke-linecap": "round",
+            opacity: a.filled ? 1 : 0.45
+          }, null, 8, je))), 128)),
+          (o(), n("foreignObject", {
+            x: h.value - e.size * 0.38,
+            y: R.value - e.size * 0.22,
+            width: e.size * 0.76,
+            height: e.size * 0.44
+          }, [
+            i("div", Re, [
+              B(t.$slots, "center", {
+                value: e.value,
+                percentage: b.value,
+                displayValue: g.value
+              }, () => [
+                e.showValue ? (o(), n("span", {
+                  key: 0,
+                  class: "font-black tabular-nums leading-none",
+                  style: M({ fontSize: `${D.value}px`, color: "var(--color-foreground)" })
+                }, S(g.value), 5)) : r("", !0),
+                e.sublabel ? (o(), n("span", {
+                  key: 1,
+                  class: "font-medium leading-tight",
+                  style: M({ fontSize: `${q.value}px`, color: "var(--color-muted-foreground)" })
+                }, S(e.sublabel), 5)) : r("", !0)
+              ])
+            ])
+          ], 8, De))
+        ])) : e.variant === "slim" ? (o(), n("g", Ge, [
+          i("path", {
+            d: U.value,
+            fill: "none",
+            stroke: j.value,
+            "stroke-width": e.strokeWidth,
+            "stroke-linecap": "round",
+            opacity: "0.5"
+          }, null, 8, Le),
+          (o(!0), n(T, null, F(Z.value, (a, d) => (o(), n("path", {
+            key: `sz-${d}`,
+            d: a.path,
+            fill: "none",
+            stroke: a.color,
+            "stroke-width": e.strokeWidth,
+            "stroke-linecap": "butt",
+            opacity: "0.3"
+          }, null, 8, Ne))), 128)),
+          V.value ? (o(), n("path", {
+            key: 0,
+            d: V.value,
+            fill: "none",
+            stroke: e.gradient ? `url(#gg-${m(v)})` : c.value,
+            "stroke-width": e.strokeWidth,
+            "stroke-linecap": e.lineCap
+          }, null, 8, Te)) : r("", !0),
+          e.showNeedle ? (o(), n("g", Fe, [
+            i("path", {
+              d: K.value,
+              fill: e.needleColor ?? c.value,
+              "fill-opacity": 0.88
+            }, null, 8, Ie),
+            i("circle", {
+              cx: h.value,
+              cy: k.value,
+              r: Q.value,
+              fill: "var(--color-background)",
+              stroke: c.value,
+              "stroke-width": "2.5"
+            }, null, 8, Oe)
+          ])) : r("", !0),
+          (o(), n("foreignObject", {
+            x: h.value - e.size * 0.38,
+            y: R.value - e.size * 0.1,
+            width: e.size * 0.76,
+            height: e.size * 0.22
+          }, [
+            i("div", Ee, [
+              B(t.$slots, "center", {
+                value: e.value,
+                percentage: b.value,
+                displayValue: g.value
+              }, () => [
+                e.showValue ? (o(), n("span", {
+                  key: 0,
+                  class: "font-bold tabular-nums leading-none",
+                  style: M({ fontSize: `${D.value * 0.82}px`, color: "var(--color-foreground)" })
+                }, S(g.value), 5)) : r("", !0)
+              ])
+            ])
+          ], 8, pe))
+        ])) : e.variant === "ball" ? (o(), n("g", Ue, [
+          i("path", {
+            d: U.value,
+            fill: "none",
+            stroke: j.value,
+            "stroke-width": e.strokeWidth,
+            "stroke-linecap": "round",
+            opacity: "0.35"
+          }, null, 8, Ze),
+          V.value ? (o(), n("path", {
+            key: 0,
+            d: V.value,
+            fill: "none",
+            stroke: e.gradient ? `url(#gg-${m(v)})` : c.value,
+            "stroke-width": e.strokeWidth,
+            "stroke-linecap": "round"
+          }, null, 8, qe)) : r("", !0),
+          (o(!0), n(T, null, F(Z.value, (a, d) => (o(), n("path", {
+            key: `bz-${d}`,
+            d: a.path,
+            fill: "none",
+            stroke: a.color,
+            "stroke-width": e.strokeWidth,
+            "stroke-linecap": "butt",
+            opacity: "0.25"
+          }, null, 8, He))), 128)),
+          y.value > 5e-3 ? (o(), n("g", Je, [
+            i("circle", {
+              cx: A.value.x,
+              cy: A.value.y,
+              r: G.value * 1.9,
+              fill: c.value,
+              opacity: "0.18"
+            }, null, 8, Ke),
+            i("circle", {
+              cx: A.value.x,
+              cy: A.value.y,
+              r: G.value * 1.35,
+              fill: c.value,
+              opacity: "0.22"
+            }, null, 8, Qe),
+            i("circle", {
+              cx: A.value.x,
+              cy: A.value.y,
+              r: G.value,
+              fill: "var(--color-background)",
+              stroke: c.value,
+              "stroke-width": G.value * 0.55
+            }, null, 8, Xe)
+          ])) : r("", !0),
+          (o(), n("foreignObject", {
+            x: h.value - e.size * 0.38,
+            y: R.value - e.size * 0.2,
+            width: e.size * 0.76,
+            height: e.size * 0.42
+          }, [
+            i("div", _e, [
+              B(t.$slots, "center", {
+                value: e.value,
+                percentage: b.value,
+                displayValue: g.value
+              }, () => [
+                e.showValue ? (o(), n("span", {
+                  key: 0,
+                  class: "font-black tabular-nums leading-none",
+                  style: M({ fontSize: `${D.value}px`, color: "var(--color-foreground)" })
+                }, S(g.value), 5)) : r("", !0),
+                e.sublabel ? (o(), n("span", {
+                  key: 1,
+                  class: "font-medium mt-1",
+                  style: M({ fontSize: `${q.value}px`, color: "var(--color-muted-foreground)" })
+                }, S(e.sublabel), 5)) : r("", !0)
+              ])
+            ])
+          ], 8, Ye))
+        ])) : r("", !0)
+      ], 8, he)),
+      (e.label || e.sublabel) && e.variant !== "ticks" && e.variant !== "ball" ? (o(), n("div", et, [
+        e.label ? (o(), n("p", {
+          key: 0,
+          class: "font-semibold text-foreground",
+          style: M({ fontSize: `${e.variant === "slim" ? X.value * 0.9 : X.value}px` })
+        }, S(e.label), 5)) : r("", !0),
+        e.sublabel ? (o(), n("p", {
+          key: 1,
+          class: "text-muted-foreground mt-0.5",
+          style: M({ fontSize: `${q.value}px` })
+        }, S(e.sublabel), 5)) : r("", !0)
+      ])) : r("", !0),
+      B(t.$slots, "footer", {
+        value: e.value,
+        percentage: b.value,
+        displayValue: g.value
+      })
+    ]));
+  }
+});
+export {
+  at as default
+};

package/components/Chart/GaugeChart.vue2.js

@@ -0,0 +1,4 @@
+import f from "./GaugeChart.vue.js";
+export {
+  f as default
+};

package/components/Chart/LineChart.vue.js

@@ -0,0 +1,7 @@
+import o from "./LineChart.vue2.js";
+/* empty css               */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-69f3c8c9"]]);
+export {
+  f as default
+};