vue-data-ui 2.12.5 → 2.12.7-beta.0

package/README.md

@@ -3,7 +3,6 @@
     <br>
     <a href="https://vue-data-ui.graphieros.com/"><img width="100%" src="https://github.com/user-attachments/assets/0474eb0e-0918-43e1-9756-30a5a8052d82"></a>
 
-
 </p>
 
 # vue-data-ui
@@ -895,6 +894,8 @@ import {
   lightenColor,
   shiftColorHue,
   createTSpans,
+  getCumulativeAverage,
+  getCumulativeMedian,
 } from "vue-data-ui";
 ```
 
@@ -966,6 +967,60 @@ const textContent = createTSpans({
 />
 ```
 
+### getCumulativeAverage
+
+```js
+import { getCumulativeAverage } from "vue-data-ui";
+
+// simple usage
+const arr = [0, 1, 2, 3, 4];
+const cumulativeAvg = getCumulativeAverage({ values: arr });
+
+// Ignore invalid values entirely
+const arrWithInvalid = [1, null, 2, Infinity, NaN, undefined];
+const cumulativeAvgNoInvalid = getCumulativeAverage({
+  values: arrWithInvalid,
+  config: {
+    keepInvalid: false,
+  },
+});
+
+// Convert invalid values to zero
+const cumulativeAvgZeroed = getCumulativeAverage({
+  values: arrWithInvalid,
+  config: {
+    convertInvalidToZero: true,
+  },
+});
+```
+
+### getCumulativeMedian
+
+```js
+import { getCumulativeMedian } from "vue-data-ui";
+
+// simple usage
+const arr = [0, 1, 2, 3, 4];
+const cumulativeMed = getCumulativeMedian({ values: arr });
+
+// Ignore invalid values entirely
+const arrWithInvalid = [1, null, 2, Infinity, NaN, undefined];
+const cumulativeMedNoInvalid = getCumulativeMedian({
+  values: arrWithInvalid,
+  config: {
+    keepInvalid: false,
+  },
+});
+
+// Convert invalid values to zero
+const cumulativeMedZeroed = getCumulativeMedian({
+  values: arrWithInvalid,
+  config: {
+    convertInvalidToZero: true,
+  },
+});
+```
+
 ## PDF generation
 
 This package requires jspdf as a peer dependency. Please install it in your project if you intend on using the PDF printing feature.

package/dist/{Arrow-CD7YT-M0.js → Arrow-CmqjRRUl.js}

@@ -1,5 +1,5 @@
 import { computed as u, createElementBlock as k, openBlock as m, createElementVNode as t, unref as o } from "vue";
