vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
236 lines (235 loc) • 9.73 kB
JavaScript
import { ref as l, reactive as U, computed as q, onMounted as A, onUnmounted as G, createBlock as J, openBlock as S, Teleport as Q, createElementBlock as Y, createCommentVNode as Z, withModifiers as d, normalizeStyle as $, createElementVNode as o, unref as _, renderSlot as x, createVNode as ee, normalizeClass as te, nextTick as ne } from "vue";
import oe from "./BaseIcon-CbVDYv89.js";
import { c as ie, X as re } from "./lib-2iaAPQ_c.js";
import { _ as ae } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const de = ["xmlns"], se = { class: "draggable-dialog-actions" }, le = {
__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 },
forcedWidth: { type: Number, default: 400 }
},
emits: ["close"],
setup(a, { expose: O, emit: F }) {
const y = a, I = F, w = l(!1), z = l(!1), k = l(0), m = l(null), M = l(null), g = l(null), D = `vue-ui-draggable-dialog-${ie()}`, B = `${D}-title`, T = `${D}-body`;
function E() {
k.value += 1;
}
const e = U({
left: window.innerWidth / 2 - 200,
top: window.innerHeight / 2 - 120,
width: y.forcedWidth,
height: 400,
dragging: !1,
resizing: !1,
dragOffsetX: 0,
dragOffsetY: 0,
pointerStartX: 0,
pointerStartY: 0,
resizeStartW: 0,
resizeStartH: 0
});
function P() {
g.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, w.value = !0, ne(() => {
z.value || (e.left = Math.max(0, window.innerWidth / 2 - e.width / 2), e.top = Math.max(0, window.innerHeight / 2 - e.height / 2), z.value = !0);
const t = M.value || m.value;
t && typeof t.focus == "function" && t.focus();
});
}
function L() {
w.value = !1, I("close"), g.value && typeof g.value.focus == "function" && g.value.focus();
}
O({ open: P, close: L });
const N = q(() => ({
position: "fixed",
left: `${e.left}px`,
top: `${e.top}px`,
width: `${e.width}px`,
height: `${e.height}px`,
padding: 0,
border: "none",
background: y.backgroundColor,
boxShadow: "0 4px 24px rgba(0,0,0,0.15)",
zIndex: 9999,
overflow: "visible",
borderRadius: "2px",
"--dlg-color": y.color
}));
function s(t) {
return t.touches && t.touches.length ? { x: t.touches[0].clientX, y: t.touches[0].clientY } : { x: t.clientX, y: t.clientY };
}
function C(t) {
t.preventDefault?.(), E(), e.dragging = !0;
const n = s(t);
e.dragOffsetX = n.x - e.left, e.dragOffsetY = n.y - e.top, document.addEventListener("mousemove", v), document.addEventListener("mouseup", u), document.addEventListener("touchmove", v, { passive: !1 }), document.addEventListener("touchend", u);
}
function v(t) {
if (!e.dragging) return;
t.preventDefault?.();
const n = s(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", v), document.removeEventListener("mouseup", u), document.removeEventListener("touchmove", v), document.removeEventListener("touchend", u);
}
function W(t) {
t.preventDefault?.(), E(), e.resizing = !0;
const n = s(t);
e.pointerStartX = n.x, e.pointerStartY = n.y, e.resizeStartW = e.width, e.resizeStartH = e.height, document.addEventListener("mousemove", h), document.addEventListener("mouseup", c), document.addEventListener("touchmove", h, { passive: !1 }), document.addEventListener("touchend", c);
}
function h(t) {
if (!e.resizing) return;
t.preventDefault?.();
const n = s(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 c() {
e.resizing = !1, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", c), document.removeEventListener("touchmove", h), document.removeEventListener("touchend", c);
}
function X(t) {
t.preventDefault?.(), E(), e.resizing = !0;
const n = s(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", f), document.addEventListener("touchmove", p, { passive: !1 }), document.addEventListener("touchend", f);
}
function p(t) {
if (!e.resizing) return;
t.preventDefault?.();
const n = s(t);
let i = n.x - e.pointerStartX, r = Math.min(
Math.max(0, e.resizeStartLeft + i),
e.resizeStartLeft + e.resizeStartW - 240
), b = e.resizeStartW - (r - e.resizeStartLeft), V = n.y - e.pointerStartY, j = Math.max(400, e.resizeStartH + V);
e.left = r, e.width = b, e.height = j;
}
function f() {
e.resizing = !1, document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", f), document.removeEventListener("touchmove", p), document.removeEventListener("touchend", f);
}
A(() => {
document.addEventListener("keydown", H);
});
function H(t) {
t.key && t.key === "Escape" && L();
}
G(() => {
u(), c(), f(), document.removeEventListener("keydown", H);
});
function R(t) {
t.key === "Tab" && K(t);
}
function K(t) {
if (!m.value) return;
const i = m.value.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]');
if (!i.length) return;
const r = i[0], b = i[i.length - 1];
t.shiftKey ? document.activeElement === r && (t.preventDefault(), b.focus()) : document.activeElement === b && (t.preventDefault(), r.focus());
}
return (t, n) => (S(), J(Q, {
to: a.isFullscreen ? a.fullscreenParent : "body",
key: k.value
}, [
w.value ? (S(), Y("div", {
key: 0,
ref_key: "draggableDialog",
ref: m,
class: "vue-ui-draggable-dialog",
style: $(N.value),
role: "dialog",
"aria-modal": !0,
"aria-labelledby": B,
"aria-describedby": T,
tabindex: "-1",
onClick: n[0] || (n[0] = d(() => {
}, ["stop"])),
onKeydown: R
}, [
o("div", {
class: "vue-ui-draggable-dialog-header",
style: $({
backgroundColor: a.headerBg,
color: a.headerColor
})
}, [
o("span", {
class: "drag-handle",
"aria-hidden": "true",
onMousedown: d(C, ["stop", "prevent"]),
onTouchstart: d(C, ["stop", "prevent"])
}, [
(S(), Y("svg", {
xmlns: _(re),
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, de))
], 32),
o("span", {
class: "vue-ui-draggable-dialog-title",
id: B
}, [
x(t.$slots, "title", {}, void 0, !0)
]),
o("div", se, [
x(t.$slots, "actions", {}, void 0, !0),
o("button", {
ref_key: "closeButtonElement",
ref: M,
class: "close",
type: "button",
"aria-label": "Close dialog",
onClick: L
}, [
ee(oe, {
name: "close",
stroke: a.headerColor
}, null, 8, ["stroke"])
], 512)
])
], 4),
o("div", {
id: T,
role: "document",
class: te({
"vue-ui-draggable-dialog-body": !a.withPadding,
"vue-ui-draggable-dialog-body-pad": a.withPadding
})
}, [
x(t.$slots, "content", {}, void 0, !0)
], 2),
o("div", {
class: "resize-handle",
"aria-hidden": "true",
onMousedown: d(W, ["stop", "prevent"]),
onTouchstart: d(W, ["stop", "prevent"])
}, null, 32),
o("div", {
class: "resize-handle resize-handle-left",
"aria-hidden": "true",
onMousedown: d(X, ["stop", "prevent"]),
onTouchstart: d(X, ["stop", "prevent"])
}, null, 32)
], 36)) : Z("", !0)
], 8, ["to"]));
}
}, ge = /* @__PURE__ */ ae(le, [["__scopeId", "data-v-38c3387c"]]);
export {
ge as default
};