vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
72 lines (71 loc) • 2.33 kB
JavaScript
import { createElementBlock as n, openBlock as o, normalizeStyle as d, renderSlot as l, Fragment as u, renderList as g, normalizeClass as m, createCommentVNode as h, createVNode as k, mergeProps as y, unref as $ } from "vue";
import { Y as p } from "./index-BaaDnc4F.js";
import { _ as v } from "./Shape-BuwIrUMv.js";
import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const S = ["id"], x = ["onClick", "height", "width"], z = {
__name: "Legend",
props: {
legendSet: {
type: Array,
default() {
return [];
}
},
config: {
type: Object,
default() {
return {};
}
},
id: {
type: String,
default: ""
},
clickable: {
type: Boolean,
default: !0
}
},
emits: ["clickMarker"],
setup(e, { emit: c }) {
const f = c;
function s(i, r) {
f("clickMarker", { legend: i, i: r });
}
return (i, r) => (o(), n("div", {
id: e.id,
class: "vue-data-ui-legend",
style: d(`background:${e.config.backgroundColor};font-size:${e.config.fontSize}px;color:${e.config.color};padding-bottom:${e.config.paddingBottom}px;padding-top:${e.config.paddingTop || 12}px;font-weight:${e.config.fontWeight}`)
}, [
l(i.$slots, "legendTitle", { titleSet: e.legendSet }, void 0, !0),
(o(!0), n(u, null, g(e.legendSet, (t, a) => (o(), n("div", {
class: m({ "vue-data-ui-legend-item": !0, active: e.clickable })
}, [
t.shape ? (o(), n("svg", {
key: 0,
onClick: (C) => s(t, a),
height: e.config.fontSize,
width: e.config.fontSize,
viewBox: "0 0 60 60",
style: d(`overflow: visible;opacity:${t.opacity}`)
}, [
k(v, {
shape: t.shape,
radius: 30,
stroke: "none",
plot: { x: 30, y: 30 },
fill: t.color
}, null, 8, ["shape", "fill"]),
l(i.$slots, "legend-pattern", y({ ref_for: !0 }, { legend: t, index: $(p)(t.absoluteIndex) ? t.absoluteIndex : a }), void 0, !0)
], 12, x)) : h("", !0),
l(i.$slots, "item", {
legend: t,
index: a
}, void 0, !0)
], 2))), 256))
], 12, S));
}
}, I = /* @__PURE__ */ b(z, [["__scopeId", "data-v-f1db6c9f"]]);
export {
I as L
};