vue-data-ui 3.15.12 → 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/{DataTable-Bo1pmAqG.js → DataTable-DT2kIdQ6.js}

@@ -1,6 +1,6 @@
 import { useCssVars as A, unref as t, computed as D, ref as k, onMounted as E, openBlock as o, createElementBlock as l, normalizeClass as C, normalizeStyle as r, withKeys as R, createVNode as B, createCommentVNode as m, createElementVNode as a, toDisplayString as I, Fragment as g, renderList as v, renderSlot as $ } from "vue";
-import { _ as K } from "./Shape-CSyWYgXc.js";
-import O from "./BaseIcon-CNx8Tzl5.js";
+import { _ as K } from "./Shape-BKRUOeKk.js";
+import O from "./BaseIcon-Cb3zzG6s.js";
 import { _ as P } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const T = { class: "vue-ui-data-table" }, j = { style: { display: "flex", "align-items": "center", "justify-content": "flex-end", "padding-right": "3px", gap: "3px" } }, F = { style: { width: "12px", height: "12px" } }, L = {
   key: 0,

package/dist/Legend-CS7Xo5LK.js

@@ -0,0 +1,101 @@
+import { openBlock as r, createElementBlock as l, normalizeStyle as f, renderSlot as d, Fragment as h, renderList as y, normalizeClass as p, createVNode as b, mergeProps as v, unref as x, createCommentVNode as S } from "vue";
+import { a9 as $ } from "./lib-DBptbyyI.js";
+import { _ as B } from "./Shape-BKRUOeKk.js";
+import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const w = ["id"], z = ["role", "tabindex", "onKeydown", "onFocus"], F = ["onClick", "viewBox"], M = {
+  __name: "Legend",
+  props: {
+    legendSet: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    id: {
+      type: String,
+      default: ""
+    },
+    clickable: {
+      type: Boolean,
+      default: !0
+    },
+    isCursorPointer: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["clickMarker", "focusMarker"],
+  setup(t, { emit: m }) {
+    const c = t, u = m;
+    function s(n, o) {
+      c.clickable && u("clickMarker", { legend: n, i: o });
+    }
+    function k(n, o, e) {
+      c.clickable && (n.key === "Enter" || n.key === " ") && (n.preventDefault(), s(o, e));
+    }
+    function g(n, o, e) {
+      n.preventDefault(), u("focusMarker", { legend: o, i: e });
+    }
+    return (n, o) => (r(), l("div", {
+      id: t.id,
+      class: "vue-data-ui-legend",
+      style: f({
+        background: t.config.backgroundColor,
+        color: t.config.color,
+        paddingBottom: (t.config.paddingBottom ?? 0) + "px",
+        paddingTop: (t.config.paddingTop ?? 12) + "px",
+        fontWeight: t.config.fontWeight,
+        fontSize: `var(--legend-font-size, ${t.config.fontSize ?? 14}px)`
+      })
+    }, [
+      d(n.$slots, "legendTitle", { titleSet: t.legendSet }, void 0, !0),
+      d(n.$slots, "legendToggle", {}, void 0, !0),
+      (r(!0), l(h, null, y(t.legendSet, (e, i) => (r(), l("div", {
+        key: `legend_${i}`,
+        class: p({ "vue-data-ui-legend-item": !0, active: t.clickable && t.isCursorPointer }),
+        role: t.clickable ? "button" : void 0,
+        tabindex: t.clickable ? 0 : void 0,
+        onKeydown: (a) => k(a, e, i),
+        onFocus: (a) => g(a, e, i)
+      }, [
+        e.shape ? (r(), l("svg", {
+          key: 0,
+          onClick: (a) => s(e, i),
+          height: "1em",
+          width: "1em",
+          viewBox: e.shape && e.shape === "star" ? "-10 -10 80 80" : "0 0 60 60",
+          style: f(`overflow: visible; opacity:${e.opacity}`),
+          "aria-hidden": "true"
+        }, [
+          b(B, {
+            stroke: "none",
+            shape: e.shape,
+            radius: 30,
+            plot: {
+              x: 30,
+              y: e.shape === "triangle" ? 36 : 30
+            },
+            fill: e.color
+          }, null, 8, ["shape", "plot", "fill"]),
+          d(n.$slots, "legend-pattern", v({ ref_for: !0 }, {
+            legend: e,
+            index: x($)(e.absoluteIndex) ? e.absoluteIndex : i
+          }), void 0, !0)
+        ], 12, F)) : S("", !0),
+        d(n.$slots, "item", {
+          legend: e,
+          index: i
+        }, void 0, !0)
+      ], 42, z))), 128))
+    ], 12, w));
+  }
+}, L = /* @__PURE__ */ C(M, [["__scopeId", "data-v-d9726364"]]);
+export {
+  L as default
+};

package/dist/{NonSvgPenAndPaper-CGk_xThe.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-GwPnJSrY.js";
-import q from "./BaseIcon-CNx8Tzl5.js";
-import { C as Ue } from "./ColorPicker-j0ySewhI.js";
+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-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-DN9d0ME5.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.15.12", 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));