vue-data-ui 3.16.0 → 3.16.1

package/dist/ColorPicker-B0mV4xzu.js

@@ -0,0 +1,255 @@
+import { useCssVars as W, ref as u, computed as T, watchEffect as Y, onMounted as j, onBeforeUnmount as q, watch as A, withDirectives as G, openBlock as s, createElementBlock as v, withKeys as R, createElementVNode as i, normalizeStyle as a, renderSlot as H, normalizeProps as J, guardReactiveProps as Q, createVNode as g, withModifiers as r, Fragment as $, renderList as M, createCommentVNode as N, createBlock as X, Teleport as Z, unref as _, nextTick as ee } from "vue";
+import F from "./BaseIcon-Cb3zzG6s.js";
+import { W as oe } from "./lib-DBptbyyI.js";
+import { v as te } from "./vClickOutside-C6WiFswA.js";
+import { _ as ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const re = ["aria-expanded", "aria-label"], le = ["aria-label", "aria-pressed", "onClick"], ie = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-46%)" } }, ue = ["value"], se = ["onClick"], ae = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-46%)" } }, de = ["value"], ce = {
+  __name: "ColorPicker",
+  props: {
+    value: {
+      type: String,
+      default: "#ffffff"
+    },
+    size: {
+      type: String,
+      default: "50px"
+    },
+    backgroundColor: {
+      type: String,
+      default: "#FFFFFF"
+    },
+    buttonBorderColor: {
+      type: String,
+      default: "#FFFFFF"
+    },
+    teleported: {
+      type: Boolean,
+      default: !1
+    },
+    isCursorPointer: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:value"],
+  setup(o, { emit: O }) {
+    W((t) => ({
+      v514e661b: o.buttonBorderColor
+    }));
+    const d = o, w = O, V = u(null), C = u(null), c = u(null), l = u(!1), b = u(!1), y = u({ top: 0, left: 0 }), K = T(() => ({
+      backgroundColor: d.value,
+      width: "100%",
+      height: "100%",
+      cursor: d.isCursorPointer ? "pointer" : "default"
+    })), p = T(() => oe(d.value));
+    function E(t) {
+      w("update:value", t), l.value = !1;
+    }
+    function x(t) {
+      w("update:value", t.target.value);
+    }
+    function P(t) {
+      t?.stopPropagation?.(), b.value = !0, c.value?.click();
+    }
+    function D() {
+      l.value = !1;
+    }
+    function m() {
+      !b.value && l.value && D();
+    }
+    async function U() {
+      l.value = !l.value, l.value && d.teleported && (await ee(), B());
+    }
+    function B() {
+      if (!C.value) return;
+      const t = C.value.getBoundingClientRect();
+      y.value = { top: t.top + 36, left: t.right - 48 };
+    }
+    function f() {
+      l.value && d.teleported && B();
+    }
+    function k() {
+      setTimeout(() => b.value = !1, 0);
+    }
+    Y((t) => {
+      const e = c.value;
+      if (!e) return;
+      const n = () => k(), I = () => k(), S = () => {
+      };
+      e.addEventListener("blur", n), e.addEventListener("change", I), e.addEventListener("input", S), t(() => {
+        e.removeEventListener("blur", n), e.removeEventListener("change", I), e.removeEventListener("input", S);
+      });
+    });
+    function L() {
+      k();
+    }
+    function h() {
+      document.visibilityState === "visible" && k();
+    }
+    j(() => {
+      window.addEventListener("scroll", f, { passive: !0 }), window.addEventListener("resize", f, { passive: !0 }), window.addEventListener("focus", L), document.addEventListener("visibilitychange", h);
+    }), q(() => {
+      window.removeEventListener("scroll", f), window.removeEventListener("resize", f), window.removeEventListener("focus", L), document.removeEventListener("visibilitychange", h);
+    }), A(
+      () => d.value,
+      (t) => {
+        c.value && (c.value.value = t);
+      }
+    );
+    const z = u([
+      "#000000",
+      "#FFFFFF",
+      "#FF5733",
+      "#33FF57",
+      "#3357FF",
+      "#FFC300",
+      "#800080",
+      "#FF1493",
+      "#00CED1"
+    ]);
+    return (t, e) => G((s(), v("div", {
+      ref_key: "wrapperRef",
+      ref: V,
+      onKeydown: R(m, ["esc"]),
+      style: { height: "100%", width: "100%", position: "relative" },
+      "aria-expanded": l.value ? "true" : "false",
+      "aria-haspopup": "dialog",
+      "aria-label": `Choose color. Current color ${o.value}`
+    }, [
+      i("button", {
+        ref_key: "buttonRef",
+        ref: C,
+        class: "icon",
+        onClick: U,
+        style: a(K.value),
+        type: "button"
+      }, [
+        H(t.$slots, "annotator-action-color", J(Q({ color: p.value })), () => [
+          g(F, {
+            name: "palette",
+            stroke: p.value,
+            size: 22
+          }, null, 8, ["stroke"])
+        ], !0)
+      ], 4),
+      l.value && !o.teleported ? (s(), v("div", {
+        key: 0,
+        class: "vue-ui-color-picker",
+        role: "dialog",
+        "aria-label": "Color picker",
+        style: a({
+          backgroundColor: o.backgroundColor,
+          position: "absolute",
+          left: "calc(100% + 30px)",
+          top: "50%",
+          transform: "translateY(-18%)"
+        }),
+        onMousedown: e[2] || (e[2] = r(() => {
+        }, ["stop"])),
+        onClick: e[3] || (e[3] = r(() => {
+        }, ["stop"])),
+        onTouchstart: e[4] || (e[4] = r(() => {
+        }, ["stop"])),
+        onKeydown: R(m, ["esc"])
+      }, [
+        (s(!0), v($, null, M(z.value, (n) => (s(), v("button", {
+          key: n,
+          "aria-label": `Select color ${n}`,
+          "aria-pressed": o.value === n ? "true" : "false",
+          class: "vue-ui-color-picker-option",
+          type: "button",
+          style: a({ backgroundColor: n, outline: `1px solid ${o.buttonBorderColor}`, cursor: o.isCursorPointer ? "pointer" : "default" }),
+          onClick: () => E(n)
+        }, null, 12, le))), 128)),
+        i("button", {
+          class: "vue-ui-color-picker-option",
+          type: "button",
+          style: a({ backgroundColor: o.value, outline: `1px solid ${o.buttonBorderColor}`, cursor: o.isCursorPointer ? "pointer" : "default" }),
+          "aria-label": "Open native color picker",
+          onClick: r(P, ["stop"]),
+          onMousedown: e[0] || (e[0] = r(() => {
+          }, ["stop"])),
+          onTouchstart: e[1] || (e[1] = r(() => {
+          }, ["stop"]))
+        }, [
+          i("div", ie, [
+            g(F, {
+              name: "colorPicker",
+              stroke: p.value,
+              size: 22
+            }, null, 8, ["stroke"])
+          ]),
+          i("input", {
+            ref_key: "colorInput",
+            ref: c,
+            type: "color",
+            value: o.value,
+            class: "hidden-input",
+            onInput: x
+          }, null, 40, ue)
+        ], 36)
+      ], 36)) : N("", !0),
+      l.value && o.teleported ? (s(), X(Z, {
+        key: 1,
+        to: "body"
+      }, [
+        i("div", {
+          tabindex: "0",
+          class: "vue-ui-color-picker",
+          style: a({
+            backgroundColor: o.backgroundColor,
+            position: "fixed",
+            top: y.value.top + "px",
+            left: y.value.left + "px",
+            zIndex: 2147483647
+          }),
+          onMousedown: e[7] || (e[7] = r(() => {
+          }, ["stop"])),
+          onClick: e[8] || (e[8] = r(() => {
+          }, ["stop"])),
+          onTouchstart: e[9] || (e[9] = r(() => {
+          }, ["stop"]))
+        }, [
+          (s(!0), v($, null, M(z.value, (n) => (s(), v("button", {
+            key: n,
+            class: "vue-ui-color-picker-option",
+            type: "button",
+            style: a({ backgroundColor: n, outline: `1px solid ${o.buttonBorderColor}`, cursor: o.isCursorPointer ? "pointer" : "default" }),
+            onClick: () => E(n)
+          }, null, 12, se))), 128)),
+          i("button", {
+            class: "vue-ui-color-picker-option",
+            type: "button",
+            style: a({ backgroundColor: o.value, outline: `1px solid ${o.buttonBorderColor}`, cursor: o.isCursorPointer ? "cursor" : "default" }),
+            onClick: r(P, ["stop"]),
+            onMousedown: e[5] || (e[5] = r(() => {
+            }, ["stop"])),
+            onTouchstart: e[6] || (e[6] = r(() => {
+            }, ["stop"]))
+          }, [
+            i("div", ae, [
+              g(F, {
+                name: "colorPicker",
+                stroke: p.value,
+                size: 22
+              }, null, 8, ["stroke"])
+            ]),
+            i("input", {
+              ref_key: "colorInput",
+              ref: c,
+              type: "color",
+              value: o.value,
+              class: "hidden-input",
+              onInput: x
+            }, null, 40, de)
+          ], 36)
+        ], 36)
+      ])) : N("", !0)
+    ], 40, re)), [
+      [_(te), m]
+    ]);
+  }
+}, be = /* @__PURE__ */ ne(ce, [["__scopeId", "data-v-e3fdd92e"]]);
+export {
+  be as C
+};

package/dist/{NonSvgPenAndPaper-vqweC0WU.js → NonSvgPenAndPaper-VyJFyJ6X.js}

@@ -1,7 +1,7 @@
 import { ref as u, computed as ge, onMounted as ze, nextTick as Xe, onBeforeUnmount as Ye, watch as ee, openBlock as g, createElementBlock as y, Fragment as J, normalizeStyle as C, normalizeClass as M, createElementVNode as $, createVNode as P, toDisplayString as ye, unref as xe, withDirectives as we, vModelText as ke, createCommentVNode as R, withModifiers as be, renderList as me } from "vue";
 import { j as Ce, x as We, l as Re, X as U } from "./lib-DBptbyyI.js";
 import q from "./BaseIcon-Cb3zzG6s.js";
-import { C as Ue } from "./ColorPicker-DQ5sdRrl.js";
+import { C as Ue } from "./ColorPicker-B0mV4xzu.js";
 import { _ as qe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Ve = ["disabled"], Ie = ["data-mode", "xmlns", "viewBox"], Ke = ["cx", "cy", "r", "fill"], Ge = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], He = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "marker-end"], Oe = ["d", "stroke", "stroke-width"], Qe = ["x", "y", "fill", "font-size"], je = ["x", "dy"], Je = ["d", "stroke", "stroke-width"], Ze = {
   __name: "NonSvgPenAndPaper",

package/dist/{PackageVersion-IIGK_e2C.js → PackageVersion-DPO-OOVI.js}

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