vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
73 lines (72 loc) • 2.37 kB
JavaScript
import { createElementBlock as o, openBlock as a, 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 { a2 as p } from "./index-q-LPw2IT.js";
import { _ as v } from "./Shape-DHIaJs9G.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) => (a(), o("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),
(a(!0), o(u, null, g(e.legendSet, (t, n) => (a(), o("div", {
key: `legend_${n}`,
class: m({ "vue-data-ui-legend-item": !0, active: e.clickable })
}, [
t.shape ? (a(), o("svg", {
key: 0,
onClick: (C) => s(t, n),
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 : n }), void 0, !0)
], 12, x)) : h("", !0),
l(i.$slots, "item", {
legend: t,
index: n
}, void 0, !0)
], 2))), 128))
], 12, S));
}
}, L = /* @__PURE__ */ b(z, [["__scopeId", "data-v-2b9117cf"]]);
export {
L as default
};