import { useCssVars as S, unref as e, computed as V, ref as k, onMounted as A, openBlock as l, createElementBlock as n, normalizeClass as w, createElementVNode as a, normalizeStyle as i, withKeys as E, createVNode as C, toDisplayString as R, Fragment as p, renderList as v, createCommentVNode as N, renderSlot as $ } from "vue";
import { _ as I } from "./Shape-Ci6tClcc.js";
import K from "./BaseIcon-BjMszQcM.js";
import { _ as O } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const T = { class: "vue-ui-data-table" }, j = { style: { display: "flex", "align-items": "center", "justify-content": "flex-end", "padding-right": "3px", gap: "3px" } }, F = {
  key: 0,
  height: "12",
  width: "12",
  viewBox: "0 0 20 20",
  style: { background: "none" }
}, L = ["fill"], M = ["data-cell"], q = {
  dir: "auto",
  style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" }
}, G = {
  key: 0,
  height: "12",
  width: "12",
  viewBox: "0 0 20 20",
  style: { background: "none", overflow: "visible" }
}, H = {
  __name: "DataTable",
  props: {
    colNames: {
      type: Array,
      default() {
        return [];
      }
    },
    head: Array,
    body: Array,
    title: String,
    config: Object
  },
  emits: ["close"],
  setup(t, { emit: g }) {
    const b = t;
    S((s) => ({
      "72ac81a5": e(_)
    }));
    const { backgroundColor: y, color: h, outline: m } = b.config.th, { backgroundColor: B, color: z, outline: _ } = b.config.td, D = V(() => b.config.breakpoint), f = k(null), x = k(!1);
    return A(() => {
      const s = new ResizeObserver((r) => {
        r.forEach((o) => {
          x.value = o.contentRect.width < D.value;
        });
      });
      f.value && s.observe(f.value);
    }), (s, r) => (l(), n("div", {
      ref_key: "tableContainer",
      ref: f,
      style: { width: "100%", "container-type": "inline-size", position: "relative", "padding-top": "36px", overflow: "auto" },
      class: w({ "vue-ui-responsive": x.value })
    }, [
      a("div", {
        "data-html2canvas-ignore": "",
        role: "button",
        tabindex: "0",
        style: i(`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${e(y)};`),
        onClick: r[0] || (r[0] = (o) => g("close")),
        onKeypress: r[1] || (r[1] = E((o) => g("close"), ["enter"]))
      }, [
        C(K, {
          name: "close",
          stroke: e(h),
          "stroke-width": 2
        }, null, 8, ["stroke"])
      ], 36),
      a("table", T, [
        a("caption", {
          style: i({ backgroundColor: e(y), color: e(h), outline: e(m) }),
          class: "vue-ui-data-table__caption"
        }, R(t.title), 5),
        a("thead", null, [
          a("tr", {
            role: "row",
            style: i([{ "font-variant-numeric": "tabular-nums" }, { backgroundColor: e(y), color: e(h) }]),
            class: "vue-ui-data-table__thead-row"
          }, [
            (l(!0), n(p, null, v(t.head, (o, c) => (l(), n("th", {
              role: "cell",
              style: i({ outline: e(m) }),
              key: `th_${c}`
            }, [
              a("div", j, [
                o.color ? (l(), n("svg", F, [
                  a("circle", {
                    cx: "10",
                    cy: "10",
                    r: "10",
                    fill: o.color
                  }, null, 8, L)
                ])) : N("", !0),
                $(s.$slots, "th", { th: o }, void 0, !0)
              ])
            ], 4))), 128))
          ], 4)
        ]),
        a("tbody", null, [
          (l(!0), n(p, null, v(t.body, (o, c) => (l(), n("tr", {
            role: "row",
            style: i([{ "font-variant-numeric": "tabular-nums" }, { backgroundColor: e(B), color: e(z) }]),
            class: w({ "vue-ui-data-table__tbody__row": !0, "vue-ui-data-table__tbody__row-even": c % 2 === 0, "vue-ui-data-table__tbody__row-odd": c % 2 !== 0 })
          }, [
            (l(!0), n(p, null, v(o, (d, u) => (l(), n("td", {
              role: "cell",
              "data-cell": (t.colNames[u] && t.colNames[u].name ? t.colNames[u].name : "") || t.colNames[u] || "",
              style: i({ outline: e(_) }),
              class: "vue-ui-data-table__tbody__td"
            }, [
              a("div", q, [
                d.color ? (l(), n("svg", G, [
                  C(I, {
                    plot: { x: 10, y: 10 },
                    color: d.color,
                    radius: 9,
                    shape: t.config.shape || d.shape || "circle"
                  }, null, 8, ["color", "shape"])
                ])) : N("", !0),
                $(s.$slots, "td", { td: d }, void 0, !0)
              ])
            ], 12, M))), 256))
          ], 6))), 256))
        ])
      ])
    ], 2));
  }
}, W = /* @__PURE__ */ O(H, [["__scopeId", "data-v-5cbf64d8"]]);
export {
  W as D
};
