vue-data-ui 3.5.0 → 3.5.1

package/README.md

@@ -676,6 +676,32 @@ User options menu icon can be customized using the #menuIcon slot:
 </template>
 ```
 
+Since version 3.5.1, slots are exposed to customize the chart annotator sub-menu:
+
+```html
+<VueUiXy :dataset="dataset" :config="config">
+  <template #annotator-action-close>
+    <MyCloseIcon />
+  </template>
+  <template #annotator-action-color="{ color }">
+    <MyColorIcon :color="color" />
+  </template>
+  <template #annotator-action-draw="{ mode }">
+    <MyDrawIcon v-if="mode === 'draw'" />
+    <MyTextIcon v-else />
+  </template>
+  <template #annotator-action-undo="{ disabled }">
+    <MyUndoIcon />
+  </template>
+  <template #annotator-action-redo="{ disabled }">
+    <MyRedoIcon />
+  </template>
+  <template #annotator-action-delete="{ disabled }">
+    <MyDeleteIcon />
+  </template>
+</VueUiXy>
+```
+
 # Custom palette
 
 It is possible to provide a custom palette in the config prop through config.customPalette (string[]) for the following components:

package/dist/{ColorPicker-J5wOPCeB.js → ColorPicker-ChuwChMo.js}

@@ -1,9 +1,9 @@
-import { ref as u, computed as T, watchEffect as U, onMounted as J, onBeforeUnmount as W, watch as Y, withDirectives as j, createElementBlock as d, openBlock as s, withKeys as q, createElementVNode as i, createCommentVNode as M, createBlock as A, normalizeStyle as a, createVNode as C, withModifiers as n, Fragment as R, renderList as N, Teleport as G, unref as H, nextTick as Q } from "vue";
+import { ref as u, computed as T, watchEffect as U, onMounted as J, onBeforeUnmount as W, watch as Y, withDirectives as j, createElementBlock as d, openBlock as s, withKeys as q, createElementVNode as i, createCommentVNode as R, createBlock as A, normalizeStyle as a, renderSlot as G, normalizeProps as H, guardReactiveProps as Q, createVNode as C, withModifiers as n, Fragment as M, renderList as N, Teleport as X, unref as Z, nextTick as _ } from "vue";
 import g from "./BaseIcon-BmMbm4d0.js";
-import { J as X } from "./lib-C_mNZmhD.js";
-import { v as Z } from "./vClickOutside-C6WiFswA.js";
-import { _ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-46%)" } }, oe = ["value"], ne = ["onClick"], le = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-46%)" } }, re = ["value"], ie = {
+import { J as ee } from "./lib-C_mNZmhD.js";
+import { v as oe } from "./vClickOutside-C6WiFswA.js";
+import { _ as te } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ne = ["onClick"], le = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-46%)" } }, re = ["value"], ie = ["onClick"], ue = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-46%)" } }, se = ["value"], ae = {
   __name: "ColorPicker",
   props: {
     value: {
@@ -28,61 +28,61 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
     }
   },
   emits: ["update:value"],
-  setup(t, { emit: O }) {
-    const v = t, F = O, V = u(null), k = u(null), c = u(null), r = u(!1), b = u(!1), m = u({ top: 0, left: 0 }), $ = T(() => ({
+  setup(t, { emit: $ }) {
+    const v = t, F = $, O = u(null), b = u(null), c = u(null), r = u(!1), m = u(!1), y = u({ top: 0, left: 0 }), V = T(() => ({
       backgroundColor: v.value,
       width: "100%",
       height: "100%",
       cursor: "pointer"
-    })), y = T(() => X(v.value));
+    })), p = T(() => ee(v.value));
     function w(o) {
       F("update:value", o), r.value = !1;
     }
     function E(o) {
       F("update:value", o.target.value);
     }
-    function x(o) {
-      o?.stopPropagation?.(), b.value = !0, c.value?.click();
+    function L(o) {
+      o?.stopPropagation?.(), m.value = !0, c.value?.click();
     }
     function D() {
       r.value = !1;
     }
-    function L() {
-      !b.value && r.value && D();
+    function x() {
+      !m.value && r.value && D();
     }
     async function K() {
-      r.value = !r.value, r.value && v.teleported && (await Q(), B());
+      r.value = !r.value, r.value && v.teleported && (await _(), B());
     }
     function B() {
-      if (!k.value) return;
-      const o = k.value.getBoundingClientRect();
-      m.value = { top: o.top + 36, left: o.right - 48 };
+      if (!b.value) return;
+      const o = b.value.getBoundingClientRect();
+      y.value = { top: o.top + 36, left: o.right - 48 };
     }
-    function p() {
+    function f() {
       r.value && v.teleported && B();
     }
-    function f() {
-      setTimeout(() => b.value = !1, 0);
+    function k() {
+      setTimeout(() => m.value = !1, 0);
     }
     U((o) => {
       const e = c.value;
       if (!e) return;
-      const l = () => f(), P = () => f(), S = () => {
+      const l = () => k(), I = () => k(), S = () => {
       };
-      e.addEventListener("blur", l), e.addEventListener("change", P), e.addEventListener("input", S), o(() => {
-        e.removeEventListener("blur", l), e.removeEventListener("change", P), e.removeEventListener("input", S);
+      e.addEventListener("blur", l), e.addEventListener("change", I), e.addEventListener("input", S), o(() => {
+        e.removeEventListener("blur", l), e.removeEventListener("change", I), e.removeEventListener("input", S);
       });
     });
     function h() {
-      f();
+      k();
     }
-    function I() {
-      document.visibilityState === "visible" && f();
+    function P() {
+      document.visibilityState === "visible" && k();
     }
     J(() => {
-      window.addEventListener("scroll", p, { passive: !0 }), window.addEventListener("resize", p, { passive: !0 }), window.addEventListener("focus", h), document.addEventListener("visibilitychange", I);
+      window.addEventListener("scroll", f, { passive: !0 }), window.addEventListener("resize", f, { passive: !0 }), window.addEventListener("focus", h), document.addEventListener("visibilitychange", P);
     }), W(() => {
-      window.removeEventListener("scroll", p), window.removeEventListener("resize", p), window.removeEventListener("focus", h), document.removeEventListener("visibilitychange", I);
+      window.removeEventListener("scroll", f), window.removeEventListener("resize", f), window.removeEventListener("focus", h), document.removeEventListener("visibilitychange", P);
     }), Y(
       () => v.value,
       (o) => {
@@ -102,23 +102,25 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
     ]);
     return (o, e) => j((s(), d("div", {
       ref_key: "wrapperRef",
-      ref: V,
-      onKeydown: q(L, ["esc"]),
+      ref: O,
+      onKeydown: q(x, ["esc"]),
       style: { height: "100%", width: "100%", position: "relative" }
     }, [
       i("button", {
         ref_key: "buttonRef",
-        ref: k,
+        ref: b,
         class: "icon",
         onClick: K,
-        style: a($.value),
+        style: a(V.value),
         type: "button"
       }, [
-        C(g, {
-          name: "palette",
-          stroke: y.value,
-          size: 22
-        }, null, 8, ["stroke"])
+        G(o.$slots, "annotator-action-color", H(Q({ color: p.value })), () => [
+          C(g, {
+            name: "palette",
+            stroke: p.value,
+            size: 22
+          }, null, 8, ["stroke"])
+        ], !0)
       ], 4),
       r.value && !t.teleported ? (s(), d("div", {
         key: 0,
@@ -138,27 +140,27 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
         onTouchstart: e[4] || (e[4] = n(() => {
         }, ["stop"]))
       }, [
-        (s(!0), d(R, null, N(z.value, (l) => (s(), d("button", {
+        (s(!0), d(M, null, N(z.value, (l) => (s(), d("button", {
           key: l,
           class: "vue-ui-color-picker-option",
           type: "button",
           style: a({ backgroundColor: l, outline: `1px solid ${t.buttonBorderColor}` }),
           onClick: () => w(l)
-        }, null, 12, ee))), 128)),
+        }, null, 12, ne))), 128)),
         i("button", {
           class: "vue-ui-color-picker-option",
           type: "button",
           style: a({ backgroundColor: t.value, outline: `1px solid ${t.buttonBorderColor}` }),
-          onClick: n(x, ["stop"]),
+          onClick: n(L, ["stop"]),
           onMousedown: e[0] || (e[0] = n(() => {
           }, ["stop"])),
           onTouchstart: e[1] || (e[1] = n(() => {
           }, ["stop"]))
         }, [
-          i("div", te, [
+          i("div", le, [
             C(g, {
               name: "colorPicker",
-              stroke: y.value,
+              stroke: p.value,
               size: 22
             }, null, 8, ["stroke"])
           ]),
@@ -169,10 +171,10 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
             value: t.value,
             class: "hidden-input",
             onInput: E
-          }, null, 40, oe)
+          }, null, 40, re)
         ], 36)
-      ], 36)) : M("", !0),
-      r.value && t.teleported ? (s(), A(G, {
+      ], 36)) : R("", !0),
+      r.value && t.teleported ? (s(), A(X, {
         key: 1,
         to: "body"
       }, [
@@ -182,8 +184,8 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
           style: a({
             backgroundColor: t.backgroundColor,
             position: "fixed",
-            top: m.value.top + "px",
-            left: m.value.left + "px",
+            top: y.value.top + "px",
+            left: y.value.left + "px",
             zIndex: 2147483647
           }),
           onMousedown: e[7] || (e[7] = n(() => {
@@ -193,27 +195,27 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
           onTouchstart: e[9] || (e[9] = n(() => {
           }, ["stop"]))
         }, [
-          (s(!0), d(R, null, N(z.value, (l) => (s(), d("button", {
+          (s(!0), d(M, null, N(z.value, (l) => (s(), d("button", {
             key: l,
             class: "vue-ui-color-picker-option",
             type: "button",
             style: a({ backgroundColor: l, outline: `1px solid ${t.buttonBorderColor}` }),
             onClick: () => w(l)
-          }, null, 12, ne))), 128)),
+          }, null, 12, ie))), 128)),
           i("button", {
             class: "vue-ui-color-picker-option",
             type: "button",
             style: a({ backgroundColor: t.value, outline: `1px solid ${t.buttonBorderColor}` }),
-            onClick: n(x, ["stop"]),
+            onClick: n(L, ["stop"]),
             onMousedown: e[5] || (e[5] = n(() => {
             }, ["stop"])),
             onTouchstart: e[6] || (e[6] = n(() => {
             }, ["stop"]))
           }, [
-            i("div", le, [
+            i("div", ue, [
               C(g, {
                 name: "colorPicker",
-                stroke: y.value,
+                stroke: p.value,
                 size: 22
               }, null, 8, ["stroke"])
             ]),
@@ -224,15 +226,15 @@ const ee = ["onClick"], te = { style: { position: "absolute", top: "50%", left:
               value: t.value,
               class: "hidden-input",
               onInput: E
-            }, null, 40, re)
+            }, null, 40, se)
           ], 36)
         ], 36)
-      ])) : M("", !0)
+      ])) : R("", !0)
     ], 32)), [
-      [H(Z), L]
+      [Z(oe), x]
     ]);
   }
-}, ve = /* @__PURE__ */ _(ie, [["__scopeId", "data-v-22a32b57"]]);
+}, ke = /* @__PURE__ */ te(ae, [["__scopeId", "data-v-e6c0b73a"]]);
 export {
-  ve as C
+  ke as C
 };

package/dist/{NonSvgPenAndPaper-C7TRn0_3.js → NonSvgPenAndPaper-DVgKKLIf.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 { S as $e, d as Se, X as Ae } from "./lib-C_mNZmhD.js";
 import R from "./BaseIcon-BmMbm4d0.js";
-import { C as Ee } from "./ColorPicker-J5wOPCeB.js";
+import { C as Ee } from "./ColorPicker-ChuwChMo.js";
 import { _ as Be } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Te = {
   class: /* @__PURE__ */ D({

package/dist/{PackageVersion-Cyx_s25h.js → PackageVersion-DQvyATVa.js}

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