import { ref as x, onMounted as C, computed as c, watch as z, openBlock as a, createElementBlock as s, normalizeStyle as G, createVNode as L, createElementVNode as t, createCommentVNode as r, Fragment as g, toDisplayString as y, unref as d } from "vue";
import { u as b, c as N, e as $, i as p, f as m } from "./index-Cm2_6s9o.js";
import { u as F } from "./useNestedProp-BYPZJNhi.js";
import { _ as B } from "./PackageVersion-CTMY4zeY.js";
const P = ["viewBox", "width"], V = { key: 0 }, D = ["id"], I = ["stop-color"], M = ["stop-color"], U = ["stroke"], E = ["stroke"], O = ["width", "fill"], S = ["fill"], A = { key: 0 }, j = ["id"], T = /* @__PURE__ */ t("feGaussianBlur", {
  in: "SourceGraphic",
  stdDeviation: 1
}, null, -1), q = [
  T
], H = ["stroke"], J = ["stroke", "stroke-dasharray", "stroke-dashoffset"], K = ["filter"], Q = ["stroke", "stroke-dasharray", "stroke-dashoffset"], R = ["fill"], ee = {
  __name: "vue-ui-gizmo",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Number,
      default: 0
    }
  },
  setup(f) {
    const o = f, { vue_ui_gizmo: k } = b(), l = x(N());
    C(() => {
      h();
    });
    function h() {
      !o.dataset && o.dataset !== 0 && $({
        componentName: "VueUiGizmo",
        type: "dataset"
      }), o.dataset < 0 && console.warn("VueUiGizmo: dataset cannot be negative.");
    }
    const e = c({
      get: () => _(),
      set: (i) => i
    });
    function _() {
      return F({
        userConfig: o.config,
        defaultConfig: k
      });
    }
    z(() => o.config, (i) => {
      e.value = _(), h();
    }, { deep: !0 });
    const v = c(() => ({
      battery: { width: e.value.showPercentage ? 140 : 80, height: 50 },
      gauge: { width: 80, height: 80 }
    })[e.value.type]), u = c(() => {
      const n = 2 * Math.PI * 35, w = n - o.dataset / 100 * n;
      return {
        dasharray: `${n} ${n}`,
        dashoffset: w
      };
    });
    return (i, n) => (a(), s("svg", {
      class: "vue-ui-gizmo",
      viewBox: `0 0 ${v.value.width} ${v.value.height}`,
      width: e.value.size,
      style: G({
        background: "transparent",
        fontFamily: e.value.fontFamily
      })
    }, [
      L(B),
      e.value.useGradient ? (a(), s("defs", V, [
        t("linearGradient", {
          id: `gizmo_gradient_${l.value}`,
          x1: "0%",
          x2: "100%",
          y1: "0%",
          y2: "0%"
        }, [
          t("stop", {
            offset: "0%",
            "stop-color": e.value.gradientColor
          }, null, 8, I),
          t("stop", {
            offset: "100%",
            "stop-color": e.value.color
          }, null, 8, M)
        ], 8, D)
      ])) : r("", !0),
      e.value.type === "battery" ? (a(), s(g, { 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, U),
        t("path", {
          d: "M 70 16 L 70 34",
          stroke: e.value.stroke,
          "stroke-width": 2,
          fill: "none",
          style: { opacity: "0.5" }
        }, null, 8, E),
        t("rect", {
          x: 10,
          y: 10,
          height: 30,
          width: 55 * (f.dataset / 100),
          fill: e.value.useGradient ? `url(#gizmo_gradient_${l.value})` : e.value.color,
          rx: 2
        }, null, 8, O),
        e.value.showPercentage ? (a(), s("text", {
          key: 0,
          x: 85,
          y: 32,
          "text-anchor": "start",
          "font-size": "20",
          fill: e.value.textColor
        }, y(d(p)(
          e.value.formatter,
          o.dataset,
          d(m)({
            v: o.dataset,
            s: "%"
          })
        )), 9, S)) : r("", !0)
      ], 64)) : r("", !0),
      e.value.type === "gauge" ? (a(), s(g, { key: 2 }, [
        e.value.useGradient ? (a(), s("defs", A, [
          t("filter", {
            id: `blur_${l.value}`,
            x: "-50%",
            y: "-50%",
            width: "200%",
            height: "200%"
          }, q, 8, j)
        ])) : r("", !0),
        t("circle", {
          cx: 40,
          cy: 40,
          r: 35,
          stroke: e.value.stroke,
          "stroke-width": 2 * 4,
          fill: "none"
        }, null, 8, H),
        t("circle", {
          cx: 40,
          cy: 40,
          r: 35,
          stroke: e.value.color,
          "stroke-width": 2 * 4,
          "stroke-dasharray": u.value.dasharray,
          "stroke-dashoffset": u.value.dashoffset,
          "stroke-linecap": "round",
          fill: "none",
          style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
        }, null, 8, J),
        e.value.useGradient ? (a(), s("g", {
          key: 1,
          filter: `url(#blur_${l.value})`
        }, [
          t("circle", {
            cx: 40,
            cy: 40,
            r: 35,
            stroke: e.value.gradientColor,
            "stroke-width": 1,
            fill: "none",
            "stroke-dasharray": u.value.dasharray,
            "stroke-dashoffset": u.value.dashoffset,
            style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
          }, null, 8, Q)
        ], 8, K)) : r("", !0),
        e.value.showPercentage ? (a(), s("text", {
          key: 2,
          x: 40,
          y: 47,
          "text-anchor": "middle",
          "font-size": "20",
          fill: e.value.textColor
        }, y(d(p)(
          e.value.formatter,
          o.dataset,
          d(m)({
            v: o.dataset,
            s: "%"
          })
        )), 9, R)) : r("", !0)
      ], 64)) : r("", !0)
    ], 12, P));
  }
};
export {
  ee as default
};
