vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
117 lines (116 loc) • 3.32 kB
JavaScript
import { computed as u, createElementBlock as r, openBlock as l, createCommentVNode as a, normalizeStyle as d } from "vue";
import { _ as f, R as p } from "./index-q-LPw2IT.js";
const g = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], S = ["d", "fill", "stroke", "stroke-width"], x = ["points", "fill", "stroke", "stroke-width"], w = {
__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
},
transition: {
type: String
}
},
emits: ["mouseover", "mouseout", "click"],
setup(o, { emit: v }) {
const e = o, i = v;
function y(k) {
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
}
}[k];
}
const s = u(() => y(e.shape)), m = u(() => e.shape !== "star" ? null : f({
plot: { x: e.plot.x, y: e.plot.y },
radius: e.radius * (e.isSelected ? e.zoom : 1)
})), c = u(() => p({
plot: { x: e.plot.x, y: e.plot.y },
radius: e.radius * (e.isSelected ? e.zoom : 1),
sides: s.value.points,
rotation: s.value.rotation
}).path);
return (k, t) => (l(), r("g", null, [
s.value && s.value.points === 1 ? (l(), r("circle", {
key: 0,
class: "vdui-shape-circle",
cx: o.plot.x,
cy: o.plot.y,
r: e.radius * (e.isSelected ? e.zoom : 1),
fill: o.color,
stroke: o.stroke,
"stroke-width": o.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")),
style: d({ transition: o.transition })
}, null, 44, g)) : a("", !0),
s.value && s.value.points >= o.limit ? (l(), r("path", {
key: 1,
class: "vdui-shape-polygon",
d: c.value,
fill: o.color,
stroke: o.stroke,
"stroke-width": o.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")),
style: d({ transition: o.transition })
}, null, 44, S)) : a("", !0),
m.value ? (l(), r("polygon", {
key: 2,
class: "vdui-shape-star",
points: m.value,
fill: o.color,
stroke: o.stroke,
"stroke-width": o.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")),
style: d({ transition: o.transition })
}, null, 44, x)) : a("", !0)
]));
}
};
export {
w as _
};