import { computed as N, watch as p, ref as C, onMounted as D, openBlock as i, createElementBlock as s, normalizeClass as v, normalizeStyle as u, createElementVNode as $, renderSlot as n, createTextVNode as y, toDisplayString as k, createVNode as S, Fragment as x, unref as h } from "vue";
import { u as z } from "./useNestedProp-BYPZJNhi.js";
import { u as A, i as w, f as B } from "./index-Cm2_6s9o.js";
import L from "./vue-ui-digits-DCXyjW_e.js";
const T = {
  __name: "vue-ui-kpi",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Number,
      default: 0
    }
  },
  setup(o) {
    const l = o, { vue_ui_kpi: b } = A(), e = N({
      get: () => r(),
      set: (a) => a
    });
    function r() {
      return z({
        userConfig: l.config,
        defaultConfig: b
      });
    }
    p(() => l.config, (a) => {
      e.value = r(), f();
    }, { deep: !0 });
    const F = C((typeof l.dataset == "number", l.dataset)), t = C(e.value.useAnimation ? e.value.animationValueStart : F.value), m = (a) => {
      const c = e.value.animationFrames, d = Math.abs(a - t.value) / c;
      function g() {
        t.value < a ? t.value = Math.min(t.value + d, a) : t.value > a && (t.value = Math.max(t.value - d, a)), t.value !== a && requestAnimationFrame(g);
      }
      g();
    };
    D(() => {
      f();
    });
    function f() {
      e.value.useAnimation ? (t.value = e.value.animationValueStart, m(l.dataset)) : t.value = l.dataset;
    }
    return p(() => l.dataset, (a) => {
      e.value.useAnimation ? m(a) : t.value = a;
    }), (a, c) => (i(), s("div", {
      class: v(`vue-ui-kpi ${e.value.layoutClass}`),
      style: u(`background:${e.value.backgroundColor}; ${e.value.layoutCss}`)
    }, [
      $("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}`)
      }, [
        n(a.$slots, "title", { comment: o.dataset }),
        y(" " + k(e.value.title), 1)
      ], 6),
      n(a.$slots, "comment-before", { comment: o.dataset }),
      $("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}`)
      }, [
        n(a.$slots, "value", { comment: o.dataset }),
        e.value.analogDigits.show ? (i(), s("div", {
          key: 0,
          style: u({ height: e.value.analogDigits.height + "px" })
        }, [
          S(L, {
            dataset: Number(t.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)) : (i(), s(x, { key: 1 }, [
          y(k(h(w)(
            e.value.formatter,
            t.value,
            h(B)({
              p: e.value.prefix,
              v: t.value,
              s: e.value.suffix,
              r: e.value.valueRounding
            })
          )), 1)
        ], 64))
      ], 6),
      n(a.$slots, "comment-after", { comment: o.dataset })
    ], 6));
  }
};
export {
  T as default
};
