@farris/ui-vue/components/modal/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

var Ve = Object.defineProperty;
var Ne = (e, t, a) => t in e ? Ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
var $ = (e, t, a) => Ne(e, typeof t != "symbol" ? t + "" : t, a);
import { ref as o, createVNode as y, Fragment as ve, watch as A, defineComponent as $e, computed as V, nextTick as ne, onBeforeMount as Ae, onMounted as fe, onUnmounted as he, watchEffect as Ue, Teleport as Ye, Transition as Xe, shallowRef as qe, render as ae, h as Je, cloneVNode as _e, createApp as Ke, mergeProps as Ze } from "vue";
import { LocaleService as Z } from "../locale/index.esm.js";
import { isMobilePhone as re, getMaxZIndex as de, EVENT_PROPERTY_TAB_IDS as Ge } from "../common/index.esm.js";
import { BaseControlProperty as Qe } from "../property-panel/index.esm.js";
import { ButtonProperty as et } from "../button/index.esm.js";
import { FieldSelectorRepositoryToken as tt } from "../field-selector/index.esm.js";
import { useButtonItemsDesigner as lt } from "../collection-property-editor/index.esm.js/src/use-button-items.designer";
const at = {
  /**
   * 允许点击蒙层关闭对话框
   * @default false
   */
  allowClickMaskToClose: { type: Boolean, default: !1 },
  /**
   * 关闭前事件
   * @default () => { return true; }
   */
  beforeClose: { type: Function, default: () => !0 },
  /**
   * 自定义样式，类名以空格隔开
   * @default ''
   */
  class: { type: String, default: "" },
  /**
   * 自定义蒙层样式，类名以空格隔开
   * @default ''
   */
  maskClass: { type: String, default: "" },
  /**
   * 窗口标题
   */
  title: { type: String, default: "" },
  /**
   * 窗口宽度
   * @default 500
   */
  width: { type: Number, default: 500 },
  /**
   * 窗口高度
   * @default 320
   */
  height: { type: Number, default: 320 },
  /**
   * 底部按钮
   */
  buttons: {
    type: Array,
    default: []
  },
  /**
   * 双向绑定属性是否显示窗口
   * @default false
   */
  modelValue: { type: Boolean, default: !1 },
  /**
   * 是否模态
   * @default true
   */
  mask: { type: Boolean, default: !0 },
  /**
   * 展示头部
   * @default true
   */
  showHeader: { type: Boolean, default: !0 },
  /**
   * 展示默认按钮
   * @default true
   */
  showButtons: { type: Boolean, default: !0 },
  /**
   * 自适应尺寸
   * @default true
   */
  fitContent: { type: Boolean, default: !0 },
  /**
   * 展示右上角关闭弹窗按钮
   * @default true
   */
  showCloseButton: { type: Boolean, default: !0 },
  /**
   * 是否在窗口右上角展示浮动关闭按钮
   */
  showFloatingClose: { type: Boolean, default: !1 },
  /**
   * 展示右上角最大化按钮
   * @default false
   */
  showMaxButton: { type: Boolean, default: !1 },
  minHeight: { type: Number },
  maxHeight: { type: Number },
  minWidth: { type: Number },
  maxWidth: { type: Number },
  containment: { type: Object, default: null },
  /**
   * 可调整窗口尺寸
   * @default false
   */
  resizeable: { type: Boolean, default: !1 },
  /**
   * 可拖拽窗口
   * @default false
   */
  draggable: { type: Boolean, default: !1 },
  /**
   * 拖拽抓手，赋值css选择器
   */
  dragHandle: { type: Object, default: null },
  /**
   * 命令式调用属性，默认关闭按钮回调事件
   */
  closedCallback: { type: Function, default: null },
  openedCallback: { type: Function, default: null },
  // 窗口打开后的回调函数
  resizeHandle: { type: Function, default: null },
  /**
   * 命令式调用属性，默认插槽，返回VNode
   */
  render: { type: Function, default: null },
  /**
   * 命令式调用属性，底部默认确定按钮回调事件
   */
  acceptCallback: { type: Function, default: null },
  /**
   * 命令式调用属性，底部默认取消按钮回调事件
   */
  rejectCallback: { type: Function, default: null },
  enableEsc: { type: Boolean, default: !0 },
  enableEnter: { type: Boolean, default: !1 },
  dialogType: { type: String, default: "" },
  src: { type: String, default: "" },
  /**
   * 底部区域高度，如果设置为0，则不显示底部区域
   * @default 60
   */
  footerHeight: { type: Number, default: 60 },
  position: { type: String, default: "center" },
  host: { type: Object, default: "body" },
  isMessager: { type: Boolean, default: !1 },
  fullscreen: { type: Boolean, default: !1 },
  maximized: { type: Boolean, default: !1 },
  useTransform: { type: Boolean, default: !0 }
};
class B {
  constructor(t, a) {
    this.x = t, this.y = a;
  }
  static getTransformInfo(t) {
    const n = window.getComputedStyle(t).getPropertyValue("transform").replace(/[^-\d,]/g, "").split(",");
    if (n.length >= 6) {
      const r = parseInt(n[4], 10), v = parseInt(n[5], 10);
      return { x: r, y: v };
    }
    return { x: 0, y: 0 };
  }
  static fromEvent(t, a = null) {
    if (this.isMouseEvent(t))
      return new B(t.clientX, t.clientY);
    if (a === null || t.changedTouches.length === 1)
      return new B(t.changedTouches[0].clientX, t.changedTouches[0].clientY);
    for (let n = 0; n < t.changedTouches.length; n++)
      if (t.changedTouches[n].target === a)
        return new B(t.changedTouches[n].clientX, t.changedTouches[n].clientY);
  }
  static isMouseEvent(t) {
    return Object.prototype.toString.apply(t).indexOf("MouseEvent") === 8;
  }
  static isIPosition(t) {
    return !!t && "x" in t && "y" in t;
  }
  static getCurrent(t) {
    const a = new B(0, 0);
    if (window) {
      const n = window.getComputedStyle(t);
      if (n) {
        const r = parseInt(n.getPropertyValue("left"), 10), v = parseInt(n.getPropertyValue("top"), 10);
        a.x = isNaN(r) ? 0 : r, a.y = isNaN(v) ? 0 : v;
      }
      return a;
    }
    return null;
  }
  static copy(t) {
    return new B(0, 0).set(t);
  }
  get value() {
    return { x: this.x, y: this.y };
  }
  add(t) {
    return this.x += t.x, this.y += t.y, this;
  }
  subtract(t) {
    return this.x -= t.x, this.y -= t.y, this;
  }
  multiply(t) {
    this.x *= t, this.y *= t;
  }
  divide(t) {
    this.x /= t, this.y /= t;
  }
  reset() {
    return this.x = 0, this.y = 0, this;
  }
  set(t) {
    return this.x = t.x, this.y = t.y, this;
  }
}
class X {
  constructor(t, a) {
    this.width = t, this.height = a;
  }
  static getCurrent(t) {
    const a = new X(0, 0);
    if (window) {
      const n = window.getComputedStyle(t);
      return n && (a.width = parseInt(n.getPropertyValue("width"), 10), a.height = parseInt(n.getPropertyValue("height"), 10)), a;
    }
    return null;
  }
  static copy(t) {
    return new X(0, 0).set(t);
  }
  set(t) {
    return this.width = t.width, this.height = t.height, this;
  }
}
function nt(e, t) {
  const a = o(), n = o(), r = o(), v = o(), h = o(), d = o(), f = o(), g = o(), M = o(), w = o(), F = o(), N = o(e.resizeable), S = o(), j = o(e.draggable), O = o(!1);
  function R() {
    const i = n.value || document.body, u = window.getComputedStyle(i);
    if (!u || !a.value)
      return;
    const x = B.getTransformInfo(a.value), p = {};
    f.value && (p.deltaL = a.value.offsetLeft - f.value.x, p.deltaT = a.value.offsetTop - f.value.y);
    const P = u.getPropertyValue("position");
    p.width = i.clientWidth, p.height = i.clientHeight, p.pr = parseInt(u.getPropertyValue("padding-right"), 10), p.pb = parseInt(u.getPropertyValue("padding-bottom"), 10), p.position = u.getPropertyValue("position"), P === "static" && (i.style.position = "relative"), p.translateX = x.x, p.translateY = x.y, w.value = p;
  }
  function k(i) {
    if (a.value) {
      v.value = X.getCurrent(a.value), h.value = B.getCurrent(a.value), d.value = v.value ? X.copy(v.value) : null, f.value = h.value ? B.copy(h.value) : null, R();
      const u = i.target.getAttribute("type") || "";
      g.value = {
        n: !!u.match(/n/),
        s: !!u.match(/s/),
        w: !!u.match(/w/),
        e: !!u.match(/e/)
      };
    }
  }
  function z() {
    var i, u, x, p;
    if (a.value) {
      const P = a.value;
      g.value && ((g.value.n || g.value.s) && ((i = d.value) != null && i.height) && (P.style.height = d.value.height + "px"), (g.value.w || g.value.e) && ((u = d.value) != null && u.width) && (P.style.width = d.value.width + "px"), f.value && ((x = f.value) != null && x.x && (P.style.left = f.value.x + "px"), (p = f.value) != null && p.y && (P.style.top = f.value.y + "px")));
    }
  }
  function H() {
    const i = e.minHeight ? e.minHeight : 1, u = e.minWidth ? e.minWidth : 1;
    d.value && f.value && g.value && v.value && (d.value.height < i && (d.value.height = i, g.value.n && h.value && (f.value.y = h.value.y + (v.value.height - i))), d.value.width < u && (d.value.width = u, g.value.w && h.value && (f.value.x = h.value.x + (v.value.width - u))), e.maxHeight && d.value.height > e.maxHeight && (d.value.height = e.maxHeight, h.value && g.value.n && (f.value.y = h.value.y + (v.value.height - e.maxHeight))), e.maxWidth && d.value.width > e.maxWidth && (d.value.width = e.maxWidth, g.value.w && h.value && (f.value.x = h.value.x + (v.value.width - e.maxWidth))));
  }
  function U() {
    if (n.value) {
      const i = w.value;
      if (f.value && d.value && g.value && v.value) {
        const u = i.width - i.pr - i.deltaL - i.translateX - f.value.x, x = i.height - i.pb - i.deltaT - i.translateY - f.value.y;
        g.value.n && f.value.y + i.translateY < 0 && h.value && (f.value.y = -i.translateY, d.value.height = v.value.height + h.value.y + i.translateY), g.value.w && f.value.x + i.translateX < 0 && h.value && (f.value.x = -i.translateX, d.value.width = v.value.width + h.value.x + i.translateX), d.value.width > u && (d.value.width = u), d.value.height > x && (d.value.height = x);
      }
    }
  }
  function L(i) {
    if (!r.value || !v.value || !h.value || !g.value)
      return;
    i.subtract(r.value);
    const u = i.x, x = i.y;
    g.value.n ? (f.value.y = h.value.y + x, d.value.height = v.value.height - x) : g.value.s && (d.value.height = v.value.height + x), g.value.e ? d.value.width = v.value.width + u : g.value.w && (d.value.width = v.value.width - u, f.value.x = h.value.x + u), U(), H(), z();
  }
  function c(i) {
    if (!M.value)
      return;
    const u = B.fromEvent(i);
    u && L(u);
  }
  function s() {
    if (a.value) {
      const {
        width: i,
        height: u,
        x,
        y: p
      } = a.value.getBoundingClientRect(), P = B.getTransformInfo(a.value);
      return {
        size: {
          width: i,
          height: u
        },
        position: {
          x: x - P.x,
          y: p - P.y
        }
      };
    }
    return null;
  }
  function b(i) {
    if (a.value) {
      const u = s();
      F.value = u;
    }
    r.value = void 0, v.value = null, h.value = null, d.value = null, f.value = null, g.value = null, M.value = null, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", b);
  }
  function T() {
    document.addEventListener("mousemove", c), document.addEventListener("mouseup", b);
  }
  function I(i) {
    i instanceof MouseEvent && i.button === 2 || j.value && (document.body.click(), i.stopPropagation(), i.preventDefault(), r.value = B.fromEvent(i), M.value = i.target, k(i), T());
  }
  function D(i) {
    return a.value = i, N.value && y(ve, null, [y("div", {
      class: "fv-resizable-handle fv-resizable-n",
      type: "n",
      onMousedown: (u) => I(u)
    }, null), y("div", {
      class: "fv-resizable-handle fv-resizable-e",
      type: "e",
      onMousedown: (u) => I(u)
    }, null), y("div", {
      class: "fv-resizable-handle fv-resizable-s",
      type: "s",
      onMousedown: (u) => I(u)
    }, null), y("div", {
      class: "fv-resizable-handle fv-resizable-w",
      type: "w",
      onMousedown: (u) => I(u)
    }, null), y("div", {
      class: "fv-resizable-handle fv-resizable-ne",
      type: "ne",
      onMousedown: (u) => I(u)
    }, null), y("div", {
      class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal",
      type: "se",
      onMousedown: (u) => I(u)
    }, null), y("div", {
      class: "fv-resizable-handle fv-resizable-sw",
      type: "sw",
      onMousedown: (u) => I(u)
    }, null), y("div", {
      class: "fv-resizable-handle fv-resizable-nw",
      type: "nw",
      onMousedown: (u) => I(u)
    }, null)]);
  }
  function W(i = !0) {
    document.body.click();
    const u = n.value || document.body, x = X.getCurrent(u), p = a.value;
    i && p && (S.value = s(), S.value.transform = p.style.transform), x && p && (d.value = x, d.value.height -= 14, d.value.width -= 14, p.style.height = d.value.height + "px", p.style.width = d.value.width + "px", p.style.left = "7px", p.style.top = "7px", p.style.transform = "", F.value = {
      size: d.value,
      position: {
        x: 0,
        y: 0
      }
    }, j.value = !1, O.value = !0);
  }
  function G() {
    var i, u;
    if (document.body.click(), S.value) {
      const x = {
        width: S.value.size.width || 0,
        height: S.value.size.height || 0
      }, p = {
        x: (window.innerWidth - x.width) / 2,
        y: (window.innerHeight - x.height) / 2
      };
      (i = d.value) == null || i.set(x), (u = f.value) == null || u.set(p);
      const P = a.value;
      P.style.height = x.height + "px", P.style.width = x.width + "px", P.style.left = `${p.x}px`, P.style.top = `${p.y}px`, P.style.transform = "", F.value = {
        size: x,
        position: p
      }, j.value = e.draggable, O.value = !1;
    }
  }
  function _() {
    if (a.value) {
      const i = X.getCurrent(a.value);
      if (i) {
        const {
          width: u,
          height: x
        } = i;
        a.value.style.left = `${(window.innerWidth - u) / 2}px`, a.value.style.top = `${(window.innerHeight - x) / 2}px`, a.value.style.transform = "";
      }
    }
  }
  function Q() {
    const i = () => {
      O.value ? W(!1) : _(), document.body.click();
    };
    return window.addEventListener("resize", i), () => {
      window.removeEventListener("resize", i);
    };
  }
  const q = Q();
  return {
    renderResizeBar: D,
    boundingElement: n,
    resizedEventParam: F,
    maximize: W,
    restore: G,
    allowDrag: j,
    isMaximized: O,
    unWindowResizeHandle: q,
    moveToCenter: _
  };
}
function ot(e, t, a) {
  const n = o(), r = o(e.draggable), v = o(e.lockAxis), h = o(), d = o(), f = o(!1), g = o(new B(0, 0)), M = o(new B(0, 0)), w = o(new B(0, 0)), F = o(new B(0, 0));
  A(() => a.value, (c) => {
    h.value.style.cursor = c ? "move" : "default";
  });
  function N(c, s) {
    if (s.tagName === "BUTTON")
      return !1;
    if (s === c)
      return !0;
    for (const b in s.children)
      if (Object.prototype.hasOwnProperty.call(s.children, b) && N(c, s.children[b]))
        return !0;
    return !1;
  }
  function S() {
    var T, I;
    let c = w.value.x + M.value.x, s = w.value.y + M.value.y;
    v.value === "x" ? (c = ((T = g.value) == null ? void 0 : T.x) || 0, w.value.x = 0) : v.value === "y" && (s = ((I = g.value) == null ? void 0 : I.y) || 0, w.value.y = 0);
    const b = `translate3d(${Math.round(c)}px, ${Math.round(s)}px, 0px)`;
    n.value && (n.value.style.transform = b), F.value.x = c, F.value.y = s;
  }
  function j() {
    if (!d.value || !n.value)
      return null;
    const c = d.value.getBoundingClientRect(), s = n.value.getBoundingClientRect(), b = {
      top: c.top < s.top,
      right: c.right > s.right,
      bottom: c.bottom > s.bottom,
      left: c.left < s.left
    };
    return b.top || (w.value.y -= s.top - c.top), b.bottom || (w.value.y -= s.bottom - c.bottom), b.right || (w.value.x -= s.right - c.right), b.left || (w.value.x -= s.left - c.left), S(), b;
  }
  function O(c) {
    c && (g.value && c.subtract(g.value), w.value.set(c), S(), j());
  }
  function R(c) {
    f.value && r.value && (c.stopPropagation(), c.preventDefault(), O(B.fromEvent(c, h.value)));
  }
  function k() {
    var c;
    if (f.value) {
      if (f.value = !1, M.value.add(w.value), w.value.reset(), (c = n.value) == null || c.classList.remove("ng-dragging"), !e.useTransform && n.value) {
        const { left: s, top: b } = n.value.getBoundingClientRect();
        n.value.style.left = Math.ceil(s) + "px", n.value.style.top = Math.ceil(b) + "px", n.value.style.transform = "none";
      }
      t.emit("stopMove"), document.removeEventListener("mousemove", R), document.removeEventListener("mouseup", k);
    }
  }
  function z() {
    !f.value && h.value && (f.value = !0, h.value.classList.add("ng-dragging"), document.addEventListener("mousemove", R), document.addEventListener("mouseup", k));
  }
  function H() {
    if (n.value) {
      const c = B.getTransformInfo(n.value);
      M.value.set(c);
      return;
    }
    M.value.reset();
  }
  function U(c) {
    if (!a.value || c instanceof MouseEvent && c.button === 2)
      return;
    const s = c.target || c.srcElement;
    h.value !== void 0 && s && !N(s, h.value) || r.value !== !1 && (document.body.click(), c.stopPropagation(), c.preventDefault(), g.value = B.fromEvent(c, n.value), H(), z());
  }
  function L(c, s, b) {
    if (r.value && s) {
      if (c)
        h.value = c;
      else if (e.dragHandle) {
        if (e.dragHandle instanceof HTMLElement)
          h.value = e.dragHandle;
        else if (typeof e.dragHandle == "string") {
          const T = s.querySelector(e.dragHandle);
          T && (h.value = T);
        }
      }
      n.value = s, d.value = b, h.value ? (h.value.classList.add("ng-draggable"), h.value.addEventListener("mousedown", U)) : r.value = !1;
    }
  }
  return {
    registerDraggle: L,
    resetTranslate: H
  };
}
function me(e, t) {
  if (e) {
    const a = (n) => {
      n.key.toLowerCase() === e.toLowerCase() && t({ event: n, key: e });
    };
    return document.addEventListener("keydown", a), () => {
      document.removeEventListener("keydown", a);
    };
  }
}
function st(e, t) {
  const a = o(e.enableEsc);
  let n = null;
  return a.value ? (n = me("Escape", (r) => {
    t.emit("esc", { event: r.event, type: "esc" });
  }), {
    remove: n
  }) : null;
}
function it(e, t) {
  const a = o(e.enableEnter);
  let n = null;
  return a.value ? (n = me("Enter", (r) => {
    t.emit("enter", { event: r.event, type: "enter" });
  }), {
    remove: n
  }) : null;
}
const J = /* @__PURE__ */ $e({
  name: "FModal",
  props: at,
  emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter", "stopMove", "buttonClick"],
  setup(e, t) {
    const a = o(e.width || 300), n = o(e.height || 200), r = o(e.modelValue), v = o(""), h = o(e.class), d = o(e.fitContent), f = o(e.showHeader), g = o(""), M = o(e.showCloseButton), w = o(e.showMaxButton), F = o(!1), N = o(e.dialogType), S = o(e.src), j = o(""), O = o(e.showButtons), R = o(e.title), k = o(e.containment || null), z = o();
    R.value === "错误提示" && (R.value = Z.getLocaleValue("messageBox.errorTitle"));
    const H = o(!1);
    function U() {
      const l = document.querySelectorAll(".farris-modal").length;
      (!l || l - 1 <= 0) && z.value === document.querySelectorAll(".farris-modal")[0] && document.body.classList.remove("modal-open"), z.value && z.value.classList.remove("show");
    }
    function L(l, m) {
      const C = m ? "accept" : "cancel";
      Promise.resolve().then(() => {
        var E;
        return (E = e.beforeClose) == null ? void 0 : E.call(e, {
          closeType: C
        });
      }).then((E) => {
        E && (r.value = !1, t.emit("update:modelValue", !1), m != null && t.emit(m ? "accept" : "cancel"), t.emit("closed", l), U());
      });
    }
    const c = [{
      name: "cancel",
      text: Z.getLocaleValue("messageBox.cancel") || "取消",
      class: "btn btn-secondary",
      handle: (l) => {
        L(l, !1);
      }
    }, {
      name: "accept",
      text: Z.getLocaleValue("messageBox.ok") || "确定",
      class: "btn btn-primary",
      handle: (l) => {
        L(l, !0);
      }
    }], s = o(e.buttons && e.buttons.length ? e.buttons : c), b = V(() => !!g.value), T = V(() => !!O.value && !!s.value), I = o(), D = o(), W = o(e.maximized || !1), {
      renderResizeBar: G,
      maximize: _,
      restore: Q,
      boundingElement: q,
      resizedEventParam: i,
      allowDrag: u,
      unWindowResizeHandle: x,
      moveToCenter: p
    } = nt(e), {
      registerDraggle: P
    } = ot(e, t, u);
    function oe() {
      return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open");
    }
    A(() => e.title, (l, m) => {
      l !== m && (R.value = l);
    }), A(() => e.modelValue, (l, m) => {
      l !== m && (r.value = l, r.value && e.draggable && ne(() => {
        D.value && !k.value && (k.value = D.value.parentElement, q.value = k.value, P(I.value, D.value, q.value), p());
      }), l || (k.value && (k.value = null), U())), r.value ? H.value = oe() : (W.value = !1, u.value = e.draggable);
    }), A(() => e.showHeader, (l, m) => {
      l !== m && (f.value = l);
    }), A(() => e.showButtons, (l, m) => {
      l !== m && (O.value = l);
    }), A(() => i.value, (l, m) => {
      const C = l || {}, E = m || {};
      JSON.stringify(C) !== JSON.stringify(E) && t.emit("resize", {
        newSize: l,
        oldSize: m,
        isMaximized: W.value
      });
    }), A([() => e.width, () => e.height], (l, m) => {
      (l[0] !== m[0] || l[1] !== m[1]) && (a.value = l[0] || 500, n.value = l[1] || 600);
    }), A(() => e.class, (l, m) => {
      h.value = l;
    });
    const K = V(() => (r.value && document.body.classList.add("modal-open"), r.value)), ye = V(() => {
      var C;
      const l = {
        modal: !0,
        "farris-modal": !0,
        fade: !0,
        "fe-cmp-page-modal": !!e.showFloatingClose
      };
      l["f-modal-fitContent"] = !!d.value, l.show = !!K.value;
      const m = (C = e.maskClass) == null ? void 0 : C.split(" ");
      return m == null || m.reduce((E, Y) => (E[Y] = !0, E), l), l;
    }), be = V(() => {
      var C;
      const l = {
        "modal-dialog": !0
      }, m = (C = h.value) == null ? void 0 : C.split(" ");
      return m == null || m.reduce((E, Y) => (E[Y] = !0, E), l), l;
    }), we = () => re() && !e.isMessager || !!e.fullscreen, pe = V(() => {
      const l = document.documentElement.clientWidth, m = document.documentElement.clientHeight;
      if (W.value)
        return {
          position: "fixed",
          top: "0px",
          left: "0px",
          width: "100vw",
          height: "100vh",
          margin: "0"
        };
      const C = Math.min(a.value, l), E = e.position === "right" ? "100%" : d.value ? "auto" : `${Math.min(n.value, m - 10)}px`, Y = `${(window.innerHeight - (E === "100%" || E === "auto" ? 0 : parseInt(E))) / 2}px`, De = e.position === "right" ? `${window.innerWidth - C}px` : `${(window.innerWidth - C) / 2}px`, ue = {
        position: "absolute",
        top: Y,
        left: De,
        width: re() ? "auto" : `${C}px`,
        height: E
      };
      return e.mask || (ue.pointerEvents = "auto"), ue;
    }), se = o(de() || 1050), xe = V(() => {
      const l = {
        display: "block",
        overflow: "hidden"
      };
      return e.mask || (l.pointerEvents = "none", l.backgroundColor = "transparent"), H.value && (l.backgroundColor = "transparent"), l.zIndex = se.value, l;
    }), Ce = V(() => ({
      "modal-content": !0,
      "modal-content-has-header": f.value,
      "is-mobile": we()
    })), Me = V(() => {
      const l = {
        display: f.value ? "" : "none"
      };
      return l["pointer-events"] = u.value ? "auto" : "none", l;
    }), Ee = V(() => ({
      "f-icon": !0,
      modal_maximize: !0,
      modalrevert: W.value
    })), ze = V(() => ({
      "modal-body": !0,
      "f-utils-flex-column": N.value === "iframe",
      "f-utils-fill": !0
    }));
    function Be() {
      return {
        height: `${e.footerHeight || 60}px`
      };
    }
    const ke = V(() => {
      const l = {
        textAlgin: j.value
      }, m = Be();
      return Object.assign(l, m);
    });
    function ee(l) {
      if (l == null || l.stopPropagation(), W.value) {
        W.value = !1, Q();
        return;
      }
      _(), W.value = !0;
    }
    async function Pe(l, m) {
      l.handle ? await l.handle(m, l) && t.emit("closed", m) : t.emit("buttonClick", {
        button: l,
        $event: m
      });
    }
    function He(l) {
      l.width && (a.value = l.width), l.height && (n.value = l.height), l.buttons && (s.value = l.buttons), l.title && (R.value = l.title);
    }
    let te = null, le = null;
    Ae(() => {
      H.value = oe();
    }), fe(() => {
      D.value && !k.value && (k.value = D.value.parentElement, q.value = k.value, P(I.value, D.value, q.value)), K.value && document.body.classList.add("modal-open"), te = st(e, t), le = it(e, t);
    }), he(() => {
      x && x(), te && te.remove(), le && le.remove();
    }), t.expose({
      modalElementRef: D,
      updateModalOptions: He,
      close: L,
      maxDialog: ee,
      isMaximized: W,
      disableButtons: (l, m = !0) => {
        s.value.forEach((C) => {
          C.name && l.includes(C.name) && (C.disabled = m);
        });
      }
    });
    function Te() {
      return y("div", {
        class: "action-wrapper",
        onClick: (l) => L(l, !1)
      }, [y("span", {
        class: "close-icon"
      }, [y("i", {
        class: "f-icon f-icon-close"
      }, null)])]);
    }
    function Se() {
      return y("ul", null, [F.value && y("li", {
        class: "f-btn-icon f-bare"
      }, [y("span", {
        class: "f-icon modal_minimize"
      }, null)]), w.value && y("li", {
        onClick: ee,
        class: "f-btn-icon f-bare",
        style: "pointer-events: auto;"
      }, [y("span", {
        class: Ee.value
      }, null)]), M.value && y("li", {
        class: "f-btn-icon f-bare",
        onClick: (l) => L(l, !1),
        style: "pointer-events: auto;"
      }, [y("span", {
        class: "f-icon modal_close"
      }, null)])]);
    }
    const Ie = (l) => {
      l.preventDefault();
      const m = l.currentTarget, C = l.deltaY * 0.5;
      m.scrollLeft += C;
    };
    function Fe() {
      return y("div", {
        class: "modal-footer",
        style: ke.value
      }, [s.value && y("div", {
        class: "buttons",
        onWheel: Ie
      }, [s.value.map((l) => {
        var E;
        const m = o(l.disabled), C = l.class || ((E = l.appearance) == null ? void 0 : E.class);
        return y("button", {
          name: l.name,
          style: l.styles,
          type: "button",
          disabled: m.value,
          class: C + (l.iconClass ? " btn-icontext" : "") + (l.visible === !1 ? "d-none" : ""),
          onClick: (Y) => {
            Pe(l, Y);
          }
        }, [!!l.iconClass && y("i", {
          class: l.iconClass
        }, null), l.text]);
      })])]);
    }
    function ie(l) {
      w.value && ee();
    }
    function Re() {
      return y(ve, null, [W.value && y("div", {
        class: "modal-header",
        style: "position: absolute;background: transparent;height: 45px;width: 100%;",
        onDblclick: (l) => ie()
      }, null), y("div", {
        ref: I,
        class: "modal-header",
        style: Me.value,
        onDblclick: (l) => ie()
      }, [t.slots.headerTemplate ? t.slots.headerTemplate() : y("div", {
        class: "modal-title"
      }, [b.value && y("span", {
        class: g.value,
        style: "margin-right: 8px"
      }, null), y("span", {
        class: "modal-title-label"
      }, [R.value])]), y("div", {
        class: "actions"
      }, [Se()])])]);
    }
    function Oe() {
      return t.slots.footerTemplate ? t.slots.footerTemplate() : T.value && Fe();
    }
    function Le(l) {
      if (l.stopPropagation(), e.allowClickMaskToClose) {
        if (l.target !== z.value)
          return;
        L(l, !1);
      }
    }
    function We() {
      var l, m;
      return y("div", {
        id: v.value,
        class: be.value,
        style: pe.value,
        ref: D
      }, [e.showFloatingClose && Te(), y("div", {
        class: Ce.value
      }, [f.value && Re(), y("div", {
        class: ze.value
      }, [(m = (l = t.slots).default) == null ? void 0 : m.call(l), N.value === "iframe" && y("iframe", {
        title: v.value,
        class: "f-utils-fill",
        width: "100%",
        frameborder: "0",
        src: S.value
      }, null)]), Oe()]), !d.value && D.value && !W.value && G(D.value)]);
    }
    function je(l) {
      return l || "body";
    }
    return Ue(() => {
      K.value && (se.value = de() || 1050);
    }), () => y(Ye, {
      to: je(e.host)
    }, {
      default: () => [K.value && y(Xe, {
        name: "fade",
        appear: !0
      }, {
        default: () => [y("div", {
          ref: z,
          class: ye.value,
          style: xe.value,
          onClick: Le
        }, [We()])]
      })]
    });
  }
});
function ge(e) {
  if (e.content && e.content.render)
    return e.content.render;
  if (e.render && typeof e.render == "function")
    return e.render;
}
function ut(e) {
  const t = document.createElement("div");
  t.style.display = "contents";
  const a = Ke({
    setup(n, r) {
      he(() => {
        document.body.removeChild(t);
      });
      const v = o(), h = o(e.class || ""), d = o(!!e.showButtons), f = o(!!e.showHeader), g = o(e.showCloseButton == null ? !0 : e.showCloseButton), M = o(!!e.showFloatingClose), w = o(!0), F = o(e.title || ""), N = e.acceptCallback || (() => {
      }), S = e.rejectCallback || (() => {
      }), j = e.closedCallback || ((H) => {
      }), O = e.resizeHandle || ((H) => {
      }), R = e.stopMoveHandle || ((H) => {
      }), k = ge(e), z = (H) => {
        w.value = !1, a.unmount(), j(H);
      };
      return fe(() => {
      }), r.expose({
        modalRef: v
      }), () => y(J, {
        ref: v,
        class: h.value,
        modelValue: w.value,
        "onUpdate:modelValue": (H) => w.value = H,
        title: F.value,
        width: e.width,
        height: e.height,
        buttons: e.buttons,
        "show-header": f.value,
        "show-buttons": d.value,
        "show-close-button": g.value,
        "show-max-button": !1,
        showFloatingClose: M.value,
        onAccept: N,
        onCancel: S,
        fitContent: e.fitContent == null ? !0 : e.fitContent,
        onClosed: z,
        onResize: O,
        onStopMove: R
      }, {
        default: () => [k && k(a)]
      });
    }
  });
  return document.body.appendChild(t), a.use(Z.i18n), a.mount(t), a;
}
class rt {
  // private activeModalInstance = computed(() => {
  //     return this.modalRefs[this.activeModalIndex.value];
  // });
  constructor(t) {
    $(this, "appContext", null);
    $(this, "modalRef", o());
    $(this, "activeModalIndex", o(0));
    $(this, "modalRefs", {});
    $(this, "isUseEscCloseModal", o(!1));
    this.app = t, this.appContext = t ? t._context : null;
  }
  getCurrentModal() {
    return this.modalRefs[this.activeModalIndex.value];
  }
  adaptToWindow(t, a) {
    const {
      width: n,
      height: r
    } = {
      width: window.innerWidth,
      height: window.innerHeight
    };
    return n < t && (t = n - 14), r < a && (a = r - 14), {
      width: t,
      height: a
    };
  }
  static show(t) {
    const a = Object.assign({
      title: "",
      showButtons: !0,
      showHeader: !0
    }, t);
    return ut(a);
  }
  close(t) {
    var a, n;
    t ? (n = t.value) == null || n.close() : (a = this.getCurrentModal()) == null || a.close();
  }
  open(t) {
    const a = document.createDocumentFragment();
    t.showMaxButton && t.fitContent && (t.showMaxButton = !1);
    const n = qe(Object.assign({
      title: "",
      showButtons: !0,
      showHeader: !0,
      maximized: !1
    }, t)), r = o(!0), v = n.value.acceptCallback || (() => {
    }), h = n.value.rejectCallback || (() => {
    }), d = n.value.closedCallback || ((s, b) => {
    }), f = n.value.openedCallback || ((s) => {
    }), g = n.value.resizeHandle || ((s) => {
    }), M = t.stopMoveHandle || ((s) => {
    });
    let w;
    const F = ge(n.value), N = (s) => {
      var T;
      r.value = !1;
      const b = (T = s == null ? void 0 : s.target) == null ? void 0 : T.classList.contains("modal_close");
      d(s, this.isUseEscCloseModal.value ? "esc" : b ? "icon" : "button");
    }, S = (s) => {
      N(s), w && ne(() => {
        if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], ae(null, a), w = null, this.modalRef.value = null, this.modalRefs) {
          const b = Object.keys(this.modalRefs).map((T) => Number(T));
          b.length > 0 ? this.activeModalIndex.value = Math.max(...b) : this.activeModalIndex.value = 0, this.modalRefs[this.activeModalIndex.value] && (this.modalRef.value = this.modalRefs[this.activeModalIndex.value]);
        }
        this.isUseEscCloseModal.value = !1;
      });
    }, j = (s) => {
      var b;
      this.isUseEscCloseModal.value = !0, (b = this.getCurrentModal()) == null || b.close(s == null ? void 0 : s.event);
    }, {
      width: O,
      height: R
    } = n.value, k = this.adaptToWindow(O || 500, R || 320);
    Object.assign(n.value, k);
    const z = o(), H = () => y(J, Ze({
      ref: z,
      modelValue: r.value,
      "onUpdate:modelValue": (s) => r.value = s
    }, n.value, {
      isMessager: n.value.class && n.value.class.indexOf("modal-message") > -1,
      onAccept: v,
      onCancel: h,
      onClosed: S,
      onResize: g,
      onEsc: j,
      onStopMove: M,
      maximized: n.value.maximized
    }), {
      default: () => [F && F(this.app)]
    });
    w = ((s) => {
      const b = Je(H, s);
      return b.appContext = this.appContext, ae(b, a), b;
    })({
      ...n.value
      // 'onUpdate:modelValue': onUpdateModelValue,
    }), this.activeModalIndex.value++;
    const L = this.activeModalIndex.value;
    this.modalRefs[L] = z.value;
    const c = (s) => {
      n.value = {
        ...n.value,
        ...s
      }, w && ae(_e(w, {
        ...n
      }), a);
    };
    return ne(() => {
      this.modalRefs[L] = z.value, this.modalRef.value = z.value, f(new Event("opened"));
    }), {
      update: c,
      destroy: S,
      modalRef: z,
      close: () => {
        var s;
        (s = z.value) == null || s.close();
      },
      disableButtons: (s, b = !0) => {
        var T;
        (T = z.value) == null || T.disableButtons(s, b);
      }
    };
  }
}
const dt = [
  {
    label: "beforeClose",
    name: "关闭前事件"
  },
  {
    label: "onAccept",
    name: "确定事件"
  },
  {
    label: "onCancel",
    name: "取消事件"
  }
], ce = (e) => e && e.length ? e.map((t) => `${t.name}[${t.bindingPath}]`).join(",") : "";
class pt extends Qe {
  constructor(a, n) {
    super(a, n);
    $(this, "numberEditor", {
      type: "number-spinner",
      useThousands: !1
    });
    $(this, "buttonProperty", new et(this.componentId, this.designerHostService, !1));
  }
  getPropertyConfig(a) {
    const n = this.getEventPropConfig(a);
    return this.propertyConfig.categories.dialog = this.getDialogPropertyConfig(a), this.propertyConfig.categories.eventsEditor = n, this.propertyConfig;
  }
  getToDataSource() {
    const a = this.designViewModelUtils.getAllFields2TreeByVMId(this.viewModelId), n = this.schemaService.getPrimaryField();
    return n ? a.filter((r) => r.data.bindingPath !== n) : a;
  }
  getModalButtons(a) {
    const n = this.formSchemaUtils.getExternalComponents().find((r) => r.id === a);
    return n ? n.buttons || [] : [];
  }
  setModalButtons(a, n) {
    const r = this.formSchemaUtils.getExternalComponents().find((v) => v.id === a);
    r && (r.buttons = n);
  }
  getDialogPropertyConfig(a) {
    const n = this.getModalButtons(a.id);
    return {
      description: "窗口尺寸配置",
      title: "窗口",
      parentPropertyID: "dialog",
      properties: {
        showHeader: {
          description: "是否展示头部",
          title: "是否展示头部",
          type: "boolean",
          refreshPanelAfterChanged: !0
        },
        title: {
          description: "标题",
          title: "标题",
          type: "string",
          visible: !!a.showHeader
        },
        width: {
          description: "窗口宽度，单位：px，最小值：300px，最大值：3000px",
          title: "宽度",
          type: "number",
          editor: {
            ...this.numberEditor,
            min: 300,
            max: 3e3
          }
        },
        height: {
          description: "窗口高度，单位：px，最小值：200px，最大值：2000px",
          title: "高度",
          type: "number",
          editor: {
            ...this.numberEditor,
            min: 200,
            max: 2e3
          }
        },
        resizeable: {
          description: "允许鼠标拖拽窗口边缘调整尺寸",
          title: "允许调整窗口尺寸",
          type: "boolean",
          visible: !0
        },
        enableEsc: {
          description: "允许ESC关闭",
          title: "允许ESC关闭",
          type: "boolean",
          visible: !1
        },
        showMaxButton: {
          description: "显示最大化按钮",
          title: "显示最大化按钮",
          type: "boolean",
          visible: !0
        },
        showCloseButton: {
          description: "显示关闭按钮",
          title: "显示关闭按钮",
          type: "boolean",
          visible: !0
        },
        mapFields: {
          description: "弹出表单选中的数据映射到表单字段",
          title: "映射字段",
          type: "string",
          visible: !1,
          editor: {
            type: "mapping-editor",
            modalWidth: 800,
            modalHeight: 600,
            editable: !1,
            beforeOpen: ({ fromDataSource: r, toDataSource: v, gridColumns: h, repository: d }) => {
              if (!a.contents || !a.contents.length || !a.contents[0].externalComponent)
                return { open: !1, messager: "请选择一个表单" };
              const { id: f, relativePath: g } = a.contents[0].externalComponent;
              return v.value = this.getToDataSource(), h[1].editor.data = v.value, this.metadataService.getRefMetadata(g, f).then((M) => {
                let w = JSON.parse(M.data.content).Contents;
                typeof w == "string" && (w = JSON.parse(w)), r.value = d.buildTreeData(w.module.entity[0]), h[0].editor.data = v.value;
              }), !0;
            },
            fromData: {
              editable: !0,
              formatter: (r, v) => `${v.raw.name} [${v.raw.bindingPath}]`,
              idField: "bindingPath",
              textField: "name",
              valueField: "bindingPath",
              searchFields: ["name", "bindingPath"],
              repositoryToken: tt,
              displayFormatter: ce
            },
            toData: {
              editable: !1,
              idField: "bindingPath",
              textField: "name",
              valueField: "bindingPath",
              searchFields: ["name", "bindingPath"],
              formatter: (r, v) => `${v.raw.name} [${v.raw.bindingPath}]`,
              displayFormatter: ce
            }
          }
        },
        showButtons: {
          description: "是否显示底部按钮组",
          title: "显示底部按钮组",
          type: "boolean",
          refreshPanelAfterChanged: !0,
          visible: !0
        },
        buttons: {
          description: "弹窗底部自定义按钮, 未设置时使用默认按钮，显示取消、确定",
          title: "按钮组",
          type: "array",
          defaultValue: `共 ${n.length} 项`,
          visible: !1,
          // propertyData.showButtons == null || propertyData.showButtons === true,
          $converter: {
            convertFrom: () => `共 ${n.length} 项`
          },
          editor: {
            type: "button-edit",
            editable: !1,
            enableClear: !0,
            buttonContent: '<i class="f-icon f-icon-lookup"></i>',
            onClear: () => {
              const { messagerService: r } = this.designerHostService;
              r.question("您确定要清空所有按钮吗？", "", () => {
                this.setModalButtons(a.id, []), this.getFormDesignerInstance().reloadPropertyPanel();
              }, () => {
                this.getFormDesignerInstance().reloadPropertyPanel();
              });
            },
            onClickButton: () => {
              lt(this.designerHostService, {
                buttons: n,
                modalPropertyData: a,
                componentId: this.componentId,
                viewModelId: this.viewModelId,
                forModalFooter: !0
              }).show(() => {
                this.getFormDesignerInstance().reloadPropertyPanel();
              });
            }
          }
        }
      }
    };
  }
  getEventPropConfig(a) {
    const n = this, r = dt, v = n.eventsEditorUtils.formProperties(a, n.viewModelId, r);
    return {
      title: "事件",
      hideTitle: !0,
      properties: n.createBaseEventProperty(v),
      refreshPanelAfterChanged: !0,
      tabId: Ge,
      tabName: "交互",
      setPropertyRelates(d, f) {
        const g = d.propertyValue;
        delete a[n.viewModelId], g && n.eventsEditorUtils.saveRelatedParameters(a, n.viewModelId, g.events, g), r.forEach((M) => {
          f[M.label] = a[M.label];
        });
      }
    };
  }
}
const ct = Symbol("FModalService");
J.install = (e) => {
  e.component(J.name, J);
  const t = new rt(e);
  e.provide(ct, t), e.provide("FModalService", t);
};
export {
  J as FModal,
  rt as FModalService,
  ct as F_MODAL_SERVICE_TOKEN,
  pt as ModalProperty,
  J as default,
  at as modalProps,
  ot as useDraggable,
  nt as useResizeable
};