vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
185 lines (184 loc) • 7.53 kB
JavaScript
import { useCssVars as O, ref as z, reactive as T, computed as $, onUnmounted as R, createBlock as N, openBlock as v, Teleport as V, createElementBlock as E, createCommentVNode as I, withModifiers as a, normalizeStyle as y, createElementVNode as o, unref as P, renderSlot as M, createVNode as F, nextTick as j } from "vue";
import U from "./BaseIcon-Ba5t14Aj.js";
import { X as q } from "./index-BLtEpj8j.js";
import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const G = ["xmlns"], J = { class: "modal-title" }, K = { class: "modal-body" }, Q = {
__name: "BaseDraggableDialog",
props: {
backgroundColor: { type: String },
color: { type: String },
headerBg: { type: String },
headerColor: { type: String },
fullscreenParent: { type: HTMLElement },
isFullscreen: { type: Boolean, default: !1 }
},
emits: ["close"],
setup(i, { expose: k, emit: b }) {
O((t) => ({
a106cd1e: i.color
}));
const D = i, X = b, p = z(!1), g = z(!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 B() {
p.value = !0, j(() => {
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() {
p.value = !1, X("close");
}
k({ open: B, close: w });
const C = $(() => ({
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 d(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 = d(t);
e.dragOffsetX = n.x - e.left, e.dragOffsetY = n.y - e.top, document.addEventListener("mousemove", m), document.addEventListener("mouseup", l), document.addEventListener("touchmove", m, { passive: !1 }), document.addEventListener("touchend", l);
}
function m(t) {
if (!e.dragging) return;
t.preventDefault?.();
const n = d(t);
let s = n.x - e.dragOffsetX, r = n.y - e.dragOffsetY;
s = Math.max(0, Math.min(s, window.innerWidth - e.width)), r = Math.max(0, Math.min(r, window.innerHeight - e.height)), e.left = s, e.top = r;
}
function l() {
e.dragging = !1, document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", l), document.removeEventListener("touchmove", m), document.removeEventListener("touchend", l);
}
function L(t) {
t.preventDefault?.(), e.resizing = !0;
const n = d(t);
e.pointerStartX = n.x, e.pointerStartY = n.y, e.resizeStartW = e.width, e.resizeStartH = e.height, document.addEventListener("mousemove", h), document.addEventListener("mouseup", u), document.addEventListener("touchmove", h, { passive: !1 }), document.addEventListener("touchend", u);
}
function h(t) {
if (!e.resizing) return;
t.preventDefault?.();
const n = d(t);
let s = n.x - e.pointerStartX, r = n.y - e.pointerStartY;
e.width = Math.max(240, e.resizeStartW + s), e.height = Math.max(400, e.resizeStartH + r);
}
function u() {
e.resizing = !1, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", u), document.removeEventListener("touchmove", h), document.removeEventListener("touchend", u);
}
function S(t) {
t.preventDefault?.(), e.resizing = !0;
const n = d(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", f), document.addEventListener("mouseup", c), document.addEventListener("touchmove", f, { passive: !1 }), document.addEventListener("touchend", c);
}
function f(t) {
if (!e.resizing) return;
t.preventDefault?.();
const n = d(t);
let s = n.x - e.pointerStartX, r = Math.min(
Math.max(0, e.resizeStartLeft + s),
e.resizeStartLeft + e.resizeStartW - 240
// min width
), H = e.resizeStartW - (r - e.resizeStartLeft), W = n.y - e.pointerStartY, Y = Math.max(400, e.resizeStartH + W);
e.left = r, e.width = H, e.height = Y;
}
function c() {
e.resizing = !1, document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", c), document.removeEventListener("touchmove", f), document.removeEventListener("touchend", c);
}
return R(() => {
l(), u(), c();
}), (t, n) => (v(), N(V, {
to: i.isFullscreen ? i.fullscreenParent : "body"
}, [
p.value ? (v(), E("div", {
key: 0,
class: "modal vue-ui-draggable-dialog",
style: y(C.value),
onClick: n[0] || (n[0] = a(() => {
}, ["stop"]))
}, [
o("div", {
class: "modal-header",
style: y({
backgroundColor: i.headerBg,
color: i.headerColor
})
}, [
o("span", {
class: "drag-handle",
onMousedown: a(x, ["stop", "prevent"]),
onTouchstart: a(x, ["stop", "prevent"])
}, [
(v(), E("svg", {
xmlns: P(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, G))
], 32),
o("span", J, [
M(t.$slots, "title", {}, void 0, !0)
]),
o("button", {
class: "close",
onClick: w
}, [
F(U, {
name: "close",
stroke: i.headerColor
}, null, 8, ["stroke"])
])
], 4),
o("div", K, [
M(t.$slots, "default", {}, void 0, !0)
]),
o("div", {
class: "resize-handle",
onMousedown: a(L, ["stop", "prevent"]),
onTouchstart: a(L, ["stop", "prevent"])
}, null, 32),
o("div", {
class: "resize-handle resize-handle-left",
onMousedown: a(S, ["stop", "prevent"]),
onTouchstart: a(S, ["stop", "prevent"])
}, null, 32)
], 4)) : I("", !0)
], 8, ["to"]));
}
}, ne = /* @__PURE__ */ A(Q, [["__scopeId", "data-v-d7582789"]]);
export {
ne as default
};