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