vlite3 1.1.8 → 1.1.9

package/components/Chart/BarChart.vue.js

@@ -0,0 +1,369 @@
+import { defineComponent as ne, ref as X, computed as h, onMounted as ue, watch as se, onUnmounted as re, openBlock as o, createElementBlock as n, Fragment as d, renderList as v, createElementVNode as M, normalizeStyle as F, createTextVNode as ie, toDisplayString as k, createCommentVNode as f, unref as w, createBlock as ce, Teleport as de } from "vue";
+import { CHART_COLORS as ve, formatNumber as Y, getColor as j, niceYTicks as fe, animateProgress as he } from "./utils.js";
+const ye = {
+  key: 0,
+  class: "flex flex-wrap gap-x-4 gap-y-1 mb-3 pl-14"
+}, me = ["width", "height"], xe = ["id"], $e = ["stop-color"], ge = ["stop-color"], be = ["id"], pe = ["stop-color"], ke = ["stop-color"], we = ["transform"], Le = ["y1", "x2", "y2", "stroke-opacity"], Me = ["y"], Ve = ["d", "fill", "opacity"], Ce = ["x", "y"], Be = ["x", "y"], Ye = ["y1", "x2", "y2", "stroke-opacity"], Re = ["y2", "stroke-opacity"], Oe = ["transform"], ze = ["x1", "x2", "y2", "stroke-opacity"], Xe = ["x"], Ae = ["y"], Ge = ["d", "fill", "opacity"], Te = ["x", "y"], Se = ["y2", "stroke-opacity"], We = ["y1", "x2", "y2", "stroke-opacity"], Pe = { class: "font-medium text-xs mb-1.5" }, He = {
+  key: 0,
+  class: "text-muted-foreground"
+}, Ne = { class: "font-semibold" }, Ee = /* @__PURE__ */ ne({
+  __name: "BarChart",
+  props: {
+    data: {},
+    datasets: {},
+    labels: {},
+    height: { default: 300 },
+    orientation: { default: "vertical" },
+    barRadius: { default: 6 },
+    showGrid: { type: Boolean, default: !0 },
+    showLegend: { type: Boolean, default: !0 },
+    showTooltip: { type: Boolean, default: !0 },
+    showValues: { type: Boolean, default: !1 },
+    colors: { default: () => ve },
+    animate: { type: Boolean, default: !0 },
+    formatValue: {},
+    showXAxis: { type: Boolean, default: !0 },
+    showYAxis: { type: Boolean, default: !0 },
+    showXLabels: { type: Boolean, default: !0 },
+    showYLabels: { type: Boolean, default: !0 },
+    gridOpacity: { default: 0.07 },
+    axisOpacity: { default: 0.1 }
+  },
+  setup(i) {
+    const r = i, A = X(), G = X(600), g = h(() => {
+      const t = (a) => String(a).length;
+      if (r.orientation === "horizontal") {
+        const a = r.showYLabels ? Math.max(2, ...x.value.map((L) => t(L))) * 6.5 : 0, s = r.showYLabels ? Math.max(24, a + 12) : 8;
+        let u = 16;
+        if (r.showValues) {
+          const L = m.value.flatMap(($) => $.values), y = Math.max(2, ...L.map(($) => t(r.formatValue ? r.formatValue($) : Y($)))) * 6.5;
+          u = Math.max(16, y + 8);
+        }
+        return {
+          // top holds the value-tick labels that float above; collapse when hidden
+          top: r.showXLabels ? 16 : 4,
+          right: u,
+          bottom: 0,
+          left: s
+        };
+      }
+      const l = r.showYLabels ? Math.max(2, ...C.value.map((a) => t(r.formatValue ? r.formatValue(a) : Y(a)))) * 6.5 : 0, e = r.showYLabels ? Math.max(24, l + 12) : 8;
+      return {
+        top: 24,
+        right: 0,
+        // Collapse bottom padding when X labels are hidden
+        bottom: r.showXLabels ? 24 : 6,
+        left: e
+      };
+    }), b = h(() => Math.max(0, G.value - g.value.left - g.value.right)), c = h(() => Math.max(0, r.height - g.value.top - g.value.bottom)), m = h(() => r.datasets?.length ? r.datasets.map((l, e) => ({
+      label: l.label,
+      color: l.color ?? j(r.colors, e),
+      values: l.data
+    })) : [
+      {
+        label: "",
+        color: "",
+        // will use per-bar color from data
+        values: (r.data ?? []).map((l) => l.value)
+      }
+    ]), p = h(() => m.value.length > 1 || !!r.datasets?.length), x = h(() => r.labels?.length ? r.labels : r.datasets?.length ? m.value[0]?.values.map((t, l) => String(l + 1)) ?? [] : (r.data ?? []).map((t) => t.label)), T = h(
+      () => (r.data ?? []).map((t, l) => t.color ?? j(r.colors, l))
+    ), q = h(() => m.value.flatMap((t) => t.values)), U = h(() => Math.max(...q.value) || 1), C = h(() => fe(0, U.value, 5)), V = h(() => C.value[C.value.length - 1] || U.value), S = X(r.animate ? 0 : 1);
+    let N = null;
+    function _() {
+      N?.(), S.value = 0, N = he(800, (t) => S.value = t);
+    }
+    ue(() => {
+      J(), r.animate && _();
+    }), se(() => [r.data, r.datasets], () => {
+      r.animate && _();
+    }, { deep: !0 }), re(() => {
+      N?.(), Q?.disconnect();
+    });
+    let Q = null;
+    function J() {
+      A.value && (Q = new ResizeObserver((t) => {
+        G.value = t[0].contentRect.width || 600;
+      }), Q.observe(A.value), G.value = A.value.clientWidth || 600);
+    }
+    const K = h(() => {
+      const t = x.value.length;
+      if (t === 0) return [];
+      const l = b.value / t, e = m.value.length, a = l * 0.2, s = l - a * 2, u = p.value ? s / e : s;
+      return x.value.map((L, y) => {
+        const $ = y * l + a, Z = m.value.map((W, P) => {
+          const H = W.values[y] ?? 0, z = H / V.value * c.value * S.value, E = $ + P * u, I = c.value - z, D = p.value ? W.color : T.value[y];
+          return { val: H, bh: z, x: E, y: I, w: u - (p.value ? 2 : 0), color: D };
+        });
+        return { label: L, bars: Z };
+      });
+    }), ee = h(() => {
+      const t = x.value.length;
+      if (t === 0) return [];
+      const l = c.value / t, e = m.value.length, a = l * 0.2, s = l - a * 2, u = p.value ? s / e : s, L = V.value;
+      return x.value.map((y, $) => {
+        const Z = $ * l + a, W = m.value.map((P, H) => {
+          const z = P.values[$] ?? 0, E = z / L * b.value * S.value, I = Z + H * u, D = p.value ? P.color : T.value[$];
+          return { val: z, bw: E, x: 0, y: I, h: u - (p.value ? 2 : 0), color: D };
+        });
+        return { label: y, bars: W };
+      });
+    }), B = X(null), R = X(null);
+    function te(t) {
+      if (!r.showTooltip) return;
+      const l = t.currentTarget.getBoundingClientRect(), e = t.clientX - l.left - g.value.left, a = t.clientY - l.top - g.value.top, s = x.value.length;
+      if (s === 0) return;
+      let u;
+      r.orientation === "vertical" ? u = Math.floor(e / b.value * s) : u = Math.floor(a / c.value * s), u = Math.max(0, Math.min(s - 1, u)), R.value = u;
+      const L = m.value.map((y, $) => ({
+        color: p.value ? y.color : T.value[u],
+        label: y.label,
+        value: r.formatValue ? r.formatValue(y.values[u]) : Y(y.values[u])
+      }));
+      B.value = {
+        x: t.clientX,
+        y: t.clientY,
+        label: x.value[u],
+        items: L
+      };
+    }
+    function le() {
+      B.value = null, R.value = null;
+    }
+    function ae(t, l, e, a, s) {
+      const u = Math.min(s, e / 2, a / 2);
+      return u <= 0 || a <= 0 ? `M${t},${l + a} L${t},${l} L${t + e},${l} L${t + e},${l + a} Z` : `M${t},${l + a} L${t},${l + u} Q${t},${l} ${t + u},${l} L${t + e - u},${l} Q${t + e},${l} ${t + e},${l + u} L${t + e},${l + a} Z`;
+    }
+    function oe(t, l, e, a, s) {
+      const u = Math.min(s, e / 2, a / 2);
+      return u <= 0 || e <= 0 ? `M${t},${l} L${t + e},${l} L${t + e},${l + a} L${t},${l + a} Z` : `M${t},${l} L${t + e - u},${l} Q${t + e},${l} ${t + e},${l + u} L${t + e},${l + a - u} Q${t + e},${l + a} ${t + e - u},${l + a} L${t},${l + a} Z`;
+    }
+    const O = Math.random().toString(36).slice(2, 7);
+    return (t, l) => (o(), n("div", {
+      ref_key: "containerRef",
+      ref: A,
+      class: "vlite-bar-chart w-full select-none"
+    }, [
+      i.showLegend && p.value ? (o(), n("div", ye, [
+        (o(!0), n(d, null, v(m.value, (e) => (o(), n("div", {
+          key: e.label,
+          class: "flex items-center gap-1.5 text-xs text-muted-foreground"
+        }, [
+          M("span", {
+            class: "w-2.5 h-2.5 rounded-sm inline-block",
+            style: F({ backgroundColor: e.color })
+          }, null, 4),
+          ie(" " + k(e.label), 1)
+        ]))), 128))
+      ])) : f("", !0),
+      (o(), n("svg", {
+        width: G.value,
+        height: i.height,
+        role: "img",
+        "aria-label": "Bar chart",
+        class: "overflow-visible",
+        onMousemove: te,
+        onMouseleave: le
+      }, [
+        M("defs", null, [
+          (o(!0), n(d, null, v(m.value, (e, a) => (o(), n("linearGradient", {
+            key: a,
+            id: `bgrad-${w(O)}-${a}`,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1"
+          }, [
+            M("stop", {
+              offset: "0%",
+              "stop-color": e.color,
+              "stop-opacity": "1"
+            }, null, 8, $e),
+            M("stop", {
+              offset: "100%",
+              "stop-color": e.color,
+              "stop-opacity": "0.7"
+            }, null, 8, ge)
+          ], 8, xe))), 128)),
+          (o(!0), n(d, null, v(T.value, (e, a) => (o(), n("linearGradient", {
+            key: `sc-${a}`,
+            id: `bgrad-single-${w(O)}-${a}`,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1"
+          }, [
+            M("stop", {
+              offset: "0%",
+              "stop-color": e,
+              "stop-opacity": "1"
+            }, null, 8, pe),
+            M("stop", {
+              offset: "100%",
+              "stop-color": e,
+              "stop-opacity": "0.7"
+            }, null, 8, ke)
+          ], 8, be))), 128))
+        ]),
+        i.orientation === "vertical" ? (o(), n("g", {
+          key: 0,
+          transform: `translate(${g.value.left},${g.value.top})`
+        }, [
+          i.showGrid ? (o(!0), n(d, { key: 0 }, v(C.value, (e) => (o(), n("line", {
+            key: e,
+            x1: 0,
+            y1: c.value - e / V.value * c.value,
+            x2: b.value,
+            y2: c.value - e / V.value * c.value,
+            stroke: "currentColor",
+            "stroke-opacity": i.gridOpacity,
+            "stroke-width": "1"
+          }, null, 8, Le))), 128)) : f("", !0),
+          i.showYLabels ? (o(!0), n(d, { key: 1 }, v(C.value, (e) => (o(), n("text", {
+            key: `yt-${e}`,
+            x: -10,
+            y: c.value - e / V.value * c.value,
+            "text-anchor": "end",
+            "dominant-baseline": "middle",
+            "font-size": "11",
+            class: "fill-muted-foreground"
+          }, k(i.formatValue ? i.formatValue(e) : w(Y)(e)), 9, Me))), 128)) : f("", !0),
+          (o(!0), n(d, null, v(K.value, (e, a) => (o(), n("g", { key: a }, [
+            (o(!0), n(d, null, v(e.bars, (s, u) => (o(), n("path", {
+              key: u,
+              d: ae(s.x, s.y, s.w, s.bh, i.barRadius),
+              fill: p.value ? `url(#bgrad-${w(O)}-${u})` : `url(#bgrad-single-${w(O)}-${a})`,
+              opacity: R.value !== null && R.value !== a ? 0.5 : 1,
+              class: "transition-opacity duration-150"
+            }, null, 8, Ve))), 128)),
+            i.showValues ? (o(!0), n(d, { key: 0 }, v(e.bars, (s, u) => (o(), n("text", {
+              key: `vl-${u}`,
+              x: s.x + s.w / 2,
+              y: s.y - 6,
+              "text-anchor": "middle",
+              "font-size": "10",
+              "font-weight": "600",
+              class: "fill-foreground"
+            }, k(i.formatValue ? i.formatValue(s.val) : w(Y)(s.val)), 9, Ce))), 128)) : f("", !0)
+          ]))), 128)),
+          i.showXLabels ? (o(!0), n(d, { key: 2 }, v(x.value, (e, a) => (o(), n("text", {
+            key: `xl-${a}`,
+            x: (a + 0.5) * (b.value / x.value.length),
+            y: c.value + 16,
+            "text-anchor": "middle",
+            "font-size": "11",
+            class: "fill-muted-foreground"
+          }, k(e), 9, Be))), 128)) : f("", !0),
+          i.showXAxis ? (o(), n("line", {
+            key: 3,
+            x1: 0,
+            y1: c.value,
+            x2: b.value,
+            y2: c.value,
+            stroke: "currentColor",
+            "stroke-opacity": i.axisOpacity
+          }, null, 8, Ye)) : f("", !0),
+          i.showYAxis ? (o(), n("line", {
+            key: 4,
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: c.value,
+            stroke: "currentColor",
+            "stroke-opacity": i.axisOpacity
+          }, null, 8, Re)) : f("", !0)
+        ], 8, we)) : (o(), n("g", {
+          key: 1,
+          transform: `translate(${g.value.left},${g.value.top})`
+        }, [
+          i.showGrid ? (o(!0), n(d, { key: 0 }, v(C.value, (e) => (o(), n("line", {
+            key: e,
+            x1: e / V.value * b.value,
+            y1: 0,
+            x2: e / V.value * b.value,
+            y2: c.value,
+            stroke: "currentColor",
+            "stroke-opacity": i.gridOpacity,
+            "stroke-width": "1"
+          }, null, 8, ze))), 128)) : f("", !0),
+          i.showXLabels ? (o(!0), n(d, { key: 1 }, v(C.value, (e) => (o(), n("text", {
+            key: `xt-${e}`,
+            x: e / V.value * b.value,
+            y: -8,
+            "text-anchor": "middle",
+            "font-size": "11",
+            class: "fill-muted-foreground"
+          }, k(i.formatValue ? i.formatValue(e) : w(Y)(e)), 9, Xe))), 128)) : f("", !0),
+          i.showYLabels ? (o(!0), n(d, { key: 2 }, v(x.value, (e, a) => (o(), n("text", {
+            key: `yl-${a}`,
+            x: -12,
+            y: (a + 0.5) * (c.value / x.value.length),
+            "text-anchor": "end",
+            "dominant-baseline": "middle",
+            "font-size": "11",
+            class: "fill-muted-foreground"
+          }, k(e), 9, Ae))), 128)) : f("", !0),
+          (o(!0), n(d, null, v(ee.value, (e, a) => (o(), n("g", { key: a }, [
+            (o(!0), n(d, null, v(e.bars, (s, u) => (o(), n("path", {
+              key: u,
+              d: oe(s.x, s.y, s.bw, s.h, i.barRadius),
+              fill: p.value ? `url(#bgrad-${w(O)}-${u})` : `url(#bgrad-single-${w(O)}-${a})`,
+              opacity: R.value !== null && R.value !== a ? 0.5 : 1,
+              class: "transition-opacity duration-150"
+            }, null, 8, Ge))), 128)),
+            i.showValues ? (o(!0), n(d, { key: 0 }, v(e.bars, (s, u) => (o(), n("text", {
+              key: `hvl-${u}`,
+              x: s.bw + 6,
+              y: s.y + s.h / 2,
+              "dominant-baseline": "middle",
+              "font-size": "10",
+              "font-weight": "600",
+              class: "fill-foreground"
+            }, k(i.formatValue ? i.formatValue(s.val) : w(Y)(s.val)), 9, Te))), 128)) : f("", !0)
+          ]))), 128)),
+          i.showYAxis ? (o(), n("line", {
+            key: 3,
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: c.value,
+            stroke: "currentColor",
+            "stroke-opacity": i.axisOpacity
+          }, null, 8, Se)) : f("", !0),
+          i.showXAxis ? (o(), n("line", {
+            key: 4,
+            x1: 0,
+            y1: c.value,
+            x2: b.value,
+            y2: c.value,
+            stroke: "currentColor",
+            "stroke-opacity": i.axisOpacity
+          }, null, 8, We)) : f("", !0)
+        ], 8, Oe))
+      ], 40, me)),
+      (o(), ce(de, { to: "body" }, [
+        B.value ? (o(), n("div", {
+          key: 0,
+          class: "vlite-chart-tooltip",
+          style: F({ left: `${B.value.x + 12}px`, top: `${B.value.y - 10}px` })
+        }, [
+          M("div", Pe, k(B.value.label), 1),
+          (o(!0), n(d, null, v(B.value.items, (e) => (o(), n("div", {
+            key: e.label,
+            class: "flex items-center gap-1.5 text-xs"
+          }, [
+            M("span", {
+              class: "w-2 h-2 rounded-sm shrink-0",
+              style: F({ backgroundColor: e.color })
+            }, null, 4),
+            e.label ? (o(), n("span", He, k(e.label) + ":", 1)) : f("", !0),
+            M("span", Ne, k(e.value), 1)
+          ]))), 128))
+        ], 4)) : f("", !0)
+      ]))
+    ], 512));
+  }
+});
+export {
+  Ee as default
+};

