vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
416 lines (415 loc) • 12.5 kB
JavaScript
import { computed as U, ref as c, watch as j, withDirectives as G, openBlock as f, createElementBlock as k, createElementVNode as y, unref as l, normalizeStyle as F, createVNode as X, Fragment as E, renderList as J, createCommentVNode as W, onMounted as le, nextTick as re, onBeforeUnmount as se, normalizeClass as L, isRef as A, vModelText as ae, withModifiers as H } from "vue";
import { G as ue, l as ie, X as ce } from "./index-WrV3SAID.js";
import N from "./BaseIcon-MqKW8Nkx.js";
import { v as de } from "./usePrinter-kVpf1iV8.js";
import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const pe = { style: { height: "100%", width: "100%", position: "relative" } }, ve = { class: "icon" }, fe = ["onClick"], ke = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -46%)" } }, he = ["value"], ge = {
__name: "ColorPicker",
props: {
value: {
type: String,
default: "#ffffff"
},
size: {
type: String,
default: "50px"
},
backgroundColor: {
type: String,
default: "#FFFFFF"
},
buttonBorderColor: {
type: String,
default: "#FFFFFF"
}
},
emits: ["update:value"],
setup(s, { emit: O }) {
const h = s, T = O, g = U(() => ({
backgroundColor: h.value,
width: "100%",
height: "100%",
cursor: "pointer"
})), $ = c(null), b = c(!1), w = () => {
var i;
(i = $.value) == null || i.click();
};
function B(i) {
T("update:value", i), b.value = !1;
}
function P() {
b.value = !1;
}
function R() {
b.value && P();
}
const z = (i) => {
const S = i.target.value;
T("update:value", S);
}, x = U(() => ue(h.value));
j(
() => h.value,
(i) => {
$.value.value = i;
}
);
const M = c([
"#000000",
"#FFFFFF",
"#FF5733",
"#33FF57",
"#3357FF",
"#FFC300",
"#800080",
"#FF1493",
"#00CED1"
]);
return (i, S) => G((f(), k("div", pe, [
y("div", {
onClick: S[0] || (S[0] = (D) => b.value = !l(b)),
style: F(l(g))
}, [
y("div", ve, [
X(N, {
name: "palette",
stroke: l(x),
size: 22
}, null, 8, ["stroke"])
])
], 4),
l(b) ? (f(), k("div", {
key: 0,
class: "vue-ui-color-picker",
style: F({
backgroundColor: s.backgroundColor
})
}, [
(f(!0), k(E, null, J(l(M), (D) => (f(), k("div", {
class: "vue-ui-color-picker-option",
style: F({
backgroundColor: D,
outline: `1px solid ${s.buttonBorderColor}`
}),
onClick: () => B(D)
}, null, 12, fe))), 256)),
y("div", {
class: "vue-ui-color-picker-option",
onClick: w,
style: F({
backgroundColor: s.value,
outline: `1px solid ${s.buttonBorderColor}`
})
}, [
y("div", ke, [
X(N, {
name: "colorPicker",
stroke: l(x),
size: 22
}, null, 8, ["stroke"])
]),
y("input", {
ref_key: "colorInput",
ref: $,
type: "color",
value: s.value,
class: "hidden-input",
onInput: z
}, null, 40, he)
], 4)
], 4)) : W("", !0)
])), [
[l(de), R]
]);
}
}, me = /* @__PURE__ */ K(ge, [["__scopeId", "data-v-4a91affd"]]), Ce = {
class: /* @__PURE__ */ L({
"vue-ui-pen-and-paper-action": !0
}),
style: { padding: "0 !important" }
}, ye = ["disabled"], $e = ["xmlns", "viewBox"], be = ["cx", "cy", "r", "fill"], Fe = ["d", "stroke", "stroke-width"], xe = ["d", "stroke", "stroke-width"], we = {
__name: "PenAndPaper",
props: {
parent: {
type: HTMLElement
},
backgroundColor: {
type: String,
default: "#FFFFFF"
},
color: {
type: String,
default: "#2D353C"
},
active: {
type: Boolean,
default: !1
}
},
emits: ["close"],
setup(s, { emit: O }) {
const h = s, T = O, g = c([]), $ = c([]), b = c("0 0 0 0"), w = c(h.color), B = c(1), P = U(() => ie(h.color, 0.6));
function R({ width: o, height: t }) {
b.value = `0 0 ${o} ${t}`;
}
const z = c(null);
le(() => {
re(() => {
if (h.parent) {
z.value = new ResizeObserver((e) => {
for (const n of e) {
const { width: r, height: a } = n.contentRect;
R({ width: r, height: a });
}
}), z.value.observe(h.parent);
const { width: o, height: t } = h.parent.getBoundingClientRect();
R({ width: o, height: t });
}
});
}), se(() => {
z.value && z.value.disconnect();
}), j(
() => h.parent,
(o) => {
if (!o) return;
const { width: t, height: e } = h.parent.getBoundingClientRect();
R({ width: t, height: e });
},
{ immediate: !0 }
);
const x = c(!1), M = c(""), i = c(null);
function S(o) {
if (!i.value) return;
x.value = !0;
const { x: t, y: e } = q(o);
M.value = `M ${t} ${e}`;
}
function D(o) {
if (!x.value || !i.value) return;
const { x: t, y: e } = q(o);
M.value += ` ${t} ${e}`;
}
function Q(o) {
const t = o.trim().split(/\s+/);
if (t.length < 4)
return o;
const e = t.slice(1).map(Number);
if (e.length % 2 !== 0)
return o;
const n = Z(e), r = [`M ${n[0]} ${n[1]}`];
for (let d = 2; d < n.length - 2; d += 2) {
const m = n[d - 2], C = n[d - 1], p = n[d], v = n[d + 1], Y = (m + p) / 2, I = (C + v) / 2;
r.push(`Q ${m} ${C} ${Y} ${I}`);
}
const a = n[n.length - 2], u = n[n.length - 1];
return r.push(`L ${a} ${u}`), r.join(" ");
}
function Z(o, t = 1) {
const e = [...o];
for (let n = 2; n < o.length - 2; n += 2) {
const r = o[n], a = o[n + 1], u = o[n - 2], d = o[n - 1], m = o[n + 2], C = o[n + 3];
e[n] = r + t * ((u + m) / 2 - r), e[n + 1] = a + t * ((d + C) / 2 - a);
}
return e;
}
function _(o) {
const t = o.trim().split(/\s+/);
let e = "", n = "", r = null, a = null;
for (let u = 0; u < t.length; u += 1) {
const d = t[u];
if (isNaN(d)) {
if (n = d, n === "M" || n === "L")
r = parseFloat(t[++u]), a = parseFloat(t[++u]), e += `${n}${r} ${a}`;
else if (n === "Q") {
const m = parseFloat(t[++u]), C = parseFloat(t[++u]), p = parseFloat(t[++u]), v = parseFloat(t[++u]);
m === r && C === a ? e += `t${p - r} ${v - a}` : e += `q${m - r} ${C - a} ${p - r} ${v - a}`, r = p, a = v;
}
} else {
const m = parseFloat(d), C = parseFloat(t[++u]);
if (n === "L") {
const p = m - r, v = C - a;
p === 0 ? e += `v${v}` : v === 0 ? e += `h${p}` : e += `l${p} ${v}`, r = m, a = C;
} else if (n === "Q") {
const p = m, v = C, Y = parseFloat(t[++u]), I = parseFloat(t[++u]);
p === r && v === a ? e += `t${Y - r} ${I - a}` : e += `q${p - r} ${v - a} ${Y - r} ${I - a}`, r = Y, a = I;
}
}
}
return e;
}
function V() {
x.value && (g.value.push({
strokeWidth: B.value,
path: _(Q(M.value)),
color: w.value
}), $.value = [], M.value = ""), x.value = !1;
}
function q(o) {
if (!i.value) return { x: 0, y: 0 };
const t = i.value.getBoundingClientRect();
let e, n;
return o.touches && o.touches.length ? (e = o.touches[0].clientX, n = o.touches[0].clientY) : (e = o.clientX, n = o.clientY), {
x: e - t.left,
y: n - t.top
};
}
c(!1);
function ee() {
if (g.value.length > 0) {
const o = g.value.pop();
$.value.push(o);
}
}
function te() {
if ($.value.length > 0) {
const o = $.value.pop();
g.value.push(o);
}
}
function oe() {
g.value = [], $.value = [];
}
const ne = c(null);
return (o, t) => (f(), k(E, null, [
s.active ? (f(), k("div", {
key: 0,
"data-html2canvas-ignore": "",
class: L({
"vue-ui-pen-and-paper-actions": !0,
visible: s.active
})
}, [
y("button", {
class: "vue-ui-pen-and-paper-action",
style: F({
backgroundColor: s.backgroundColor,
border: `1px solid ${l(P)}`
}),
onClick: t[0] || (t[0] = (e) => T("close"))
}, [
X(N, {
name: "close",
stroke: s.color
}, null, 8, ["stroke"])
], 4),
y("button", Ce, [
X(me, {
value: l(w),
"onUpdate:value": t[1] || (t[1] = (e) => A(w) ? w.value = e : null),
backgroundColor: s.backgroundColor,
buttonBorderColor: l(P)
}, null, 8, ["value", "backgroundColor", "buttonBorderColor"])
]),
y("button", {
class: L({
"vue-ui-pen-and-paper-action": !0,
"vue-ui-pen-and-paper-action-disabled": !l(g).length
}),
disabled: !l(g).length,
style: F({
backgroundColor: s.backgroundColor,
border: `1px solid ${l(P)}`
}),
onClick: ee
}, [
X(N, {
name: "restart",
stroke: s.color
}, null, 8, ["stroke"])
], 14, ye),
y("button", {
class: L({
"vue-ui-pen-and-paper-action": !0,
"vue-ui-pen-and-paper-action-disabled": !l($).length
}),
style: F({
backgroundColor: s.backgroundColor,
border: `1px solid ${l(P)}`
}),
onClick: te
}, [
X(N, {
name: "restart",
stroke: s.color,
style: { transform: "scaleX(-1)" }
}, null, 8, ["stroke"])
], 6),
y("button", {
class: L([{
"vue-ui-pen-and-paper-action": !0,
"vue-ui-pen-and-paper-action-disabled": !l(g).length
}, "vue-ui-pen-and-paper-action"]),
style: F({
backgroundColor: s.backgroundColor,
border: `1px solid ${l(P)}`
}),
onClick: oe
}, [
X(N, {
name: "trash",
stroke: s.color
}, null, 8, ["stroke"])
], 6),
G(y("input", {
ref_key: "range",
ref: ne,
type: "range",
class: "vertical-range",
min: 0.5,
max: 12,
step: 0.1,
"onUpdate:modelValue": t[2] || (t[2] = (e) => A(B) ? B.value = e : null),
style: F({
accentColor: s.color
})
}, null, 4), [
[ae, l(B)]
])
], 2)) : W("", !0),
(f(), k("svg", {
ref_key: "svgElement",
ref: i,
xmlns: l(ce),
viewBox: l(b),
class: L({
"vue-ui-pen-and-paper": !0,
inactive: !s.active
}),
onMousedown: S,
onMousemove: D,
onMouseup: V,
onMouseleave: V,
onTouchstart: H(S, ["prevent"]),
onTouchmove: H(D, ["prevent"]),
onTouchend: V
}, [
(f(!0), k(E, null, J(l(g), (e) => (f(), k(E, { key: e }, [
e.path.replace("M", "").split(" ").length === 2 ? (f(), k("circle", {
key: 0,
cx: e.path.replace("M", "").split(" ")[0],
cy: e.path.replace("M", "").split(" ")[1],
r: e.strokeWidth / 2,
fill: e.color
}, null, 8, be)) : (f(), k("path", {
key: 1,
class: "vue-ui-pen-and-paper-path",
d: e.path,
stroke: e.color,
"stroke-width": e.strokeWidth,
fill: "none"
}, null, 8, Fe))
], 64))), 128)),
l(x) ? (f(), k("path", {
key: 0,
class: "vue-ui-pen-and-paper-path vue-ui-pen-and-paper-path-drawing",
d: Q(l(M)),
stroke: l(w),
"stroke-width": l(B) * 1.1,
fill: "none"
}, null, 8, xe)) : W("", !0)
], 42, $e))
], 64));
}
}, ze = /* @__PURE__ */ K(we, [["__scopeId", "data-v-aa57055a"]]);
export {
ze as P
};