@gits-id/stats/dist/stats.mjs

GITS Stats Component

import { defineComponent as B, toRefs as S, computed as g, openBlock as s, createBlock as z, unref as e, withCtx as x, renderSlot as n, createElementBlock as c, normalizeClass as y, createVNode as i, createCommentVNode as d, createElementVNode as t, toDisplayString as o } from "vue";
import N from "@gits-id/card";
import $ from "@gits-id/badge";
import h from "@gits-id/icon";
const E = { class: "w-full" }, j = { class: "font-normal text-gray-600 mb-1 truncate" }, D = { class: "flex flex-col sm:flex-row gap-2 items-baseline" }, I = { class: "font-semibold text-2xl text-gray-800" }, R = { class: "flex-grow text-sm text-gray-600" }, q = { key: 0 }, A = {
  key: 0,
  class: "w-auto text-xs"
}, F = { class: "text-xs" }, M = /* @__PURE__ */ B({
  __name: "VStats",
  props: {
    title: { default: "" },
    icon: { default: "" },
    value: { default: "" },
    color: { default: "primary" },
    from: { default: "" },
    progressColor: { default: "default" },
    progress: { default: "" },
    up: { type: Boolean, default: !1 },
    down: { type: Boolean, default: !1 },
    iconClass: { default: "w-8 h-8" },
    iconSize: null
  },
  setup(r) {
    const w = r, { title: u, icon: a, value: _, color: v, from: f, progressColor: b, progress: m, up: C, down: p } = S(w), V = g(() => {
      switch (v.value) {
        case "primary":
          return "bg-primary-600";
        case "secondary":
          return "bg-secondary-600";
        case "info":
          return "bg-info-600";
        case "warning":
          return "bg-warning-600";
        case "error":
          return "bg-error-600";
        case "success":
          return "bg-success-600";
        default:
          return "bg-gray-400";
      }
    }), k = g(() => C.value ? "success" : p.value ? "error" : b.value);
    return (l, G) => (s(), z(e(N), {
      title: e(u),
      "wrapper-class": "rounded-lg",
      "body-class": "!flex-row items-center !py-4 !gap-4",
      "hide-header": "",
      "hide-footer": ""
    }, {
      default: x(() => [
        n(l.$slots, "header"),
        e(a) ? (s(), c("div", {
          key: 0,
          class: y(["h-full px-5 py-4 flex items-center justify-center rounded-lg text-white", e(V)])
        }, [
          n(l.$slots, "icon", { icon: e(a) }, () => [
            i(e(h), {
              name: e(a),
              class: y(r.iconClass)
            }, null, 8, ["name", "class"])
          ])
        ], 2)) : d("", !0),
        t("div", E, [
          t("div", j, o(e(u)), 1),
          t("div", D, [
            t("div", I, o(e(_)), 1),
            t("div", R, [
              e(f) ? (s(), c("span", q, "from " + o(e(f)), 1)) : d("", !0)
            ]),
            e(m) ? (s(), c("div", A, [
              i(e($), {
                color: e(k),
                rounded: "",
                class: "flex gap-1 items-center"
              }, {
                default: x(() => [
                  i(e(h), {
                    name: e(p) ? "ri:arrow-down-s-line" : "ri:arrow-up-s-line",
                    size: r.iconSize
                  }, null, 8, ["name", "size"]),
                  t("span", F, o(e(m)), 1)
                ]),
                _: 1
              }, 8, ["color"])
            ])) : d("", !0)
          ])
        ]),
        n(l.$slots, "footer")
      ]),
      _: 3
    }, 8, ["title"]));
  }
});
export {
  M as VStats,
  M as default
};