package/components/Chart/BarChart.vue2.js

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

package/components/Chart/CircleChart.vue.js

@@ -0,0 +1,137 @@
+import { defineComponent as p, computed as l, ref as S, onMounted as B, watch as W, onUnmounted as P, openBlock as o, createElementBlock as r, createElementVNode as n, unref as w, normalizeStyle as z, renderSlot as j, toDisplayString as y, createCommentVNode as f } from "vue";
+import { resolveColor as A, animateProgress as D } from "./utils.js";
+const E = { class: "vlite-circle-chart inline-flex flex-col items-center gap-2 select-none" }, N = ["width", "height", "aria-label"], O = ["id"], G = ["stop-color"], I = ["stop-color"], U = ["cx", "cy", "r", "stroke", "stroke-width"], q = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap"], F = ["x", "y", "width", "height"], H = {
+  xmlns: "http://www.w3.org/1999/xhtml",
+  class: "w-full h-full flex flex-col items-center justify-center text-center"
+}, J = {
+  key: 0,
+  class: "text-center"
+}, K = {
+  key: 0,
+  class: "text-sm font-medium text-foreground"
+}, L = {
+  key: 1,
+  class: "text-xs text-muted-foreground"
+}, T = /* @__PURE__ */ p({
+  __name: "CircleChart",
+  props: {
+    value: {},
+    max: { default: 100 },
+    size: { default: 160 },
+    strokeWidth: { default: 12 },
+    color: { default: "primary" },
+    gradient: { type: Boolean, default: !0 },
+    label: {},
+    sublabel: {},
+    showValue: { type: Boolean, default: !0 },
+    formatValue: {},
+    animate: { type: Boolean, default: !0 },
+    trackColor: {},
+    lineCap: { default: "round" }
+  },
+  setup(e) {
+    const t = e, g = Math.random().toString(36).slice(2, 7), h = l(() => (t.size - t.strokeWidth) / 2), m = l(() => 2 * Math.PI * h.value), c = l(() => t.size / 2), u = l(() => t.size / 2), s = l(() => Math.max(0, Math.min(100, t.value / t.max * 100))), d = S(t.animate ? 0 : s.value);
+    let v = null;
+    function b() {
+      v?.();
+      const a = s.value, i = d.value;
+      v = D(1e3, (M) => {
+        d.value = i + (a - i) * M;
+      });
+    }
+    B(() => {
+      t.animate && b();
+    }), W(s, () => {
+      t.animate && b();
+    }), P(() => v?.());
+    const C = l(() => {
+      const a = d.value / 100 * m.value;
+      return m.value - a;
+    }), k = l(() => A(t.color ?? "primary")), V = l(() => {
+      const a = {
+        primary: "#818cf8",
+        success: "#34d399",
+        warning: "#fbbf24",
+        danger: "#fb7185",
+        info: "#60a5fa"
+      }, i = t.color ?? "primary";
+      return a[i] ?? k.value;
+    }), x = l(() => t.formatValue ? t.formatValue(t.value, s.value) : `${Math.round(d.value)}%`), $ = l(() => t.trackColor || "var(--color-muted)");
+    return (a, i) => (o(), r("div", E, [
+      (o(), r("svg", {
+        width: e.size,
+        height: e.size,
+        role: "img",
+        "aria-label": `${x.value} progress`
+      }, [
+        n("defs", null, [
+          n("linearGradient", {
+            id: `cg-${w(g)}`,
+            x1: "1",
+            y1: "0",
+            x2: "0",
+            y2: "1"
+          }, [
+            n("stop", {
+              offset: "0%",
+              "stop-color": V.value
+            }, null, 8, G),
+            n("stop", {
+              offset: "100%",
+              "stop-color": k.value
+            }, null, 8, I)
+          ], 8, O)
+        ]),
+        n("circle", {
+          cx: c.value,
+          cy: u.value,
+          r: h.value,
+          fill: "none",
+          stroke: $.value,
+          "stroke-width": e.strokeWidth,
+          "stroke-linecap": "butt"
+        }, null, 8, U),
+        n("circle", {
+          cx: c.value,
+          cy: u.value,
+          r: h.value,
+          fill: "none",
+          stroke: e.gradient ? `url(#cg-${w(g)})` : k.value,
+          "stroke-width": e.strokeWidth,
+          "stroke-dasharray": m.value,
+          "stroke-dashoffset": C.value,
+          "stroke-linecap": e.lineCap,
+          transform: "rotate(-90)",
+          style: z({ transformOrigin: `${c.value}px ${u.value}px` })
+        }, null, 12, q),
+        (o(), r("foreignObject", {
+          x: c.value - e.size * 0.35,
+          y: u.value - e.size * 0.35,
+          width: e.size * 0.7,
+          height: e.size * 0.7
+        }, [
+          n("div", H, [
+            j(a.$slots, "center", {
+              value: e.value,
+              percentage: s.value,
+              displayValue: x.value
+            }, () => [
+              e.showValue ? (o(), r("span", {
+                key: 0,
+                class: "font-bold text-foreground leading-tight",
+                style: z({ fontSize: `${e.size * 0.16}px` })
+              }, y(x.value), 5)) : f("", !0)
+            ])
+          ])
+        ], 8, F))
+      ], 8, N)),
+      e.label || e.sublabel ? (o(), r("div", J, [
+        e.label ? (o(), r("p", K, y(e.label), 1)) : f("", !0),
+        e.sublabel ? (o(), r("p", L, y(e.sublabel), 1)) : f("", !0)
+      ])) : f("", !0)
+    ]));
+  }
+});
+export {
+  T as default
+};

package/components/Chart/CircleChart.vue2.js

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