vue-data-ui/dist/DataTable-rj9-mAwF.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

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