vue-data-ui 2.16.5 → 2.17.0

package/dist/{vue-ui-wheel-BR1DDpKU.js → vue-ui-wheel-CTzuCroy.js}

@@ -1,16 +1,17 @@
-import { defineAsyncComponent as $, computed as p, ref as c, watch as Q, shallowRef as Z, onMounted as ke, onBeforeUnmount as we, createElementBlock as v, openBlock as s, unref as l, normalizeStyle as M, createBlock as _, createCommentVNode as h, createSlots as be, withCtx as k, renderSlot as y, normalizeProps as I, guardReactiveProps as A, normalizeClass as T, createVNode as Ce, Fragment as ee, renderList as te, toDisplayString as Oe } from "vue";
-import { u as $e, c as _e, a as Ie, o as Ae, e as Pe, w as ae, m as xe, X as Fe, i as Se, v as le, f as ze } from "./index-CZNLCg7T.js";
-import { t as Me, u as Te } from "./useResponsive-DfdjqQps.js";
-import { u as oe } from "./useNestedProp-BcPDA6Xr.js";
-import { u as Ne } from "./usePrinter-ButWuZVm.js";
-import { u as Re } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Ue } from "./useChartAccessibility-9icAAmYg.js";
-import Xe from "./Title-BQLtfM0P.js";
-import { _ as Ee } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], De = ["d", "fill"], Ye = ["cx", "cy", "r", "stroke", "stroke-width"], He = ["x", "y", "font-size", "fill", "font-weight"], We = {
+import { defineAsyncComponent as $, computed as p, ref as c, watch as Z, shallowRef as ee, onMounted as we, onBeforeUnmount as be, createElementBlock as v, openBlock as s, unref as l, normalizeStyle as M, createBlock as I, createCommentVNode as h, createSlots as Ce, withCtx as w, renderSlot as f, normalizeProps as _, guardReactiveProps as A, normalizeClass as T, createVNode as Oe, Fragment as te, renderList as ae, toDisplayString as $e } from "vue";
+import { u as Ie, c as _e, a as Ae, o as Pe, e as xe, w as le, m as Fe, X as Se, i as ze, v as ne, f as Me } from "./index-pPGk-uhD.js";
+import { t as Te, u as Ne } from "./useResponsive-DfdjqQps.js";
+import { u as oe } from "./useNestedProp-DjACxgdZ.js";
+import { u as Re } from "./usePrinter-DDHcrl0A.js";
+import { u as Ue } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Ee } from "./useChartAccessibility-9icAAmYg.js";
+import Xe from "./Title-B-2bV0SW.js";
+import Le from "./img-Y_hYz-ZC.js";
+import { _ as Be } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ge = ["id"], je = ["xmlns", "viewBox"], De = ["width", "height"], Ye = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], He = ["d", "fill"], We = ["cx", "cy", "r", "stroke", "stroke-width"], qe = ["x", "y", "font-size", "fill", "font-weight"], Ve = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, qe = {
+}, Je = {
   __name: "vue-ui-wheel",
   props: {
     config: {
@@ -26,31 +27,31 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
       }
     }
   },
