vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
111 lines (110 loc) • 3.11 kB
JavaScript
import { computed as u, createElementBlock as r, openBlock as l, createCommentVNode as a } from "vue";
import { W as c, P as f } from "./index-CHWA6Lnw.js";
const y = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], g = ["d", "fill", "stroke", "stroke-width"], x = ["points", "fill", "stroke", "stroke-width"], h = {
__name: "Shape",
props: {
color: String,
isSelected: {
type: Boolean,
default: !1
},
limit: {
type: Number,
default: 3
},
plot: Object,
radius: Number,
shape: String,
stroke: String,
strokeWidth: Number,
zoom: {
type: Number,
default: 1.3
}
},
emits: ["mouseover", "mouseout", "click"],
setup(e, { emit: k }) {
const o = e, i = k;
function v(m) {
return {
circle: {
points: 1,
rotation: 0
},
line: {
points: 2,
rotation: 0
},
triangle: {
points: 3,
rotation: 0.52
},
square: {
points: 4,
rotation: 0.783
},
diamond: {
points: 4,
rotation: 0
},
pentagon: {
points: 5,
rotation: 0.95
},
hexagon: {
points: 6,
rotation: 0
}
}[m];
}
const s = u(() => v(o.shape)), d = u(() => o.shape !== "star" ? null : c({
plot: { x: o.plot.x, y: o.plot.y },
radius: o.radius * (o.isSelected ? o.zoom : 1)
})), p = u(() => f({
plot: { x: o.plot.x, y: o.plot.y },
radius: o.radius * (o.isSelected ? o.zoom : 1),
sides: s.value.points,
rotation: s.value.rotation
}).path);
return (m, t) => (l(), r("g", null, [
s.value && s.value.points === 1 ? (l(), r("circle", {
key: 0,
class: "vdui-shape-circle",
cx: e.plot.x,
cy: e.plot.y,
r: o.radius * (o.isSelected ? o.zoom : 1),
fill: e.color,
stroke: e.stroke,
"stroke-width": e.strokeWidth,
onMouseover: t[0] || (t[0] = (n) => i("mouseover")),
onMouseout: t[1] || (t[1] = (n) => i("mouseout")),
onClick: t[2] || (t[2] = (n) => i("click"))
}, null, 40, y)) : a("", !0),
s.value && s.value.points >= e.limit ? (l(), r("path", {
key: 1,
class: "vdui-shape-polygon",
d: p.value,
fill: e.color,
stroke: e.stroke,
"stroke-width": e.strokeWidth,
onMouseover: t[3] || (t[3] = (n) => i("mouseover")),
onMouseout: t[4] || (t[4] = (n) => i("mouseout")),
onClick: t[5] || (t[5] = (n) => i("click"))
}, null, 40, g)) : a("", !0),
d.value ? (l(), r("polygon", {
key: 2,
class: "vdui-shape-star",
points: d.value,
fill: e.color,
stroke: e.stroke,
"stroke-width": e.strokeWidth,
onMouseover: t[6] || (t[6] = (n) => i("mouseover")),
onMouseout: t[7] || (t[7] = (n) => i("mouseout")),
onClick: t[8] || (t[8] = (n) => i("click"))
}, null, 40, x)) : a("", !0)
]));
}
};
export {
h as _
};