vue-data-ui/dist/Legend-D6z73edh.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

import { createElementBlock as n, openBlock as a, normalizeStyle as d, renderSlot as r, Fragment as u, renderList as m, normalizeClass as g, createCommentVNode as p, createVNode as h, mergeProps as k, unref as v } from "vue";
import { E as y } from "./lib-BwysEpWI.js";
import { _ as x } from "./Shape-DAHhCEdg.js";
import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const S = ["id"], $ = ["onClick", "viewBox"], B = {
  __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(t, { emit: c }) {
    const s = c;
    function f(o, l) {
      s("clickMarker", { legend: o, i: l });
    }
    return (o, l) => (a(), n("div", {
      id: t.id,
      class: "vue-data-ui-legend",
      style: d({
        background: t.config.backgroundColor,
        color: t.config.color,
        paddingBottom: (t.config.paddingBottom ?? 0) + "px",
        paddingTop: (t.config.paddingTop ?? 12) + "px",
        fontWeight: t.config.fontWeight,
        fontSize: `var(--legend-font-size, ${t.config.fontSize ?? 14}px)`
      })
    }, [
      r(o.$slots, "legendTitle", { titleSet: t.legendSet }, void 0, !0),
      (a(!0), n(u, null, m(t.legendSet, (e, i) => (a(), n("div", {
        key: `legend_${i}`,
        class: g({ "vue-data-ui-legend-item": !0, active: t.clickable })
      }, [
        e.shape ? (a(), n("svg", {
          key: 0,
          onClick: (C) => f(e, i),
          height: "1em",
          width: "1em",
          viewBox: e.shape && e.shape === "star" ? "-10 -10 80 80" : "0 0 60 60",
          style: d(`overflow: visible; opacity:${e.opacity}`)
        }, [
          h(x, {
            stroke: "none",
            shape: e.shape,
            radius: 30,
            plot: {
              x: 30,
              y: e.shape === "triangle" ? 36 : 30
            },
            fill: e.color
          }, null, 8, ["shape", "plot", "fill"]),
          r(o.$slots, "legend-pattern", k({ ref_for: !0 }, {
            legend: e,
            index: v(y)(e.absoluteIndex) ? e.absoluteIndex : i
          }), void 0, !0)
        ], 12, $)) : p("", !0),
        r(o.$slots, "item", {
          legend: e,
          index: i
        }, void 0, !0)
      ], 2))), 128))
    ], 12, S));
  }
}, L = /* @__PURE__ */ b(B, [["__scopeId", "data-v-5f2d7b2f"]]);
export {
  L as default
};