vue-data-ui/dist/DataTable-B4YF6guk.js

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

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