import { useCssVars as et, unref as u, computed as M, ref as i, watch as ot, openBlock as y, createElementBlock as m, createElementVNode as b, normalizeStyle as x, createStaticVNode as at, createCommentVNode as P, Fragment as S, renderList as nt, normalizeClass as ut, renderSlot as lt } from "vue";
import st from "./pdf-CDVxhECX.js";
import { u as it } from "./useNestedProp-Cj0kHD7k.js";
import { u as rt } from "./index-WrV3SAID.js";
import { _ as dt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ct = {
  key: 0,
  "data-html2canvas-ignore": "",
  style: { width: "100%", display: "flex", "justify-content": "end" }
}, ht = ["disabled"], vt = ["stroke"], ft = { key: 1 }, gt = ["id"], pt = ["onMousedown", "onTouchstart"], bt = ["onMousedown", "onTouchstart"], wt = ["onMousedown", "onTouchstart"], yt = ["onMousedown", "onTouchstart"], mt = ["onMousedown", "onTouchstart"], X = 20, Mt = {
  __name: "vue-ui-dashboard",
  props: {
    dataset: Array,
    config: Object
  },
  emits: ["change"],
  setup(W, { expose: L, emit: R }) {
    et((t) => ({
      f9823544: u(q),
      "57e70dbc": u(J)
    }));
    const { vue_ui_dashboard: B } = rt(), Y = W, r = M(() => it({
      userConfig: Y.config,
      defaultConfig: B
    })), I = i(`vue-ui-dashboard-${Math.random()}`), h = i(r.value.locked);
    function F() {
      h.value = !h.value;
    }
    const s = i(Y.dataset.map((t, e) => ({
      ...t,
      index: e
    }))), v = i(null), l = i(null), f = i({ x: 0, y: 0 }), g = i({ x: 0, y: 0 }), d = i(null), c = i(!1), p = i(null), _ = i(!1), T = i(!1);
    function N(t) {
      const e = t.target;
      e.tagName === "INPUT" && e.type === "range" && (T.value = !0);
    }
    function H(t) {
      const e = t.target;
      e.tagName === "INPUT" && e.type === "range" && (T.value = !1);
    }
    function D() {
      _.value = !0, st({
        domElement: document.getElementById(`vue-ui-dashboard_${I.value}`),
        fileName: "vue-ui-dashboard"
      }).finally(() => {
        _.value = !1;
      });
    }
    function O(t) {
      if (!h.value && (c.value = !0, p.value = t, l.value === null)) {
        v.value = t, f.value = { x: event.clientX, y: event.clientY };
        const e = s.value[t], a = 100 - e.width, o = 100 - e.height;
        e.left < 0 && (e.left = 0), e.top < 0 && (e.top = 0), e.left > a && (e.left = a), e.top > o && (e.top = o), e.left < 0 && (e.left = 0), e.top < 0 && (e.top = 0), e.left + e.width > 100 && (e.left = 100 - e.width), e.top + e.height > 100 && (e.top = 100 - e.height);
      }
    }
    function C(t, e) {
      c.value = !0, p.value = t, l.value = { index: t, direction: e };
      const a = s.value[t];
      g.value = { x: event.clientX, y: event.clientY, initialWidth: a.width, initialHeight: a.height };
    }
    function E(t, e, a) {
      if (l.value.direction.includes("top")) {
        const o = t.height - a / d.value.offsetHeight * 100;
        o >= X && (t.top += a / d.value.offsetHeight * 100, t.height = o);
      }
      if (l.value.direction.includes("bottom")) {
        const o = t.height + a / d.value.offsetHeight * 100;
        o >= X && (t.height = o);
      }
      if (l.value.direction.includes("left")) {
        const o = t.width - e / d.value.offsetWidth * 100;
        o >= X && (t.left += e / d.value.offsetWidth * 100, t.width = o);
      }
      if (l.value.direction.includes("right")) {
        const o = t.width + e / d.value.offsetWidth * 100;
        o >= X && (t.width = o);
      }
    }
    function U(t) {
      if (!(h.value || T.value)) {
        if (c.value = !0, v.value !== null) {
          const e = s.value[v.value], a = t.clientX - f.value.x, o = t.clientY - f.value.y, n = e.left + a / d.value.offsetWidth * 100, w = e.top + o / d.value.offsetHeight * 100;
          n >= 0 && w >= 0 && n + e.width <= 100 && w + e.height <= 100 && (e.left = n, e.top = w), f.value = { x: t.clientX, y: t.clientY };
        }
        if (l.value !== null) {
          const e = s.value[l.value.index], a = t.clientX - g.value.x, o = t.clientY - g.value.y;
          E(e, a, o), g.value = { x: t.clientX, y: t.clientY };
        }
      }
    }
    const V = R;
    ot(
      s,
      (t) => {
        t && !c.value && V("change", s.value);
      },
      { deep: !0 }
    );
    function j() {
      v.value = null, l.value = null, c.value = !1, p.value = null, s.value.forEach((t) => {
        t.left = Math.round(t.left / 100 * 100), t.top = Math.round(t.top / 100 * 100), t.width = Math.round(t.width / 100 * 100), t.height = Math.round(t.height / 100 * 100);
      });
    }
    function A(t) {
      h.value || T.value || (c.value = !0, p.value = t, l.value === null && (v.value = t, f.value = { x: event.touches[0].clientX, y: event.touches[0].clientY }));
    }
    function $(t, e, a) {
      if (c.value = !0, p.value = t, l.value === null) {
        l.value = { index: t, direction: e };
        const o = s.value[t];
        g.value = { x: a.touches[0].clientX, y: a.touches[0].clientY, initialWidth: o.width, initialHeight: o.height };
      }
    }
    function z(t) {
      if (c.value = !0, t.preventDefault(), l.value !== null) {
        const e = s.value[l.value.index], a = t.touches[0].clientX - g.value.x, o = t.touches[0].clientY - g.value.y;
        E(e, a, o), g.value = { x: t.touches[0].clientX, y: t.touches[0].clientY };
      }
    }
    function G(t) {
      if (!(h.value || T.value) && (c.value = !0, t.preventDefault(), v.value !== null)) {
        const e = s.value[v.value], a = t.touches[0].clientX - f.value.x, o = t.touches[0].clientY - f.value.y, n = e.left + a / d.value.offsetWidth * 100, w = e.top + o / d.value.offsetHeight * 100;
        n >= 0 && w >= 0 && n + e.width <= 100 && w + e.height <= 100 && (e.left = n, e.top = w), f.value = { x: t.touches[0].clientX, y: t.touches[0].clientY };
      }
    }
    function k() {
      c.value = !1, p.value = null, v.value = null, l.value = null, s.value.forEach((t) => {
        t.left = Math.round(t.left / 100 * 100), t.top = Math.round(t.top / 100 * 100), t.width = Math.round(t.width / 100 * 100), t.height = Math.round(t.height / 100 * 100);
      });
    }
    const q = M(() => r.value.style.item.borderColor), J = M(() => r.value.style.resizeHandles.backgroundColor), K = M(() => r.value.style.board.aspectRatio), Q = M(() => r.value.style.board.backgroundColor), Z = M(() => r.value.style.board.border);
    function tt() {
      return s.value;
    }
    return L({
      generatePdf: D,
      getItemsPositions: tt,
      toggleLock: F
    }), (t, e) => (y(), m("div", {
      onMousedown: N,
      onMouseup: H,
      onTouchstart: N,
      onTouchend: H
    }, [
      u(r).allowPrint ? (y(), m("div", ct, [
        b("button", {
          class: "vue-ui-dashboard-button",
          onClick: D,
          disabled: u(_),
          style: x([{ "margin-top": "12px" }, `color:${u(r).style.board.color}`])
        }, [
          u(_) ? (y(), m("svg", {
            key: 0,
            class: "vue-ui-dashboard-print-icon",
            xmlns: "http://www.w3.org/2000/svg",
            width: "20",
            height: "20",
            viewBox: "0 0 24 24",
            "stroke-width": "1.5",
            stroke: u(r).style.board.color,
            fill: "none",
            "stroke-linecap": "round",
            "stroke-linejoin": "round"
          }, e[4] || (e[4] = [
            at('<path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-c94a91b0></path><path d="M18 16v.01" data-v-c94a91b0></path><path d="M6 16v.01" data-v-c94a91b0></path><path d="M12 5v.01" data-v-c94a91b0></path><path d="M12 12v.01" data-v-c94a91b0></path><path d="M12 1a4 4 0 0 1 2.001 7.464l.001 .072a3.998 3.998 0 0 1 1.987 3.758l.22 .128a3.978 3.978 0 0 1 1.591 -.417l.2 -.005a4 4 0 1 1 -3.994 3.77l-.28 -.16c-.522 .25 -1.108 .39 -1.726 .39c-.619 0 -1.205 -.14 -1.728 -.391l-.279 .16l.007 .231a4 4 0 1 1 -2.212 -3.579l.222 -.129a3.998 3.998 0 0 1 1.988 -3.756l.002 -.071a4 4 0 0 1 -1.995 -3.265l-.005 -.2a4 4 0 0 1 4 -4z" data-v-c94a91b0></path>', 6)
          ]), 8, vt)) : (y(), m("span", ft, "PDF"))
        ], 12, ht)
      ])) : P("", !0),
      b("div", {
        class: "vue-ui-dashboard-container",
        ref_key: "dashboardContainer",
        ref: d,
        id: `vue-ui-dashboard_${u(I)}`,
        style: x(`border:${u(Z)}; sbackground:${u(Q)}; aspect-ratio:${u(K)}`)
      }, [
        b("div", {
          class: "vue-ui-dashboard-grid-container",
          ref: "container",
          onMousemove: U,
          onMouseup: j,
          onTouchmove: G,
          onTouchend: k,
          style: x(`background:${u(r).style.board.backgroundColor}`)
        }, [
          e[5] || (e[5] = b("div", { class: "vue-ui-dashboard-grid" }, null, -1)),
          (y(!0), m(S, null, nt(u(s), (a, o) => (y(), m("div", {
            key: a.id,
            class: ut({ "vue-ui-dashboard-grid-item": !0, "vue-ui-dashboard-grid-item--locked": u(h) }),
            style: x({
              width: `${a.width}%`,
              height: `${a.height}%`,
              left: `${a.left}%`,
              top: `${a.top}%`,
              cursor: "move",
              boxShadow: u(p) === o ? "0 6px 12px -3px rgba(0,0,0,0.3)" : "",
              zIndex: u(p) === o ? u(s).length + 1 : a.index,
              backgroundColor: u(r).style.item.backgroundColor
            }),
            onMousedown: (n) => O(o),
            onTouchstart: (n) => A(o)
          }, [
            u(h) ? P("", !0) : (y(), m(S, { key: 0 }, [
              b("div", {
                class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-top-left",
                onMousedown: (n) => C(o, "top-left"),
                onTouchstart: (n) => $(o, "top-left", n),
                onTouchmove: e[0] || (e[0] = (n) => z(n)),
                onTouchend: k
              }, null, 40, bt),
              b("div", {
                class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-top-right",
                onMousedown: (n) => C(o, "top-right"),
                onTouchstart: (n) => $(o, "top-right", n),
                onTouchmove: e[1] || (e[1] = (n) => z(n)),
                onTouchend: k
              }, null, 40, wt),
              b("div", {
                class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-left",
                onMousedown: (n) => C(o, "bottom-left"),
                onTouchstart: (n) => $(o, "bottom-left", n),
                onTouchmove: e[2] || (e[2] = (n) => z(n)),
                onTouchend: k
              }, null, 40, yt),
              b("div", {
                class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-right",
                onMousedown: (n) => C(o, "bottom-right"),
                onTouchstart: (n) => $(o, "bottom-right", n),
                onTouchmove: e[3] || (e[3] = (n) => z(n)),
                onTouchend: k
              }, null, 40, mt)
            ], 64)),
            lt(t.$slots, "content", {
              item: a,
              index: o,
              left: a.left,
              top: a.top,
              height: a.height,
              width: a.width
            }, void 0, !0)
          ], 46, pt))), 128))
        ], 36)
      ], 12, gt)
    ], 32));
  }
}, zt = /* @__PURE__ */ dt(Mt, [["__scopeId", "data-v-c94a91b0"]]);
export {
  zt as default
};
