vue-data-ui 3.0.0-next.1 → 3.0.0-next.3

package/README.md

@@ -133,7 +133,7 @@ Or you can import just what you need in your files:
 <script setup>import {(VueUiRadar, VueUiXy)} from "vue-data-ui";</script>
 ```
 
-Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using. You can of course use the slots provided, if the target component has them.
+You can also use the "VueDataUi" universal component, just specifying which component you are using. You can of course use the slots provided, if the target component has them.
 
 ```js
 <script setup>
@@ -169,6 +169,21 @@ Note that the following utility components are not supported by the universal Vu
 
 Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.
 
+## Vue Data UI version2 -> version3 migration
+
+Vue Data UI v3 is easy to migrate to:
+
+- If a component has new v3 features, it contains the `config.autoSize` attribute, set to `true` by default
+- To restore v2 behavior set config.autoSize to `false`
+
+### Version 3 features
+
+- `config.autoSize` (default: true) set to true, sets up the chart layout automatically, hides or shows some data labels when they can be
+
+- `config.loading` (default: false) toggle loading state manually, to display a beautiful skeleton loader which uses the same chart component and shares layout features derived from your config. This skeleton loader is also triggered automatically if the provided dataset is undefined.
+
+- `config.debug` (default: false) set to true to show warning messages during development, turn off for production.
+
 ## Nuxt
 
 [This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)

