vue-data-ui 2.12.6 → 2.12.7-beta.1

package/dist/{Arrow-Bd9ZVBnX.js → Arrow-C5-RFd0F.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-BFzQMJda.js";
+import { c as n } from "./index-BHEd2dgu.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-CKbomZCX.js

@@ -0,0 +1,180 @@
+import { useCssVars as O, ref as L, reactive as T, computed as $, onUnmounted as R, createBlock as N, openBlock as v, Teleport as V, createElementBlock as E, createCommentVNode as _, withModifiers as s, normalizeStyle as M, createElementVNode as o, unref as I, renderSlot as y, createVNode as j, nextTick as P } from "vue";
+import U from "./BaseIcon-DhWmrDAn.js";
+import { X as q } from "./index-BHEd2dgu.js";
+import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const F = ["xmlns"], G = { class: "modal-title" }, J = { class: "modal-body" }, K = {
+  __name: "BaseDraggableDialog",
+  props: {
+    backgroundColor: { type: String },
+    color: { type: String },
+    headerBg: { type: String },
+    headerColor: { type: String }
+  },
+  emits: ["close"],
+  setup(d, { expose: k, emit: b }) {
+    O((t) => ({
+      b93256ca: d.color
+    }));
+    const D = d, X = b, f = L(!1), g = L(!1), e = T({
+      left: window.innerWidth / 2 - 200,
+      top: window.innerHeight / 2 - 120,
+      width: 400,
+      height: 400,
+      dragging: !1,
+      resizing: !1,
+      dragOffsetX: 0,
+      dragOffsetY: 0,
+      pointerStartX: 0,
+      pointerStartY: 0,
+      resizeStartW: 0,
+      resizeStartH: 0
+    });
+    function C() {
+      f.value = !0, P(() => {
+        g.value || (e.left = Math.max(0, window.innerWidth / 2 - e.width / 2), e.top = Math.max(0, window.innerHeight / 2 - e.height / 2), g.value = !0);
+      });
+    }
+    function w() {
+      f.value = !1, X("close");
+    }
+    k({ open: C, close: w });
+    const B = $(() => ({
+      position: "fixed",
+      left: `${e.left}px`,
+      top: `${e.top}px`,
+      width: `${e.width}px`,
+      height: `${e.height}px`,
+      padding: 0,
+      border: "none",
+      background: D.backgroundColor,
+      boxShadow: "0 4px 24px rgba(0,0,0,0.15)",
+      zIndex: 9999,
+      overflow: "visible",
+      borderRadius: "2px"
+    }));
+    function a(t) {
+      return t.touches && t.touches.length ? { x: t.touches[0].clientX, y: t.touches[0].clientY } : { x: t.clientX, y: t.clientY };
+    }
+    function x(t) {
+      t.preventDefault?.(), e.dragging = !0;
+      const n = a(t);
+      e.dragOffsetX = n.x - e.left, e.dragOffsetY = n.y - e.top, document.addEventListener("mousemove", m), document.addEventListener("mouseup", u), document.addEventListener("touchmove", m, { passive: !1 }), document.addEventListener("touchend", u);
+    }
+    function m(t) {
+      if (!e.dragging) return;
+      t.preventDefault?.();
+      const n = a(t);
+      let i = n.x - e.dragOffsetX, r = n.y - e.dragOffsetY;
+      i = Math.max(0, Math.min(i, window.innerWidth - e.width)), r = Math.max(0, Math.min(r, window.innerHeight - e.height)), e.left = i, e.top = r;
+    }
+    function u() {
+      e.dragging = !1, document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", u), document.removeEventListener("touchmove", m), document.removeEventListener("touchend", u);
+    }
+    function S(t) {
+      t.preventDefault?.(), e.resizing = !0;
+      const n = a(t);
+      e.pointerStartX = n.x, e.pointerStartY = n.y, e.resizeStartW = e.width, e.resizeStartH = e.height, document.addEventListener("mousemove", h), document.addEventListener("mouseup", l), document.addEventListener("touchmove", h, { passive: !1 }), document.addEventListener("touchend", l);
+    }
+    function h(t) {
+      if (!e.resizing) return;
+      t.preventDefault?.();
+      const n = a(t);
+      let i = n.x - e.pointerStartX, r = n.y - e.pointerStartY;
+      e.width = Math.max(240, e.resizeStartW + i), e.height = Math.max(400, e.resizeStartH + r);
+    }
+    function l() {
+      e.resizing = !1, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", l), document.removeEventListener("touchmove", h), document.removeEventListener("touchend", l);
+    }
+    function z(t) {
+      t.preventDefault?.(), e.resizing = !0;
+      const n = a(t);
+      e.pointerStartX = n.x, e.pointerStartY = n.y, e.resizeStartW = e.width, e.resizeStartH = e.height, e.resizeStartLeft = e.left, e.resizeStartTop = e.top, document.addEventListener("mousemove", p), document.addEventListener("mouseup", c), document.addEventListener("touchmove", p, { passive: !1 }), document.addEventListener("touchend", c);
+    }
+    function p(t) {
+      if (!e.resizing) return;
+      t.preventDefault?.();
+      const n = a(t);
+      let i = n.x - e.pointerStartX, r = Math.min(
+        Math.max(0, e.resizeStartLeft + i),
+        e.resizeStartLeft + e.resizeStartW - 240
+        // min width
+      ), W = e.resizeStartW - (r - e.resizeStartLeft), Y = n.y - e.pointerStartY, H = Math.max(400, e.resizeStartH + Y);
+      e.left = r, e.width = W, e.height = H;
+    }
+    function c() {
+      e.resizing = !1, document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", c), document.removeEventListener("touchmove", p), document.removeEventListener("touchend", c);
+    }
+    return R(() => {
+      u(), l(), c();
+    }), (t, n) => (v(), N(V, { to: "body" }, [
+      f.value ? (v(), E("div", {
+        key: 0,
+        class: "modal vue-ui-draggable-dialog",
+        style: M(B.value),
+        onClick: n[0] || (n[0] = s(() => {
+        }, ["stop"]))
+      }, [
+        o("div", {
+          class: "modal-header",
+          style: M({
+            backgroundColor: d.headerBg,
+            color: d.headerColor
+          })
+        }, [
+          o("span", {
+            class: "drag-handle",
+            onMousedown: s(x, ["stop", "prevent"]),
+            onTouchstart: s(x, ["stop", "prevent"])
+          }, [
+            (v(), E("svg", {
+              xmlns: I(q),
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, n[1] || (n[1] = [
+              o("path", { d: "M5 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              o("path", { d: "M5 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              o("path", { d: "M12 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              o("path", { d: "M12 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              o("path", { d: "M19 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+              o("path", { d: "M19 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
+            ]), 8, F))
+          ], 32),
+          o("span", G, [
+            y(t.$slots, "title", {}, void 0, !0)
+          ]),
+          o("button", {
+            class: "close",
+            onClick: w
+          }, [
+            j(U, {
+              name: "close",
+              stroke: d.headerColor
+            }, null, 8, ["stroke"])
+          ])
+        ], 4),
+        o("div", J, [
+          y(t.$slots, "default", {}, void 0, !0)
+        ]),
+        o("div", {
+          class: "resize-handle",
+          onMousedown: s(S, ["stop", "prevent"]),
+          onTouchstart: s(S, ["stop", "prevent"])
+        }, null, 32),
+        o("div", {
+          class: "resize-handle resize-handle-left",
+          onMousedown: s(z, ["stop", "prevent"]),
+          onTouchstart: s(z, ["stop", "prevent"])
+        }, null, 32)
+      ], 4)) : _("", !0)
+    ]));
+  }
+}, ne = /* @__PURE__ */ A(K, [["__scopeId", "data-v-1344ad9f"]]);
+export {
+  ne as default
+};

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

package/dist/{ColorPicker-B_FoQwtO.js → ColorPicker-F4TctKaQ.js}

@@ -1,7 +1,7 @@
 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-CNbwMh_-.js";
-import { G as V } from "./index-BFzQMJda.js";
-import { v as D } from "./usePrinter-C5bLp34h.js";
+import C from "./BaseIcon-DhWmrDAn.js";
+import { G as V } from "./index-BHEd2dgu.js";
+import { v as D } from "./vClickOutside-C6WiFswA.js";
 import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -46%)" } }, L = ["value"], T = {
   __name: "ColorPicker",
@@ -24,36 +24,35 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
     }
   },
   emits: ["update:value"],
-  setup(o, { emit: m }) {
-    const c = o, s = m, g = l(null), y = k(() => ({
+  setup(e, { emit: m }) {
+    const c = e, s = m, g = l(null), y = k(() => ({
       backgroundColor: c.value,
       width: "100%",
       height: "100%",
       cursor: "pointer"
-    })), i = l(null), t = l(!1), b = () => {
-      var e;
-      (e = i.value) == null || e.click();
+    })), i = l(null), o = l(!1), b = () => {
+      i.value?.click();
     };
-    function h(e) {
-      s("update:value", e), t.value = !1;
+    function h(t) {
+      s("update:value", t), o.value = !1;
     }
     function _() {
-      t.value = !1;
+      o.value = !1;
     }
     function d() {
-      t.value && _();
+      o.value && _();
     }
-    const x = (e) => {
-      const v = e.target.value;
+    const x = (t) => {
+      const v = t.target.value;
       s("update:value", v);
     }, p = k(() => V(c.value));
     async function w() {
-      t.value = !t.value;
+      o.value = !o.value;
     }
     I(
       () => c.value,
-      (e) => {
-        i.value.value = e;
+      (t) => {
+        i.value.value = t;
       }
     );
     const B = l([
@@ -67,7 +66,7 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
       "#FF1493",
       "#00CED1"
     ]);
-    return (e, v) => P((n(), r("div", {
+    return (t, v) => P((n(), r("div", {
       onKeydown: S(d, ["esc"]),
       style: { height: "100%", width: "100%", position: "relative" }
     }, [
@@ -82,14 +81,14 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
           size: 22
         }, null, 8, ["stroke"])
       ], 4),
-      t.value ? (n(), r("div", {
+      o.value ? (n(), r("div", {
         key: 0,
         ref_key: "picker",
         ref: g,
         tabindex: "0",
         class: "vue-ui-color-picker",
         style: a({
-          backgroundColor: o.backgroundColor
+          backgroundColor: e.backgroundColor
         })
       }, [
         (n(!0), r(E, null, N(B.value, (f) => (n(), r("button", {
@@ -97,7 +96,7 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
           class: "vue-ui-color-picker-option",
           style: a({
             backgroundColor: f,
-            outline: `1px solid ${o.buttonBorderColor}`
+            outline: `1px solid ${e.buttonBorderColor}`
           }),
           onClick: () => h(f)
         }, null, 12, $))), 256)),
@@ -105,8 +104,8 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
           class: "vue-ui-color-picker-option",
           onClick: b,
           style: a({
-            backgroundColor: o.value,
-            outline: `1px solid ${o.buttonBorderColor}`
+            backgroundColor: e.value,
+            outline: `1px solid ${e.buttonBorderColor}`
           })
         }, [
           u("div", G, [
@@ -120,7 +119,7 @@ const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "5
             ref_key: "colorInput",
             ref: i,
             type: "color",
-            value: o.value,
+            value: e.value,
             class: "hidden-input",
             onInput: x
           }, null, 40, L)

package/dist/{DataTable-Rajdtaf6.js → DataTable-Y5HbiUZU.js}

@@ -1,6 +1,6 @@
-import { useCssVars as V, unref as e, computed as A, 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 m, renderList as f, renderSlot as N, createCommentVNode as $ } from "vue";
-import { _ as K } from "./Shape-C69a0f29.js";
-import O from "./BaseIcon-CNbwMh_-.js";
+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 K from "./Shape-B6kIkp2s.js";
+import O from "./BaseIcon-DhWmrDAn.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,
@@ -33,14 +33,14 @@ const j = { class: "vue-ui-data-table" }, F = { style: { display: "flex", "align
   },
   emits: ["close"],
   setup(o, { emit: B }) {
-    V((s) => ({
+    A((s) => ({
       "2908e47d": e(v)
     }));
-    const b = o, { backgroundColor: h, color: p, outline: g } = b.config.th, { backgroundColor: z, color: D, outline: v } = b.config.td, S = A(() => b.config.breakpoint), y = w(null), _ = w(!1);
+    const b = o, { backgroundColor: h, color: p, outline: g } = b.config.th, { backgroundColor: z, color: S, outline: v } = b.config.td, V = D(() => b.config.breakpoint), y = w(null), _ = w(!1);
     E(() => {
       const s = new ResizeObserver((r) => {
         r.forEach((l) => {
-          _.value = l.contentRect.width < S.value;
+          _.value = l.contentRect.width < V.value;
         });
       });
       y.value && s.observe(y.value);
@@ -77,7 +77,7 @@ const j = { class: "vue-ui-data-table" }, F = { style: { display: "flex", "align
             style: i([{ "font-variant-numeric": "tabular-nums" }, { backgroundColor: e(h), color: e(p) }]),
             class: "vue-ui-data-table__thead-row"
           }, [
-            (a(!0), n(m, null, f(o.head, (l, c) => (a(), n("th", {
+            (a(!0), n(f, null, m(o.head, (l, c) => (a(), n("th", {
               role: "cell",
               style: i({ outline: e(g) }),
               key: `th_${c}`
@@ -99,12 +99,12 @@ const j = { class: "vue-ui-data-table" }, F = { style: { display: "flex", "align
           ], 4)
         ]),
         t("tbody", null, [
-          (a(!0), n(m, null, f(o.body, (l, c) => (a(), n("tr", {
+          (a(!0), n(f, null, m(o.body, (l, c) => (a(), n("tr", {
             role: "row",
-            style: i([{ "font-variant-numeric": "tabular-nums" }, { backgroundColor: e(z), color: e(D) }]),
+            style: i([{ "font-variant-numeric": "tabular-nums" }, { backgroundColor: e(z), color: e(S) }]),
             class: k({ "vue-ui-data-table__tbody__row": !0, "vue-ui-data-table__tbody__row-even": c % 2 === 0, "vue-ui-data-table__tbody__row-odd": c % 2 !== 0 })
           }, [
-            (a(!0), n(m, null, f(l, (d, u) => (a(), n("td", {
+            (a(!0), n(f, null, m(l, (d, u) => (a(), n("td", {
               role: "cell",
               "data-cell": (o.colNames[u] && o.colNames[u].name ? o.colNames[u].name : "") || o.colNames[u] || "",
               style: i({ outline: e(v) }),
@@ -129,5 +129,5 @@ const j = { class: "vue-ui-data-table" }, F = { style: { display: "flex", "align
   }
 }, Y = /* @__PURE__ */ T(P, [["__scopeId", "data-v-4afbd65f"]]);
 export {
-  Y as D
+  Y as default
 };

package/dist/{Legend-BxtDQCIv.js → Legend-DtTYopxf.js}

@@ -1,6 +1,6 @@
-import { createElementBlock as n, openBlock as o, normalizeStyle as d, renderSlot as l, Fragment as u, renderList as g, normalizeClass as m, createCommentVNode as h, createVNode as k, mergeProps as $, unref as y } from "vue";
-import { $ as p } from "./index-BFzQMJda.js";
-import { _ as v } from "./Shape-C69a0f29.js";
+import { createElementBlock as n, openBlock as o, normalizeStyle as d, renderSlot as l, Fragment as s, renderList as g, normalizeClass as m, createCommentVNode as h, createVNode as k, mergeProps as $, unref as y } from "vue";
+import { $ as p } from "./index-BHEd2dgu.js";
+import v from "./Shape-B6kIkp2s.js";
 import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const S = ["id"], x = ["onClick", "height", "width"], z = {
   __name: "Legend",
@@ -29,7 +29,7 @@ const S = ["id"], x = ["onClick", "height", "width"], z = {
   emits: ["clickMarker"],
   setup(e, { emit: c }) {
     const f = c;
-    function s(i, r) {
+    function u(i, r) {
       f("clickMarker", { legend: i, i: r });
     }
     return (i, r) => (o(), n("div", {
@@ -38,12 +38,12 @@ const S = ["id"], x = ["onClick", "height", "width"], z = {
       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", {
+      (o(!0), n(s, null, g(e.legendSet, (t, a) => (o(), n("div", {
         class: m({ "vue-data-ui-legend-item": !0, active: e.clickable })
       }, [
         t.shape ? (o(), n("svg", {
           key: 0,
-          onClick: (C) => s(t, a),
+          onClick: (C) => u(t, a),
           height: e.config.fontSize,
           width: e.config.fontSize,
           viewBox: "0 0 60 60",
@@ -65,7 +65,7 @@ const S = ["id"], x = ["onClick", "height", "width"], z = {
       ], 2))), 256))
     ], 12, S));
   }
-}, I = /* @__PURE__ */ b(z, [["__scopeId", "data-v-f1db6c9f"]]);
+}, L = /* @__PURE__ */ b(z, [["__scopeId", "data-v-f1db6c9f"]]);
 export {
-  I as L
+  L as default
 };