-  setup(ne, { expose: se }) {
-    const ue = $(() => import("./PenAndPaper-BS60tkQN.js")), re = $(() => import("./vue-ui-skeleton-D9B8DY_k.js")), ie = $(() => import("./UserOptions-DMGkAAIO.js")), ce = $(() => import("./PackageVersion-DCreTQN4.js")), { vue_ui_wheel: ve } = $e(), d = ne, P = p(() => !!d.dataset && Object.keys(d.dataset).length), x = c(_e()), he = c(null), N = c(0), w = c(null), R = c(null), U = c(null), X = c(null), E = c(0), e = p({
+  setup(se, { expose: ue }) {
+    const re = $(() => import("./PenAndPaper-D6AqipIO.js")), ie = $(() => import("./vue-ui-skeleton-DJPjyNYn.js")), ce = $(() => import("./UserOptions-Dd34lEKb.js")), ve = $(() => import("./PackageVersion-5TR4ocqp.js")), { vue_ui_wheel: he } = Ie(), d = se, P = p(() => !!d.dataset && Object.keys(d.dataset).length), x = c(_e()), de = c(null), N = c(0), g = c(null), R = c(null), U = c(null), E = c(null), X = c(0), e = p({
       get: () => j(),
       set: (t) => t
-    }), { userOptionsVisible: F, setUserOptionsVisibility: L, keepUserOptionState: B } = Re({ config: e.value }), { svgRef: G } = Ue({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: F, setUserOptionsVisibility: L, keepUserOptionState: B } = Ue({ config: e.value }), { svgRef: G } = Ee({ config: e.value.style.chart.title });
     function j() {
       const t = oe({
         userConfig: d.config,
-        defaultConfig: ve
+        defaultConfig: he
       });
       return t.theme ? {
         ...oe({
-          userConfig: Ie.vue_ui_wheel[t.theme] || d.config,
+          userConfig: Ae.vue_ui_wheel[t.theme] || d.config,
           defaultConfig: t
         })
       } : t;
     }
-    Q(() => d.config, (t) => {
-      e.value = j(), F.value = !e.value.userOptions.showOnChartHover, V(), E.value += 1;
+    Z(() => d.config, (t) => {
+      e.value = j(), F.value = !e.value.userOptions.showOnChartHover, V(), X.value += 1;
     }, { deep: !0 });
-    const { isPrinting: D, isImaging: Y, generatePdf: H, generateImage: W } = Ne({
+    const { isPrinting: D, isImaging: Y, generatePdf: H, generateImage: W } = Re({
       elementId: x.value,
       fileName: e.value.style.chart.title.text || "vue-ui-wheel",
       options: e.value.userOptions.print
-    }), de = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), o = c({
+    }), fe = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), o = c({
       size: 360,
       height: 360,
       width: 360
@@ -66,34 +67,34 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
       };
     }
     const r = c(e.value.style.chart.animation.use ? 0 : d.dataset.percentage || 0);
-    Q(() => d.dataset, (t) => {
+    Z(() => d.dataset, (t) => {
       e.value.style.chart.animation.use ? J(t.percentage) : r.value = t.percentage || 0;
     }, { deep: !0 });
-    const f = Z(null), g = Z(null);
-    ke(() => {
+    const y = ee(null), m = ee(null);
+    we(() => {
       V();
     });
     function V() {
-      if (Ae(d.dataset) && Pe({
+      if (Pe(d.dataset) && xe({
         componentName: "VueUiWheel",
         type: "dataset"
       }), J(d.dataset.percentage || 0), e.value.responsive) {
-        const t = Me(() => {
-          const { width: n, height: a } = Te({
-            chart: w.value,
+        const t = Te(() => {
+          const { width: n, height: a } = Ne({
+            chart: g.value,
             title: e.value.style.chart.title.text ? R.value : null,
             source: U.value,
-            noTitle: X.value
+            noTitle: E.value
           });
           requestAnimationFrame(() => {
             o.value.width = n, o.value.height = a, S.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(n, a);
           });
         });
-        f.value && (g.value && f.value.unobserve(g.value), f.value.disconnect()), f.value = new ResizeObserver(t), g.value = w.value.parentNode, f.value.observe(g.value);
+        y.value && (m.value && y.value.unobserve(m.value), y.value.disconnect()), y.value = new ResizeObserver(t), m.value = g.value.parentNode, y.value.observe(m.value);
       }
     }
-    we(() => {
-      f.value && (g.value && f.value.unobserve(g.value), f.value.disconnect());
+    be(() => {
+      y.value && (m.value && y.value.unobserve(m.value), y.value.disconnect());
     });
     function J(t) {
       let n = e.value.style.chart.animation.speed;
@@ -103,45 +104,52 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
       }
       i();
     }
-    const m = p(() => Math.max(100, e.value.style.chart.layout.wheel.ticks.quantity)), b = p(() => 100 / m.value), K = p(() => {
+    const k = p(() => Math.max(100, e.value.style.chart.layout.wheel.ticks.quantity)), b = p(() => 100 / k.value), K = p(() => {
       const t = [];
-      for (let n = 0; n < m.value; n += 1) {
-        const a = r.value > n * b.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: i, y: pe } = q(o.value.size / m.value * n), { x: ge, y: me } = q(o.value.size / m.value * n, e.value.style.chart.layout.wheel.ticks.sizeRatio);
+      for (let n = 0; n < k.value; n += 1) {
+        const a = r.value > n * b.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: i, y: ge } = q(o.value.size / k.value * n), { x: me, y: ke } = q(o.value.size / k.value * n, e.value.style.chart.layout.wheel.ticks.sizeRatio);
         t.push({
           x1: i,
-          y1: pe,
-          x2: ge,
-          y2: me,
-          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? ae(a, n * b.value / m.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : a
+          y1: ge,
+          x2: me,
+          y2: ke,
+          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? le(a, n * b.value / k.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : a
         });
       }
       return t;
-    }), ye = p(() => xe({ series: K.value.map((t) => ({
+    }), ye = p(() => Fe({ series: K.value.map((t) => ({
       name: "",
       value: 1,
       color: t.color
     })) }, u.value.centerX, u.value.centerY, u.value.radius, u.value.radius, 1.99999, 2, 1, 360, 105.25, u.value.radius * (1 - e.value.style.chart.layout.wheel.ticks.sizeRatio))), C = c(!1);
-    function fe(t) {
+    function Q(t) {
       C.value = t, N.value += 1;
     }
     const O = c(!1);
     function z() {
       O.value = !O.value;
     }
-    return se({
+    async function pe({ scale: t = 2 } = {}) {
+      if (!g.value) return;
+      const { imageUri: n, base64: a } = await Le({ domElement: g.value, base64: !0, img: !0, scale: t });
+      return { imageUri: n, base64: a };
+    }
+    return ue({
+      getImage: pe,
       generatePdf: H,
       generateImage: W,
-      toggleAnnotator: z
+      toggleAnnotator: z,
+      toggleFullscreen: Q
     }), (t, n) => (s(), v("div", {
       class: "vue-ui-wheel",
       ref_key: "wheelChart",
-      ref: w,
+      ref: g,
       id: x.value,
       style: M(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
       onMouseenter: n[0] || (n[0] = () => l(L)(!0)),
       onMouseleave: n[1] || (n[1] = () => l(L)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (s(), _(l(ue), {
+      e.value.userOptions.buttons.annotator ? (s(), I(l(re), {
         key: 0,
         svgRef: l(G),
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -149,10 +157,10 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
         active: O.value,
         onClose: z
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
-      de.value ? (s(), v("div", {
+      fe.value ? (s(), v("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: X,
+        ref: E,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : h("", !0),
@@ -162,8 +170,8 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
         ref: R,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (s(), _(Xe, {
-          key: `title_${E.value}`,
+        (s(), I(Xe, {
+          key: `title_${X.value}`,
           config: {
             title: {
               cy: "wheel-title",
@@ -176,9 +184,9 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
           }
         }, null, 8, ["config"]))
       ], 512)) : h("", !0),
-      e.value.userOptions.show && P.value && (l(B) || l(F)) ? (s(), _(l(ie), {
+      e.value.userOptions.show && P.value && (l(B) || l(F)) ? (s(), I(l(ce), {
         ref_key: "details",
-        ref: he,
+        ref: de,
         key: `user_options_${N.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
@@ -194,62 +202,63 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
         titles: { ...e.value.userOptions.buttonTitles },
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: O.value,
-        chartElement: w.value,
+        chartElement: g.value,
         callbacks: e.value.userOptions.callbacks,
-        onToggleFullscreen: fe,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: Q,
         onGeneratePdf: l(H),
         onGenerateImage: l(W),
         onToggleAnnotator: z,
         style: M({
           visibility: l(B) ? l(F) ? "visible" : "hidden" : "visible"
         })
-      }, be({ _: 2 }, [
+      }, Ce({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: k(({ isOpen: a, color: i }) => [
-            y(t.$slots, "menuIcon", I(A({ isOpen: a, color: i })), void 0, !0)
+          fn: w(({ isOpen: a, color: i }) => [
+            f(t.$slots, "menuIcon", _(A({ isOpen: a, color: i })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: k(() => [
-            y(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: w(() => [
+            f(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: k(() => [
-            y(t.$slots, "optionImg", {}, void 0, !0)
+          fn: w(() => [
+            f(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: k(({ toggleFullscreen: a, isFullscreen: i }) => [
-            y(t.$slots, "optionFullscreen", I(A({ toggleFullscreen: a, isFullscreen: i })), void 0, !0)
+          fn: w(({ toggleFullscreen: a, isFullscreen: i }) => [
+            f(t.$slots, "optionFullscreen", _(A({ toggleFullscreen: a, isFullscreen: i })), void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: k(({ toggleAnnotator: a, isAnnotator: i }) => [
-            y(t.$slots, "optionAnnotator", I(A({ toggleAnnotator: a, isAnnotator: i })), void 0, !0)
+          fn: w(({ toggleAnnotator: a, isAnnotator: i }) => [
+            f(t.$slots, "optionAnnotator", _(A({ toggleAnnotator: a, isAnnotator: i })), void 0, !0)
           ]),
           key: "4"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "callbacks", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
       P.value ? (s(), v("svg", {
         key: 4,
         ref_key: "svgRef",
         ref: G,
-        xmlns: l(Fe),
+        xmlns: l(Se),
         class: T({ "vue-data-ui-fullscreen--on": C.value, "vue-data-ui-fulscreen--off": !C.value }),
         viewBox: `0 0 ${o.value.width <= 0 ? 10 : o.value.width} ${o.value.height <= 0 ? 10 : o.value.height}`,
         style: M(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        Ce(l(ce)),
+        Oe(l(ve)),
         t.$slots["chart-background"] ? (s(), v("foreignObject", {
           key: 0,
           x: 0,
@@ -260,9 +269,9 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
             pointerEvents: "none"
           }
         }, [
-          y(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Ge)) : h("", !0),
-        e.value.style.chart.layout.wheel.ticks.type === "classic" ? (s(!0), v(ee, { key: 1 }, te(K.value, (a, i) => (s(), v("line", {
+          f(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, De)) : h("", !0),
+        e.value.style.chart.layout.wheel.ticks.type === "classic" ? (s(!0), v(te, { key: 1 }, ae(K.value, (a, i) => (s(), v("line", {
           x1: a.x1,
           x2: a.x2,
           y1: a.y1,
@@ -271,11 +280,11 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
           "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(o.value.width, o.value.height),
           "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
           class: T({ "vue-ui-tick-animated": e.value.style.chart.animation.use && i * b.value <= r.value })
-        }, null, 10, je))), 256)) : (s(!0), v(ee, { key: 2 }, te(ye.value, (a, i) => (s(), v("path", {
+        }, null, 10, Ye))), 256)) : (s(!0), v(te, { key: 2 }, ae(ye.value, (a, i) => (s(), v("path", {
           d: a.arcSlice,
           fill: a.color,
           class: T({ "vue-ui-tick-animated": e.value.style.chart.animation.use && i * b.value <= r.value })
-        }, null, 10, De))), 256)),
+        }, null, 10, He))), 256)),
         e.value.style.chart.layout.innerCircle.show ? (s(), v("circle", {
           key: 3,
           cx: u.value.centerX,
@@ -284,29 +293,29 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
           stroke: e.value.style.chart.layout.innerCircle.stroke,
           "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
           fill: "none"
-        }, null, 8, Ye)) : h("", !0),
+        }, null, 8, We)) : h("", !0),
         e.value.style.chart.layout.percentage.show ? (s(), v("text", {
           key: 4,
           x: u.value.centerX,
           y: u.value.centerY + S.value / 3,
           "font-size": S.value,
-          fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? l(ae)(e.value.style.chart.layout.wheel.ticks.activeColor, r.value / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.wheel.ticks.activeColor,
+          fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? l(le)(e.value.style.chart.layout.wheel.ticks.activeColor, r.value / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.wheel.ticks.activeColor,
           "text-anchor": "middle",
           "font-weight": e.value.style.chart.layout.percentage.bold ? "bold" : "normal",
           style: { "font-variant-numeric": "tabluar-nums" }
-        }, Oe(l(Se)(
+        }, $e(l(ze)(
           e.value.style.chart.layout.percentage.formatter,
-          l(le)(r.value),
-          l(ze)({
-            v: l(le)(r.value),
+          l(ne)(r.value),
+          l(Me)({
+            v: l(ne)(r.value),
             s: "%",
             r: e.value.style.chart.layout.percentage.rounding
           })
-        )), 9, He)) : h("", !0),
-        y(t.$slots, "svg", { svg: o.value }, void 0, !0)
-      ], 14, Be)) : h("", !0),
-      t.$slots.watermark ? (s(), v("div", We, [
-        y(t.$slots, "watermark", I(A({ isPrinting: l(D) || l(Y) })), void 0, !0)
+        )), 9, qe)) : h("", !0),
+        f(t.$slots, "svg", { svg: o.value }, void 0, !0)
+      ], 14, je)) : h("", !0),
+      t.$slots.watermark ? (s(), v("div", Ve, [
+        f(t.$slots, "watermark", _(A({ isPrinting: l(D) || l(Y) })), void 0, !0)
       ])) : h("", !0),
       t.$slots.source ? (s(), v("div", {
         key: 6,
@@ -314,9 +323,9 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
         ref: U,
         dir: "auto"
       }, [
-        y(t.$slots, "source", {}, void 0, !0)
+        f(t.$slots, "source", {}, void 0, !0)
       ], 512)) : h("", !0),
-      P.value ? h("", !0) : (s(), _(l(re), {
+      P.value ? h("", !0) : (s(), I(l(ie), {
         key: 7,
         config: {
           type: "wheel",
@@ -328,9 +337,9 @@ const Le = ["id"], Be = ["xmlns", "viewBox"], Ge = ["width", "height"], je = ["x
           }
         }
       }, null, 8, ["config"]))
-    ], 44, Le));
+    ], 44, Ge));
   }
-}, ot = /* @__PURE__ */ Ee(qe, [["__scopeId", "data-v-b1e78d19"]]);
+}, ut = /* @__PURE__ */ Be(Je, [["__scopeId", "data-v-f53b6073"]]);
 export {
-  ot as default
+  ut as default
 };