import { computed as b, ref as c, onMounted as h, watch as F, openBlock as n, createElementBlock as s, normalizeClass as v, normalizeStyle as u, createElementVNode as g, renderSlot as i, createTextVNode as p, toDisplayString as $, createVNode as N, Fragment as D, unref as y } from "vue";
import { u as S } from "./useNestedProp-BbEbJmgv.js";
import { u as x, i as z, f as A } from "./index-CguVaFlt.js";
import B from "./vue-ui-digits-CGRdypIC.js";
const I = {
  __name: "vue-ui-kpi",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Number,
      default: 0
    }
  },
  setup(o) {
    const l = o, { vue_ui_kpi: C } = x(), e = b(() => S({
      userConfig: l.config,
      defaultConfig: C
    })), k = c((typeof l.dataset == "number", l.dataset)), a = c(e.value.useAnimation ? e.value.animationValueStart : k.value), r = (t) => {
      const m = e.value.animationFrames, d = Math.abs(t - a.value) / m;
      function f() {
        a.value < t ? a.value = Math.min(a.value + d, t) : a.value > t && (a.value = Math.max(a.value - d, t)), a.value !== t && requestAnimationFrame(f);
      }
      f();
    };
    return h(() => {
      e.value.useAnimation ? (a.value = e.value.animationValueStart, r(l.dataset)) : a.value = l.dataset;
    }), F(() => l.dataset, (t) => {
      e.value.useAnimation ? r(t) : a.value = t;
    }), (t, m) => (n(), s("div", {
      class: v(`vue-ui-kpi ${e.value.layoutClass}`),
      style: u(`background:${e.value.backgroundColor}; ${e.value.layoutCss}`)
    }, [
      g("div", {
        class: v(`vue-ui-kpi-title ${e.value.titleClass}`),
        style: u(`font-family: ${e.value.fontFamily}; font-size:${e.value.titleFontSize}px; color:${e.value.titleColor}; font-weight:${e.value.titleBold ? "bold" : "normal"}; ${e.value.titleCss}`)
      }, [
        i(t.$slots, "title", { comment: o.dataset }),
        p(" " + $(e.value.title), 1)
      ], 6),
      i(t.$slots, "comment-before", { comment: o.dataset }),
      g("div", {
        class: v(`vue-ui-kpi-value ${e.value.valueClass}`),
        style: u(`font-family: ${e.value.fontFamily}; font-size:${e.value.valueFontSize}px; color:${e.value.valueColor}; font-weight:${e.value.valueBold ? "bold" : "normal"}; ${e.value.valueCss}`)
      }, [
        i(t.$slots, "value", { comment: o.dataset }),
        e.value.analogDigits.show ? (n(), s("div", {
          key: 0,
          style: u({ height: e.value.analogDigits.height + "px" })
        }, [
          N(B, {
            dataset: Number(a.value.toFixed(e.value.valueRounding)),
            config: {
              backgroundColor: e.value.backgroundColor,
              digits: {
                color: e.value.analogDigits.color,
                skeletonColor: e.value.analogDigits.skeletonColor
              }
            }
          }, null, 8, ["dataset", "config"])
        ], 4)) : (n(), s(D, { key: 1 }, [
          p($(y(z)(
            e.value.formatter,
            a.value,
            y(A)({
              p: e.value.prefix,
              v: a.value,
              s: e.value.suffix,
              r: e.value.valueRounding
            })
          )), 1)
        ], 64))
      ], 6),
      i(t.$slots, "comment-after", { comment: o.dataset })
    ], 6));
  }
};
export {
  I as default
};
