vue-data-ui/dist/BaseZoomControls-e4hnaBoq.js

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

import { createElementBlock as a, openBlock as u, normalizeStyle as m, normalizeClass as d, unref as f, createElementVNode as l, createCommentVNode as z, createVNode as s, toDisplayString as g } from "vue";
import { m as i, q as y, u as b, h, t as C } from "./lib-2iaAPQ_c.js";
import c from "./BaseIcon-CbVDYv89.js";
import { _ as k } from "./_plugin-vue_export-helper-CHgC5LLL.js";
function v(o, n) {
  const t = i(o);
  return y(t, n);
}
function $(o, n) {
  const t = i(o);
  return b(t, n);
}
function I(o, n) {
  const t = i(o);
  return h(t, n);
}
function N({ defaultConfig: o, userConfig: n }) {
  return C({ defaultConfig: o, userConfig: n });
}
const x = ["disabled"], S = {
  __name: "BaseZoomControls",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    scale: {
      type: Number,
      default: 0
    },
    withDirection: {
      type: Boolean,
      default: !1
    },
    isFullscreen: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["zoomIn", "zoomOut", "resetZoom", "switchDirection"],
  setup(o, { emit: n }) {
    const t = n;
    return (B, e) => (u(), a("div", {
      class: d({ "vue-data-ui-zoom-controls": !0, "vue-data-ui-zoom-controls-fullscreen": o.isFullscreen }),
      "data-dom-to-png-ignore": "",
      style: m({
        border: o.config.style.chart.controls.border,
        backgroundColor: o.config.style.chart.controls.backgroundColor,
        padding: o.config.style.chart.controls.padding,
        borderRadius: o.config.style.chart.controls.borderRadius,
        "--vue-data-ui-zoom-control-button-color": o.config.style.chart.controls.buttonColor,
        "--vue-data-ui-zoom-control-button-color-hover": f(v)(o.config.style.chart.controls.buttonColor, 0.2)
      })
    }, [
      l("button", {
        onClick: e[0] || (e[0] = (r) => t("zoomOut")),
        class: "vue-data-ui-zoom-controls-button",
        "data-cy-zoom-out": ""
      }, [
        s(c, {
          name: "zoomMinus",
          stroke: o.config.style.chart.controls.color,
          size: o.config.style.chart.controls.fontSize * 1.2
        }, null, 8, ["stroke", "size"])
      ]),
      l("button", {
        class: "vue-data-ui-zoom-controls-button-zoom",
        onClick: e[1] || (e[1] = (r) => t("resetZoom")),
        "data-cy-zoom-reset": "",
        style: m({
          color: o.config.style.chart.controls.color,
          width: o.config.style.chart.controls.fontSize * 4 + "px",
          borderRadius: o.config.style.chart.controls.borderRadius,
          fontSize: o.config.style.chart.controls.fontSize + "px"
        })
      }, g(Math.round(o.scale * 100)) + "% ", 5),
      l("button", {
        onClick: e[2] || (e[2] = (r) => t("zoomIn")),
        class: "vue-data-ui-zoom-controls-button",
        "data-cy-zoom-in": ""
      }, [
        s(c, {
          name: "zoomPlus",
          stroke: o.config.style.chart.controls.color,
          size: o.config.style.chart.controls.fontSize * 1.2
        }, null, 8, ["stroke", "size"])
      ]),
      l("button", {
        disabled: o.scale === 1,
        onClick: e[3] || (e[3] = (r) => t("resetZoom")),
        class: "vue-data-ui-zoom-controls-button"
      }, [
        s(c, {
          name: "revert",
          stroke: o.config.style.chart.controls.color,
          size: o.config.style.chart.controls.fontSize * 1.2
        }, null, 8, ["stroke", "size"])
      ], 8, x),
      o.withDirection ? (u(), a("button", {
        key: 0,
        onClick: e[4] || (e[4] = (r) => t("switchDirection")),
        class: "vue-data-ui-zoom-controls-button"
      }, [
        s(c, {
          name: "direction",
          stroke: o.config.style.chart.controls.color,
          size: o.config.style.chart.controls.fontSize * 1.2
        }, null, 8, ["stroke", "size"])
      ])) : z("", !0)
    ], 6));
  }
}, R = /* @__PURE__ */ k(S, [["__scopeId", "data-v-631740b5"]]);
export {
  R as B,
  $ as d,
  v as l,
  N as m,
  I as s
};