grid-layout-plus/es/components/grid-item.vue.mjs

<p align="center"> <a href="https://grid-layout-plus.netlify.app/" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/grid-layout-plus.svg" width="180" style="width: 120px;" /> </a> </p>

import { defineComponent as Fe, inject as he, ref as pe, reactive as we, toRef as Ae, onBeforeMount as Pe, onMounted as Ye, watchEffect as Le, onBeforeUnmount as Oe, computed as N, watch as b, createElementBlock as be, openBlock as ze, normalizeStyle as Xe, normalizeClass as ve, renderSlot as _e, createCommentVNode as $e } from "vue";
import { isNull as x, nextTickOnce as f, throttle as ye } from "@vexip-ui/utils";
import { LAYOUT_KEY as Ge, EMITTER_KEY as je, useNameHelper as Ke, setTransformRtl as Ve, setTransform as qe, setTopRight as Je, setTopLeft as Qe } from "../helpers/common.mjs";
import { getControlPosition as Re, createCoreData as xe } from "../helpers/draggable.mjs";
import { getColsFromBreakpoint as Ze } from "../helpers/responsive.mjs";
import { getDocumentDir as He } from "../helpers/dom.mjs";
import Se from "interactjs";
const ot = /* @__PURE__ */ Fe({
  __name: "grid-item",
  props: {
    isDraggable: { type: Boolean, default: void 0 },
    isResizable: { type: Boolean, default: void 0 },
    isBounded: { type: Boolean, default: void 0 },
    static: { type: Boolean, default: !1 },
    minH: { default: 1 },
    minW: { default: 1 },
    maxH: { default: 1 / 0 },
    maxW: { default: 1 / 0 },
    x: {},
    y: {},
    w: {},
    h: {},
    i: {},
    dragIgnoreFrom: { default: "a, button" },
    dragAllowFrom: { default: void 0 },
    resizeIgnoreFrom: { default: "a, button" },
    preserveAspectRatio: { type: Boolean, default: !1 },
    dragOption: { default: () => ({}) },
    resizeOption: { default: () => ({}) }
  },
  emits: ["container-resized", "resize", "resized", "move", "moved"],
  setup(Me, { expose: We, emit: Be }) {
    const i = Me, M = Be, l = he(Ge), g = he(je);
    if (!l)
      throw new Error("[grid-layout-plus]: missing layout store, GridItem must under a GridLayout.");
    const d = pe(null), e = we({
      cols: 1,
      containerWidth: 100,
      rowHeight: 30,
      margin: [10, 10],
      maxRows: 1 / 0,
      draggable: void 0,
      resizable: void 0,
      bounded: void 0,
      transformScale: 1,
      useCssTransforms: !0,
      useStyleCursor: !0,
      isDragging: !1,
      dragging: {
        top: -1,
        left: -1
      },
      isResizing: !1,
      resizing: {
        width: -1,
        height: -1
      },
      style: {},
      rtl: !1
    });
    let X = !1, _ = !1, $ = NaN, G = NaN, k = NaN, E = NaN, j = -1, K = -1, V = -1, q = -1, h = i.x, v = i.y, p = i.w, y = i.h;
    const W = pe(), J = we({
      i: Ae(i, "i"),
      state: e,
      wrapper: W,
      calcXY: A
    });
    function Q(t) {
      Ie(t);
    }
    function Z() {
      de();
    }
    function U(t) {
      x(i.isDraggable) && (e.draggable = t);
    }
    function ee(t) {
      x(i.isResizable) && (e.resizable = t);
    }
    function te(t) {
      x(i.isBounded) && (e.bounded = t);
    }
    function ie(t) {
      e.transformScale = t;
    }
    function ae(t) {
      e.rowHeight = t;
    }
    function re(t) {
      e.maxRows = t;
    }
    function ne() {
      e.rtl = He() === "rtl", de();
    }
    function oe(t) {
      e.cols = Math.floor(t);
    }
    l.increaseItem(J), Pe(() => {
      e.rtl = He() === "rtl";
    }), Ye(() => {
      l.responsive && l.lastBreakpoint ? e.cols = Ze(l.lastBreakpoint, l.cols) : e.cols = l.colNum, e.rowHeight = l.rowHeight, e.containerWidth = l.width !== null ? l.width : 100, e.margin = l.margin !== void 0 ? l.margin.map(Number) : [10, 10], e.maxRows = l.maxRows, x(i.isDraggable) ? e.draggable = l.isDraggable : e.draggable = i.isDraggable, x(i.isResizable) ? e.resizable = l.isResizable : e.resizable = i.isResizable, x(i.isBounded) ? e.bounded = l.isBounded : e.bounded = i.isBounded, e.transformScale = l.transformScale, e.useCssTransforms = l.useCssTransforms, e.useStyleCursor = l.useStyleCursor, Le(() => {
        h = i.x, v = i.y, y = i.h, p = i.w, f(H);
      }), g.on("updateWidth", Q), g.on("compact", Z), g.on("setDraggable", U), g.on("setResizable", ee), g.on("setBounded", te), g.on("setTransformScale", ie), g.on("setRowHeight", ae), g.on("setMaxRows", re), g.on("directionchange", ne), g.on("setColNum", oe);
    }), Oe(() => {
      g.off("updateWidth", Q), g.off("compact", Z), g.off("setDraggable", U), g.off("setResizable", ee), g.off("setBounded", te), g.off("setTransformScale", ie), g.off("setRowHeight", ae), g.off("setMaxRows", re), g.off("directionchange", ne), g.off("setColNum", oe), d.value && (d.value.unset(), d.value = null), l.decreaseItem(J);
    }), We({ state: e, wrapper: W });
    const Ce = typeof navigator < "u" ? navigator.userAgent.toLowerCase().includes("android") : !1, se = N(() => e.resizable && !i.static), m = N(() => l.isMirrored ? !e.rtl : e.rtl), De = N(() => (e.draggable || e.resizable) && !i.static), z = Ke("item"), Ne = N(() => ({
      [z.b()]: !0,
      [z.bm("resizable")]: se.value,
      [z.bm("static")]: i.static,
      [z.bm("resizing")]: e.isResizing,
      [z.bm("dragging")]: e.isDragging,
      [z.bm("transform")]: e.useCssTransforms,
      [z.bm("rtl")]: m.value,
      [z.bm("no-touch")]: Ce && De.value
    })), T = N(() => [z.be("resizer"), m.value && z.bem("resizer", "rtl")].filter(Boolean));
    b(
      () => i.isDraggable,
      (t) => {
        e.draggable = t;
      }
    ), b(
      () => i.static,
      () => {
        f(ue), f(S);
      }
    ), b(
      () => e.draggable,
      () => {
        f(ue);
      }
    ), b(
      () => i.isResizable,
      (t) => {
        e.resizable = t;
      }
    ), b(
      () => i.isBounded,
      (t) => {
        e.bounded = t;
      }
    ), b(
      () => e.resizable,
      () => {
        f(S);
      }
    ), b(
      () => e.rowHeight,
      () => {
        f(H), f(F);
      }
    ), b([() => e.cols, () => e.containerWidth], () => {
      f(S), f(H), f(F);
    }), b([() => i.minH, () => i.maxH, () => i.minW, () => i.maxW], () => {
      f(S);
    }), b(m, () => {
      f(S), f(H);
    }), b([() => l.margin, () => l.margin[0], () => l.margin[1]], () => {
      const t = l.margin;
      !t || t[0] === e.margin[0] && t[1] === e.margin[1] || (e.margin = t.map(Number), f(H), f(F));
    });
    function H() {
      i.x + i.w > e.cols ? (h = 0, p = i.w > e.cols ? e.cols : i.w) : (h = i.x, p = i.w);
      const t = B(h, v, p, y);
      e.isDragging && (t.top = e.dragging.top, m.value ? t.right = e.dragging.left : t.left = e.dragging.left), e.isResizing && (t.width = e.resizing.width, t.height = e.resizing.height);
      let r;
      e.useCssTransforms ? m.value ? r = Ve(t.top, t.right, t.width, t.height) : r = qe(t.top, t.left, t.width, t.height) : m.value ? r = Je(t.top, t.right, t.width, t.height) : r = Qe(t.top, t.left, t.width, t.height), e.style = r;
    }
    function F() {
      const t = {};
      for (const r of ["width", "height"]) {
        const o = e.style[r].match(/^(\d+)px$/);
        if (!o)
          return;
        t[r] = o[1];
      }
      M("container-resized", i.i, i.h, i.w, t.height, t.width);
    }
    function le(t) {
      if (i.static) return;
      const r = t.type;
      if (r === "resizestart" && e.isResizing || r !== "resizestart" && !e.isResizing)
        return;
      const s = Re(t);
      if (x(s)) return;
      const { x: o, y: c } = s, n = { width: 0, height: 0 };
      let a;
      switch (r) {
        case "resizestart": {
          S(), j = p, K = y, a = B(h, v, p, y), n.width = a.width, n.height = a.height, e.resizing = n, e.isResizing = !0;
          break;
        }
        case "resizemove": {
          !t.edges.right && !t.edges.left && (k = o), !t.edges.top && !t.edges.bottom && (E = c);
          const u = xe(k, E, o, c);
          m.value ? n.width = e.resizing.width - u.deltaX / e.transformScale : n.width = e.resizing.width + u.deltaX / e.transformScale, n.height = e.resizing.height + u.deltaY / e.transformScale, e.resizing = n;
          break;
        }
        case "resizeend": {
          a = B(h, v, p, y), n.width = a.width, n.height = a.height, e.resizing = { width: -1, height: -1 }, e.isResizing = !1;
          break;
        }
      }
      a = Te(n.height, n.width), a.w < i.minW && (a.w = i.minW), a.w > i.maxW && (a.w = i.maxW), a.h < i.minH && (a.h = i.minH), a.h > i.maxH && (a.h = i.maxH), a.h < 1 && (a.h = 1), a.w < 1 && (a.w = 1), k = o, E = c, (p !== a.w || y !== a.h) && M("resize", i.i, a.h, a.w, n.height, n.width), t.type === "resizeend" && (j !== p || K !== y) && M("resized", i.i, a.h, a.w, n.height, n.width), g.emit("resizeEvent", t.type, i.i, h, v, a.h, a.w);
    }
    function ge(t) {
      if (i.static || e.isResizing) return;
      const r = t.type;
      if (r === "dragstart" && e.isDragging || r !== "dragstart" && !e.isDragging)
        return;
      const s = Re(t);
      if (x(s)) return;
      const { x: o, y: c } = s, n = t.target;
      if (!n.offsetParent) return;
      const a = { top: 0, left: 0 };
      switch (r) {
        case "dragstart": {
          V = h, q = v;
          const w = n.offsetParent.getBoundingClientRect(), R = n.getBoundingClientRect(), C = R.left / e.transformScale, D = w.left / e.transformScale, P = R.right / e.transformScale, Y = w.right / e.transformScale, L = R.top / e.transformScale, O = w.top / e.transformScale;
          m.value ? a.left = (P - Y) * -1 : a.left = C - D, a.top = L - O, e.dragging = a, e.isDragging = !0;
          break;
        }
        case "dragmove": {
          const w = xe($, G, o, c);
          if (m.value ? a.left = e.dragging.left - w.deltaX / e.transformScale : a.left = e.dragging.left + w.deltaX / e.transformScale, a.top = e.dragging.top + w.deltaY / e.transformScale, e.bounded) {
            const R = n.offsetParent.clientHeight - ce(i.h, e.rowHeight, e.margin[1]);
            a.top = fe(a.top, 0, R);
            const C = I(), D = e.containerWidth - ce(i.w, C, e.margin[0]);
            a.left = fe(a.left, 0, D);
          }
          e.dragging = a;
          break;
        }
        case "dragend": {
          const w = n.offsetParent.getBoundingClientRect(), R = n.getBoundingClientRect(), C = R.left / e.transformScale, D = w.left / e.transformScale, P = R.right / e.transformScale, Y = w.right / e.transformScale, L = R.top / e.transformScale, O = w.top / e.transformScale;
          m.value ? a.left = (P - Y) * -1 : a.left = C - D, a.top = L - O, e.dragging = { top: -1, left: -1 }, e.isDragging = !1;
          break;
        }
      }
      let u;
      m.value, u = A(a.top, a.left), $ = o, G = c, (h !== u.x || v !== u.y) && M("move", i.i, u.x, u.y), t.type === "dragend" && (V !== h || q !== v) && M("moved", i.i, u.x, u.y), g.emit("dragEvent", t.type, i.i, u.x, u.y, y, p);
    }
    function B(t, r, s, o) {
      const c = I();
      let n;
      return m.value ? n = {
        right: Math.round(c * t + (t + 1) * e.margin[0]),
        top: Math.round(e.rowHeight * r + (r + 1) * e.margin[1]),
        // 0 * Infinity === NaN, which causes problems with resize constraints;
        // Fix this if it occurs.
        // Note we do it here rather than later because Math.round(Infinity) causes depot
        width: s === 1 / 0 ? s : Math.round(c * s + Math.max(0, s - 1) * e.margin[0]),
        height: o === 1 / 0 ? o : Math.round(e.rowHeight * o + Math.max(0, o - 1) * e.margin[1])
      } : n = {
        left: Math.round(c * t + (t + 1) * e.margin[0]),
        top: Math.round(e.rowHeight * r + (r + 1) * e.margin[1]),
        // 0 * Infinity === NaN, which causes problems with resize constraints;
        // Fix this if it occurs.
        // Note we do it here rather than later because Math.round(Infinity) causes depot
        width: s === 1 / 0 ? s : Math.round(c * s + Math.max(0, s - 1) * e.margin[0]),
        height: o === 1 / 0 ? o : Math.round(e.rowHeight * o + Math.max(0, o - 1) * e.margin[1])
      }, n;
    }
    function A(t, r) {
      const s = I();
      let o = Math.round((r - e.margin[0]) / (s + e.margin[0])), c = Math.round((t - e.margin[1]) / (e.rowHeight + e.margin[1]));
      return o = Math.max(Math.min(o, e.cols - p), 0), c = Math.max(Math.min(c, e.maxRows - y), 0), { x: o, y: c };
    }
    function I() {
      return (e.containerWidth - e.margin[0] * (e.cols + 1)) / e.cols;
    }
    function ce(t, r, s) {
      return Number.isFinite(t) ? Math.round(r * t + Math.max(0, t - 1) * s) : t;
    }
    function fe(t, r, s) {
      return Math.max(Math.min(t, s), r);
    }
    function Te(t, r, s = !1) {
      const o = I();
      let c = Math.round((r + e.margin[0]) / (o + e.margin[0])), n = 0;
      return s ? n = Math.ceil((t + e.margin[1]) / (e.rowHeight + e.margin[1])) : n = Math.round((t + e.margin[1]) / (e.rowHeight + e.margin[1])), c = Math.max(Math.min(c, e.cols - h), 0), n = Math.max(Math.min(n, e.maxRows - v), 0), { w: c, h: n };
    }
    function Ie(t, r) {
      e.containerWidth = t;
    }
    function de() {
      H();
    }
    function me() {
      !d.value && W.value && (d.value = Se(W.value), e.useStyleCursor || d.value.styleCursor(!1));
    }
    const ke = ye(ge);
    function ue() {
      if (me(), !!d.value)
        if (e.draggable && !i.static) {
          const t = {
            ignoreFrom: i.dragIgnoreFrom,
            allowFrom: i.dragAllowFrom,
            ...i.dragOption
          };
          d.value.draggable(t), X || (X = !0, d.value.on("dragstart dragmove dragend", (r) => {
            r.type === "dragmove" ? ke(r) : ge(r);
          }));
        } else
          d.value.draggable({ enabled: !1 });
    }
    const Ee = ye(le);
    function S() {
      if (me(), !!d.value)
        if (e.resizable && !i.static) {
          const t = B(0, 0, i.maxW, i.maxH), r = B(0, 0, i.minW, i.minH), s = {
            edges: {
              left: m.value ? `.${T.value[0]}` : !1,
              right: m.value ? !1 : `.${T.value[0]}`,
              bottom: `.${T.value[0]}`,
              top: !1
            },
            ignoreFrom: i.resizeIgnoreFrom,
            restrictSize: {
              min: {
                height: r.height * e.transformScale,
                width: r.width * e.transformScale
              },
              max: {
                height: t.height * e.transformScale,
                width: t.width * e.transformScale
              }
            },
            ...i.resizeOption
          };
          i.preserveAspectRatio && (s.modifiers = [Se.modifiers.aspectRatio({ ratio: "preserve" })]), d.value.resizable(s), _ || (_ = !0, d.value.on("resizestart resizemove resizeend", (o) => {
            o.type === "resizemove" ? Ee(o) : le(o);
          }));
        } else
          d.value.resizable({ enabled: !1 });
    }
    return (t, r) => (ze(), be("section", {
      ref_key: "wrapper",
      ref: W,
      class: ve(Ne.value),
      style: Xe(e.style)
    }, [
      _e(t.$slots, "default"),
      se.value ? (ze(), be("span", {
        key: 0,
        class: ve(T.value)
      }, null, 2)) : $e("", !0)
    ], 6));
  }
});
export {
  ot as default
};
//# sourceMappingURL=grid-item.vue.mjs.map