package/dist/{Arrow-BKKETqRi.js → Arrow-C8ztMhxn.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-BSa4GlHG.js";
+import { c as n } from "./index-DKjAxJY6.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-Duz4Bd3A.js → BaseDraggableDialog-DoA1cXmQ.js}

@@ -1,6 +1,6 @@
 import { useCssVars as O, ref as S, reactive as T, computed as P, onUnmounted as $, createBlock as R, openBlock as v, Teleport as N, createElementBlock as E, createCommentVNode as V, withModifiers as s, normalizeStyle as y, createElementVNode as o, unref as I, renderSlot as M, createVNode as F, normalizeClass as j, nextTick as U } from "vue";
-import q from "./BaseIcon-BAHAKjob.js";
-import { X as A } from "./index-BSa4GlHG.js";
+import q from "./BaseIcon-TJm1JI2f.js";
+import { X as A } from "./index-DKjAxJY6.js";
 import { _ as G } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const J = ["xmlns"], K = { class: "modal-title" }, Q = {
   __name: "BaseDraggableDialog",

package/dist/{BaseIcon-BAHAKjob.js → BaseIcon-TJm1JI2f.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-BSa4GlHG.js";
+import { X as l } from "./index-DKjAxJY6.js";
 import { _ as d } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const M = ["xmlns", "viewBox", "height", "width", "innerHTML"], h = {
   __name: "BaseIcon",

package/dist/{ColorPicker-oPTO1J9Q.js → ColorPicker-DwhabPvD.js}

@@ -1,6 +1,6 @@
 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-BAHAKjob.js";
-import { F as V } from "./index-BSa4GlHG.js";
+import C from "./BaseIcon-TJm1JI2f.js";
+import { F as V } from "./index-DKjAxJY6.js";
 import { v as D } from "./vClickOutside-C6WiFswA.js";
 import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const $ = ["onClick"], L = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -46%)" } }, T = ["value"], j = {

package/dist/{DataTable-vByThHdN.js → DataTable-DObwKftY.js}

@@ -1,6 +1,6 @@
 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-Blrp5ZfP.js";
-import O from "./BaseIcon-BAHAKjob.js";
+import { _ as K } from "./Shape-DGduPk8q.js";
+import O from "./BaseIcon-TJm1JI2f.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,

package/dist/{Legend-CIElSUHU.js → Legend-C-EDWcHp.js}

@@ -1,8 +1,8 @@
-import { createElementBlock as n, openBlock as o, normalizeStyle as c, renderSlot as l, Fragment as u, renderList as g, normalizeClass as m, createCommentVNode as h, createVNode as k, mergeProps as y, unref as $ } from "vue";
-import { a0 as p } from "./index-BSa4GlHG.js";
-import { _ as v } from "./Shape-Blrp5ZfP.js";
-import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const b = ["id"], x = ["onClick", "height", "width"], z = {
+import { createElementBlock as o, openBlock as a, normalizeStyle as d, renderSlot as l, Fragment as u, renderList as g, normalizeClass as m, createCommentVNode as h, createVNode as k, mergeProps as y, unref as $ } from "vue";
+import { a3 as p } from "./index-DKjAxJY6.js";
+import { _ as v } from "./Shape-DGduPk8q.js";
+import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const S = ["id"], x = ["onClick", "height", "width"], z = {
   __name: "Legend",
   props: {
     legendSet: {
@@ -27,27 +27,28 @@ const b = ["id"], x = ["onClick", "height", "width"], z = {
     }
   },
   emits: ["clickMarker"],
-  setup(e, { emit: d }) {
-    const f = d;
+  setup(e, { emit: c }) {
+    const f = c;
     function s(i, r) {
       f("clickMarker", { legend: i, i: r });
     }
-    return (i, r) => (o(), n("div", {
+    return (i, r) => (a(), o("div", {
       id: e.id,
       class: "vue-data-ui-legend",
-      style: c(`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}`)
+      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", {
+      (a(!0), o(u, null, g(e.legendSet, (t, n) => (a(), o("div", {
+        key: `legend_${n}`,
         class: m({ "vue-data-ui-legend-item": !0, active: e.clickable })
       }, [
-        t.shape ? (o(), n("svg", {
+        t.shape ? (a(), o("svg", {
           key: 0,
-          onClick: (C) => s(t, a),
+          onClick: (C) => s(t, n),
           height: e.config.fontSize,
           width: e.config.fontSize,
           viewBox: "0 0 60 60",
-          style: c(`overflow: visible;opacity:${t.opacity}`)
+          style: d(`overflow: visible;opacity:${t.opacity}`)
         }, [
           k(v, {
             shape: t.shape,
@@ -56,16 +57,16 @@ const b = ["id"], x = ["onClick", "height", "width"], z = {
             plot: { x: 30, y: 30 },
             fill: t.color
           }, null, 8, ["shape", "fill"]),
-          l(i.$slots, "legend-pattern", y({ ref_for: !0 }, { legend: t, index: $(p)(t.absoluteIndex) ? t.absoluteIndex : a }), void 0, !0)
+          l(i.$slots, "legend-pattern", y({ ref_for: !0 }, { legend: t, index: $(p)(t.absoluteIndex) ? t.absoluteIndex : n }), void 0, !0)
         ], 12, x)) : h("", !0),
         l(i.$slots, "item", {
           legend: t,
-          index: a
+          index: n
         }, void 0, !0)
-      ], 2))), 256))
-    ], 12, b));
+      ], 2))), 128))
+    ], 12, S));
   }
-}, L = /* @__PURE__ */ S(z, [["__scopeId", "data-v-cf893a9c"]]);
+}, L = /* @__PURE__ */ b(z, [["__scopeId", "data-v-2b9117cf"]]);
 export {
   L as default
 };

package/dist/{NonSvgPenAndPaper-CsY6Bf4e.js → NonSvgPenAndPaper-Cmy4Opaq.js}

@@ -1,7 +1,7 @@
 import { ref as i, computed as we, onMounted as ke, nextTick as be, onBeforeUnmount as Ce, watch as oe, createElementBlock as x, openBlock as y, Fragment as q, createCommentVNode as Y, normalizeStyle as b, normalizeClass as D, createElementVNode as C, withDirectives as ae, createVNode as M, toDisplayString as re, unref as se, vModelText as ue, withModifiers as ie, renderList as ce } from "vue";
-import { l as $e, f as Se, X as Ae } from "./index-BSa4GlHG.js";
-import R from "./BaseIcon-BAHAKjob.js";
-import { C as Ee } from "./ColorPicker-oPTO1J9Q.js";
+import { l as $e, f as Se, X as Ae } from "./index-DKjAxJY6.js";
+import R from "./BaseIcon-TJm1JI2f.js";
+import { C as Ee } from "./ColorPicker-DwhabPvD.js";
 import { _ as Be } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Te = {
   class: /* @__PURE__ */ D({

package/dist/{PackageVersion-B0wGS6pw.js → PackageVersion-B_SVQo0g.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, toDisplayString as o, unref as n } from "vue";
-const r = "3.0.0-next.1", a = { "aria-hidden": "true" }, p = {
+const r = "3.0.0-next.3", a = { "aria-hidden": "true" }, p = {
   __name: "PackageVersion",
   setup(s) {
     return (c, i) => (t(), e("desc", a, "Composed with Vue Data UI " + o(n(r)), 1));

package/dist/{PenAndPaper-7o0xS-d4.js → PenAndPaper-CFbTGuB_.js}

@@ -1,7 +1,7 @@
 import { ref as c, computed as ge, watch as X, nextTick as le, onMounted as pe, onBeforeUnmount as me, createElementBlock as Y, createCommentVNode as q, openBlock as z, normalizeStyle as x, createElementVNode as k, withDirectives as ae, createVNode as R, normalizeClass as G, toDisplayString as Ae, unref as he, vModelText as oe } from "vue";
-import T from "./BaseIcon-BAHAKjob.js";
-import { C as we } from "./ColorPicker-oPTO1J9Q.js";
-import { l as be, f as xe } from "./index-BSa4GlHG.js";
+import T from "./BaseIcon-TJm1JI2f.js";
+import { C as we } from "./ColorPicker-DwhabPvD.js";
+import { l as be, f as xe } from "./index-DKjAxJY6.js";
 const ye = {
   class: "vue-ui-pen-and-paper-action",
   style: { padding: "0 !important" }

package/dist/{Shape-Blrp5ZfP.js → Shape-DGduPk8q.js}

@@ -1,5 +1,5 @@
 import { computed as u, createElementBlock as r, openBlock as l, createCommentVNode as a } from "vue";
-import { _ as c, R as f } from "./index-BSa4GlHG.js";
+import { _ as c, R as f } from "./index-DKjAxJY6.js";
 const y = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], g = ["d", "fill", "stroke", "stroke-width"], x = ["points", "fill", "stroke", "stroke-width"], h = {
   __name: "Shape",
   props: {

package/dist/{Slicer-CcM8hzCn.js → Slicer-VumiAmDi.js}

@@ -1,7 +1,7 @@
 import { useCssVars as ze, computed as d, ref as i, watch as D, onMounted as Ae, onBeforeUnmount as Fe, watchEffect as He, nextTick as Y, onUpdated as Ve, createElementBlock as c, openBlock as m, createElementVNode as v, createCommentVNode as p, renderSlot as We, normalizeStyle as $, createVNode as Xe, withDirectives as me, unref as F, Fragment as he, renderList as fe, normalizeClass as L, vModelText as ge, toDisplayString as _ } from "vue";
-import Ue from "./BaseIcon-BAHAKjob.js";
+import Ue from "./BaseIcon-TJm1JI2f.js";
 import { t as Oe, u as Ze } from "./useResponsive-DfdjqQps.js";
-import { c as je, V as be, U as xe, X as Ge, F as ee } from "./index-BSa4GlHG.js";
+import { c as je, V as be, U as xe, X as Ge, F as ee } from "./index-DKjAxJY6.js";
 import { _ as qe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Je = {
   class: "vue-data-ui-slicer-labels",

package/dist/{SparkTooltip-iaouYun8.js → SparkTooltip-DrRmoIkR.js}

@@ -1,5 +1,5 @@
 import { toRef as c, ref as a, computed as v, onMounted as m, watch as y, createElementBlock as b, openBlock as g, normalizeStyle as x, renderSlot as k, nextTick as S } from "vue";
-import { s as _, ao as i } from "./index-BSa4GlHG.js";
+import { s as _, ao as i } from "./index-DKjAxJY6.js";
 import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const R = {
   __name: "SparkTooltip",

package/dist/{Title-CWxjC3bE.js → Title-Dahu_Ia-.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as l, openBlock as n, Fragment as f, createElementVNode as p, createCommentVNode as o, normalizeStyle as d, unref as e, toDisplayString as g, renderSlot as r } from "vue";
-import { u as c } from "./useNestedProp-uR74_CFG.js";
+import { u as c } from "./useNestedProp-Cmx8ApWu.js";
 const x = {
   __name: "Title",
   props: {

package/dist/Tooltip-j8grOyYT.js

@@ -0,0 +1,157 @@
+import { ref as s, onMounted as S, onUnmounted as g, watch as p, nextTick as k, computed as x, createBlock as $, openBlock as h, Teleport as C, createElementBlock as F, createCommentVNode as B, normalizeStyle as w, normalizeClass as N, renderSlot as m, createElementVNode as Y } from "vue";
+import { s as z } from "./index-DKjAxJY6.js";
+function M({ tooltip: e, chart: a, clientPosition: t, positionPreference: d = "center", defaultOffsetY: c = 24, blockShiftY: u = !1 }) {
+  const o = s(0), i = s(c);
+  if (e && a) {
+    const { width: n, height: v } = e.getBoundingClientRect(), { right: f, left: l, bottom: r } = a.getBoundingClientRect();
+    d === "center" && (t.x + n / 2 > f ? o.value = -n + (f - t.x) : t.x - n / 2 < l ? o.value = -n + (n - (t.x - l)) : o.value = -n / 2), d === "right" && (t.x + n > f ? o.value = -n + (f - t.x) : o.value = 0), d === "left" && (t.x < l + n ? o.value = -n + (n - (t.x - l)) : o.value = -n), t.y + v > r && !u && (i.value = -v - c);
+  }
+  return {
+    top: t.y + i.value,
+    left: t.x + o.value
+  };
+}
+function T(e, a, t) {
+  S(() => e.addEventListener(a, t)), g(() => e.removeEventListener(a, t));
+}
+function E() {
+  const e = s(0), a = s(0);
+  return T(window, "mousemove", (t) => {
+    e.value = t.clientX, a.value = t.clientY;
+  }), { x: e, y: a };
+}
+const L = ["aria-hidden"], O = ["innerHTML"], b = 0.18, A = {
+  __name: "Tooltip",
+  props: {
+    backgroundColor: {
+      type: String,
+      default: "#FFFFFF"
+    },
+    color: {
+      type: String,
+      default: "#000000"
+    },
+    content: String,
+    maxWidth: {
+      type: String,
+      default: "300px"
+    },
+    parent: {
+      type: Object
+    },
+    show: {
+      type: Boolean,
+      default: !1
+    },
+    isCustom: {
+      type: Boolean,
+      default: !1
+    },
+    fontSize: {
+      type: [Number, String],
+      default: 14
+    },
+    borderRadius: {
+      type: Number,
+      default: 4
+    },
+    borderColor: {
+      type: String,
+      default: "#e1e5e8"
+    },
+    borderWidth: {
+      type: Number,
+      default: 1
+    },
+    backgroundOpacity: {
+      type: Number,
+      default: 100
+    },
+    position: {
+      type: String,
+      default: "center"
+    },
+    offsetY: {
+      type: Number,
+      default: 24
+    },
+    blockShiftY: {
+      type: Boolean,
+      default: !1
+    },
+    isFullscreen: {
+      type: Boolean,
+      default: !1
+    },
+    disableSmoothing: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const a = e, t = s(null), { x: d, y: c } = E(a.parent), u = s({ x: 0, y: 0 }), o = s({ x: 0, y: 0 });
+    let i = null;
+    function n() {
+      if (a.disableSmoothing) {
+        o.value.x = u.value.x, o.value.y = u.value.y;
+        return;
+      }
+      o.value.x += (u.value.x - o.value.x) * b, o.value.y += (u.value.y - o.value.y) * b, i = requestAnimationFrame(n);
+    }
+    p([d, c], ([l, r]) => {
+      u.value.x = l, u.value.y = r, a.disableSmoothing && (o.value.x = l, o.value.y = r);
+    }), p(() => a.show, async (l) => {
+      if (l) {
+        const r = d.value, y = c.value;
+        u.value.x = r, u.value.y = y, o.value.x = r, o.value.y = y, await k(), i || n();
+      } else
+        i && (cancelAnimationFrame(i), i = null);
+    }), g(() => {
+      i && cancelAnimationFrame(i);
+    });
+    const v = x(() => {
+      const l = M({
+        tooltip: t.value,
+        chart: a.parent,
+        clientPosition: o.value,
+        positionPreference: a.position,
+        defaultOffsetY: a.offsetY,
+        blockShiftY: a.blockShiftY
+      });
+      return {
+        top: Math.round(l.top),
+        left: Math.round(l.left)
+      };
+    }), f = x(() => z(a.backgroundColor, a.backgroundOpacity));
+    return (l, r) => (h(), $(C, {
+      to: e.isFullscreen ? e.parent : "body"
+    }, [
+      e.show ? (h(), F("div", {
+        key: 0,
+        ref_key: "tooltip",
+        ref: t,
+        role: "tooltip",
+        "aria-hidden": !e.show,
+        "aria-live": "polite",
+        class: N({ "vue-data-ui-custom-tooltip": e.isCustom, "vue-data-ui-tooltip": !e.isCustom }),
+        style: w(`
+                pointer-events:none;
+                top:${v.value.top}px;
+                left:${v.value.left}px;
+                ${e.isCustom ? "" : `background:${f.value};color:${e.color};max-width:${e.maxWidth};font-size:${e.fontSize}px`};
+                border-radius:${e.borderRadius}px;
+                border:${e.borderWidth}px solid ${e.borderColor};
+                z-index:2147483647;
+            `)
+      }, [
+        m(l.$slots, "tooltip-before"),
+        m(l.$slots, "default"),
+        Y("div", { innerHTML: e.content }, null, 8, O),
+        m(l.$slots, "tooltip-after")
+      ], 14, L)) : B("", !0)
+    ], 8, ["to"]));
+  }
+};
+export {
+  A as default
+};

package/dist/{UserOptions-BEBaPSlU.js → UserOptions-BOIQ8NtD.js}

@@ -1,7 +1,7 @@
 import { ref as m, computed as w, onMounted as Q, onBeforeUnmount as Y, withDirectives as Z, createElementBlock as s, openBlock as o, normalizeStyle as v, createElementVNode as X, withKeys as p, withModifiers as _, renderSlot as d, normalizeProps as S, guardReactiveProps as ee, createVNode as te, normalizeClass as k, createCommentVNode as a, Fragment as $, createBlock as f, toDisplayString as c, mergeProps as T, unref as oe } from "vue";
 import { v as ne } from "./vClickOutside-C6WiFswA.js";
-import r from "./BaseIcon-BAHAKjob.js";
-import z from "./img-D3JvqNF8.js";
+import r from "./BaseIcon-TJm1JI2f.js";
+import z from "./img-DFeNRkbq.js";
 import { _ as le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const ie = ["title"], se = ["data-open"], ae = {
   __name: "UserOptions",

package/dist/{dom-to-png-CrAOuxmd.js → dom-to-png-00aHI4Vj.js}

@@ -1,4 +1,4 @@
-import { X as x } from "./index-BSa4GlHG.js";
+import { X as x } from "./index-DKjAxJY6.js";
 async function F(n) {
   const i = n.querySelectorAll("img"), s = Array.from(i).map((t) => new Promise((o) => {
     if (!t.src || t.src.startsWith("data:")) return o();

package/dist/{img-D3JvqNF8.js → img-DFeNRkbq.js}

@@ -1,4 +1,4 @@
-import { d as n } from "./dom-to-png-CrAOuxmd.js";
+import { d as n } from "./dom-to-png-00aHI4Vj.js";
 async function u({ domElement: t, fileName: c, format: f = "png", scale: i = 2, base64: a = !1, img: g = !1 }) {
   if (!t) return Promise.reject("No element provided");
   const h = typeof navigator < "u" && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);