vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
249 lines (248 loc) • 11.3 kB
JavaScript
import { useCssVars as et, unref as u, computed as M, ref as i, watch as ot, openBlock as y, createElementBlock as m, createElementVNode as b, normalizeStyle as x, createStaticVNode as at, createCommentVNode as P, Fragment as S, renderList as nt, normalizeClass as ut, renderSlot as lt } from "vue";
import st from "./pdf-CDVxhECX.js";
import { u as it } from "./useNestedProp-Cj0kHD7k.js";
import { u as rt } from "./index-WrV3SAID.js";
import { _ as dt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ct = {
key: 0,
"data-html2canvas-ignore": "",
style: { width: "100%", display: "flex", "justify-content": "end" }
}, ht = ["disabled"], vt = ["stroke"], ft = { key: 1 }, gt = ["id"], pt = ["onMousedown", "onTouchstart"], bt = ["onMousedown", "onTouchstart"], wt = ["onMousedown", "onTouchstart"], yt = ["onMousedown", "onTouchstart"], mt = ["onMousedown", "onTouchstart"], X = 20, Mt = {
__name: "vue-ui-dashboard",
props: {
dataset: Array,
config: Object
},
emits: ["change"],
setup(W, { expose: L, emit: R }) {
et((t) => ({
f9823544: u(q),
"57e70dbc": u(J)
}));
const { vue_ui_dashboard: B } = rt(), Y = W, r = M(() => it({
userConfig: Y.config,
defaultConfig: B
})), I = i(`vue-ui-dashboard-${Math.random()}`), h = i(r.value.locked);
function F() {
h.value = !h.value;
}
const s = i(Y.dataset.map((t, e) => ({
...t,
index: e
}))), v = i(null), l = i(null), f = i({ x: 0, y: 0 }), g = i({ x: 0, y: 0 }), d = i(null), c = i(!1), p = i(null), _ = i(!1), T = i(!1);
function N(t) {
const e = t.target;
e.tagName === "INPUT" && e.type === "range" && (T.value = !0);
}
function H(t) {
const e = t.target;
e.tagName === "INPUT" && e.type === "range" && (T.value = !1);
}
function D() {
_.value = !0, st({
domElement: document.getElementById(`vue-ui-dashboard_${I.value}`),
fileName: "vue-ui-dashboard"
}).finally(() => {
_.value = !1;
});
}
function O(t) {
if (!h.value && (c.value = !0, p.value = t, l.value === null)) {
v.value = t, f.value = { x: event.clientX, y: event.clientY };
const e = s.value[t], a = 100 - e.width, o = 100 - e.height;
e.left < 0 && (e.left = 0), e.top < 0 && (e.top = 0), e.left > a && (e.left = a), e.top > o && (e.top = o), e.left < 0 && (e.left = 0), e.top < 0 && (e.top = 0), e.left + e.width > 100 && (e.left = 100 - e.width), e.top + e.height > 100 && (e.top = 100 - e.height);
}
}
function C(t, e) {
c.value = !0, p.value = t, l.value = { index: t, direction: e };
const a = s.value[t];
g.value = { x: event.clientX, y: event.clientY, initialWidth: a.width, initialHeight: a.height };
}
function E(t, e, a) {
if (l.value.direction.includes("top")) {
const o = t.height - a / d.value.offsetHeight * 100;
o >= X && (t.top += a / d.value.offsetHeight * 100, t.height = o);
}
if (l.value.direction.includes("bottom")) {
const o = t.height + a / d.value.offsetHeight * 100;
o >= X && (t.height = o);
}
if (l.value.direction.includes("left")) {
const o = t.width - e / d.value.offsetWidth * 100;
o >= X && (t.left += e / d.value.offsetWidth * 100, t.width = o);
}
if (l.value.direction.includes("right")) {
const o = t.width + e / d.value.offsetWidth * 100;
o >= X && (t.width = o);
}
}
function U(t) {
if (!(h.value || T.value)) {
if (c.value = !0, v.value !== null) {
const e = s.value[v.value], a = t.clientX - f.value.x, o = t.clientY - f.value.y, n = e.left + a / d.value.offsetWidth * 100, w = e.top + o / d.value.offsetHeight * 100;
n >= 0 && w >= 0 && n + e.width <= 100 && w + e.height <= 100 && (e.left = n, e.top = w), f.value = { x: t.clientX, y: t.clientY };
}
if (l.value !== null) {
const e = s.value[l.value.index], a = t.clientX - g.value.x, o = t.clientY - g.value.y;
E(e, a, o), g.value = { x: t.clientX, y: t.clientY };
}
}
}
const V = R;
ot(
s,
(t) => {
t && !c.value && V("change", s.value);
},
{ deep: !0 }
);
function j() {
v.value = null, l.value = null, c.value = !1, p.value = null, s.value.forEach((t) => {
t.left = Math.round(t.left / 100 * 100), t.top = Math.round(t.top / 100 * 100), t.width = Math.round(t.width / 100 * 100), t.height = Math.round(t.height / 100 * 100);
});
}
function A(t) {
h.value || T.value || (c.value = !0, p.value = t, l.value === null && (v.value = t, f.value = { x: event.touches[0].clientX, y: event.touches[0].clientY }));
}
function $(t, e, a) {
if (c.value = !0, p.value = t, l.value === null) {
l.value = { index: t, direction: e };
const o = s.value[t];
g.value = { x: a.touches[0].clientX, y: a.touches[0].clientY, initialWidth: o.width, initialHeight: o.height };
}
}
function z(t) {
if (c.value = !0, t.preventDefault(), l.value !== null) {
const e = s.value[l.value.index], a = t.touches[0].clientX - g.value.x, o = t.touches[0].clientY - g.value.y;
E(e, a, o), g.value = { x: t.touches[0].clientX, y: t.touches[0].clientY };
}
}
function G(t) {
if (!(h.value || T.value) && (c.value = !0, t.preventDefault(), v.value !== null)) {
const e = s.value[v.value], a = t.touches[0].clientX - f.value.x, o = t.touches[0].clientY - f.value.y, n = e.left + a / d.value.offsetWidth * 100, w = e.top + o / d.value.offsetHeight * 100;
n >= 0 && w >= 0 && n + e.width <= 100 && w + e.height <= 100 && (e.left = n, e.top = w), f.value = { x: t.touches[0].clientX, y: t.touches[0].clientY };
}
}
function k() {
c.value = !1, p.value = null, v.value = null, l.value = null, s.value.forEach((t) => {
t.left = Math.round(t.left / 100 * 100), t.top = Math.round(t.top / 100 * 100), t.width = Math.round(t.width / 100 * 100), t.height = Math.round(t.height / 100 * 100);
});
}
const q = M(() => r.value.style.item.borderColor), J = M(() => r.value.style.resizeHandles.backgroundColor), K = M(() => r.value.style.board.aspectRatio), Q = M(() => r.value.style.board.backgroundColor), Z = M(() => r.value.style.board.border);
function tt() {
return s.value;
}
return L({
generatePdf: D,
getItemsPositions: tt,
toggleLock: F
}), (t, e) => (y(), m("div", {
onMousedown: N,
onMouseup: H,
onTouchstart: N,
onTouchend: H
}, [
u(r).allowPrint ? (y(), m("div", ct, [
b("button", {
class: "vue-ui-dashboard-button",
onClick: D,
disabled: u(_),
style: x([{ "margin-top": "12px" }, `color:${u(r).style.board.color}`])
}, [
u(_) ? (y(), m("svg", {
key: 0,
class: "vue-ui-dashboard-print-icon",
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 24 24",
"stroke-width": "1.5",
stroke: u(r).style.board.color,
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, e[4] || (e[4] = [
at('<path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-c94a91b0></path><path d="M18 16v.01" data-v-c94a91b0></path><path d="M6 16v.01" data-v-c94a91b0></path><path d="M12 5v.01" data-v-c94a91b0></path><path d="M12 12v.01" data-v-c94a91b0></path><path d="M12 1a4 4 0 0 1 2.001 7.464l.001 .072a3.998 3.998 0 0 1 1.987 3.758l.22 .128a3.978 3.978 0 0 1 1.591 -.417l.2 -.005a4 4 0 1 1 -3.994 3.77l-.28 -.16c-.522 .25 -1.108 .39 -1.726 .39c-.619 0 -1.205 -.14 -1.728 -.391l-.279 .16l.007 .231a4 4 0 1 1 -2.212 -3.579l.222 -.129a3.998 3.998 0 0 1 1.988 -3.756l.002 -.071a4 4 0 0 1 -1.995 -3.265l-.005 -.2a4 4 0 0 1 4 -4z" data-v-c94a91b0></path>', 6)
]), 8, vt)) : (y(), m("span", ft, "PDF"))
], 12, ht)
])) : P("", !0),
b("div", {
class: "vue-ui-dashboard-container",
ref_key: "dashboardContainer",
ref: d,
id: `vue-ui-dashboard_${u(I)}`,
style: x(`border:${u(Z)}; sbackground:${u(Q)}; aspect-ratio:${u(K)}`)
}, [
b("div", {
class: "vue-ui-dashboard-grid-container",
ref: "container",
onMousemove: U,
onMouseup: j,
onTouchmove: G,
onTouchend: k,
style: x(`background:${u(r).style.board.backgroundColor}`)
}, [
e[5] || (e[5] = b("div", { class: "vue-ui-dashboard-grid" }, null, -1)),
(y(!0), m(S, null, nt(u(s), (a, o) => (y(), m("div", {
key: a.id,
class: ut({ "vue-ui-dashboard-grid-item": !0, "vue-ui-dashboard-grid-item--locked": u(h) }),
style: x({
width: `${a.width}%`,
height: `${a.height}%`,
left: `${a.left}%`,
top: `${a.top}%`,
cursor: "move",
boxShadow: u(p) === o ? "0 6px 12px -3px rgba(0,0,0,0.3)" : "",
zIndex: u(p) === o ? u(s).length + 1 : a.index,
backgroundColor: u(r).style.item.backgroundColor
}),
onMousedown: (n) => O(o),
onTouchstart: (n) => A(o)
}, [
u(h) ? P("", !0) : (y(), m(S, { key: 0 }, [
b("div", {
class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-top-left",
onMousedown: (n) => C(o, "top-left"),
onTouchstart: (n) => $(o, "top-left", n),
onTouchmove: e[0] || (e[0] = (n) => z(n)),
onTouchend: k
}, null, 40, bt),
b("div", {
class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-top-right",
onMousedown: (n) => C(o, "top-right"),
onTouchstart: (n) => $(o, "top-right", n),
onTouchmove: e[1] || (e[1] = (n) => z(n)),
onTouchend: k
}, null, 40, wt),
b("div", {
class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-left",
onMousedown: (n) => C(o, "bottom-left"),
onTouchstart: (n) => $(o, "bottom-left", n),
onTouchmove: e[2] || (e[2] = (n) => z(n)),
onTouchend: k
}, null, 40, yt),
b("div", {
class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-right",
onMousedown: (n) => C(o, "bottom-right"),
onTouchstart: (n) => $(o, "bottom-right", n),
onTouchmove: e[3] || (e[3] = (n) => z(n)),
onTouchend: k
}, null, 40, mt)
], 64)),
lt(t.$slots, "content", {
item: a,
index: o,
left: a.left,
top: a.top,
height: a.height,
width: a.width
}, void 0, !0)
], 46, pt))), 128))
], 36)
], 12, gt)
], 32));
}
}, zt = /* @__PURE__ */ dt(Mt, [["__scopeId", "data-v-c94a91b0"]]);
export {
zt as default
};