vue-data-ui 2.3.3 → 2.3.5

package/dist/vue-ui-table-sparkline-z29ND2lq.js

@@ -0,0 +1,420 @@
+import { useCssVars as se, ref as i, computed as p, onMounted as ue, openBlock as u, createElementBlock as d, normalizeClass as N, createElementVNode as v, normalizeStyle as r, toDisplayString as b, createCommentVNode as m, Fragment as O, renderList as W, createBlock as T, unref as k, createSlots as re, withCtx as A, renderSlot as I, normalizeProps as ie, guardReactiveProps as de, nextTick as ve } from "vue";
+import { u as ce, c as be, t as fe, a as pe, p as w, b as me, o as ge, e as q, g as he, d as ye, Q as _e, n as ke, q as xe } from "./index-BMCvLyab.js";
+import { u as X } from "./useNestedProp-CkP8xhG_.js";
+import Ce from "./vue-ui-sparkline-BpL1jn7F.js";
+import Se from "./BaseIcon-vmmfWlyR.js";
+import { u as Ae, U as Ie } from "./usePrinter-BuuBz5JR.js";
+import { _ as we } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const $e = ["id"], Fe = { style: { "z-index": "1", "padding-right": "24px" } }, Pe = ["onClick"], ze = { style: { display: "flex", "flex-direction": "row", gap: "3px", "align-items": "center" } }, Ne = ["data-cell"], Oe = { style: { display: "flex", "flex-direction": "row", "align-items": "center", gap: "6px" } }, We = ["data-cell", "onPointerenter"], Te = ["data-cell"], De = ["data-cell"], Me = ["data-cell"], Ve = ["data-cell"], Ee = {
+  __name: "vue-ui-table-sparkline",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(Q, { expose: J }) {
+    const h = Q;
+    se((t) => ({
+      "2af6bd52": t.tdo
+    }));
+    const { vue_ui_table_sparkline: K } = ce(), $ = i(be()), D = i(0), M = i(0), e = p(() => {
+      const t = X({
+        userConfig: h.config,
+        defaultConfig: K
+      });
+      return t.theme ? {
+        ...X({
+          userConfig: fe.vue_ui_table_sparkline[t.theme] || h.config,
+          defaultConfig: t
+        }),
+        customPalette: pe[t.theme] || w
+      } : t;
+    }), { isPrinting: V, isImaging: E, generatePdf: G, generateImage: L } = Ae({
+      elementId: `table_${$.value}`,
+      fileName: e.value.title.text || "vue-ui-table-sparkline"
+    }), Y = p(() => me(e.value.customPalette)), x = i(null), B = i(!1), Z = p(() => e.value.responsiveBreakpoint);
+    ue(() => {
+      ge(h.dataset) && q({
+        componentName: "VueUiTableSparkline",
+        type: "dataset"
+      });
+      const t = new ResizeObserver((n) => {
+        n.forEach((l) => {
+          B.value = l.contentRect.width < Z.value;
+        });
+      });
+      x.value && t.observe(x.value);
+    });
+    const R = p(() => (h.dataset.forEach((t, n) => {
+      he({
+        datasetObject: t,
+        requiredAttributes: ["name", "values"]
+      }).forEach((l) => {
+        q({
+          componentName: "VueUiTableSparkline",
+          type: "datasetSerieAttribute",
+          property: l,
+          index: n
+        });
+      });
+    }), h.dataset.map((t, n) => {
+      const l = (t.values || []).map((o) => isNaN(o) ? 0 : o ?? 0), s = l.reduce((o, a) => o + a, 0);
+      return {
+        ...t,
+        values: t.values || [],
+        color: ye(t.color) || Y.value[n] || w[n] || w[n % w.length],
+        sum: s,
+        average: s / l.length,
+        median: _e(l),
+        sparklineDataset: l.map((o, a) => ({
+          period: e.value.colNames[a] || `col ${a}`,
+          value: o || 0
+        }))
+      };
+    })));
+    function j(t) {
+      const l = (t[0].values || []).map(
+        (o, a) => t.map((c) => c.values[a] || [])
+      ).map(
+        (o) => o.map((a, c) => [a, c]).sort((a, c) => c[0] - a[0]).map((a) => a[1])
+      );
+      return t.map((o, a) => ({
+        ...o,
+        values: o.values || [],
+        orders: l[a]
+      }));
+    }
+    const y = p(() => j(R.value)), C = i(y.value), ee = p(() => Math.max(...C.value.map((t) => (t.values || []).length))), S = i(void 0), F = i(!1), P = i(void 0), z = i(-1);
+    function te() {
+      F.value = !1, P.value = void 0, z.value = -1, C.value = y.value;
+    }
+    function le(t) {
+      F.value = !0, P.value = t;
+      const n = y.value.map((a) => a.values[t] || []), l = S.value === t ? 1 : -1;
+      z.value = l, t === S.value ? S.value = void 0 : S.value = t;
+      const o = n.map((a, c) => [c, a]).sort((a, c) => l * (c[1] - a[1])).map((a) => a[0]).map((a) => y.value[a]);
+      C.value = o, M.value += 1;
+    }
+    const ae = p(() => Math.max(...h.dataset.map((t) => (t.values || []).length))), _ = p(() => {
+      let t = e.value.colNames;
+      if (!t.length)
+        for (let l = 0; l < ae.value; l += 1)
+          t.push(`col ${l + 1}`);
+      e.value.showTotal && (t = [...t, e.value.translations.total]);
+      let n;
+      return e.value.showAverage && e.value.showMedian ? n = [
+        ...t,
+        e.value.translations.average,
+        e.value.translations.median
+      ] : e.value.showAverage && !e.value.showMedian ? n = [...t, e.value.translations.average] : !e.value.showAverage && e.value.showMedian ? n = [...t, e.value.translations.median] : n = t, e.value.showSparklines ? [...n, e.value.translations.chart] : n;
+    }), f = i(void 0), g = i(void 0);
+    function oe({ dataIndex: t, serieIndex: n }) {
+      f.value = t, g.value = n;
+    }
+    const U = i(!1);
+    function ne(t) {
+      U.value = t, D.value += 1;
+    }
+    function H() {
+      ve(() => {
+        const t = [e.value.translations.serie].concat(_.value), n = R.value.map((o, a) => [
+          [o.name],
+          o.values,
+          [o.sum],
+          [o.average],
+          [o.median]
+        ]), l = [t].concat(n), s = ke(l);
+        xe({
+          csvContent: s,
+          title: e.value.title.text || "vue-ui-table-sparkline"
+        });
+      });
+    }
+    return J({
+      generatePdf: G,
+      generateImage: L,
+      generateCsv: H,
+      restoreOrder: te
+    }), (t, n) => (u(), d("div", {
+      ref_key: "tableContainer",
+      ref: x,
+      class: N({ "vue-ui-responsive": B.value }),
+      style: { overflow: "hidden" },
+      id: `table_${$.value}`
+    }, [
+      v("div", {
+        style: { overflow: "auto" },
+        onPointerleave: n[0] || (n[0] = (l) => {
+          g.value = void 0, f.value = void 0;
+        })
+      }, [
+        v("table", {
+          class: "vue-ui-data-table",
+          style: r({ fontFamily: e.value.fontFamily, position: "relative" })
+        }, [
+          e.value.title.text ? (u(), d("caption", {
+            key: 0,
+            style: r({ backgroundColor: e.value.title.backgroundColor })
+          }, [
+            v("div", {
+              style: r({
+                fontSize: `${e.value.title.fontSize}px`,
+                fontWeight: e.value.title.bold ? "bold" : "normal",
+                color: e.value.title.color,
+                textAlign: e.value.title.textAlign
+              })
+            }, b(e.value.title.text), 5),
+            e.value.title.subtitle.text ? (u(), d("div", {
+              key: 0,
+              style: r({
+                fontSize: `${e.value.title.subtitle.fontSize}px`,
+                fontWeight: e.value.title.subtitle.bold ? "bold" : "normal",
+                color: e.value.title.subtitle.color,
+                textAlign: e.value.title.textAlign
+              })
+            }, b(e.value.title.subtitle.text), 5)) : m("", !0)
+          ], 4)) : m("", !0),
+          v("thead", Fe, [
+            v("tr", {
+              role: "row",
+              class: "vue-ui-data-table__thead-row",
+              style: r({
+                backgroundColor: e.value.thead.backgroundColor,
+                color: e.value.thead.color
+              })
+            }, [
+              v("th", {
+                role: "cell",
+                style: r({
+                  backgroundColor: e.value.thead.backgroundColor,
+                  outline: e.value.thead.outline,
+                  textAlign: e.value.thead.textAlign,
+                  fontWeight: e.value.thead.bold ? "bold" : "normal"
+                }),
+                class: "sticky-col-first"
+              }, b(e.value.translations.serie), 5),
+              (u(!0), d(O, null, W(_.value, (l, s) => (u(), d("th", {
+                role: "cell",
+                style: r({
+                  background: e.value.thead.backgroundColor,
+                  outline: e.value.thead.outline,
+                  textAlign: e.value.thead.textAlign,
+                  fontWeight: e.value.thead.bold ? "bold" : "normal",
+                  minWidth: s === _.value.length - 1 ? "150px" : "",
+                  cursor: y.value[0].values[s] !== void 0 ? "pointer" : "default"
+                }),
+                onClick: () => le(s),
+                class: N({ "sticky-col": s === _.value.length - 1 && e.value.showSparklines })
+              }, [
+                v("div", ze, [
+                  v("span", null, b(l), 1),
+                  F.value && s === P.value && y.value[0].values[s] !== void 0 ? (u(), T(Se, {
+                    key: 0,
+                    size: 18,
+                    name: z.value === 1 ? "sort" : "sortReverse",
+                    stroke: e.value.thead.color
+                  }, null, 8, ["name", "stroke"])) : m("", !0)
+                ]),
+                e.value.userOptions.show && s === _.value.length - 1 ? (u(), T(Ie, {
+                  ref_for: !0,
+                  ref: "details",
+                  key: `user_option_${D.value}`,
+                  backgroundColor: e.value.thead.backgroundColor,
+                  color: e.value.thead.color,
+                  isPrinting: k(V),
+                  isImaging: k(E),
+                  uid: $.value,
+                  hasPdf: e.value.userOptions.buttons.pdf,
+                  hasXls: e.value.userOptions.buttons.csv,
+                  hasImg: e.value.userOptions.buttons.img,
+                  hasFullscreen: e.value.userOptions.buttons.fullscreen,
+                  isFullscreen: U.value,
+                  titles: { ...e.value.userOptions.buttonTitles },
+                  chartElement: x.value,
+                  onToggleFullscreen: ne,
+                  onGeneratePdf: k(G),
+                  onGenerateImage: k(L),
+                  onGenerateCsv: H
+                }, re({ _: 2 }, [
+                  t.$slots.optionPdf ? {
+                    name: "optionPdf",
+                    fn: A(() => [
+                      I(t.$slots, "optionPdf", {}, void 0, !0)
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  t.$slots.optionCsv ? {
+                    name: "optionCsv",
+                    fn: A(() => [
+                      I(t.$slots, "optionCsv", {}, void 0, !0)
+                    ]),
+                    key: "1"
+                  } : void 0,
+                  t.$slots.optionImg ? {
+                    name: "optionImg",
+                    fn: A(() => [
+                      I(t.$slots, "optionImg", {}, void 0, !0)
+                    ]),
+                    key: "2"
+                  } : void 0,
+                  t.$slots.optionFullscreen ? {
+                    name: "optionFullscreen",
+                    fn: A(({ toggleFullscreen: o, isFullscreen: a }) => [
+                      I(t.$slots, "optionFullscreen", ie(de({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
+                    ]),
+                    key: "3"
+                  } : void 0
+                ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : m("", !0)
+              ], 14, Pe))), 256))
+            ], 4)
+          ]),
+          v("tbody", null, [
+            (u(!0), d(O, null, W(C.value, (l, s) => (u(), d("tr", {
+              role: "row",
+              style: r({
+                backgroundColor: e.value.tbody.backgroundColor,
+                color: e.value.tbody.color
+              }),
+              class: N({ "vue-ui-data-table__tbody__row": !0, "vue-ui-data-table__tbody__row-even": s % 2 === 0, "vue-ui-data-table__tbody__row-odd": s % 2 !== 0 })
+            }, [
+              v("td", {
+                role: "cell",
+                style: r({
+                  backgroundColor: e.value.tbody.backgroundColor,
+                  outline: e.value.tbody.outline,
+                  fontSize: `${e.value.tbody.fontSize}px`,
+                  fontWeight: e.value.tbody.bold ? "bold" : "normal",
+                  textAlign: e.value.tbody.textAlign
+                }),
+                "data-cell": e.value.translations.serie,
+                class: "vue-ui-data-table__tbody__td sticky-col-first"
+              }, [
+                v("div", Oe, [
+                  v("span", {
+                    style: r({ color: l.color })
+                  }, "⬤", 4),
+                  v("span", null, b(l.name ?? "-"), 1)
+                ])
+              ], 12, Ne),
+              (u(!0), d(O, null, W(ee.value, (o, a) => (u(), d("td", {
+                role: "cell",
+                style: r({
+                  outline: e.value.tbody.outline,
+                  fontSize: `${e.value.tbody.fontSize}px`,
+                  fontWeight: e.value.tbody.bold ? "bold" : "normal",
+                  textAlign: e.value.tbody.textAlign,
+                  backgroundColor: f.value !== void 0 && g.value !== void 0 && a === f.value && g.value === s ? `${l.color}33` : "",
+                  borderRadius: f.value !== void 0 && g.value !== void 0 && a === f.value && g.value === s ? "3px" : ""
+                }),
+                "data-cell": _.value[a],
+                class: "vue-ui-data-table__tbody__td",
+                onPointerenter: (c) => {
+                  g.value = s, f.value = a;
+                }
+              }, b([null, void 0].includes(l.values[a]) ? "-" : Number(l.values[a].toFixed(e.value.roundingValues)).toLocaleString()), 45, We))), 256)),
+              e.value.showTotal ? (u(), d("td", {
+                key: 0,
+                role: "cell",
+                style: r({
+                  outline: e.value.tbody.outline,
+                  fontSize: `${e.value.tbody.fontSize}px`,
+                  fontWeight: e.value.tbody.bold ? "bold" : "normal",
+                  textAlign: e.value.tbody.textAlign
+                }),
+                "data-cell": e.value.translations.total,
+                class: "vue-ui-data-table__tbody__td"
+              }, b(Number(l.sum.toFixed(e.value.roundingTotal)).toLocaleString()), 13, Te)) : m("", !0),
+              e.value.showAverage ? (u(), d("td", {
+                key: 1,
+                role: "cell",
+                style: r({
+                  outline: e.value.tbody.outline,
+                  fontSize: `${e.value.tbody.fontSize}px`,
+                  fontWeight: e.value.tbody.bold ? "bold" : "normal",
+                  textAlign: e.value.tbody.textAlign
+                }),
+                "data-cell": e.value.translations.average,
+                class: "vue-ui-data-table__tbody__td"
+              }, b(Number(l.average.toFixed(e.value.roundingAverage)).toLocaleString()), 13, De)) : m("", !0),
+              e.value.showMedian ? (u(), d("td", {
+                key: 2,
+                role: "cell",
+                style: r({
+                  outline: e.value.tbody.outline,
+                  fontSize: `${e.value.tbody.fontSize}px`,
+                  fontWeight: e.value.tbody.bold ? "bold" : "normal",
+                  textAlign: e.value.tbody.textAlign
+                }),
+                "data-cell": e.value.translations.median,
+                class: "vue-ui-data-table__tbody__td"
+              }, b(Number(l.median.toFixed(e.value.roundingMedian)).toLocaleString()), 13, Me)) : m("", !0),
+              e.value.showSparklines ? (u(), d("td", {
+                key: 3,
+                role: "cell",
+                "data-cell": e.value.translations.chart,
+                style: r({
+                  outline: e.value.tbody.outline,
+                  fontSize: `${e.value.tbody.fontSize}px`,
+                  fontWeight: e.value.tbody.bold ? "bold" : "normal",
+                  textAlign: e.value.tbody.textAlign
+                }),
+                class: "vue-ui-data-table__tbody__td sticky-col"
+              }, [
+                (u(), T(Ce, {
+                  key: `sparkline_${s}_${M.value}`,
+                  onHoverIndex: ({ index: o }) => oe({ dataIndex: o, serieIndex: s }),
+                  dataset: l.sparklineDataset,
+                  showInfo: !1,
+                  selectedIndex: f.value,
+                  config: {
+                    type: e.value.sparkline.type,
+                    style: {
+                      backgroundColor: e.value.tbody.backgroundColor,
+                      animation: {
+                        show: e.value.sparkline.animation.show && !k(V) && !k(E),
+                        animationFrames: e.value.sparkline.animation.animationFrames
+                      },
+                      line: {
+                        color: l.color,
+                        smooth: e.value.sparkline.smooth,
+                        strokeWidth: e.value.sparkline.strokeWidth
+                      },
+                      bar: {
+                        color: l.color
+                      },
+                      area: {
+                        color: l.color,
+                        opacity: e.value.sparkline.showArea ? 16 : 0,
+                        useGradient: e.value.sparkline.useGradient
+                      },
+                      verticalIndicator: {
+                        color: l.color
+                      },
+                      plot: {
+                        radius: 9,
+                        stroke: e.value.tbody.backgroundColor,
+                        strokeWidth: 3
+                      }
+                    }
+                  }
+                }, null, 8, ["onHoverIndex", "dataset", "selectedIndex", "config"]))
+              ], 12, Ve)) : m("", !0)
+            ], 6))), 256))
+          ])
+        ], 4)
+      ], 32)
+    ], 10, $e));
+  }
+}, Xe = /* @__PURE__ */ we(Ee, [["__scopeId", "data-v-3af92d54"]]);
+export {
+  Xe as default
+};