vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
102 lines (101 loc) • 2.73 kB
JavaScript
import { computed as u, createElementBlock as k, openBlock as m, createElementVNode as t, unref as o } from "vue";
import { c as n } from "./index-BsIlHNy8.js";
const s = { class: "vue-ui-element-arrow" }, f = ["id", "viewBox", "refX", "refY", "markerWidth", "markerHeight"], c = ["d", "fill"], h = ["id", "viewBox", "refX", "refY", "markerWidth", "markerHeight"], y = ["d", "fill"], v = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap", "stroke-dasharray", "marker-end", "marker-start"], z = {
__name: "Arrow",
props: {
markerEnd: {
type: Boolean,
default: !0
},
markerSize: {
type: Number,
default: 10
},
markerStart: {
type: Boolean,
default: !1
},
stroke: {
type: String,
default: "#2D353C"
},
strokeDasharray: {
type: Number,
default: 0
},
strokeLinecap: {
type: String,
default: "round"
},
strokeWidth: {
type: Number,
default: 1
},
x1: {
type: Number,
default: 0
},
x2: {
type: Number,
default: 0
},
y1: {
type: Number,
default: 0
},
y2: {
type: Number,
default: 0
}
},
setup(e) {
const a = e, i = n(), d = u(() => `0 0 ${a.markerSize} ${a.markerSize}`), r = u(() => a.markerSize / 2), l = u(() => r.value + a.markerSize / 10);
return (x, S) => (m(), k("g", s, [
t("defs", null, [
t("marker", {
id: `arrow_end_${o(i)}`,
orient: "auto",
viewBox: d.value,
refX: r.value,
refY: r.value,
markerWidth: l.value,
markerHeight: l.value
}, [
t("path", {
d: `M 0 0 L ${e.markerSize} ${r.value} L 0 ${e.markerSize} z`,
fill: e.stroke
}, null, 8, c)
], 8, f),
t("marker", {
id: `arrow_start_${o(i)}`,
orient: "auto-start-reverse",
viewBox: d.value,
refX: r.value,
refY: r.value,
markerWidth: l.value,
markerHeight: l.value
}, [
t("path", {
d: `M 0 0 L ${e.markerSize} ${r.value} L 0 ${e.markerSize} z`,
fill: e.stroke
}, null, 8, y)
], 8, h)
]),
t("line", {
x1: e.x1,
y1: e.y1,
x2: e.x2,
y2: e.y2,
stroke: e.stroke,
"stroke-width": e.strokeWidth,
"stroke-linecap": e.strokeLinecap,
"stroke-dasharray": e.strokeDasharray,
"marker-end": e.markerEnd ? `url(#arrow_end_${o(i)})` : "",
"marker-start": e.markerStart ? `url(#arrow_start_${o(i)})` : ""
}, null, 8, v)
]));
}
};
export {
z as default
};