vue-data-ui 3.0.0-next.9 → 3.0.1

package/dist/vue-ui-gizmo-fn7ZaMTI.js

@@ -0,0 +1,210 @@
+import { defineAsyncComponent as V, ref as k, useSlots as $, onMounted as y, computed as i, toRefs as D, watch as F, createElementBlock as a, openBlock as o, createBlock as I, createCommentVNode as r, normalizeStyle as M, createVNode as S, unref as n, createElementVNode as t, Fragment as C, toDisplayString as x } from "vue";
+import { u as U, c as P, f as E, t as O, k as w, i as b } from "./index-Dzc2Gi60.js";
+import { u as T } from "./useNestedProp-CjnS13nF.js";
+import { u as j, B as R } from "./useLoading-D7YHNtLX.js";
+import { _ as q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const H = { class: "vue-ui-gizmo-wrapper" }, J = ["viewBox", "width"], K = { key: 0 }, Q = ["id"], W = ["stop-color"], X = ["stop-color"], Y = ["stroke"], Z = ["stroke"], ee = ["width", "fill"], te = ["fill"], oe = { key: 0 }, ae = ["id"], se = ["stroke"], re = ["stroke", "stroke-dasharray", "stroke-dashoffset"], le = ["filter"], ne = ["stroke", "stroke-dasharray", "stroke-dashoffset"], ie = ["fill"], ue = {
+  __name: "vue-ui-gizmo",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Number
+    }
+  },
+  setup(z) {
+    const A = V(() => import("./PackageVersion-CD5VH_Al.js")), { vue_ui_gizmo: G } = U(), s = z, u = k(P()), L = $();
+    y(() => {
+      g();
+    }), y(() => {
+      L["chart-background"] && d.value && console.warn("VueUiGizmo does not support the #chart-background slot.");
+    });
+    const d = i(() => e.value.debug);
+    function g() {
+      !s.dataset && s.dataset !== 0 && E({
+        componentName: "VueUiGizmo",
+        type: "dataset",
+        debug: d.value
+      }), s.dataset < 0 && d.value && console.warn("VueUiGizmo: dataset cannot be negative."), s.dataset > 100 && d.value && console.warn(`VueUiGizmo: gauge is maxed out, as dataset exceeds 100% (props.dataset = ${s.dataset})`);
+    }
+    const e = k(h()), { loading: N, FINAL_DATASET: p } = j({
+      ...D(s),
+      FINAL_CONFIG: e,
+      prepareConfig: h,
+      dsIsNumber: !0,
+      skeletonDataset: 50,
+      skeletonConfig: O({
+        defaultConfig: e.value,
+        userConfig: {
+          stroke: "#6A6A6A80",
+          color: "#6A6A6A",
+          gradientColor: "#CACACA",
+          textColor: "transparent"
+        }
+      })
+    });
+    function h() {
+      return T({
+        userConfig: s.config,
+        defaultConfig: G
+      });
+    }
+    F(() => s.config, (v) => {
+      e.value = h(), g();
+    }, { deep: !0 });
+    const _ = i(() => ({
+      battery: { width: e.value.showPercentage ? 150 : 80, height: 50 },
+      gauge: { width: 80, height: 80 }
+    })[e.value.type]), m = i(() => Math.min(Math.max(0, p.value), 100)), c = i(() => Math.max(0, p.value)), f = i(() => {
+      const l = 2 * Math.PI * 35, B = l - m.value / 100 * l;
+      return {
+        dasharray: `${l} ${l}`,
+        dashoffset: B
+      };
+    });
+    return (v, l) => (o(), a("div", H, [
+      (o(), a("svg", {
+        class: "vue-ui-gizmo",
+        viewBox: `0 0 ${_.value.width} ${_.value.height}`,
+        width: e.value.size,
+        style: M({
+          background: "transparent",
+          fontFamily: e.value.fontFamily
+        })
+      }, [
+        S(n(A)),
+        e.value.useGradient ? (o(), a("defs", K, [
+          t("linearGradient", {
+            id: `gizmo_gradient_${u.value}`,
+            x1: "0%",
+            x2: "100%",
+            y1: "0%",
+            y2: "0%"
+          }, [
+            t("stop", {
+              offset: "0%",
+              "stop-color": e.value.gradientColor
+            }, null, 8, W),
+            t("stop", {
+              offset: "100%",
+              "stop-color": e.value.color
+            }, null, 8, X)
+          ], 8, Q)
+        ])) : r("", !0),
+        e.value.type === "battery" ? (o(), a(C, { key: 1 }, [
+          t("path", {
+            d: "M 5 10 L 5 40 C 5 43 7 45 9 45 L 65 45 C 68 45 70 43 70 40 L 70 38 C 73 38 75 38 75 33 L 75 17 C 75 12 73 12 70 12 L 70 10 C 70 7 68 5 65 5 L 10 5 C 7 5 5 7 5 10",
+            stroke: e.value.stroke,
+            "stroke-width": 2,
+            fill: "none"
+          }, null, 8, Y),
+          t("path", {
+            d: "M 70 16 L 70 34",
+            stroke: e.value.stroke,
+            "stroke-width": 2,
+            fill: "none",
+            style: { opacity: "0.5" }
+          }, null, 8, Z),
+          t("rect", {
+            x: 10,
+            y: 10,
+            height: 30,
+            width: 55 * (m.value / 100),
+            fill: e.value.useGradient ? `url(#gizmo_gradient_${u.value})` : e.value.color,
+            rx: 2
+          }, null, 8, ee),
+          e.value.showPercentage ? (o(), a("text", {
+            key: 0,
+            x: 85,
+            y: 32,
+            "text-anchor": "start",
+            "font-size": "20",
+            fill: e.value.textColor
+          }, x(n(w)(
+            e.value.formatter,
+            c.value,
+            n(b)({
+              v: c.value,
+              s: "%"
+            })
+          )), 9, te)) : r("", !0)
+        ], 64)) : r("", !0),
+        e.value.type === "gauge" ? (o(), a(C, { key: 2 }, [
+          e.value.useGradient ? (o(), a("defs", oe, [
+            t("filter", {
+              id: `blur_${u.value}`,
+              x: "-50%",
+              y: "-50%",
+              width: "200%",
+              height: "200%"
+            }, [...l[0] || (l[0] = [
+              t("feGaussianBlur", {
+                in: "SourceGraphic",
+                stdDeviation: 1
+              }, null, -1)
+            ])], 8, ae)
+          ])) : r("", !0),
+          t("circle", {
+            cx: 40,
+            cy: 40,
+            r: 35,
+            stroke: e.value.stroke,
+            "stroke-width": 2 * 4,
+            fill: "none"
+          }, null, 8, se),
+          t("circle", {
+            cx: 40,
+            cy: 40,
+            r: 35,
+            stroke: e.value.color,
+            "stroke-width": 2 * 4,
+            "stroke-dasharray": f.value.dasharray,
+            "stroke-dashoffset": f.value.dashoffset,
+            "stroke-linecap": "round",
+            fill: "none",
+            style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
+          }, null, 8, re),
+          e.value.useGradient ? (o(), a("g", {
+            key: 1,
+            filter: `url(#blur_${u.value})`
+          }, [
+            t("circle", {
+              cx: 40,
+              cy: 40,
+              r: 35,
+              stroke: e.value.gradientColor,
+              "stroke-width": 1,
+              fill: "none",
+              "stroke-dasharray": f.value.dasharray,
+              "stroke-dashoffset": f.value.dashoffset,
+              style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
+            }, null, 8, ne)
+          ], 8, le)) : r("", !0),
+          e.value.showPercentage ? (o(), a("text", {
+            key: 2,
+            x: 40,
+            y: 47,
+            "text-anchor": "middle",
+            "font-size": "20",
+            fill: e.value.textColor
+          }, x(n(w)(
+            e.value.formatter,
+            c.value,
+            n(b)({
+              v: c.value,
+              s: "%"
+            })
+          )), 9, ie)) : r("", !0)
+        ], 64)) : r("", !0)
+      ], 12, J)),
+      n(N) ? (o(), I(R, { key: 0 })) : r("", !0)
+    ]));
+  }
+}, ge = /* @__PURE__ */ q(ue, [["__scopeId", "data-v-31b4119c"]]);
+export {
+  ge as default
+};