-import { c as n } from "./index-vjCxtaM0.js";
+import { c as n } from "./index-BiHmNd1-.js";
 const s = { class: "vue-ui-element-arrow" }, f = ["id", "viewBox", "refX", "refY", "markerWidth", "markerHeight"], c = ["d", "fill"], h = ["id", "viewBox", "refX", "refY", "markerWidth", "markerHeight"], y = ["d", "fill"], v = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap", "stroke-dasharray", "marker-end", "marker-start"], z = {
   __name: "Arrow",
   props: {

package/dist/BaseDraggableDialog-BMlyvt7E.js

@@ -0,0 +1,180 @@
+import { useCssVars as O, ref as L, reactive as T, computed as $, onUnmounted as R, createBlock as N, openBlock as v, Teleport as V, createElementBlock as E, createCommentVNode as _, withModifiers as s, normalizeStyle as M, createElementVNode as o, unref as I, renderSlot as y, createVNode as j, nextTick as P } from "vue";
+import U from "./BaseIcon-CZdMutjs.js";
+import { X as q } from "./index-BiHmNd1-.js";
+import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const F = ["xmlns"], G = { class: "modal-title" }, J = { class: "modal-body" }, K = {
+  __name: "BaseDraggableDialog",
+  props: {
+    backgroundColor: { type: String },
+    color: { type: String },
+    headerBg: { type: String },
+    headerColor: { type: String }
+  },
+  emits: ["close"],
+  setup(d, { expose: k, emit: b }) {
+    O((t) => ({
+      b93256ca: d.color
+    }));
+    const D = d, X = b, f = L(!1), g = L(!1), e = T({
+      left: window.innerWidth / 2 - 200,
+      top: window.innerHeight / 2 - 120,
+      width: 400,
+      height: 400,
+      dragging: !1,
+      resizing: !1,
+      dragOffsetX: 0,
+      dragOffsetY: 0,
+      pointerStartX: 0,
+      pointerStartY: 0,
+      resizeStartW: 0,
+      resizeStartH: 0
+    });
+    function C() {
+      f.value = !0, P(() => {
+        g.value || (e.left = Math.max(0, window.innerWidth / 2 - e.width / 2), e.top = Math.max(0, window.innerHeight / 2 - e.height / 2), g.value = !0);
+      });
+    }
+    function w() {
+      f.value = !1, X("close");
+    }
+    k({ open: C, close: w });
+    const B = $(() => ({
+      position: "fixed",
+      left: `${e.left}px`,
+      top: `${e.top}px`,
+      width: `${e.width}px`,
+      height: `${e.height}px`,
+      padding: 0,
+      border: "none",
+      background: D.backgroundColor,
+      boxShadow: "0 4px 24px rgba(0,0,0,0.15)",
+      zIndex: 9999,
+      overflow: "visible",
+      borderRadius: "2px"
+    }));
+    function a(t) {
+      return t.touches && t.touches.length ? { x: t.touches[0].clientX, y: t.touches[0].clientY } : { x: t.clientX, y: t.clientY };
+    }
+    function x(t) {
+      t.preventDefault?.(), e.dragging = !0;
+      const n = a(t);
+      e.dragOffsetX = n.x - e.left, e.dragOffsetY = n.y - e.top, document.addEventListener("mousemove", m), document.addEventListener("mouseup", u), document.addEventListener("touchmove", m, { passive: !1 }), document.addEventListener("touchend", u);
+    }
+    function m(t) {
+      if (!e.dragging) return;
+      t.preventDefault?.();
+      const n = a(t);
+      let i = n.x - e.dragOffsetX, r = n.y - e.dragOffsetY;
+      i = Math.max(0, Math.min(i, window.innerWidth - e.width)), r = Math.max(0, Math.min(r, window.innerHeight - e.height)), e.left = i, e.top = r;
+    }
+    function u() {
+      e.dragging = !1, document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", u), document.removeEventListener("touchmove", m), document.removeEventListener("touchend", u);
+    }
+    function S(t) {
+      t.preventDefault?.(), e.resizing = !0;
+      const n = a(t);
+      e.pointerStartX = n.x, e.pointerStartY = n.y, e.resizeStartW = e.width, e.resizeStartH = e.height, document.addEventListener("mousemove", h), document.addEventListener("mouseup", l), document.addEventListener("touchmove", h, { passive: !1 }), document.addEventListener("touchend", l);
+    }
+    function h(t) {
+      if (!e.resizing) return;
+      t.preventDefault?.();
+      const n = a(t);
+      let i = n.x - e.pointerStartX, r = n.y - e.pointerStartY;
+      e.width = Math.max(240, e.resizeStartW + i), e.height = Math.max(400, e.resizeStartH + r);
+    }
+    function l() {
+      e.resizing = !1, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", l), document.removeEventListener("touchmove", h), document.removeEventListener("touchend", l);
+    }
+    function z(t) {
+      t.preventDefault?.(), e.resizing = !0;
+      const n = a(t);
+      e.pointerStartX = n.x, e.pointerStartY = n.y, e.resizeStartW = e.width, e.resizeStartH = e.height, e.resizeStartLeft = e.left, e.resizeStartTop = e.top, document.addEventListener("mousemove", p), document.addEventListener("mouseup", c), document.addEventListener("touchmove", p, { passive: !1 }), document.addEventListener("touchend", c);
+    }
+    function p(t) {
+      if (!e.resizing) return;
+      t.preventDefault?.();
+      const n = a(t);
+      let i = n.x - e.pointerStartX, r = Math.min(
+        Math.max(0, e.resizeStartLeft + i),
+        e.resizeStartLeft + e.resizeStartW - 240
+        // min width
+      ), W = e.resizeStartW - (r - e.resizeStartLeft), Y = n.y - e.pointerStartY, H = Math.max(400, e.resizeStartH + Y);
+      e.left = r, e.width = W, e.height = H;
+    }
+    function c() {
+      e.resizing = !1, document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", c), document.removeEventListener("touchmove", p), document.removeEventListener("touchend", c);
+    }
+    return R(() => {
+      u(), l(), c();
+    }), (t, n) => (v(), N(V, { to: "body" }, [
+      f.value ? (v(), E("div", {
+        key: 0,
+        class: "modal vue-ui-draggable-dialog",
+        style: M(B.value),
+        onClick: n[0] || (n[0] = s(() => {
+        }, ["stop"]))
+      }, [
+        o("div", {
+          class: "modal-header",
+          style: M({
+            backgroundColor: d.headerBg,
+            color: d.headerColor
+          })
+        }, [
+          o("span", {
+            class: "drag-handle",
+            onMousedown: s(x, ["stop", "prevent"]),
+            onTouchstart: s(x, ["stop", "prevent"])
+          }, [
+            (v(), E("svg", {
+              xmlns: I(q),
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, n[1] || (n[1] = [
+              o("path", { d: "M5 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              o("path", { d: "M5 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              o("path", { d: "M12 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              o("path", { d: "M12 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              o("path", { d: "M19 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              o("path", { d: "M19 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
+            ]), 8, F))
+          ], 32),
+          o("span", G, [
+            y(t.$slots, "title", {}, void 0, !0)
+          ]),
+          o("button", {
+            class: "close",
+            onClick: w
+          }, [
+            j(U, {
+              name: "close",
+              stroke: d.headerColor
+            }, null, 8, ["stroke"])
+          ])
+        ], 4),
+        o("div", J, [
+          y(t.$slots, "default", {}, void 0, !0)
+        ]),
+        o("div", {
+          class: "resize-handle",
+          onMousedown: s(S, ["stop", "prevent"]),
+          onTouchstart: s(S, ["stop", "prevent"])
+        }, null, 32),
+        o("div", {
+          class: "resize-handle resize-handle-left",
+          onMousedown: s(z, ["stop", "prevent"]),
+          onTouchstart: s(z, ["stop", "prevent"])
+        }, null, 32)
+      ], 4)) : _("", !0)
+    ]));
+  }
+}, ne = /* @__PURE__ */ A(K, [["__scopeId", "data-v-1344ad9f"]]);
+export {
+  ne as default
+};

package/dist/{BaseIcon-CgSWwnK7.js → BaseIcon-CZdMutjs.js}

@@ -1,5 +1,5 @@
 import { computed as e, createElementBlock as n, openBlock as i, normalizeClass as k, unref as L } from "vue";
-import { X as l } from "./index-vjCxtaM0.js";
+import { X as l } from "./index-BiHmNd1-.js";
 import { _ as d } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const M = ["xmlns", "viewBox", "height", "width", "innerHTML"], h = {
   __name: "BaseIcon",

package/dist/{ColorPicker-w8R8Tqdv.js → ColorPicker-DvVKgyAl.js}

@@ -1,7 +1,7 @@
 import { ref as l, computed as k, watch as I, withDirectives as P, createElementBlock as r, openBlock as n, withKeys as S, createElementVNode as u, createCommentVNode as z, normalizeStyle as a, createVNode as F, Fragment as E, renderList as N, unref as O } from "vue";
-import C from "./BaseIcon-CgSWwnK7.js";
-import { G as V } from "./index-vjCxtaM0.js";
-import { v as D } from "./usePrinter-CcgJXHIK.js";
+import C from "./BaseIcon-CZdMutjs.js";
+import { G as V } from "./index-BiHmNd1-.js";
+import { v as D } from "./vClickOutside-C6WiFswA.js";
 import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -46%)" } }, L = ["value"], T = {
   __name: "ColorPicker",
@@ -24,36 +24,35 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
     }
   },
   emits: ["update:value"],
-  setup(o, { emit: m }) {
-    const c = o, s = m, g = l(null), y = k(() => ({
+  setup(e, { emit: m }) {
+    const c = e, s = m, g = l(null), y = k(() => ({
       backgroundColor: c.value,
       width: "100%",
       height: "100%",
       cursor: "pointer"
-    })), i = l(null), t = l(!1), b = () => {
-      var e;
-      (e = i.value) == null || e.click();
+    })), i = l(null), o = l(!1), b = () => {
+      i.value?.click();
     };
-    function h(e) {
-      s("update:value", e), t.value = !1;
+    function h(t) {
+      s("update:value", t), o.value = !1;
     }
     function _() {
-      t.value = !1;
+      o.value = !1;
     }
     function d() {
-      t.value && _();
+      o.value && _();
     }
-    const x = (e) => {
-      const v = e.target.value;
+    const x = (t) => {
+      const v = t.target.value;
       s("update:value", v);
     }, p = k(() => V(c.value));
     async function w() {
-      t.value = !t.value;
+      o.value = !o.value;
     }
     I(
       () => c.value,
-      (e) => {
-        i.value.value = e;
+      (t) => {
+        i.value.value = t;
       }
     );
     const B = l([
@@ -67,7 +66,7 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
       "#FF1493",
       "#00CED1"
     ]);
-    return (e, v) => P((n(), r("div", {
+    return (t, v) => P((n(), r("div", {
       onKeydown: S(d, ["esc"]),
       style: { height: "100%", width: "100%", position: "relative" }
     }, [
@@ -82,14 +81,14 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
           size: 22
         }, null, 8, ["stroke"])
       ], 4),
-      t.value ? (n(), r("div", {
+      o.value ? (n(), r("div", {
         key: 0,
         ref_key: "picker",
         ref: g,
         tabindex: "0",
         class: "vue-ui-color-picker",
         style: a({
-          backgroundColor: o.backgroundColor
+          backgroundColor: e.backgroundColor
         })
       }, [
         (n(!0), r(E, null, N(B.value, (f) => (n(), r("button", {
@@ -97,7 +96,7 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
           class: "vue-ui-color-picker-option",
           style: a({
             backgroundColor: f,
-            outline: `1px solid ${o.buttonBorderColor}`
+            outline: `1px solid ${e.buttonBorderColor}`
           }),
           onClick: () => h(f)
         }, null, 12, $))), 256)),
@@ -105,8 +104,8 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
           class: "vue-ui-color-picker-option",
           onClick: b,
           style: a({
-            backgroundColor: o.value,
-            outline: `1px solid ${o.buttonBorderColor}`
+            backgroundColor: e.value,
+            outline: `1px solid ${e.buttonBorderColor}`
           })
         }, [
           u("div", G, [
@@ -120,7 +119,7 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
             ref_key: "colorInput",
             ref: i,
             type: "color",
-            value: o.value,
+            value: e.value,
             class: "hidden-input",
             onInput: x
           }, null, 40, L)

package/dist/{DataTable-CicthvOV.js → DataTable-Cv9CIz-a.js}

@@ -1,6 +1,6 @@
-import { useCssVars as V, unref as e, computed as A, 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 m, renderList as f, renderSlot as N, createCommentVNode as $ } from "vue";
-import { _ as K } from "./Shape-DICeBEtN.js";
-import O from "./BaseIcon-CgSWwnK7.js";
+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 K from "./Shape-D3w9qas1.js";
+import O from "./BaseIcon-CZdMutjs.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,
@@ -33,14 +33,14 @@ const j = { class: "vue-ui-data-table" }, F = { style: { display: "flex", "align
   },
   emits: ["close"],
   setup(o, { emit: B }) {
-    V((s) => ({
+    A((s) => ({
       "2908e47d": e(v)
     }));
-    const b = o, { backgroundColor: h, color: p, outline: g } = b.config.th, { backgroundColor: z, color: D, outline: v } = b.config.td, S = A(() => b.config.breakpoint), y = w(null), _ = w(!1);
+    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 < S.value;
+          _.value = l.contentRect.width < V.value;
         });
       });
       y.value && s.observe(y.value);
@@ -77,7 +77,7 @@ const j = { class: "vue-ui-data-table" }, F = { style: { display: "flex", "align
             style: i([{ "font-variant-numeric": "tabular-nums" }, { backgroundColor: e(h), color: e(p) }]),
             class: "vue-ui-data-table__thead-row"
           }, [
-            (a(!0), n(m, null, f(o.head, (l, c) => (a(), n("th", {
+            (a(!0), n(f, null, m(o.head, (l, c) => (a(), n("th", {
               role: "cell",
               style: i({ outline: e(g) }),
               key: `th_${c}`
@@ -99,12 +99,12 @@ const j = { class: "vue-ui-data-table" }, F = { style: { display: "flex", "align
           ], 4)
         ]),
         t("tbody", null, [
-          (a(!0), n(m, null, f(o.body, (l, c) => (a(), n("tr", {
+          (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(D) }]),
+            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(m, null, f(l, (d, u) => (a(), n("td", {
+            (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) }),
@@ -129,5 +129,5 @@ const j = { class: "vue-ui-data-table" }, F = { style: { display: "flex", "align
   }
 }, Y = /* @__PURE__ */ T(P, [["__scopeId", "data-v-4afbd65f"]]);
 export {
-  Y as D
+  Y as default
 };

package/dist/{Legend-0UY0Mmli.js → Legend-DFunFf8i.js}

@@ -1,6 +1,6 @@
-import { createElementBlock as n, openBlock as o, normalizeStyle as d, renderSlot as l, Fragment as u, renderList as g, normalizeClass as m, createCommentVNode as h, createVNode as k, mergeProps as $, unref as y } from "vue";
-import { $ as p } from "./index-vjCxtaM0.js";
-import { _ as v } from "./Shape-DICeBEtN.js";
+import { createElementBlock as n, openBlock as o, normalizeStyle as d, renderSlot as l, Fragment as s, renderList as g, normalizeClass as m, createCommentVNode as h, createVNode as k, mergeProps as $, unref as y } from "vue";
+import { $ as p } from "./index-BiHmNd1-.js";
+import v from "./Shape-D3w9qas1.js";
 import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const S = ["id"], x = ["onClick", "height", "width"], z = {
   __name: "Legend",
@@ -29,7 +29,7 @@ const S = ["id"], x = ["onClick", "height", "width"], z = {
   emits: ["clickMarker"],
   setup(e, { emit: c }) {
     const f = c;
-    function s(i, r) {
+    function u(i, r) {
       f("clickMarker", { legend: i, i: r });
     }
     return (i, r) => (o(), n("div", {
@@ -38,12 +38,12 @@ const S = ["id"], x = ["onClick", "height", "width"], z = {
       style: d(`background:${e.config.backgroundColor};font-size:${e.config.fontSize}px;color:${e.config.color};padding-bottom:${e.config.paddingBottom}px;padding-top:${e.config.paddingTop || 12}px;font-weight:${e.config.fontWeight}`)
     }, [
       l(i.$slots, "legendTitle", { titleSet: e.legendSet }, void 0, !0),
-      (o(!0), n(u, null, g(e.legendSet, (t, a) => (o(), n("div", {
+      (o(!0), n(s, null, g(e.legendSet, (t, a) => (o(), n("div", {
         class: m({ "vue-data-ui-legend-item": !0, active: e.clickable })
       }, [
         t.shape ? (o(), n("svg", {
           key: 0,
-          onClick: (C) => s(t, a),
+          onClick: (C) => u(t, a),
           height: e.config.fontSize,
           width: e.config.fontSize,
           viewBox: "0 0 60 60",
@@ -65,7 +65,7 @@ const S = ["id"], x = ["onClick", "height", "width"], z = {
       ], 2))), 256))
     ], 12, S));
   }
-}, I = /* @__PURE__ */ b(z, [["__scopeId", "data-v-f1db6c9f"]]);
+}, L = /* @__PURE__ */ b(z, [["__scopeId", "data-v-f1db6c9f"]]);
 export {
-  I as L
+  L as default
 };