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