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