vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
102 lines (101 loc) • 2.7 kB
JavaScript
import { computed as k, openBlock as n, createElementBlock as l, createElementVNode as a, unref as r } from "vue";
import { c as s } from "./index-WrV3SAID.js";
const u = { 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"], x = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap", "stroke-dasharray", "marker-end", "marker-start"], B = {
__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 i = e, o = s(), m = k(() => `0 0 ${i.markerSize} ${i.markerSize}`), t = k(() => i.markerSize / 2), d = k(() => t.value + i.markerSize / 10);
return (S, w) => (n(), l("g", u, [
a("defs", null, [
a("marker", {
id: `arrow_end_${r(o)}`,
orient: "auto",
viewBox: r(m),
refX: r(t),
refY: r(t),
markerWidth: r(d),
markerHeight: r(d)
}, [
a("path", {
d: `M 0 0 L ${e.markerSize} ${r(t)} L 0 ${e.markerSize} z`,
fill: e.stroke
}, null, 8, c)
], 8, f),
a("marker", {
id: `arrow_start_${r(o)}`,
orient: "auto-start-reverse",
viewBox: r(m),
refX: r(t),
refY: r(t),
markerWidth: r(d),
markerHeight: r(d)
}, [
a("path", {
d: `M 0 0 L ${e.markerSize} ${r(t)} L 0 ${e.markerSize} z`,
fill: e.stroke
}, null, 8, y)
], 8, h)
]),
a("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_${r(o)})` : "",
"marker-start": e.markerStart ? `url(#arrow_start_${r(o)})` : ""
}, null, 8, x)
]));
}
};
export {
B as default
};